/* Visual layer: Bauplan look, type, motion. Loaded after the inline page styles. */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/space-grotesk-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--font-head:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--ease:cubic-bezier(.2,.8,.2,1)}
h1,h2,h3,.btn-primary,.nav-cta,.section-label{font-family:var(--font-head)}
.section-title,.demo-text h2{font-weight:700;letter-spacing:-.035em;line-height:1.05;font-size:clamp(34px,5vw,68px)}
.section-label{letter-spacing:.18em}

/* scroll progress */
.fx-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;background:var(--orange);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* HERO */
.hero{background:radial-gradient(1200px 700px at 78% 35%,rgba(232,92,30,.22),transparent 60%),var(--navy)}
.hero-bg{opacity:.18;mix-blend-mode:luminosity}
.hero::before{background:linear-gradient(100deg,rgba(10,22,40,.92) 0%,rgba(10,22,40,.6) 60%,rgba(10,22,40,.3) 100%)}
.fx-grid{position:absolute;inset:0;z-index:1;pointer-events:none;
 background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
 background-size:120px 120px,120px 120px,24px 24px,24px 24px;
 -webkit-mask-image:radial-gradient(ellipse 90% 80% at 60% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 90% 80% at 60% 45%,#000 20%,transparent 75%);
 animation:gridIn 1.6s var(--ease) both}
@keyframes gridIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.fx-dim{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;height:60px;color:rgba(232,92,30,.7)}
.hero-text h1{font-size:clamp(44px,6.4vw,92px);font-weight:700;letter-spacing:-.045em;line-height:.98;margin-bottom:32px}
.hero-text h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero-text h1 .ln>span{display:block;transform:translateY(110%);animation:lnUp .9s var(--ease) forwards}
.hero-text h1 .ln:nth-child(2)>span{animation-delay:.12s}.hero-text h1 .ln:nth-child(3)>span{animation-delay:.24s}
.hero-text h1 .ln>span{color:#fff}
.hero-text h1 .ln.soft>span{color:rgba(255,255,255,.72)}
.hero-text h1 .ln.soft{font-size:.4em;letter-spacing:-.02em;font-weight:500;margin-top:.5em;line-height:1.2}
@keyframes lnUp{to{transform:none}}
.hero-text h1 .ln>span .mark,.hero-text h1 .mark{color:var(--orange);position:relative;display:inline-block}
.hero-text h1 .mark::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.07em;background:var(--orange);transform:scaleX(0);transform-origin:0 50%;animation:ul .8s .9s var(--ease) forwards}
@keyframes ul{to{transform:scaleX(1)}}
.hero-sub{color:rgba(255,255,255,.72)}
.btn-primary{border-radius:999px;box-shadow:0 10px 30px rgba(232,92,30,.35);position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:sheen 4s 2s infinite}
@keyframes sheen{to{transform:translateX(120%)}}
.btn-ghost{border-radius:999px}
.hero-mockup{perspective:1400px}
.phone-frame{border-radius:48px;box-shadow:0 60px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1),0 0 120px rgba(232,92,30,.18)}
.fx-float{position:absolute;z-index:3;background:rgba(255,255,255,.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:12px 16px;color:#fff;font-size:13px;line-height:1.35;box-shadow:0 20px 40px rgba(0,0,0,.35);opacity:0;animation:floatIn .8s var(--ease) forwards,bob 6s ease-in-out infinite;will-change:transform}
.fx-float b{display:block;font-family:var(--font-head);font-size:15px}
.fx-float small{color:rgba(255,255,255,.7)}
.fx-float .ok{color:#4ade80}
.fx-f1{left:-40px;top:18%;animation-delay:2.2s,2.2s}.fx-f2{right:-50px;top:46%;animation-delay:3.2s,3.2s}.fx-f3{left:-20px;bottom:12%;animation-delay:4.2s,4.2s}
@keyframes floatIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* MARQUEE */
.fx-marquee{background:var(--orange);color:#fff;overflow:hidden;white-space:nowrap;padding:16px 0;position:relative;z-index:2}
.fx-marquee-track{display:inline-flex;gap:0;animation:marq 38s linear infinite}
.fx-marquee:hover .fx-marquee-track{animation-play-state:paused}
.fx-marquee span{font-family:var(--font-head);font-weight:700;font-size:clamp(18px,2.2vw,26px);letter-spacing:-.01em;padding:0 28px;display:inline-flex;align-items:center;gap:28px}
.fx-marquee span::after{content:"✦";font-size:.7em;opacity:.7}
@keyframes marq{to{transform:translateX(-50%)}}

/* DAY (sticky scroll) */
#feierabend{background:var(--navy)!important;color:#fff;padding:0!important}
.day{display:grid;grid-template-columns:1fr 1fr;gap:64px;max-width:1280px;margin:0 auto;padding:0 48px}
.day-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center}
.day-sticky .section-title{color:#fff;margin-bottom:28px}
.day-clock{font-family:var(--font-head);font-weight:700;font-size:clamp(88px,13vw,200px);line-height:.9;letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:#fff}
.day-clock i{font-style:normal;color:var(--orange)}
.day-bar{margin-top:28px;height:4px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden;max-width:420px}
.day-bar>div{height:100%;width:0;background:var(--orange);transition:width .5s var(--ease)}
.day-mode{margin-top:14px;font-size:14px;color:rgba(255,255,255,.6);max-width:420px}
.day-steps{padding:30vh 0 30vh}
.day-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.22;transition:opacity .5s,transform .5s var(--ease);transform:translateX(14px)}
.day-step.on{opacity:1;transform:none}
.day-step .t{font-family:var(--font-head);font-weight:700;color:var(--orange);font-size:15px;letter-spacing:.14em;margin-bottom:12px}
.day-step .was{font-size:clamp(17px,1.6vw,21px);color:rgba(255,255,255,.55);position:relative;display:inline-block;margin-bottom:14px;max-width:30ch}
.day-step .was::after{content:"";position:absolute;left:0;right:0;top:55%;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s .25s var(--ease)}
.day-step.on .was::after{transform:scaleX(1)}
.day-step .neu{font-family:var(--font-head);font-weight:700;font-size:clamp(24px,2.8vw,40px);line-height:1.1;letter-spacing:-.025em;max-width:20ch}
.day-note{font-size:13px;color:rgba(255,255,255,.5);max-width:520px;margin-top:20px}
@media (max-width:900px){
 .day{grid-template-columns:1fr;gap:0;padding:0 20px}
 .day-sticky{position:sticky;top:64px;height:auto;padding:20px 0 14px;background:var(--navy);box-shadow:0 14px 18px -8px var(--navy);z-index:5;top:72px}
 .day-sticky .section-title{font-size:26px;margin-bottom:6px}.day-sticky .section-label{margin-bottom:8px}.day-clock{font-size:64px}.day-bar,.day-mode{display:none}
 .day-steps{padding:6vh 0 20vh}.day-step{min-height:40vh}
 .fx-f1,.fx-f2,.fx-f3{display:none}
}

/* CARDS / hover depth */
.pain-card,.calc-card,.ba-col{transition:transform .35s var(--ease),box-shadow .35s}
[data-tilt]{transform-style:preserve-3d;will-change:transform}
.reveal{transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.apps-phone{transition:transform .6s var(--ease)}
.apps-phones:hover .apps-phone-a{transform:rotate(-7deg) translateY(-10px)}.apps-phones:hover .apps-phone-b{transform:rotate(6deg) translateY(10px)}
.section-dark{background:radial-gradient(900px 500px at 85% 0%,rgba(232,92,30,.14),transparent 60%),var(--navy)}
.calc-big{font-size:clamp(40px,5vw,64px)}
@media (prefers-reduced-motion:reduce){
 .hero-text h1 .ln>span{animation:none;transform:none}.fx-float{animation:none;opacity:1}.fx-marquee-track,.btn-primary::after{animation:none}.fx-grid{animation:none}.hero-text h1 .mark::after{animation:none;transform:none}
 .day-step{opacity:1;transform:none}.day-step .was::after{transform:scaleX(1)}
}

/* PAIN: editorial rows */
.pain-grid{display:block;margin-top:48px;border-top:1px solid var(--gray-100)}
.pain-card{display:grid;grid-template-columns:minmax(180px,.9fr) 1.3fr;gap:12px 48px;align-items:baseline;padding:28px 8px;border:0;border-bottom:1px solid var(--gray-100);border-radius:0;background:transparent;box-shadow:none;transition:background .3s,padding .3s var(--ease)}
.pain-card::before{display:none}
.pain-card:hover{background:var(--gray-50);padding-left:24px;transform:none!important}
.pain-card .pain-num{font-family:var(--font-head);font-weight:700;font-size:clamp(34px,5vw,72px);letter-spacing:-.04em;line-height:1;color:var(--navy);grid-row:span 2;margin:0;transition:color .3s}
.pain-card:hover .pain-num{color:var(--orange)}
.pain-card h3{font-size:clamp(18px,1.8vw,24px);margin:0;letter-spacing:-.02em}
.pain-card p{margin:0;max-width:56ch}
@media (max-width:760px){.pain-card{grid-template-columns:1fr;padding:22px 0}.pain-card .pain-num{grid-row:auto}}
/* STEPS */
.steps-grid .step{position:relative;overflow:hidden}
.step-num{font-family:var(--font-head);font-weight:700;font-size:clamp(70px,8vw,120px)!important;letter-spacing:-.06em;line-height:.9;color:transparent;-webkit-text-stroke:2px var(--orange);opacity:.9}
.step-icon{display:none!important}
/* section labels as dimension marks */
.section-label{display:flex;align-items:center;gap:12px}
.section-label::before{content:"";width:36px;height:2px;background:currentColor;opacity:.8}
.section-center .section-label{justify-content:center}
/* CTA */
.final-cta{background:radial-gradient(900px 500px at 50% 0%,rgba(232,92,30,.28),transparent 65%),var(--navy);position:relative;overflow:hidden}
.final-cta::before{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)!important;background-size:80px 80px!important;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 70%);opacity:1!important}
.final-cta h2{font-size:clamp(46px,8vw,120px)!important;font-weight:700;letter-spacing:-.05em;line-height:.95!important}
/* pricing + faq polish */
.faq-q{font-family:var(--font-head);letter-spacing:-.01em}

/* Arbeitsabläufe: Zitat + Karten */
.testimonial-quote{font-family:var(--font-head);font-style:normal;font-weight:700;font-size:clamp(26px,3vw,44px);line-height:1.12;letter-spacing:-.035em;color:var(--navy)}
.testimonial-quote::before{content:"“";display:block;font-size:2.4em;line-height:.6;color:var(--orange);margin-bottom:.1em}
.test-card{background:#fff;border:0;border-top:3px solid var(--orange);border-radius:16px;box-shadow:0 12px 30px rgba(10,22,40,.07);transition:transform .35s var(--ease),box-shadow .35s}
.test-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(10,22,40,.13)}
.test-card-stars{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--navy);font-size:20px!important;margin-bottom:14px}
.test-card-author{font-family:var(--font-head);font-weight:700;font-size:18px;letter-spacing:-.02em}
.testimonial-photo img{border-radius:24px;transition:transform .8s var(--ease)}
.testimonial-main:hover .testimonial-photo img{transform:scale(1.03)}
/* Preise */
.pricing-tier{transition:transform .35s var(--ease),box-shadow .35s;border-radius:20px}
.pricing-tier:hover{transform:translateY(-6px)}
.pricing-tier.featured{box-shadow:0 0 0 2px var(--orange),0 30px 70px rgba(232,92,30,.22);position:relative}
.pricing-tier.featured::before{content:"";position:absolute;inset:-2px;border-radius:22px;background:conic-gradient(from var(--a,0deg),transparent 0 70%,var(--orange) 85%,transparent 100%);z-index:-1;animation:spin 6s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
/* Präzision */
.precision-col.good{box-shadow:0 20px 50px rgba(232,92,30,.18)}
.precision-section h2{font-weight:700;letter-spacing:-.04em;line-height:1.05}
/* FAQ */
.faq-item{transition:background .3s}.faq-item:hover{background:rgba(232,92,30,.04)}
/* Cache-sicheres Cursor-Licht auf dunklen Abschnitten */
.section-dark{position:relative}
@media (prefers-reduced-motion:reduce){.pricing-tier.featured::before{animation:none}}

/* FILME */
.film-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
.film-card{margin:0}
.film-poster{all:unset;cursor:pointer;display:block;position:relative;aspect-ratio:9/16;width:100%;border-radius:28px;overflow:hidden;border:5px solid #1b2a44;background:#0f1f38;box-shadow:0 30px 60px rgba(0,0,0,.45);transition:transform .45s var(--ease),box-shadow .45s}
.film-poster:hover,.film-poster:focus-visible{transform:translateY(-8px) rotate(-1deg);box-shadow:0 40px 80px rgba(232,92,30,.3)}
.film-poster img,.film-poster video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--orange);box-shadow:0 10px 30px rgba(232,92,30,.5);transition:transform .3s var(--ease)}
.film-play::after{content:"";position:absolute;left:29px;top:22px;border-left:20px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}
.film-poster:hover .film-play{transform:scale(1.12)}
.film-dur{position:absolute;right:12px;bottom:12px;background:rgba(10,22,40,.75);color:#fff;font:700 12px var(--font-head);padding:4px 9px;border-radius:99px}
.film-card figcaption{margin-top:16px;color:rgba(255,255,255,.65);font-size:14px;line-height:1.5}
.film-card figcaption b{display:block;font-family:var(--font-head);font-size:18px;letter-spacing:-.02em;color:#fff}
.film-note{margin-top:32px;font-size:13px;color:rgba(255,255,255,.5);max-width:640px}
@media (max-width:900px){.film-grid{grid-template-columns:repeat(2,1fr);gap:16px}.film-play{width:56px;height:56px;margin:-28px 0 0 -28px}.film-play::after{left:22px;top:16px;border-left-width:16px;border-top-width:12px;border-bottom-width:12px}}
.calc-big{white-space:nowrap}
@media (max-width:480px){.calc-big{font-size:clamp(28px,8.5vw,36px)}.calc-result{gap:10px}}