/* ============================================================
   Handyland Telekommunikation · Website v4 · Marketing Schmiede
   Design: Gold & Charcoal aus dem Logo, warm-freundlich, modern
   ============================================================ */
@font-face{font-family:"Jost";src:url("../fonts/jost.woff2") format("woff2-variations"),url("../fonts/jost.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Jakarta";src:url("../fonts/jakarta.woff2") format("woff2-variations"),url("../fonts/jakarta.woff2") format("woff2");font-weight:200 800;font-display:swap}

:root{
  --gold:#c1a068;--gold-2:#dcc08c;--gold-3:#e8d7b4;--gold-deep:#86663a;--gold-ink:#6d5330;--gold-soft:#f7f1e4;
  --ink:#1d1d1f;--ink-2:#2e2e32;--ink-3:#46464a;--ink-soft:#0a0a0c;--stage:#000;
  --paper:#fff;--sand:#f5f5f7;--sand-2:#e3e3e8;--cream:#fafafc;--white:#fff;
  --muted:#616166;--line:rgba(0,0,0,.08);--line-2:rgba(0,0,0,.14);
  --wa:#168344;--ok:#2f7d4f;--err:#b8402f;
  --ff-display:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --ff-body:"Jakarta","Manrope","Segoe UI",system-ui,sans-serif;
  --t0:17px;
  --r:26px;--r-sm:18px;--r-xs:12px;
  --sh:0 26px 60px -26px rgba(0,0,0,.22),0 8px 24px -14px rgba(0,0,0,.08);
  --sh-sm:0 12px 30px -16px rgba(0,0,0,.14);
  --wrap:min(1180px,calc(100% - 40px));
  --nav-h:82px;--top-h:40px;
  --ease:cubic-bezier(.16,1,.3,1);--ease-soft:cubic-bezier(.4,0,.2,1);--tr:.32s var(--ease);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}
body{margin:0;font:400 var(--t0)/1.65 var(--ff-body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{max-width:100%;height:auto;display:block}
[id]{scroll-margin-top:calc(var(--nav-h) + 1.5rem)}
::selection{background:var(--gold);color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--ff-display);font-weight:600;line-height:1.08;letter-spacing:-.012em;color:var(--ink)}
h1{font-size:clamp(2.2rem,4.7vw,4.1rem);font-weight:600}
h2{font-size:clamp(1.85rem,3.6vw,3.15rem)}
h3{font-size:1.32rem;font-weight:600;line-height:1.2}
.lead{font-size:clamp(1.05rem,1.55vw,1.24rem);color:var(--muted);max-width:640px}
h1+.lead,h2+.lead{margin-top:16px}
.muted{color:var(--muted)}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:999;padding:.75rem 1rem;background:var(--ink);color:#fff;border-radius:10px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Sections & heads ---------- */
.section{padding:clamp(72px,9vw,120px) 0;position:relative}
.section--tight{padding:clamp(52px,6vw,80px) 0}
.section--sand{background:var(--sand)}

.section--dark{background:radial-gradient(1100px 620px at 50% -10%,#544639,#3a312a 62%),#3a312a;color:#f7f4ef}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark .lead,.section--dark .muted{color:rgba(245,245,247,.72)}
.sec-head{max-width:720px;margin-bottom:clamp(30px,4vw,52px)}
.sec-head--c{text-align:center;margin-inline:auto}
.sec-head .lead{margin-top:16px}
.sec-head--c .lead{margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 16px;font:600 .78rem/1 var(--ff-body);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.eyebrow::before,.eyebrow::after{content:"";width:28px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold));border-radius:2px}
.eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)}
.eyebrow--l::before{display:none}
.section--dark .eyebrow,.hours .eyebrow,.panel--ink .eyebrow,.cta .eyebrow{color:var(--gold-2)}
.orn{display:flex;align-items:center;gap:8px;margin-top:20px}
.orn i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(179,146,95,.18)}
.orn b{flex:0 0 46px;height:1.5px;background:linear-gradient(90deg,var(--gold),var(--gold-3))}
.orn i:last-child{opacity:.6;width:5px;height:5px}
.sec-head--c .orn{justify-content:center}
.hl{color:var(--gold-deep);position:relative;white-space:nowrap}
.hl svg{position:absolute;left:-2%;right:-2%;bottom:-.14em;width:104%;height:.36em;overflow:visible;pointer-events:none}
.hl svg path{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;opacity:.9}
.in .hl svg path,.loaded .hero .hl svg path,.loaded .sub-hero .hl svg path,.loaded .lead-hero .hl svg path{animation:draw 1.1s var(--ease) .55s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- Buttons ---------- */
.btn{position:relative;isolation:isolate;overflow:visible;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 26px;border-radius:999px;font:600 .98rem/1.2 var(--ff-body);letter-spacing:.005em;border:1.5px solid transparent;transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .28s,color .28s;text-align:center;white-space:normal}
.btn>span,.btn>svg{position:relative;z-index:1}.btn>span{min-width:0}
.btn svg{width:19px;height:19px;flex:0 0 19px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(0)}
.btn--gold{background:linear-gradient(135deg,#e6cd97 0%,#cfae72 42%,#b8955c 100%);color:#1a1409;box-shadow:0 14px 30px -12px rgba(138,106,58,.5),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.06)}
.btn--gold:hover{box-shadow:0 20px 40px -12px rgba(138,106,58,.6),0 0 0 6px rgba(193,160,104,.16),inset 0 1px 0 rgba(255,255,255,.55);filter:brightness(1.04)}
.btn--gold::before,.btn--wa::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 46%,rgba(255,255,255,.78) 50%,rgba(255,255,255,.28) 54%,transparent 62%);background-size:280% 100%;background-position:170% 0;animation:shine 4.6s cubic-bezier(.4,0,.2,1) infinite;pointer-events:none}
.btn--wa::before{opacity:.55;animation-delay:1.8s}
.btn--gold:hover::before{animation-duration:1.4s}
@keyframes shine{0%,58%{background-position:170% 0}100%{background-position:-80% 0}}
.btn--gold .glint{position:absolute;right:14px;top:8px;width:10px;height:10px;z-index:1;pointer-events:none;opacity:0;transform:scale(.4) rotate(0deg);animation:glint 4.6s var(--ease) infinite 1.9s}
.btn--gold .glint::before,.btn--gold .glint::after{content:"";position:absolute;left:50%;top:0;width:2px;height:100%;margin-left:-1px;border-radius:2px;background:#fff}
.btn--gold .glint::after{transform:rotate(90deg)}
@keyframes glint{0%,8%,100%{opacity:0;transform:scale(.3) rotate(0)}4%{opacity:.95;transform:scale(1) rotate(35deg)}}
.btn--ink{background:linear-gradient(160deg,var(--ink-soft),var(--ink));color:#fff;border-color:rgba(193,160,104,.35);box-shadow:0 14px 30px -14px rgba(26,23,20,.55)}
.btn--ink:hover{border-color:var(--gold-2);box-shadow:0 18px 36px -14px rgba(26,23,20,.6),0 0 0 6px rgba(193,160,104,.14)}
.btn--ghost{background:rgba(255,255,255,.7);color:var(--ink);border-color:var(--line-2);box-shadow:var(--sh-sm)}
.btn--ghost:hover{background:#fff;border-color:var(--gold)}
.btn--wa{background:var(--wa);color:#fff;border-color:var(--wa);box-shadow:0 14px 30px -14px rgba(22,131,68,.6)}
.btn--wa:hover{background:#136f3a}
.btn--sm{min-height:46px;padding:11px 20px;font-size:.92rem}
.btn--lg{min-height:60px;padding:17px 32px;font-size:1.04rem}
.btn--pulse::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:1.5px solid rgba(193,160,104,.75);animation:pulse 2.8s ease-out infinite;pointer-events:none}
@keyframes pulse{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.14);opacity:0}}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--gold-deep);position:relative}
.link svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.link:hover svg{transform:translateX(3px)}
.link{white-space:nowrap;min-height:44px;padding:8px 0}
.link::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.link:hover::after{transform:scaleX(1)}

/* ---------- Preloader ---------- */
.preloader{position:fixed;inset:0;z-index:999;display:grid;place-content:center;justify-items:center;gap:20px;background:var(--stage);transition:opacity .65s cubic-bezier(.85,0,.15,1),visibility .65s}
.preloader img{width:min(260px,62vw);opacity:0;transform:scale(1.04);animation:plIn .55s var(--ease) .1s forwards}
.pl-line{width:160px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-2),var(--gold-3));transform:scaleX(0);transform-origin:left;animation:plLine 1.25s cubic-bezier(.4,0,.2,1) .45s forwards}
.pl-tag{font:600 11px/1 var(--ff-body);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-2);opacity:0;animation:plIn .6s ease .85s forwards}
body.loaded .preloader{opacity:0;visibility:hidden;pointer-events:none}
@keyframes plIn{to{opacity:1;transform:none}}@keyframes plLine{to{transform:scaleX(1)}}

/* ---------- Topbar & Header ---------- */
.topbar{background:#0a0a0c;color:rgba(245,245,247,.78);font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar .wrap{min-height:var(--top-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar b{color:var(--gold-2);font-weight:600}
.topbar-links{display:flex;gap:18px;align-items:center}
.topbar-links a{display:inline-flex;align-items:center;gap:7px;min-height:32px;transition:color .2s}
.topbar-links a:hover{color:var(--gold-2)}
.topbar-links svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.site-header{position:sticky;top:0;z-index:120;background:rgba(12,12,14,.86);color:#fff;isolation:isolate;transition:box-shadow .4s var(--ease),background .4s}
.site-header.is-scrolled{background:rgba(10,10,12,.96);box-shadow:0 12px 34px -18px rgba(0,0,0,.55)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,181,127,.55),transparent)}
.nav-row{min-height:var(--nav-h);display:flex;align-items:center;gap:28px;transition:min-height .35s var(--ease)}
.is-scrolled .nav-row{min-height:calc(var(--nav-h) - 12px)}
.brand img{transition:width .35s var(--ease)}
.is-scrolled .brand img{width:150px}
.brand{display:flex;align-items:center;flex:0 0 auto;padding:6px 0}
.brand img{width:172px;height:auto}
.nav-wrap{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 13px;border-radius:999px;font:500 .95rem/1 var(--ff-body);color:rgba(255,255,255,.86);position:relative;transition:color .2s,background .2s;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:1.5px;border-radius:2px;background:var(--gold-2);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover{color:#fff}.nav a:hover::after{transform:scaleX(1)}
.nav a.is-cur{color:var(--gold-2)}
.nav-cta{margin-left:10px}
.burger{display:none;margin-left:auto;width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{width:22px;height:2px;border-radius:2px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.m-only{display:none}
@media(max-width:1060px){
  .nav-row{gap:16px}
  .burger{display:flex}
  .m-only{display:block}
  .nav-wrap{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;height:calc(100vh - var(--nav-h));height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain;background:#0a0a0c;background:var(--ink);padding:22px 22px 140px;margin:0;display:block;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;z-index:115;-webkit-overflow-scrolling:touch}
  body.nav-open .nav-wrap{opacity:1;visibility:visible;transform:none}
  body.nav-open{overflow:hidden;touch-action:none}
  body.nav-open .nav-wrap{touch-action:pan-y}
  body.nav-open::before{content:"";position:fixed;inset:0;background:var(--ink);z-index:110}
  .nav{flex-direction:column;align-items:stretch;gap:0}
  .nav a{width:100%;min-height:58px;padding:16px 8px;font-size:1.15rem;border-radius:0;border-bottom:1px solid rgba(255,255,255,.1);white-space:normal}
  .nav a::after{display:none}
  .nav-cta{margin:22px 0 0;width:100%;justify-content:center;min-height:56px}
  .nav-cta.btn{border-radius:999px}
  .m-contact{display:grid;gap:10px;margin-top:22px}
  .m-contact a{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-weight:600;color:#fff}
  .m-contact svg{width:20px;height:20px;stroke:var(--gold-2);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
}
@media(min-width:1061px){.m-contact{display:none}}
@media(max-width:640px){.topbar .tag{display:none}.topbar-links a span{display:none}.topbar-links a{min-width:44px;min-height:44px;justify-content:center}.topbar-links{gap:4px;margin-right:-8px}.topbar .wrap{gap:8px}.topbar>.wrap>span{font-size:.76rem}.brand img{width:148px}:root{--nav-h:72px}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fafafc 0%,var(--paper) 52%);padding:clamp(48px,7vw,104px) 0 clamp(56px,7vw,96px)}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-bg canvas{position:absolute;inset:0;width:100%;height:100%}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.blob-1{width:560px;height:560px;right:-140px;top:-160px;background:radial-gradient(circle,rgba(193,160,104,.16),transparent 70%);animation:drift 18s ease-in-out infinite alternate}
.blob-2{width:460px;height:460px;left:-160px;bottom:-200px;background:radial-gradient(circle,rgba(0,0,0,.05),transparent 70%);animation:drift 22s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(30px,40px) scale(1.08)}}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero-copy>*{min-width:0}
.hero h1{max-width:15ch;margin-top:6px}
.hero .lead{margin-top:28px;max-width:560px}
.hero .btn-row{margin-top:32px}
.hero .btn-row .btn--lg{min-height:56px;padding:15px 24px;font-size:1rem}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:30px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(179,146,95,.32);font:600 .82rem/1 var(--ff-body);color:var(--ink-3);box-shadow:0 6px 16px -10px rgba(58,44,20,.3)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(179,146,95,.2)}
.hero-visual{position:relative;min-width:0}
.hero-frame{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);aspect-ratio:4/5;max-width:440px;margin-left:auto;border:1px solid rgba(179,146,95,.35);outline:1px solid rgba(179,146,95,.35);outline-offset:8px}
.hero-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.96) contrast(1.03);transform:scale(1.02);transition:transform 1.4s var(--ease)}
.hero-frame:hover img{transform:scale(1.06)}
.hero-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(26,23,20,.55));pointer-events:none}
.hero-frame figcaption{position:absolute;left:18px;right:18px;bottom:16px;color:#fff;font:600 .9rem/1.35 var(--ff-body)}
.hero-frame figcaption small{display:block;font-weight:500;color:rgba(255,255,255,.75);font-size:.78rem;margin-top:2px}
.float{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;background:rgba(255,255,255,.92);border:1px solid rgba(179,146,95,.3);box-shadow:var(--sh);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:600 .84rem/1.25 var(--ff-body);color:var(--ink);animation:bob 6s ease-in-out infinite}
.float small{display:block;font-weight:500;color:var(--muted);font-size:.74rem}
.float .g{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--ink);color:var(--gold-2);font:700 1rem/1 var(--ff-display);flex:0 0 38px}
.float-1{left:-30px;top:28px;animation-delay:-2s}
.float-2{right:-22px;top:46%;animation-delay:-4s}
.float-3{left:6%;bottom:-22px}
.float-3 .g{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#1a1409}
.stars{display:inline-flex;gap:2px}
.stars svg{width:13px;height:13px;fill:#e0a71d}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero .fade{opacity:0;transform:translateY(18px)}
body.loaded .hero .fade{animation:fadeUp .9s var(--ease) forwards}
body.loaded .hero .fade:nth-child(1){animation-delay:.1s}body.loaded .hero .fade:nth-child(2){animation-delay:.2s}body.loaded .hero .fade:nth-child(3){animation-delay:.3s}body.loaded .hero .fade:nth-child(4){animation-delay:.4s}body.loaded .hero .fade:nth-child(5){animation-delay:.5s}
body.loaded .hero .hero-visual.fade{animation-delay:.35s}
@keyframes fadeUp{to{opacity:1;transform:none}}
.scroll-cue{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:26px;height:42px;border:1.5px solid rgba(138,106,58,.5);border-radius:14px;display:none}
.scroll-cue::before{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}100%{transform:translateY(14px);opacity:0}}
@media(min-width:1061px){.scroll-cue{display:block}}
@media(max-width:900px){
  .hero{padding-top:28px;min-height:0}
  .hero-grid{grid-template-columns:minmax(0,1fr);align-items:flex-start}
  .hero h1{max-width:none}
  .hero-frame{margin:26px auto 0;max-width:420px;aspect-ratio:4/4.4}
  .hero-frame figcaption{display:none}.hero-frame::after{display:none}
  .float-1{left:-6px;top:16px}.float-2{right:-6px}.float-3{left:8px;bottom:-14px}
}
@media(max-width:520px){.hero-frame{aspect-ratio:1/1;max-width:100%}.float{padding:10px 12px;font-size:.78rem}.float .g{width:34px;height:34px;flex-basis:34px}.float-2{right:-4px;top:40%}.float-3{bottom:-12px}.hero .btn-row .btn{width:100%}}

/* ---------- Marquee ---------- */
.marquee{background:var(--stage);color:var(--gold-2);overflow:hidden;padding:15px 0;border-top:1px solid rgba(212,181,127,.25);border-bottom:1px solid rgba(212,181,127,.25)}
.mq-track{display:flex;width:max-content;gap:0;animation:mq 46s linear infinite;will-change:transform}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track span{display:inline-flex;align-items:center;gap:20px;padding:0 22px;font:600 .82rem/1 var(--ff-body);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.mq-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.9}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Trust band ---------- */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.trust article{position:relative;padding:24px 22px 24px 26px;border-radius:var(--r-sm);background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm);min-width:0;overflow:hidden}
.trust article::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--gold-2),var(--gold))}
.trust .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--sand);color:var(--gold-deep);margin-bottom:14px}
.trust .ic svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.trust h3{font-size:1.08rem}
.trust p{margin-top:6px;font-size:.93rem;color:var(--muted)}
@media(max-width:980px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.trust{grid-template-columns:minmax(0,1fr)}}

/* ---------- Cards (Leistungen) ---------- */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

@media(max-width:980px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid-3{grid-template-columns:minmax(0,1fr)}}
.card{position:relative;isolation:isolate;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px 28px;box-shadow:var(--sh-sm);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;min-width:0;transform-style:preserve-3d}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:rgba(179,146,95,.45)}
.card::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-80%;width:45%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(212,181,127,.22),transparent);transition:left .9s var(--ease);pointer-events:none;z-index:1}
.card:hover::after{left:150%}
.card .num{position:absolute;right:22px;top:18px;font:600 .74rem/1 var(--ff-body);letter-spacing:.2em;color:var(--gold);opacity:.8}
.card .ic{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:var(--sand);border:1px solid var(--line);color:var(--gold-deep);margin-bottom:20px;transition:transform .4s var(--ease),background .3s}
.card:hover .ic{transform:translateY(-3px) rotate(-4deg);background:var(--gold-3)}
.card .ic svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:.97rem}
.card .bl{margin-top:16px;display:grid;gap:8px}
.card .bl li{position:relative;padding-left:24px;font-size:.94rem;color:var(--ink-3)}
.card .bl li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;border-radius:50%;background:var(--gold-3);box-shadow:inset 0 0 0 4px #fff,0 0 0 1px var(--gold-2)}
.card .link{margin-top:20px}
.card--line{border-bottom:3px solid transparent}
.card--line::before{content:"";position:absolute;left:0;bottom:-3px;height:3px;width:0;background:linear-gradient(90deg,var(--gold-2),var(--gold));transition:width .6s var(--ease);z-index:2}
.card:hover.card--line::before{width:100%}

/* ---------- Privat / Business split ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.panel{position:relative;overflow:hidden;border-radius:var(--r);padding:clamp(28px,4vw,46px);min-width:0}
.panel--sand{background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.panel--ink{background:radial-gradient(520px 360px at 108% -10%,#28282b,#0d0d10 62%),var(--stage);color:#f5f5f7}
.panel--ink h2{color:#fff}.panel--ink p{color:rgba(245,245,247,.75)}
.panel--ink .eyebrow{color:var(--gold-2)}
.panel--ink::before{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(212,181,127,.28),transparent 70%);pointer-events:none}
.panel h2{font-size:clamp(1.55rem,2.4vw,2.1rem)}
.panel .lead{font-size:1.02rem;margin-top:12px}
.panel .tick{margin:22px 0 26px;display:grid;gap:10px}
.panel .tick li{display:flex;gap:12px;align-items:flex-start;font-size:.97rem}
.panel .tick svg{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--sand);color:var(--gold-deep);padding:5px;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.panel--ink .tick svg{background:rgba(212,181,127,.18);color:var(--gold-2)}
@media(max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}

/* ---------- Repair (dark signature) ---------- */
.repair{position:relative;overflow:hidden}
.repair .glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 400px at var(--mx,70%) var(--my,30%),rgba(212,181,127,.16),transparent 60%);transition:background .2s}
.repair-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,70px);align-items:center;position:relative}
.repair .steps{display:grid;gap:14px;margin:26px 0 0;padding:0;list-style:none}
.repair .steps li{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:var(--r-sm);background:rgba(255,255,255,.05);border:1px solid rgba(212,181,127,.22);transition:transform .35s var(--ease),background .3s}
.repair .steps li:hover{transform:translateX(6px);background:rgba(255,255,255,.08)}
.repair .steps b{flex:0 0 34px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#1a1409;font:600 .95rem/1 var(--ff-display)}
.repair .steps span{color:rgba(245,245,247,.86);font-size:.98rem;padding-top:5px}
.repair .btn-row{margin-top:28px}
.devices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.devices div{position:relative;overflow:hidden;padding:24px 20px;border-radius:var(--r-sm);background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(212,181,127,.2);text-align:center;transition:transform .4s var(--ease),border-color .3s}
.devices div:hover{transform:translateY(-5px);border-color:rgba(212,181,127,.55)}
.devices svg{width:38px;height:38px;margin:0 auto 12px;stroke:var(--gold-2);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.devices span{display:block;font:600 .95rem/1.2 var(--ff-body);color:#fff}
.devices small{display:block;margin-top:4px;color:rgba(245,245,247,.6);font-size:.8rem}
@media(max-width:860px){.repair-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Process ---------- */
.process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative;counter-reset:step}
.process::before{content:"";position:absolute;left:8%;right:8%;top:34px;height:2px;background:linear-gradient(90deg,var(--gold-3),var(--gold),var(--gold-3));transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .2s}
.process.in::before{transform:scaleX(1)}
.step{position:relative;padding:0 8px;text-align:center;min-width:0}
.step .n{position:relative;z-index:1;width:68px;height:68px;margin:0 auto 18px;border-radius:22px;display:grid;place-items:center;background:var(--white);border:1.5px solid var(--gold);color:var(--gold-deep);font:600 1.5rem/1 var(--ff-display);box-shadow:var(--sh-sm);transition:transform .4s var(--ease),background .3s,color .3s}
.step:hover .n{transform:translateY(-4px) rotate(-4deg);background:var(--ink);color:var(--gold-2);border-color:var(--ink)}
.step h3{font-size:1.12rem}
.step p{margin-top:8px;color:var(--muted);font-size:.94rem}
@media(max-width:900px){.process{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}.process::before{display:none}}
@media(max-width:480px){.process{grid-template-columns:minmax(0,1fr)}.step{display:grid;grid-template-columns:60px minmax(0,1fr);gap:0 16px;text-align:left;align-items:start}.step .n{width:56px;height:56px;margin:0;border-radius:18px;font-size:1.2rem;grid-row:1/3}.step p{grid-column:2}}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{padding:26px 20px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);border:1px solid rgba(212,181,127,.22);text-align:center;min-width:0}
.stat .v{font:600 clamp(2rem,3.4vw,2.9rem)/1 var(--ff-display);color:var(--gold-2);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat .v small{font-size:.55em;color:var(--gold);margin-left:6px}
.stat .l{margin-top:8px;font:600 .8rem/1.3 var(--ff-body);letter-spacing:.12em;text-transform:uppercase;color:rgba(245,245,247,.7)}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Reviews ---------- */
.rev-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:34px}
.gbadge{display:inline-flex;align-items:center;gap:14px;padding:14px 20px;border-radius:18px;background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.gbadge .gl{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--ink);color:#fff;font:700 1.35rem/1 var(--ff-display)}
.gbadge .r{font:600 1.55rem/1 var(--ff-display);color:var(--ink)}
.gbadge .stars svg{width:16px;height:16px}
.gbadge small{display:block;color:var(--muted);font-size:.8rem;margin-top:3px}
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.review{position:relative;padding:28px 26px;border-radius:var(--r);background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:14px;min-width:0;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.review:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.review--q{background:radial-gradient(320px 240px at 106% -12%,#2a2a2e,#111114 62%),var(--stage);color:#f5f5f7;border-color:#000}
.review--q::before{content:"“";position:absolute;right:22px;top:6px;font:700 5rem/1 var(--ff-display);color:rgba(212,181,127,.25)}
.review .who{display:flex;align-items:center;gap:12px}
.review .av{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#1a1409;font:600 1.1rem/1 var(--ff-display)}
.review .who b{display:block;font-size:.98rem}
.review .who small{color:var(--muted);font-size:.8rem}
.review--q .who small{color:rgba(245,245,247,.6)}
.review q{quotes:none;font-size:1.06rem;line-height:1.55;font-weight:500}
.review .stars svg{width:15px;height:15px;transform:scale(.4);opacity:0;transition:transform .5s var(--ease),opacity .4s}
.in .review .stars svg,.review.in .stars svg{transform:none;opacity:1}
.review.in .stars svg:nth-child(2){transition-delay:.08s}.review.in .stars svg:nth-child(3){transition-delay:.16s}.review.in .stars svg:nth-child(4){transition-delay:.24s}.review.in .stars svg:nth-child(5){transition-delay:.32s}
.review h3{font-size:1.15rem}
.review p{color:var(--muted);font-size:.95rem}

.review .src{margin-top:auto;font-size:.8rem;color:rgba(245,245,247,.65);display:flex;align-items:center;gap:6px}
.review .src svg{width:14px;height:14px;stroke:var(--gold-2);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rev-note{margin-top:20px;font-size:.84rem;color:var(--muted);max-width:760px}
@media(max-width:980px){.reviews{grid-template-columns:minmax(0,1fr)}.rev-head{grid-template-columns:minmax(0,1fr)}}

/* ---------- Since 1998 ---------- */
.since{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:center}
.since-fig{position:relative;max-width:360px;margin-inline:auto}
.since-fig img{width:100%;border-radius:var(--r);box-shadow:var(--sh);border:1px solid rgba(179,146,95,.35);outline:1px solid rgba(179,146,95,.35);outline-offset:8px}
.since-fig figcaption{margin-top:20px;text-align:center;font-size:.8rem;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px}
.facts div{padding:18px 18px 18px 20px;border-radius:var(--r-sm);background:var(--white);border:1px solid var(--line);position:relative;min-width:0}
.facts div::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:3px;background:var(--gold)}
.facts b{display:block;font-family:var(--ff-display);font-weight:600;font-size:1.05rem;margin-bottom:4px}
.facts span{font-size:.92rem;color:var(--muted)}
@media(max-width:860px){.since{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.facts{grid-template-columns:minmax(0,1fr)}}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.team-fig{position:relative;max-width:480px;margin-inline:auto}
.team-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 45%;border-radius:var(--r);box-shadow:var(--sh);border:1px solid rgba(179,146,95,.35);outline:1px solid rgba(179,146,95,.35);outline-offset:8px;filter:saturate(.96) contrast(1.02)}

.pills{display:flex;flex-wrap:wrap;gap:8px 10px;margin-bottom:28px}
.pills li{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--white);border:1px solid var(--line);font:600 .85rem/1 var(--ff-body);color:var(--ink-3)}
.pills svg{width:14px;height:14px;stroke:var(--gold-deep);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:860px){.team{grid-template-columns:minmax(0,1fr)}.team-fig{order:-1}}

/* ---------- Social ---------- */
.social{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.social article{position:relative;overflow:hidden;border-radius:var(--r);background:var(--ink);color:#fff;min-height:300px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;transition:transform .45s var(--ease),box-shadow .45s var(--ease);min-width:0}
.social article:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.social article::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px 300px at 20% -10%,#2e2e32,#0d0d10 62%)}
.social article::after{content:"";position:absolute;right:-40px;bottom:-40px;width:180px;height:180px;border-radius:50%;border:1.5px solid rgba(212,181,127,.25);z-index:-1;transition:transform .8s var(--ease)}
.social article:hover::after{transform:scale(1.25)}
.social .tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font:600 .76rem/1 var(--ff-body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);margin-bottom:auto}
.social .tag svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.social h3{color:#fff;margin-top:22px}
.social p{margin-top:8px;color:rgba(245,245,247,.72);font-size:.94rem}
.social .play{position:absolute;right:22px;top:22px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;transition:background .3s,transform .4s var(--ease)}
.social article:hover .play{background:var(--gold);transform:scale(1.08)}
.social .play svg{width:16px;height:16px;fill:#fff;margin-left:3px}
.social article:hover .play svg{fill:#1a1409}
@media(max-width:900px){.social{grid-template-columns:minmax(0,1fr)}.social article{min-height:220px}}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin-inline:auto;display:grid;gap:12px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;transition:box-shadow .3s,border-color .3s}
.faq details[open]{box-shadow:var(--sh-sm);border-color:rgba(179,146,95,.45)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font:600 1.04rem/1.35 var(--ff-body);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:0 0 34px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--sand);color:var(--gold-deep);transition:transform .35s var(--ease),background .3s}
.faq summary i svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.faq details[open] summary i{transform:rotate(45deg);background:var(--ink);color:var(--gold-2)}
.faq .a{padding:0 22px 22px;color:var(--muted);font-size:.97rem}
.faq .a p+p{margin-top:8px}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px);align-items:start}
.ways{display:grid;gap:12px;margin-top:26px}
.way{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:18px;background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm);transition:transform .35s var(--ease),border-color .3s;min-width:0}
a.way:hover{transform:translateX(6px);border-color:var(--gold)}
.way .ic{flex:0 0 48px;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--sand);color:var(--gold-deep)}
.way .ic svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.way--wa .ic{background:rgba(22,131,68,.1);color:var(--wa)}
.way small{display:block;font:600 .74rem/1 var(--ff-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.way b{font-size:1.02rem;font-weight:600;word-break:break-word}
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3.5vw,40px);box-shadow:var(--sh)}
.form h3{margin-bottom:6px}
.form .hint{color:var(--muted);font-size:.92rem;margin-bottom:22px}
.f-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.f-grid .full{grid-column:1/-1}
.field{display:grid;gap:7px;min-width:0}
.field label{font:600 .84rem/1.2 var(--ff-body);color:var(--ink-3)}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:13px 16px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--paper);transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6259' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:#fff;box-shadow:0 0 0 4px rgba(179,146,95,.18)}
.field input.bad{border-color:var(--err);background:#fff6f4}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;color:var(--muted);margin-top:18px;cursor:pointer}
.check input{width:24px;height:24px;margin:0;flex:0 0 24px;accent-color:var(--gold-deep)}
.check a{display:inline-block;padding:4px 0;color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.form .btn{margin-top:22px;width:100%}
.f-msg{display:none;margin-top:16px;padding:14px 16px;border-radius:14px;background:rgba(47,125,79,.1);color:var(--ok);font-weight:600;font-size:.94rem}
.f-msg.show{display:block}.f-msg.error{background:rgba(184,64,47,.1);color:var(--err)}
.f-note{margin-top:14px;font-size:.8rem;color:var(--muted)}
@media(max-width:900px){.contact{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.f-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Location ---------- */
.loc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:stretch}
.map{position:relative;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;min-height:420px;background:linear-gradient(160deg,#e8e8ed,#f5f5f7);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.map-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.07) 1px,transparent 1px);background-size:38px 38px;opacity:.9}
.map-bg::before,.map-bg::after{content:"";position:absolute;background:rgba(0,0,0,.1);border-radius:999px}
.map-bg::before{left:-10%;right:-10%;top:52%;height:22px;transform:rotate(-8deg)}
.map-bg::after{top:-10%;bottom:-10%;left:38%;width:16px;transform:rotate(14deg)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-consent{position:relative;z-index:1;flex:0 0 auto;margin:auto;width:min(560px,calc(100% - 28px));display:grid;justify-items:center;text-align:center;padding:26px 22px 22px;gap:14px;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 18px 40px -24px rgba(0,0,0,.35)}
.map-consent .pin{width:58px;height:58px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--ink);display:grid;place-items:center;box-shadow:var(--sh);animation:bob 4s ease-in-out infinite}
.map-consent .pin i{width:18px;height:18px;border-radius:50%;background:var(--gold-2)}
.map-consent h3{font-size:1.15rem}
.map-consent p{font-size:.86rem;color:var(--muted);max-width:420px}
.map-consent .check{margin-top:2px;font-size:.82rem}
.map-alt{position:relative;z-index:2;margin-top:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;padding:12px 18px;background:rgba(255,255,255,.96);font-size:.82rem;color:var(--muted);text-align:center;border-top:1px solid var(--line)}.map-alt p{margin:0}
.hours{background:radial-gradient(460px 320px at 108% -10%,#28282b,#0d0d10 62%),var(--stage);color:#f5f5f7;border-radius:var(--r);padding:clamp(24px,3.5vw,38px);display:flex;flex-direction:column;position:relative;overflow:hidden}
.hours::before{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(212,181,127,.25),transparent 70%)}
.hours h2{font-size:1.7rem;color:#fff}
.hours address{font-style:normal;margin-top:12px;color:rgba(245,245,247,.8);line-height:1.55}
.o-status{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 14px;border-radius:999px;font:600 .8rem/1 var(--ff-body);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);align-self:flex-start}
.o-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold-2)}
.o-status.auf::before{background:#5ed08a;box-shadow:0 0 0 3px rgba(94,208,138,.2)}
.o-list{margin-top:22px;display:grid;gap:0;border-top:1px solid rgba(255,255,255,.1)}
.o-list div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.93rem}
.o-list div span:first-child{color:rgba(245,245,247,.75)}
.o-list div span:last-child{font-variant-numeric:tabular-nums;text-align:right}
.o-list div.heute{color:var(--gold-2);font-weight:700}
.o-list div.heute span:first-child{color:var(--gold-2)}
.hours .note{margin-top:14px;font-size:.82rem;color:rgba(245,245,247,.6)}
.hours .btn{margin-top:20px;align-self:flex-start}
@media(max-width:900px){.loc{grid-template-columns:minmax(0,1fr)}.map{min-height:360px}}

/* ---------- Newsletter ---------- */
.news{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;padding:clamp(28px,4vw,48px);border-radius:var(--r);background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.news::before{content:"";position:absolute;left:-60px;bottom:-90px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(212,181,127,.3),transparent 70%);pointer-events:none}
.news h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.news-form{display:flex;gap:10px;flex-wrap:wrap}
.news-form input{flex:1 1 220px;min-height:54px;padding:13px 18px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--paper);min-width:0}
.news-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(179,146,95,.18)}
.news-form .btn{flex:0 0 auto}
@media(max-width:820px){.news{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.news-form .btn{width:100%}}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;background:radial-gradient(900px 520px at 50% 118%,#242427,#000 64%),var(--stage);color:#fff;padding:clamp(64px,8vw,104px) 0;text-align:center}
.cta .glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 340px at var(--mx,50%) var(--my,40%),rgba(212,181,127,.22),transparent 65%)}
.cta-logo{width:min(300px,70vw);margin:0 auto 26px;opacity:.95}
.cta h2{color:#fff;max-width:18ch;margin-inline:auto}
.cta .lead{color:rgba(245,245,247,.75);margin:16px auto 0}
.cta .btn-row{justify-content:center;margin-top:32px}

/* ---------- Footer ---------- */
.footer{background:linear-gradient(180deg,#141416,#0a0a0c);color:rgba(245,245,247,.72);padding:clamp(48px,6vw,72px) 0 0;font-size:.93rem}
.f-grid4{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:36px}
.footer img{width:200px}
.footer p{margin-top:16px;max-width:360px;line-height:1.6}
.footer h2{color:#fff;font:600 .8rem/1 var(--ff-body);letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.footer ul{display:grid;gap:2px}
.footer ul a{display:inline-flex;align-items:center;min-height:40px}
.footer a{transition:color .2s}.footer a:hover{color:var(--gold-2)}
.footer address{font-style:normal;line-height:1.6}
.f-bottom{margin-top:36px;border-top:1px solid rgba(255,255,255,.08);padding:20px 0 calc(20px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.82rem;color:rgba(245,245,247,.5)}
.f-bottom b{color:var(--gold-2);font-weight:600}
@media(max-width:900px){.f-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.f-grid4{grid-template-columns:minmax(0,1fr);gap:28px}}

/* ---------- Floats: progress, back-to-top, WhatsApp, m-bar ---------- */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:130;background:linear-gradient(90deg,var(--gold-2),var(--gold));transform:scaleX(0);transform-origin:left;pointer-events:none}
.to-top{position:fixed;right:18px;bottom:18px;z-index:56;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--gold-2);display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,transform .3s var(--ease),visibility .3s;border:1px solid rgba(212,181,127,.35)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.wa-float{position:fixed;left:18px;bottom:18px;z-index:56;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px -8px rgba(22,131,68,.6);transition:transform .3s var(--ease)}
.wa-float:hover{transform:translateY(-3px) scale(1.04)}
.wa-float svg{width:28px;height:28px;fill:currentColor}
.wa-float::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(22,131,68,.55);animation:pulse 2.6s ease-out infinite}
.m-bar{display:none}
@media(max-width:640px){
  .m-bar{position:fixed;left:0;right:0;bottom:0;z-index:58;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(15,13,11,.96);border-top:1px solid rgba(212,181,127,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .m-bar a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;font:600 .82rem/1 var(--ff-body);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:999px;white-space:nowrap}
  .m-bar a svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:0 0 17px}
  .m-bar .wa{background:var(--wa);border-color:var(--wa)}
  .m-bar .gold{background:linear-gradient(135deg,#e6cd97,#cfae72 60%,#b8955c);color:#1a1409;border-color:transparent;position:relative;overflow:hidden;isolation:isolate}
  .m-bar .gold::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%);background-size:280% 100%;background-position:170% 0;animation:shine 4.6s cubic-bezier(.4,0,.2,1) infinite}
  .m-bar--two{grid-template-columns:1.5fr 1fr}
  .m-bar .home{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#1a1409;border-color:transparent;position:relative;isolation:isolate}
  .m-bar .home::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:1px solid rgba(212,181,127,.6);animation:pulse 3.2s ease-out infinite}
  body{padding-bottom:74px}
  .wa-float{display:none}
  .to-top{bottom:84px;right:12px;width:42px;height:42px}
}

/* ---------- Reveal & motion ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease) var(--rd,0s),transform .8s var(--ease) var(--rd,0s)}
.reveal.in{opacity:1;transform:none}
.reveal--l{transform:translateX(-24px)}.reveal--r{transform:translateX(24px)}
.reveal--s{transform:scale(.96)}
@media(max-height:500px){.reveal,.hero .fade{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.hero .fade{opacity:1!important;transform:none!important}
  .hl svg path{stroke-dashoffset:0}
  .mq-track{animation:none;transform:none}
  .preloader{display:none}
}

/* ---------- Subpage shell (Angebote, Landing, Rechtliches) ---------- */
.sub-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fafafc,var(--paper) 60%);padding:clamp(44px,6vw,80px) 0 clamp(36px,5vw,64px)}
.sub-hero .lead{margin-top:16px}
.sub-hero .home-btn{margin-top:26px}
.sub-hero .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 .8rem/1 var(--ff-body);color:var(--muted);margin-bottom:18px}
.sub-hero .crumb a{color:var(--gold-deep);display:inline-flex;align-items:center;min-height:36px}
.sub-hero .crumb svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.legal{max-width:820px;margin-inline:auto;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,4vw,48px);box-shadow:var(--sh-sm)}
.legal h2{font-size:1.28rem;margin:30px 0 10px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.06rem;margin:20px 0 8px}
.legal p,.legal li{color:var(--ink-3);font-size:.97rem}
.legal p+p{margin-top:10px}
.legal ul{padding-left:20px;list-style:disc;display:grid;gap:6px;margin:10px 0}
.legal .addr{padding:14px 18px;border-radius:14px;background:var(--sand);margin:12px 0;line-height:1.6}
.legal table{width:100%;border-collapse:collapse;margin:10px 0}
.legal th,.legal td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:.95rem}
.legal th{font-weight:600;width:34%;color:var(--muted);padding-right:16px}
.legal td{overflow-wrap:anywhere}
@media(max-width:520px){.legal th,.legal td{display:block;width:100%;padding:4px 0}.legal th{border-bottom:0;padding-top:10px}.legal tr{display:block}}
.legal a{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.legal .note{padding:14px 18px;border-radius:14px;background:var(--sand);border-left:3px solid var(--gold);margin-bottom:16px}
.legal .stand{margin-top:26px;font-size:.82rem;color:var(--muted)}

/* Angebote hub */
.hub{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.hub>a{grid-column:span 2}.hub>a:nth-child(4){grid-column:2/4}.hub>a:nth-child(5){grid-column:4/6}
.hub a{display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;padding:30px 28px 26px;border-radius:var(--r);background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;min-width:0}
.hub a:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:rgba(179,146,95,.5)}
.hub .brand-tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:7px 12px;border-radius:999px;font:600 .74rem/1 var(--ff-body);letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--gold-2)}
.hub .brand-tag.alt{background:var(--sand);color:var(--gold-ink)}
.hub h3{font-size:1.3rem}
.hub p{color:var(--muted);font-size:.95rem;flex:1}
.hub .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--gold-deep)}
.hub .go svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.hub a:hover .go svg{transform:translateX(4px)}
.hub .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--sand);color:var(--gold-deep)}
.hub .ic svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:980px){.hub{grid-template-columns:repeat(2,minmax(0,1fr))}.hub>a,.hub>a:nth-child(4){grid-column:auto}.hub>a:nth-child(5){grid-column:1/-1}}
@media(max-width:620px){.hub{grid-template-columns:minmax(0,1fr)}.hub>a:nth-child(5){grid-column:auto}}
.consult{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:20px;background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm);max-width:560px;margin-inline:auto}
.consult img{width:64px;height:64px;border-radius:20px;object-fit:cover;border:2px solid var(--gold-3);flex:0 0 64px}
.consult b{display:block;font-family:var(--ff-display);font-weight:600;font-size:1.1rem}
.consult span{color:var(--muted);font-size:.9rem}

/* ---------- Landing (Tarifoptimierung) ---------- */
.lead-wrap{width:min(720px,calc(100% - 32px));margin-inline:auto}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:26px 0 22px}
.stepper .bars{display:flex;gap:6px;flex:1 1 auto;max-width:260px}
.stepper .bars i{flex:1;height:5px;border-radius:5px;background:var(--sand-2);transition:background .4s}
.stepper[data-step="1"] .bars i:nth-child(1),.stepper[data-step="2"] .bars i:nth-child(-n/**/+2),.stepper[data-step="3"] .bars i{background:linear-gradient(90deg,var(--gold-2),var(--gold))}
.stepper .lbl{font:500 .84rem/1.3 var(--ff-body);color:var(--muted);white-space:nowrap}
.stepper .lbl b{color:var(--ink)}
.lead-hero{text-align:left;margin-bottom:22px}
.lead-hero h1{font-size:clamp(1.9rem,4.6vw,2.9rem);max-width:none}
.lead-hero .lead{font-size:1.02rem;margin-top:12px}
.lead-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3.5vw,36px);box-shadow:var(--sh);position:relative}
.lead-card .sh{font:600 .74rem/1 var(--ff-body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.lead-card .sh::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold-3),transparent)}
.lead-card .field{margin-bottom:14px}
.f-hint{display:none;font-size:.8rem;color:var(--err);margin-top:2px}
.f-hint.show{display:block}
.extra{margin:22px 0;padding:16px 18px;border-radius:var(--r-sm);background:var(--sand);border:1px dashed rgba(0,0,0,.16)}
.extra-head{font:600 .92rem/1.3 var(--ff-body);margin-bottom:10px}
.extra-head span{color:var(--muted);font-weight:500}
.extra-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 44px;gap:8px;margin-bottom:8px}
.extra-row input{min-height:46px;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;min-width:0}
.extra-row input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(179,146,95,.18)}
.extra-remove{width:44px;height:46px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;font-size:1.3rem;color:var(--muted)}
.extra-add{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 14px;border-radius:999px;background:#fff;border:1.5px solid var(--line-2);font:600 .88rem/1 var(--ff-body);color:var(--gold-deep);transition:border-color .2s,transform .3s var(--ease)}
.extra-add:hover{border-color:var(--gold);transform:translateY(-2px)}
.extra-add svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.consents{display:grid;gap:10px;margin:22px 0}
.consents .check{margin:0;padding:14px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--paper);align-items:flex-start;transition:border-color .2s,background .2s}
.consents .check:has(input:checked){border-color:var(--gold);background:#fff}
.consents .check.bad{border-color:var(--err);background:#fff6f4}
.consents .check input{position:absolute;opacity:0;width:0;height:0}
.consents .box{flex:0 0 24px;width:24px;height:24px;border-radius:8px;border:1.5px solid var(--line-2);background:#fff;display:grid;place-items:center;margin-top:1px;transition:background .2s,border-color .2s}
.consents .box svg{width:14px;height:14px;stroke:#1a1409;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s var(--ease)}
.consents input:checked+.box{background:linear-gradient(135deg,var(--gold-2),var(--gold));border-color:var(--gold)}
.consents input:checked+.box svg{opacity:1;transform:none}
.consents input:focus-visible+.box{outline:3px solid var(--gold);outline-offset:2px}
.consents .txt{font-size:.9rem;color:var(--muted);line-height:1.5}
.consents .txt b{display:block;color:var(--ink);font-weight:700;margin-bottom:2px}
@media(max-width:480px){.extra-row{grid-template-columns:minmax(0,1fr) 44px}.extra-row .ex-prov{grid-column:1/-1}}
.sig-wrap{margin:8px 0 22px}
.sig-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sig-head .lbl{font:600 .84rem/1.2 var(--ff-body);color:var(--ink-3)}
.sig-clear{font:600 .82rem/1 var(--ff-body);color:var(--gold-deep);min-height:40px;padding:6px 10px;border-radius:999px;border:1px solid var(--line-2);background:#fff}
.sig-pad{position:relative;height:170px;border-radius:var(--r-sm);border:1.5px dashed rgba(0,0,0,.2);background:linear-gradient(180deg,#fff,#fafafc);overflow:hidden;touch-action:none;transition:border-color .2s,box-shadow .2s}
.sig-pad.inked{border-style:solid;border-color:var(--gold);box-shadow:0 0 0 4px rgba(179,146,95,.14)}
.sig-pad.bad{border-color:var(--err)}
.sig-pad canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.sig-base{position:absolute;left:24px;right:24px;bottom:38px;height:1px;background:rgba(0,0,0,.25);pointer-events:none}
.sig-x{position:absolute;left:24px;bottom:44px;font-size:1rem;color:rgba(0,0,0,.3);pointer-events:none}
.sig-ph svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sig-ph{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;font:600 .84rem/1 var(--ff-body);color:var(--muted);pointer-events:none;transition:opacity .2s}
.sig-pad.inked .sig-ph{opacity:0}
.legal-line{margin-top:14px;font-size:.8rem;color:var(--muted);text-align:center}
.legal-line a{color:var(--gold-deep);font-weight:600;display:inline-block;padding:8px 2px}
.lead-panel{display:none}.lead-panel.active{display:block;animation:fadeUp .6s var(--ease)}

.done{text-align:center}
.done .seal{width:84px;height:84px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold-2),var(--gold));box-shadow:0 18px 40px -14px rgba(138,106,58,.6);animation:pop .7s var(--ease)}
.done .seal svg{width:38px;height:38px;stroke:#1a1409;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes pop{from{transform:scale(.5);opacity:0}}
.done h2{font-size:1.9rem}
.done>p{color:var(--muted);margin-top:10px;max-width:460px;margin-inline:auto}
.summary{margin:24px auto 0;max-width:460px;text-align:left;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.summary .row{display:flex;justify-content:space-between;gap:14px;padding:11px 16px;font-size:.92rem;border-bottom:1px solid var(--line)}
.summary .row:last-child{border-bottom:0}
.summary .k{color:var(--muted)}.summary .v{font-weight:600;text-align:right;word-break:break-word}.summary .v.ok{color:var(--ok)}
#leadStatus{margin:16px auto 0;max-width:460px;padding:12px 16px;border-radius:14px;font-size:.9rem;font-weight:600;background:var(--sand);color:var(--muted)}
#leadStatus.lead-err{background:rgba(184,64,47,.1);color:var(--err)}
#leadStatus a{color:inherit;text-decoration:underline}
.lead-foot{margin-top:28px;text-align:center;font-size:.84rem;color:var(--muted)}
.lead-foot b{color:var(--gold-deep)}
.lead-foot a{color:var(--gold-deep);font-weight:600;display:inline-block;padding:8px 2px}

@media(max-width:360px){.btn{padding-left:18px;padding-right:18px}.panel{padding:24px 20px}}

/* ============================================================
   v4.1 · Verfeinerung: mehr Abläufe, weichere Übergänge
   ============================================================ */
/* Preloader: Glanz läuft über das Logo */
.pl-logo{position:relative;overflow:hidden;border-radius:8px;display:block}
.pl-logo::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,248,230,.55) 50%,transparent 60%);background-size:260% 100%;background-position:170% 0;animation:shine 2.2s cubic-bezier(.4,0,.2,1) .7s infinite}
/* Hero: Wörter der Headline gleiten einzeln ein */
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(1.5deg);transform-origin:left bottom;animation:wordIn .95s var(--ease) var(--wd,0s) forwards;animation-play-state:paused;white-space:nowrap}
body.loaded .hero h1 .w{animation-play-state:running}
@keyframes wordIn{to{opacity:1;transform:none}}
body.loaded .hero .fade:nth-child(6){animation-delay:.6s}
/* Kinetische Zeile */
.kin{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em;margin-top:18px;font:500 1.02rem/1.4 var(--ff-body);color:var(--muted)}
.kin b{display:inline-block;position:relative;color:var(--gold-deep);font-weight:700;padding-bottom:2px}
.kin b::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold-2),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.kin b.is-in::after{transform:scaleX(1)}
.kin b.out{animation:kinOut .32s var(--ease-soft) forwards}
.kin b.is-in{animation:kinIn .55s var(--ease) both}
@keyframes kinOut{to{opacity:0;transform:translateY(-.5em)}}
@keyframes kinIn{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
/* Chips + Trust-Floats erscheinen gestaffelt */
.hero-chips .chip{opacity:0;transform:translateY(8px) scale(.96);animation:fadeUp .6s var(--ease) forwards;animation-play-state:paused}
body.loaded .hero-chips .chip{animation-play-state:running}
.hero-chips .chip:nth-child(1){animation-delay:.75s}.hero-chips .chip:nth-child(2){animation-delay:.85s}.hero-chips .chip:nth-child(3){animation-delay:.95s}.hero-chips .chip:nth-child(4){animation-delay:1.05s}
.float{animation:floatIn .8s var(--ease) both,bob 6s ease-in-out infinite}
.float-1{animation-delay:.9s,1.7s}.float-2{animation-delay:1.1s,1.9s}.float-3{animation-delay:1.3s,2.1s}
@keyframes floatIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.hero-frame img{transform:scale(1.14);transition:transform 1.8s var(--ease)}
body.loaded .hero-frame img{transform:scale(1.02)}
body.loaded .hero-frame:hover img{transform:scale(1.07)}
.hero-frame{outline-offset:0;transition:outline-offset 1.2s var(--ease) .6s}
body.loaded .hero-frame{outline-offset:8px}
/* Eyebrow-Linien und Ornament zeichnen sich */
.eyebrow::before,.eyebrow::after{transform:scaleX(0);transition:transform .8s var(--ease) .15s}
.eyebrow::before{transform-origin:right}.eyebrow::after{transform-origin:left}
.in .eyebrow::before,.in .eyebrow::after,.eyebrow.in::before,.eyebrow.in::after,body.loaded .hero .eyebrow::before,body.loaded .hero .eyebrow::after,body.loaded .sub-hero .eyebrow::before,body.loaded .sub-hero .eyebrow::after,body.loaded .lead-hero .eyebrow::before,body.loaded .lead-hero .eyebrow::after,body.loaded .form .eyebrow::before,body.loaded .form .eyebrow::after{transform:scaleX(1)}
.orn b{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .35s}
.orn i{transform:scale(0);transition:transform .5s var(--ease) .25s}
.orn i:last-child{transition-delay:1.1s}
.in .orn b{transform:scaleX(1)}.in .orn i{transform:scale(1)}
/* Überschriften: Wort für Wort */
.sec-head h2 .w{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity .75s var(--ease) var(--wd,0s),transform .75s var(--ease) var(--wd,0s)}
.sec-head.in h2 .w,.in .sec-head h2 .w{opacity:1;transform:none}
/* Icons zeichnen sich beim Einblenden */
.card .ic svg *,.trust .ic svg *,.way .ic svg *,.devices svg *,.hub .ic svg *{stroke-dasharray:110;stroke-dashoffset:110;transition:stroke-dashoffset 1.2s var(--ease-soft) .3s}
.card.in .ic svg *,.trust article.in .ic svg *,.way.in .ic svg *,.devices div.in svg *,.hub a.in .ic svg *{stroke-dashoffset:0}
/* Bilder im Rahmen: sanfter Zoom + Rahmen zeichnet sich */
.team-fig img,.since-fig img{transform:scale(1.1);transition:transform 1.6s var(--ease),outline-offset 1.2s var(--ease) .5s;outline-offset:0}
.team-fig.in img,.since-fig.in img{transform:none;outline-offset:8px}
/* Prozess: Ziffern ploppen nacheinander */
.step .n{opacity:0;transform:scale(.55) rotate(-8deg)}
.process.in .step .n{opacity:1;transform:none;transition:transform .7s var(--ease) var(--rd,0s),opacity .5s var(--rd,0s),background .3s,color .3s}
.process.in .step:hover .n{transform:translateY(-4px) rotate(-4deg)}
.process.in .step:nth-child(1) .n{--rd:.15s}.process.in .step:nth-child(2) .n{--rd:.4s}.process.in .step:nth-child(3) .n{--rd:.65s}.process.in .step:nth-child(4) .n{--rd:.9s}
/* Zahlen: Goldglanz nach dem Hochzählen */
.stat .v.done>span{background:linear-gradient(90deg,var(--gold-2) 0%,#fff6dd 50%,var(--gold-2) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmerText 2.2s linear .1s 1}
@keyframes shimmerText{from{background-position:120% 0}to{background-position:-120% 0}}
/* Dunkle Sektionen: Goldlinie zeichnet sich oben */
.section--dark,.cta,.footer{position:relative}
.section--dark::before,.cta::before,.footer::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-2),transparent);transform:scaleX(0);transition:transform 1.6s var(--ease) .1s;pointer-events:none}
.section--dark.in::before,.cta.in::before,.footer.in::before{transform:scaleX(1)}
/* FAQ: weiches Auf-/Zuklappen */
.faq .a{overflow:hidden;transition:height .45s var(--ease)}
.faq summary i svg{transition:transform .35s var(--ease)}
/* Back-to-top mit Fortschrittsring */
.to-top{overflow:visible}
.to-top .ring{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);transform:rotate(-90deg);pointer-events:none}
.to-top .ring circle{fill:none;stroke:var(--gold-2);stroke-width:2;stroke-dasharray:100.5;stroke-dashoffset:var(--ring,100.5);stroke-linecap:round;transition:stroke-dashoffset .2s linear}
/* WhatsApp-Float: leichtes Winken */
.wa-float svg{animation:wave 7s ease-in-out infinite}
@keyframes wave{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-12deg)}94%{transform:rotate(10deg)}97%{transform:rotate(-6deg)}}
/* Nav-CTA: kleiner Glint */
.nav-cta .glint{display:none}
/* Formulare: Felder gleiten ein, Fokus mit Goldlinie */
.form .field{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease) var(--rd,0s),transform .6s var(--ease) var(--rd,0s)}
.form.in .field{opacity:1;transform:none}
.form.in .field:nth-child(1){--rd:.1s}.form.in .field:nth-child(2){--rd:.18s}.form.in .field:nth-child(3){--rd:.26s}.form.in .field:nth-child(4){--rd:.34s}.form.in .field:nth-child(5){--rd:.42s}
.lead-card{animation:fadeUp .8s var(--ease) .15s both}
.lead-hero{animation:fadeUp .7s var(--ease) both}
/* Marquee: Punkte pulsieren sanft */
.mq-track span::after{animation:dot 2.6s ease-in-out infinite}
@keyframes dot{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.6);opacity:.5}}
/* Weiche Sektionsübergänge */
.section--sand{box-shadow:inset 0 1px 0 rgba(0,0,0,.04)}
@media(prefers-reduced-motion:reduce){
  .hero h1 .w,.hero-chips .chip,.float,.sec-head h2 .w,.step .n,.form .field{opacity:1!important;transform:none!important;animation:none!important}
  .eyebrow::before,.eyebrow::after,.orn b,.orn i,.section--dark::before,.cta::before,.footer::before{transform:none!important}
  .card .ic svg *,.trust .ic svg *,.way .ic svg *,.devices svg *,.hub .ic svg *{stroke-dashoffset:0!important}
  .hero-frame img,.team-fig img,.since-fig img{transform:none!important}
  .hero-frame,.team-fig img,.since-fig img{outline-offset:8px!important}
  .kin b{animation:none!important}
}

@media(max-width:640px){.hero .eyebrow::after{display:none}.hero .eyebrow{letter-spacing:.18em;font-size:.72rem}}

/* ---------- Google-Rezensionen: Slider (Snap + Pfeile + Punkte + Auto-Advance) ---------- */
.rev-slider{position:relative;margin:0 -4px}
.rev-track{display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:10px 4px 18px;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.rev-track::-webkit-scrollbar{display:none}
.rev-track:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:12px}
.rev-track .review{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start;cursor:pointer;color:var(--ink)}
.rev-track .review--q{color:#f5f5f7}
.rev-track .review q{font-size:1rem}
.review .who small{display:block;line-height:1.35}
.review .src em{font-style:normal;margin-left:2px;transition:transform .3s var(--ease)}
.review:hover .src em{transform:translate(2px,-2px)}
.review:not(.review--q) .src{color:var(--muted)}
.review:not(.review--q) .src svg{stroke:var(--gold-deep)}
.review--q .av{background:linear-gradient(135deg,var(--gold-2),var(--gold))}
.review:not(.review--q) .av{background:var(--ink);color:var(--gold-2)}
.rev-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:6px;padding:0 4px}
.rev-dots{display:flex;gap:7px;flex-wrap:wrap}
.rev-dots button{width:30px;height:44px;display:grid;place-items:center;border-radius:14px}
.rev-dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sand-2);transition:transform .3s var(--ease),background .3s}
.rev-dots button.on::before{background:var(--gold);transform:scale(1.35)}
.rev-hint{font:600 .76rem/1 var(--ff-body);letter-spacing:.08em;color:var(--muted)}
.rev-arrows{display:flex;gap:8px}
.rev-arrows button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:var(--sh-sm);transition:transform .3s var(--ease),background .25s,color .25s,border-color .25s}
.rev-arrows button:hover{background:var(--ink);color:var(--gold-2);border-color:var(--ink);transform:translateY(-2px)}
.rev-arrows svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:980px){.rev-track .review{flex-basis:calc((100% - 28px)/2)}}
@media(max-width:640px){.rev-track .review{flex-basis:86%;scroll-snap-align:center}.rev-track{padding-left:7%;padding-right:7%}.rev-hint{display:none}}
.float-1{cursor:pointer;transition:box-shadow .3s}
a.float-1:hover{box-shadow:var(--sh),0 0 0 4px rgba(193,160,104,.18)}

.review .src{font-size:.78rem;white-space:nowrap}
.review .src>span{white-space:nowrap}
@media(max-width:640px){.rev-dots{gap:0}.rev-dots button{width:32px;height:44px}.rev-nav{gap:10px}}

/* ============================================================
   v4.3 · iPhone-18-Banner, Online-Shop & Preise, Aktionen, Videos
   ============================================================ */
@media(max-width:1180px) and (min-width:1061px){.burger{display:flex}.m-only{display:block}.nav-wrap{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;height:calc(100dvh - var(--nav-h));overflow-y:auto;background:var(--ink);padding:22px 22px 140px;margin:0;display:block;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;z-index:115}body.nav-open .nav-wrap{opacity:1;visibility:visible;transform:none}body.nav-open{overflow:hidden}body.nav-open::before{content:"";position:fixed;inset:0;background:var(--ink);z-index:110}.nav{flex-direction:column;align-items:stretch;gap:0}.nav a{width:100%;min-height:58px;padding:16px 8px;font-size:1.15rem;border-radius:0;border-bottom:1px solid rgba(255,255,255,.1)}.nav a::after{display:none}.nav-cta{margin:22px 0 0;width:100%;justify-content:center;min-height:56px}.m-contact{display:grid;gap:10px;margin-top:22px}.m-contact a{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-weight:600;color:#fff}.m-contact svg{width:20px;height:20px;stroke:var(--gold-2);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}}
.fine{font-size:.78rem;color:var(--muted);line-height:1.5;margin-top:14px}
.section--dark .fine{color:rgba(245,245,247,.66)}
/* iPhone-18 Launch-Banner */

.new-pill{position:relative;display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:linear-gradient(135deg,#e6cd97,#cfae72);color:#1a1409;font:700 .68rem/1 var(--ff-body);letter-spacing:.14em;margin-right:4px}
.new-pill::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:1.5px solid rgba(220,192,140,.7);animation:pulse 2.6s ease-out infinite;pointer-events:none}

.phone{position:relative;width:216px;height:432px;border-radius:44px;background:linear-gradient(160deg,#3a3a3e,#111114);padding:10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(220,192,140,.35);animation:phoneFloat 7s ease-in-out infinite;z-index:2}

@keyframes phoneFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(-2deg)}}

@media(max-width:900px){.phone{width:190px;height:380px}}
@media(max-width:520px){.phone{width:166px;height:332px;border-radius:38px}}
/* Online-Shop: Preise + Kategorien */
.shop-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:start}
.shop-prices h3,.shop-cats h3{font-size:1.5rem;margin-bottom:18px}
.prices{display:grid;gap:10px}
.price-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border-radius:var(--r-sm);background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm);color:var(--ink);transition:transform .35s var(--ease),border-color .3s;min-width:0}
.price-row:hover{transform:translateX(6px);border-color:var(--gold)}
.pr-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--sand);color:var(--gold-deep)}
.pr-ic svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pr-t b{display:block;font:600 1rem/1.25 var(--ff-body)}
.pr-t small{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}
.pr-p{font:600 1.2rem/1 var(--ff-display);color:var(--gold-deep);white-space:nowrap;font-variant-numeric:tabular-nums}
.cats{display:flex;flex-wrap:wrap;gap:8px}
.cat{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:10px 15px;border-radius:999px;background:var(--white);border:1px solid var(--line);font:600 .85rem/1.2 var(--ff-body);color:var(--ink-3);transition:transform .3s var(--ease),border-color .25s,background .25s,color .25s}
.cat svg{width:13px;height:13px;stroke:var(--gold);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.cat:hover{transform:translateY(-2px);border-color:var(--gold);background:var(--ink);color:#fff}
.cat:hover svg{stroke:var(--gold-2);transform:translate(2px,-2px)}
@media(max-width:900px){.shop-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.price-row{grid-template-columns:38px minmax(0,1fr)}.pr-p{grid-column:2;justify-self:start}}
/* Aktionen */

/* Videos */
.vgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.vcard{min-width:0}
.vframe{position:relative;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:var(--ink);box-shadow:var(--sh-sm);border:1px solid rgba(179,146,95,.3);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.vcard:hover .vframe{transform:translateY(-6px);box-shadow:var(--sh)}
.vframe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.vframe::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(26,23,20,.55));pointer-events:none;transition:opacity .3s}
.vframe.playing::after,.vframe.playing .vplay,.vframe.playing .vdur{opacity:0;pointer-events:none}
.vplay{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.92);color:#1a1409;display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(0,0,0,.5);transition:transform .35s var(--ease),background .25s,opacity .3s;z-index:2}
.vplay::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);animation:pulse 2.6s ease-out infinite}
.vplay svg{width:24px;height:24px;fill:currentColor;margin-left:3px}
.vcard:hover .vplay{transform:scale(1.08);background:var(--gold-2)}
.vdur{position:absolute;right:12px;bottom:12px;padding:5px 9px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:600 .72rem/1 var(--ff-body);letter-spacing:.06em;z-index:2}
.vcard h3{font-size:1.06rem;margin-top:14px}
.vcard p{color:var(--muted);font-size:.9rem;margin-top:6px}
@media(max-width:1000px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.vgrid{grid-template-columns:minmax(0,1fr);max-width:360px;margin-inline:auto}}
@media(prefers-reduced-motion:reduce){.phone,.new-pill,.vplay::before{animation:none!important}}

/* ============================================================
   v4.4 · Launch-Banner iPhone 18 (oben, unter dem Header)
   ============================================================ */
.lb{position:relative;overflow:hidden;background:#07070a;color:#f5f2ec;isolation:isolate}
.lb-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:radial-gradient(980px 620px at 69% 48%,rgba(214,178,113,.15),transparent 58%),#08080b}
/* langsam wandernder Lichtschein - reine Transform-Animation, kostet nichts */
.lb-bg::after{content:"";position:absolute;top:-40%;left:-30%;width:46%;height:180%;transform:rotate(14deg) translateX(-30%);background:linear-gradient(90deg,transparent,rgba(233,212,168,.06) 45%,rgba(233,212,168,.11) 52%,transparent);filter:blur(34px);animation:lbSweep 13s cubic-bezier(.45,0,.25,1) infinite;pointer-events:none}
@keyframes lbSweep{0%{transform:rotate(14deg) translateX(-40%);opacity:0}12%{opacity:1}55%{opacity:1}72%,100%{transform:rotate(14deg) translateX(320%);opacity:0}}
.lb-bg::after{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.lb-bg::after{animation:none;opacity:.5;transform:rotate(14deg) translateX(120%)}}
.lb::before,.lb::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 4%,var(--gold-2) 30%,var(--gold-2) 70%,transparent 96%);opacity:.75;z-index:2}
.lb::before{top:0}.lb::after{bottom:0}
.lb-dust{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.3;background-image:radial-gradient(circle,rgba(230,205,151,.8) 0 1.2px,transparent 2px),radial-gradient(circle,rgba(230,205,151,.55) 0 1px,transparent 1.8px),radial-gradient(circle,rgba(230,205,151,.35) 0 1.6px,transparent 2.6px);background-size:260px 220px,340px 300px,520px 460px;background-position:20px 40px,140px 90px,60px 200px;animation:dust 38s linear infinite}
@keyframes dust{to{background-position:280px -180px,480px -210px,580px -260px}}
.lb-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);align-items:center;min-height:460px;gap:24px}
.lb-copy{padding:52px 0 56px;max-width:600px;position:relative;z-index:3}
.lb-eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;font:600 .76rem/1 var(--ff-body);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2)}
.lb-eyebrow .new-pill{margin:0}
.lb-eyebrow::after{content:"";width:34px;height:1.5px;background:linear-gradient(90deg,var(--gold-2),transparent)}
.lb .lb-h{font-size:clamp(2rem,4.4vw,3.6rem);color:#fff;line-height:1.04;letter-spacing:-.015em;max-width:12ch}
.lb .lb-h .g{background:linear-gradient(92deg,#f1dfb6,#dcc08c 40%,#c1a068 70%,#f1dfb6);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmerText 6s linear infinite}
.lb-sub{margin-top:18px;font-size:clamp(1rem,1.35vw,1.15rem);color:rgba(245,245,247,.8);max-width:52ch;line-height:1.55}
.lb-facts{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:20px}
.lb-facts li{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:7px 13px;border-radius:999px;border:1px solid rgba(220,192,140,.35);background:rgba(255,255,255,.04);font:600 .8rem/1 var(--ff-body);color:rgba(245,245,247,.9)}
.lb-facts li b{color:var(--gold-2);font-weight:700}
.lb-facts svg{width:14px;height:14px;stroke:var(--gold-2);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.lb .btn-row{margin-top:28px;gap:12px}
.lb .btn--ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.22)}
.lb .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:var(--gold-2)}
.lb .fine{margin-top:16px;color:rgba(245,245,247,.66);max-width:52ch}
/* Bild rechts: Box im nativen Seitenverhältnis, weich in den Hintergrund geblendet */
.lb-shot{position:absolute;right:0;top:0;bottom:0;width:min(58%,780px);z-index:1;pointer-events:none;overflow:hidden}
.lb-box{position:absolute;right:-2%;top:50%;height:108%;aspect-ratio:1000/798;transform:translateY(-50%);-webkit-mask-image:linear-gradient(100deg,transparent 4%,rgba(0,0,0,.35) 22%,#000 52%);mask-image:linear-gradient(100deg,transparent 4%,rgba(0,0,0,.35) 22%,#000 52%)}
.lb-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1.2s var(--ease) .2s,transform 2.4s var(--ease) .2s}
body.loaded .lb-box img{opacity:1;transform:none}
.lb-shot::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(7,7,10,.7) 0%,transparent 22%,transparent 76%,rgba(7,7,10,.92) 100%)}
.lb-shot::after{content:"";position:absolute;right:14%;top:50%;width:48%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,rgba(220,192,140,.26),transparent 62%);filter:blur(12px);z-index:0;animation:lbGlow 5.5s ease-in-out infinite}
@keyframes lbGlow{0%,100%{opacity:.75;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.08)}}
/* „18“ leuchtet auf dem Display */

.nav-cta{white-space:nowrap}
@media(max-width:1500px){.nav a{padding:8px 10px;font-size:.92rem}.nav{gap:2px}}
@media(max-width:1100px){.lb-grid{grid-template-columns:minmax(0,1fr) minmax(0,.5fr)}.lb-shot{width:52%}.lb-copy{max-width:58%}.lb .lb-h{max-width:14ch}.lb-shot::before{background:linear-gradient(180deg,rgba(7,7,10,.7) 0%,transparent 22%,transparent 76%,rgba(7,7,10,.92) 100%)}.lb-box{height:auto;width:108%;right:-4%;top:50%;transform:translateY(-50%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%)}.lb-copy{max-width:54%;padding:40px 0 44px}.lb-grid{min-height:420px}.lb-eb-x{display:none}}
@media(max-width:900px){
  .lb-grid{grid-template-columns:minmax(0,1fr);min-height:0;gap:0}
  .lb-shot{position:relative;right:auto;height:340px;order:-1;margin:0 -20px;width:calc(100% + 40px)}
  .lb-box{right:50%;top:50%;height:118%;aspect-ratio:1000/798;transform:translate(36%,-49%)}
  /* Mobil: Buttons vor die Vorteilsliste, damit sie ohne Scrollen sichtbar sind.
     Nur optische Reihenfolge; in der Liste liegt kein bedienbares Element,
     die Tabulator-Reihenfolge bleibt dadurch unveraendert. */
  .lb-copy{display:flex;flex-direction:column}
  .lb-copy>.lb-eyebrow{order:1}.lb-copy>.lb-h{order:2}.lb-copy>.lb-sub{order:3}
  .lb-copy>.btn-row{order:4;margin-top:18px;margin-bottom:22px}
  .lb-copy>.lb-facts{order:5}.lb-copy>.kredit-warn{order:6}.lb-copy>.fine{order:7}
  .lb-shot::before{background:linear-gradient(90deg,#07070a 0%,transparent 18%,transparent 82%,#07070a 100%),linear-gradient(180deg,rgba(7,7,10,.45) 0%,transparent 26%,transparent 56%,#07070a 100%)}
  .lb .lb-h{font-size:2.15rem}.lb .lb-h .nw{white-space:nowrap}
  .lb-shot::after{right:50%;transform:translate(50%,-50%);width:76%}
  
  .lb-eb-x{display:none}
  .lb-copy{padding:6px 0 40px;max-width:none}
  .lb .lb-h{max-width:none}
  .lb .btn-row .btn{width:100%}
}
@media(max-width:480px){.lb-shot{height:300px}}
@media(prefers-reduced-motion:reduce){.lb-dust,.lb-shot::after,.lb .lb-h .g{animation:none!important}.lb-box img{opacity:1!important;transform:none!important}}
/* Launch-Sektion (Details) bekommt das echte Bild statt CSS-Mockup */

/* Übergang Banner → Hero: weicher Schatten statt harter Kante */
.lb{z-index:5;box-shadow:0 34px 70px -34px rgba(0,0,0,.55)}
.lb + .hero{padding-top:clamp(64px,8vw,116px)}
.lb + .hero::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(180deg,rgba(0,0,0,.10),transparent);pointer-events:none;z-index:0}
@media(max-width:900px){.lb + .hero{padding-top:36px}}

@media(max-width:400px){.lb-eyebrow{font-size:.68rem;letter-spacing:.18em;gap:9px}.lb-eyebrow::after{display:none}}

/* ============================================================
   v4.5 · iPhone-Konfigurator + Anfrage-Maske
   ============================================================ */
.cfg{margin:26px 0 24px;padding:22px;border-radius:var(--r);background:rgba(255,255,255,.05);border:1px solid rgba(220,192,140,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

.cfg .btn{margin-top:20px;width:100%}

@media(max-width:520px){.cfg{padding:18px 16px}}

/* Overlay */

.om-note{display:flex;gap:12px;padding:13px 15px;border-radius:14px;background:var(--sand);border-left:3px solid var(--gold);font-size:.85rem;color:var(--ink-3);line-height:1.5;margin-bottom:20px}
.om-note svg{flex:0 0 18px;width:18px;height:18px;stroke:var(--gold-deep);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}

/* Fortschritt + Absendebutton erscheint erst bei vollständigen Angaben */
.om-gate{margin-top:22px}
.om-miss{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:999px;background:var(--sand-2);color:var(--gold-ink);font:600 .88rem/1.2 var(--ff-body);transition:opacity .3s,transform .3s var(--ease)}
.om-miss i{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:.8rem;color:var(--gold-deep);font-variant-numeric:tabular-nums}
.om-send{display:none;width:100%;animation:sendIn .5s var(--ease)}
@keyframes sendIn{from{opacity:0;transform:translateY(10px) scale(.97)}}
.om-gate.ready .om-miss{display:none}
.om-gate.ready .om-send{display:inline-flex}
.om-legal{margin-top:12px;font-size:.76rem;color:var(--muted);text-align:center}
.om-legal a{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* Danke-Ansicht */

.om-steps{margin:22px auto 0;max-width:420px;text-align:left;display:grid;gap:10px}
.om-steps li{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--ink-3)}
.om-steps b{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--sand);color:var(--gold-deep);display:grid;place-items:center;font:600 .78rem/1 var(--ff-body)}

@media(prefers-reduced-motion:reduce){.om-send{transition:none!important;animation:none!important}}

/* ============================================================
   v4.6 · Rezensionen: Verifikations-Optik nach Google-Vorbild
   ============================================================ */
.rev-trust{display:flex;align-items:center;gap:10px;justify-content:center;margin:-8px auto 30px;padding:11px 18px;border-radius:999px;background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm);font:600 .85rem/1.3 var(--ff-body);color:var(--ink-3);width:fit-content;max-width:100%;text-align:center}

.rev-trust span{min-width:0}
/* Verifiziert-Siegel */

/* Bewertungs-Kopf im Google-Look */
.gbadge{display:flex;align-items:center;gap:16px;padding:16px 22px;border-radius:18px;background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.gbadge:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.gbadge .gl{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--sand);color:var(--ink);font:700 1.3rem/1 var(--ff-display);flex:0 0 46px;position:relative}
/* Verifizierungs-Haekchen am Google-Logo entfernt: es suggerierte geprueft Bewertungen,
   waehrend direkt darunter steht, dass keine Echtheitspruefung stattfindet (Anhang Nr. 23b UWG). */
.gbadge .r{font:600 1.7rem/1 var(--ff-display);color:var(--ink)}
.gbadge small{display:block;color:var(--muted);font-size:.8rem;margin-top:4px}
.gbadge small b{color:var(--ink-3)}
/* Sterne in Google-Gelb */
.stars svg{fill:#fbbc04}
.review--q .stars svg{fill:#fdd663}
/* Rezensionskarte im Google-Aufbau */
.review{padding:24px 24px 22px}
.review .who{gap:13px;align-items:flex-start}
.review .av{position:relative;flex:0 0 42px;width:42px;height:42px;border-radius:50%;font-size:1.05rem}

.review .who b{font-size:.96rem;line-height:1.25}
.review .who small{font-size:.78rem;color:var(--muted);margin-top:2px}
.review--q .who small{color:rgba(245,245,247,.6)}
.review .meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:-4px}
.review .meta .when{font-size:.78rem;color:var(--muted)}
.review--q .meta .when{color:rgba(245,245,247,.6)}
.review q{font-size:.98rem;line-height:1.6}
.review .src{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;color:var(--muted);margin-top:auto;padding-top:14px;border-top:1px solid var(--line);width:100%}
.review--q .src{border-top-color:rgba(255,255,255,.12);color:rgba(245,245,247,.62)}
.review .src svg{width:12px;height:12px}
.review .src em{margin-left:auto;font-style:normal;color:var(--gold-deep);font-weight:600}
.review--q .src em{color:var(--gold-2)}
@media(max-width:640px){.rev-trust{font-size:.8rem;padding:10px 14px;gap:8px}}

/* ============================================================
   v4.7 · iPhone-18-Sektion im Apple-Stil (zentriert, schwarz)
   ============================================================ */
.ap{background:radial-gradient(1000px 620px at 50% 30%,rgba(214,178,113,.14),transparent 62%),radial-gradient(700px 460px at 50% 108%,rgba(193,160,104,.10),transparent 64%),#07070a;color:#f5f2ec;text-align:center;padding:clamp(70px,9vw,120px) 0 clamp(60px,7vw,100px);position:relative;overflow:hidden}
.ap::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55}
.ap .wrap{position:relative;z-index:2}
.ap-eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;font:600 .8rem/1 var(--ff-body);letter-spacing:.02em;color:var(--gold-2)}
.ap h2{font-size:clamp(2.1rem,5vw,3.9rem);line-height:1.02;letter-spacing:-.03em;color:#f5f2ec;font-weight:600;max-width:20ch;margin-inline:auto}
.ap h2 .g{background:linear-gradient(96deg,#f3e4c2,#dcc08c 38%,#bf9e66 68%,#f3e4c2);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmerText 7s linear infinite}
.ap-sub{margin-top:14px;font-size:clamp(1.15rem,2.1vw,1.7rem);color:#f5f2ec;font-weight:500;letter-spacing:-.01em}
.ap-claim{margin-top:10px;font-size:clamp(.98rem,1.4vw,1.12rem);color:#a8a29a;max-width:46ch;margin-inline:auto;line-height:1.5}
/* Bühne mit Gerät */
.ap-stage{position:relative;margin:clamp(10px,2vw,22px) auto clamp(4px,1.2vw,12px);width:min(258px,56vw)}
.ap-stage img{width:100%;height:auto;display:block;-webkit-mask-image:radial-gradient(closest-side ellipse at 50% 50%,#000 58%,rgba(0,0,0,.55) 80%,transparent 100%);mask-image:radial-gradient(closest-side ellipse at 50% 50%,#000 58%,rgba(0,0,0,.55) 80%,transparent 100%);opacity:0;transform:scale(.94);transition:opacity 1.1s var(--ease) .1s,transform 1.6s var(--ease) .1s}
.ap-stage.in img{opacity:1;transform:none}
.ap-stage::before{content:"";position:absolute;left:50%;top:46%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(230,205,151,.3),transparent 58%);filter:blur(26px);z-index:-1;animation:apGlow 6s ease-in-out infinite}
@keyframes apGlow{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}
/* Preis */
.ap-price{margin-top:clamp(10px,2vw,20px)}
.ap-price .from{display:block;font:600 .8rem/1 var(--ff-body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);margin-bottom:10px}
.ap-price .v{font:600 clamp(2.6rem,5.6vw,4.4rem)/1 var(--ff-display);color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums;transition:opacity .22s}

.ap-price .per{font-size:.42em;color:#a8a29a;font-weight:500;margin-left:6px;letter-spacing:0}
.ap-price .terms{margin-top:12px;font-size:.95rem;color:#a8a29a}
.ap-price .terms b{color:var(--gold-2);font-weight:600}
/* Auswahl */
.ap-pick{margin-top:clamp(26px,4vw,40px);display:grid;gap:14px;justify-items:center}
.ap-pick .row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:620px}
.ap-pick button{min-height:46px;padding:11px 20px;border-radius:999px;border:1px solid rgba(220,192,140,.3);background:rgba(255,255,255,.03);color:#f5f2ec;font:500 .95rem/1 var(--ff-body);letter-spacing:-.01em;transition:border-color .25s,background .25s,color .25s,transform .3s var(--ease);white-space:nowrap}
.ap-pick button:hover{border-color:var(--gold-2);background:rgba(220,192,140,.1);transform:translateY(-2px)}
.ap-pick button[aria-pressed="true"]{background:linear-gradient(135deg,#e6cd97,#c1a068);border-color:#e6cd97;color:#1a1409;font-weight:600;box-shadow:0 10px 26px -12px rgba(193,160,104,.7)}
.ap-pick .lbl{font:600 .72rem/1 var(--ff-body);letter-spacing:.2em;text-transform:uppercase;color:#8d8880;margin-bottom:2px}
/* CTAs */
.ap-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(26px,4vw,38px)}
.ap-link{display:inline-flex;align-items:center;gap:7px;min-height:52px;padding:14px 8px;font:500 1.02rem/1 var(--ff-body);color:var(--gold-2);transition:color .25s}
.ap-link:hover{color:#fff}
.ap-link svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.ap-link:hover svg{transform:translate(3px,-3px)}
/* Vorteile */
.ap-feats{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;margin-top:clamp(28px,4vw,44px);padding-top:clamp(24px,3vw,34px);border-top:1px solid rgba(220,192,140,.2)}
.ap-feats li{display:inline-flex;align-items:center;gap:9px;font:500 .93rem/1.3 var(--ff-body);color:#e9e5dd}
.ap-feats b{color:var(--gold-2);font-weight:600}
.ap-feats svg{width:15px;height:15px;stroke:var(--gold-2);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:0 0 15px}
.ap .fine{color:#7d7972;max-width:58ch;margin-inline:auto;text-align:center}
@media(max-width:640px){
  .ap-stage{width:min(250px,70vw)}
  .ap-pick button{flex:1 1 calc(50% - 8px);padding:11px 8px;font-size:.9rem}
  .ap-pick .row{width:100%}
  .ap-cta .btn{width:100%}
  .ap-feats{gap:12px;flex-direction:column;align-items:center}
}
@media(prefers-reduced-motion:reduce){.ap h2 .g,.ap-stage::before{animation:none!important}.ap-stage img{opacity:1!important;transform:none!important}}

/* ==================================================================
   v4.8 · Bestellstrecke: Landingpage iphone-18.html + Danke-Seite
   ================================================================== */
.ap--page{padding-top:clamp(52px,7vw,92px)}
.ap h1{font:600 clamp(2.6rem,9vw,5.6rem)/1 var(--ff-display);letter-spacing:-.045em;margin:0}
.ap h1 .g{background:linear-gradient(180deg,#f7ecd2 0%,#dcc08c 46%,#b8955c 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ap-intro{max-width:46ch;margin:16px auto 0;color:#a8a29a;font-size:1.02rem;line-height:1.6}
.ap--page .ap-stage{width:min(278px,60vw)}

/* Zubehoer-Band */
.prem{background:var(--sand);border-block:1px solid var(--line);padding:clamp(34px,4.5vw,56px) 0}
.prem-in{display:flex;align-items:center;gap:clamp(18px,3vw,34px)}
.prem-shot{flex:0 0 auto;width:clamp(150px,20vw,230px);aspect-ratio:1;margin:0;border-radius:28px;
  overflow:hidden;background:#000;box-shadow:0 26px 60px -26px rgba(0,0,0,.5)}
.prem-shot img{width:100%;height:100%;object-fit:cover;display:block}
.prem-fine{margin-top:10px;font-size:.78rem;color:var(--muted)}
.prem-kick{font:600 .78rem/1 var(--ff-body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}
.prem-txt h2{font-size:clamp(1.4rem,2.6vw,2.05rem)}
.prem-txt p{margin-top:10px;color:var(--ink-3);max-width:62ch}
@media(max-width:700px){.prem-in{flex-direction:column;align-items:flex-start;text-align:left}.prem-shot{width:150px}}

/* Ablauf */
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.flow li{position:relative;padding:26px 22px 24px;border-radius:var(--r);background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--sh);min-width:0}
.flow b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;margin-bottom:14px;
  background:var(--ink);color:var(--gold-2);font:600 .95rem/1 var(--ff-display)}
.flow h3{font-size:1.05rem;margin-bottom:8px}
.flow p{font-size:.92rem;color:var(--muted);line-height:1.55}
@media(max-width:980px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.flow{grid-template-columns:minmax(0,1fr)}}

/* Bildergalerie */

/* Bestellformular auf der Seite */
.bestell{background:var(--sand)}
.bf-card{max-width:820px;margin-inline:auto;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);padding:clamp(22px,3.4vw,40px)}
.fs{border:0;padding:0;margin:0 0 26px}
.fs legend{padding:0;margin-bottom:16px;font:600 .8rem/1 var(--ff-body);letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep)}
.fs + .fs{padding-top:26px;border-top:1px solid var(--line)}
.lbl{font:600 .88rem/1.3 var(--ff-body);color:var(--ink-3)}
.radio-row{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.radio{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:10px 20px;border-radius:999px;
  border:1.5px solid var(--line-2);background:var(--paper);cursor:pointer;font-weight:600;font-size:.94rem;
  transition:border-color .2s,background .2s,color .2s}
.radio input{-webkit-appearance:radio!important;appearance:radio!important;width:24px!important;height:24px!important;min-height:0!important;flex:0 0 24px;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;accent-color:var(--gold-deep)}
.radio:has(input:checked){border-color:var(--gold);background:var(--gold-soft);color:var(--gold-ink)}
.pick-echo{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:8px;padding:14px 16px;
  border-radius:14px;background:var(--sand);border-left:3px solid var(--gold)}
.pick-echo > b{font:600 1.05rem/1.2 var(--ff-display);color:var(--ink)}
.pick-echo span{font-size:.88rem;color:var(--ink-3)}
.pick-echo a{margin-left:auto;font-size:.85rem;font-weight:600;color:var(--gold-deep);
  text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.bf-card .check{margin-top:14px;padding:14px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line);
  background:var(--cream);transition:border-color .2s}
.bf-card .check:has(input:checked){border-color:var(--gold)}
.bestell .om-gate{margin-top:26px}

/* Danke-Seite */
.thx{background:var(--sand)}
.thx-card{max-width:680px;margin-inline:auto;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);padding:clamp(28px,4vw,52px);text-align:center}
.thx-card .seal{width:76px;height:76px;border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));box-shadow:0 18px 40px -14px rgba(138,106,58,.6);
  animation:pop .7s var(--ease)}
.thx-card .seal svg{width:34px;height:34px;stroke:#1a1409;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.thx-card .eyebrow{justify-content:center}
.thx-card h1{font-size:clamp(1.6rem,3.2vw,2.5rem)}
.thx-card .lead{margin:14px auto 0;max-width:52ch}
.thx-card .om-steps{margin-top:26px}
.thx-go{margin-top:28px}
.thx-hint{margin-top:14px;font-size:.85rem;color:var(--muted)}
.thx-help{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:.92rem;color:var(--ink-3)}
.thx-help a,.thx-back a{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.thx-back{margin-top:12px;font-size:.88rem}
@media(prefers-reduced-motion:reduce){.thx-card .seal{animation:none}}

/* v4.8 · Touch-Flächen nachgezogen (mobil ≥ 44 px) */
@media(max-width:860px){
  .pick-echo a{padding:11px 6px;margin-left:0}
  .om-legal{line-height:2.2}
  .om-legal a{display:inline-block;padding:11px 4px}
  .footer ul a{display:inline-block;min-height:44px;padding:10px 0}
  .pk button{min-width:56px}
}

/* v4.9 · Service-Block auf der Bestellseite */
.svc-list{display:grid;gap:14px}
.svc-list li{display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;
  column-gap:12px;row-gap:3px;align-items:start}
.svc-list svg{grid-row:1/3;width:20px;height:20px;margin-top:3px;stroke:var(--gold-deep);
  stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.svc-list b{font:600 1rem/1.3 var(--ff-body);color:var(--ink)}
.svc-list span{font-size:.92rem;line-height:1.5;color:var(--muted)}
.svc-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.std-more{margin-top:clamp(28px,4vw,44px);text-align:center;font-size:.92rem;color:var(--muted)}
.std-more a{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding:8px 2px}

/* ==================================================================
   v5.1 · Bereichsfarben (Farbwelt aus dem alten Design)
   Jede Landingpage hat ihre eigene Akzentfarbe: --a (Fläche/Text),
   --ag (Verlauf). Fällt auf Gold zurück, wenn nichts gesetzt ist.
   ================================================================== */
.hub a{--a:var(--gold-deep);--ag:linear-gradient(135deg,var(--gold-2),var(--gold))}
.hub a::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--ag)}
.hub a:hover{border-color:color-mix(in srgb,var(--a) 45%,transparent);
  box-shadow:0 26px 60px -26px color-mix(in srgb,var(--a) 42%,transparent),var(--sh)}
.hub .ic{background:var(--ag);color:#fff;box-shadow:0 12px 26px -14px color-mix(in srgb,var(--a) 70%,transparent)}
.hub .ic svg{stroke:#fff}
.hub .brand-tag{background:color-mix(in srgb,var(--a) 12%,#fff);color:var(--a);
  border:1px solid color-mix(in srgb,var(--a) 28%,transparent)}
.hub .brand-tag.alt{background:color-mix(in srgb,var(--a) 12%,#fff);color:var(--a)}
.hub .go{color:var(--a)}

/* Landingpages: Akzentfarbe sichtbar machen */
:root{--a:var(--gold-deep)}
body[data-bereich] .sub-hero{border-top:4px solid transparent;border-image:var(--ag,linear-gradient(90deg,var(--gold-2),var(--gold))) 1}
body[data-bereich] .bereich-tag{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  font:600 .74rem/1 var(--ff-body);letter-spacing:.14em;text-transform:uppercase;
  background:var(--ag);color:#fff;box-shadow:0 12px 26px -16px color-mix(in srgb,var(--a) 80%,transparent);margin-bottom:16px}
body[data-bereich] .lead-hero .eyebrow{color:var(--a)}
body[data-bereich] .lead-hero .eyebrow::before{background:linear-gradient(90deg,transparent,var(--a))}
body[data-bereich] .lead-hero .eyebrow::after{background:linear-gradient(90deg,var(--a),transparent)}
body[data-bereich] .lead-hero .hl{color:var(--a)}
body[data-bereich] .lead-hero .hl svg path{stroke:var(--a);opacity:.75}
body[data-bereich] .crumb a:hover{color:var(--a)}
body[data-bereich] .lead-card .sh::after{background:linear-gradient(90deg,color-mix(in srgb,var(--a) 40%,transparent),transparent)}
body[data-bereich] .stepper[data-step="1"] .bars i:nth-child(1),body[data-bereich] .stepper[data-step="2"] .bars i:nth-child(-n/**/+2),body[data-bereich] .stepper[data-step="3"] .bars i{background:var(--ag)}
body[data-bereich] .lead-card .sh{color:var(--a)}

/* v5.1 · Ansprechpartner-Karte in der Team-Sektion (ersetzt das doppelte Teamfoto) */
.team-card{background:var(--ink);color:#f5f2ec;border-radius:var(--r);padding:clamp(26px,3vw,38px);
  text-align:center;box-shadow:var(--sh);position:relative;overflow:hidden;min-width:0}
.team-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.team-card img{width:128px;height:128px;border-radius:50%;object-fit:cover;margin:0 auto 18px;display:block;
  border:3px solid rgba(220,192,140,.5)}
.team-card b{display:block;font:600 1.3rem/1.2 var(--ff-display)}
.team-card .role{display:block;margin-top:6px;font-size:.88rem;color:var(--gold-2)}
.team-card p{margin-top:18px;font-size:.98rem;line-height:1.6;color:rgba(245,242,236,.8)}
.team-card-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.team-card-facts{margin-top:24px;padding-top:20px;border-top:1px solid rgba(220,192,140,.2);
  display:grid;gap:9px;text-align:left}
.team-card-facts li{position:relative;padding-left:22px;font-size:.88rem;color:rgba(245,242,236,.78)}
.team-card-facts li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;
  background:var(--gold)}

/* ==================================================================
   v5.2 · Banner-Siegel. Der Inhalt des Siegels wurde in v5.8 aus
   rechtlichen Gruenden entfernt; die Regeln bleiben fuer das Layout.
   ================================================================== */

.lb-facts{flex-wrap:wrap}

/* ==========================================================================
   v5.2 · Bestellseite: Consors-Hinweis, Sorglospaket, Finanzierungsbox, erweiterte Felder
   ========================================================================== */

.ap-powered{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:#a8a29a}
.ap-powered span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#7f7a72}

.prem-shot{position:relative}
.prem-badge{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:999px;background:var(--ink,#16161a);
  color:var(--gold-2,#e6cd97);font:600 .68rem/1 var(--ff-body);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.prem-list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 22px}
.prem-list li{display:flex;align-items:flex-start;gap:9px;font-size:.96rem;color:var(--ink-2,#2a2a30);line-height:1.4}
.prem-list svg{flex:0 0 18px;width:18px;height:18px;margin-top:1px;stroke:var(--gold-deep);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.prem-plus{margin-top:16px;display:inline-block;padding:10px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--gold);font-size:.95rem;color:var(--ink-2,#2a2a30)}
.prem-plus b{color:var(--gold-deep)}
@media(max-width:560px){.prem-list{grid-template-columns:1fr}}

.fin-box{margin-bottom:18px;padding:18px 18px 16px;border-radius:16px;background:#101014;color:#e9e5dd;
  border:1px solid rgba(220,192,140,.22)}
.fin-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:14px}
.fin-title{font:600 .78rem/1 var(--ff-body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2,#e6cd97)}
.fin-powered{display:inline-flex;align-items:center;gap:7px;margin:0}
.fin-powered span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#8f8a82}
.fin-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.fin-grid div{min-width:0}
.fin-grid dt{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#8f8a82;margin-bottom:4px}
.fin-grid dd{margin:0;font:600 1rem/1.25 var(--ff-body);color:#fff;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fin-pflicht{margin-top:14px;padding-top:12px;border-top:1px solid rgba(220,192,140,.18);font-size:.8rem;line-height:1.5;color:#b9b3aa}
.fin-pflicht b{color:#e9e5dd;font-weight:600}
.fin-agb{margin-top:10px;font-size:.82rem}
.fin-agb a{color:var(--gold-2,#e6cd97);text-decoration:underline;text-underline-offset:3px}
@media(max-width:620px){.fin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ==========================================================================
   v5.3 · Material von Stefan: Schild, Vier gute Gründe, Laden, Teamfoto, Standort, Wechselservice
   ========================================================================== */
#seit-1998 h2 .g,#laden h2 .g,.ws h2 .g{color:var(--gold-deep)}
.ws h2 .g{color:var(--a,var(--gold-deep))}
/* Fassadenschild nachgebaut: dunkles Band, Logo bündig oben rechts, Claim unten links */
.sign{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  min-height:clamp(118px,15vw,176px);margin-bottom:clamp(34px,5vw,58px);padding:0 0 clamp(18px,2.4vw,28px) clamp(20px,3.4vw,44px);
  background:#1d1d1b;border-radius:var(--r);overflow:hidden;box-shadow:0 24px 50px -30px rgba(20,16,10,.55)}
.sign::after{content:"";position:absolute;inset:0;background:radial-gradient(520px 200px at 82% 0%,rgba(192,154,92,.16),transparent 70%);pointer-events:none}
.sign-kick{position:relative;z-index:1;margin:0;font:600 clamp(.95rem,1.6vw,1.35rem)/1.1 var(--ff-display);letter-spacing:.04em;text-transform:uppercase;color:#c09a5c}
.sign-logo{position:relative;z-index:1;align-self:flex-start;height:clamp(100px,13.5vw,158px);width:auto;margin-right:clamp(14px,3vw,40px)}
@media(max-width:620px){.sign{flex-direction:column-reverse;align-items:flex-start;padding:0 18px 18px}.sign-logo{height:auto;width:min(100%,330px);margin:0}}
.gruende{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gruende li{position:relative;min-width:0;padding:18px 18px 18px 58px;border-radius:var(--r-sm);background:var(--white);border:1px solid var(--line)}
.gruende i{position:absolute;left:16px;top:14px;font:600 1.9rem/1 var(--ff-display);font-style:normal;color:rgba(179,146,95,.3)}
.gruende small{display:block;padding-bottom:7px;margin-bottom:8px;border-bottom:1px solid var(--line);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gruende small b{color:var(--gold-deep)}
.gruende strong{display:block;font:500 1.12rem/1.2 var(--ff-display);text-transform:uppercase;color:var(--gold-deep)}
.gruende span{display:block;margin-top:2px;font:600 .98rem/1.3 var(--ff-display);text-transform:uppercase;color:var(--ink)}
@media(max-width:480px){.gruende{grid-template-columns:minmax(0,1fr)}}
/* Laden */
.laden{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:auto auto;gap:14px}
.laden figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--sand);min-width:0}
.laden-a{grid-row:span 2}
.laden img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1260/831;transition:transform 1.2s var(--ease)}
.laden-a img{aspect-ratio:auto}
.laden figure:hover img{transform:scale(1.03)}
.laden figcaption{position:absolute;left:12px;bottom:12px;padding:7px 12px;border-radius:999px;background:rgba(16,16,20,.78);color:#f3efe7;font-size:.8rem;backdrop-filter:blur(6px)}
@media(max-width:760px){.laden{grid-template-columns:1fr 1fr}.laden-a{grid-column:1/-1;grid-row:auto}.laden-a img{aspect-ratio:1260/831}}
@media(max-width:420px){.laden{grid-template-columns:1fr}}
/* Teamfoto */
.team-photo{margin:24px 0 22px;border-radius:var(--r);overflow:hidden;background:var(--sand)}
.team-photo img{width:100%;height:auto;display:block}
.team-photo figcaption{padding:10px 14px;font-size:.8rem;color:var(--muted);background:var(--white);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r)}
/* Standort */
.loc-photo{position:relative;z-index:1;margin:16px 0 4px;border-radius:14px;overflow:hidden}
.loc-photo img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 42%;display:block}
.loc-photo figcaption{padding:8px 2px 0;font-size:.8rem;color:rgba(245,245,247,.68)}
.f-claim{color:inherit;font-weight:600}
/* Wechselservice (Flyer Privat/Geschäft) */
.ws-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:start}
.ws h2{font-size:clamp(1.6rem,3vw,2.35rem)}
.ws-topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ws-topics span{padding:6px 12px;border-radius:999px;background:var(--ink);color:#f3efe7;font:600 .76rem/1 var(--ff-body);letter-spacing:.1em;text-transform:uppercase}
.ws-acts{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ws-acts li{padding:12px 8px;border-radius:12px;text-align:center;background:linear-gradient(160deg,#e9d6ab,#c9a86c);color:#231a0b;font:700 .82rem/1.2 var(--ff-display);text-transform:uppercase;letter-spacing:.03em}
.ws-lead{margin-top:16px;font-size:1.05rem}
.ws-lead b{color:var(--a,var(--gold-deep))}
.ws-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.ws-list li{display:flex;gap:10px;align-items:flex-start;font-weight:600;color:var(--ink)}
.ws-list svg{flex:0 0 20px;width:20px;height:20px;margin-top:1px;stroke:var(--a,var(--gold-deep));stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ws-steps{padding:clamp(20px,2.6vw,30px);border-radius:var(--r);background:var(--white);border:1px solid var(--line);box-shadow:0 20px 44px -34px rgba(20,16,10,.5)}
.ws-steps h3{font-size:1.2rem}
.ws-steps ol{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:10px}
.ws-steps li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-3);line-height:1.45}
.ws-steps li b{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--a,var(--gold-deep));color:#fff;font:600 .85rem/1 var(--ff-body)}
.ws-net{margin-top:16px;font-weight:600;color:var(--ink)}
.ws-fine{margin-top:12px;font-size:.78rem;color:var(--muted)}
@media(max-width:860px){.ws-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.ws-acts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Danke: Mithilfe (Einleger) */
.mithilfe{margin:30px auto 0;max-width:620px;text-align:left;padding:22px 22px 20px;border-radius:var(--r);background:var(--white);border:1px solid var(--line);border-top:4px solid var(--gold)}
.mithilfe h2{font-size:1.45rem;margin-top:4px}
.mithilfe p{margin-top:10px;color:var(--ink-3);font-size:.95rem;line-height:1.55}
.mh-kick{margin-top:0!important;font:600 .72rem/1.3 var(--ff-body)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)!important}
.mh-step{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--sand)}
.mh-step svg{flex:0 0 26px;width:26px;height:26px;stroke:var(--gold-deep);stroke-width:1.8;fill:none;stroke-linejoin:round}
.mh-step b{color:var(--gold-deep)}
.mh-done{font-weight:600;color:var(--ink)!important}

/* ==========================================================================
   v5.4 · Originalbilder iPhone 18, Farbwahl, Consors-Logo, Banner-iPhone
   ========================================================================== */
/* Banner: freigestelltes iPhone 18 Pro (Dark Grey) statt Platzhalter */

/* Bestellseite: Produktkarte mit Originalbildern */

.pk--color button{display:inline-flex;align-items:center;gap:9px}
.pk--color button::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 0 0 1px rgba(0,0,0,.4)}
.pk--color button[hidden]{display:none}
/* Consors-Finanz-Logo (Originaldatei von Stefan) auf weißem Grund */
.consors-logo{display:inline-block;height:34px;width:auto;padding:4px 8px;border-radius:8px;background:#fff;vertical-align:middle}
.fin-powered .consors-logo{height:38px}
/* Radio in den Zusatzfeldern */

.ap-powered .consors-logo{height:46px;padding:5px 10px}
.fin-powered .consors-logo{height:44px}

.ap-powered{flex-wrap:wrap;justify-content:center;max-width:100%}@media(max-width:380px){.ap-powered .consors-logo{height:40px}}

@media(min-width:1101px){.lb-shot{-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 14%,#000 34%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 14%,#000 34%)}}

/* v5.6 – neues Teamfoto im Hero (Querformat) */
.hero-frame{aspect-ratio:3/2;max-width:100%}
.hero-frame img{object-position:50% 38%}
.hero-visual{padding:56px 0 46px}
.float-1{left:-34px;top:-18px}
.float-2{right:-26px;top:auto;bottom:-16px}
.float-3{display:none}
@media(max-width:1100px){.float-1{left:-10px;top:-14px}.float-2{right:-10px;bottom:-14px}}
@media(max-width:900px){.hero-frame{aspect-ratio:3/2;max-width:560px}.hero-visual{padding:44px 0 40px}}
@media(max-width:520px){.hero-frame{aspect-ratio:3/2;max-width:100%}.float-1{left:-4px;top:-10px}.float-2{right:-4px;bottom:-10px;top:auto}}
/* v5.6 – Teamfoto in Graustufen beim Kontakt */
.team-sw{position:relative;margin:28px 0 0;border-radius:var(--r);overflow:hidden;border:1px solid rgba(179,146,95,.42);outline:1px solid rgba(179,146,95,.26);outline-offset:7px;box-shadow:var(--sh);background:#1a1714}
.team-sw img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.05) brightness(.98);transition:filter .6s var(--ease),transform 1.4s var(--ease);transform:scale(1.01)}
.team-sw:hover img{filter:grayscale(.15) contrast(1.02) brightness(1);transform:scale(1.04)}
.team-sw::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(26,23,20,.72));pointer-events:none}
.team-sw figcaption{position:absolute;left:18px;right:18px;bottom:15px;z-index:1;color:#fff;font:600 .92rem/1.35 var(--ff-body)}
.team-sw figcaption small{display:block;margin-top:3px;font-weight:500;font-size:.78rem;color:rgba(255,255,255,.78)}
@media(max-width:600px){.team-sw{outline-offset:5px}.team-sw figcaption{left:14px;right:14px;font-size:.85rem}}
/* v5.6 – SKM-Block mit Motiv, Ansprechpartnern und Kontaktformular */
.skm-block{background:linear-gradient(180deg,#fbf8f3,#f4efe6)}
.skm-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.skm-motiv{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid rgba(179,146,95,.42);outline:1px solid rgba(179,146,95,.24);outline-offset:7px;box-shadow:var(--sh);background:#fff}
.skm-motiv img{display:block;width:100%;height:auto}
.skm-heads{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.skm-head{margin:0;text-align:center}
.skm-head img{width:112px;height:112px;border-radius:50%;object-fit:cover;filter:grayscale(1);border:1px solid rgba(179,146,95,.45);box-shadow:0 12px 26px -14px rgba(26,23,20,.5)}
.skm-head figcaption{margin-top:9px;font:600 .95rem/1.3 var(--ff-body);color:var(--ink)}
.skm-head figcaption small{display:block;font-weight:500;font-size:.78rem;color:var(--muted);margin-top:2px}
.skm-form{margin-top:22px}
.skm-facts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.skm-facts li{background:#fff;border:1px solid rgba(179,146,95,.26);border-radius:14px;padding:11px 15px;font:500 .95rem/1.4 var(--ff-body);color:var(--ink)}
.skm-facts b{display:block;font:600 .72rem/1 var(--ff-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.skm-facts a{color:var(--gold-deep);font-weight:600}
@media(max-width:900px){.skm-grid{grid-template-columns:minmax(0,1fr)}.skm-motiv{max-width:520px;margin:0 auto}.skm-heads{max-width:520px;margin-left:auto;margin-right:auto}}
/* v5.6 – Porträt rund, passend zum freigestellten Kreis-Foto */
.consult img{border-radius:50%}
/* v5.6 – Wort von Marcel Metzger auf den SKM-Seiten */
.mm-wort{display:flex;gap:18px;align-items:flex-start;margin:0 0 26px;padding:20px 22px;border-radius:var(--r);background:#fff;border:1px solid rgba(179,146,95,.3);border-left:3px solid var(--gold-2);box-shadow:var(--sh-sm)}
.mm-wort img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:0 0 84px;filter:grayscale(1);border:1px solid rgba(179,146,95,.45)}
.mm-wort p{margin:0;font:500 1.02rem/1.6 var(--ff-body);color:var(--ink)}
.mm-wort footer{margin-top:10px;display:block}
.mm-wort footer b{display:block;font:600 .98rem/1.3 var(--ff-display);color:var(--ink)}
.mm-wort footer span{display:block;margin-top:2px;font-size:.82rem;color:var(--muted)}
@media(max-width:600px){.mm-wort{flex-direction:column;align-items:center;text-align:center;padding:18px}.mm-wort img{width:72px;height:72px;flex-basis:72px}}
/* v5.6 – Nach-oben-Knopf ruhiger: Ring genau auf der Kante, weicher Schatten */
.to-top{border:1px solid rgba(220,192,140,.34);box-shadow:0 8px 22px -10px rgba(0,0,0,.5)}
.to-top:hover{box-shadow:0 10px 26px -10px rgba(0,0,0,.55)}
.to-top .ring{inset:0;width:100%;height:100%}
.to-top .ring circle{stroke-width:1.8;stroke:var(--gold-2);opacity:.9}
.to-top svg:not(.ring){width:18px;height:18px;stroke-width:2}
/* v5.7 – Feinschliff: größere Tippflächen */
.rev-dots button{width:44px;height:44px;border-radius:16px}
@media(max-width:640px){.rev-dots button{width:44px;height:44px}.rev-dots{gap:0}}
@media(max-width:640px){.to-top{width:46px;height:46px}}
.check .box{flex:0 0 24px}
/* v5.7 – Feinschliff: ruhigere Raster mobil, SKM-Spalten mittig */
.skm-grid{align-items:center}
@media(max-width:430px){
  .pk--color{display:grid;grid-template-columns:1fr 1fr;gap:10px;justify-items:stretch}
  .pk--color button{width:100%;min-width:0;justify-content:center}
  #cfgModel{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #cfgModel button{width:100%;min-width:0}
  #cfgModel button:last-child{grid-column:1/-1}
  #cfgSize{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  #cfgSize button{width:100%;min-width:0;padding-inline:6px}
}
/* v5.7 – Slider-Punkte: eine Reihe, trotzdem gut treffbar */
@media(max-width:640px){.rev-dots{gap:2px;flex-wrap:nowrap}.rev-dots button{width:34px;height:44px;border-radius:12px}}
@media(max-width:360px){.rev-dots button{width:30px}}
/* v5.8 – Banner ohne Produktabbildung: eigenes Ladenfoto, warm abgedunkelt */



/* Neutrale Modellkarte auf der iPhone-Seite */
.ap-stage--plain{width:min(620px,100%);margin:0 auto}
.ap-card{display:grid;justify-items:center;gap:8px;padding:34px 26px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(220,192,140,.3);box-shadow:0 30px 60px -32px rgba(0,0,0,.7)}
.ap-card-dot{width:40px;height:40px;border-radius:50%;background:#1c1c1e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 0 0 1px rgba(0,0,0,.45)}
.ap-card b{font:600 1.5rem/1.2 var(--ff-display);color:#fff;margin-top:6px}
.ap-card-sub{font:500 .98rem/1.3 var(--ff-body);color:rgba(255,255,255,.76)}
.ap-card-note{max-width:38ch;text-align:center;font:500 .82rem/1.5 var(--ff-body);color:rgba(255,255,255,.55);margin-top:6px}
.ap-price--note .v--txt{font-size:clamp(1.5rem,3.4vw,2.1rem)}
.fs-hint{margin:12px 2px 0;font:500 .86rem/1.5 var(--ff-body);color:var(--muted)}
.f-privacy{margin:0 0 14px;font:500 .92rem/1.6 var(--ff-body);color:var(--ink)}
/* v5.8 – Widerruf der Karten-Einwilligung */
.map-revoke{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 16px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font:600 .8rem/1.2 var(--ff-body);cursor:pointer;transition:background .25s,color .25s}.map-revoke:hover{background:var(--ink);color:#fff}.map-revoke:focus-visible{outline:3px solid var(--gold-deep);outline-offset:2px}
.lead-privacy{margin:4px 2px 14px;font:500 .92rem/1.6 var(--ff-body);color:var(--muted)}
.lead-scope{margin:16px 0 0;padding:16px 18px;border-radius:16px;background:rgba(179,146,95,.07);border:1px solid rgba(179,146,95,.26)}
.lead-scope b{display:block;font:600 .98rem/1.3 var(--ff-display);color:var(--ink);margin-bottom:8px}
.lead-scope ul{margin:0;padding-left:18px;font:500 .9rem/1.65 var(--ff-body);color:var(--ink)}
.lead-scope-anbieter{display:block;margin-top:12px;font:500 .82rem/1.6 var(--ff-body);color:var(--muted)}
/* v5.8 – Banner: Text bleibt vor dem Ladenfoto gut lesbar */


/* v5.8 – längere Bannerzeile sauber umbrechen */
@media(min-width:901px){.lb .lb-h{max-width:15ch;font-size:clamp(1.9rem,3.6vw,3.1rem)}}
/* v5.8 – Lesbarkeit in Einwilligungen und Auftragsbeschreibung */
.check .txt b.inline{display:inline;font-weight:600}
.lead-scope ul{list-style:disc}
.lead-scope li{margin:3px 0}

/* ============================================================
   v5.9 · Korrekturen aus der Detailpruefung vom 01.10.2026
   ============================================================ */

/* 1) Rezensions-Slider: 8 vergroesserte Punkte (34px) plus 100px Pfeile passen
      unter 700px nicht in eine Zeile – die Pfeile wurden dadurch aus dem
      Viewport geschoben und waren nicht antippbar. Auf Touch-Breiten traegt
      die Wisch-Geste den Slider, die Punkte bleiben als Sprungziele. */
@media(max-width:700px){
  .rev-arrows{display:none}
  .rev-nav{justify-content:center;gap:0}
  .rev-hint{display:block;order:2;margin-top:2px;flex-basis:100%;text-align:center}
  .rev-dots{order:1;justify-content:center;flex-basis:100%}
}
@media(min-width:701px){.rev-hint{display:none}}
.rev-nav{flex-wrap:wrap}

/* 2) Consors-Logo: .fin-powered war eine nowrap-Flexzeile, das Logo stand
      dadurch bei 320–375px bis zu 61px ausserhalb des Bildschirms. */
.fin-powered{flex-wrap:wrap;max-width:100%}
.fin-powered .consors-logo,.ap-powered .consors-logo{max-width:100%;height:auto;max-height:44px}
@media(max-width:420px){
  .fin-powered,.ap-powered{justify-content:center;text-align:center}
  .fin-powered .consors-logo,.ap-powered .consors-logo{max-height:38px}
}

/* 3) Newsletter-Einwilligung */
.check--nl{margin-top:12px;font-size:.84rem;line-height:1.5}

/* 4) Freiwillige Unterschrift + Pflichtfeld-Legende */
.lbl-opt{font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.sig-note{margin-top:8px;font-size:.8rem;line-height:1.5;color:var(--muted)}
.f-req{margin:-4px 0 14px;font-size:.8rem;color:var(--muted)}
.f-req b{color:var(--ink-3)}

/* 5) Newsletter: .news-form input galt pauschal fuer ALLE Felder und hat die neue
      Einwilligungs-Checkbox als 54px hohe Pille mit flex:1 1 220px zerquetscht. */
.news-form input[type=checkbox]{
  flex:0 0 24px;width:24px;height:24px;min-width:24px;min-height:24px;
  padding:0;border-radius:5px;border:1.5px solid var(--line-2);
  background:#fff;accent-color:var(--gold-deep);margin:2px 0 0
}
.news-form .check--nl{align-items:flex-start;gap:12px;cursor:pointer;margin-top:14px}
.news-form .check--nl span{flex:1 1 auto;min-width:0}

/* 6) Einwilligungs-Checkbox im iPhone-Formular auf das Mindestmass
      nach WCAG 2.5.8 (24x24) bringen. */
.fs .check input[type=checkbox]{flex:0 0 24px;width:24px;height:24px;min-width:24px;min-height:24px}

/* 7) Footer-Spaltenueberschriften sind jetzt h2 (vorher h4 direkt unter h2 = uebersprungene
      Ebene). Die Schrift kommt weiter aus der Footer-Regel; hier nur die Abstaende sichern. */
.footer h2{margin-top:0;font-size:.8rem}
/* Banner-Ueberschrift ist jetzt ein Absatz, Typo unveraendert. */
.lb .lb-h{font-family:var(--ff-display);font-weight:600;margin:0}

/* 8) Pflicht-Warnhinweis bei Kreditwerbung. Ab 20.11.2026 ist Werbung fuer Kreditprodukte
      ohne klaren und auffallenden Warnhinweis auf die Kosten der Kreditaufnahme stets
      unzulaessig (Anhang Nr. 23e UWG, Umsetzungsgesetz vom 12.05.2026). Gilt auch fuer
      zinslose Ratenkaeufe und schon bei der bloszen Erwaehnung einer Finanzierung.
      Der Hinweis traegt bewusst EIGENE, deckende Farben: er steht auf hellen wie auf
      dunklen Abschnitten und muss ueberall sofort lesbar sein. */
.kredit-warn{
  display:flex;align-items:center;gap:10px;
  margin:16px 0 0;padding:11px 15px;
  border:2px solid #8a6a3a;border-radius:12px;
  background:#fdf6e6;
  font:700 .92rem/1.35 var(--ff-body);color:#3a2d18;
  letter-spacing:.01em;
  box-shadow:0 2px 10px rgba(0,0,0,.14)
}
.kredit-warn svg{flex:0 0 20px;width:20px;height:20px;stroke:#8a6a3a;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.kredit-warn span{min-width:0}
@media(max-width:430px){.kredit-warn{font-size:.86rem;padding:10px 12px;align-items:flex-start}.kredit-warn svg{margin-top:1px}}

/* 9) Akzentfarben als TEXT: --a ist fuer Flaechen und Linien gedacht. Als Schriftfarbe
      auf Weiss bleibt das Gold (#b4903f) unter dem Mindestkontrast 4.5:1. --at ist die
      abgedunkelte Variante derselben Farbe und wird ueberall dort benutzt, wo der Akzent
      Text ist. Die hellen Flaechen bleiben unveraendert. */
.hub a{--at:color-mix(in srgb,var(--a) 68%,#1a1714)}
body[data-bereich]{--at:color-mix(in srgb,var(--a) 68%,#1a1714)}
.hub .brand-tag{color:var(--at)}
.hub .go{color:var(--at)}
body[data-bereich] .lead-hero .eyebrow{color:var(--at)}
body[data-bereich] .lead-hero .hl{color:var(--at)}

/* Marken-Pille: stand als inline-flex in derselben Zeile wie der Eyebrow und beruehrte
   ihn ab 1200px fast (3 px Abstand). Jetzt eigene Zeile. Ausserdem weisse Schrift auf
   dem hellen Ende des Farbverlaufs ersetzt durch eine deckende, dunkle Flaeche. */
body[data-bereich] .bereich-tag{
  display:flex;width:fit-content;max-width:100%;
  background:var(--at);color:#fff;
  box-shadow:0 10px 22px -16px color-mix(in srgb,var(--a) 70%,transparent)
}

/* 10) Kurzvideos: nach dem Entfernen der beiden Gutschein-Clips (Bedingungen fehlen)
       stehen zwei Videos im Raster - mittig statt halbleer. */
@media(min-width:1001px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin-inline:auto}}

/* 11) Kontrast (Durchgang 3): Akzentfarbe als Schrift immer in der abgedunkelten
       Variante --at, Einheiten neben den Zaehlern auf dunklem Band in hellem Gold. */
.hub .brand-tag,.hub .brand-tag.alt{color:var(--at)}
body[data-bereich] .lead-card .sh{color:var(--at)}
.ws h2 .g{color:var(--at,var(--gold-deep))}
.stat .v small{color:var(--gold-2)}

/* v5.9 (12) Durchgang 5: hidden-Attribut immer respektieren, Karten-Platzhalter ohne Ueberlagerung, Kontraste */
[hidden]{display:none!important}
.map{gap:14px;padding-top:14px}
#mapFrame{position:absolute;inset:0}
.map--on .map-alt{margin-top:auto}
.hero-frame figcaption,.team-sw figcaption{left:0;right:0;bottom:0;padding:46px 18px 15px;background:linear-gradient(180deg,rgba(20,17,14,0) 0%,rgba(20,17,14,.8) 46%,rgba(20,17,14,.9) 100%)}
.hero-frame figcaption small,.team-sw figcaption small{color:rgba(255,255,255,.92)}
@media(max-width:600px){.team-sw figcaption{left:0;right:0;padding:42px 14px 13px}}
.hero .eyebrow{color:#735630}
.ap .fine{color:#8f8b84}
.devices small{color:rgba(245,245,247,.78)}
.ap-card-note{color:rgba(255,255,255,.76)}
.ap-avail{margin:6px auto 0;max-width:46ch;text-align:center;font:500 .86rem/1.5 var(--ff-body);color:rgba(245,245,247,.82)}

/* v5.9 (13) Durchgang 6: Formen und Umbrueche. Pillen mit 999px-Radius werden bei zwei
   und mehr Zeilen zu Ellipsen - begrenzte Radien: einzeilig weiterhin volle Pille,
   mehrzeilig ein abgerundetes Rechteck. Nummern, Masse und Uhrzeiten brechen nicht um. */
.nw{white-space:nowrap}
.btn{border-radius:30px}
.btn>span{text-wrap:balance}
.btn--pulse::after{border-radius:33px}
.lb-facts li{border-radius:18px;line-height:1.3}
.lb-facts li svg{flex:0 0 14px}
.lb-facts li>span{min-width:0}
.chip{border-radius:18px;line-height:1.25}
.rev-trust{border-radius:18px}
@media(max-width:760px){.rev-trust{text-align:left;justify-content:flex-start}}
.cat{border-radius:22px}
.o-status{border-radius:18px;line-height:1.3}
.o-status::before{flex:0 0 8px}
.om-miss{border-radius:22px}
.extra-add{border-radius:22px;line-height:1.2}
.laden figcaption{border-radius:14px;line-height:1.35}
.ws-topics span{border-radius:12px;line-height:1.2}
.sig-clear{white-space:nowrap}
.sig-ph{left:20px;right:20px;transform:translateY(-50%);justify-content:center;text-align:center;line-height:1.35}
.sig-ph svg{flex:0 0 18px}
.eyebrow,.fin-title,.lb-eyebrow{text-wrap:balance}
.fin-grid dd{overflow-wrap:break-word}
@media(max-width:440px){.fin-grid{grid-template-columns:1fr;gap:10px}}
@media(max-width:400px){.hero .btn-row .btn--lg{padding-left:16px;padding-right:16px;font-size:.95rem}}

/* v5.9 (14) Durchgang 7: Kennzeichnung, Barrierefreiheit, Rueckfall ohne JavaScript */
/* KI-Kennzeichnung bearbeiteter oder erzeugter Bilder (Art. 50 Abs. 4 KI-VO) */
.skm-motiv{position:relative}
.ki-tag{position:absolute;right:10px;top:10px;z-index:3;padding:4px 10px;border-radius:999px;background:rgba(16,16,20,.82);color:#fff;font:600 .72rem/1.25 var(--ff-body);letter-spacing:.01em;pointer-events:none}
/* Fokus und Formularraender mit mindestens 3:1 (WCAG 1.4.11) */
:focus-visible{outline-color:var(--gold-deep)}
.site-header :focus-visible,.nav-wrap :focus-visible,.topbar :focus-visible,.footer :focus-visible,.m-bar :focus-visible,.ap :focus-visible,.lb :focus-visible,.review--q :focus-visible,.cta :focus-visible,.section--dark :focus-visible,.team-card :focus-visible,.vframe :focus-visible,.hours :focus-visible,.panel--ink :focus-visible,.fin-box :focus-visible,.repair :focus-visible,.to-top:focus-visible{outline-color:var(--gold-2)}
.rev-track:focus-visible{outline-color:var(--gold-deep)}
.consents input:focus-visible+.box{outline-color:var(--gold-deep)}
:root{--field-line:#8b8b90}
.field input,.field select,.field textarea,.news-form input,.extra-row input,.consents .box,.extra-remove{border-color:var(--field-line)}
.field input:focus,.field select:focus,.field textarea:focus,.news-form input:focus,.extra-row input:focus{border-color:var(--gold-deep)}
.sig-pad{border-color:rgba(0,0,0,.48)}
.ws-steps li b{background:var(--at,var(--gold-deep))}
/* Topbar: Linktexte auf dem Handy nur optisch ausblenden (Name bleibt fuer Screenreader) */
@media(max-width:640px){.topbar-links a span{display:inline}.topbar-links a>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.topbar .motion-toggle{display:none}}
/* Fokus nicht unter der Aktionsleiste verstecken (WCAG 2.4.11) */
@media(max-width:640px){html{scroll-padding-bottom:96px}}
/* Animationen anhalten (WCAG 2.2.2) */
.motion-toggle{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.motion-toggle svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round}
.motion-toggle[aria-pressed="true"]{color:var(--gold-2)}
.m-contact .m-motion{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-weight:600;color:#fff;text-align:left}
.m-contact .m-motion[aria-pressed="true"]{border-color:var(--gold-2)}
/* Nur Endlos-Animationen anhalten; einmalige Einblendungen laufen zu Ende (sonst bliebe z. B. ein
   gerade erscheinender Button unsichtbar). .float: Einblendung laeuft, das Schweben haelt an. */
.motion-off .btn--gold::before,.motion-off .btn--wa::before,.motion-off .btn--gold .glint,.motion-off .btn--pulse::after,.motion-off .blob-1,.motion-off .blob-2,.motion-off .scroll-cue::before,.motion-off .mq-track,.motion-off .map-consent .pin,.motion-off .wa-float::after,.motion-off .m-bar .gold::before,.motion-off .m-bar .home::after,.motion-off .pl-logo::after,.motion-off .wa-float svg,.motion-off .mq-track span::after,.motion-off .new-pill::after,.motion-off .phone,.motion-off .vplay::before,.motion-off .lb-bg::after,.motion-off .lb-dust,.motion-off .lb .lb-h .g,.motion-off .lb-shot::after,.motion-off .ap h2 .g,.motion-off .ap-stage::before{animation-play-state:paused!important}
.motion-off .float{animation-play-state:running,paused!important}
.motion-off{scroll-behavior:auto}
/* Kennzahlen: Stand der Google-Werte; Stundensatz-Hinweis in der Preisliste */
.stats-note{margin:18px 0 0;text-align:center;font-size:.8rem;color:rgba(245,245,247,.78)}
.pr-p em{display:block;font-style:normal;font-size:.72rem;font-weight:600;color:var(--muted);text-align:right}
.fine--shop,.fine--thx{margin-top:8px}
/* Rezensionen: ganze Karte klickbar, Link selbst ist das Bedienelement */
.review .src{color:inherit}
.review .src::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.review .src:focus-visible{outline-offset:2px}
/* Marcel Metzger: Hinweis in eigener Formulierung (kein Zitat) */
.mm-wort .mm-by{margin-top:10px}
.mm-wort .mm-by b{display:block;font:600 .98rem/1.3 var(--ff-display);color:var(--ink)}
.mm-wort .mm-by span{display:block;margin-top:2px;font-size:.82rem;color:var(--muted)}
/* Tarifformular: Status, Fehlerhinweis Auftrag, Hinweis ohne JavaScript */
.lead-status{margin:12px 0 0;font-size:.9rem;line-height:1.5}
/* leer: ohne Hoehe, bleibt aber als Statusmeldung im Barrierebaum (sonst wird die erste Meldung nicht vorgelesen) */
.lead-status:empty,#leadStatus:empty{margin:0;padding:0;border:0;background:none}
.btn[aria-disabled="true"]{cursor:progress}
.f-msg a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.lead-status.lead-err{padding:12px 14px;border-radius:12px;background:#fdecea;color:#8a2a1d;border:1px solid rgba(184,64,47,.35)}
.lead-noscript{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--sand);font-size:.9rem}
.f-hint#h-c3{margin:-6px 0 14px}
/* Fehlerseite 404 */
.nf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.nf-links a{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:22px;border:1.5px solid var(--line-2);background:#fff;font-weight:600;color:var(--ink)}
/* Rueckfall, falls site.js nicht laeuft: Inhalte sichtbar, Ladeschirm weg */
.js-fail .reveal,.js-fail .hero .fade,.js-fail .form .field,.js-fail .hero-chips .chip,.js-fail .step .n,.js-fail .review .stars svg,.js-fail .lb-box img{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
.js-fail .preloader{display:none!important}
.js-fail .om-gate .om-send{display:inline-flex!important}
.js-fail .om-gate .om-miss{display:none!important}

/* ============================================================
   v5.9 (15) Kundenwunsch 04.10.2026 – Banner-Geraet, Zeiten, Marke
   ============================================================ */
/* WhatsApp-Marke: immer als gefuellte Flaeche, nie als Strichzeichnung
   (ueberschreibt die Kontextregeln von .btn/.topbar-links/.m-contact) */
.i-wa{fill:currentColor!important;stroke:none!important}
/* Geraetebuehne im Startbanner: echtes Seitenverhaeltnis des Motivs,
   sonst gilt die Grundregel von .lb-box (Maske + object-fit:cover) */
.lb-box--pro{aspect-ratio:1440/1075}
/* Oeffnungszeiten: eine Zeitspanne bricht nie in der Mitte um;
   auf schmalen Geraeten stehen die beiden Spannen untereinander */
.o-t{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:0 7px;text-align:right}
.o-t b{font-weight:inherit;white-space:nowrap}
.o-t i{font-style:normal;opacity:.45}
@media(max-width:560px){.o-t{flex-direction:column;align-items:flex-end;gap:1px}.o-t i{display:none}}

/* Schematische Geraetedarstellung im Konfigurator (eigene Zeichnung, kein Herstellermaterial).
   Die Gehaeusefarbe kommt aus --dev-c und wird vom Konfigurator gesetzt. */
.ap-dev{display:block;width:clamp(96px,26vw,136px);height:auto;margin:0 auto 14px;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.28))}
.ap-dev-body{fill:var(--dev-c,#1c1c1e);stroke:rgba(255,255,255,.22);stroke-width:1.2}
.ap-dev-screen{fill:rgba(8,9,12,.92);stroke:rgba(255,255,255,.10);stroke-width:.8}
.ap-dev-cam{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.16);stroke-width:.8}
.ap-dev-lens{fill:rgba(10,12,16,.95);stroke:rgba(255,255,255,.26);stroke-width:1}
.ap-dev-side{fill:var(--dev-c,#1c1c1e);opacity:.85}
.ap-card-dot{display:none}
@media (prefers-reduced-motion:reduce){.ap-dev{filter:none}}