.hero,.sticky{min-width:0}
:root{--p:#ffffff;--c:#fff9f5;--a:#e85232;--l:#e6dcd5}
html,body{overflow-x:clip}
.wrap.nav{position:sticky;top:0;z-index:50;width:100%;max-width:none;padding:0 clamp(24px,4vw,72px);background:var(--p);border-bottom:1px solid var(--l);box-shadow:0 4px 14px #221d1a0d;transition:width .32s ease,height .32s ease,top .32s ease,padding .32s ease,border-radius .32s ease,box-shadow .32s ease}
.wrap.nav.is-scrolled{top:12px;width:calc(100% - clamp(24px,4vw,80px));height:70px;margin-inline:auto;padding:0 clamp(18px,3vw,42px);border:1.5px solid #2a211e;border-radius:999px;background:#fffffffa;box-shadow:0 12px 30px #221d1a1c;backdrop-filter:blur(14px)}
.brand-image{border-radius:999px}
.brand-image:hover{background-color:#f1e7df}
.brand-image:focus-visible{outline:2px solid var(--w);outline-offset:3px}
.nav-links{gap:16px}
.nav-links a{padding:8px 14px;border-radius:999px;transition:background-color .2s ease,color .2s ease,transform .2s ease}
.nav-links a:hover{background:#f1e7df;color:var(--w);transform:translateY(-1px)}
.nav-links a:focus-visible{outline:2px solid var(--w);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.wrap.nav{transition:none}}
section[id]{scroll-margin-top:100px}
.hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(30px,4vw,78px);min-height:calc(88vh - 82px);padding:clamp(24px,3vw,52px);text-align:left}
.hero .copy{position:relative;top:0;width:auto;max-width:720px;text-align:left;padding:0;align-self:center}
.hero h1{font-size:clamp(3.6rem,5.1vw,6rem);white-space:nowrap;line-height:1.08;margin:20px 0 24px}
.hero h1 .cake-underline{position:relative;display:inline-block}
.hero h1 .cake-underline::after{content:"";position:absolute;left:.03em;right:.02em;bottom:-.045em;height:.085em;background:#e85232;border-radius:65% 30% 55% 25%;transform:rotate(-1.7deg);pointer-events:none}
.hero .hero-tagline{margin:0 0 30px;max-width:none;color:#514640;text-shadow:0 0 16px #e8523238,0 0 34px #e852321c}
.hero .actions{justify-content:center;flex-wrap:wrap;gap:16px;margin:clamp(42px,5vw,68px) 0 0}
.hero .hero-primary,.hero .hero-examples{display:inline-flex;flex:1 1 0;align-items:center;justify-content:center;min-width:0;min-height:80px;padding:21px 18px;font-size:1.25rem;text-align:center;white-space:nowrap}
.hero .hero-examples{background:#203653;color:#fff}
.hero .hero-description{margin:0 0 20px;max-width:650px}
.hero-visual-wrap{position:relative;top:0;min-width:0}
.hero-visual{min-width:0;height:min(61vh,640px);min-height:430px;overflow:hidden;border-radius:24px;background:#fff8f1;box-shadow:0 24px 58px #221d1a20}
.hero-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
.hero-image-note{margin:15px 0 0;text-align:center;color:#6f625b;font-size:.85rem;font-weight:600;letter-spacing:.01em}
.hero-image-note span{display:block}
.hero-image-note span:last-child{white-space:nowrap}
@media(max-width:560px){.hero-image-note span:last-child{white-space:normal}}
.chat-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,48px);align-items:start}
.chat-preview{min-width:0}
.chat-preview__label{display:block;margin:0 0 18px;text-align:center;font-size:clamp(1.25rem,2vw,1.65rem);font-weight:800;letter-spacing:-.025em;color:#514640}
.chat-preview--cake .chat-preview__label{color:#d7472b}
.chat-window{display:flex;flex-direction:column;width:100%;max-width:560px;min-height:355px;margin-inline:auto;overflow:hidden;border:1px solid #dfe0e4;border-radius:26px;background:#fff;box-shadow:0 18px 48px #25201c12;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.chat-preview--cake .chat-window{box-shadow:0 22px 55px #e8523215}
.chat-window__top{position:relative;display:flex;align-items:center;justify-content:center;min-height:82px;padding:10px 54px;border-bottom:1px solid #e7e7eb;background:#f9f9fb}
.chat-window__back{position:absolute;left:21px;top:26px;color:#087cff;font-size:2.45rem;font-weight:300;line-height:1}
.chat-window__contact{display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1.1}
.chat-window__avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#9aa0aa;color:#fff;font-size:.76rem;font-weight:700}
.chat-window__contact strong{font-size:.78rem;font-weight:600;color:#26272b}
.chat-window__body{display:flex;flex:1;flex-direction:column;gap:12px;padding:15px 22px 20px;background:#fff}
.chat-window__time{margin:0 0 12px;text-align:center;color:#92939a;font-size:.78rem;font-weight:600}
.chat-bubble{max-width:84%;margin:0;padding:11px 16px;border-radius:19px;font-size:1.02rem;line-height:1.4}
.chat-bubble--sent{align-self:flex-end;border-bottom-right-radius:6px;background:#087cff;color:#fff}
.chat-bubble--received{align-self:flex-start;border-bottom-left-radius:6px;background:#e9e9eb;color:#17171a}
.chat-outcome{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:78px;margin:0;padding:12px 20px;text-align:center;border-top:1px solid #ededf0;background:#f9f9fb}
.chat-outcome strong{font-size:clamp(1.4rem,2.3vw,1.9rem);font-weight:800;line-height:1.2;letter-spacing:-.035em}
.chat-outcome span{margin-top:3px;font-size:.9rem;font-weight:600}
.chat-outcome--silent strong{color:#4c505a}
.chat-outcome--silent span{color:#7b7e86}
.chat-outcome--success strong{color:#e85232}
@media(max-width:700px){.chat-comparison{grid-template-columns:1fr;gap:32px}.chat-window{min-height:350px}.chat-window__body{min-height:190px}}
.visual-steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(66px,5vw,110px);list-style:none;margin:clamp(52px,6vw,88px) 0 0;padding:36px 18px 0;border-top:1px solid var(--l)}
.visual-steps li{position:relative;min-width:0;display:flex;align-items:baseline;gap:13px;color:var(--i)}
.step-num{flex:none;color:var(--a);font-size:1.65rem;font-weight:800;letter-spacing:-.04em}
.step-label{font-size:1.12rem;font-weight:700;line-height:1.35}
.visual-steps li:not(:last-child)::after{content:"→";position:absolute;right:-54px;top:1px;color:var(--m);font-size:1.7rem;font-weight:400}
@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr);gap:36px;padding:46px 28px 74px;min-height:auto}.hero .copy{min-width:0;width:100%;max-width:760px}.hero-visual{height:min(75vw,650px);min-height:440px}.sticky{grid-template-columns:minmax(0,1fr)}.sticky .copy{min-width:0;max-width:100%}.wrap.nav{padding:0 28px}}
@media(max-width:560px){.hero{padding:42px 18px 64px;gap:28px}.hero h1{font-size:clamp(2.5rem,10vw,3.2rem)}.hero .actions{gap:12px;margin-top:42px}.hero .hero-primary,.hero .hero-examples{flex-basis:100%;width:100%;min-height:72px;font-size:1.18rem}.hero-visual{height:88vw;min-height:310px;border-radius:18px}.hero .hero-description{font-size:1.08rem}.visual-steps{display:flex;flex-direction:column;gap:17px;margin-top:40px;padding:22px 0 0 18px;border-top:0;border-left:1px solid var(--l)}.visual-steps li:not(:last-child)::after{content:none}.wrap.nav{padding:0 16px}.wrap.nav.is-scrolled{top:8px;width:calc(100% - 16px);height:62px;padding:0 12px}}
#preise .prices{grid-template-columns:minmax(0,520px)}
#preise .price strong{font-size:clamp(2.2rem,4vw,3.5rem)}

/* Keep the conversation comparison close to the hero. */
#warum { padding-top: clamp(10px, 2vw, 28px); }
body:not(.prototype-layout) #warum { padding-bottom: clamp(34px, 5vw, 72px); }
#warum .head { max-width: 1080px; margin: clamp(24px, 3vw, 38px) auto 0; text-align: center; }
#warum .head h2 { margin: 0; }
#warum .visual-steps { margin-top: clamp(30px, 4vw, 58px); }
@media (max-width: 560px) {
  #warum .head { margin-top: 28px; }
  #warum .visual-steps { margin-top: 28px; }
}