@charset "UTF-8";
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ease: cubic-bezier(0.23,1,0.32,1);
  --bg: #0c0b0a; --bg2: #131110; --surf: #1a1715; --brd: #2e2924;
  --wine: #a68d5f; --wine-lt: #c2ab82;
  --wine-a1: rgba(166,141,95,.06); --wine-a2: rgba(166,141,95,.15); --wine-a3: rgba(166,141,95,.3); --wine-a4: rgba(166,141,95,.5);
  --wine-glow: var(--wine-a2);
  --ink: #f2efe8; --body: #a39784; --dim: #5e564a; --dim-lt: #7c7364;
  --t-xs:12px; --t-sm:14px; --t-md:16px; --t-lg:20px; --t-xl:28px;
  --t-2xl:clamp(32px,5vw,64px); --t-hero:clamp(44px,5.8vw,88px);
  --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;
  --bg-light: #f0ebe2; --ink-onlight: #2a2014; --body-onlight: #4a3f30; --dim-onlight: #6b5d4c; --brd-onlight: #ded0ba;
}
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; }

/* ─── 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 ─── */
nav { position:fixed; top:0; left:0; right:0; z-index:200; background:rgba(11,11,14,.95); border-bottom:1px solid var(--brd); height:60px; display:flex; align-items:center; padding:0 var(--s-5); justify-content:space-between; }
.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-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; will-change:transform; margin-left:auto; white-space:nowrap; }
@media(max-width:420px) { nav { padding:0 16px; } .nav-cta { padding:9px 14px; } }
.nav-cta:hover { background:var(--wine-lt); }
.nav-cta:active { transform:scale(.96); }
.menu-trigger { display:flex; 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:16px; }
.menu-trigger:hover { border-color:var(--wine-lt); background:var(--bg2); transform:translateY(-1px); }
.menu-trigger:active { transform:scale(.96); }
.menu-trigger-bars { display:flex; flex-direction:column; gap:4.5px; width:18px; flex-shrink:0; }
.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(5.5px) 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(-5.5px) rotate(-45deg); }
@media(max-width:640px) { .menu-trigger span:not(.menu-trigger-bars) { display:none; } .menu-trigger { margin-left:12px; padding:8px; } }
@media(min-width:901px) { .menu-trigger { display:none; } }
.nav-quick { display:flex; align-items:center; gap:22px; margin-left:36px; }
.nav-quick a { color:var(--body); text-decoration:none; font-size:13px; font-weight:600; transition:color .2s; }
.nav-quick a:hover { color:var(--wine-lt); }
.nav-quick a:active { color:var(--wine-lt); opacity:.7; }
@media(max-width:900px) { .nav-quick { display:none; } }

/* NAV DROPDOWN — "Leistungen" fasst die 3 Service-Links zusammen */
.nav-drop { position:relative; }
.nav-drop-btn { display:inline-flex; align-items:center; gap:5px; background:none; border:none; color:var(--body); font-family:'Manrope',sans-serif; font-size:13px; font-weight:600; cursor:pointer; padding:0; }
.nav-drop-btn:hover { color:var(--wine-lt); }
.nav-drop-btn:active { opacity:.7; }
.nav-drop-ic { transition:transform .2s var(--ease); }
.nav-drop:hover .nav-drop-ic, .nav-drop:focus-within .nav-drop-ic, .nav-drop.is-open .nav-drop-ic { transform:rotate(180deg); }
.nav-drop-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%); padding-top:14px; opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:210; }
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu, .nav-drop.is-open .nav-drop-menu { opacity:1; pointer-events:auto; }
.nav-drop-menu-inner { background:var(--surf); border:1px solid var(--brd); border-radius:10px; padding:8px; min-width:190px; display:flex; flex-direction:column; gap:2px; }
.nav-drop-menu-inner a { padding:9px 12px; border-radius:6px; font-size:13px; font-weight:600; color:var(--body); white-space:nowrap; text-decoration:none; display:block; transition:background .15s,color .15s; }
.nav-drop-menu-inner a:hover { background:var(--bg2); color:var(--ink); }
.nav-drop-menu-inner a:active { background:var(--wine-a4); }

/* ─── MAGNETIC BUTTON ─── */
.btn-magnetic { display:inline-flex; align-items:center; gap:10px; background:var(--wine); color:#fff; border:none; border-radius:8px; padding:15px 28px; font-size:var(--t-sm); font-weight:700; cursor:pointer; text-decoration:none; transition:background .18s,box-shadow .2s,transform .1s ease-out; font-family:'Manrope',sans-serif; will-change:transform; position:relative; overflow:hidden; }
.btn-magnetic::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.18),transparent); opacity:0; transition:opacity .3s; }
.btn-magnetic:hover { background:var(--wine-lt); box-shadow:0 12px 32px var(--wine-a4); }
.btn-magnetic:hover::before { opacity:1; }
.btn-magnetic:active { transform:scale(.96); }
.btn-ghost2 { display:inline-flex; align-items:center; gap:8px; background:none; color:var(--body); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:14px 28px; font-size:var(--t-sm); cursor:pointer; text-decoration:none; transition:border-color .2s,color .2s,transform .1s ease-out; font-family:'Manrope',sans-serif; }
.btn-ghost2:hover { border-color:var(--wine-a4); color:var(--ink); }
.btn-ghost2:active { transform:scale(.96); }

/* ─── ICON ARROW BUTTON ─── */
.icon-arrow-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--wine);color:#fff;flex-shrink:0;transition:background .2s var(--ease),transform .2s var(--ease);cursor:pointer}
.icon-arrow-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.icon-arrow-btn--sm{width:26px;height:26px}
.icon-arrow-btn--sm svg{width:11px;height:11px}
a:hover .icon-arrow-btn,.icon-arrow-btn:hover{background:var(--wine-lt);transform:translateX(2px)}
a:active .icon-arrow-btn,.icon-arrow-btn:active{transform:scale(.88)}
.tier-showcase-demolink{display:inline-flex;align-items:center;gap:var(--s-3);color:var(--ink);text-decoration:none;font-size:var(--t-sm);font-weight:600}

/* ─── SECTION REVEAL (blur-reveal: blur fades sharp on scroll) ─── */
.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; } }

/* ─── FOCUS ─── */
:focus-visible { outline:2px solid var(--wine); outline-offset:3px; border-radius:3px; }

/* ─── HERO ─── */
@keyframes hvPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.8); } }
.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:flex; align-items:center; gap:12px; }
.hero-eyebrow::before { content:''; width:28px; height:1.5px; background:var(--wine); flex-shrink:0; }
.hero-eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--wine-lt); flex-shrink:0; animation:hvPulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-eyebrow-dot, [style*="hvPulse"] { animation:none; } }
h1 { font-family:'Bricolage Grotesque',sans-serif; font-size:var(--t-hero); font-weight:800; line-height:.95; letter-spacing:-.04em; text-wrap:balance; margin-bottom:var(--s-4); }
h1 em { font-style:italic; color:var(--wine); }
.h1-light { display:block; font-size:clamp(32px,4.5vw,64px); font-weight:300; color:var(--body); letter-spacing:-.03em; }
.hero-sub { color:var(--body); font-size:var(--t-md); line-height:1.75; max-width:440px; margin-bottom:var(--s-5); }
.btns-row { display:flex; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-5); }
.trust-row { display:flex; gap:var(--s-4); flex-wrap:wrap; padding-top:var(--s-4); border-top:1px solid var(--brd); }
.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; }
@media(max-width:1024px) { #hero { grid-template-columns:1fr!important; padding:100px var(--s-5) var(--s-7)!important; overflow:hidden; } }
.hero-content,.hero-visual{min-width:0}

/* ─── COUNTER STRIP ─── */
.ctr-num { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(40px,5vw,64px); font-weight:800; letter-spacing:-.04em; color:var(--ink); line-height:1; }
.ctr-label { font-size:var(--t-xs); font-weight:600; color:var(--dim-lt); text-transform:uppercase; letter-spacing:.1em; margin-top:var(--s-1); }
@media(max-width:600px) { .ctr-grid { grid-template-columns:repeat(2,1fr)!important; } }

/* ─── BENTO ─── */
.sec-kicker { font-size:var(--t-xs); font-weight:700; color:var(--wine); letter-spacing:.16em; text-transform:uppercase; margin-bottom:var(--s-3); display:flex; align-items:center; gap:12px; }
.sec-kicker::before { content:''; width:20px; height:1.5px; background:var(--wine); }
.sec-h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:var(--t-2xl); font-weight:800; letter-spacing:-.04em; text-wrap:balance; margin-bottom:var(--s-7); }
.bento-card { background:var(--surf); border:1px solid var(--brd); border-radius:16px; padding:var(--s-5); position:relative; overflow:hidden; transition:border-color .3s,transform .3s var(--ease); margin-top:var(--s-6); }
.bento-card:hover { border-color:var(--wine-a4); transform:translateY(-4px); }
.bento-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%),var(--wine-a1),transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none; }
.bento-card:hover::before { opacity:1; }
.bc-icon { width:44px; height:44px; background:var(--wine-a2); border:1px solid var(--wine-a3); border-radius:10px; display:grid; place-items:center; margin-bottom:var(--s-3); flex-shrink:0; }
.svc-feature{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:center;margin-bottom:var(--s-6)}
.svc-feature--reverse .svc-feature-text{order:2}
.svc-feature--reverse .svc-feature-visual,.svc-feature--reverse .svc-feature-statement{order:1}
.svc-feature-title{font-family:'Bricolage Grotesque',sans-serif;font-size:var(--t-xl);font-weight:800;letter-spacing:-.02em;margin-bottom:var(--s-3)}
.svc-feature-desc{font-size:var(--t-md);color:var(--body);line-height:1.7;margin-bottom:var(--s-4);max-width:440px}
.svc-feature-price{font-family:'Bricolage Grotesque',sans-serif;font-size:var(--t-lg);font-weight:800;color:var(--wine)}
.svc-feature-visual{max-width:340px;width:100%}
.svc-feature-statement{background:var(--surf);border:1px solid var(--brd);border-radius:var(--r-lg);padding:var(--s-7);display:flex;align-items:center;justify-content:center;text-align:center;min-height:200px}
.svc-feature-statement span{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
@media(max-width:800px){.svc-feature{grid-template-columns:1fr;gap:var(--s-4)}.svc-feature--reverse .svc-feature-text,.svc-feature--reverse .svc-feature-visual,.svc-feature--reverse .svc-feature-statement{order:initial}}
.bc-icon svg { width:22px; height:22px; stroke:var(--wine-lt); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.bc-title { font-family:'Bricolage Grotesque',sans-serif; font-size:var(--t-lg); font-weight:700; letter-spacing:-.02em; margin-bottom:var(--s-2); }
.bc-desc { font-size:var(--t-sm); color:var(--body); line-height:1.7; }
.bc-price { position:absolute; bottom:var(--s-4); right:var(--s-4); font-family:'Bricolage Grotesque',sans-serif; font-size:var(--t-sm); font-weight:800; color:var(--wine); }
.bc-chat { background:var(--bg); border-radius:10px; overflow:hidden; border:1px solid var(--brd); }
.bcc-msg { padding:8px 12px; font-size:11px; line-height:1.5; }
.bcc-bot { background:var(--wine-a1); color:var(--body); border-bottom:1px solid var(--brd); }
.bcc-user { background:var(--wine-a3); color:var(--ink); text-align:right; }
.bcc-typing { padding:6px 12px; display:flex; gap:4px; align-items:center; background:var(--bg2); }
.bcc-typing span { width:5px; height:5px; border-radius:50%; background:var(--wine); animation:tdot 1.2s infinite; }
.bcc-typing span:nth-child(2) { animation-delay:.2s; } .bcc-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes tdot { 0%,100% { opacity:.3; transform:scale(.8); } 50% { opacity:1; transform:scale(1); } }
.bento-card.bento-facts{display:flex;gap:var(--s-6)}
.bento-fact{flex:1;display:flex;gap:var(--s-3)}
.bento-fact+.bento-fact{padding-left:var(--s-6);border-left:1px solid var(--brd)}
.bento-fact .bc-icon{margin-bottom:0}
@media(max-width:900px) { .bento { grid-template-columns:1fr 1fr; } .bento-card.wide { grid-column:span 2; } }
@media(max-width:600px) { .bento { grid-template-columns:1fr; } .bento-card.wide { grid-column:span 1; } .bento-card.bento-facts{flex-direction:column;gap:var(--s-4)} .bento-fact+.bento-fact{padding-left:0;border-left:none;padding-top:var(--s-4);border-top:1px solid var(--brd)} }


/* ─── TIER SHOWCASE (links: echte Demo animiert, rechts: Details) ─── */
.tier-showcase{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s-7);align-items:center;max-width:1200px;margin:0 auto var(--s-8);padding:0 var(--s-5)}
.tier-showcase>*{min-width:0}
.tier-showcase--reverse{grid-template-columns:1fr 1.3fr}
.tier-showcase--reverse .tier-showcase-media{order:2}
.tier-showcase--reverse .tier-showcase-info{order:1}
@media(max-width:900px){.tier-showcase--reverse .tier-showcase-media,.tier-showcase--reverse .tier-showcase-info{order:initial}}
.tier-showcase-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08);transition:transform .8s var(--ease),filter .8s var(--ease),opacity .8s var(--ease)}
.js .tier-showcase[data-h] .tier-showcase-media{transform:scale(.88);filter:blur(6px);opacity:0}
.tier-showcase-bar{background:var(--bg2);padding:11px 16px;display:flex;align-items:center;gap:5px;border-bottom:1px solid var(--brd)}
.tier-showcase-url{font-size:12px;color:var(--dim);margin-left:8px;font-family:'Manrope',sans-serif}
.tier-showcase-frame-wrap{width:100%;height:400px;overflow:hidden;background:var(--bg)}
.tier-showcase-frame{width:1280px;height:900px;transform:scale(.444);transform-origin:top left;pointer-events:none;border:none;display:block}
.tier-showcase-price{font-family:'Bricolage Grotesque',sans-serif;font-size:48px;font-weight:800;letter-spacing:-.03em;margin-bottom:var(--s-4)}
.tier-showcase-price sup{font-size:.4em;vertical-align:top;margin-top:.3em;color:var(--wine)}
.tier-showcase-price span{display:block;font-size:12px;color:var(--dim-lt);font-weight:500;text-transform:uppercase;letter-spacing:.04em;margin-top:6px}
.tier-showcase-feat{list-style:none;display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-5)}
.tier-showcase-feat li{font-size:var(--t-sm);color:var(--body);display:flex;align-items:center;gap:var(--s-2)}
.tier-showcase-feat li::before{content:'✓';color:var(--wine);font-weight:700}
@media(prefers-reduced-motion:reduce){.tier-showcase-media{transform:none!important;filter:none!important;opacity:1!important}}
@media(max-width:900px){.tier-showcase{grid-template-columns:1fr;gap:var(--s-5)}.tier-showcase-frame-wrap{height:320px}}
@media(max-width:600px){.tier-showcase-frame-wrap{height:240px}}

/* ─── PRICING ─── */
#preise { padding:var(--s-8) var(--s-5); background:var(--bg2); }
.preise-inner { max-width:1200px; margin:0 auto; }
.pricing-tabs { display:flex; gap:var(--s-1); background:var(--surf); border:1px solid var(--brd); border-radius:10px; padding:var(--s-1); max-width:260px; margin-bottom:var(--s-6); }
.ptab { flex:1; text-align:center; padding:8px 16px; border-radius:7px; font-size:var(--t-xs); font-weight:600; color:var(--dim-lt); cursor:pointer; transition:.2s; }
.ptab.active { background:var(--wine); color:#fff; }
.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); }
.pc2 { background:var(--surf); border:1px solid var(--brd); border-radius:16px; overflow:hidden; transition:transform .3s var(--ease),border-color .3s; }
.pc2:hover { transform:translateY(-6px); border-color:var(--wine-a4); }
.pc2.featured { border-color:var(--wine); background:linear-gradient(145deg,var(--wine-a1),var(--surf)); }
.pc2-header { padding:var(--s-5); border-bottom:1px solid var(--brd); }
.pc2-badge { display:inline-block; background:var(--wine); color:#fff; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:100px; margin-bottom:var(--s-3); }
.pc2-name { font-family:'Bricolage Grotesque',sans-serif; font-size:var(--t-lg); font-weight:700; margin-bottom:var(--s-2); }
.pc2-price { font-family:'Bricolage Grotesque',sans-serif; font-size:48px; font-weight:800; letter-spacing:-.04em; line-height:1; }
.pc2-price sup { font-size:.4em; vertical-align:top; margin-top:.3em; color:var(--wine); }
.pc2-price .cycle { display:block; font-size:11px; color:var(--dim-lt); font-weight:500; font-family:'Manrope',sans-serif; margin-top:7px; letter-spacing:.04em; text-transform:uppercase; }
.pc2-body { padding:var(--s-4) var(--s-5) var(--s-5); }
.pc2-hint { font-size:var(--t-sm); color:var(--dim-lt); line-height:1.5; margin-bottom:var(--s-5); }
.pc2-feat { list-style:none; display:flex; flex-direction:column; gap:var(--s-2); margin-bottom:var(--s-5); }
.pc2-feat li { font-size:var(--t-sm); color:var(--body); display:flex; align-items:flex-start; gap:var(--s-2); }
.pc2-feat li::before { content:'✓'; color:var(--wine); font-weight:700; flex-shrink:0; }
.pc2-feat li.off::before { content:'—'; color:var(--dim); }
.pc2-feat li.off { color:var(--dim); }
.pc2-cta { display:block; width:100%; text-align:center; padding:13px; border-radius:8px; font-size:var(--t-sm); font-weight:700; cursor:pointer; text-decoration:none; font-family:'Manrope',sans-serif; transition:.2s; border:none; background:transparent; }
.pc2.featured .pc2-cta { background:var(--wine); color:#fff; }
.pc2.featured .pc2-cta:hover { background:var(--wine-lt); }
.pc2:not(.featured) .pc2-cta { background:rgba(255,255,255,.06); border:1px solid var(--brd); color:var(--ink); }
.pc2:not(.featured) .pc2-cta:hover { background:rgba(255,255,255,.1); }
.pc2-cta:active { transform:scale(.97); }
.pc2-preview{display:block;text-align:center;padding:9px;border-radius:8px;font-size:var(--t-xs);font-weight:600;color:var(--dim-lt);border:1px solid var(--brd);text-decoration:none;transition:color .2s,border-color .2s,transform .1s ease-out;margin-bottom:var(--s-2)}
.pc2-preview:hover{color:var(--wine-lt);border-color:var(--wine-a4)}
.pc2-preview:active{transform:scale(.97)}
@media(max-width:900px) { .pgrid { grid-template-columns:1fr; } }
.pc2-divider{display:flex;align-items:center;gap:var(--s-4);margin:var(--s-7) 0 var(--s-5);color:var(--dim-lt);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:600;justify-content:center}
.pc2-divider::before,.pc2-divider::after{content:'';flex:1;height:1px;background:var(--brd);max-width:120px}

.accent-em{font-style:italic;color:var(--wine)}

/* ─── PAKET-KONFIGURATOR ─── */
.cfg{max-width:900px;margin:0 auto}
.cfg-head{text-align:center;margin-bottom:var(--s-7)}
.cfg-title{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-bottom:var(--s-3)}
.cfg-desc{color:var(--body);font-size:var(--t-md);max-width:520px;margin:0 auto;line-height:1.6}
.cfg-group{margin-bottom:var(--s-6)}
.cfg-group-label{font-size:var(--t-sm);font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--s-3);display:flex;align-items:center;gap:8px}
.cfg-group-note{font-size:11px;font-weight:600;color:var(--dim-lt);text-transform:none;letter-spacing:0;background:rgba(255,255,255,.05);padding:2px 8px;border-radius:20px}
.cfg-options{display:flex;flex-wrap:wrap;gap:10px}
.cfg-opt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:var(--surf);border:1.5px solid var(--brd);border-radius:9px;padding:11px 18px;color:var(--body);font-family:'Manrope',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:border-color .2s,background .2s,color .2s,transform .15s var(--ease)}
.cfg-opt span{font-size:12px;font-weight:600;color:var(--dim-lt)}
.cfg-opt:hover{border-color:var(--wine-a4);transform:translateY(-1px)}
.cfg-opt:active{transform:scale(.96)}
.cfg-opt.active{background:var(--wine);border-color:var(--wine);color:#fff}
.cfg-opt.active span{color:rgba(255,255,255,.8)}
.cfg-shop-note{font-size:13px;color:var(--dim-lt);margin-top:var(--s-3)}
.cfg-shop-note a{color:var(--wine-lt)}
.cfg-summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;padding-top:var(--s-6);border-top:1px solid var(--brd)}
.cfg-total{display:flex;flex-direction:column;gap:3px}
.cfg-total-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--dim-lt)}
.cfg-total-amount{font-family:'Bricolage Grotesque',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.cfg-total-amount .cfg-monthly{font-size:15px;font-weight:600;color:var(--wine-lt);margin-left:8px}
#cfgCheckout:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.cfg-error{color:#f87171;font-size:13px;margin-top:var(--s-3)}
.cfg-hint{font-size:12px;color:var(--dim-lt);margin-top:var(--s-4);text-align:center}
@media(max-width:640px){.cfg-summary{flex-direction:column;align-items:stretch}#cfgCheckout{width:100%;justify-content:center}}

/* ─── GARANTIE ─── */
.gar-section{padding:var(--s-8) var(--s-5);background:var(--bg2);border-top:1px solid var(--brd)}
.gar-inner{max-width:700px;margin:0 auto}
.gar-h2{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(28px,4vw,48px);font-weight:800;letter-spacing:-.04em;line-height:1.05;text-wrap:balance;margin-bottom:var(--s-4)}
.gar-p{color:var(--body);font-size:var(--t-md);line-height:1.8;margin-bottom:var(--s-6)}
.gar-list{display:flex;flex-direction:column;gap:var(--s-2)}
.gar-feat{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--body)}

/* ─── ABLAUF ─── */
#ablauf { background:var(--bg2); border-top:1px solid var(--brd); padding:var(--s-8) 0; }
.abl-wrap { max-width:800px; margin:0 auto; padding:0 var(--s-5); }
.abl-head { text-align:center; margin-bottom:var(--s-7); }
.abl-head h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:var(--t-2xl); font-weight:800; letter-spacing:-.04em; text-wrap:balance; margin-bottom:var(--s-3); }
.abl-head p { color:var(--body); font-size:var(--t-md); max-width:480px; margin:0 auto; }
.abl-steps { list-style:none; display:flex; flex-direction:column; gap:0; }
.abl-step { display:grid; grid-template-columns:64px 1fr; gap:var(--s-4); align-items:start; padding:var(--s-5) 0; border-bottom:1px solid var(--brd); }
.abl-step:last-child { border-bottom:none; }
.abl-num { font-family:'Bricolage Grotesque',sans-serif; font-size:var(--t-xl); font-weight:800; color:var(--wine); letter-spacing:-.04em; line-height:1; padding-top:3px; }
.abl-title { font-size:var(--t-lg); font-weight:700; margin-bottom:var(--s-1); }
.abl-desc { color:var(--body); font-size:var(--t-sm); line-height:1.6; }

/* ─── ABOUT (Licht-Sektion — Rhythmus-Wechsel im sonst durchgehend dunklen Seitenverlauf) ─── */
#about { background:var(--bg-light); padding:var(--s-8) 0; border-top:1px solid var(--brd); }
.about-wrap { max-width:1200px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:1fr 380px; gap:64px; align-items:start; }
.about-left { position:relative; }
.about-mark { width:44px; height:3px; background:var(--wine); border-radius:2px; margin-bottom:var(--s-4); }
.about-left blockquote { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(24px,3.2vw,38px); font-weight:700; color:var(--ink-onlight); line-height:1.28; letter-spacing:-.03em; text-wrap:balance; margin-bottom:var(--s-4); }
.about-left p { color:var(--body-onlight); font-size:15px; line-height:1.75; max-width:560px; }
.about-right { border-left:1px solid var(--brd-onlight); padding-left:40px; }
.about-right.r{transition-delay:.1s}
.about-p2{margin-top:12px;color:var(--dim-onlight);font-size:14px}
.about-photo-wrap{position:relative;margin-bottom:var(--s-5)}
.about-photo-block{position:absolute;top:16px;left:16px;width:100%;height:100%;background:var(--wine);border-radius:var(--r-md)}
.about-photo{position:relative;display:block;width:100%;height:auto;border-radius:var(--r-md);z-index:1}
.about-info{border-top:1px solid var(--brd-onlight);padding-top:var(--s-4)}
.about-info-name{font-size:19px;font-weight:700;color:var(--ink-onlight);line-height:1.2;margin-bottom:3px}
.about-info-role{font-size:13px;color:var(--dim-onlight)}
.about-info-loc{font-size:12px;color:var(--dim-onlight);margin-top:2px}
.afacts { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:16px 28px; margin-top:var(--s-6); padding-top:var(--s-5); border-top:1px solid var(--brd-onlight); max-width:560px; }
.afacts li { font-size:13px; font-weight:600; color:var(--body-onlight); line-height:1.5; padding-left:16px; position:relative; }
.afacts li::before { content:''; position:absolute; left:0; top:6px; width:6px; height:6px; background:var(--wine); border-radius:1px; }
@media(max-width:1000px) { .about-wrap { grid-template-columns:1fr; gap:40px; } .about-right { border-left:none; padding-left:0; border-top:1px solid var(--brd-onlight); padding-top:var(--s-5); } .about-photo-wrap{max-width:320px;margin-left:auto;margin-right:auto} }

/* ─── WARUM LIST ─── */
.warum-list { border-top:1px solid var(--brd); }
.warum-row { display:grid; grid-template-columns:220px 1fr; gap:var(--s-7); align-items:baseline; padding:var(--s-6) 0; border-bottom:1px solid var(--brd); transition:border-color .3s; }
.warum-row:hover .warum-key { color:var(--wine-lt); }
.warum-key { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(26px,2.8vw,38px); font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1; transition:color .25s; }
.warum-val { color:var(--body); font-size:var(--t-md); line-height:1.75; max-width:620px; }
@media(max-width:768px) { .warum-row { grid-template-columns:1fr; gap:var(--s-3); padding:var(--s-5) 0; } }

/* ─── MOBILE NAV: full-screen overlay ─── */
.ham span:nth-child(1) { transition:transform .3s var(--ease),opacity .3s; }
.ham span:nth-child(2) { transition:opacity .2s; }
body.nav-open { overflow:hidden; }
.nav-overlay { position:fixed; inset:0; z-index:500; 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(28px,7vw,52px); font-weight:800; letter-spacing:-.02em; color:var(--ink); text-decoration:none; padding:16px 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,.nav-overlay-link:active { color:var(--wine-lt); }
.nav-overlay.open .nav-overlay-link { opacity:1; transform:none; }
.nav-overlay-link:nth-child(1) { transition-delay:.08s; }
.nav-overlay-link:nth-child(2) { transition-delay:.13s; }
.nav-overlay-link:nth-child(3) { transition-delay:.18s; }
.nav-overlay-link:nth-child(4) { transition-delay:.23s; }
.nav-overlay-link:nth-child(5) { transition-delay:.28s; }
.nav-overlay-link:nth-child(6) { transition-delay:.33s; }
.nav-overlay-link:nth-child(7) { transition-delay:.38s; }
.nav-overlay-link:nth-child(8) { transition-delay:.43s; }
.nav-overlay-link:nth-child(9) { transition-delay:.48s; }
.nav-overlay-foot { margin-top:var(--s-6); opacity:0; transition:opacity .5s var(--ease); transition-delay:0s; max-width:640px; margin-left:auto; margin-right:auto; }
.nav-overlay.open .nav-overlay-foot { opacity:1; transition-delay:.38s; }
.nav-overlay-foot a { color:var(--dim-lt); font-size:var(--t-sm); text-decoration:none; }

/* ─── FAQ ─── */
#faq { background:var(--bg2); padding:100px 0; border-top:1px solid var(--brd); }
.faq-wrap { max-width:1200px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:320px 1fr; gap:80px; align-items:start; }
.faq-left h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(26px,3.5vw,38px); font-weight:800; letter-spacing:-.03em; text-wrap:balance; margin-bottom:14px; }
.faq-left p { color:var(--body); font-size:15px; line-height:1.7; margin-bottom:24px; }
.faq-list { 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; padding:18px 0; background:none; border:none; cursor:pointer; color:var(--ink); font-size:14px; font-weight:600; text-align:left; gap:16px; transition:color .2s; font-family:'Manrope',sans-serif; }
.faq-q:hover { color:var(--wine-lt); }
.faq-ic { flex-shrink:0; font-size:20px; color:var(--dim); transition:transform .3s var(--ease),color .2s; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-ai { padding:0 0 18px; color:var(--body); font-size:14px; line-height:1.7; }
@media(max-width:1000px) { .faq-wrap { grid-template-columns:1fr; gap:48px; } }

/* ─── CONTACT ─── */
#kontakt { background:var(--bg); padding:100px 0; }
.k-wrap { max-width:1200px; margin:0 auto; padding:0 32px; }
.k-head { margin-bottom:56px; }
.k-head h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(32px,5vw,64px); font-weight:800; letter-spacing:-.04em; text-wrap:balance; margin-bottom:12px; }
.k-head p { color:var(--body); font-size:17px; max-width:500px; }
.k-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:48px; align-items:start; }
.k-options { border:1px solid var(--brd); border-radius:10px; overflow:hidden; }
.k-opt { display:flex; align-items:center; gap:16px; padding:18px 22px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--brd); transition:background .2s; }
.k-opt:last-child { border-bottom:none; }
.k-opt:hover { background:rgba(255,255,255,.02); }
.k-icon { width:40px; height:40px; border-radius:8px; background:var(--wine-a2); border:1px solid var(--wine-a3); display:grid; place-items:center; flex-shrink:0; }
.k-icon svg { width:16px; height:16px; stroke:var(--wine-lt); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.k-icon.wa { background:rgba(37,211,102,.1); border-color:rgba(37,211,102,.2); }
.k-icon.wa svg { stroke:#25d366; }
.k-lbl { font-size:11px; color:var(--dim); display:block; margin-bottom:1px; }
.k-val { font-size:14px; font-weight:600; }
.k-arr { margin-left:auto; color:var(--dim); font-size:16px; }
.k-hours { margin-top:12px; padding:16px 20px; background:var(--surf); border:1px solid var(--brd); border-radius:8px; }
.k-hours h4 { font-size:11px; font-weight:700; color:var(--dim-lt); text-transform:uppercase; letter-spacing:.07em; margin-bottom:12px; }
.k-hours table { width:100%; border-collapse:collapse; }
.k-hours td { font-size:13px; padding:4px 0; color:var(--body); }
.k-hours td:last-child { text-align:right; color:var(--dim-lt); }
/* ─── MID-PAGE CTA ─── */
.midcta-section{padding:var(--s-6) var(--s-5);background:var(--surf);border-top:1px solid var(--wine-a3);border-bottom:1px solid var(--wine-a3)}
.midcta-inner{max-width:960px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap}
.midcta-h2{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(22px,3vw,38px);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.2}
.midcta-btns{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0;align-items:center}
.midcta-wa-btn{display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#fff;border-radius:var(--r-md);padding:14px 22px;font-size:13px;font-weight:700;text-decoration:none;font-family:'Manrope',sans-serif;transition:opacity .2s}
.midcta-wa-btn:hover{opacity:.88}

.k-form { background:var(--surf); border:1px solid var(--brd); border-radius:10px; padding:32px; }
.k-form.r{transition-delay:.12s}
.k-hours.r{transition-delay:.1s}
.k-form h3 { font-size:18px; font-weight:700; margin-bottom:22px; }
.k-wa-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:#25d366;color:#fff;border-radius:var(--r-md);padding:16px 20px;font-size:15px;font-weight:700;text-decoration:none;font-family:'Manrope',sans-serif;margin-bottom:20px;transition:opacity .2s}
.k-wa-btn:hover{opacity:.88}
.k-divider-row{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.k-divider-line{flex:1;height:1px;background:var(--brd)}
.k-divider-text{font-size:12px;color:var(--dim);font-family:'Manrope',sans-serif}
.k-honeypot{display:none}
.k-submit-spin{display:none}
.k-err-box{display:none;margin-top:var(--s-2);padding:var(--s-2) var(--s-3);background:var(--wine-a2);border:1px solid var(--wine);border-radius:var(--r-sm);font-size:var(--t-xs);color:var(--wine-lt)}
.k-ok-title{font-size:22px;font-weight:700;color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;margin-bottom:10px}
.k-ok-p{color:var(--body);font-size:14px;line-height:1.7;margin-bottom:20px}
.k-ok-wa-btn{display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#fff;border-radius:var(--r-sm);padding:11px 20px;font-size:14px;font-weight:600;text-decoration:none}
.fg { margin-bottom:14px; }
.fg label { display:block; font-size:10px; font-weight:700; color:var(--dim-lt); text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px; }
.fg input, .fg textarea, .fg select { width:100%; background:var(--bg); border:1px solid var(--brd); border-radius:6px; padding:10px 13px; color:var(--ink); font-size:14px; font-family:inherit; outline:none; transition:border-color .2s,box-shadow .2s; }
.fg input:focus, .fg textarea:focus, .fg select:focus { border-color:var(--wine); box-shadow:0 0 0 3px var(--wine-a2); }
.fg input::placeholder, .fg textarea::placeholder { color:var(--dim); }
.fg textarea { resize:vertical; min-height:90px; }
.fg select option { background:var(--bg2); }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.btn-submit { width:100%; background:var(--wine); color:#fff; border:none; border-radius:6px; padding:13px; font-size:14px; font-weight:700; cursor:pointer; margin-top:6px; transition:background .2s; font-family:'Manrope',sans-serif; }
.btn-submit:hover { background:var(--wine-lt); }
.form-ok { display:none; text-align:center; padding:20px; color:var(--wine-lt); font-weight:600; }
@media(max-width:1000px) { .k-grid { grid-template-columns:1fr; gap:32px; } }
@media(max-width:768px) { .frow { grid-template-columns:1fr; } }

/* ─── DEMO PORTFOLIO CARDS ─── */
.demo-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.demo-dot.r{background:#ff5f57}.demo-dot.y{background:#ffbd2e}.demo-dot.g{background:#28ca41}

/* ─── VERGLEICH TABLE ─── */
.vgl-section{padding:var(--s-8) var(--s-5);background:var(--bg);border-top:1px solid var(--brd)}
.vgl-inner{max-width:960px;margin:0 auto}
.vgl-head{margin-bottom:var(--s-7)}
.vgl-head .sec-h2{margin-bottom:var(--s-3)}
.vgl-p{color:var(--body);font-size:var(--t-md);max-width:480px}
.vgl-card{background:var(--surf);border:1px solid var(--brd);border-radius:var(--r-lg);overflow:hidden}
.vgl-tbl{width:100%;border-collapse:collapse}
.vgl-tbl td,.vgl-tbl th{padding:14px 20px;border-bottom:1px solid var(--brd);font-size:13px;font-family:'Manrope',sans-serif}
.vgl-tbl th:not(:first-child),.vgl-tbl td:not(:first-child){text-align:center}
.vgl-tbl th:first-child{text-align:left;color:var(--dim);width:30%}
.vgl-tbl thead th{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dim-lt);padding:16px 20px}
.vgl-tbl tbody tr:last-child td{border-bottom:none}
.vgl-label{color:var(--body);font-weight:500}
.vgl-neutral{color:var(--body)}
.vgl-col-bk{background:var(--wine-a1);border-left:1px solid var(--wine-a3);border-right:1px solid var(--wine-a3)}
.vgl-bk-h{background:var(--wine-a1);border-left:1px solid var(--wine-a3);border-right:1px solid var(--wine-a3);color:var(--wine-lt)!important;font-weight:700}
.vgl-check{color:var(--wine-lt);font-weight:700}
.vgl-minus{color:var(--dim)}
@media(max-width:768px){.vgl-tbl td,.vgl-tbl th{padding:10px 12px;font-size:12px}}

/* ─── FOOTER ─── */
footer { background:var(--bg2); border-top:1px solid var(--brd); padding:52px 0 28px; }
.ft-wrap { max-width:1200px; margin:0 auto; padding:0 32px; }
.ft-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.ft-logo { font-family:'Bricolage Grotesque',sans-serif; font-size:18px; font-weight:800; color:var(--ink); letter-spacing:-.02em; margin-bottom:10px; }
.ft-logo em { font-style:normal; color:var(--wine-lt); }
.ft-brand p { color:var(--dim); font-size:13px; line-height:1.6; max-width:240px; }
.ft-col h4 { font-size:10px; font-weight:800; color:var(--dim-lt); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.ft-col a { display:block; color:var(--dim); text-decoration:none; font-size:13px; margin-bottom:9px; transition:color .2s; }
.ft-col a:hover { color:var(--ink); }
.ft-bottom { border-top:1px solid var(--brd); padding-top:22px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.ft-copy { color:var(--dim); font-size:12px; }
.ft-legal { display:flex; gap:18px; }
.ft-legal a { color:var(--dim); text-decoration:none; font-size:12px; transition:color .2s; }
.ft-legal a:hover { color:var(--ink); }
@media(max-width:1000px) { .ft-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:768px) { .ft-grid { grid-template-columns:1fr; } }

/* ─── WA FLOAT ─── */
.wa-float { position:fixed; bottom:28px; right:28px; z-index:998; width:56px; height:56px; background:#25d366; border-radius:50%; display:grid; place-items:center; box-shadow:0 4px 24px rgba(37,211,102,.4); text-decoration:none; transition:transform .2s,box-shadow .2s,opacity .5s var(--ease); opacity:0; pointer-events:none; }
.wa-float.wa-visible { opacity:1; pointer-events:auto; }
.wa-float:hover { transform:scale(1.1); box-shadow:0 6px 32px rgba(37,211,102,.55); }
.wa-float svg { width:30px; height:30px; fill:#fff; }

/* ─── LUXURY TEASER ROW ─── */
.pc2-luxury-row { margin-top:var(--s-5); }
.pc2-luxury-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); padding:var(--s-5) var(--s-6); border:1px solid var(--wine-a3); border-radius:12px; background:linear-gradient(135deg,var(--wine-a1),transparent); flex-wrap:wrap; }
.pc2-luxury-inner .pc2-cta { background:var(--wine-a2); border:1px solid var(--wine-a3); color:var(--wine-lt); font-size:var(--t-xs); padding:10px 20px; }
.pc2-luxury-inner .pc2-cta:hover { background:var(--wine-a3); }

/* ── HERO PROOF: Foto + freistehendes Daten-Widget statt Bilderrahmen+Caption ── */
.hero-visual{position:relative}
.proof-frame{position:relative;width:100%;height:560px;overflow:hidden;background:var(--bg);border-radius:var(--r-lg)}
.proof-frame-iframe-wrap{width:100%;height:100%;overflow:hidden;background:var(--bg)}
.proof-frame-iframe{width:1280px;height:900px;transform:scale(.361);transform-origin:top left;pointer-events:none;border:none;display:block}
.proof-widget{position:absolute;left:var(--s-4);bottom:var(--s-4);right:var(--s-4);background:rgba(10,13,16,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;z-index:1}
.proof-widget-label{font-size:12px;font-weight:700;color:var(--wine-lt);display:block}
.proof-widget-sub{font-size:12px;color:var(--dim-lt);display:block;margin-top:2px}
.proof-widget-link{font-size:12px;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
@media(max-width:1024px){.proof-frame{height:440px}.proof-frame-iframe{transform:scale(.649)}}
@media(max-width:600px){.proof-frame{height:320px}.proof-widget{flex-direction:column;align-items:flex-start}.proof-frame-iframe{transform:scale(.243)}}

/* ═══════════════════════════════════════════════════
   WOW EFFECTS — BK Digital Enhanced
═══════════════════════════════════════════════════ */

/* ── 2. Bento stagger ── */
.bento-card:nth-child(2){transition-delay:.12s}
.bento-card:nth-child(3){transition-delay:.24s}
.bento-card:nth-child(4){transition-delay:.36s}

h1 em { animation: none; }

/* ── 4. Featured card glow pulse ── */
@keyframes featGlow{
  0%,100%{box-shadow:0 0 0 1px var(--wine-a4),0 0 28px var(--wine-a2),0 12px 40px rgba(0,0,0,.6)}
  50%{box-shadow:0 0 0 1px rgba(212,170,68,.8),0 0 48px var(--wine-a3),0 12px 60px rgba(0,0,0,.4)}
}
.pc2.featured{animation:featGlow 3s ease-in-out infinite}

/* ── 5. Cursor spotlight ── */
#hero-spotlight{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,var(--wine-a2) 0%,transparent 68%);pointer-events:none;transform:translate(-50%,-50%);z-index:0;left:70%;top:50%;transition:left .1s linear,top .1s linear}
.hero-content,.hero-visual{position:relative;z-index:1}

/* ── 6. Button shimmer (Lichtstreifen) ── */
.btn-magnetic::after{content:'';position:absolute;top:0;left:-160%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-20deg);animation:btnShimmer 5s ease-in-out infinite 2s;pointer-events:none}
@keyframes btnShimmer{0%,100%{left:-160%}42%,58%{left:160%}}

/* ── 7. Button click ripple ── */
.btn-ripple{position:absolute;border-radius:50%;width:5px;height:5px;background:rgba(255,255,255,.28);transform:scale(0);pointer-events:none;animation:rippleOut .7s var(--ease) forwards}
@keyframes rippleOut{to{transform:scale(55);opacity:0}}

/* ── 8. Remove CSS hover transforms — JS handles 3D tilt ── */
.bento-card:hover{transform:none}
.pc2:hover{transform:none}
.warum-card:hover{transform:none}
.bento-card,.pc2,.warum-card{will-change:transform}

/* ── 9. Nav scroll shadow ── */
nav.scrolled{box-shadow:0 4px 30px rgba(0,0,0,.6)}

/* ── 10. Pricing cards stagger on reveal ── */
.pc2:nth-child(2).r{transition-delay:.15s}
.pc2:nth-child(3).r{transition-delay:.3s}

/* ═══════════════════════════════════════════════════
   BACKGROUND EFFECTS — Exklusives Premium-Feeling
═══════════════════════════════════════════════════ */

/* ── Subtiles Dot-Grid im Hintergrund ── */
body {
  background-image: radial-gradient(circle, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Hero Gradient-Orbs ── */
#hero {
  background:
    radial-gradient(ellipse 80% 65% at 72% 48%, var(--wine-a1), transparent 68%),
    radial-gradient(ellipse 40% 40% at 4% 90%, rgba(140,110,20,.05), transparent 62%);
}

/* ── Pricing Section Glow-Linie oben ── */
#preise { position: relative; }
#preise::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--wine-a4) 50%, transparent 100%);
  z-index: 1;
}
#preise::after {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 700px; height: 220px;
  background: radial-gradient(ellipse, var(--wine-a1), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── FAQ Section accent line ── */
#faq { position: relative; }
#faq::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--wine-a3) 50%, transparent 100%);
}

/* ── Finale CTA: atmende Hintergrund-Animation ── */
@keyframes ctaBreath {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); }
  50%       { opacity: .9; transform: translateX(-50%) scale(1.08); }
}
#finale::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse, var(--wine-a2), transparent 65%);
  pointer-events: none;
  animation: ctaBreath 5s ease-in-out infinite;
}


/* ── Nav backdrop intensify ── */
nav { backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }

/* ═══ MOTION-UPGRADE ═══ */

/* Hero: Wort-für-Wort-Choreografie */
.hw { display:inline-block; opacity:0; transform:translateY(.55em); filter:blur(5px);
  transition:opacity .55s var(--ease), transform .65s var(--ease), filter .55s var(--ease);
  transition-delay:var(--hwd, 0ms); }
.hw.on { opacity:1; transform:none; filter:none; }

/* Preis-Karten: Stagger beim Tab-Wechsel */
@keyframes cardIn { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:none; } }
.pc2.tab-in { animation:cardIn .5s var(--ease) both; }

/* Ablauf: scroll-aktivierte Schritte + Fortschrittslinie */
.abl-steps { position:relative; }
.abl-steps::before { content:''; position:absolute; left:31px; top:14px; bottom:14px; width:2px; background:var(--brd); border-radius:2px; }
.abl-progress { position:absolute; left:31px; top:14px; width:2px; height:0;
  background:linear-gradient(180deg, var(--wine), var(--wine-lt)); border-radius:2px; z-index:0; }
.abl-num { position:relative; z-index:1; background:var(--bg2); padding-bottom:6px;
  color:var(--dim); transition:color .45s var(--ease), transform .45s var(--ease); transform-origin:left top; }
.abl-body { opacity:.42; transform:translateX(6px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.abl-step.abl-on .abl-num { color:var(--wine); transform:scale(1.06); }
.abl-step.abl-on .abl-body { opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  .hw { opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .pc2.tab-in { animation:none !important; }
  .abl-body { opacity:1; transform:none; transition:none; }
  .abl-num { color:var(--wine); transition:none; }
  .abl-progress { height:100% !important; }
}