*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ease: cubic-bezier(0.23,1,0.32,1);
  --bg: #0b0b0e; --bg2: #0e0e12; --surf: #131318; --brd: #1e1e26;
  --wine: #8c2030; --wine-lt: #a83040; --wine-glow: rgba(140,32,48,.18);
  --ink: #eceae5; --body: #c0bab4; --dim: #6e686e; --dim-lt: #9e9898;
  --t-xs:12px; --t-sm:14px; --t-md:16px; --t-lg:20px; --t-xl:28px;
  --t-2xl:clamp(32px,5vw,64px); --t-hero:clamp(48px,7vw,96px);
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:32px; --s-6:48px; --s-7:64px; --s-8:96px;
}
html { scroll-behavior: smooth; overflow-x: hidden; }
body { background: var(--bg); color: var(--ink); font-family: 'Manrope', system-ui, sans-serif; line-height: 1.6; overflow-x: hidden; cursor: none; }
@media (hover: none) { body { cursor: auto; } #cur, #cur-ring { display: none; } .nav-cta, .btn-magnetic, .btn-ghost2, .btn-submit, .pc2-cta, .pc2-preview, .faq-q, .ham, .ptab, input[type=range] { cursor: pointer; } }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--brd); border-radius: 3px; }

/* ─── CURSOR ─── */
#cur { position:fixed; width:10px; height:10px; background:var(--wine); border-radius:50%; pointer-events:none; z-index:99999; transform:translate(-50%,-50%); transition:width .2s var(--ease),height .2s var(--ease),background .2s; }
#cur-ring { position:fixed; width:36px; height:36px; border:1.5px solid rgba(140,32,48,.5); border-radius:50%; pointer-events:none; z-index:99998; transform:translate(-50%,-50%); transition:width .35s var(--ease),height .35s var(--ease),border-color .2s; opacity:.7; }
.cur-grow #cur { width:20px; height:20px; background:var(--wine-lt); }
.cur-grow #cur-ring { width:56px; height:56px; border-color:rgba(140,32,48,.7); }

/* ─── 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; }
.logo em { font-style:italic; color:var(--wine); }
.nav-ul { display:flex; list-style:none; gap:4px; }
.nav-ul a { color:var(--body); text-decoration:none; font-size:var(--t-sm); font-weight:500; padding:7px 14px; border-radius:6px; transition:color .2s,background .2s; }
.nav-ul a:hover { color:var(--ink); background:rgba(255,255,255,.05); }
.nav-cta { background:var(--wine); color:#fff; border:none; border-radius:7px; padding:9px 20px; font-size:var(--t-xs); font-weight:700; cursor:none; text-decoration:none; display:inline-block; transition:background .2s,transform .15s var(--ease); font-family:'Manrope',sans-serif; will-change:transform; }
.nav-cta:hover { background:var(--wine-lt); }
.ham { display:none; background:none; border:none; cursor:none; padding:6px; }
.ham span { display:block; width:20px; height:1.5px; background:var(--ink); margin:5px 0; transition:.3s; }
@media(max-width:768px) { .nav-ul { display:none; } .ham { display:block; } }

/* ─── 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:none; text-decoration:none; transition:background .18s,box-shadow .2s; 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 rgba(140,32,48,.5); }
.btn-magnetic:hover::before { opacity:1; }
.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:none; text-decoration:none; transition:border-color .2s,color .2s; font-family:'Manrope',sans-serif; }
.btn-ghost2:hover { border-color:rgba(140,32,48,.5); color:var(--ink); }

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

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

/* ─── HERO ─── */
.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; }
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; } }

/* ─── 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 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--s-3); }
.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); }
.bento-card:hover { border-color:rgba(140,32,48,.4); transform:translateY(-4px); }
.bento-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(140,32,48,.08),transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none; }
.bento-card:hover::before { opacity:1; }
.bento-card.wide { grid-column:span 2; }
.bc-icon { width:44px; height:44px; background:rgba(140,32,48,.1); border:1px solid rgba(140,32,48,.2); border-radius:10px; display:grid; place-items:center; margin-bottom:var(--s-3); flex-shrink:0; }
.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:rgba(140,32,48,.08); color:var(--body); border-bottom:1px solid var(--brd); }
.bcc-user { background:rgba(140,32,48,.2); 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); } }
@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; } }

/* ─── 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:none; 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:rgba(140,32,48,.4); }
.pc2.featured { border-color:var(--wine); background:linear-gradient(145deg,rgba(140,32,48,.08),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-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; text-align:center; padding:13px; border-radius:8px; font-size:var(--t-sm); font-weight:700; cursor:none; text-decoration:none; font-family:'Manrope',sans-serif; transition:.2s; }
.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-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;margin-bottom:var(--s-2)}
.pc2-preview:hover{color:var(--wine-lt);border-color:rgba(140,32,48,.4)}
@media(max-width:900px) { .pgrid { grid-template-columns:1fr; } }

/* ─── ROI CALC ─── */
.roi-calc { background:var(--surf); border:1px solid var(--brd); border-radius:20px; padding:var(--s-6); margin-top:var(--s-6); text-align:left; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--wine); cursor:none; box-shadow:0 0 10px rgba(140,32,48,.4); }
input[type=range]::-webkit-slider-runnable-track { height:4px; background:var(--brd); border-radius:2px; }

/* ─── 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 ─── */
#about { background:var(--bg); 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 320px; gap:80px; align-items:center; }
.about-left { position:relative; }
.about-left::before { content:'\201C'; font-family:'Bricolage Grotesque',sans-serif; font-size:140px; line-height:1; color:var(--wine); opacity:.15; position:absolute; top:-32px; left:-16px; pointer-events:none; }
.about-left blockquote { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(20px,2.8vw,32px); font-weight:700; color:var(--ink); line-height:1.3; letter-spacing:-.025em; text-wrap:balance; margin-bottom:var(--s-4); padding-top:var(--s-3); }
.about-left p { color:var(--body); font-size:15px; line-height:1.75; max-width:560px; }
.about-right { border-left:1px solid var(--brd); padding-left:48px; }
.about-avatar { width:72px; height:72px; border-radius:50%; background:rgba(140,32,48,.1); border:2px solid rgba(140,32,48,.25); display:flex; align-items:center; justify-content:center; font-family:'Bricolage Grotesque',sans-serif; font-size:20px; font-weight:800; color:var(--wine-lt); margin-bottom:20px; flex-shrink:0; }
.about-who strong { display:block; font-size:17px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.about-who span { font-size:13px; color:var(--dim-lt); display:block; margin-bottom:var(--s-4); }
.achips { display:flex; flex-direction:column; gap:8px; }
.achip { background:rgba(140,32,48,.07); color:var(--body); border:1px solid rgba(140,32,48,.15); border-radius:4px; padding:6px 14px; font-size:12px; font-weight:600; display:block; transition:border-color .2s,color .2s; }
.achip:hover { border-color:rgba(140,32,48,.4); color:var(--ink); }
@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); padding-top:var(--s-5); } }

/* ─── 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; } }

/* ─── ROI SLIDER ─── */
.roi-range { -webkit-appearance:none; appearance:none; flex:1; height:3px; background:linear-gradient(to right, var(--wine) calc(var(--pct,20%) * 1%), var(--brd) calc(var(--pct,20%) * 1%)); border-radius:2px; outline:none; cursor:pointer; }
.roi-range::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--wine); cursor:pointer; box-shadow:0 0 0 5px rgba(140,32,48,.18); border:2px solid var(--bg); transition:box-shadow .2s; }
.roi-range::-webkit-slider-thumb:hover { box-shadow:0 0 0 8px rgba(140,32,48,.25); }
.roi-range::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--wine); cursor:pointer; border:2px solid var(--bg); }
@media(hover:none) { .roi-range { cursor:default; } }

/* ─── MOBILE NAV ─── */
@media(max-width:768px) {
  .nav-ul.open { display:flex !important; flex-direction:column; position:fixed; top:60px; left:0; right:0; background:rgba(11,11,14,.98); border-bottom:1px solid var(--brd); padding:12px 0; z-index:199; backdrop-filter:blur(12px); }
  .nav-ul.open li a { padding:14px 28px; font-size:15px; display:block; border-radius:0; }
}

/* ─── 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:none; 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:rgba(140,32,48,.1); border:1px solid rgba(140,32,48,.2); 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); }
.k-form { background:var(--surf); border:1px solid var(--brd); border-radius:10px; padding:32px; }
.k-form h3 { font-size:18px; font-weight:700; margin-bottom:22px; }
.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 rgba(140,32,48,.12); }
.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:none; 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; } }

/* ─── 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 rgba(212,165,63,.25); border-radius:12px; background:linear-gradient(135deg,rgba(212,165,63,.04),transparent); flex-wrap:wrap; }
.pc2-luxury-inner .pc2-cta { background:rgba(212,165,63,.12); border:1px solid rgba(212,165,63,.3); color:#d4a53f; font-size:var(--t-xs); padding:10px 20px; }
.pc2-luxury-inner .pc2-cta:hover { background:rgba(212,165,63,.2); }

/* ── HERO VISUAL (Phone + Cards) ── */
.hero-visual{position:relative;height:520px;display:flex;align-items:center;justify-content:center}
.hv-card{position:absolute;background:rgba(19,19,24,.92);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 18px;backdrop-filter:none;z-index:3}
.hv-card-1{top:40px;left:-10px;animation:cardFloat1 6s ease-in-out infinite}
.hv-card-2{top:30px;right:-10px;animation:cardFloat2 7s ease-in-out infinite .5s}
.hv-card-3{bottom:60px;left:-5px;animation:cardFloat3 8s ease-in-out infinite 1s}
.hvc-label{font-size:10px;font-weight:600;color:var(--dim-lt);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.hvc-num{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.03em}
.hvc-sub{font-size:11px;color:var(--body);margin-top:3px}
@keyframes cardFloat1{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-8px) rotate(.5deg)}}
@keyframes cardFloat2{0%,100%{transform:translateY(0) rotate(.5deg)}50%{transform:translateY(-12px) rotate(-.5deg)}}
@keyframes cardFloat3{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hv-phone-wrap{position:relative;z-index:2}
.hv-phone{width:260px;background:linear-gradient(175deg,#1c1028,#0d0519);border-radius:44px;border:1.5px solid rgba(255,255,255,.12);box-shadow:0 0 0 8px rgba(255,255,255,.025),0 0 0 9.5px rgba(140,32,48,.06),0 60px 120px rgba(0,0,0,.9),0 0 80px rgba(140,32,48,.18);overflow:hidden;animation:hvPhoneFloat 7s ease-in-out infinite;position:relative}
@keyframes hvPhoneFloat{0%,100%{transform:perspective(1200px) rotateY(-8deg) rotateX(4deg) translateY(0)}50%{transform:perspective(1200px) rotateY(-8deg) rotateX(4deg) translateY(-16px)}}
@media(prefers-reduced-motion:reduce){.hv-phone,.hv-card{animation:none}}
.hv-phone-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:80px;height:24px;background:#000;border-radius:16px;z-index:10}
.hv-phone-sb{display:flex;justify-content:space-between;align-items:center;padding:40px 18px 8px;font-size:10px;font-weight:700;color:rgba(255,255,255,.6);font-family:'Manrope',sans-serif}
.hv-sb-icons{display:flex;align-items:center;gap:5px}
.hv-batt{width:18px;height:10px;border:1.5px solid rgba(255,255,255,.4);border-radius:3px;position:relative}
.hv-batt::after{content:'';position:absolute;inset:1.5px 2px;background:rgba(255,255,255,.7);border-radius:1px;width:75%}
.hv-phone-hd{background:rgba(140,32,48,.12);border-bottom:1px solid rgba(140,32,48,.18);padding:12px 16px;display:flex;align-items:center;gap:10px}
.hv-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--wine),var(--wine-lt));display:grid;place-items:center;font-size:15px;flex-shrink:0;box-shadow:0 0 16px rgba(140,32,48,.4)}
.hv-name{font-size:12px;font-weight:700;color:var(--ink)}
.hv-online{font-size:10px;color:var(--wine-lt);display:flex;align-items:center;gap:4px}
.hv-dot{width:5px;height:5px;border-radius:50%;background:var(--wine-lt);animation:hvPulse 2s infinite;flex-shrink:0}
@keyframes hvPulse{0%,100%{opacity:1}50%{opacity:.4}}
.hv-msgs{padding:14px 14px 6px;display:flex;flex-direction:column;gap:8px;min-height:140px}
.hv-msg{padding:9px 13px;border-radius:12px;font-size:11px;line-height:1.5;max-width:88%;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.hv-msg.show{opacity:1;transform:none}
.hv-bot{background:rgba(140,32,48,.1);border:1px solid rgba(140,32,48,.15);color:var(--body);align-self:flex-start;border-bottom-left-radius:3px}
.hv-user{background:var(--wine);color:#fff;align-self:flex-end;font-weight:600;border-bottom-right-radius:3px}
.hv-typing{display:flex;align-items:center;gap:4px;padding:8px 14px;opacity:0;transition:opacity .3s;min-height:26px}
.hv-typing.show{opacity:1}
.hv-typing span{width:5px;height:5px;border-radius:50%;background:var(--wine-lt);animation:hvDot 1.2s infinite}
.hv-typing span:nth-child(2){animation-delay:.2s}.hv-typing span:nth-child(3){animation-delay:.4s}
@keyframes hvDot{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.hv-inp{padding:10px 14px 16px;display:flex;gap:8px;align-items:center}
.hv-input-bar{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--brd);border-radius:20px;padding:8px 14px;font-size:11px;color:var(--dim);font-family:'Manrope',sans-serif}
.hv-send{width:30px;height:30px;border-radius:50%;background:var(--wine);display:grid;place-items:center;flex-shrink:0}
.hv-send svg{width:13px;height:13px;color:#fff}
.hv-glow{position:absolute;inset:-40px;background:radial-gradient(ellipse,rgba(140,32,48,.2),transparent 65%);pointer-events:none;border-radius:50%;z-index:1}
@media(max-width:900px){
  .hero-visual{height:340px}
  .hv-phone{width:200px}
  .hv-card-1,.hv-card-3{display:none}
  .hv-card-2{top:10px;right:0}
}

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

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

/* ── 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}

/* ── 3. Glitch on h1 em (Automatisch.) ── */
@keyframes glitch{
  0%,84%,100%{clip-path:none;text-shadow:none;transform:none}
  85%{clip-path:inset(8% 0 85% 0);text-shadow:-3px 0 rgba(255,45,85,.65),3px 0 rgba(0,175,255,.65);transform:translateX(-2px)}
  86%{clip-path:inset(72% 0 9% 0);text-shadow:3px 0 rgba(255,45,85,.65),-3px 0 rgba(0,175,255,.65);transform:translateX(2px)}
  87%{clip-path:none;text-shadow:none;transform:none}
  88%{clip-path:inset(40% 0 52% 0);text-shadow:-1px 0 rgba(255,45,85,.4);transform:translateX(-1px)}
  89%{clip-path:none;text-shadow:none;transform:none}
}
h1 em{animation:glitch 9s infinite}
@media(prefers-reduced-motion:reduce){h1 em{animation:none}}

/* ── 4. Featured card glow pulse ── */
@keyframes featGlow{
  0%,100%{box-shadow:0 0 0 1px var(--wine),0 0 22px rgba(140,32,48,.2),0 12px 40px rgba(0,0,0,.5)}
  50%{box-shadow:0 0 0 1px var(--wine-lt),0 0 52px rgba(140,32,48,.55),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,rgba(140,32,48,.1) 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;
}

/* ── Film-Grain Overlay (wie Luxus-Agenturen) ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: .35;
  transform: translateZ(0);
  will-change: opacity;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
@media(prefers-reduced-motion:reduce){ body::after{ opacity:.15; } }

/* ── Hero Gradient-Orbs ── */
#hero {
  background:
    radial-gradient(ellipse 80% 65% at 72% 48%, rgba(140,32,48,.1), transparent 68%),
    radial-gradient(ellipse 40% 40% at 4% 90%, rgba(100,10,20,.07), 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%, rgba(140,32,48,.5) 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, rgba(140,32,48,.07), 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%, rgba(140,32,48,.35) 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, rgba(140,32,48,.1), transparent 65%);
  pointer-events: none;
  animation: ctaBreath 5s ease-in-out infinite;
}

/* ── About Section subtle radial ── */
#about {
  background:
    var(--bg)
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(140,32,48,.04), transparent) center / 100% no-repeat;
}

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