@font-face{font-family:"Barlow Condensed";src:url(neu/fonts/barlow-condensed-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow";src:url(neu/fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(neu/fonts/barlow-500.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  --bg:#191919;--surface:#242424;--ink:#fff;--muted:#b3b3b3;
  --accent:#d71e1e;--accent-ink:#fff;--paper:#f2f1ee;--paper-ink:#141414;
  --red:#d71e1e;--blue:#1e4bd7;--teal:#0c7866;--yellow:#ffe927;--yellow-ink:#111;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;--text:"Barlow",Arial,sans-serif;
  --step-small:clamp(.875rem,.85rem + .1vw,.9375rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2.5rem,1.2rem + 5vw,5.5rem);
  --m:clamp(16px,2vw,28px);
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.5 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
a,button,label{touch-action:manipulation}
button,.btn{user-select:none;-webkit-user-select:none}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.d{font-family:var(--display);font-weight:700;letter-spacing:-.015em;line-height:.95;text-wrap:balance}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;font:500 var(--step-body)/1 var(--text);text-decoration:none;border:0;cursor:pointer;background:var(--accent);color:var(--accent-ink);transition:transform 160ms var(--ease-out),background-color 160ms ease}
.btn:active{transform:scale(.97)}
.btn.red{background:var(--red)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* nav */
.nav{position:absolute;inset:0 0 auto;z-index:10;color:var(--paper-ink);display:flex;justify-content:space-between;align-items:center;padding:20px var(--m);font-size:var(--step-body)}
.nav .wm{font-family:var(--display);font-weight:700;font-size:1.6rem;letter-spacing:-.01em;text-decoration:none;text-transform:uppercase}
.nav nav{display:flex;gap:28px;align-items:center}
.nav nav a{text-decoration:none;font-weight:500}
.nav nav a.btn{min-height:44px;padding:0 18px;background:var(--bg);color:#fff}

/* hero */
.hero{position:relative;height:100svh;min-height:620px;display:grid;grid-template-rows:82fr 18fr;overflow:hidden}
.hero .field{background:var(--paper);color:var(--paper-ink);position:relative}
.hero .band{background:var(--bg);display:flex;justify-content:space-between;align-items:center;gap:32px;padding:0 var(--m);position:relative;z-index:3}
.hero h1{position:absolute;left:var(--m);top:19%;z-index:5;font-size:clamp(3.5rem,9.4vw,11.5rem);line-height:.88}
.hero h1 span{display:block;white-space:nowrap}
.hero .lead{max-width:44ch;font-size:var(--step-body)}
@media (min-width:901px){.hero .band{padding-right:calc(var(--m) + 76px)}} /* Platz für den Chat-Knopf */
.hero .lead b{font-weight:500}
.hero .arch{position:absolute;z-index:4;right:19vw;bottom:calc(18% - 21vw);width:29vw;border:10px solid var(--bg);border-bottom:0;aspect-ratio:3/4;transform:rotate(5deg);border-radius:999px 999px 0 0;overflow:hidden;background:var(--surface)}
.hero .arch img{width:100%;height:100%;object-fit:cover;object-position:top}
.hero .arch figcaption{position:absolute;left:0;right:0;bottom:0;background:var(--bg);font-size:var(--step-small);padding:10px 16px}

/* work index */
.work{padding:clamp(120px,14vw,220px) var(--m) clamp(120px,12vw,200px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;background:var(--bg)}
.work h2{grid-column:1/-1;font-size:var(--step-head);margin-bottom:48px}
.work ol{grid-column:1/9;list-style:none}
.work li a{display:flex;align-items:baseline;gap:20px;padding:10px 0;text-decoration:none}
.work li .n{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:var(--step-head);line-height:1;color:var(--muted);transition:color 200ms ease,transform 200ms var(--ease-out)}
.work li .t{font-size:var(--step-body);color:var(--muted);transition:color 200ms ease}
.work li.on .n,.work li.on .t{color:var(--ink)}
.work li.on .n{transform:translateX(10px)}
.work .frame{grid-column:9/13;grid-row:3/5;position:sticky;top:15vh;align-self:start;aspect-ratio:4/5;background:var(--surface);overflow:hidden}
.work .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transition:opacity 200ms ease}
.work .frame img.on{opacity:1}
.work .frame .hold{min-height:56px;font-size:var(--step-body)!important;background:var(--red)!important;color:#fff!important;position:absolute;left:0;right:0;bottom:0;z-index:2;background:var(--paper);color:var(--paper-ink);font-weight:500;font-size:var(--step-small);padding:12px 16px;display:none;border:0;cursor:pointer;text-align:left;font-family:var(--text)}
.work .frame.ba .hold{display:block}
.work .wl{grid-column:1/9;margin:-24px 0 40px;max-width:60ch;font-size:var(--step-lead);line-height:1.35}.work li .go{font-size:var(--step-body);font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:6px;white-space:nowrap;display:none}.work li.on .go{display:inline}
.work .note{grid-column:1/9;margin-top:40px;font-size:var(--step-small);color:var(--muted)}
.work .mimg{display:none}

/* switches */
.sw{list-style:none}
.sw li{min-height:20vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-content:center;padding:28px var(--m);background:var(--bg);transition:background-color 300ms ease}
.sw li p.s{grid-column:1/11;font-size:clamp(1.25rem,.9rem + 1.6vw,2.25rem);line-height:1.15;color:var(--muted);font-weight:500;transition:color 300ms ease}
.sw li p.c{grid-column:1/11;font-size:var(--step-body);margin-top:10px;max-height:0;opacity:0;overflow:hidden;transition:opacity 300ms ease,max-height 300ms var(--ease-out)}
.sw li .tg{grid-column:11/13;grid-row:1/3;justify-self:end;align-self:center}
.sw li.on p.s{color:var(--ink)}
.sw li.on p.c{max-height:6em;opacity:1}
.sw li.on{background:var(--surface)}

[data-ui].tg{font-size:clamp(1.25rem,.9rem + 1.6vw,2.25rem);width:2.2em;height:1.1em;border-radius:1em;border:0;background:#3a3a3a;position:relative;cursor:pointer;flex:none}
[data-ui].tg::after{content:"";position:absolute;top:.12em;left:.12em;width:.86em;height:.86em;border-radius:50%;background:#fff;transition:transform 200ms var(--ease-out)}
[data-ui].tg[aria-checked=true]{background:var(--red)}
[data-ui].tg[aria-checked=true]::after{transform:translateX(1.1em)}


.swh{font-size:var(--step-head);padding:0 var(--m) 16px;background:var(--bg)}.swp{padding:0 var(--m) clamp(32px,3vw,48px);max-width:60ch}
/* showcase */

/* kit: alles, was ein kleiner Betrieb digital braucht */
.kit{background:var(--bg);padding:clamp(100px,11vw,180px) var(--m) clamp(100px,10vw,160px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:clamp(48px,6vw,96px)}
.kit h2{grid-column:1/10;font-size:var(--step-head)}
.kit .kl{grid-column:1/8;font-size:var(--step-lead);line-height:1.35;color:var(--muted);margin-top:-24px}
.kit .it{display:flex;flex-direction:column;gap:14px}
.kit .it.k1{grid-column:1/7}.kit .it.k2{grid-column:8/13;margin-top:clamp(40px,10vw,160px)}
.kit .it.k3{grid-column:1/6}.kit .it.k4{grid-column:7/12}
.kit figure{overflow:hidden;background:var(--surface);aspect-ratio:3/4}
.kit figure img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease-out)}
.kit .k{font-size:var(--step-small);color:var(--muted);font-weight:500}
.kit h3{font-family:var(--display);font-weight:700;font-size:clamp(2rem,1.4rem + 2.4vw,3.5rem);line-height:.95;letter-spacing:-.01em}
.kit p.x{max-width:46ch}
.kit .sm{font-size:var(--step-small);color:var(--muted)}
.kit .go{align-self:flex-start;font-weight:500;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:6px;min-height:44px;display:inline-flex;align-items:center}
.kit .tag{display:inline-block;background:var(--yellow);color:var(--yellow-ink);font-size:var(--step-small);font-weight:500;padding:2px 10px;margin-left:10px;vertical-align:middle;letter-spacing:0}
.kit .plain{border-top:2px solid #3a3a3a;padding-top:22px}
@media (hover:hover) and (pointer:fine){.kit .it:hover figure img{transform:scale(1.03)}}
/* scan: Aufsteller -> Handy -> Bewertung, ein 9-s-Loop, läuft nur sichtbar */
.kit figure.scan{container-type:inline-size;position:relative;background:radial-gradient(120% 70% at 40% 30%,#2e2e2e,#141414 70%)}
.scan *{animation-duration:9s;animation-iteration-count:infinite;animation-timing-function:var(--ease-out);animation-play-state:paused}
.scan.play *{animation-play-state:running}
.scan::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(#3a2a1d,#23180f);clip-path:polygon(0 18%,100% 0,100% 100%,0 100%)}
.scan .steps{position:absolute;z-index:3;left:5cqw;top:5cqw;display:flex;flex-wrap:wrap;gap:1.6cqw;font-size:max(11px,3.2cqw);font-weight:500}
.scan .steps span{padding:.7cqw 2.4cqw;background:#2b2b2b;color:var(--muted);animation-name:sc1}
.scan .steps .s2{animation-name:sc2}.scan .steps .s3{animation-name:sc3}
@keyframes sc1{0%,6%,46%,100%{background:#2b2b2b;color:var(--muted)}9%,43%{background:var(--yellow);color:var(--yellow-ink)}}
@keyframes sc2{0%,45%,72%,100%{background:#2b2b2b;color:var(--muted)}48%,69%{background:var(--yellow);color:var(--yellow-ink)}}
@keyframes sc3{0%,71%,92%,100%{background:#2b2b2b;color:var(--muted)}74%,89%{background:var(--yellow);color:var(--yellow-ink)}}
.scan .stage{position:absolute;inset:0;perspective:150cqw;z-index:1}
.scan .stand{position:absolute;z-index:2;left:9cqw;top:30cqw;width:46cqw;transform-style:preserve-3d;animation-name:sway;animation-timing-function:ease-in-out}
@keyframes sway{0%,100%{transform:rotateY(18deg) rotateX(4deg)}50%{transform:rotateY(10deg) rotateX(2deg)}}
.scan .card{display:flex;flex-direction:column;align-items:center;gap:2.2cqw;padding:5cqw 4cqw 3.4cqw;background:#c8231e;color:#fbeee0;border:2.2cqw solid #b07b4f;border-bottom-width:1cqw;box-shadow:0 4cqw 8cqw rgba(0,0,0,.5)}
.scan .card b{font-family:var(--display);font-weight:700;font-size:8.4cqw;line-height:.9}
.scan .card small{font-size:2.4cqw;opacity:.85}
.scan .code{background:#fff;padding:2cqw;width:23cqw;aspect-ratio:1}.scan .code svg{display:block;width:100%;height:100%}
.scan .card .code{animation-name:glow}
@keyframes glow{0%,22%,46%,100%{box-shadow:0 0 0 0 rgba(255,233,39,0)}28%,40%{box-shadow:0 0 0 1.4cqw rgba(255,233,39,.75)}}
.scan .card i{font-style:normal;font-size:2.3cqw;opacity:.7;letter-spacing:.04em}
.scan .base{height:5cqw;margin:0 -3cqw;background:linear-gradient(#c08a5a,#8a5d38);box-shadow:0 2cqw 3cqw rgba(0,0,0,.5)}
.scan .phone{position:absolute;z-index:3;left:50cqw;top:40cqw;width:36cqw;aspect-ratio:9/18.5;border-radius:5.5cqw;background:#0b0b0b;padding:1.4cqw;box-shadow:inset 0 0 0 .5cqw #3a3a3a,-4cqw 6cqw 10cqw rgba(0,0,0,.55);animation-name:ph}
@keyframes ph{0%,7%{opacity:0;transform:translate(46cqw,52cqw) rotateY(-30deg) rotate(22deg)}22%,84%{opacity:1;transform:translate(0,0) rotateY(-14deg) rotate(-5deg)}96%,100%{opacity:0;transform:translate(46cqw,52cqw) rotateY(-30deg) rotate(22deg)}}
.scan .scr{position:relative;height:100%;border-radius:4.4cqw;overflow:hidden;background:#111}
.scan .scr>div,.scan .flash{position:absolute;inset:0}
.scan .cam{display:flex;align-items:center;justify-content:center;background:radial-gradient(#5a1712,#2a0a08)}
.scan .cam .code{width:20cqw;transform:rotate(-4deg)}
.scan .cn{position:absolute;width:26cqw;aspect-ratio:1;background:linear-gradient(#fff,#fff) 0 0/5cqw .7cqw,linear-gradient(#fff,#fff) 0 0/.7cqw 5cqw,linear-gradient(#fff,#fff) 100% 0/5cqw .7cqw,linear-gradient(#fff,#fff) 100% 0/.7cqw 5cqw,linear-gradient(#fff,#fff) 0 100%/5cqw .7cqw,linear-gradient(#fff,#fff) 0 100%/.7cqw 5cqw,linear-gradient(#fff,#fff) 100% 100%/5cqw .7cqw,linear-gradient(#fff,#fff) 100% 100%/.7cqw 5cqw;background-repeat:no-repeat}
.scan .line{position:absolute;left:12%;right:12%;height:.6cqw;background:var(--yellow);box-shadow:0 0 3cqw var(--yellow);animation-name:ln;animation-timing-function:ease-in-out}
@keyframes ln{0%,23%{top:30%;opacity:0}25%{opacity:1}31%{top:68%}37%{top:32%}41%{top:66%;opacity:1}43%,100%{opacity:0}}
.scan .cam em{position:absolute;bottom:9cqw;font-style:normal;font-size:2.8cqw;background:var(--yellow);color:var(--yellow-ink);padding:.6cqw 2cqw;animation-name:em}
@keyframes em{0%,39%{opacity:0;transform:translateY(2cqw)}42%,100%{opacity:1;transform:none}}
.scan .flash{background:#fff;opacity:0;animation-name:fl}
@keyframes fl{0%,43%{opacity:0}44.5%{opacity:.9}49%,100%{opacity:0}}
.scan .rate{background:#f2f1ee;color:#141414;padding:6cqw 3.4cqw 3cqw;display:flex;flex-direction:column;gap:2.4cqw;opacity:0;animation-name:ra}
@keyframes ra{0%,44%{opacity:0}45%,100%{opacity:1}}
.scan .hd{display:flex;align-items:center;gap:2cqw;font-size:2.8cqw;line-height:1.2}.scan .hd small{display:block;color:#666;font-size:2.3cqw}
.scan .av{flex:none;width:7cqw;height:7cqw;border-radius:50%;background:#c8231e;color:#fff;display:grid;place-items:center;font:700 3.6cqw var(--display)}
.scan .rate p{font-size:3cqw;font-weight:500;margin-top:2cqw}
.scan .st{display:flex;gap:.8cqw}.scan .st svg{width:5.6cqw;height:5.6cqw;fill:#d9d6cf;animation-name:sf}
.scan .st svg:nth-child(1){animation-delay:-1.4s}.scan .st svg:nth-child(2){animation-delay:-1.05s}.scan .st svg:nth-child(3){animation-delay:-.7s}.scan .st svg:nth-child(4){animation-delay:-.35s}
@keyframes sf{0%,62%{fill:#d9d6cf;transform:scale(1)}65%{fill:#f5b400;transform:scale(1.35)}68%,97%{fill:#f5b400;transform:scale(1)}98%,100%{fill:#d9d6cf}}
.scan .ln{height:1.4cqw;background:#dcd9d2;width:100%}.scan .ln.s{width:65%}
.scan .bt{margin-top:auto;text-align:center;background:#d71e1e;color:#fff;font-size:2.8cqw;font-weight:500;padding:2.2cqw 0;animation-name:bt}
@keyframes bt{0%,65%{transform:scale(1);filter:none}67%{transform:scale(.94);filter:brightness(.8)}69%,100%{transform:scale(1);filter:none}}
.scan .tap{position:absolute;left:50%;bottom:4.6cqw;width:6cqw;height:6cqw;margin-left:-3cqw;border-radius:50%;background:rgba(0,0,0,.25);opacity:0;animation-name:tp}
@keyframes tp{0%,64%{opacity:0;transform:scale(.4)}66%{opacity:1;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.8)}}
.scan .done{background:#f2f1ee;color:#141414;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqw;text-align:center;padding:4cqw;font-size:3.4cqw;opacity:0;animation-name:dn}
@keyframes dn{0%,69%{opacity:0;transform:scale(.92)}72%,90%{opacity:1;transform:none}94%,100%{opacity:0}}
.scan .ok{width:12cqw;height:12cqw;border-radius:50%;background:var(--teal);display:grid;place-items:center}.scan .ok svg{width:7cqw;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.kit figure.scan{aspect-ratio:3/4}}
@container (max-width:520px){.scan .stand{left:3cqw;top:26cqw;width:50cqw}.scan .card small,.scan .card i{font-size:3cqw}.scan .phone{left:46cqw;top:27cqw;width:47cqw;border-radius:7cqw}.scan .scr{border-radius:5.6cqw}.scan .hd{font-size:3.9cqw}.scan .hd small{font-size:3.1cqw}.scan .av{width:9cqw;height:9cqw;font-size:4.6cqw}.scan .rate{padding:8cqw 4.4cqw 4.4cqw;gap:3.4cqw}.scan .rate p{font-size:4.2cqw}.scan .st{gap:1cqw}.scan .st svg{width:7cqw;height:7cqw}.scan .ln{height:1.8cqw}.scan .bt{font-size:3.9cqw;padding:3cqw 0}.scan .tap{bottom:6cqw;width:8cqw;height:8cqw;margin-left:-4cqw}.scan .cam .code{width:26cqw}.scan .cn{width:34cqw}.scan .cam em{font-size:3.9cqw;bottom:12cqw}.scan .done{font-size:4.6cqw}.scan .ok{width:15cqw;height:15cqw}.scan .ok svg{width:9cqw}.scan .steps{font-size:3.6cqw}}
@media (prefers-reduced-motion:reduce){.scan *{animation:none!important}.scan .phone{opacity:1;transform:rotateY(-14deg) rotate(-5deg)}.scan .rate{opacity:1}.scan .st svg{fill:#f5b400}.scan .cam,.scan .flash,.scan .done,.scan .tap{display:none}}
/* menu: gleiche Bühne, grüne Karte, Speisekarte mit Übersetzung und Merkliste */
.menu .card{background:#2f4a3a;color:#f4ecd8}
.menu .card b{font-size:6.2cqw}
.menu .cam{background:radial-gradient(#1f3a2b,#0c1a12)}
.scan .mn{background:#f7f3ea;color:#1d1d1d;padding:6.4cqw 2.6cqw 0;display:flex;flex-direction:column;gap:1.4cqw;opacity:0;animation-name:ra}
.mn .mh{display:flex;justify-content:space-between;align-items:center;font:700 3.6cqw/1 var(--display);margin-bottom:1cqw}
.mn .lg{position:relative;display:flex;font:500 2.2cqw/1 var(--text);border:1px solid #1d1d1d}.mn .lg>span{padding:.5cqw 1cqw}
.mn .lg .d{animation-name:lgon}.mn .lg .e{animation-name:lgoff}
@keyframes lgon{0%,50%{background:#1d1d1d;color:#fff}52%,100%{background:transparent;color:#1d1d1d}}
@keyframes lgoff{0%,50%{background:transparent;color:#1d1d1d}52%,100%{background:#1d1d1d;color:#fff}}
.mn .dr{display:grid;grid-template-columns:7.4cqw minmax(0,1fr) auto;gap:1.6cqw;align-items:center;padding:1.2cqw 0;border-bottom:1px solid #e2dccd}
.mn .th{width:7.4cqw;height:7.4cqw;border-radius:50%}
.mn .pz{background:radial-gradient(circle at 35% 40%,#fff6 0 8%,transparent 9%),radial-gradient(#d8402c 0 55%,#e8b86a 57%)}
.mn .pa{background:radial-gradient(circle at 50% 45%,#9c3520 0 22%,transparent 24%),repeating-radial-gradient(#e9cf8f 0 6%,#d9b866 7% 9%)}
.mn .sa{background:radial-gradient(circle at 60% 40%,#d8402c 0 10%,transparent 11%),radial-gradient(circle at 35% 60%,#f2e3a0 0 9%,transparent 10%),radial-gradient(#5f9440 0 50%,#3f6e2c 70%)}
.mn .tx{display:grid;gap:.4cqw;min-width:0}.mn .nm{display:grid;font-size:2.5cqw;line-height:1.1}.mn .nm b{grid-area:1/1;font-weight:600}
.mn .nm .de{animation-name:nde}.mn .nm .en{animation-name:nen;opacity:0}
@keyframes nde{0%,50%{opacity:1}52%,100%{opacity:0}}@keyframes nen{0%,50%{opacity:0}52%,100%{opacity:1}}
.mn .tx small{font-size:1.9cqw;color:#6b665c}
.mn .pl{position:relative;width:5cqw;height:5cqw;border-radius:50%;border:1px solid #1d1d1d;display:grid;place-items:center;font:600 3cqw/1 var(--text)}
.mn .pl i{grid-area:1/1;font-style:normal}.mn .pl .ck{opacity:0;color:#fff}
.mn .r1 .pl,.mn .r1 .ck{animation-delay:-.72s}.mn .r2 .pl,.mn .r2 .ck{animation-delay:-.09s}
.mn .r1 .pl,.mn .r2 .pl{animation-name:pon}.mn .r1 .ck,.mn .r2 .ck{animation-name:ckon}
@keyframes pon{0%,63%{background:transparent;border-color:#1d1d1d}65%,98%{background:#d71e1e;border-color:#d71e1e}}
@keyframes ckon{0%,63%{opacity:0}65%,98%{opacity:1}}
.mn .tap{left:50%;top:50%;bottom:auto;width:5cqw;height:5cqw;margin:-2.5cqw 0 0 -2.5cqw}
.mn .lg .tap{animation-delay:-1.44s}.mn .r1 .tap{animation-delay:-.9s}.mn .r2 .tap{animation-delay:-.27s}.mn .mb .tap{animation-delay:.36s}
.mn .mb{position:absolute;left:0;right:0;bottom:0;display:grid;background:#1d1d1d;color:#fff;font-size:2.4cqw;font-weight:500;padding:2.6cqw 3cqw 3.2cqw;animation-name:mbar}
.mn .mb>span:not(.tap){grid-area:1/1}.mn .m1{animation-name:m1}.mn .m2{animation-name:m2;opacity:0}
@keyframes mbar{0%,55%{transform:translateY(105%)}58%,100%{transform:none}}
@keyframes m1{0%,62%{opacity:1}64%,100%{opacity:0}}@keyframes m2{0%,62%{opacity:0}64%,100%{opacity:1}}
.mn .sh{position:absolute;left:0;right:0;bottom:0;background:#fff;box-shadow:0 -2cqw 5cqw rgba(0,0,0,.25);padding:3.4cqw 3cqw 3.4cqw;display:flex;flex-direction:column;gap:1.4cqw;font-size:2.3cqw;animation-name:sh}
@keyframes sh{0%,70%{transform:translateY(105%)}74%,100%{transform:none}}
.mn .sh b{font:700 3.4cqw/1 var(--display)}.mn .sh span{display:flex;justify-content:space-between;gap:1cqw}.mn .sh em{font-style:normal;white-space:nowrap}
.mn .sh .sum{font-weight:600;border-top:1px solid #e2dccd;padding-top:1.2cqw}
.mn .sh .bt2{justify-content:center;background:#d71e1e;color:#fff;font-weight:500;padding:2cqw 0;margin-top:.6cqw}
@container (max-width:520px){.menu .card b{font-size:6.8cqw}.scan .mn{padding:8cqw 3.4cqw 0;gap:1.8cqw}.mn .mh{font-size:4.6cqw}.mn .lg{font-size:3cqw}.mn .dr{grid-template-columns:9cqw minmax(0,1fr) auto;gap:2cqw}.mn .th{width:9cqw;height:9cqw}.mn .nm{font-size:3.3cqw}.mn .tx small{font-size:2.6cqw}.mn .pl{width:6.4cqw;height:6.4cqw;font-size:3.8cqw}.mn .mb{font-size:3.3cqw;padding:3.4cqw 4cqw 4cqw}.mn .sh{font-size:3.1cqw;gap:1.8cqw;padding:4.4cqw 4cqw}.mn .sh b{font-size:4.4cqw}.mn .sh .bt2{padding:2.8cqw 0}}
@media (prefers-reduced-motion:reduce){.scan .mn{opacity:1}.mn .mb,.mn .sh{transform:none}}
@media (max-width:900px){.kit{display:flex;flex-direction:column;gap:56px}.kit .kl{margin-top:-32px;font-size:18px}.kit .it.k2{margin-top:0}.kit figure{aspect-ratio:4/5}}

/* how */
.how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.how .f{min-height:84svh;position:relative;padding:28px;display:flex;flex-direction:column}
.how .f:nth-child(1){background:var(--bg)}.how .f:nth-child(2){background:var(--surface)}.how .f:nth-child(3){background:var(--paper);color:var(--paper-ink)}.how .f:nth-child(4){background:var(--red)}
.how h2{font-size:var(--step-head)}
.how .card{margin:auto auto;width:min(300px,100%);background:#fff;color:#111;padding:20px;font-size:16px;line-height:1.4;transition:transform 150ms var(--ease-out);border-radius:6px}
.how .card b{display:block;font-size:13px;letter-spacing:.02em;color:#555;font-weight:500;margin-bottom:8px}
.how .card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px}
.how .card dt{color:#666}.how .card dd{font-weight:500}
.how .card ul{list-style:none;display:grid;gap:7px}
.how .card li::before{content:"";display:inline-block;width:14px;height:14px;border:2px solid #111;border-radius:3px;margin-right:9px;vertical-align:-2px}
.how .card li.ok::before{background:#d71e1e;border-color:#d71e1e}
.how .card .ok2{color:#b3120f;font-weight:500}
.how .clause{font-family:var(--display);font-weight:700;font-size:var(--step-lead);line-height:1.05;text-transform:uppercase;max-width:14ch}
@media (hover:hover) and (pointer:fine){.how .f:hover .card{transform:translateY(-6px)}.nav nav a:not(.btn):hover{text-decoration:underline;text-underline-offset:6px}}

/* calc: Kostenrechner mit Preisspannen */
.calc{background:var(--paper);color:var(--paper-ink);border-top:2px solid #d9d7d2;padding:clamp(100px,11vw,180px) var(--m) clamp(80px,9vw,140px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px}
.calc h2{grid-column:1/10;font-size:var(--step-head)}
.calc .kl{grid-column:1/8;font-size:var(--step-lead);line-height:1.35;color:#4a4a4a;margin-top:-16px}
.calc form{grid-column:1/8;display:grid;gap:36px;min-width:0}
.calc fieldset{border:0;display:grid;gap:10px;min-width:0}
.calc fieldset[disabled]{opacity:.4}
.calc legend{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);line-height:1;margin-bottom:12px;padding:0}
.calc .hint{font-size:var(--step-small);color:#5a5a5a;margin-top:-6px;margin-bottom:4px}
.calc .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px}
.calc .opt{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;border:2px solid #cfcdc8;background:#fff;cursor:pointer;font-weight:500;line-height:1.25;transition:border-color 150ms ease}
.calc .opt small{display:block;font-weight:400;color:#5a5a5a;font-size:var(--step-small)}
.calc .opt input{flex:none;width:20px;height:20px;accent-color:var(--red);margin:0}
.calc .opt:has(input:checked){border-color:var(--paper-ink)}
.calc .num{display:flex;align-items:center;gap:0;justify-self:start;border:2px solid var(--paper-ink);background:#fff}
.calc .num button{width:56px;height:56px;border:0;background:none;font:500 1.6rem/1 var(--text);color:var(--paper-ink);cursor:pointer}
.calc .num output{min-width:3ch;text-align:center;font:700 1.6rem/1 var(--display)}
.calc .res{grid-column:9/13;grid-row:2/4;align-self:start;position:sticky;top:24px;background:var(--bg);color:var(--ink);padding:clamp(24px,2.4vw,36px);display:grid;gap:18px}
.calc .res h3{font:500 var(--step-small)/1 var(--text);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.calc .sum{display:grid;gap:4px}.calc .sum span{color:var(--muted);font-size:var(--step-small)}
.calc .sum b{font-family:var(--display);font-weight:700;font-size:clamp(2rem,1.5rem + 1.8vw,3.2rem);line-height:1;font-variant-numeric:tabular-nums}
.calc .res ul{list-style:none;display:grid;gap:8px;font-size:var(--step-small);border-top:1px solid #3a3a3a;padding-top:16px}
.calc .res li{display:flex;justify-content:space-between;gap:12px}.calc .res li span:last-child{white-space:nowrap;color:var(--muted)}
.calc .res .note{font-size:var(--step-small);color:var(--muted);line-height:1.45}
.calc .res .btn{width:100%}
.calc .res .wait{color:var(--muted);font-size:var(--step-body);line-height:1.4}
.calc .res .note b{color:var(--ink);font-weight:500}
.calc .calc-go{justify-self:start;min-width:240px}
.calc .res.done{animation:resin 420ms var(--ease-out)}
@keyframes resin{from{opacity:.4;transform:translateY(8px)}}
@media (max-width:900px){.calc{display:flex;flex-direction:column}.calc .kl{margin-top:-24px;font-size:18px}.calc .res{position:static;scroll-margin-top:16px}.calc .calc-go{width:100%}}
/* wa: WhatsApp-Knopf rechts über dem Chat-Knopf, Beschriftung beim Überfahren */
.wa{position:fixed;z-index:40;right:calc(21px + env(safe-area-inset-right,0px));bottom:calc(90px + env(safe-area-inset-bottom,0px));width:52px;height:52px;display:grid;place-items:center;background:#25d366;color:#fff;text-decoration:none;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.wa svg{width:26px;height:26px}
.wa span{position:absolute;right:64px;top:50%;translate:0 -50%;white-space:nowrap;background:#fff;color:#141414;font-size:14px;line-height:1.25;padding:8px 12px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity 160ms ease,translate 160ms var(--ease-out)}
.wa span small{display:block;color:#5a5a5a;font-size:12px}
.wa:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.wa:hover span{opacity:1;translate:-4px -50%}}
@media (max-width:899px){.wa{bottom:calc(154px + env(safe-area-inset-bottom,0px))}}
.wa,.lc-btn{transition:opacity 200ms ease,transform 160ms var(--ease-out)}
/* faq */
.faq .band{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:56px var(--m)}
.faq .band:nth-child(odd){background:var(--bg)}.faq .band:nth-child(even){background:var(--surface)}
.faq .head{background:var(--paper)!important;color:var(--paper-ink);min-height:40svh;align-items:end;align-content:end}
.faq .head h2{grid-column:1/-1;font-size:clamp(4.5rem,12.6vw,15rem)}
.faq h3{grid-column:1/6;font:500 var(--step-lead)/1.25 var(--text)}
.faq .band p{grid-column:7/13;max-width:60ch}

/* cta */
.cta{background:var(--paper);color:var(--paper-ink);min-height:90svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:clamp(80px,10vw,140px) var(--m) 40px;grid-template-rows:1fr auto}
.cta h2{grid-column:1/-1;font-size:clamp(3.5rem,9.4vw,11.5rem);line-height:.88}
.cta p{grid-column:1/6;align-self:end;font-size:var(--step-lead);line-height:1.3}
.cta .btn{grid-column:10/13;align-self:end;justify-self:end}

/* footer */
.foot{display:grid;grid-template-columns:1fr 1fr;min-height:100svh;background:var(--surface)}
.foot .ph{overflow:hidden;position:relative}
.foot .ph img{width:100%;height:100%;object-fit:cover;object-position:30% 50%;transform:scale(1.08)}
.foot .side{padding:80px var(--m) 28px clamp(24px,5vw,80px);display:flex;flex-direction:column}
.foot .wm{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.25rem;margin-bottom:40px}
.foot .menu{list-style:none;display:grid;gap:14px}
.foot .menu a{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:var(--step-head);line-height:1;text-decoration:none;display:inline-block;transition:transform 200ms var(--ease-out),color 200ms ease}
@media (hover:hover) and (pointer:fine){.foot .menu:hover a{color:var(--muted)}.foot .menu a:hover{color:var(--ink);transform:translateX(12px)}}
.foot .info{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px;font-size:var(--step-small);line-height:1.6}
.foot .legal{margin-top:auto;padding-top:48px;font-size:var(--step-small);color:var(--muted)}
.foot .legal a{color:var(--muted)}

/* motion */
.rv{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out);transition-delay:var(--dl,0ms)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
.hero h1 span{transform:translateY(105%);opacity:0;transition:transform 900ms var(--ease-out),opacity 500ms ease;transition-delay:var(--dl,0ms)}
.loaded .hero h1 span{transform:none;opacity:1}
.hero .arch{clip-path:inset(100% 0 0 0);transition:clip-path 1100ms var(--ease-io) 250ms}
.hero .arch img{transform:scale(1.12);transition:transform 1400ms var(--ease-out) 250ms}
.loaded .hero .arch{clip-path:inset(0 0 0 0)}
.loaded .hero .arch img{transform:none}
.no-js .hero h1 span{transform:none;opacity:1}.no-js .hero .arch{clip-path:none}.no-js .hero .arch img{transform:none}

@media (max-width:900px){
  .nav nav a:not(.btn){display:none}
  .hero{display:flex;flex-direction:column;height:auto;min-height:0;background:var(--paper)}.hero .field{order:1;padding:96px var(--m) 28px}
  .hero h1{position:static;font-size:11.2vw}
  .hero .arch{order:2;position:relative;right:auto;left:auto;bottom:auto;width:min(62vw,300px);margin:0 auto 40px;transform:rotate(3deg);border-width:8px}.hero .arch figcaption{font-size:14px;padding:6px 12px}.loaded .hero .arch{transform:rotate(3deg)}
  .hero .band{order:3;flex-direction:column;align-items:stretch;justify-content:center;gap:16px;padding-top:28px;padding-bottom:32px}
  .hero .lead{max-width:none;font-size:18px;line-height:1.35}
  .hero .band .btn{width:100%}
  .work{display:block}
  .work .frame{display:none}
  .work li{margin-bottom:40px}
  .work li a{flex-direction:column;align-items:center;text-align:center;gap:4px;padding:0}.work .mimg{margin-inline:auto}.work .wl{font-size:18px;margin:-24px 0 32px}.work li .go,.work li.on .go{opacity:1;margin:8px 0 0;display:inline-flex;align-items:center;min-height:48px;padding:0 18px;background:var(--red);text-decoration:none;align-self:center}
  .work li .n,.work li .t{color:var(--ink)}
  .work li.on .n{transform:none}
  .work .mimg{display:block;width:min(64%,300px);height:auto;aspect-ratio:9/16;object-fit:cover;object-position:top center;margin-bottom:16px;border-radius:22px;border:6px solid #333;background:#000}
  .sw li{min-height:132px;grid-template-columns:1fr auto}
  .sw li p.s{grid-column:1;font-size:22px;line-height:1.2}
  .sw li p.c{grid-column:1;font-size:15px}
  .sw li .tg{grid-column:2;grid-row:1/3;font-size:28px}
  .how{grid-template-columns:1fr}@media (min-width:600px){.how{grid-template-columns:1fr 1fr}}
  .how .f{min-height:0;padding:28px 20px 36px}
  .how .card{margin:24px 0 28px;order:2}.how .clause{order:1}.how h2{order:0;margin-bottom:12px;font-size:40px}
  .faq .band{display:block;padding:32px 20px}
  .faq .head{min-height:30svh;display:flex}
  .faq .head h2{font-size:13vw}
  .faq h3{font-size:22px;margin-bottom:10px}
  .faq .band p{font-size:17px}
  .cta{min-height:0;display:flex;flex-direction:column;padding-bottom:28px}
  .cta h2{font-size:13vw}
  .cta p{margin-top:40px;font-size:17px}
  .cta .btn{width:100%;margin-top:24px}
  .foot{display:block;min-height:0}
  .foot .ph{height:50svh}
  .foot .side{padding:40px 20px 24px}
  .foot .menu{gap:20px}.foot .menu a{font-size:8vw}
  .foot .info{grid-template-columns:1fr}
}
@media (min-width:600px) and (max-width:900px){.hero .arch{width:30vw;right:6vw}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{transform:none;transition:opacity 300ms ease}
  .hero h1 span{transform:none;transition:opacity 300ms ease}
  .hero .arch,.loaded .hero .arch{clip-path:none;transition:none}
  .hero .arch img{transform:none;transition:none}
  .foot .ph img{transform:none!important}
  *{transition-duration:.01ms!important}
}

/* ---- Unterseiten, Menü, Kacheln (29.10.2026) ---- */
.nav nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:6px}
.nav .mb{min-height:44px;padding:0 16px;border:2px solid currentColor;background:transparent;color:inherit;font:500 var(--step-body)/1 var(--text);cursor:pointer}
@media (min-width:1181px){.nav nav a:not(.btn){display:inline}.nav .mb{display:none}}
@media (max-width:1180px){.nav nav{gap:10px}.nav nav a:not(.btn){display:none}}
.mnav{position:fixed;inset:0;z-index:60;background:var(--bg);color:var(--ink);overflow-y:auto;padding:calc(84px + env(safe-area-inset-top,0px)) var(--m) 40px}
.mnav[hidden]{display:none}
.mnav .mx{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));right:var(--m);min-height:44px;padding:0 16px;border:2px solid #fff;background:transparent;color:#fff;font:500 var(--step-body)/1 var(--text);cursor:pointer}
.mnav ul{list-style:none;display:grid;gap:6px}
.mnav a{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(2.2rem,1.4rem + 4vw,3.4rem);line-height:1.05;text-decoration:none;display:inline-block;padding:4px 0}
.mnav a[aria-current]{color:var(--red)}
.mnav .btn{font:500 var(--step-body)/1 var(--text);text-transform:none;margin-top:24px;padding:0 28px;display:inline-flex}
html.mopen{overflow:hidden}
.calc .res ul[hidden],.calc .sums[hidden]{display:none}
.foot .menu a{font-size:clamp(1.6rem,1rem + 2.4vw,3rem)}
.foot .menu{gap:8px}
/* Kopf der Unterseiten */
.pg{background:var(--paper);color:var(--paper-ink);padding:clamp(130px,14vw,200px) var(--m) clamp(56px,7vw,100px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:22px}
.pg .k{grid-column:1/-1;font-weight:500;color:#5a5a5a;font-size:var(--step-small);text-transform:uppercase;letter-spacing:.08em}
.pg h1{grid-column:1/11;font-size:clamp(3rem,1.4rem + 6.4vw,8rem);line-height:.9;text-transform:uppercase}
.pg p.l{grid-column:1/8;font-size:var(--step-lead);line-height:1.35;max-width:46ch}
.pg .ab{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:10px}
.pg .ab b{font-family:var(--display);font-size:clamp(2rem,1.4rem + 2vw,3.2rem);line-height:1}
.pg .ab small{display:block;font-size:var(--step-small);color:#5a5a5a;font-weight:400}
.pg .ab .btn.ghost{background:transparent;color:var(--paper-ink);border:2px solid var(--paper-ink)}
@media (max-width:900px){.pg h1,.pg p.l{grid-column:1/-1}}
/* Kacheln auf der Startseite */
.tiles{background:var(--bg);padding:clamp(100px,11vw,180px) var(--m) clamp(80px,9vw,140px)}
.tiles h2{font-size:var(--step-head);max-width:16ch}
.tiles .kl{font-size:var(--step-lead);line-height:1.35;color:var(--muted);max-width:52ch;margin-top:20px}
.tiles ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:clamp(40px,5vw,72px)}
.tiles a{display:flex;flex-direction:column;gap:12px;min-height:290px;padding:28px;text-decoration:none;background:var(--surface);transition:transform 200ms var(--ease-out)}
.tiles li:nth-child(1) a{background:var(--red)}.tiles li:nth-child(2) a{background:var(--paper);color:var(--paper-ink)}.tiles li:nth-child(3) a{background:var(--teal)}.tiles li:nth-child(4) a{background:var(--blue)}
.tiles .t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,1.4rem + 1.8vw,3rem);line-height:.95}
.tiles .x{max-width:32ch}
.tiles .p{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:500}
.tiles .p b{font-family:var(--display);font-size:1.8rem}
.tiles .bald{display:inline-block;background:var(--yellow);color:var(--yellow-ink);font-size:var(--step-small);padding:2px 10px;font-weight:500}
@media (hover:hover) and (pointer:fine){.tiles a:hover{transform:translateY(-4px)}}
/* Unterseiten: einzelnes Angebot mit Punkten daneben */
.kit.solo{row-gap:0}
.kit.solo .it.k1,.kit.solo .it.k2{grid-column:1/7;margin-top:0}
.kit.solo .pts{grid-column:8/13;align-self:center}
.pts{list-style:none;display:grid;gap:22px}
.pts li{border-top:2px solid #3a3a3a;padding-top:16px}
.pts b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.5rem,1.1rem + 1vw,2rem);line-height:1}
.pts span{display:block;color:var(--muted);margin-top:6px;max-width:44ch}
.plist{background:var(--bg);padding:clamp(80px,9vw,140px) var(--m);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px}
.plist h2{grid-column:1/-1;font-size:var(--step-head)}
.plist .pts{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));column-gap:24px}
.more{background:var(--surface);padding:56px var(--m);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
.more p{font-size:var(--step-lead);max-width:40ch}
.more.preis p{display:grid;gap:6px;max-width:60ch}.more.preis span{font-size:var(--step-small);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.more.preis b{font-family:var(--display);font-size:clamp(2.2rem,1.6rem + 2vw,3.4rem);line-height:1}.more.preis small{font-size:var(--step-small);color:var(--muted)}
.sub .work{padding-top:clamp(64px,7vw,110px)}
.sub .faq .band:first-child{padding-top:72px}
@media (max-width:900px){.kit.solo{display:flex;flex-direction:column;gap:48px}}