/* ============================================================ LADENPILOT — HOME v4 „GLUTLICHT" Die Küche bei Nacht: tiefes Warm-Schwarz, Glut als Lichtquelle. Orange ist kein Akzent mehr, sondern Licht — Verläufe auf den Schlüsselzahlen, Sektions-Glows, Grain, Ghost-Kapitelnummern mit Scroll-Parallaxe, Glas-Nav, Spotlight-Karten. Selektoren sind kompatibel zu script.js + i18n.js (v3-Hooks). ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root{ --bg:#0a0807; --bg2:#0f0c0a; --card:#151110; --card2:#1c1613; --line:rgba(255,243,228,.09); --line2:rgba(255,243,228,.17); --ink:#f6efe3; --mut:#ab9f90; --dim:#7a6f62; --acc:#ff5a1f; --acc-soft:#ff8a5c; --amber:#ffb35c; --good:#3ddc97; --star:#f5b73d; --bad:#e25555; /* Glut-Verlauf für Schlüsselzahlen (background-clip:text) */ --num-a:#ffc07a; --num-b:#ff5a1f; --num-c:#d8380a; --grad-ember:linear-gradient(118deg,var(--num-a) 0%,var(--num-b) 55%,var(--num-c) 100%); /* Oberflächen: dunkler Stahl, Licht fällt von oben */ --surf:linear-gradient(180deg,#181310 0%,#110d0b 100%); --surf2:linear-gradient(180deg,#1e1814 0%,#151110 100%); /* Food-Thumbs: echte Fotos aus den Demo-Assets, Gradient als Fallback-Layer */ --food-pizza:url("img/demo/margherita.webp") center/cover no-repeat,radial-gradient(130% 130% at 32% 20%,#b95c2d 0%,#83401f 55%,#552814 100%); --food-pasta:url("img/demo/tartufo.webp") center/cover no-repeat,radial-gradient(130% 130% at 32% 20%,#bb944f 0%,#84622d 55%,#523d1c 100%); --food-dessert:url("img/demo/tiramisu.webp") center/cover no-repeat,radial-gradient(130% 130% at 32% 20%,#96694e 0%,#674431 55%,#40281c 100%); --food-salad:url("img/demo/mista.webp") center/cover no-repeat,radial-gradient(130% 130% at 32% 20%,#6a9a59 0%,#426c39 55%,#264122 100%); /* Schatten tragen die Glut: warm getönt statt neutral schwarz */ --sh-sm:0 1px 2px rgba(10,5,2,.5); --sh:0 1px 2px rgba(10,5,2,.45),0 30px 60px -30px rgba(15,6,2,.75); --sh-glow:0 0 0 1px rgba(255,90,31,.14),0 18px 50px -18px rgba(255,90,31,.28); --r:18px; --r-lg:26px; --maxw:1280px; --ease:cubic-bezier(.19,1,.22,1); --spring:cubic-bezier(.34,1.56,.64,1); --sec-gap:clamp(110px,15vh,180px); --f-sans:'Satoshi',system-ui,sans-serif; --f-body:'General Sans',system-ui,sans-serif; --f-serif:'Fraunces',Georgia,serif; --grain-o:.05; } [data-theme="light"]{ --bg:#f7f2e9; --bg2:#f0eadf; --card:#fdfaf4; --card2:#f1eadf; --line:rgba(30,22,15,.11); --line2:rgba(30,22,15,.22); --ink:#1d1610; --mut:#60564a; --dim:#94897a; --acc:#e8450b; --acc-soft:#c2410c; --num-a:#f07a26; --num-b:#e8450b; --num-c:#a92e05; --surf:linear-gradient(180deg,#fffcf6 0%,#f8f3ea 100%); --surf2:linear-gradient(180deg,#fbf6ec 0%,#f3ece0 100%); --sh-sm:0 1px 2px rgba(30,22,15,.07); --sh:0 1px 2px rgba(30,22,15,.06),0 26px 52px -28px rgba(30,22,15,.22); --sh-glow:0 0 0 1px rgba(232,69,11,.16),0 18px 46px -20px rgba(232,69,11,.24); --grain-o:.035; } /* ---------- 2. RESET / BASE ---------- */ *{box-sizing:border-box;margin:0;padding:0} /* overflow-x:clip: dekorative Ebenen (Sektions-Glows u. a.) ragen bewusst über den Rand — ohne Clip weitet Mobile-Chrome den Layout-Viewport auf deren Breite und zoomt die ganze Seite heraus (Nav ragt raus, alles wird kleiner) */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip} /* Am muss es clip statt hidden sein: overflow-x:hidden lässt overflow-y zu auto werden, der Body wird damit selbst zum Scroll-Container — und position:sticky im Inneren (die Demo-Bühne in den Leistungen) hört auf zu haften, weil es sich auf diesen nie scrollenden Container bezieht. clip kappt genauso, erzeugt aber keinen Scroll-Container. */ body{ font-family:var(--f-body);background:var(--bg);color:var(--ink); line-height:1.65;font-size:16.5px;overflow-x:clip; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; transition:background .4s var(--ease),color .4s var(--ease); } a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} ul,ol{list-style:none} ::selection{background:var(--acc);color:#fff} /* Grain: bricht die digitale Glätte, liegt über allem */ body::after{ content:"";position:fixed;inset:-40%;z-index:290;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:var(--grain-o); animation:grainShift 1.2s steps(4) infinite; } @keyframes grainShift{ 0%{transform:translate(0,0)}25%{transform:translate(-2%,1.4%)} 50%{transform:translate(1.6%,-1%)}75%{transform:translate(-1%,-1.8%)}100%{transform:translate(0,0)} } /* Touch/kleine Screens: Grain statisch (spart Repaints auf schwachen Geräten) */ @media (pointer:coarse),(max-width:820px){ body::after{animation:none;inset:0} } /* Mobile/Touch: dezente native Scrollbar */ html{scrollbar-width:thin;scrollbar-color:rgba(150,140,125,.35) transparent} ::-webkit-scrollbar{width:9px} ::-webkit-scrollbar-thumb{background:rgba(150,140,125,.3);border-radius:99px;border:2px solid var(--bg)} ::-webkit-scrollbar-track{background:transparent} /* Desktop (feiner Zeiger): native Scrollbar aus — der Custom-Scroller übernimmt */ @media (pointer:fine) and (min-width:821px){ html{scrollbar-width:none;-ms-overflow-style:none} html::-webkit-scrollbar{width:0;height:0} } /* ---- Custom-Scroller: freischwebend rechts, graues Glas (Logik: script.js §9f) ---- */ #cscroll{position:fixed;top:0;right:10px;bottom:0;width:16px;z-index:130; display:flex;justify-content:center;pointer-events:none; opacity:0;transition:opacity .45s var(--ease)} #cscroll.show{opacity:1} #cscroll::before{content:"";position:absolute;top:14px;bottom:14px;width:4px;border-radius:99px; background:color-mix(in srgb,var(--ink) 8%,transparent)} .cscroll-thumb{position:absolute;left:50%;top:0;transform:translateX(-50%); width:7px;border-radius:99px;cursor:grab;pointer-events:auto; background:color-mix(in srgb,var(--mut) 36%,transparent); -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%); border:1px solid color-mix(in srgb,var(--ink) 16%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 4px 14px -4px rgba(0,0,0,.45); transition:width .2s var(--ease),background .3s var(--ease); will-change:transform,height} .cscroll-thumb:hover,#cscroll.dragging .cscroll-thumb{width:10px; background:color-mix(in srgb,var(--mut) 55%,transparent)} #cscroll.dragging .cscroll-thumb{cursor:grabbing} @media (pointer:coarse),(max-width:820px){#cscroll{display:none}} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;width:100%} section{position:relative} .sec{padding:var(--sec-gap) 0 0} h1,h2,h3{font-family:var(--f-sans);font-weight:700;line-height:1.04;letter-spacing:-.03em} .serif-accent{font-family:var(--f-serif);font-style:italic;font-weight:500;letter-spacing:-.01em;font-optical-sizing:auto} strong,b{font-weight:600;color:var(--ink)} /* Glut-Ziffern: die Zahl als Lichtquelle */ .ember-num,.st-zero{ background:var(--grad-ember); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } #progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:220; background:linear-gradient(90deg,var(--amber),var(--acc)); box-shadow:0 0 12px rgba(255,90,31,.55)} /* ---------- 3. BUTTONS ---------- */ .btn{position:relative;display:inline-flex;align-items:center;gap:10px;justify-content:center; padding:12px 24px;border-radius:999px;min-height:46px;overflow:hidden; font-family:var(--f-sans);font-weight:600;font-size:.92rem;letter-spacing:.01em;white-space:nowrap; transition:transform .4s var(--spring),translate .5s var(--spring),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)} .btn svg{width:15px;height:15px;flex-shrink:0;transition:transform .35s var(--ease)} .btn:active{transform:scale(.97)} .btn-primary{background:var(--acc);color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.35),0 10px 30px -12px rgba(255,90,31,.5)} .btn-primary::before{content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.34) 48%,rgba(255,255,255,.05) 52%,transparent 70%); background-size:250% 100%;background-position:120% 0;background-repeat:no-repeat;pointer-events:none} .btn-primary:hover{background:#ff6b35;transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 20px 44px -14px rgba(255,90,31,.65)} .btn-primary:hover::before{animation:btnShine .8s var(--ease)} @keyframes btnShine{from{background-position:120% 0}to{background-position:-60% 0}} .btn-primary:hover svg{transform:translateX(3px)} [data-theme="light"] .btn-primary:hover{background:#f04e12} .btn-line{border:1px solid var(--line2);color:var(--ink);background:transparent} .btn-line:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:translateY(-2px)} .btn-lg{padding:15px 32px;min-height:54px;font-size:.98rem} .btn-ghost{border:1px solid var(--line2);color:var(--ink);background:transparent} .btn-ghost:hover{background:var(--card2)} /* ---------- 4. NAV: morpht beim Scrollen zur Glas-Kapsel ---------- */ #header{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0; transition:padding .45s var(--ease),transform .5s var(--ease)} #header.hide{transform:translateY(-115%)} #header .nav{display:flex;align-items:center;justify-content:space-between;gap:24px; padding:8px 4px;border:1px solid transparent;border-radius:22px; transition:background .45s var(--ease),border-color .45s var(--ease),padding .45s var(--ease),box-shadow .45s var(--ease)} #header.scrolled{padding:10px 0} #header.scrolled .nav{ background:rgba(10,8,7,.8); background:color-mix(in srgb,var(--bg) 76%,transparent); -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%); border-color:var(--line);box-shadow:var(--sh-sm); padding:8px 10px 8px 16px} .brand{display:flex;align-items:center;gap:11px;font-family:var(--f-sans);font-weight:700;font-size:1.14rem;letter-spacing:-.02em} .brand .mark{width:34px;height:34px;display:grid;place-items:center;overflow:hidden} .brand .mark .logo-img{width:100%;height:100%;object-fit:contain} .logo-dark{display:block} .logo-light{display:none} [data-theme="light"] .logo-dark{display:none} [data-theme="light"] .logo-light{display:block} .nav-links{display:flex;gap:2px;align-items:center} .nav-links a{position:relative;padding:8px 13px;color:var(--mut);font-weight:500;font-size:.88rem;transition:color .25s} .nav-links a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1px;background:var(--acc); transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)} .nav-links a:hover,.nav-links a.active{color:var(--ink)} .nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)} .nav-cta{display:flex;align-items:center;gap:8px} .nav-cta .btn-primary{min-height:38px;padding:8px 18px;font-size:.85rem} .nav-cta .btn-primary svg{width:13px;height:13px} .theme-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--mut);transition:color .2s,border-color .2s,transform .4s var(--spring);flex-shrink:0} .theme-toggle:hover{color:var(--ink);border-color:var(--line2);transform:rotate(35deg)} .theme-toggle svg{width:14px;height:14px} .theme-toggle .i-moon{display:none} [data-theme="light"] .theme-toggle .i-moon{display:block} [data-theme="light"] .theme-toggle .i-sun{display:none} .menu-toggle{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);align-items:center;justify-content:center;color:var(--ink)} .menu-toggle .mt-close{display:none} #menuToggle[aria-expanded="true"] .mt-bars{display:none} #menuToggle[aria-expanded="true"] .mt-close{display:block} /* Sprachauswahl (von i18n.js befüllt) */ .lang-switch{position:relative} .ls-btn{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 11px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--mut);font-family:var(--f-sans);font-weight:600;font-size:.72rem;letter-spacing:.03em;cursor:pointer;transition:color .2s,border-color .2s} .ls-btn:hover{color:var(--ink);border-color:var(--line2)} .ls-btn svg{width:13px;height:13px;opacity:.9} .ls-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:180px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--sh);padding:6px;display:none;flex-direction:column;gap:2px;z-index:300} .lang-switch.open .ls-menu{display:flex;animation:lsIn .25s var(--spring) both} @keyframes lsIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}} .ls-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;color:var(--ink);font-size:.9rem;cursor:pointer;text-align:left;transition:background .2s} .ls-item:hover{background:var(--card2)} .ls-item[aria-current="true"]{background:color-mix(in srgb,var(--acc) 13%,transparent)} .ls-flag{font-size:1.05rem;line-height:1} .ls-name{flex:1;font-weight:500} .ls-code{font-size:.7rem;color:var(--dim);font-weight:700} @media (max-width:600px){.ls-btn .ls-cur{display:none}.ls-btn{padding:0 10px;width:38px;justify-content:center}} /* Mobile-Menü: editoriale Nummerierung, große Ziele */ .mobile-menu{position:fixed;inset:0;z-index:99; background:rgba(10,8,7,.97); background:color-mix(in srgb,var(--bg) 97%,transparent); -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px); display:flex;flex-direction:column; padding:calc(84px + env(safe-area-inset-top,0px)) 26px calc(30px + env(safe-area-inset-bottom,0px)); opacity:0;visibility:hidden;transform:translateY(-10px); overflow-y:auto;overscroll-behavior:contain; transition:opacity .3s var(--ease),transform .4s var(--ease),visibility 0s linear .4s} .mobile-menu.open{opacity:1;visibility:visible;transform:none; transition:opacity .3s var(--ease),transform .4s var(--ease)} .mm-inner{width:100%;max-width:460px;margin:0 auto;display:flex;flex-direction:column;counter-reset:mm} .mobile-menu a:not(.btn){display:flex;align-items:center;gap:16px; font-family:var(--f-sans);font-weight:700;font-size:1.65rem;letter-spacing:-.025em; color:var(--ink);padding:17px 2px;min-height:62px;border-bottom:1px solid var(--line); counter-increment:mm; opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease),color .2s} .mobile-menu a:not(.btn)::before{content:counter(mm,decimal-leading-zero); font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:.85rem;color:var(--dim);min-width:26px} .mobile-menu a:not(.btn)::after{content:"→";margin-left:auto;font-size:1.1rem;color:var(--dim);transition:color .2s,transform .3s var(--ease)} .mobile-menu a:not(.btn):active{color:var(--acc)} .mobile-menu a:not(.btn):active::after{color:var(--acc);transform:translateX(4px)} .mm-cta{margin-top:28px;width:100%;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease)} .mobile-menu.open .mm-inner>*{opacity:1;transform:none} .mobile-menu.open .mm-inner>*:nth-child(1){transition-delay:.04s} .mobile-menu.open .mm-inner>*:nth-child(2){transition-delay:.08s} .mobile-menu.open .mm-inner>*:nth-child(3){transition-delay:.12s} .mobile-menu.open .mm-inner>*:nth-child(4){transition-delay:.16s} .mobile-menu.open .mm-inner>*:nth-child(5){transition-delay:.2s} .mobile-menu.open .mm-inner>*:nth-child(6){transition-delay:.24s} .mobile-menu.open .mm-inner>*:nth-child(7){transition-delay:.28s} .mobile-menu.open .mm-inner>*:nth-child(8){transition-delay:.32s} body.menu-open{overflow:hidden} body.menu-open #header{transform:none} body.menu-open #header .nav{background:transparent;border-color:transparent;box-shadow:none} /* ---------- 5. INTRO (30 % → 0 %) — Timing gekoppelt an script.js ---------- */ #intro{position:fixed;inset:0;z-index:2000;display:none;place-items:center;overflow:hidden;pointer-events:none} html.with-intro #intro{display:grid} #intro::before,#intro::after{content:"";position:absolute;left:0;right:0;height:50.5%;background:var(--bg);z-index:0} #intro::before{top:0;animation:introUp .85s cubic-bezier(.8,0,.2,1) 2.65s forwards} #intro::after{bottom:0;animation:introDown .85s cubic-bezier(.8,0,.2,1) 2.65s forwards} @keyframes introUp{to{transform:translateY(-102%)}} @keyframes introDown{to{transform:translateY(102%)}} .intro-stage{position:relative;z-index:2;text-align:center;animation:introOut .45s var(--ease) 2.5s forwards} @keyframes introOut{to{opacity:0;transform:scale(1.04)}} .intro-num{position:relative;font-family:var(--f-sans);font-weight:900;font-size:clamp(5rem,18vw,11rem);line-height:1;letter-spacing:-.04em;color:var(--ink)} .intro-num .in-pct{font-size:.42em;vertical-align:.55em} .in-old{display:inline-block;position:relative;color:var(--dim); animation:inOldIn .7s var(--ease) .15s both,inOldOut .35s var(--ease) 1.4s forwards} @keyframes inOldIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}} @keyframes inOldOut{to{opacity:0;transform:translateY(16px)}} .in-old .in-strike{position:absolute;left:-4%;right:-4%;top:52%;height:.075em;border-radius:99px;background:var(--acc); box-shadow:0 0 24px rgba(255,90,31,.55); transform:translateY(-50%) rotate(-2.5deg) scaleX(0);transform-origin:left center; animation:inStrike .4s cubic-bezier(.65,0,.35,1) .95s forwards} @keyframes inStrike{to{transform:translateY(-50%) rotate(-2.5deg) scaleX(1)}} .in-new{position:absolute;left:50%;top:50%;translate:-50% -50%;white-space:nowrap;opacity:0; background:var(--grad-ember);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; animation:inNew .6s var(--ease) 1.55s both} @keyframes inNew{from{opacity:0;transform:scale(1.35)}to{opacity:1;transform:scale(1)}} .intro-caps{position:relative;margin-top:26px;height:1.5em; font-family:var(--f-sans);font-weight:600;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase} .intro-caps span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap} .in-cap1{color:var(--dim);animation:inOldIn .65s var(--ease) .35s both,inOldOut .35s var(--ease) 1.4s forwards} .in-cap2{color:var(--acc);opacity:0;animation:inCap .6s var(--ease) 1.75s both} @keyframes inCap{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} /* ---------- 6. HERO: volle Bühne, Glut von rechts oben ---------- */ .hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column; padding:170px 0 0;overflow:hidden} .hero>.wrap{flex:1;display:flex;flex-direction:column;justify-content:center} .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;animation:bgIn 1.6s ease both} @keyframes bgIn{from{opacity:0}to{opacity:1}} /* dezenter Sternenhimmel in zwei Parallax-Ebenen — der Drift läuft über transform (Compositor) statt background-position (Repaint pro Frame): jede Ebene ist um eine Kachel höher und wandert nahtlos nach oben */ .hb-stars{position:absolute;inset:0;background-repeat:repeat;will-change:transform} .hb-stars.s1{height:calc(100% + 280px); background-image: radial-gradient(1.2px 1.2px at 20px 30px,rgba(255,255,255,.85),transparent), radial-gradient(1px 1px at 130px 80px,rgba(255,255,255,.55),transparent), radial-gradient(1.4px 1.4px at 90px 170px,rgba(255,196,150,.7),transparent), radial-gradient(1px 1px at 210px 50px,rgba(255,255,255,.5),transparent), radial-gradient(1.1px 1.1px at 250px 210px,rgba(180,200,255,.6),transparent); background-size:280px 280px;opacity:.7; animation:starDrift1 90s linear infinite,starTwinkle 6s ease-in-out infinite} .hb-stars.s2{height:calc(100% + 440px); background-image: radial-gradient(1px 1px at 60px 90px,rgba(255,255,255,.45),transparent), radial-gradient(1.6px 1.6px at 180px 140px,rgba(255,255,255,.7),transparent), radial-gradient(1px 1px at 320px 230px,rgba(255,190,140,.5),transparent), radial-gradient(1.2px 1.2px at 380px 60px,rgba(200,210,255,.5),transparent); background-size:440px 440px;opacity:.45; animation:starDrift2 150s linear infinite,starTwinkle 9s ease-in-out -3s infinite} @keyframes starDrift1{from{transform:translateY(0)}to{transform:translateY(-280px)}} @keyframes starDrift2{from{transform:translateY(0)}to{transform:translateY(-440px)}} @keyframes starTwinkle{0%,100%{opacity:.4}50%{opacity:.75}} /* weicher, driftender Glüh-Spot in Marken-Orange */ .hb-spot{position:absolute;top:-18%;right:2%;width:62%;height:82%; background:radial-gradient(closest-side,rgba(255,106,43,.16),rgba(255,90,31,.05) 55%,transparent 72%); filter:blur(50px);animation:spotDrift 30s ease-in-out infinite alternate} @keyframes spotDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-8%,6%,0) scale(1.08)}} /* warmer Horizont am unteren Rand */ .hb-horizon{position:absolute;left:50%;bottom:-12%;width:150%;transform:translateX(-50%);height:34%; background:radial-gradient(50% 100% at 50% 100%,rgba(255,106,43,.14),transparent 70%);filter:blur(26px)} [data-theme="light"] .hb-stars{opacity:.12} [data-theme="light"] .hb-spot{opacity:.6} @media(prefers-reduced-motion:reduce){.hb-stars,.hb-spot{animation:none!important}} .hero .wrap{position:relative;z-index:1} .hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:64px;align-items:center} .hero-over{display:flex;align-items:center;gap:14px; font-family:var(--f-sans);font-weight:600;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mut); margin-bottom:30px;animation:heroIn .8s var(--ease) .15s both} .ho-rule{width:44px;height:1px;background:linear-gradient(90deg,var(--acc),transparent);flex-shrink:0;position:relative} .ho-rule::before{content:"";position:absolute;left:0;top:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--acc); box-shadow:0 0 10px rgba(255,90,31,.8)} .hero h1{font-size:clamp(3rem,6.6vw,6rem);font-weight:900;line-height:.96;letter-spacing:-.045em;margin-bottom:30px; animation:heroHead 1.1s var(--ease) .28s both} .hero h1 .serif-accent{display:inline-block;font-size:.92em;font-weight:500;letter-spacing:-.02em;padding-right:.06em; background:var(--grad-ember);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent} @keyframes heroHead{from{opacity:0;transform:translateY(40px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}} @keyframes heroIn{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}} .hero .lead{font-size:1.16rem;color:var(--mut);max-width:46ch;margin-bottom:38px;animation:heroIn .8s var(--ease) .5s both} .hero .lead strong{color:var(--ink)} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;animation:heroIn .8s var(--ease) .64s both} .cta-note{margin-top:18px;font-size:.82rem;color:var(--dim);animation:heroIn .8s var(--ease) .76s both} .cta-note a{text-decoration:underline;text-underline-offset:3px} /* Bühne rechts: Phone leicht gedreht, Live-Beleg überlappt */ .hero-visual{position:relative} .hv-stage{position:relative;display:flex;justify-content:flex-start;padding:10px 0 44px 52px; perspective:1500px;perspective-origin:60% 40%;animation:hvIn 1.2s var(--ease) .45s both} @keyframes hvIn{from{opacity:0;transform:perspective(1500px) rotateY(-22deg) translateY(48px);filter:blur(10px)} to{opacity:1;transform:perspective(1500px) rotateY(0deg) translateY(0);filter:blur(0)}} /* echtes 3D-Gerät: Ruhelage leicht in Perspektive, folgt dem Zeiger (JS setzt --rx/--ry) */ .hv-stage .phone-shell{transform-style:preserve-3d; transform:rotateY(var(--ry,-11deg)) rotateX(var(--rx,4.5deg)) rotate(var(--rz,-1.5deg)); transition:transform .3s cubic-bezier(.22,.61,.36,1);will-change:transform} /* wandernde Glas-Reflexion übers Display */ .phone-shell .ph-glare{position:absolute;inset:0;border-radius:46px;overflow:hidden;pointer-events:none;z-index:9} .phone-shell .ph-glare::before{content:"";position:absolute;top:-50%;left:var(--gx,-45%);width:55%;height:200%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 45%,rgba(255,255,255,.03) 60%,transparent); transform:rotate(20deg);filter:blur(3px);animation:phSweep 8.5s cubic-bezier(.5,0,.5,1) 1.6s infinite} @keyframes phSweep{0%{left:-55%}42%,100%{left:135%}} /* dezente Rand-Kantenlichter, die dem Tilt Tiefe geben */ .phone-shell .ph-edge{position:absolute;inset:0;border-radius:46px;pointer-events:none;z-index:7; background:linear-gradient(120deg,rgba(255,255,255,.06),transparent 30%), linear-gradient(300deg,rgba(255,120,60,.08),transparent 34%);opacity:.9} /* Phone */ .phone-shell{position:relative;z-index:2;width:288px;height:584px;border-radius:46px;padding:10px; background:linear-gradient(170deg,#2c2823 0%,#161310 45%,#0a0908 100%); border:1px solid rgba(255,246,233,.15); box-shadow:inset 0 1px 0 rgba(255,246,233,.14),0 2px 4px rgba(0,0,0,.4), 0 46px 90px -32px rgba(10,4,1,.8),0 30px 80px -40px rgba(255,90,31,.18)} [data-theme="light"] .phone-shell{box-shadow:inset 0 1px 0 rgba(255,246,233,.12),0 2px 4px rgba(28,22,17,.18),0 40px 80px -34px rgba(28,22,17,.4)} .phone-shell .island{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:80px;height:22px;background:#000;border-radius:13px;z-index:8} .phone-screen{position:relative;height:100%;border-radius:37px;overflow:hidden;background:#0f0d0b;display:flex;flex-direction:column;color:#f0e9de} /* Mock-App (immer dunkel — wirkt wie echtes Produkt) */ .m-status{display:flex;justify-content:space-between;align-items:center;padding:13px 22px 4px;font-family:var(--f-sans);font-weight:700;font-size:.72rem} .m-status .ico svg{width:15px;height:13px} .m-hero{position:relative;height:112px;background:var(--food-pizza);overflow:hidden;flex-shrink:0;margin:8px 10px 0;border-radius:18px} .m-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.62))} .m-hero .info{position:absolute;left:14px;right:14px;bottom:11px;z-index:2} .m-hero .rname{font-family:var(--f-sans);font-weight:800;font-size:1.12rem;color:#fff;line-height:1.05} .m-hero .chips{display:flex;gap:6px;margin-top:7px} .m-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:99px;font-size:.64rem;font-weight:700;background:rgba(255,255,255,.94);color:#221408} .m-chip svg{width:10px;height:10px} .m-chip.green{background:rgba(61,220,151,.92);color:#06231a} .m-chip.star svg{color:#e8a412} .m-quick{display:flex;gap:6px;padding:10px 12px 2px;flex-shrink:0} .m-quick .mq{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;border-radius:12px; background:#171412;border:1px solid rgba(240,233,222,.08); font-family:var(--f-sans);font-weight:600;font-size:.58rem;color:#a89e90} .m-quick .mq svg{width:14px;height:14px;color:var(--acc)} .m-cats{display:flex;gap:6px;padding:10px 12px 2px;overflow:hidden} .m-cat{padding:5px 12px;border-radius:99px;font-size:.68rem;font-weight:600;white-space:nowrap;background:#171412;color:#a89e90;border:1px solid rgba(240,233,222,.07)} .m-cat.on{background:#f0e9de;color:#17130f;border-color:transparent} .m-list{flex:1;padding:8px 12px 12px;display:flex;flex-direction:column;gap:8px;overflow:hidden} .m-item{display:flex;gap:11px;align-items:center;background:#171412;border:1px solid rgba(240,233,222,.07);border-radius:14px;padding:9px; transition:border-color .35s,transform .4s var(--ease),box-shadow .4s var(--ease),background .35s} .m-item.pick{border-color:rgba(255,90,31,.6);background:#1d1815;transform:translateX(3px) scale(1.02); box-shadow:0 10px 26px -16px rgba(255,90,31,.7)} .m-cart.cartbump{animation:cartBump .5s var(--ease)} @keyframes cartBump{0%{transform:scale(1)}36%{transform:scale(1.035)}100%{transform:scale(1)}} .m-thumb{width:46px;height:46px;border-radius:11px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)} .m-meta{min-width:0;flex:1} .m-meta .nm{font-family:var(--f-sans);font-weight:700;font-size:.8rem;line-height:1.15} .m-meta .ds{font-size:.66rem;color:#8d8375;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .m-item .pr{font-family:var(--f-sans);font-weight:700;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap} .m-add{width:30px;height:30px;border-radius:10px;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1rem;flex-shrink:0;margin-left:2px} .m-add.done{background:#3ddc97;color:#06231a} .m-cart{margin:auto 12px 12px;background:var(--acc);color:#fff;border-radius:14px;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;font-family:var(--f-sans);font-weight:700;font-size:.84rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)} .m-cart .count{background:rgba(0,0,0,.25);border-radius:7px;padding:2px 8px;font-size:.72rem} .m-cart .go{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums} .m-cart .go svg{width:14px;height:14px} /* Live-Beleg (POS-Panel): schwebt über der Bühne */ .live-panel{position:absolute;z-index:3;right:max(-20px,calc(50% - 380px));bottom:0;width:296px; background:rgba(21,17,16,.92); background:color-mix(in srgb,var(--card) 88%,transparent); -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%); border:1px solid var(--line2);border-radius:20px;padding:18px 18px 14px; box-shadow:var(--sh),0 24px 70px -30px rgba(255,90,31,.22); animation:lpFloat 7s ease-in-out 2.2s infinite,heroIn .9s var(--ease) 1.05s both} @keyframes lpFloat{0%,100%{translate:0 0}50%{translate:0 -9px}} .lp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px dashed var(--line2)} .lp-titles{display:flex;flex-direction:column;gap:7px} .lp-live{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:4px 10px;border-radius:99px; font-family:var(--f-sans);font-weight:700;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; color:var(--good);border:1px solid color-mix(in srgb,var(--good) 35%,transparent)} .lp-dot{width:6px;height:6px;border-radius:50%;background:var(--good);animation:pulse 2.2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,151,.5)}70%{box-shadow:0 0 0 7px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}} .lp-label{font-size:.76rem;color:var(--mut)} .lp-rev{text-align:right} .lp-amount{font-family:var(--f-sans);font-weight:800;font-size:1.6rem;line-height:1;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums} .lp-amount .lp-cur{font-size:1rem;color:var(--mut)} .lp-amount.bump{animation:lpBump .4s var(--ease)} @keyframes lpBump{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}} .lp-delta{display:inline-block;margin-top:6px;font-size:.7rem;font-weight:600;color:var(--good)} .lp-feed-head{display:flex;justify-content:space-between;align-items:center;margin:12px 0 9px;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-family:var(--f-sans);font-weight:600} .lp-feed-head .lp-count{color:var(--acc);letter-spacing:.06em} .lp-feed{display:flex;flex-direction:column;gap:7px;height:158px;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)} .lp-order{display:flex;align-items:center;gap:10px;background:rgba(28,22,19,.85);background:color-mix(in srgb,var(--card2) 80%,transparent);border:1px solid var(--line);border-radius:13px;padding:8px 10px;flex-shrink:0} .lp-order.enter{animation:orderIn .55s var(--spring) both} @keyframes orderIn{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}} .lp-order .lp-thumb{width:36px;height:36px;border-radius:10px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)} .lp-order .lp-meta{min-width:0;flex:1} .lp-order .lp-nm{font-family:var(--f-sans);font-weight:600;font-size:.78rem;color:var(--ink);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lp-order .lp-when{font-size:.64rem;color:var(--dim);margin-top:2px;display:flex;align-items:center;gap:5px} .lp-order .lp-when .ch{display:inline-flex;align-items:center;gap:3px;color:var(--good);font-weight:600} .lp-order .lp-when .ch svg{width:9px;height:9px} .lp-order .lp-pr{font-family:var(--f-sans);font-weight:700;font-size:.8rem;color:var(--ink);flex-shrink:0;font-variant-numeric:tabular-nums} /* ---------- 7. PAKET-LEISTE ---------- Nachfolger der Lauf-Marquee. Bewusst ohne Endlos-Animation und ohne Kantenmaske: der alte Streifen blendete seinen Text links und rechts aus (Kontrast weg, Wörter halb lesbar) und bewegte sich ohne jede Aussage. Jetzt steht alles still in voller Textfarbe, und jeder Punkt ist ein Sprungziel — aus Dekoration wird Orientierung. Trägt beide Kanten selbst: seit die Fakten-Zeile raus ist, grenzt der Streifen direkt an den Hero und braucht seine eigene Oberkante. */ .incl{border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--card) 40%,transparent)} /* Label + Punkte als Block mittig im Satzspiegel: linksbündig blieb rechts eine Lücke von gut 150px stehen, die Zeile hing sichtbar schief unter dem Hero. Zentriert sitzt sie symmetrisch zwischen den Container-Kanten. */ .incl-in{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.6vw,34px)} .incl-lb{flex:none;font-family:var(--f-sans);font-weight:700;font-size:.7rem;letter-spacing:.15em; text-transform:uppercase;color:var(--acc-soft)} .incl-list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin:0;padding:0} .incl-list li{display:flex;align-items:center} /* Glut-Punkt als Trenner — der Rhythmus der alten Leiste, nur ohne Lauf */ .incl-list li+li::before{content:"";flex:none;width:3px;height:3px;border-radius:99px; background:color-mix(in srgb,var(--acc) 62%,transparent);margin:0 clamp(13px,2.1vw,26px)} .incl-list a{display:inline-flex;align-items:center;gap:9px;padding:14px 0; font-family:var(--f-sans);font-weight:600;font-size:clamp(.86rem,1.02vw,.95rem);letter-spacing:-.01em; color:var(--ink);transition:color .22s var(--ease)} .incl-list svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--acc);stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--ease)} .incl-list a:hover{color:var(--acc-soft)} .incl-list a:hover svg{transform:translateY(-1px) scale(1.07)} .incl-list a:focus-visible{outline:2px solid var(--acc-soft);outline-offset:4px;border-radius:8px} /* --- Bewegung: ausschließlich auf dem Akzent, nie auf dem Text --- Die alte Marquee scheiterte daran, dass sie die Schrift selbst bewegt und an den Rändern ausgeblendet hat. Hier bleiben Label und Punkte durchgehend stehen und voll lesbar; animiert werden nur Icons und Trennpunkte. */ /* 1 · Einlauf: das Band steht sofort, die Punkte kommen 60 ms versetzt nach. .in setzt der IntersectionObserver in script.js (§4 Reveal). */ .incl.reveal{opacity:1;transform:none;filter:none;transition:none} .incl.reveal .incl-lb,.incl.reveal .incl-list li{opacity:0;transform:translateY(9px); transition:opacity .5s var(--ease),transform .55s var(--ease)} .incl.reveal.in .incl-lb,.incl.reveal.in .incl-list li{opacity:1;transform:none} .incl.reveal.in .incl-list li:nth-child(1){transition-delay:.10s} .incl.reveal.in .incl-list li:nth-child(2){transition-delay:.16s} .incl.reveal.in .incl-list li:nth-child(3){transition-delay:.22s} .incl.reveal.in .incl-list li:nth-child(4){transition-delay:.28s} .incl.reveal.in .incl-list li:nth-child(5){transition-delay:.34s} /* 2 · Glut wandert: alle 8 s läuft ein Aufglühen einmal von links nach rechts durch die Icons — die Zeile lebt, ohne dass etwas wegläuft. */ @keyframes inclEmber{ 0%,100%{transform:none;stroke:var(--acc);filter:none} 4%{transform:translateY(-2.5px) scale(1.15);stroke:var(--amber); filter:drop-shadow(0 0 7px color-mix(in srgb,var(--acc) 60%,transparent))} 12%{transform:none;stroke:var(--acc);filter:none} } /* Die Versatz-Regeln tragen denselben Präfix wie die Kurzform darüber: `animation` setzt animation-delay mit zurück und ist spezifischer — ohne gleichen Präfix glühen alle Icons gleichzeitig statt nacheinander. */ .incl.reveal.in .incl-list svg{animation:inclEmber 8s var(--ease) infinite} .incl.reveal.in .incl-list li:nth-child(2) svg{animation-delay:.42s} .incl.reveal.in .incl-list li:nth-child(3) svg{animation-delay:.84s} .incl.reveal.in .incl-list li:nth-child(4) svg{animation-delay:1.26s} .incl.reveal.in .incl-list li:nth-child(5) svg{animation-delay:1.68s} /* Trennpunkte glimmen eine Spur hinter dem Icon mit */ @keyframes inclDot{0%,100%{transform:none;opacity:1} 5%{transform:scale(1.9);opacity:.55}12%{transform:none;opacity:1}} .incl.reveal.in .incl-list li+li::before{animation:inclDot 8s var(--ease) infinite} .incl.reveal.in .incl-list li:nth-child(3)::before{animation-delay:.63s} .incl.reveal.in .incl-list li:nth-child(4)::before{animation-delay:1.05s} .incl.reveal.in .incl-list li:nth-child(5)::before{animation-delay:1.47s} /* Beim Überfahren übernimmt die Hover-Reaktion die Kontrolle */ .incl-list a:hover svg{animation:none} /* ---------- 8. KAPITEL-KOPF: Ghost-Nummer als Bühnenbild ---------- */ .chap-head{position:relative;display:grid;grid-template-columns:1fr;gap:10px;align-items:start; padding-top:44px;border-top:1px solid var(--line);margin-bottom:72px} .chap-nr{position:absolute;top:-14px;inset-inline-end:-8px;z-index:0;pointer-events:none;user-select:none; font-family:var(--f-sans);font-style:normal;font-weight:900; font-size:clamp(6.5rem,15vw,12rem);line-height:.8;letter-spacing:-.04em; color:transparent;-webkit-text-stroke:1px var(--line2); opacity:.9; transition:color 1s ease,-webkit-text-stroke-color 1s ease,text-shadow 1s ease} /* Glut-Zündung: sobald die Ziffer im Viewport ist (script.js setzt .lit), glüht die Kontur in Marken-Orange auf — einmalige Transition, keine Dauer-Animation (Repaint nur während der ~1 s Überblendung) */ .chap-nr.lit{-webkit-text-stroke-color:rgba(255,106,43,.5);color:rgba(255,90,31,.04); text-shadow:0 0 22px rgba(255,106,43,.18),0 0 70px rgba(255,90,31,.1)} @supports (animation-timeline: view()){ .chap-nr{animation:ghostDrift linear both;animation-timeline:view();animation-range:entry 0% cover 90%} } @keyframes ghostDrift{from{transform:translateY(64px)}to{transform:translateY(-44px)}} .chap-head>div{position:relative;z-index:1} .chap-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-sans);font-weight:600;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:16px} .chap-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc); box-shadow:0 0 12px rgba(255,90,31,.8);flex-shrink:0} .chap-head h2{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:800;letter-spacing:-.035em;max-width:21ch} .chap-head h2 .serif-accent{font-weight:500;background:var(--grad-ember); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .chap-lead{position:relative;z-index:1;color:var(--mut);font-size:1.08rem;max-width:58ch;margin-top:18px} /* Sektions-Glut: Licht wandert beim Scrollen von Station zu Station */ .chap::before{content:"";position:absolute;top:0;inset-inline-end:-8%;width:52%;height:60%; pointer-events:none;z-index:0;filter:blur(64px);opacity:0; background:radial-gradient(closest-side,rgba(255,96,28,.1),transparent 72%)} .chap:nth-of-type(even)::before{inset-inline-end:auto;inset-inline-start:-8%} @supports (animation-timeline: view()){ .chap::before{animation:glowIn linear both;animation-timeline:view();animation-range:entry 0% cover 55%} } @keyframes glowIn{from{opacity:0}to{opacity:1}} .chap .wrap{position:relative;z-index:1} /* ---------- 10. KLARHEIT: DIENSTLEISTUNG vs. BAUSTEINE ---------- */ .chap-head.no-nr{grid-template-columns:1fr} .pkg{display:grid;grid-template-columns:1.05fr 1fr;gap:72px;align-items:start} .pkg-core{position:relative;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg); padding:44px 46px;box-shadow:var(--sh)} .pkg-core::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:inherit; background:linear-gradient(90deg,transparent,rgba(255,180,120,.35),transparent)} .pkg-core .pkg-k{display:block;font-family:var(--f-sans);font-weight:600;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:18px} .pkg-state{font-family:var(--f-sans);font-weight:700;font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.2;letter-spacing:-.025em;color:var(--ink);max-width:24ch;margin-bottom:16px} .pkg-state strong{color:var(--acc);font-weight:700} .pkg-sub{color:var(--mut);font-size:1rem;max-width:52ch;margin-bottom:26px} .pkg-lists{display:flex;flex-direction:column;gap:36px;padding-top:8px} .pkg-h{display:flex;align-items:center;gap:11px;font-family:var(--f-sans);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;margin-bottom:6px} .pk-ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-weight:700;font-size:.95rem} .pk-ic svg{width:12px;height:12px} .pk-ic.incl{color:var(--good);border:1px solid color-mix(in srgb,var(--good) 45%,transparent);background:color-mix(in srgb,var(--good) 10%,transparent)} .pk-ic.opt{color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);background:color-mix(in srgb,var(--acc) 10%,transparent)} .pkg-ul li{border-top:1px solid var(--line);font-size:.94rem;color:var(--mut);padding:12px 2px} .pkg-ul li:last-child{border-bottom:1px solid var(--line)} .pkg-ul li a{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-12px -2px;padding:12px 2px;transition:color .25s,padding .3s var(--ease)} .pkg-ul li a::after{content:"→";font-size:.85rem;color:var(--dim);opacity:0;transform:translateX(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease),color .2s} .pkg-ul li a:hover{color:var(--ink);padding-left:10px} .pkg-ul li a:hover::after{opacity:1;transform:none;color:var(--acc)} [dir="rtl"] .pkg-ul li a::after{content:"←"} .pkg-note{margin-top:14px;font-size:.82rem;color:var(--dim)} /* Modul-Badges an Kapitel-Köpfen */ .mod-badge{display:inline-flex;align-items:center;gap:8px;margin-top:16px; font-family:var(--f-sans);font-weight:600;font-size:.74rem;letter-spacing:.06em; border:1px solid var(--line2);border-radius:99px;padding:6px 14px;color:var(--mut)} .mod-badge i{font-style:normal;display:grid;place-items:center;width:15px;height:15px;font-weight:700} .mod-badge i svg{width:11px;height:11px} .mod-badge.opt{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 40%,transparent);background:color-mix(in srgb,var(--acc) 8%,transparent)} .mod-badge.incl{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent);background:color-mix(in srgb,var(--good) 8%,transparent)} /* ---------- 10b. BAUSTEINE: alles inklusive, aktiv nach Bedarf ---------- */ /* Promise-Leiste: die Kernbotschaft direkt unter dem Kapitelkopf */ .bt-promise{display:grid;grid-template-columns:repeat(3,1fr);margin-top:8px; border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .bt-promise li{display:flex;align-items:flex-start;gap:14px;padding:24px 26px 24px 0} .bt-promise li+li{padding-inline-start:26px;border-inline-start:1px solid var(--line)} .bp-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex-shrink:0;margin-top:2px; color:var(--good);border:1px solid color-mix(in srgb,var(--good) 45%,transparent); background:color-mix(in srgb,var(--good) 9%,transparent)} .bp-ic svg{width:14px;height:14px} .bt-promise b{display:block;font-family:var(--f-sans);font-weight:700;font-size:.98rem;letter-spacing:-.01em;margin-bottom:3px} .bt-promise li>div>span{color:var(--mut);font-size:.88rem;line-height:1.55} .bt-rows{display:flex;flex-direction:column} .bt-row{padding:clamp(52px,7vw,72px) 0} .bt-row+.bt-row{border-top:1px solid var(--line)} .bt-row:last-child{padding-bottom:0} /* Modul-Kopf: Nummer + Name links, Inklusive-Schalter rechts */ .bt-head{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-bottom:30px} .bt-id{display:flex;align-items:baseline;gap:14px} .bt-nr{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.25rem;line-height:1;color:var(--acc)} .bt-name{font-family:var(--f-sans);font-weight:800;font-size:1.06rem;letter-spacing:-.015em} .bt-incl{display:inline-flex;align-items:center;gap:10px} .bt-switch{position:relative;width:40px;height:23px;border-radius:99px;flex-shrink:0; background:color-mix(in srgb,var(--good) 18%,transparent); border:1px solid color-mix(in srgb,var(--good) 50%,transparent)} .bt-switch::after{content:"";position:absolute;top:50%;translate:0 -50%;inset-inline-start:20px; width:15px;height:15px;border-radius:50%;background:var(--good); box-shadow:0 0 10px color-mix(in srgb,var(--good) 55%,transparent)} .reveal.in .bt-switch::after{animation:btKnob .7s var(--ease) .3s backwards} @keyframes btKnob{from{inset-inline-start:3px;background:var(--dim);box-shadow:none}} .bt-incl-t{font-family:var(--f-sans);font-weight:500;font-size:.84rem;color:var(--mut)} .bt-incl-t b{font-weight:700;color:color-mix(in srgb,var(--good) 55%,var(--ink))} .bt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:center} .bt-row.flip .bt-grid>.duo-copy{order:2} .bt-row h3{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.25;margin-bottom:14px;max-width:22ch;text-wrap:balance} .bp-lead{color:var(--mut);font-size:.96rem;max-width:52ch;margin-bottom:10px} .bt-visual{zoom:.82} /* Dashboard kompakt in der halben Spalte: KPIs 2×2, Karten in voller Breite */ .bt-grid .dash{width:100%} .bt-grid .dh-main{padding:22px} .bt-grid .dh-kpi{padding:11px 20px} .bt-grid .dash-sec{padding:18px 22px} .bt-grid .chart{height:112px} /* Nutzen-Liste: Haken statt Gedankenstrich-Gedränge */ .bt-list{display:flex;flex-direction:column;margin:8px 0 28px} .bt-list li{display:flex;align-items:flex-start;gap:14px;padding:13px 0} .bt-list li+li{border-top:1px solid var(--line)} .bl-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex-shrink:0;margin-top:1px; color:var(--good);border:1px solid color-mix(in srgb,var(--good) 40%,transparent); background:color-mix(in srgb,var(--good) 9%,transparent)} .bl-ic svg{width:11px;height:11px} .bl-tx b{display:block;font-family:var(--f-sans);font-weight:700;font-size:.95rem;letter-spacing:-.005em;margin-bottom:2px} .bl-tx span{display:block;color:var(--mut);font-size:.88rem;line-height:1.55} /* Extras: dieselbe Häkchen-Liste, in drei Spalten */ .bt-list.bt-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;margin:22px 0 0} .bt-list.bt-cols li{border-top:1px solid var(--line);padding:16px 0} @media (max-width:1080px){ .bt-grid{grid-template-columns:minmax(0,1fr);gap:36px} .bt-row.flip .bt-grid>.duo-copy{order:0} .bt-list.bt-cols{grid-template-columns:1fr 1fr} } @media (max-width:900px){ .bt-promise{grid-template-columns:1fr} .bt-promise li{padding:16px 0} .bt-promise li+li{padding-inline-start:0;border-inline-start:none;border-top:1px solid var(--line)} } @media (max-width:680px){ .bt-row{padding:44px 0} .bt-row:last-child{padding-bottom:0} .bt-visual{zoom:1} .bt-list.bt-cols{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .reveal.in .bt-switch::after{animation:none} } /* ---------- 11. LEISTUNGEN: MENÜ-LISTE ---------- */ .svc-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:72px;align-items:start} .menu-list{display:flex;flex-direction:column} .ml-row{position:relative;display:grid;grid-template-columns:74px 1fr 44px;gap:20px;align-items:center; padding:32px 10px;border-top:1px solid var(--line);cursor:pointer;overflow:hidden; transition:padding .45s var(--ease)} .ml-row::before{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 7%,transparent),transparent 65%); transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} [dir="rtl"] .ml-row::before{transform-origin:right} .ml-row:last-child{border-bottom:1px solid var(--line)} .ml-row:hover,.ml-row.active{padding-left:20px;padding-right:0} .ml-row:hover::before,.ml-row.active::before{transform:scaleX(1)} .ml-nr{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.3rem;color:var(--dim);transition:color .3s} .ml-row:hover .ml-nr,.ml-row.active .ml-nr{color:var(--acc)} .ml-body h3{font-size:clamp(1.25rem,1.9vw,1.5rem);font-weight:700;letter-spacing:-.025em;margin-bottom:7px;transition:color .3s} .ml-body p{color:var(--mut);font-size:.95rem;max-width:56ch} .ml-mark{position:relative;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2); opacity:0;transform:translateX(-10px) rotate(-45deg);transition:opacity .4s var(--ease),transform .45s var(--spring),background .3s,border-color .3s} .ml-mark::after{content:"→";position:absolute;inset:0;display:grid;place-items:center;font-size:.9rem;color:var(--ink)} .ml-row:hover .ml-mark,.ml-row.active .ml-mark{opacity:1;transform:none;border-color:var(--acc)} .ml-row:hover .ml-mark::after,.ml-row.active .ml-mark::after{color:var(--acc)} /* Fortschritt der aktiven Demo (5 s, gesteuert von script.js) */ .ml-prog{position:absolute;left:0;top:-1px;height:2px;width:0;border-radius:99px; background:linear-gradient(90deg,var(--amber),var(--acc));box-shadow:0 0 10px rgba(255,90,31,.4)} .ml-row.active .ml-prog{animation:wsfill 5s linear forwards} /* aktiver Reiter (wird durchgeschaltet) */ .ml-row{cursor:pointer} .ml-row.active{padding-left:20px;padding-right:0} .ml-row.active::before{transform:scaleX(1)} .ml-row.active .ml-nr{color:var(--acc)} .ml-row.active .ml-body h3{color:var(--ink)} .ml-row.active .ml-mark{opacity:1;transform:none;border-color:var(--acc)} .ml-row.active .ml-mark::after{color:var(--acc)} .ml-prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;z-index:2;opacity:0;border-radius:2px; background:linear-gradient(90deg,var(--acc),#ff9a5c)} .ml-row.active .ml-prog{opacity:1;animation:mlProg var(--svc-dur,5s) linear forwards} @keyframes mlProg{from{width:0}to{width:100%}} .svc-side{position:sticky;top:120px} .demo-card{position:relative;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh)} .dc-cap{font-family:var(--f-sans);font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:18px;padding-bottom:14px;border-bottom:1px dashed var(--line2)} .dc-cap span{color:var(--dim);text-transform:none;letter-spacing:.02em;font-weight:500} .demo-row{display:flex;align-items:center;gap:12px;font-size:.92rem;font-weight:500;padding:8px 0} .demo-row .thumb{width:40px;height:40px;border-radius:11px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)} .demo-row .qty{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:99px;padding:3px} .demo-row .qty button{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:600;color:var(--mut);transition:background .2s,color .2s,transform .3s var(--spring)} .demo-row .qty button:hover{background:var(--acc);color:#fff;transform:scale(1.08)} .demo-row .qty span{min-width:18px;text-align:center;font-family:var(--f-sans);font-weight:700;font-variant-numeric:tabular-nums} .demo-total{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--line2);padding-top:16px;margin-top:10px;color:var(--mut);font-size:.9rem} .demo-total b{font-family:var(--f-sans);font-size:1.4rem;color:var(--ink);font-variant-numeric:tabular-nums;transition:transform .2s} .dc-foot{margin-top:16px;font-size:.8rem;color:var(--dim)} .dc-foot b{color:var(--acc);font-weight:600} /* ---------- 11b. SVC-BÜHNE: pro Leistung eine Mini-Demo (script.js §7) ---------- */ .svc-stage{position:relative;display:grid} .svc-demo{grid-area:1/1;opacity:0;transform:translateY(18px) scale(.985);filter:blur(6px); visibility:hidden;pointer-events:none; transition:opacity .5s var(--ease),transform .55s var(--ease),filter .5s var(--ease),visibility 0s linear .55s} .svc-demo.active{opacity:1;transform:none;filter:blur(0);visibility:visible;pointer-events:auto;transition-delay:0s} /* Touch-Geräte: Demo-Wechsel ohne Blur (GPU-schonend, kein Flackern) */ @media (pointer:coarse){ .svc-demo{filter:none;transition:opacity .45s var(--ease),transform .5s var(--ease),visibility 0s linear .5s} .svc-demo.active{filter:none;transition-delay:0s} } /* 01 · Warenkorb: zweite Position tickt live ein */ .sd-q{margin-left:auto;font-family:var(--f-sans);font-weight:700;font-size:.82rem;color:var(--mut); border:1px solid var(--line2);border-radius:99px;padding:3px 10px;font-variant-numeric:tabular-nums} .svc-demo.active .sd-late{animation:sdLate .5s var(--spring) 1.7s both} @keyframes sdLate{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}} .svc-demo.active .sd-total{animation:sdBump .45s var(--ease) 2s both} @keyframes sdBump{0%{transform:scale(1)}45%{transform:scale(1.14);color:var(--acc)}100%{transform:scale(1)}} .sd-tap{position:absolute;right:34px;top:118px;width:18px;height:18px;border-radius:50%; border:2px solid var(--acc);opacity:0;pointer-events:none} .svc-demo.active .sd-tap{animation:sdTap .7s var(--ease) 1.4s both} @keyframes sdTap{0%{opacity:0;transform:scale(.4)}35%{opacity:1}100%{opacity:0;transform:scale(2.2)}} /* 02 · Speisekarte pflegen: Preisfeld mit Caret, Schalter, Toast */ .ed-item{display:flex;align-items:center;gap:12px;padding:10px 0 14px} .ed-item .thumb{width:40px;height:40px;border-radius:11px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)} .ed-meta{display:flex;flex-direction:column;min-width:0} .ed-meta b{font-family:var(--f-sans);font-weight:700;font-size:.94rem} .ed-meta span{font-size:.78rem;color:var(--dim)} .ed-field label{display:block;font-family:var(--f-sans);font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:7px} .ed-box{display:flex;align-items:center;gap:2px;border:1px solid color-mix(in srgb,var(--acc) 45%,var(--line2));border-radius:12px;padding:11px 14px; background:color-mix(in srgb,var(--bg) 45%,transparent); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 10%,transparent)} .ed-val{font-family:var(--f-sans);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums} .ed-caret{width:1.5px;height:1.15em;background:var(--acc);animation:edCaret 1s steps(2) infinite} @keyframes edCaret{50%{opacity:0}} .ed-eur{margin-left:auto;color:var(--dim);font-size:.9rem} .ed-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px; border-top:1px dashed var(--line2);padding-top:14px;font-size:.86rem;color:var(--mut)} .ed-sw{position:relative;width:40px;height:23px;border-radius:99px;background:var(--line2);flex-shrink:0;transition:background .3s} .ed-sw::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:var(--ink);transition:transform .35s var(--spring),background .3s} .svc-demo.active .ed-sw{animation:edSwBg .01s linear 1.9s both} .svc-demo.active .ed-sw::after{animation:edSwKnob .35s var(--spring) 1.9s both} @keyframes edSwBg{to{background:var(--good)}} @keyframes edSwKnob{to{transform:translateX(17px);background:#fff}} .ed-toast{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 14px;border-radius:12px; background:rgba(61,220,151,.1);border:1px solid rgba(61,220,151,.35);color:var(--good); font-family:var(--f-sans);font-weight:600;font-size:.84rem;opacity:0} .ed-toast svg{width:14px;height:14px} .svc-demo.active .ed-toast{animation:flowfade .45s var(--ease) 2.7s both} /* 03 · Reservierung: Slot poppt, Bestätigung folgt */ .rv-days{display:flex;gap:8px;padding:8px 0 12px} .rv-day{flex:1;text-align:center;padding:8px 0;border-radius:11px;border:1px solid var(--line); font-family:var(--f-sans);font-weight:600;font-size:.8rem;color:var(--mut)} .rv-day.on{background:var(--ink);color:var(--bg);border-color:var(--ink)} .rv-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .rv-slot{text-align:center;padding:10px 0;border-radius:11px;border:1px solid var(--line2); font-family:var(--f-sans);font-weight:600;font-size:.84rem;color:var(--ink);font-variant-numeric:tabular-nums} .rv-slot.off{opacity:.32;text-decoration:line-through;border-style:dashed} .rv-slot.pick{border-color:var(--acc);color:#fff;background:var(--acc); box-shadow:0 8px 22px -8px rgba(255,90,31,.6)} .svc-demo.active .rv-slot.pick{animation:rvPick .45s var(--spring) 1.3s both} @keyframes rvPick{0%{transform:scale(.9);background:transparent;color:var(--ink);box-shadow:none}100%{transform:scale(1)}} .rv-confirm{display:flex;align-items:center;gap:9px;margin-top:14px;padding:11px 14px;border-radius:12px; background:rgba(61,220,151,.1);border:1px solid rgba(61,220,151,.35);color:var(--good); font-family:var(--f-sans);font-weight:600;font-size:.84rem;opacity:0} .rv-confirm svg{width:14px;height:14px;flex-shrink:0} .svc-demo.active .rv-confirm{animation:flowfade .45s var(--ease) 2.2s both} /* 04 · Google-Bewertungen: Sterne füllen sich, Rezension trudelt ein */ .gv-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:6px 0 14px} .gv-score{display:flex;flex-direction:column;gap:5px} .gv-num{font-family:var(--f-sans);font-weight:800;font-size:1.9rem;line-height:1;font-variant-numeric:tabular-nums} .gv-stars{display:flex;gap:3px} .gv-stars i{font-style:normal;color:var(--line2);font-size:.95rem;line-height:1} .gv-stars i::before{content:"★"} .svc-demo.active .gv-stars i{animation:gvStar .35s var(--spring) both} .svc-demo.active .gv-stars i:nth-child(1){animation-delay:.5s} .svc-demo.active .gv-stars i:nth-child(2){animation-delay:.65s} .svc-demo.active .gv-stars i:nth-child(3){animation-delay:.8s} .svc-demo.active .gv-stars i:nth-child(4){animation-delay:.95s} .svc-demo.active .gv-stars i:nth-child(5){animation-delay:1.1s} @keyframes gvStar{to{color:var(--star);text-shadow:0 0 12px rgba(245,183,61,.45)}} .gv-sub{font-size:.76rem;color:var(--dim)} .gv-plus{font-family:var(--f-sans);font-weight:700;font-size:.72rem;color:var(--good); border:1px solid color-mix(in srgb,var(--good) 40%,transparent);border-radius:99px;padding:5px 11px;white-space:nowrap;opacity:0} .svc-demo.active .gv-plus{animation:flowfade .4s var(--ease) 1.6s both} .gv-review{display:flex;gap:11px;align-items:flex-start;border-top:1px dashed var(--line2);padding-top:14px;opacity:0} .svc-demo.active .gv-review{animation:flowfade .5s var(--ease) 2.1s both} .gv-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ff8a5c,#d8380a);color:#fff;display:grid;place-items:center; font-family:var(--f-sans);font-weight:700;font-size:.82rem;flex-shrink:0} .gv-body{min-width:0} .gv-mini{display:flex;gap:2px;margin-bottom:4px} .gv-mini i{font-style:normal;color:var(--star);font-size:.68rem;line-height:1} .gv-mini i::before{content:"★"} .gv-body p{font-size:.84rem;color:var(--mut);line-height:1.5} /* 05 · Design: Mini-Mock + Farbwelt */ .dz-preview{position:relative;border:1px solid var(--line);border-radius:14px;padding:20px 18px 18px; background:linear-gradient(160deg,color-mix(in srgb,var(--card2) 85%,transparent),color-mix(in srgb,var(--card) 70%,transparent)); display:flex;flex-direction:column;gap:12px;margin:6px 0 14px;overflow:hidden} .dz-preview::before{content:"";position:absolute;top:-40%;right:-20%;width:70%;height:110%; background:radial-gradient(closest-side,rgba(255,96,28,.12),transparent 70%);filter:blur(24px)} .dz-logo{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:1.25rem;letter-spacing:-.01em} .dz-bars{display:flex;flex-direction:column;gap:6px} .dz-bars i{height:7px;border-radius:4px;background:var(--line2)} .dz-bars i:nth-child(1){width:72%} .dz-bars i:nth-child(2){width:54%} .dz-bars i:nth-child(3){width:63%} .dz-btn{align-self:flex-start;padding:8px 16px;border-radius:99px;background:var(--acc);color:#fff; font-family:var(--f-sans);font-weight:700;font-size:.78rem;box-shadow:0 8px 20px -8px rgba(255,90,31,.55)} .svc-demo.active .dz-btn{animation:sdBump .5s var(--ease) 1.6s both} .dz-swatches{display:flex;align-items:center;gap:8px} .dz-sw{width:26px;height:26px;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} .svc-demo.active .dz-sw{animation:gvStarPop .4s var(--spring) both} .svc-demo.active .dz-sw:nth-child(1){animation-delay:.6s} .svc-demo.active .dz-sw:nth-child(2){animation-delay:.72s} .svc-demo.active .dz-sw:nth-child(3){animation-delay:.84s} .svc-demo.active .dz-sw:nth-child(4){animation-delay:.96s} @keyframes gvStarPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}} .dz-sw.s1{background:#ff5a1f} .dz-sw.s2{background:#c9a24b} .dz-sw.s3{background:#3a6b4e} .dz-sw.s4{background:#eadfce} .dz-label{margin-left:auto;font-size:.74rem;color:var(--dim)} /* 06 · Hosting: Uptime-Balken füllt sich, Badges ticken ein */ .hs-uptime{display:flex;align-items:center;gap:12px;padding:12px 0 16px;font-size:.86rem;color:var(--mut);flex-wrap:wrap} .hs-pct{font-family:var(--f-sans);font-weight:800;font-size:1.3rem;color:var(--good);font-variant-numeric:tabular-nums} .hs-bar{flex:1 1 100%;height:5px;border-radius:99px;background:var(--line);overflow:hidden} .hs-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--good),#2ab77c)} .svc-demo.active .hs-bar i{animation:hsFill 1.2s var(--ease) .5s forwards} @keyframes hsFill{to{width:99.9%}} .hs-badges{display:flex;flex-wrap:wrap;gap:8px} .hs-b{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:99px;border:1px solid var(--line2); font-family:var(--f-sans);font-weight:600;font-size:.78rem;color:var(--mut);opacity:0} .hs-b svg{width:13px;height:13px;color:var(--good)} .svc-demo.active .hs-b{animation:flowfade .4s var(--ease) both} .svc-demo.active .hs-b:nth-child(1){animation-delay:1.4s} .svc-demo.active .hs-b:nth-child(2){animation-delay:1.6s} .svc-demo.active .hs-b:nth-child(3){animation-delay:1.8s} /* ===== SVC-STAGE: pro Reiter eine eigene Demo, nacheinander ===== */ .svc-stage{position:relative;min-height:344px} .svc-stage .svc-demo{position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;pointer-events:none; transform:translateY(18px) scale(.985); transition:opacity .55s var(--ease),transform .55s var(--ease),visibility .55s} .svc-stage .svc-demo.active{opacity:1;visibility:visible;pointer-events:auto;transform:none} .svc-demo .sd-q{margin-left:auto;font-family:var(--f-sans);font-weight:700;font-variant-numeric:tabular-nums;color:var(--mut)} /* 01 Bestellsystem */ .svc-demo .sd-tap{position:absolute;right:32px;top:78px;width:30px;height:30px;border-radius:50%;border:2px solid var(--acc);opacity:0} .svc-demo.active .sd-late{animation:svcRow .55s var(--ease) .55s both} .svc-demo.active .sd-total{animation:svcBump .55s var(--ease) 1.15s both} .svc-demo.active .sd-tap{animation:svcTap 1.8s ease .5s infinite} @keyframes svcRow{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}} @keyframes svcBump{0%,100%{transform:scale(1)}45%{transform:scale(1.16);color:var(--acc)}} @keyframes svcTap{0%{opacity:.55;transform:scale(.55)}70%{opacity:0;transform:scale(1.7)}100%{opacity:0}} /* 02 Speisekarte pflegen */ .svc-demo .ed-item{display:flex;align-items:center;gap:12px;margin-bottom:16px} .svc-demo .ed-item .thumb{width:44px;height:44px;border-radius:12px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)} .ed-meta b{display:block;font-weight:700;font-size:.95rem} .ed-meta span{font-size:.78rem;color:var(--dim)} .ed-field{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card2); border:1px solid var(--line2);border-radius:12px;padding:11px 14px;margin-bottom:14px} .ed-field label{font-size:.8rem;color:var(--mut)} .ed-box{display:flex;align-items:center;gap:3px;font-family:var(--f-sans);font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--ink)} .ed-caret{width:2px;height:1.05em;background:var(--acc);display:inline-block} .svc-demo.active .ed-caret{animation:edCaret 1s step-end infinite} @keyframes edCaret{50%{opacity:0}} .ed-toggle{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;color:var(--mut);margin-bottom:16px} .ed-sw{position:relative;width:42px;height:23px;border-radius:99px;background:var(--line2);flex-shrink:0;transition:background .3s} .ed-sw::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff} .svc-demo.active .ed-sw{animation:edSwOn .4s var(--ease) 1s forwards} .svc-demo.active .ed-sw::after{animation:edKnob .45s var(--spring) 1s forwards} @keyframes edSwOn{to{background:var(--good)}} @keyframes edKnob{to{transform:translateX(19px)}} .ed-toast{display:inline-flex;align-items:center;gap:7px;border-radius:99px;padding:7px 13px;font-size:.82rem;font-weight:600;opacity:0; background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good);border:1px solid color-mix(in srgb,var(--good) 40%,transparent)} .ed-toast svg{width:13px;height:13px} .svc-demo.active .ed-toast{animation:svcPop .5s var(--ease) 1.5s both} @keyframes svcPop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} /* 03 Reservierung */ .rv-days{display:flex;gap:8px;margin-bottom:14px} .rv-day{flex:1;text-align:center;padding:9px 0;border-radius:10px;background:var(--card2);border:1px solid var(--line2); font-family:var(--f-sans);font-size:.82rem;font-weight:700;color:var(--mut)} .rv-day.on{background:var(--ink);color:var(--surf);border-color:transparent} .rv-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px} .rv-slot{padding:10px 0;text-align:center;border-radius:10px;background:var(--card2);border:1px solid var(--line2); font-family:var(--f-sans);font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)} .rv-slot.off{opacity:.4;text-decoration:line-through} .rv-slot.pick{border-color:var(--acc);color:var(--acc)} .svc-demo.active .rv-slot.pick{animation:rvPick .55s var(--spring) .7s both} @keyframes rvPick{0%{background:transparent}55%{background:color-mix(in srgb,var(--acc) 20%,transparent);transform:scale(1.08)} 100%{background:color-mix(in srgb,var(--acc) 12%,transparent);transform:none}} .rv-confirm{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--acc);color:#fff; border-radius:12px;padding:12px;font-family:var(--f-sans);font-weight:700;font-size:.86rem;opacity:0} .rv-confirm svg{width:15px;height:15px} .svc-demo.active .rv-confirm{animation:svcPop .5s var(--ease) 1.3s both} /* 04 Bewertungen */ .gv-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px} .gv-score{display:flex;flex-direction:column;gap:7px} .gv-num{font-family:var(--f-sans);font-weight:900;font-size:2.5rem;line-height:1;color:var(--ink)} .gv-sub{font-size:.78rem;color:var(--dim)} .gv-stars,.gv-mini{display:flex;gap:3px} .gv-stars i{width:17px;height:17px} .gv-mini i{width:11px;height:11px;background:#f5b73d; -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat} .svc-stage{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1L12 2Z'/%3E%3C/svg%3E")} .gv-stars i{background:var(--line2);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat} .svc-demo.active .gv-stars i{animation:gvFill .4s ease both} .svc-demo.active .gv-stars i:nth-child(1){animation-delay:.25s} .svc-demo.active .gv-stars i:nth-child(2){animation-delay:.38s} .svc-demo.active .gv-stars i:nth-child(3){animation-delay:.51s} .svc-demo.active .gv-stars i:nth-child(4){animation-delay:.64s} .svc-demo.active .gv-stars i:nth-child(5){animation-delay:.77s} @keyframes gvFill{from{background:var(--line2);transform:scale(.6)}60%{transform:scale(1.25)}to{background:#f5b73d;transform:scale(1)}} .gv-plus{align-self:flex-start;font-size:.72rem;font-weight:700;color:var(--good);background:color-mix(in srgb,var(--good) 15%,transparent); border:1px solid color-mix(in srgb,var(--good) 38%,transparent);border-radius:99px;padding:4px 10px;opacity:0} .svc-demo.active .gv-plus{animation:svcPop .5s var(--ease) 1s both} .gv-review{display:flex;gap:11px;background:var(--card2);border:1px solid var(--line2);border-radius:14px;padding:12px 13px;opacity:0} .svc-demo.active .gv-review{animation:svcRow .55s var(--ease) 1.15s both} .gv-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(140deg,#4a8cff,#2f6fb0)} .gv-body p{font-size:.84rem;color:var(--ink);margin-top:5px;line-height:1.35} /* 05 Design */ .dz-preview{position:relative;height:130px;border-radius:14px;overflow:hidden;padding:16px;margin-bottom:16px; display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(140deg,#2f6fb0,#123f3a)} .svc-demo.active .dz-preview{animation:dzMorph 7.5s steps(1,end) infinite} @keyframes dzMorph{ 0%{background:linear-gradient(140deg,#2f6fb0,#123f3a)} 33%{background:linear-gradient(140deg,#ff6a2b,#7a2a0e)} 66%{background:linear-gradient(140deg,#0e6e66,#08312d)} 100%{background:linear-gradient(140deg,#c08a26,#4a3410)}} .dz-logo{font-family:var(--f-serif);font-weight:600;font-size:1.3rem;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35)} .dz-btn{align-self:flex-start;background:#fff;color:#17130f;font-family:var(--f-sans);font-weight:700;font-size:.78rem; padding:7px 13px;border-radius:99px} .dz-bars{position:absolute;right:14px;top:16px;display:flex;flex-direction:column;gap:5px;align-items:flex-end} .dz-bars i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.6)} .dz-bars i:nth-child(1){width:34px}.dz-bars i:nth-child(2){width:24px}.dz-bars i:nth-child(3){width:29px} .dz-swatches{display:flex;align-items:center;gap:10px} .dz-sw{width:28px;height:28px;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} .dz-sw.s1{background:#2f6fb0}.dz-sw.s2{background:#ff6a2b}.dz-sw.s3{background:#0e6e66}.dz-sw.s4{background:#c08a26} .dz-label{margin-left:auto;font-size:.8rem;color:var(--dim)} .svc-demo.active .dz-sw{animation:dzSel 7.5s ease-in-out infinite} .svc-demo.active .dz-sw.s1{animation-delay:0s} .svc-demo.active .dz-sw.s2{animation-delay:2.5s} .svc-demo.active .dz-sw.s3{animation-delay:5s} .svc-demo.active .dz-sw.s4{animation-delay:-2.5s} @keyframes dzSel{0%{box-shadow:0 0 0 2px var(--surf),0 0 0 4px rgba(255,255,255,.85);transform:scale(1.14)} 12%{box-shadow:0 0 0 2px var(--surf),0 0 0 4px rgba(255,255,255,.85);transform:scale(1.14)} 28%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transform:none}} /* 06 Hosting */ .hs-uptime{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;margin-bottom:18px} .hs-uptime>span:first-child{font-size:.85rem;color:var(--mut)} .hs-pct{font-family:var(--f-sans);font-weight:900;font-size:1.55rem;line-height:1;color:var(--good);justify-self:end} .hs-bar{grid-column:1/-1;height:9px;border-radius:99px;background:var(--card2);border:1px solid var(--line2);overflow:hidden} .hs-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--good),#7ef0c0)} .svc-demo.active .hs-bar i{animation:hsFill 1.5s var(--ease) .3s forwards} @keyframes hsFill{to{width:99%}} .hs-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .hs-b{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;background:var(--card2); border:1px solid var(--line2);font-family:var(--f-sans);font-size:.78rem;font-weight:600;color:var(--mut);opacity:0} .hs-b svg{width:14px;height:14px;color:var(--good)} .svc-demo.active .hs-b{animation:svcPop .5s var(--ease) both} .svc-demo.active .hs-b:nth-child(1){animation-delay:.55s} .svc-demo.active .hs-b:nth-child(2){animation-delay:.72s} .svc-demo.active .hs-b:nth-child(3){animation-delay:.89s} /* Walkthrough-Screens: kompaktere Item-Zeilen */ .screen .m-item{gap:9px;padding:8px} .screen .m-thumb{width:40px;height:40px} .screen .m-meta .nm{font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .screen .m-item .pr{font-size:.72rem} .screen .m-add{width:27px;height:27px;border-radius:9px;font-size:.92rem;margin-left:0} /* ---------- 12. WALKTHROUGH ---------- */ .walk-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} .walk-steps{display:flex;flex-direction:column} .walk-step{position:relative;display:flex;gap:22px;padding:26px 8px;border:none;border-top:1px solid var(--line); cursor:pointer;text-align:left;width:100%;opacity:.4;transition:opacity .4s var(--ease),padding .4s var(--ease)} .walk-steps .walk-step:last-child{border-bottom:1px solid var(--line)} .walk-step:hover{opacity:.75} .walk-step.active{opacity:1;padding-left:18px} .walk-step .ws-num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex-shrink:0; border:1px solid var(--line2);font-family:var(--f-sans);font-weight:700;font-size:.88rem;color:var(--dim); transition:color .3s,border-color .3s,background .3s,box-shadow .3s} .walk-step.active .ws-num{color:#fff;background:var(--acc);border-color:var(--acc); box-shadow:0 0 22px rgba(255,90,31,.45)} .walk-step h3{font-size:1.18rem;font-weight:700;letter-spacing:-.015em;margin-bottom:6px} .walk-step p{color:var(--mut);font-size:.92rem;max-width:44ch} .walk-step .ws-bar{position:absolute;left:0;top:-1px;height:2px;width:0;border-radius:99px; background:linear-gradient(90deg,var(--amber),var(--acc));box-shadow:0 0 10px rgba(255,90,31,.4)} .walk-step.active .ws-bar{animation:wsfill var(--wd,3400ms) linear forwards} @keyframes wsfill{from{width:0}to{width:100%}} .walk-controls{display:flex;align-items:center;gap:14px;margin-top:26px} .walk-controls button[data-play]{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;color:var(--ink);transition:border-color .2s,color .2s,transform .3s var(--spring)} .walk-controls button[data-play]:hover{border-color:var(--acc);color:var(--acc);transform:scale(1.06)} .walk-controls button[data-play] svg{width:16px;height:16px} .walk-controls .hint{color:var(--dim);font-size:.82rem} .walk-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:620px} .screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:translateX(26px); transition:opacity .45s var(--ease),transform .55s var(--ease);pointer-events:none} .screen.active{opacity:1;transform:none;pointer-events:auto} .screen.active > *{animation:srise .5s var(--ease) both} .screen.active > *:nth-child(2){animation-delay:.06s} .screen.active > *:nth-child(3){animation-delay:.12s} .screen.active > *:nth-child(4){animation-delay:.18s} .screen.active > *:nth-child(5){animation-delay:.24s} .screen.active > *:nth-child(6){animation-delay:.3s} .screen.active .m-status{animation:none} @keyframes srise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .m-section-title{padding:14px 16px 6px;font-family:var(--f-sans);font-weight:800;font-size:1.02rem} .m-field{margin:0 14px 8px;background:#171412;border:1px solid rgba(240,233,222,.07);border-radius:12px;padding:11px 13px;display:flex;align-items:center;gap:10px;font-size:.76rem;color:#a89e90} .m-field svg{width:15px;height:15px;color:var(--acc);flex-shrink:0} .m-field .chk{margin-left:auto;color:#3ddc97} .m-line{margin:0 14px 8px;display:flex;justify-content:space-between;align-items:center;background:#171412;border:1px solid rgba(240,233,222,.07);border-radius:12px;padding:11px 13px;font-size:.8rem} .m-line b{font-family:var(--f-sans);font-variant-numeric:tabular-nums} .m-sum{margin:auto 16px 10px;display:flex;justify-content:space-between;align-items:center;font-family:var(--f-sans);font-weight:800;font-size:1.08rem;padding:6px 2px} .m-sum span:first-child{color:#8d8375;font-weight:600} .m-pay{margin:0 14px 14px;background:var(--acc);color:#fff;border-radius:13px;padding:14px;text-align:center;font-family:var(--f-sans);font-weight:700;font-size:.92rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)} .m-pay.pulse{animation:payPulse 2s ease infinite} @keyframes payPulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 0 rgba(255,90,31,.4)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 9px rgba(255,90,31,0)}} .m-done{justify-content:center;align-items:center;text-align:center;gap:14px;padding:24px} .checkwrap{width:92px;height:92px;border-radius:50%;background:rgba(61,220,151,.12);display:grid;place-items:center} .checkwrap .ring{width:72px;height:72px;border-radius:50%;background:#3ddc97;display:grid;place-items:center;color:#06231a} .checkwrap svg{width:36px;height:36px} .screen.active .checkwrap .ring{animation:popin .55s var(--spring) both} @keyframes popin{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}} .m-done .lbl{font-family:var(--f-sans);font-weight:800;font-size:1.25rem} .eta-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:99px;background:rgba(61,220,151,.12);color:#3ddc97;font-weight:600;font-size:.8rem} .eta-chip svg{width:14px;height:14px} .m-done .sub{font-size:.8rem;color:#8d8375;padding:0 18px} .kitchen-ticket{margin-top:4px;background:#171412;border:1px dashed rgba(240,233,222,.2);border-radius:12px;padding:12px 16px;font-size:.74rem;color:#a89e90;width:86%;line-height:1.6} .kitchen-ticket b{font-family:var(--f-sans);color:#f0e9de} /* ---------- 13. DUO-LAYOUT + FAKTEN ---------- */ .duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center} .duo-copy>.btn{margin-top:34px} .fact-list{display:flex;flex-direction:column} .fact-list li{position:relative;padding:20px 4px 20px 26px;border-top:1px solid var(--line)} .fact-list li::before{content:"";position:absolute;left:2px;top:29px;width:8px;height:8px;border-radius:50%; background:color-mix(in srgb,var(--acc) 55%,transparent);box-shadow:0 0 10px rgba(255,90,31,.35)} .fact-list li:last-child{border-bottom:1px solid var(--line)} .fact-list b{display:block;font-family:var(--f-sans);font-weight:700;font-size:1.06rem;letter-spacing:-.01em;margin-bottom:4px} .fact-list span{color:var(--mut);font-size:.92rem} [dir="rtl"] .fact-list li{padding:20px 26px 20px 4px} [dir="rtl"] .fact-list li::before{left:auto;right:2px} .duo-visual{position:relative;display:flex;align-items:center;justify-content:center} /* Service-Demo */ /* Gleiche Größe wie die App-Vorschau im Tisch-Service darunter (340 × 704), damit die beiden Handys in derselben Sektion nicht unterschiedlich groß wirken. Dafür muss das zoom:.82 der .bt-visual hier raus — sonst käme der Rahmen auf 279 px. Maße des Standard-Rahmens × 1,181: Radius 46 → 54, Polster 10 → 12, Island 80×22 → 94×26. */ #serviceDemo.bt-visual{zoom:1} #serviceDemo .phone-shell{width:340px;height:704px;border-radius:54px;padding:12px} #serviceDemo .phone-shell .island{top:26px;width:94px;height:26px;border-radius:15px} #serviceDemo .phone-screen{border-radius:42px} /* Gast-Website im Handy: burger.html im Vorschau-Modus (?embed=1). Die Seite rendert in echter Handy-Breite (390px) und wird auf die Bildschirmbreite des Rahmens heruntergerechnet — so bleiben Schriftgrößen und Umbrüche exakt die, die ein Gast am Tisch sieht. Bildschirm 340 − 2×12 Polster − 2×1 Rahmen = 314 breit: 314 / 390 = .8051. Höhe passend dazu, damit unten kein Rand bleibt: 678 / .8051 = 842. */ .svc-site{position:absolute;left:0;top:0;display:block;border:0; width:390px;height:842px;transform:scale(.8051);transform-origin:0 0; background:#0e0c07;pointer-events:none} /* ---------- 14. LIVE-TISCHPLAN ---------- */ .floor-card{width:100%;max-width:540px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden} .floor-top{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)} .ft-title{font-family:var(--f-sans);font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:9px} .ft-title .dot{width:8px;height:8px;border-radius:50%;background:var(--good);animation:pulse 2.2s infinite} .ft-live{margin-left:auto;font-size:.74rem;font-weight:600;color:var(--mut);border:1px solid var(--line2);border-radius:99px;padding:5px 12px;white-space:nowrap} .floor-grid{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px} .tbl{position:relative;display:flex;flex-direction:column;min-height:120px;border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;background:color-mix(in srgb,var(--card2) 55%,transparent);transition:border-color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease)} .tbl-head{display:flex;align-items:center;gap:9px;margin-bottom:11px} .tbl .tno{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-family:var(--f-sans);font-weight:800;font-size:.82rem;background:rgba(240,233,222,.06);color:var(--ink);flex-shrink:0;transition:background .4s var(--ease),color .4s var(--ease)} .tbl .seats{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;color:var(--dim);font-weight:600;font-variant-numeric:tabular-nums} .tbl .seats svg{width:14px;height:14px} .tbl-status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--f-sans);font-weight:700;font-size:.66rem;letter-spacing:.01em;padding:4px 9px;border-radius:99px;white-space:nowrap;transition:color .4s var(--ease),background .4s var(--ease)} .tbl-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0} /* Platz für max. 3 Positionen fest reserviert — Kachel- und Kartenhöhe bleiben konstant */ .tbl-items{list-style:none;display:flex;flex-direction:column;gap:5px;flex:1;min-height:74px} .tbl-items li{display:flex;gap:7px;align-items:baseline;font-size:.8rem;color:var(--mut);animation:tblItemIn .45s var(--ease) both} .tbl-items .ti-q{font-family:var(--f-sans);font-weight:700;font-size:.74rem;color:var(--ink);font-variant-numeric:tabular-nums;flex-shrink:0} @keyframes tblItemIn{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}} .tbl-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:11px;padding-top:9px;border-top:1px dashed var(--line);font-size:.72rem;color:var(--dim)} .tbl-foot b{font-family:var(--f-sans);font-weight:800;font-size:.92rem;color:var(--ink);font-variant-numeric:tabular-nums} .tbl.s-open{border-style:dashed} .tbl.s-open .tbl-items,.tbl.s-open .tbl-foot{opacity:.4} .tbl.s-open .tbl-status{color:var(--dim);background:rgba(240,233,222,.05)} .tbl.s-new .tbl-status{color:var(--acc);background:color-mix(in srgb,var(--acc) 15%,transparent)} .tbl.s-kitchen .tbl-status{color:var(--star);background:color-mix(in srgb,var(--star) 15%,transparent)} .tbl.s-served .tbl-status{color:var(--good);background:color-mix(in srgb,var(--good) 15%,transparent)} .tbl.s-paid .tbl-status{color:var(--mut);background:rgba(240,233,222,.05)} .tbl.s-new{border-color:color-mix(in srgb,var(--acc) 55%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 28%,transparent),0 14px 34px -20px var(--acc);animation:tblPop .55s var(--spring)} .tbl.s-new .tno{background:var(--acc);color:#fff} .tbl.s-new .tbl-status::before{animation:tblBlink 1.1s ease infinite} @keyframes tblPop{0%{transform:scale(.96)}100%{transform:scale(1)}} @keyframes tblBlink{0%,100%{opacity:1}50%{opacity:.25}} .order-toast{position:absolute;left:50%;bottom:16px;z-index:6;display:flex;gap:11px;align-items:center; background:rgba(21,17,16,.94); background:color-mix(in srgb,var(--card) 92%,transparent); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border:1px solid var(--line2);border-radius:15px;padding:11px 16px;box-shadow:var(--sh); opacity:0;transform:translate(-50%,14px);pointer-events:none; transition:opacity .45s var(--ease),transform .5s var(--spring)} .order-toast.show{opacity:1;transform:translate(-50%,0)} .order-toast .oi{width:32px;height:32px;border-radius:9px;background:var(--acc);color:#fff;display:grid;place-items:center;flex-shrink:0} .order-toast.show .oi{animation:ring 1s ease .15s 2} .order-toast .oi svg{width:16px;height:16px} .order-toast .ot{font-family:var(--f-sans);font-weight:700;font-size:.84rem;color:var(--ink)} .order-toast .os{font-size:.72rem;color:var(--dim);font-variant-numeric:tabular-nums} /* ---------- 15. BEWERTUNGS-ROUTER + GOOGLE ---------- */ .router-card{width:100%;max-width:460px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;box-shadow:var(--sh)} .rc-q{font-family:var(--f-sans);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;margin-bottom:4px} .rc-sub{color:var(--mut);font-size:.88rem;margin-bottom:20px} .rate-stars{display:flex;gap:8px;margin-bottom:22px} .rate-stars button{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;transition:transform .3s var(--spring)} .rate-stars button:hover{transform:translateY(-3px) scale(1.05)} .rate-stars svg{width:34px;height:34px;color:var(--line2);transition:color .25s} .rate-stars button.lit svg{color:var(--star);filter:drop-shadow(0 0 8px rgba(245,183,61,.45))} .rate-stars button.lit{animation:starpop .3s var(--spring)} @keyframes starpop{0%{transform:scale(.85)}100%{transform:scale(1)}} /* Fester Slot: beide Routen liegen übereinander im selben Grid-Feld — die Karte behält immer die Höhe der größten Route, nichts schiebt die Seite. */ .rc-routes{display:grid;margin-top:2px} .rc-routes .route{grid-area:1/1} .route{border-radius:15px;padding:16px;display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line); opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s} .route.show{opacity:1;visibility:visible;transform:none; transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s} .route .ri{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:grid;place-items:center} .route .ri svg{width:20px;height:20px} .route .rt{font-family:var(--f-sans);font-weight:700;font-size:.95rem} .route .rd{color:var(--mut);font-size:.82rem;margin-top:3px} .route-public{background:rgba(61,220,151,.07);border-color:rgba(61,220,151,.3)} .route-public .ri{background:rgba(255,255,255,.06)} .route-internal{background:color-mix(in srgb,var(--card2) 70%,transparent)} .route-internal .ri{background:rgba(240,233,222,.06);color:var(--mut)} [data-theme="light"] .route-internal .ri{background:rgba(30,22,15,.06)} .rc-hint{margin-top:16px;font-size:.74rem;color:var(--dim)} .google-card{margin-top:34px;display:flex;align-items:center;gap:18px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surf);box-shadow:var(--sh-sm)} .google-card .g{width:30px;height:30px;flex-shrink:0} .gc-score{display:flex;align-items:center;gap:12px} .gc-score .num{font-family:var(--f-sans);font-weight:800;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums} .gc-stars{display:flex;gap:2px;color:var(--star)} .gc-stars svg{width:15px;height:15px;opacity:0;transform:scale(.7)} .gc-card-in .gc-stars svg{animation:gstar .45s var(--spring) forwards} .gc-card-in .gc-stars svg:nth-child(1){animation-delay:.05s} .gc-card-in .gc-stars svg:nth-child(2){animation-delay:.12s} .gc-card-in .gc-stars svg:nth-child(3){animation-delay:.19s} .gc-card-in .gc-stars svg:nth-child(4){animation-delay:.26s} .gc-card-in .gc-stars svg:nth-child(5){animation-delay:.33s} @keyframes gstar{to{opacity:1;transform:scale(1)}} .gc-count{color:var(--mut);font-size:.84rem;margin-top:4px} .gc-count b{color:var(--good);font-weight:600} /* ---------- 16. DASHBOARD ---------- */ .dash{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surf);box-shadow:var(--sh);overflow:hidden} .dash-top{display:flex;align-items:center;gap:14px;padding:18px 26px;border-bottom:1px solid var(--line)} .dt-title{font-family:var(--f-sans);font-weight:700;font-size:.98rem;display:flex;align-items:center;gap:10px} .dt-title .dot{width:8px;height:8px;border-radius:50%;background:var(--good);animation:pulse 2.2s infinite} .period{margin-left:auto;font-size:.8rem;font-weight:600;color:var(--mut);border:1px solid var(--line2);border-radius:99px;padding:6px 14px} /* Hairline-Cockpit: eine Fläche, Zonen durch Hairlines getrennt — kein Karten-Zoo. Umsatz trägt als Schlüsselzahl den Glut-Verlauf, Neben-KPIs laufen als Zeilen. */ .dash-hero{display:grid;grid-template-columns:1.25fr 1fr;border-bottom:1px solid var(--line)} .dh-main{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:26px} .dash .kl{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-family:var(--f-sans);font-weight:600;color:var(--dim)} .dh-main .kv{font-family:var(--f-sans);font-weight:800;font-size:clamp(2.1rem,2.6vw,2.6rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums; background:var(--grad-ember);-webkit-background-clip:text;background-clip:text;color:transparent} .dash .kd{font-size:.74rem;font-weight:600} .dash .kd.up{color:var(--good)} .dash .kd.star{color:var(--star)} .dh-main .kd i{font-style:normal;font-weight:500;color:var(--dim)} .dh-side{display:flex;flex-direction:column;justify-content:center;border-inline-start:1px solid var(--line)} .dh-kpi{display:flex;align-items:baseline;gap:12px;padding:13px 22px} .dh-kpi+.dh-kpi{border-top:1px solid var(--line)} .dh-kpi .kl{flex:1;letter-spacing:.1em;white-space:nowrap} .dh-kpi .kn{font-family:var(--f-sans);font-weight:800;font-size:1.02rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .dh-kpi .kd{font-size:.7rem;white-space:nowrap} .dash-sec{padding:22px 26px} .dash-sec+.dash-sec{border-top:1px solid var(--line)} .dc-h{font-family:var(--f-sans);font-weight:700;font-size:.92rem;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between} .dc-h span{font-size:.74rem;color:var(--dim);font-weight:500} .chart{display:flex;align-items:flex-end;gap:10px;height:140px} .chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end} .chart .bar{position:relative;width:100%;max-width:30px;border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 55%,transparent),color-mix(in srgb,var(--acc) 22%,transparent)); height:0;transition:height 1.1s var(--ease)} .chart .col.peak .bar{background:linear-gradient(180deg,var(--amber),var(--acc));box-shadow:0 0 22px -4px rgba(255,90,31,.5)} .chart .col small{font-size:.68rem;color:var(--dim);font-weight:600} /* Peak-Wert sitzt über der Balkenkante (kostet keinen Flex-Platz) und erscheint, nachdem die Balken gewachsen sind — Zahlen statt Adjektive */ .peak-val{position:absolute;left:50%;bottom:100%;margin-bottom:6px;white-space:nowrap; font-family:var(--f-sans);font-weight:700;font-size:.72rem;color:var(--amber);font-variant-numeric:tabular-nums; opacity:0;translate:-50% 6px;transition:opacity .5s var(--ease) 1s,translate .5s var(--ease) 1s} .dash.live .peak-val{opacity:1;translate:-50% 0} [data-theme="light"] .peak-val{color:var(--acc)} .dash.live .chart .bar{height:var(--h)} .dash.live .chart .col:nth-child(1) .bar{transition-delay:.05s} .dash.live .chart .col:nth-child(2) .bar{transition-delay:.11s} .dash.live .chart .col:nth-child(3) .bar{transition-delay:.17s} .dash.live .chart .col:nth-child(4) .bar{transition-delay:.23s} .dash.live .chart .col:nth-child(5) .bar{transition-delay:.29s} .dash.live .chart .col:nth-child(6) .bar{transition-delay:.35s} .dash.live .chart .col:nth-child(7) .bar{transition-delay:.41s} .toplist{display:flex;flex-direction:column} .toprow{display:flex;align-items:center;gap:14px;padding:11px 0} .toprow:first-child{padding-top:2px} .toprow:last-child{padding-bottom:2px} .toprow+.toprow{border-top:1px solid var(--line)} /* Rang in Fraunces-Kursive — dasselbe Nummern-System wie die Kapitel */ .toprow .rank{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.05rem;line-height:1;color:var(--dim);min-width:14px;text-align:center;flex-shrink:0} .toprow:first-child .rank{color:var(--acc)} .toprow .th{width:40px;height:40px;border-radius:12px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} [data-theme="light"] .toprow .th{box-shadow:inset 0 0 0 1px rgba(30,22,15,.12)} .toprow .tr-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .toprow .nm{font-size:.86rem;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .toprow .pct{font-family:var(--f-sans);font-weight:700;font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--mut);flex-shrink:0} .toprow .track{display:block;height:3px;border-radius:99px;background:var(--line);overflow:hidden} .toprow .track .tbar{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--amber),var(--acc));transition:width 1.1s var(--ease)} .dash.live .toprow:nth-child(1) .tbar{transition-delay:.1s} .dash.live .toprow:nth-child(2) .tbar{transition-delay:.22s} .dash.live .toprow:nth-child(3) .tbar{transition-delay:.34s} .dash.live .toprow:nth-child(4) .tbar{transition-delay:.46s} .dash.live .toprow .tbar{width:var(--w)} /* Label über den optionalen Extras */ .mf-head{margin-top:64px;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap; padding-top:28px;border-top:1px dashed var(--line2)} .mf-head p{color:var(--dim);font-size:.88rem} .mf-head + .mini-feats{margin-top:22px} .mini-feats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:64px;border-top:1px solid var(--line)} .mini-feats li{position:relative;padding:26px 26px 26px 0;border-bottom:1px solid var(--line);transition:background .3s} .mini-feats li:hover{background:color-mix(in srgb,var(--card) 55%,transparent)} .mini-feats li:nth-child(3n+2),.mini-feats li:nth-child(3n){padding-left:26px;border-left:1px solid var(--line)} .mini-feats b{display:block;font-family:var(--f-sans);font-weight:700;font-size:1rem;margin-bottom:4px} .mini-feats span{color:var(--mut);font-size:.88rem} /* ---------- 17. BUILDER ---------- */ /* Builder = Haupt-Lead-Magnet: zentrierte Bühne, Glut-Glow, große Live-Vorschau */ .builder-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px} .builder-stage::before{content:"";position:absolute;inset:-6% -14%;z-index:-1;pointer-events:none; background:radial-gradient(56% 52% at 50% 40%,color-mix(in srgb,var(--acc) 13%,transparent),transparent 72%)} .chips{display:flex;flex-wrap:wrap;gap:10px} .builder-stage .chips{justify-content:center} .style-chip{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border-radius:99px;border:1px solid var(--line2);background:transparent;font-family:var(--f-sans);font-weight:600;font-size:.9rem;color:var(--mut);transition:all .3s var(--ease);cursor:pointer} .style-chip:hover{color:var(--ink);border-color:var(--ink);transform:translateY(-1px)} .style-chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)} .sc-dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--acc));flex-shrink:0;box-shadow:0 0 8px color-mix(in srgb,var(--c,var(--acc)) 60%,transparent)} .builder-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:4px} .builder-note{color:var(--dim);font-size:.9rem;margin:0;text-align:center} .browser{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line2);background:var(--card);width:100%} .builder-stage .browser{max-width:880px; box-shadow:var(--sh),0 50px 130px -50px color-mix(in srgb,var(--acc) 30%,transparent)} .browser-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line)} .browser-bar .dot{width:9px;height:9px;border-radius:50%;background:var(--line2)} .browser-bar .url{margin-left:12px;border:1px solid var(--line);border-radius:8px;padding:5px 14px;font-size:.76rem;color:var(--dim);flex:1;text-align:center} .browser-canvas{transition:background .6s var(--ease);background:var(--b-bg,var(--bg2));min-height:380px;position:relative;overflow:hidden} .bc-hero{padding:clamp(30px,4.5vw,46px) clamp(26px,4vw,42px) clamp(24px,3vw,32px);transition:background .6s var(--ease);background:var(--b-hero,transparent)} .bc-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px} .bc-logo{font-family:var(--b-font,var(--f-sans));font-weight:800;font-size:1.15rem;color:var(--b-ink,var(--ink));transition:color .6s} .bc-links{display:flex;gap:12px} .bc-links span{width:38px;height:7px;border-radius:4px;background:var(--b-soft,var(--line));transition:background .6s} .bc-title{font-family:var(--b-font,var(--f-sans));font-weight:800;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.1;color:var(--b-ink,var(--ink));max-width:18ch;margin-bottom:14px;transition:color .6s;letter-spacing:-.02em} .bc-sub{height:8px;width:46%;border-radius:5px;background:var(--b-soft,var(--line));margin-bottom:8px;transition:background .6s} .bc-sub.short{width:30%} .bc-cta{display:inline-block;margin-top:18px;padding:11px 22px;border-radius:var(--b-radius,10px);background:var(--b-accent,var(--acc));color:var(--b-onaccent,#fff);font-family:var(--b-font,var(--f-sans));font-weight:700;font-size:.85rem;transition:background .6s,border-radius .6s,color .6s} .bc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 clamp(26px,4vw,42px) clamp(26px,4vw,36px)} .bc-card{display:flex;flex-direction:column;gap:8px;padding:9px 9px 13px;border-radius:var(--b-radius,10px);background:var(--b-card,var(--card2));border:1px solid var(--b-border,var(--line));transition:all .6s} .bc-thumb{height:84px;border-radius:calc(var(--b-radius,10px) - 4px);background-size:cover;background-position:center;transition:border-radius .6s} .bc-line{height:7px;width:68%;border-radius:4px;background:var(--b-soft,var(--line));margin:0 4px;transition:background .6s} .bc-line.short{width:42%} /* ---------- 18. VERGLEICH ---------- */ .compare{display:grid;grid-template-columns:1.35fr 1fr 1fr;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surf);box-shadow:var(--sh)} .compare .ch{padding:24px 22px;text-align:center;font-family:var(--f-sans);font-weight:700;font-size:.95rem;border-bottom:1px solid var(--line)} .compare .col-you{position:relative;background:color-mix(in srgb,var(--acc) 6%,transparent);box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line)} .compare .col-you .ch{color:var(--acc);letter-spacing:.02em} .compare .col-you .ch::after{content:"";display:block;width:34px;height:2px;border-radius:99px; background:linear-gradient(90deg,var(--amber),var(--acc));margin:8px auto 0;box-shadow:0 0 10px rgba(255,90,31,.5)} .compare .col-them .ch{color:var(--dim)} .cell{padding:17px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;min-height:60px;font-size:.93rem} .col-feat .cell{color:var(--mut);font-weight:500} .compare .col>.cell:last-child{border-bottom:none} .cell .yes{color:var(--good)} .cell .no{color:var(--bad);opacity:.75} .cell svg{width:18px;height:18px;flex-shrink:0} .compare .col-you .cell{font-weight:600;justify-content:center;text-align:center} .compare .col-them .cell{color:var(--dim);justify-content:center;text-align:center} .compare.reveal .col>*{opacity:0;transform:translateY(12px)} .compare.reveal.in .col>*{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)} .compare.reveal.in .col>*:nth-child(1){transition-delay:.04s} .compare.reveal.in .col>*:nth-child(2){transition-delay:.1s} .compare.reveal.in .col>*:nth-child(3){transition-delay:.16s} .compare.reveal.in .col>*:nth-child(4){transition-delay:.22s} .compare.reveal.in .col>*:nth-child(5){transition-delay:.28s} .compare.reveal.in .col>*:nth-child(6){transition-delay:.34s} .compare.reveal.in .col>*:nth-child(7){transition-delay:.4s} /* ---------- 19. 0%-STATEMENT: die Glut-Kathedrale ---------- */ .statement{position:relative;padding:190px 0 160px;text-align:center;overflow:hidden} .statement::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:min(1100px,120vw);height:130%;pointer-events:none; background:radial-gradient(closest-side,rgba(255,96,28,.14),rgba(255,90,31,.04) 55%,transparent 75%); filter:blur(40px)} @supports (animation-timeline: view()){ .statement::before{animation:glowIn linear both;animation-timeline:view();animation-range:entry 0% cover 50%} } .st-in{position:relative;display:flex;flex-direction:column;align-items:center} .st-in .chap-tag{margin-bottom:10px} .st-zero{position:relative;font-family:var(--f-serif);font-style:italic;font-weight:500; font-size:clamp(7rem,23vw,18rem);line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums; filter:drop-shadow(0 14px 60px rgba(255,90,31,.3))} .st-zero .st-pct{font-size:.32em;vertical-align:.85em;margin-left:.04em;font-style:normal;font-family:var(--f-sans);font-weight:800; -webkit-text-fill-color:var(--acc);color:var(--acc)} .st-line{font-family:var(--f-sans);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.5rem);letter-spacing:-.015em;max-width:30ch;margin:26px auto 34px;line-height:1.4} .st-line .serif-accent{color:var(--acc);font-weight:500} @supports (animation-timeline: view()){ .st-zero{animation:stZoom linear both;animation-timeline:view();animation-range:entry 5% cover 45%} } @keyframes stZoom{from{transform:scale(.84);opacity:.2}to{transform:scale(1);opacity:1}} .st-in.boom .st-zero{animation:stSlam .5s var(--ease)} @keyframes stSlam{0%{transform:scale(1.07)}100%{transform:scale(1)}} /* Schockwelle beim Einschlag */ .st-in::after{content:"";position:absolute;left:50%;top:38%;width:40px;height:40px;border-radius:50%; border:2px solid rgba(255,90,31,.5);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none} .st-in.boom::after{animation:shockwave .9s var(--ease) forwards} @keyframes shockwave{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}100%{transform:translate(-50%,-50%) scale(14);opacity:0}} /* ---------- 20. PROZESS: Zeitstrahl mit Glut-Stationen ---------- Stationsnummern in Fraunces-Kursive (dasselbe Nummern-System wie Kapitel & Bausteine), jede Station trägt ihre Zeitangabe — Zahlen statt Adjektive. */ .steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;padding-top:30px} .steps::before{content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,var(--acc) 0%,color-mix(in srgb,var(--acc) 40%,var(--line)) 55%,var(--line) 100%)} .step{position:relative;padding:0 8px 10px 0} /* Stations-Punkt auf der Linie */ .step::before{content:"";position:absolute;top:-32.5px;inset-inline-start:0;width:6px;height:6px;border-radius:50%;background:var(--line2)} .step:first-child::before{background:var(--acc);box-shadow:0 0 12px rgba(255,90,31,.6)} .st-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px} .st-nr{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:2.3rem;line-height:1;letter-spacing:-.02em;color:var(--dim)} .step:first-child .st-nr{color:var(--acc);text-shadow:0 0 26px rgba(255,90,31,.45)} .st-meta{font-family:var(--f-sans);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap} .st-meta.acc{color:var(--acc)} .step h3{font-size:1.14rem;font-weight:700;margin-bottom:8px;letter-spacing:-.015em} .step p{color:var(--mut);font-size:.9rem} /* Punchline unter dem Zeitstrahl */ .steps-sum{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);color:var(--mut);font-size:.92rem} .steps-sum b{font-family:var(--f-sans);font-weight:700;color:var(--ink)} /* ---------- 21. STIMMEN: gestaffelte Karten ---------- */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start} .quote-card{position:relative;display:flex;flex-direction:column;gap:22px;margin:0;padding:38px 34px; background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm); transition:transform .45s var(--ease),border-color .35s,box-shadow .45s var(--ease)} .quote-card:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:var(--sh)} .quote-card:nth-child(2){margin-top:44px} .quote-card:nth-child(3){margin-top:88px} .quote-card::before{content:"„";position:absolute;top:2px;inset-inline-start:26px; font-family:var(--f-serif);font-style:italic;font-size:5.5rem;line-height:1;pointer-events:none; background:var(--grad-ember);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent;opacity:.85} .qc-text{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.13rem;line-height:1.65;color:var(--ink);flex:1;letter-spacing:-.005em;padding-top:34px} .qc-foot{display:flex;align-items:center;gap:12px;border-top:1px dashed var(--line2);padding-top:18px} .qc-name{font-family:var(--f-sans);font-weight:700;font-size:.92rem;line-height:1.2} .qc-biz{font-size:.78rem;color:var(--dim);margin-top:2px} .qc-metric{margin-left:auto;font-family:var(--f-sans);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);white-space:nowrap} [dir="rtl"] .qc-metric{margin-left:0;margin-right:auto} /* ---------- 22. PREISE ---------- */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;padding-top:12px} .plan{position:relative;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px 36px;display:flex;flex-direction:column; transition:transform .45s var(--ease),border-color .4s,box-shadow .45s var(--ease)} .plan:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:var(--sh)} .plan.featured{border-color:color-mix(in srgb,var(--acc) 55%,var(--line)); background:linear-gradient(175deg,color-mix(in srgb,var(--acc) 8%,var(--card)),var(--card) 45%); box-shadow:var(--sh-glow)} .plan.featured:hover{box-shadow:var(--sh-glow),var(--sh)} .plan.featured::before{content:"";position:absolute;inset:0 0 auto 0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,170,110,.55),transparent)} .plan .tag{position:absolute;top:22px;inset-inline-end:22px;font-family:var(--f-sans);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:#fff;background:var(--acc);border-radius:99px;padding:6px 13px; box-shadow:0 6px 18px -6px rgba(255,90,31,.6)} .pname{font-family:var(--f-sans);font-weight:700;font-size:1.15rem;margin-bottom:6px} .pdesc{color:var(--dim);font-size:.88rem;min-height:42px} .pprice{font-family:var(--f-sans);font-weight:800;font-size:2.8rem;margin:16px 0 4px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1} .plan.featured .pprice{background:var(--grad-ember);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent} .plan.featured .pprice small{-webkit-text-fill-color:var(--mut);color:var(--mut)} .pprice small{font-size:.95rem;color:var(--mut);font-weight:500;letter-spacing:0} .pnote{color:var(--dim);font-size:.82rem;margin-bottom:22px} .roi-chip{display:inline-block;margin:-6px 0 20px;font-size:.78rem;font-weight:600;color:var(--good)} .plan ul{display:flex;flex-direction:column;margin-bottom:30px;flex:1} .plan li{position:relative;padding:11px 0 11px 24px;font-size:.92rem;color:var(--mut);border-top:1px solid var(--line)} .plan li::before{content:"";position:absolute;left:2px;top:19px;width:10px;height:5px;border-left:1.5px solid var(--acc);border-bottom:1.5px solid var(--acc);transform:rotate(-45deg)} .plan li.opt{color:var(--dim)} .plan li.opt::before{content:"+";border:none;width:auto;height:auto;top:10px;left:1px;transform:none; font-family:var(--f-sans);font-weight:700;font-size:.95rem;color:var(--acc);line-height:1} .plan .btn{width:100%} .plans-trust{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 34px;margin-top:34px} .plans-trust span{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-sans);font-weight:500;font-size:.86rem;color:var(--mut)} .plans-trust svg{width:13px;height:13px;color:var(--good);flex-shrink:0} .plans-note{margin-top:20px;text-align:center;font-size:.78rem;color:var(--dim)} /* ---------- 23. FAQ ---------- */ .faq{max-width:840px;margin:0 auto;border-top:1px solid var(--line)} .qa{border-bottom:1px solid var(--line);transition:background .3s} .qa[open]{background:color-mix(in srgb,var(--card) 50%,transparent)} .qa summary{padding:26px 10px;font-family:var(--f-sans);font-weight:600;font-size:1.08rem;letter-spacing:-.01em;display:flex;justify-content:space-between;align-items:center;gap:18px;list-style:none;cursor:pointer;transition:color .2s,padding .3s var(--ease)} .qa summary::-webkit-details-marker{display:none} .qa summary:hover{color:var(--acc)} .qa[open] summary{padding-left:18px} .qa summary .pm{position:relative;width:32px;height:32px;border-radius:50%;border:1px solid var(--line2);flex-shrink:0;transition:transform .4s var(--spring),border-color .3s,background .3s} .qa summary .pm::before,.qa summary .pm::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transition:background .2s} .qa summary .pm::before{width:11px;height:1.5px;transform:translate(-50%,-50%)} .qa summary .pm::after{width:1.5px;height:11px;transform:translate(-50%,-50%)} .qa[open] summary .pm{transform:rotate(45deg);border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc)} .qa .ans{padding:0 60px 26px 18px;color:var(--mut);font-size:.96rem;max-width:70ch} .qa[open] .ans{animation:ansIn .4s var(--ease)} @keyframes ansIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .faq-more{max-width:840px;margin:34px auto 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--mut);font-size:.95rem} /* ---------- 24. KONTAKT ---------- */ .contact{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center; border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surf);box-shadow:var(--sh);padding:60px;overflow:hidden} .contact::before{content:"";position:absolute;top:-45%;inset-inline-end:-12%;width:56%;height:110%;pointer-events:none; background:radial-gradient(closest-side,rgba(255,96,28,.09),transparent 70%);filter:blur(50px)} .ctp-media{position:relative} .ctp-media img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:var(--r);border:1px solid var(--line2);filter:saturate(.92) contrast(1.03)} .ctp-media::after{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none; background:linear-gradient(200deg,rgba(255,110,40,.12),transparent 45%)} .ctp-avail{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;font-size:.78rem;color:var(--ink);background:color-mix(in srgb,var(--card) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line2)} .ctp-avail .live{width:7px;height:7px;border-radius:50%;background:var(--good);animation:pulse 2.2s infinite} .ctp-body{position:relative;z-index:1} .ctp-body .chap-tag{margin-bottom:12px} .ctp-body h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.035em;margin-bottom:16px} .ctp-body h2 .serif-accent{font-weight:500;background:var(--grad-ember);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent} .ctp-lead{color:var(--mut);font-size:1.02rem;max-width:52ch;margin-bottom:20px} .ctp-sign{display:flex;flex-direction:column;gap:2px;margin-bottom:30px} .ctp-name{font-size:1.5rem;line-height:1.1;color:var(--ink)} .ctp-role{font-size:.82rem;color:var(--dim)} .lead-form{text-align:left;width:100%} .lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .lf-field label{display:block;font-family:var(--f-sans);font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--mut);margin-bottom:8px} .lf-field input{width:100%;min-height:52px;padding:12px 16px;border-radius:13px;border:1px solid var(--line2);background:color-mix(in srgb,var(--bg) 45%,transparent);color:var(--ink);font:inherit;font-size:.95rem;transition:border-color .25s,box-shadow .25s,background .25s} .lf-field input::placeholder{color:var(--dim)} .lf-field input:focus{outline:none;border-color:var(--acc);background:color-mix(in srgb,var(--bg) 70%,transparent); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent),0 0 24px -6px rgba(255,90,31,.25)} .lf-field input.invalid{border-color:var(--bad);box-shadow:0 0 0 3px rgba(226,85,85,.15)} .lf-wide{grid-column:1/-1} .lf-hp{position:absolute!important;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none} .lf-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px} .lf-spinner{display:none;width:16px;height:16px;border-radius:50%;border:2.2px solid color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor;animation:lfSpin .7s linear infinite} @keyframes lfSpin{to{transform:rotate(360deg)}} .lead-form.busy .lf-spinner{display:inline-block} .lead-form.busy .lf-submit>svg{display:none} .lead-form.busy .lf-submit{opacity:.85;pointer-events:none} .lf-error{display:none;margin-top:14px;padding:12px 16px;border-radius:13px;background:rgba(226,85,85,.09);border:1px solid rgba(226,85,85,.35);font-size:.88rem} .lf-error.show{display:block;animation:flowfade .4s var(--ease)} .lf-error a{color:var(--acc);text-decoration:underline;text-underline-offset:2px} .lead-form .cta-note{animation:none;margin-top:16px} .lead-form .cta-note a{color:var(--acc)} .lead-done{display:flex;gap:16px;align-items:center;padding:22px 24px;border-radius:var(--r);background:rgba(61,220,151,.08);border:1px solid rgba(61,220,151,.4)} .lead-done[hidden]{display:none} .lead-done .ld-ring{width:50px;height:50px;border-radius:50%;background:var(--good);color:#06231a;display:grid;place-items:center;flex-shrink:0;animation:popin .55s var(--spring) both} .lead-done .ld-ring svg{width:24px;height:24px} .lead-done .ld-t{font-family:var(--f-sans);font-weight:700;font-size:1.1rem} .lead-done .ld-s{color:var(--mut);font-size:.9rem;margin-top:3px} .ld-nl{margin:10px 0 0;font-size:.84rem;color:var(--mut);display:flex;gap:8px;flex-wrap:wrap;align-items:center} .ld-nl-btn{font-family:var(--f-sans);font-weight:700;font-size:.8rem;color:var(--acc);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px} .ld-nl-btn:hover{color:var(--ink)} /* Konfetti (Formular-Erfolg) */ .confetti{position:fixed;z-index:1200;pointer-events:none} .confetti span{position:absolute;width:8px;height:5px;border-radius:2px;opacity:0;animation:confettiFly 1.1s cubic-bezier(.2,.7,.3,1) forwards} @keyframes confettiFly{ 0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)} 100%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--rz)) scale(.7)} } /* ---------- 25. FOOTER ---------- */ footer{position:relative;margin-top:calc(var(--sec-gap) + 20px);border-top:1px solid var(--line);padding:70px 0 40px;overflow:hidden} footer::before{content:"";position:absolute;left:50%;bottom:-55%;transform:translateX(-50%); width:min(1200px,130vw);height:90%;pointer-events:none; background:radial-gradient(closest-side,rgba(255,96,28,.08),transparent 72%);filter:blur(48px)} .foot-giant{position:relative;font-family:var(--f-sans);font-weight:900;text-align:center; font-size:clamp(2.8rem,12.8vw,11.2rem);line-height:.92;letter-spacing:-.02em;margin-bottom:64px; color:transparent;-webkit-text-stroke:1px var(--line2); background-image:linear-gradient(90deg,color-mix(in srgb,var(--ink) 80%,transparent) 0 45%,transparent 50%); background-size:220% 100%;background-position:120% 0;background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text; user-select:none;white-space:nowrap} @supports (animation-timeline: view()){ .foot-giant{animation:footFill linear both;animation-timeline:view();animation-range:entry 0% cover 60%} } @keyframes footFill{from{background-position:120% 0}to{background-position:0% 0}} .foot-grid{position:relative;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px} .foot-grid p{color:var(--dim);font-size:.92rem;max-width:32ch;margin-top:16px} .foot-col h4{font-family:var(--f-sans);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:18px} .foot-col a{display:block;color:var(--mut);font-size:.93rem;padding:6px 0;transition:color .2s,padding .3s var(--ease)} .foot-col a:hover{color:var(--ink)} .foot-bottom{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:30px;border-top:1px solid var(--line);color:var(--dim);font-size:.84rem} .foot-legal{display:flex;gap:22px;flex-wrap:wrap} .foot-legal a:hover{color:var(--ink)} [data-cookie-reset]{cursor:pointer} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---------- 25b. NEWSLETTER (Footer, Double-Opt-in) ---------- */ .foot-newsletter{position:relative;display:flex;flex-wrap:wrap;gap:28px 40px;align-items:flex-start;justify-content:space-between; padding:32px 34px;margin-bottom:52px;border-radius:20px;border:1px solid var(--line2); background:color-mix(in srgb,var(--surface,var(--bg)) 55%,transparent)} .fn-text{flex:1 1 260px;min-width:220px} .fn-text h4{font-family:var(--f-sans);font-weight:700;font-size:.98rem;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px} .fn-text p{margin:0;color:var(--dim);font-size:.9rem;line-height:1.55;max-width:38ch} .nl-form{flex:1 1 340px;min-width:280px;max-width:460px} .nl-row{display:flex;gap:10px} .nl-row input[type="email"]{flex:1;min-width:0;min-height:50px;padding:11px 16px;border-radius:12px;border:1px solid var(--line2); background:color-mix(in srgb,var(--bg) 45%,transparent);color:var(--ink);font:inherit;font-size:.92rem; transition:border-color .25s,box-shadow .25s,background .25s} .nl-row input[type="email"]::placeholder{color:var(--dim)} .nl-row input[type="email"]:focus{outline:none;border-color:var(--acc);background:color-mix(in srgb,var(--bg) 70%,transparent)} .nl-row input[type="email"].invalid{border-color:var(--bad);box-shadow:0 0 0 3px rgba(226,85,85,.15)} .nl-submit{white-space:nowrap;position:relative} .nl-form.busy .nl-submit .lf-spinner{display:inline-block} .nl-form.busy .nl-submit{opacity:.85;pointer-events:none} .nl-check{display:flex;align-items:flex-start;gap:9px;margin-top:12px;cursor:pointer;color:var(--dim);font-size:.79rem;line-height:1.5} .nl-check input{flex-shrink:0;margin-top:3px;width:15px;height:15px;accent-color:var(--acc)} .nl-check a{color:var(--mut);text-decoration:underline;text-underline-offset:2px} .nl-check a:hover{color:var(--ink)} .nl-error{display:none;margin-top:12px;padding:11px 15px;border-radius:12px;background:rgba(226,85,85,.09);border:1px solid rgba(226,85,85,.35);font-size:.84rem} .nl-error.show{display:block;animation:flowfade .4s var(--ease)} .nl-error a{color:var(--acc)} .nl-done{flex:1 1 340px;min-width:280px;max-width:460px;margin:0;padding:14px 16px;border-radius:12px; background:color-mix(in srgb,var(--good,#3ddc97) 12%,transparent);border:1px solid color-mix(in srgb,var(--good,#3ddc97) 35%,transparent); color:var(--ink);font-size:.88rem;line-height:1.5} @media (max-width:700px){ .foot-newsletter{flex-direction:column;padding:26px 22px} .nl-row{flex-direction:column} .nl-submit{width:100%;justify-content:center} } /* ---------- 26. COOKIE-BANNER (von script.js injiziert) ---------- */ #cookieBanner{position:fixed;left:20px;bottom:20px;z-index:200;max-width:420px;width:calc(100% - 40px);overflow:hidden; background:rgba(21,17,16,.95); background:color-mix(in srgb,var(--card) 93%,transparent);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px); border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--sh); transform:translateY(130%);opacity:0;transition:transform .6s var(--spring),opacity .45s var(--ease)} #cookieBanner.show{transform:none;opacity:1} .cb-inner{display:flex;flex-direction:column;gap:14px;padding:24px 22px 20px} .cb-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line2);color:var(--acc)} .cb-ic svg{width:20px;height:20px} .cb-text strong{display:block;font-family:var(--f-sans);font-weight:700;font-size:1rem;margin-bottom:7px} .cb-text p{color:var(--mut);font-size:.86rem;line-height:1.55} .cb-text a{color:var(--acc);text-decoration:underline;text-underline-offset:2px} .cb-actions{display:flex;gap:10px;margin-top:2px} .cb-actions .btn{flex:1;min-height:44px;font-size:.88rem;padding:11px 16px} @media (max-width:520px){ #cookieBanner{left:12px;right:12px;bottom:12px;width:auto} .cb-actions{flex-direction:column-reverse} } /* ---------- 27. STICKY MINI-CTA ---------- */ .mini-cta{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:110; display:flex;align-items:center;gap:16px;padding:9px 10px 9px 22px;border-radius:999px; background:rgba(21,17,16,.92); background:color-mix(in srgb,var(--card) 86%,transparent); -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%); border:1px solid var(--line2);box-shadow:var(--sh); opacity:0;visibility:hidden;transform:translate(-50%,16px);pointer-events:none; transition:opacity .45s var(--ease),transform .55s var(--spring),visibility 0s linear .5s} .mini-cta.show{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto; transition:opacity .45s var(--ease),transform .55s var(--spring)} .mc-text{display:flex;align-items:baseline;gap:9px;white-space:nowrap} .mc-text b{font-family:var(--f-sans);font-weight:800;font-size:.95rem;letter-spacing:-.01em;color:var(--ink)} .mc-text .mc-sub{font-size:.8rem;color:var(--mut)} .mini-cta .btn-primary{min-height:40px;padding:9px 20px;font-size:.87rem} .mini-cta .btn-primary svg{width:13px;height:13px} .mc-close{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--dim);flex-shrink:0;transition:color .2s,background .2s} .mc-close:hover{color:var(--ink);background:var(--card2)} .mc-close svg{width:13px;height:13px} body:has(#cookieBanner.show) .mini-cta{opacity:0;visibility:hidden;pointer-events:none} /* ---------- 27b. KANAL-WÄHLER (Bottom-Sheet mobil / Modal Desktop) ---------- Öffnet aus den „Kostenlos starten"-CTAs (script.js). Hairline-Zeilen statt Karten, Jason-Avatar als persönlicher Anker. Ohne JS: display:none, CTAs bleiben normale Builder-Links. */ .cs-backdrop{position:fixed;inset:0;z-index:480;background:rgba(8,5,3,.6); -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px); opacity:0;transition:opacity .4s var(--ease)} .cs-backdrop.open{opacity:1} .cs-backdrop[hidden],.channel-sheet[hidden]{display:none} .channel-sheet{position:fixed;left:0;right:0;bottom:0;z-index:490; max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain; padding:14px 20px calc(18px + env(safe-area-inset-bottom,0px)); background:color-mix(in srgb,var(--card) 96%,transparent); -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%); border:1px solid var(--line2);border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:0 -24px 70px -20px rgba(10,5,2,.65); transform:translateY(100%);opacity:0; transition:transform .55s var(--spring),opacity .35s var(--ease)} .channel-sheet.open{transform:none;opacity:1} .cs-grab{display:block;width:42px;height:4px;border-radius:99px;margin:0 auto 14px; background:color-mix(in srgb,var(--ink) 22%,transparent)} .cs-close{position:absolute;top:16px;inset-inline-end:16px;width:34px;height:34px;border-radius:50%; display:grid;place-items:center;color:var(--dim);border:1px solid var(--line); transition:color .2s,background .2s} .cs-close:hover{color:var(--ink);background:var(--card2)} .cs-close svg{width:14px;height:14px} .cs-head{display:flex;align-items:center;gap:15px;padding:2px 44px 16px 2px} [dir="rtl"] .cs-head{padding:2px 2px 16px 44px} .cs-avatar{position:relative;width:56px;height:56px;flex-shrink:0} .cs-avatar img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:top; border:1px solid var(--line2);display:block} .cs-dot{position:absolute;bottom:2px;inset-inline-end:2px;width:11px;height:11px;border-radius:50%; background:var(--good);border:2px solid var(--card);animation:pulse 2.2s infinite} .cs-title{font-family:var(--f-sans);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1.15} .cs-sub{margin-top:5px;font-size:.87rem;line-height:1.5;color:var(--mut);text-wrap:pretty} .cs-list{border-top:1px solid var(--line)} .cs-opt{display:flex;align-items:center;gap:14px;padding:14px 6px;color:var(--ink); border-bottom:1px solid var(--line);transition:background .25s var(--ease)} .cs-opt:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)} .cs-ic{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:grid;place-items:center; border:1px solid var(--line2);color:var(--ink)} .cs-ic svg{width:20px;height:20px} .cs-ic-wa{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent)} .cs-tx{display:flex;flex-direction:column;gap:2px;min-width:0} .cs-tx b{font-family:var(--f-sans);font-weight:700;font-size:.97rem;letter-spacing:-.01em} .cs-tx span{font-size:.81rem;line-height:1.45;color:var(--mut)} .cs-go{width:16px;height:16px;flex-shrink:0;margin-inline-start:auto;color:var(--dim); transition:color .25s,translate .3s var(--ease)} [dir="rtl"] .cs-go{transform:scaleX(-1)} .cs-opt:hover .cs-go{color:var(--acc);translate:3px 0} [dir="rtl"] .cs-opt:hover .cs-go{translate:-3px 0} .cs-note{padding-top:13px;text-align:center;font-size:.78rem;color:var(--dim)} body.cs-open{overflow:hidden} @media (min-width:640px){ .channel-sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(470px,calc(100vw - 48px)); border-bottom:1px solid var(--line2);border-radius:var(--r-lg); padding:24px 26px 20px;box-shadow:var(--sh); transform:translate(-50%,calc(-50% + 24px)) scale(.97)} .channel-sheet.open{transform:translate(-50%,-50%) scale(1)} .cs-grab{display:none} .cs-head{padding-top:0} } @media (prefers-reduced-motion:reduce){ .cs-backdrop,.channel-sheet{transition:opacity .25s ease} .channel-sheet{transform:none} @media (min-width:640px){.channel-sheet{transform:translate(-50%,-50%)}} .cs-dot{animation:none} .cs-opt:hover .cs-go,[dir="rtl"] .cs-opt:hover .cs-go{translate:0} } /* ---------- 28. SPOTLIGHT: Karten folgen dem Cursor (JS setzt --mx/--my) ---------- */ .quote-card,.plan,.demo-card,.router-card,.floor-card,.google-card,.dash,.pkg-core,.contact{position:relative} .quote-card::after,.plan::after,.demo-card::after,.router-card::after,.floor-card::after,.google-card::after,.dash::after,.pkg-core::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:1; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,140,70,.08),transparent 65%); transition:opacity .5s var(--ease)} .quote-card:hover::after,.plan:hover::after,.demo-card:hover::after,.router-card:hover::after,.floor-card:hover::after,.google-card:hover::after,.dash:hover::after,.pkg-core:hover::after{opacity:1} [data-theme="light"] .quote-card::after,[data-theme="light"] .plan::after,[data-theme="light"] .demo-card::after, [data-theme="light"] .router-card::after,[data-theme="light"] .floor-card::after,[data-theme="light"] .google-card::after, [data-theme="light"] .dash::after,[data-theme="light"] .pkg-core::after{ background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(232,69,11,.06),transparent 65%)} /* ---------- 29. REVEAL v2 + THEME-TRANSITION ---------- */ .reveal{opacity:0;transform:translateY(34px);filter:blur(7px); transition:opacity .8s var(--ease),transform .9s var(--ease),filter .8s var(--ease)} .reveal.in{opacity:1;transform:none;filter:blur(0)} .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s} .reveal[data-d="5"]{transition-delay:.4s} .chap-head.reveal h2{clip-path:inset(0 100% 0 0);transition:clip-path 1.05s var(--ease) .1s} [dir="rtl"] .chap-head.reveal h2{clip-path:inset(0 0 0 100%)} .chap-head.reveal.in h2,[dir="rtl"] .chap-head.reveal.in h2{clip-path:inset(-.2em 0)} ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal} ::view-transition-old(root){z-index:1} ::view-transition-new(root){z-index:9999} @keyframes vtReveal{from{clip-path:circle(0% at var(--vt-x,50%) var(--vt-y,0%))}to{clip-path:circle(150% at var(--vt-x,50%) var(--vt-y,0%))}} html.vt-active::view-transition-new(root){animation:vtReveal .55s var(--ease)} /* Hero wartet auf den Intro-Vorhang */ html.with-intro .hero-bg{animation-delay:2.75s} html.with-intro .hero-over{animation-delay:2.9s} html.with-intro .hero h1{animation-delay:3.03s} html.with-intro .hero .lead{animation-delay:3.25s} html.with-intro .hero .hero-actions{animation-delay:3.39s} html.with-intro .hero .cta-note{animation-delay:3.51s} html.with-intro .hv-stage{animation-delay:3.2s} html.with-intro .live-panel{animation-delay:3s,3.8s} /* ---------- 30. UX-POLISH: Fokus, Textumbruch, FAQ-Animation ---------- */ a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--acc);outline-offset:3px;border-radius:6px} h1,h2,h3{text-wrap:balance} .chap-lead,.lead,.ans{text-wrap:pretty} @supports (interpolate-size: allow-keywords){ :root{interpolate-size:allow-keywords} .qa::details-content{height:0;overflow:clip;transition:height .4s var(--ease),content-visibility .4s allow-discrete} .qa[open]::details-content{height:auto} } /* ---------- 31. RESPONSIVE ---------- */ @media (max-width:1080px){ .hero{min-height:auto} .hero-grid{grid-template-columns:minmax(0,1fr);gap:56px} .hero{padding-top:150px} .hero .lead{max-width:none} .hero-visual{max-width:560px;margin:0 auto;width:100%} .hv-stage{justify-content:flex-start;padding-left:12px} .live-panel{right:0} .svc-split{grid-template-columns:minmax(0,1fr);gap:44px} .svc-side{position:static;max-width:460px;margin:0 auto;width:100%} .walk-grid,.duo{grid-template-columns:minmax(0,1fr);gap:48px} .walk-stage{order:-1;display:flex;justify-content:center;min-height:620px;padding:10px 0} .walk-stage .phone-shell{position:relative} .walk-stage .screen{position:absolute} .duo-visual{order:-1} .steps{grid-template-columns:repeat(2,1fr);gap:0 28px;padding-top:0} .steps::before,.step::before{display:none} .step{border-top:1px solid var(--line);padding-top:22px;padding-bottom:18px} .quotes{grid-template-columns:1fr;gap:18px} .quote-card:nth-child(2),.quote-card:nth-child(3){margin-top:0} .foot-grid{grid-template-columns:1fr 1fr} .contact{grid-template-columns:1fr;padding:40px 32px;gap:36px} .ctp-media{max-width:280px} .mini-feats{grid-template-columns:1fr 1fr} .mini-feats li{padding-left:0!important;border-left:none!important} .mini-feats li:nth-child(even){padding-left:26px!important;border-left:1px solid var(--line)!important} .pkg{grid-template-columns:1fr;gap:48px} /* Paket-Leiste: Label über die Punkte, sobald die Zeile eng wird */ .incl-in{flex-direction:column;align-items:flex-start;gap:0;padding:14px 0 8px} .incl-list a{padding:11px 0} .chap-nr{font-size:clamp(5rem,13vw,9rem);opacity:.6} } @media (max-width:820px){ .nav-links{display:none} .menu-toggle{display:inline-flex} .nav-cta .btn-primary{display:none} .plans{grid-template-columns:1fr;max-width:460px;margin:0 auto} .plan.featured{order:-1} .compare{grid-template-columns:1fr;border:none;gap:16px;background:transparent;box-shadow:none} .compare .col{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surf)} .compare .col-feat{display:none} .compare .col-you{box-shadow:none;border-color:color-mix(in srgb,var(--acc) 45%,var(--line))} .compare .cell{justify-content:space-between!important;text-align:left!important} .compare .cell::before{content:attr(data-l);color:var(--dim);font-weight:500;font-size:.84rem} } @media (max-width:680px){ body{font-size:16px} .wrap{padding:0 20px} .sec{padding:92px 0 0} .hero{padding-top:128px} .hero-over{font-size:.7rem;letter-spacing:.16em} .hero h1{font-size:clamp(2.5rem,11.5vw,3.4rem)} .hero-actions{flex-direction:column;align-items:stretch} .hero-actions .btn{width:100%} .hv-stage{padding-bottom:120px} /* Zentrierung ohne transform — die heroIn-Animation (fill:both) würde ein transform-basiertes Centering nach ihrem Ende überschreiben */ .live-panel{left:calc(50% - min(150px,46vw));right:auto;width:min(300px,92vw);bottom:0} /* Phone-Tilt auf kleinen Screens dezenter (Ruhelage-Vars des 3D-Systems) */ .hv-stage .phone-shell{--ry:-5deg;--rx:2deg;--rz:-1deg} /* Paket-Leiste: zwei Spalten statt Querlauf — nichts scrollt seitlich, die Punkte bleiben vollständig lesbar. Trennpunkte entfallen, das Raster übernimmt die Gliederung. */ .incl-in{display:block;padding:14px 0 6px} .incl-lb{display:block;margin-bottom:2px} .incl-list{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} .incl-list li+li::before{display:none} .incl-list a{padding:12px 0;font-size:.85rem;gap:8px} .incl-list svg{width:15px;height:15px} .chap-head{margin-bottom:48px;padding-top:36px} .chap-nr{font-size:clamp(4rem,20vw,6.5rem);top:-6px;opacity:.5} /* Sektions-Glow bündig statt -8% überstehend — der Überhang zwang Mobile- Browser sonst zum Herauszoomen (Layout-Viewport > Gerätebreite) */ .chap::before{inset-inline-end:0} .chap:nth-of-type(even)::before{inset-inline-end:auto;inset-inline-start:0} .pkg-core{padding:32px 26px} .pkg-core .btn{width:100%;justify-content:center} .ml-row{grid-template-columns:44px 1fr;padding:26px 2px} .ml-mark{display:none} .ml-body h3{font-size:1.15rem} .steps{grid-template-columns:1fr;gap:0} .step{padding-top:22px;padding-right:0} .steps-sum{margin-top:6px} .mini-feats{grid-template-columns:1fr} .mini-feats li,.mini-feats li:nth-child(even),.mini-feats li:nth-child(3n+2),.mini-feats li:nth-child(3n){ padding:20px 0!important;border-left:none!important} .contact{padding:32px 22px} .lf-grid{grid-template-columns:1fr} .lf-actions .btn{width:100%} .faq-more{flex-direction:column;text-align:center} .faq-more .btn{width:100%;justify-content:center} .qa .ans{padding-right:10px} .qa[open] summary{padding-left:10px} .foot-grid{grid-template-columns:1fr} .statement{padding:120px 0 100px} .duo .google-card{flex-wrap:wrap} .dash-hero{grid-template-columns:1fr} .dh-side{border-inline-start:none;border-top:1px solid var(--line)} .chart{gap:7px} .walk-stage{min-height:600px} /* Live-Tischplan: 2 Spalten bleiben, aber kompakt — vorher sprengte die Mindestbreite der Kacheln (nowrap-Statuschips) die Spalte auf 382px */ .floor-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px;gap:10px} .tbl{min-width:0;padding:12px} .tbl-status{font-size:.62rem;padding:3px 8px} .quote-card{padding:30px 24px} .mini-cta{left:12px;right:12px;transform:translateY(16px);border-radius:20px;justify-content:space-between;gap:10px;padding:9px 8px 9px 16px} .mini-cta.show{transform:translateY(0)} .mc-text{flex-direction:column;gap:0} .plans-trust{gap:10px 22px} } @media (max-width:480px){ .tbl .seats{display:none} /* Platz-Icons weichen dem Statuschip — sonst überläuft die Kachel */ } @media (max-width:380px){ .phone-shell{width:270px;height:548px} .rate-stars{gap:5px} .rate-stars button{width:42px;height:42px} .rate-stars svg{width:30px;height:30px} .mc-text .mc-sub{display:none} } /* ---------- 32. REDUCED MOTION ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important} body::after{animation:none!important} .reveal,.compare.reveal .col>*{opacity:1;transform:none;filter:none} /* Paket-Leiste: Einlauf und Glut-Welle entfallen, die Zeile steht fertig da */ .incl.reveal .incl-lb,.incl.reveal .incl-list li{opacity:1;transform:none} .chap-head.reveal h2{clip-path:none} .chap-nr,.chap::before,.statement::before{animation:none!important;transform:none;opacity:1} .screen{opacity:1;position:relative;transform:none} .screen:not(.active){display:none} .gc-stars svg{opacity:1;transform:none} .st-zero{animation:none!important;transform:none;opacity:1} .foot-giant{background-position:0% 0} .live-panel,.hv-stage,.hero h1,.hero .lead,.hero-actions,.cta-note,.hero-over,.hero-bg{animation:none!important;opacity:1;filter:none} .hv-stage .phone-shell{transform:none} .mini-cta{transition:none} /* SVC-Demos: Endzustände direkt zeigen */ .svc-demo{filter:none} .svc-demo.active{opacity:1;transform:none;visibility:visible} .ed-toast,.rv-confirm,.gv-plus,.gv-review,.hs-b{opacity:1} .gv-stars i{color:var(--star)} .hs-bar i{width:99.9%} .ed-sw{background:var(--good)} .ed-sw::after{transform:translateX(17px)} .ml-prog{display:none} } /* ---------- 33. RTL-BASICS ---------- */ [dir="rtl"] .ho-rule{order:2} [dir="rtl"] .ho-rule::before{left:auto;right:0} [dir="rtl"] .ml-mark::after{content:"←"} [dir="rtl"] .mobile-menu a:not(.btn)::after{content:"←"} [dir="rtl"] .ml-row:hover{padding-left:0;padding-right:20px} [dir="rtl"] .walk-step.active{padding-left:8px;padding-right:18px} [dir="rtl"] .qa[open] summary{padding-left:10px;padding-right:18px} /* ---------- 34. SCROLL-STORY: gescrubbte Effekte unterhalb des Heros ---------- Wort-Scrub kommt aus script.js (§19); der Rest sind CSS-Scroll-Timelines. Alles progressiv: ohne animation-timeline-Support bleibt der heutige Zustand, und §32 (Reduced Motion) neutralisiert sämtliche Animationen global. */ /* Wort-Scrub: ungelesene Wörter warten als Glut-Schatten, --p (Scrollfortschritt) füllt sie Wort für Wort. Ohne JS gilt --p:999 → alles voll sichtbar. */ .sw-host .sw{opacity:clamp(.16,calc(var(--p,999) - var(--i,0)),1);transition:opacity .15s linear} @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ /* Tiefen-Parallax: Visuals treiben langsamer als der Text. `translate` statt `transform`, damit Reveal- und Hover-Transforms unberührt bleiben. */ @media (min-width:1081px){ .duo-visual>:first-child,.builder-stage .browser{ animation:duoDrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%} .quote-card:nth-child(1){animation:qDrift1 linear both;animation-timeline:view();animation-range:entry 0% exit 100%} .quote-card:nth-child(2){animation:qDrift2 linear both;animation-timeline:view();animation-range:entry 0% exit 100%} .quote-card:nth-child(3){animation:qDrift3 linear both;animation-timeline:view();animation-range:entry 0% exit 100%} } /* Vergleich als Showdown: Ladenpilot-Spalte glüht von innen auf, die Portal-Spalte verliert beim Durchscrollen Farbe und Präsenz. */ @media (min-width:821px){ .compare .col-you{animation:colYou linear both;animation-timeline:view();animation-range:cover 5% cover 45%} .compare .col-them{animation:colThem linear both;animation-timeline:view();animation-range:cover 15% cover 60%} } /* Prozess: die Glut-Linie zeichnet sich mit dem Scrollen, die Stationen zünden nacheinander, sobald die Linie sie erreicht (Station 1 brennt schon). */ @media (min-width:1081px){ .steps::after{content:"";position:absolute;top:-.5px;left:0;right:0;height:2px;border-radius:99px; background:linear-gradient(90deg,var(--amber),var(--acc)); box-shadow:0 0 14px rgba(255,90,31,.5); transform-origin:left center; animation:stepsLine linear both;animation-timeline:view();animation-range:cover 10% cover 50%} [dir="rtl"] .steps::after{transform-origin:right center} .step:not(:first-child) .st-nr{animation:stnrLit linear both;animation-timeline:view()} .step:not(:first-child)::before{animation:stDotLit linear both;animation-timeline:view()} .step:nth-child(2) .st-nr,.step:nth-child(2)::before{animation-range:cover 19% cover 27%} .step:nth-child(3) .st-nr,.step:nth-child(3)::before{animation-range:cover 33% cover 41%} .step:nth-child(4) .st-nr,.step:nth-child(4)::before{animation-range:cover 46% cover 54%} } /* Kontakt: das Portrait entblendet sich editorial (Clip + Entsättigung). */ .ctp-media img{animation:unmask linear both;animation-timeline:view();animation-range:entry 5% cover 45%} } } @keyframes duoDrift{from{translate:0 44px}to{translate:0 -34px}} @keyframes qDrift1{from{translate:0 22px}to{translate:0 -14px}} @keyframes qDrift2{from{translate:0 48px}to{translate:0 -30px}} @keyframes qDrift3{from{translate:0 76px}to{translate:0 -46px}} @keyframes colYou{ from{background:color-mix(in srgb,var(--acc) 0%,transparent); box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line)} to{background:color-mix(in srgb,var(--acc) 9%,transparent); box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line),inset 0 0 64px -22px rgba(255,90,31,.35)}} @keyframes colThem{from{opacity:1;filter:saturate(1)}to{opacity:.62;filter:saturate(.5)}} @keyframes stepsLine{from{scale:0 1}to{scale:1 1}} @keyframes stnrLit{ from{color:var(--dim);text-shadow:none} to{color:var(--acc);text-shadow:0 0 24px rgba(255,90,31,.5)}} @keyframes stDotLit{ from{background:var(--line2);box-shadow:none} to{background:var(--acc);box-shadow:0 0 12px rgba(255,90,31,.6)}} @keyframes unmask{ from{clip-path:inset(9% 7% 9% 7% round var(--r));scale:1.08;filter:saturate(.55) contrast(1.03)} to{clip-path:inset(0 round var(--r));scale:1;filter:saturate(.92) contrast(1.03)}} /* ---------- 35. KAPITEL-RAIL: Sektionsanzeige rechts (Scrollspy: script.js §21) ---------- Nummern kommen aus data-nr via content — keine Textknoten, i18n bleibt unberührt. */ #secRail{position:fixed;top:50%;inset-inline-end:30px;translate:0 -50%;z-index:96; display:none;flex-direction:column;gap:5px} #secRail a{display:flex;align-items:center;justify-content:flex-end;gap:11px; padding:4px 2px;border-radius:8px} #secRail a::before{content:attr(data-nr); font-family:var(--f-sans);font-weight:700;font-size:.68rem;letter-spacing:.14em; color:var(--dim);opacity:.6;font-variant-numeric:tabular-nums; transition:color .3s var(--ease),opacity .3s var(--ease)} #secRail a::after{content:"";width:8px;height:8px;flex-shrink:0;border-radius:50%; border:1px solid color-mix(in srgb,var(--dim) 70%,transparent); transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),scale .35s var(--spring)} #secRail a:hover::before{color:var(--ink);opacity:1} #secRail a:hover::after{border-color:var(--mut)} #secRail a.active::before{color:var(--acc);opacity:1} #secRail a.active::after{background:var(--acc);border-color:var(--acc);scale:1.5; box-shadow:0 0 14px rgba(255,90,31,.65),0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)} #secRail a:focus-visible{outline:2px solid var(--acc);outline-offset:2px} /* nur Desktop mit Platz neben dem Inhalt + genug Höhe, nie auf Touch */ @media (pointer:fine) and (min-width:1400px) and (min-height:700px){ #secRail{display:flex} } [dir="rtl"] #secRail a{justify-content:flex-start;flex-direction:row-reverse} /* Preise: umlaufender Glut-Beam am „Beliebt"-Paket (Ring via Mask, nur der Rand leuchtet) */ @property --beam-ang{syntax:"";inherits:false;initial-value:0deg} .plan-beam{position:absolute;inset:-1px;border-radius:calc(var(--r-lg) + 1px);padding:1.5px;pointer-events:none; background:conic-gradient(from var(--beam-ang),transparent 0turn,transparent .72turn,var(--amber) .86turn,var(--acc) .93turn,transparent 1turn); -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,linear-gradient(#000 0 0); mask-composite:exclude; opacity:.9;animation:beamSpin 6.5s linear infinite} @keyframes beamSpin{to{--beam-ang:1turn}} @media (prefers-reduced-motion:reduce){.plan-beam{display:none}}