@charset "UTF-8";
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ease: cubic-bezier(0.23,1,0.32,1);
  --bg: #f7f3ec; --bg2: #efe6d4; --surf: #fffdf8; --brd: #ded0ba;
  --wine: #5c1a22; --wine-lt: #7a2530;
  --wine-a1: rgba(92,26,34,.06); --wine-a2: rgba(92,26,34,.15); --wine-a3: rgba(92,26,34,.3); --wine-a4: rgba(92,26,34,.5);
  --ink: #221b18; --body: #4a3f30; --dim: #6b5d4c; --dim-lt: #776a57;
  --wine-deep: #40141b; --sand-lt: #e6d3b6; --on-dark: #f7f3ec; --on-dark-mute: rgba(247,243,236,.74); --line-dark: rgba(247,243,236,.16);
  --ok: #3f7d55; --err: #a8342a;
  --t-xs:12px; --t-sm:14px; --t-md:16px; --t-lg:20px; --t-xl:28px;
  --t-2xl:clamp(32px,5vw,56px); --t-hero:clamp(40px,5.4vw,76px);
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:32px; --s-6:48px; --s-7:64px; --s-8:96px;
  --r-sm:7px; --r-md:10px; --r-lg:16px;
}
html { scroll-behavior: smooth; overflow-x: clip; }
section[id] { scroll-margin-top: 80px; }
body { background: var(--bg); color: var(--ink); font-family: 'Manrope', system-ui, sans-serif; line-height: 1.6; overflow-x: clip; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--brd); border-radius: 3px; }
::selection { background: var(--wine-a3); color: var(--ink); }
a { color: inherit; }
:focus-visible { outline:2px solid var(--wine); outline-offset:3px; border-radius:3px; }
img { max-width:100%; display:block; }
.wrap { max-width:1100px; margin:0 auto; padding-left:var(--s-5); padding-right:var(--s-5); }

/* ─── REVEAL ─── */
.r { opacity:1; transform:none; transition:opacity .65s var(--ease),transform .65s var(--ease),filter .65s var(--ease); }
.js .r[data-h] { opacity:0; transform:translateY(20px); filter:blur(6px); }
@media(prefers-reduced-motion:reduce) { .r,.js .r[data-h] { opacity:1; transform:none; filter:none!important; transition:none; } }

/* ─── SCROLL PROGRESS ─── */
#prog { position:fixed; top:0; left:0; height:2px; background:var(--wine); z-index:9999; width:0%; transition:width .1s linear; pointer-events:none; }

/* ─── NAV ─── */
.site-nav { position:sticky; top:0; z-index:800; display:flex; align-items:center; gap:var(--s-4); height:60px; padding:0 var(--s-5); background:rgba(247,243,236,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--brd); transition:background .3s; }
.site-nav.scrolled { background:rgba(247,243,236,.97); }
.logo { font-family:'Bricolage Grotesque',sans-serif; font-size:20px; font-weight:800; color:var(--ink); letter-spacing:-.04em; text-decoration:none; white-space:nowrap; }
.logo em { font-style:italic; color:var(--wine); }
.nav-quick { display:flex; align-items:center; gap:22px; font-size:13px; font-weight:600; margin-left:var(--s-5); }
.nav-quick a { text-decoration:none; color:var(--body); transition:color .2s; }
.nav-quick a:hover { color:var(--wine-lt); }
.nav-drop { position:relative; }
.nav-drop-btn { display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--body); font:inherit; font-weight:600; cursor:pointer; padding:0; transition:color .2s; }
.nav-drop-btn:hover { color:var(--wine-lt); }
.nav-drop-ic { transition:transform .2s var(--ease); }
.nav-drop.is-open .nav-drop-ic { transform:rotate(180deg); }
.nav-drop-menu { position:absolute; top:calc(100% + 14px); left:0; min-width:220px; background:var(--surf); border:1px solid var(--brd); border-radius:var(--r-md); padding:6px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s; }
.nav-drop.is-open .nav-drop-menu { opacity:1; visibility:visible; transform:none; transition:opacity .2s var(--ease),transform .2s var(--ease); }
.nav-drop-menu-inner a { display:block; padding:10px 12px; border-radius:7px; font-size:var(--t-sm); font-weight:600; color:var(--body); text-decoration:none; transition:background .15s,color .15s; }
.nav-drop-menu-inner a:hover { background:var(--bg2); color:var(--ink); }
.nav-drop-menu-inner a.current { color:var(--wine); font-weight:700; }
.menu-trigger { display:none; align-items:center; gap:10px; background:var(--surf); border:1.5px solid var(--brd); border-radius:9px; padding:10px 20px 10px 14px; cursor:pointer; color:var(--ink); font-family:'Manrope',sans-serif; font-size:14px; font-weight:700; transition:border-color .2s,background .2s,transform .15s var(--ease); margin-left:auto; }
.menu-trigger:hover { border-color:var(--wine-lt); background:var(--bg2); transform:translateY(-1px); }
.menu-trigger-bars { display:flex; flex-direction:column; gap:4px; width:16px; }
.menu-trigger-bars span { display:block; width:100%; height:2px; border-radius:1px; background:var(--wine-lt); transition:.3s; }
.menu-trigger.open .menu-trigger-bars span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.menu-trigger.open .menu-trigger-bars span:nth-child(2) { opacity:0; }
.menu-trigger.open .menu-trigger-bars span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.nav-cta { background:var(--wine); color:#fff; border:none; border-radius:7px; padding:9px 20px; font-size:var(--t-xs); font-weight:700; cursor:pointer; text-decoration:none; display:inline-block; transition:background .2s,transform .15s var(--ease); font-family:'Manrope',sans-serif; margin-left:auto; white-space:nowrap; }
.nav-cta:hover { background:var(--wine-lt); }
.nav-cta:active { transform:scale(.96); }
@media(max-width:860px){ .nav-quick{display:none} .menu-trigger{display:flex} .nav-cta{display:none} }

.nav-overlay { position:fixed; inset:0; z-index:700; background:var(--bg); display:flex; flex-direction:column; justify-content:center; padding:100px var(--s-5) var(--s-6); opacity:0; visibility:hidden; transition:opacity .4s var(--ease),visibility 0s .4s; }
.nav-overlay.open { opacity:1; visibility:visible; transition:opacity .4s var(--ease),visibility 0s; }
.nav-overlay-inner { display:flex; flex-direction:column; gap:2px; max-width:640px; margin:0 auto; width:100%; }
.nav-overlay-link { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(26px,7vw,48px); font-weight:800; letter-spacing:-.02em; color:var(--ink); text-decoration:none; padding:14px 0; border-bottom:1px solid var(--brd); opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s; }
.nav-overlay-link:hover { color:var(--wine-lt); }
.nav-overlay.open .nav-overlay-link { opacity:1; transform:none; }
.nav-overlay-link:nth-child(1){transition-delay:.06s}.nav-overlay-link:nth-child(2){transition-delay:.11s}.nav-overlay-link:nth-child(3){transition-delay:.16s}.nav-overlay-link:nth-child(4){transition-delay:.21s}.nav-overlay-link:nth-child(5){transition-delay:.26s}
.nav-overlay-foot { text-align:center; margin-top:var(--s-5); font-size:var(--t-sm); }
.nav-overlay-foot a { color:var(--dim); text-decoration:none; }
.nav-overlay-foot a:hover { color:var(--wine-lt); }
body.nav-open { overflow:hidden; }

/* ─── BREADCRUMB ─── */
.crumb { display:flex; align-items:center; gap:8px; font-size:var(--t-xs); color:var(--dim); padding:var(--s-4) var(--s-5) 0; max-width:1100px; margin:0 auto; }
.crumb a { color:var(--dim); text-decoration:none; }
.crumb a:hover { color:var(--wine-lt); }
.crumb span[aria-current] { color:var(--body); }

/* ─── HERO ─── */
#hero { max-width:840px; margin:0 auto; padding:var(--s-6) var(--s-5) var(--s-7); text-align:center; }
.hero-eyebrow { font-size:var(--t-xs); font-weight:700; color:var(--wine); letter-spacing:.16em; text-transform:uppercase; margin-bottom:var(--s-4); display:inline-flex; align-items:center; gap:12px; justify-content:center; }
.hero-eyebrow::before, .hero-eyebrow::after { content:''; width:24px; height:1.5px; background:var(--wine); flex-shrink:0; }
.hero-eyebrow-dot { display:none; }
#hero h1 { font-family:'Bricolage Grotesque',sans-serif; font-size:var(--t-hero); font-weight:800; letter-spacing:-.04em; line-height:1; text-wrap:balance; margin-bottom:var(--s-4); }
.hero-sub { font-size:var(--t-lg); color:var(--body); max-width:600px; margin:0 auto var(--s-5); text-wrap:balance; }
.hero-btns { display:flex; gap:var(--s-3); justify-content:center; flex-wrap:wrap; margin-bottom:var(--s-5); }
.btn-fill { display:inline-flex; align-items:center; gap:10px; background:var(--wine); color:#fff; border:none; border-radius:8px; padding:16px 30px; font-size:var(--t-sm); font-weight:700; cursor:pointer; text-decoration:none; transition:background .18s,box-shadow .2s,transform .1s; font-family:'Manrope',sans-serif; }
.btn-fill:hover { background:var(--wine-lt); box-shadow:0 8px 20px var(--wine-a3); transform:translateY(-1px); }
.btn-fill:active { transform:scale(.97); }
.btn-ghost { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--ink); border:1.5px solid rgba(34,27,24,.22); border-radius:8px; padding:15px 26px; font-size:var(--t-sm); font-weight:700; cursor:pointer; text-decoration:none; transition:border-color .2s,color .2s,transform .1s; font-family:'Manrope',sans-serif; }
.btn-ghost:hover { border-color:var(--wine); color:var(--wine); transform:translateY(-1px); }
.btn-ghost:active { transform:scale(.97); }
.hero-trust-row { display:flex; gap:var(--s-4); justify-content:center; flex-wrap:wrap; padding-top:var(--s-4); border-top:1px solid var(--brd); max-width:620px; margin:0 auto; }
.trust-pill { font-size:var(--t-xs); color:var(--body); display:flex; align-items:center; gap:6px; }
.trust-pill::before { content:'✓'; color:var(--wine); font-weight:700; }

/* ─── SECTION HEAD ─── */
.sec-head { max-width:620px; margin:0 auto var(--s-6); text-align:center; }
.sec-head h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:var(--t-2xl); font-weight:800; letter-spacing:-.03em; line-height:1.1; text-wrap:balance; margin-bottom:var(--s-3); }
.sec-head h2 em { font-style:italic; color:var(--wine); }
.sec-head p { font-size:var(--t-md); color:var(--body); text-wrap:balance; }

/* ─── REALITY / STATEMENT ─── */
#reality { padding:var(--s-8) var(--s-5); background:var(--wine-deep); color:var(--on-dark); }
.reality-statement { max-width:760px; margin:0 auto var(--s-6); font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(24px,3.6vw,38px); font-weight:700; letter-spacing:-.02em; line-height:1.3; text-align:center; text-wrap:balance; color:var(--on-dark); }
.reality-statement p + p { margin-top:var(--s-4); font-family:'Manrope',sans-serif; font-size:var(--t-md); font-weight:500; color:var(--on-dark-mute); letter-spacing:normal; }

.quote-block { max-width:680px; margin:0 auto var(--s-7); padding-top:var(--s-6); border-top:1px solid var(--line-dark); text-align:center; }
.quote-mark { display:none; }
.quote-block blockquote { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(20px,2.6vw,28px); font-weight:600; line-height:1.4; letter-spacing:-.01em; text-wrap:balance; color:var(--on-dark); }
.quote-cite { display:block; margin-top:var(--s-4); font-size:var(--t-sm); color:var(--on-dark-mute); font-style:normal; }
.quote-cite strong { color:var(--sand-lt); font-weight:700; }


/* ─── FLOW ─── */
#flow { padding:var(--s-8) var(--s-5); background:var(--bg); }
.flow-list { max-width:760px; margin:0 auto; position:relative; }
.flow-list::before { content:''; position:absolute; left:27px; top:28px; bottom:28px; width:2px; background:var(--wine-a2); }
.flow-item { display:grid; grid-template-columns:56px 1fr; gap:var(--s-4); position:relative; padding-bottom:var(--s-6); }
.flow-item:last-child { padding-bottom:0; }
.flow-num { font-family:'Bricolage Grotesque',sans-serif; font-size:var(--t-md); font-weight:800; color:#fff; width:56px; height:56px; border-radius:50%; background:var(--wine); border:4px solid var(--bg); display:flex; align-items:center; justify-content:center; z-index:1; flex-shrink:0; }
.flow-body { padding-top:12px; }
.flow-title { font-family:'Bricolage Grotesque',sans-serif; font-size:var(--t-lg); font-weight:700; margin-bottom:8px; letter-spacing:-.01em; }
.flow-text { font-size:var(--t-sm); color:var(--body); line-height:1.7; max-width:480px; }
.always-head { max-width:760px; margin:var(--s-6) auto var(--s-5); text-align:center; }
.always-head p { font-size:var(--t-sm); color:var(--dim); }
.always-grid { max-width:760px; grid-template-columns:repeat(2,1fr); }
@media(max-width:560px){ .always-grid{ grid-template-columns:1fr; } }
@media(max-width:560px){ .flow-num{ width:44px;height:44px;font-size:var(--t-sm) } .flow-list::before{ left:21px } .flow-item{ grid-template-columns:44px 1fr; gap:var(--s-3) } }

/* ─── VORHER / NACHHER ─── */
#vergleich { padding:var(--s-8) var(--s-5); background:var(--bg2); }
.vs-grid { max-width:920px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s-4); }
@media(max-width:760px) { .vs-grid { grid-template-columns:1fr; } }
.vs-arrow { font-size:28px; color:var(--dim); font-weight:300; }
@media(max-width:760px) { .vs-arrow { transform:rotate(90deg); margin:0 auto; } }
.vs-card { border-radius:var(--r-lg); padding:var(--s-5); height:100%; }
.vs-ohne { background:var(--surf); border:1.5px dashed var(--brd); }
.vs-mit { background:var(--wine); color:var(--on-dark); box-shadow:0 16px 40px rgba(92,26,34,.2); }
.vs-label { font-family:'Bricolage Grotesque',sans-serif; font-size:var(--t-sm); font-weight:800; margin-bottom:var(--s-4); text-transform:uppercase; letter-spacing:.03em; }
.vs-ohne .vs-label { color:var(--dim); }
.vs-mit .vs-label { color:var(--sand-lt); }
.vs-list { list-style:none; display:flex; flex-direction:column; gap:14px; }
.vs-list li { font-size:var(--t-sm); line-height:1.5; padding-left:26px; position:relative; }
.vs-ohne .vs-list li { color:var(--dim); }
.vs-ohne .vs-list li::before { content:'✕'; position:absolute; left:0; top:1px; color:var(--dim); font-weight:700; }
.vs-mit .vs-list li { color:var(--on-dark); }
.vs-mit .vs-list li::before { content:'✓'; position:absolute; left:0; top:1px; color:var(--sand-lt); font-weight:700; }

/* ─── CHAT DEMO ─── */
#beispiel { padding:var(--s-8) var(--s-5); background:var(--bg2); }
.chat-panel { max-width:480px; margin:0 auto; background:var(--surf); border:1px solid var(--brd); border-radius:var(--r-lg); overflow:hidden; }
.chat-panel-hd { display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--brd); }
.chat-dot { width:8px; height:8px; border-radius:50%; background:var(--ok); flex-shrink:0; }
.chat-panel-hd-label { font-size:var(--t-sm); font-weight:700; }
.chat-panel-hd-sub { font-size:12px; color:var(--dim); }
.chat-msgs { padding:22px 20px; display:flex; flex-direction:column; gap:12px; min-height:220px; background:var(--bg); }
.chat-msg { max-width:82%; padding:11px 15px; border-radius:14px; font-size:var(--t-sm); line-height:1.5; opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease),transform .4s var(--ease); }
.chat-msg.show { opacity:1; transform:none; }
.chat-msg.bot { background:var(--wine); color:var(--on-dark); align-self:flex-start; border-bottom-left-radius:4px; }
.chat-msg.user { background:var(--surf); border:1px solid var(--brd); align-self:flex-end; border-bottom-right-radius:4px; color:var(--ink); }
.chat-panel-ft { border-top:1px solid var(--brd); padding:12px 20px; font-size:12px; color:var(--dim); text-align:center; }

/* ─── WHATSAPP-VORSCHAU ─── */
.wa-panel { max-width:480px; margin:0 auto; background:#e5ded6; border:1px solid var(--brd); border-radius:var(--r-lg); overflow:hidden; }
.wa-panel-hd { display:flex; align-items:center; gap:10px; padding:14px 18px; background:#075e54; color:#fff; }
.wa-avatar { width:34px; height:34px; border-radius:50%; background:#0b7a6c; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.wa-panel-hd-label { font-size:var(--t-sm); font-weight:700; }
.wa-panel-hd-sub { font-size:11px; color:rgba(255,255,255,.7); }
.wa-msgs { padding:18px 16px; display:flex; flex-direction:column; gap:8px; min-height:220px; }
.wa-missed { align-self:center; background:rgba(0,0,0,.06); color:#5a5650; font-size:11.5px; padding:5px 12px; border-radius:8px; margin-bottom:6px; }
.wa-bubble { position:relative; max-width:78%; padding:7px 11px 9px; border-radius:8px; font-size:var(--t-sm); line-height:1.45; box-shadow:0 1px 1px rgba(0,0,0,.08); }
.wa-bubble.in { align-self:flex-start; background:#fff; color:#1b1b1b; border-top-left-radius:2px; }
.wa-bubble.out { align-self:flex-end; background:#d9fdd3; color:#1b1b1b; border-top-right-radius:2px; }
.wa-time { display:block; text-align:right; font-size:10.5px; color:#7d8a86; margin-top:3px; }
.wa-time svg { vertical-align:-1px; margin-left:2px; }
.wa-step { opacity:0; transform:translateY(8px) scale(.97); transition:opacity .35s var(--ease),transform .35s var(--ease); }
.wa-step.show { opacity:1; transform:none; }
.wa-typing { align-self:flex-start; background:#fff; border-radius:8px; border-top-left-radius:2px; padding:11px 14px; display:flex; gap:4px; box-shadow:0 1px 1px rgba(0,0,0,.08); }
.wa-typing span { width:6px; height:6px; border-radius:50%; background:#9aa39f; animation:waTypingDot 1.1s infinite ease-in-out; }
.wa-typing span:nth-child(2) { animation-delay:.15s; }
.wa-typing span:nth-child(3) { animation-delay:.3s; }
@keyframes waTypingDot { 0%,60%,100% { transform:translateY(0); opacity:.5; } 30% { transform:translateY(-3px); opacity:1; } }

/* ─── ANGEBOTS-VORSCHAU ─── */
.angebot-panel { max-width:480px; margin:0 auto; background:var(--surf); border:1px solid var(--brd); border-radius:var(--r-lg); padding:var(--s-5); }
.angebot-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--dim); margin-bottom:var(--s-4); }
.angebot-label em { font-style:normal; color:var(--wine); }
.angebot-raw { font-size:var(--t-sm); color:var(--body); line-height:1.6; padding:14px 16px; background:var(--bg); border-radius:var(--r-md); margin-bottom:var(--s-4); }
.angebot-fields { display:flex; flex-direction:column; gap:8px; margin-bottom:var(--s-4); }
.angebot-field { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:var(--wine-a1); border-radius:var(--r-sm); font-size:var(--t-sm); font-weight:600; color:var(--ink); }
.angebot-field span { font-size:12px; font-weight:600; color:var(--dim); text-transform:uppercase; letter-spacing:.03em; }
.angebot-badge { display:inline-flex; font-size:var(--t-sm); font-weight:700; color:var(--wine); background:var(--sand-lt); padding:8px 16px; border-radius:100px; }
.ag-step { opacity:0; transform:translateY(8px); transition:opacity .35s var(--ease),transform .35s var(--ease); }
.ag-step.show { opacity:1; transform:none; }
.chat-caption { max-width:480px; margin:var(--s-4) auto 0; text-align:center; font-size:var(--t-xs); color:var(--dim); }

/* ─── NOT INCLUDED ─── */

/* ─── ROI-RECHNER ─── */
#rechner { padding:var(--s-8) var(--s-5); }
.calc-sentence { max-width:640px; margin:0 auto; text-align:center; font-family:'Bricolage Grotesque',sans-serif; font-size:var(--t-lg); line-height:1.6; color:var(--ink); }
.calc-sentence strong { color:var(--wine); display:inline-block; }
.calc-sentence strong.pop { animation:calcPop .35s var(--ease); }
@keyframes calcPop { 0% { transform:scale(1); } 40% { transform:scale(1.16); } 100% { transform:scale(1); } }
.calc-inline { display:inline-flex; align-items:center; background:var(--surf); border:1.5px solid var(--wine-a2); padding:3px 10px; margin:0 3px; border-radius:100px; transition:background .15s,border-color .15s,box-shadow .15s; }
.calc-inline:hover { border-color:var(--wine-a4); }
.calc-inline:focus-within { border-color:var(--wine); box-shadow:0 0 0 3px var(--wine-a1); }
.calc-inline input { width:2.6em; box-sizing:content-box; border:none; background:transparent; font:inherit; font-weight:700; color:var(--wine); text-align:center; padding:0; -moz-appearance:textfield; }
.calc-inline input:focus { outline:none; }
.calc-inline input::-webkit-outer-spin-button,
.calc-inline input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.calc-inline.calc-euro span { font-weight:700; color:var(--wine); margin-right:1px; }
.calc-note { max-width:520px; margin:var(--s-4) auto 0; font-size:var(--t-xs); color:var(--dim); text-align:center; line-height:1.6; }

/* ─── PRICING ─── */
#preis { padding:var(--s-8) var(--s-5); background:var(--bg2); }
.price-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-4); max-width:820px; margin:0 auto; }
@media(max-width:720px) { .price-grid { grid-template-columns:1fr; max-width:460px; } }
.price-card { background:var(--surf); border:1px solid var(--brd); border-radius:var(--r-lg); padding:var(--s-5); display:flex; flex-direction:column; }
.price-card-pro { border-color:var(--wine); background:var(--wine); color:var(--on-dark); position:relative; transform:scale(1.03); box-shadow:0 16px 40px rgba(92,26,34,.22); }
.price-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--sand-lt); color:var(--wine-deep); font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:5px 14px; border-radius:100px; white-space:nowrap; }
@media(max-width:720px) { .price-card-pro { transform:none; } }
.price-tier { font-size:var(--t-sm); font-weight:700; text-align:center; margin-bottom:var(--s-3); }
.price-tier em { font-style:italic; color:var(--wine); }
.price-card-pro .price-tier em { color:var(--sand-lt); }
.price-amount { font-family:'Bricolage Grotesque',sans-serif; font-size:52px; font-weight:800; letter-spacing:-.04em; text-align:center; }
.price-amount sup { font-size:.4em; vertical-align:top; margin-top:.3em; color:var(--wine); }
.price-card-pro .price-amount sup { color:var(--sand-lt); }
.price-cycle { text-align:center; font-size:var(--t-sm); color:var(--dim); margin-bottom:var(--s-5); }
.price-card-pro .price-cycle { color:var(--on-dark-mute); }
.price-desc { font-size:var(--t-sm); color:var(--body); line-height:1.7; margin-bottom:var(--s-5); flex:1; }
.price-card-pro .price-desc { color:var(--on-dark-mute); }
.price-switch-link { font:inherit; font-size:var(--t-sm); font-weight:700; color:var(--wine); background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.price-switch-link:hover { color:var(--wine-lt); }
.price-cta { display:flex; justify-content:center; }
.price-alt { text-align:center; font-size:var(--t-xs); color:var(--dim); margin-top:var(--s-3); }
.price-alt a { color:inherit; text-decoration:underline; }
.price-card-pro .price-alt { color:var(--on-dark-mute); }
.price-card-pro .price-alt a { color:var(--on-dark); }
.btn-outline { display:inline-flex; align-items:center; gap:10px; background:transparent; color:var(--ink); border:1.5px solid rgba(34,27,24,.22); border-radius:8px; padding:15px 29px; font-size:var(--t-sm); font-weight:700; cursor:pointer; text-decoration:none; transition:border-color .18s,color .18s; font-family:'Manrope',sans-serif; }
.btn-outline:hover { border-color:var(--wine); color:var(--wine); }
.price-card-pro .btn-fill { background:var(--bg); color:var(--wine); }
.price-card-pro .btn-fill:hover { background:var(--bg2); box-shadow:none; }
.price-note { font-size:var(--t-xs); color:var(--dim); text-align:center; line-height:1.6; margin-top:var(--s-5); }

/* ─── DEMO TABS ─── */
.demo-tabs { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; max-width:520px; margin:0 auto var(--s-4); }
.demo-tab { background:var(--surf); border:1px solid var(--brd); color:var(--body); border-radius:100px; padding:9px 18px; font-size:var(--t-sm); font-weight:600; cursor:pointer; font-family:'Manrope',sans-serif; transition:border-color .18s,color .18s,background .18s; }
.demo-tab:hover { color:var(--ink); border-color:var(--wine-a4); }
.demo-tab.active { background:var(--wine); border-color:var(--wine); color:#fff; }
.demo-panel-wrap { max-width:480px; margin:0 auto; position:relative; z-index:1; }
.demo-panel-wrap::before { content:''; position:absolute; inset:-70px -140px; z-index:-1; background:radial-gradient(ellipse at center, var(--wine-a3) 0%, transparent 68%); pointer-events:none; }
@media(max-width:600px) { .demo-panel-wrap::before { inset:-30px -20px; } }
.demo-panel { display:none; }
.demo-panel.active { display:block; }
.demo-mail-intro { font-size:var(--t-sm); color:var(--body); text-align:center; margin-bottom:var(--s-4); line-height:1.6; }
.demo-mail-form { display:flex; gap:8px; }
.demo-mail-input { flex:1; background:var(--surf); border:1px solid var(--brd); border-radius:20px; padding:12px 18px; font-size:var(--t-sm); color:var(--ink); font-family:'Manrope',sans-serif; }
.demo-mail-input:focus-visible { outline:2px solid var(--wine); outline-offset:1px; }
.demo-mail-input::placeholder { color:var(--dim); }
.demo-mail-btn { width:44px; height:44px; font-size:18px; }
.demo-mail-result { margin-top:var(--s-4); padding:16px 18px; background:var(--surf); border:1px solid var(--brd); border-radius:var(--r-md); font-size:13px; color:var(--body); white-space:pre-line; line-height:1.6; }
.demo-mail-result.err { color:var(--err); border-color:rgba(168,52,42,.4); }
.demo-mail-status { font-size:var(--t-xs); color:var(--dim); text-align:center; margin-top:10px; min-height:1.2em; }

/* ─── LIVE CHAT DEMO ─── */
.chat-input-row { display:flex; gap:8px; padding:0 20px 16px; }
.chat-input-row { padding-top:16px; }
.chat-input { flex:1; background:var(--bg); border:1px solid var(--brd); border-radius:20px; padding:10px 16px; font-size:var(--t-sm); color:var(--ink); font-family:'Manrope',sans-serif; }
.chat-input:focus-visible { outline:2px solid var(--wine); outline-offset:1px; }
.chat-input::placeholder { color:var(--dim); }
.chat-input:disabled { opacity:.6; }
.chat-send { background:var(--wine); color:#fff; border:none; border-radius:50%; width:38px; height:38px; flex-shrink:0; font-size:16px; cursor:pointer; transition:background .18s; }
.chat-send:hover { background:var(--wine-lt); }
.chat-send:disabled { opacity:.5; cursor:default; }
.chat-msg.chat-typing { color:var(--on-dark-mute); font-style:italic; }

/* ─── FAQ ─── */
#faq { padding:var(--s-8) var(--s-5); background:var(--bg); }
.faq-list { max-width:680px; margin:0 auto; border-top:1px solid var(--brd); }
.faq-item { border-bottom:1px solid var(--brd); }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); background:none; border:none; padding:20px 0; text-align:left; font-family:'Manrope',sans-serif; font-size:var(--t-md); font-weight:700; color:var(--ink); cursor:pointer; transition:color .2s; }
.faq-q:hover { color:var(--wine); }
.faq-ic { flex-shrink:0; width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:var(--wine); font-size:18px; font-weight:400; transition:transform .25s var(--ease); }
.faq-item.open .faq-ic { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-a-inner { padding-bottom:20px; font-size:var(--t-sm); color:var(--body); line-height:1.7; max-width:600px; }

/* ─── FINALE ─── */
#finale { padding:var(--s-8) var(--s-5); text-align:center; background:var(--wine-deep); color:var(--on-dark); }
#finale h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(36px,5.4vw,64px); font-weight:800; letter-spacing:-.04em; line-height:1; margin-bottom:var(--s-4); text-wrap:balance; color:var(--on-dark); }
#finale h2 em { font-style:italic; color:var(--sand-lt); }
#finale > p { font-size:var(--t-md); color:var(--on-dark-mute); max-width:440px; margin:0 auto var(--s-6); }
.finale-btns { display:flex; gap:var(--s-3); justify-content:center; flex-wrap:wrap; }
#finale .btn-fill { background:var(--bg); color:var(--wine); }
#finale .btn-fill:hover { background:var(--bg2); box-shadow:none; }
#finale .btn-ghost { color:var(--on-dark); border-color:rgba(247,243,236,.4); }
#finale .btn-ghost:hover { color:var(--sand-lt); border-color:var(--sand-lt); }
#finale :focus-visible { outline-color:var(--sand-lt); }

/* ─── FOOTER ─── */
footer { background:var(--bg2); border-top:1px solid var(--brd); padding:var(--s-7) var(--s-5) var(--s-5); }
.ft-wrap { max-width:1100px; margin:0 auto; }
.ft-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s-6); margin-bottom:var(--s-6); }
.ft-logo { font-family:'Bricolage Grotesque',sans-serif; font-size:20px; font-weight:800; letter-spacing:-.04em; margin-bottom:10px; }
.ft-logo em { font-style:italic; color:var(--wine); }
.ft-brand p { font-size:var(--t-sm); color:var(--dim); max-width:280px; line-height:1.6; }
.ft-col h4 { font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--dim); margin-bottom:14px; }
.ft-col a { display:block; font-size:var(--t-sm); color:var(--body); text-decoration:none; margin-bottom:10px; transition:color .2s; }
.ft-col a:hover { color:var(--wine-lt); }
.ft-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s-3); padding-top:var(--s-5); border-top:1px solid var(--brd); }
.ft-copy { font-size:var(--t-xs); color:var(--dim); }
.ft-legal { display:flex; gap:var(--s-4); }
.ft-legal a { font-size:var(--t-xs); color:var(--dim); text-decoration:none; }
.ft-legal a:hover { color:var(--wine-lt); }
@media(max-width:700px){ .ft-grid{ grid-template-columns:1fr; gap:var(--s-5); } }

/* ─── MOBILE SECTION-ABSTAND ─── */
@media(max-width:600px) {
  #reality,#flow,#vergleich,#beispiel,#rechner,#preis,#faq,#finale { padding-top:var(--s-6); padding-bottom:var(--s-6); }
  .sec-head { margin-bottom:var(--s-5); }
}

/* ─── WHATSAPP FLOAT ─── */
.wa-float { position:fixed; bottom:22px; right:22px; width:52px; height:52px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; z-index:400; box-shadow:0 4px 12px rgba(34,27,24,.22); transition:transform .15s; }
.wa-float:hover { transform:scale(1.06); }
.wa-float svg { width:24px; height:24px; fill:#fff; }