/* Lokalform · Schwarz und Weiß */
:root{
  --bg:#000; --bg-2:#0a0a0a; --surface:#111; --surface-2:#1a1a1a;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.24);
  --text:#fff; --mut:#a9a9a9; --dim:#737373;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --wrap:1180px; --gut:clamp(1.1rem,4vw,2.5rem); --r:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;color-scheme:dark;background:#000;scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.62 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;min-height:100vh;min-height:100dvh}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button,a,summary,[role=button],[role=tab],label{touch-action:manipulation}
::selection{background:#fff;color:#000}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:1rem;top:-4rem;background:#fff;color:#000;padding:.6rem 1rem;border-radius:10px;z-index:100;font-weight:600}
.skip:focus{top:1rem}
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
section{position:relative;padding-block:clamp(3.8rem,8.5vw,6.8rem)}
.kick{display:inline-flex;align-items:center;gap:.6rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);font-weight:600}
.kick::before{content:"";width:1.6rem;height:1px;background:currentColor}
h1,h2,h3{margin:0;font-weight:600;color:#fff;text-wrap:balance}
h1{font-size:clamp(2.5rem,7.6vw,6rem);line-height:1;letter-spacing:-.04em}
h2{font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.05;letter-spacing:-.03em}
h3{font-size:1.2rem;line-height:1.25;letter-spacing:-.01em}
em,.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:#fff}
p{margin:0;text-wrap:pretty}
.lead{font-size:clamp(1.08rem,2vw,1.3rem);color:var(--mut);max-width:40rem;line-height:1.55}
.mut{color:var(--mut)}
.head{display:grid;gap:1rem;margin-bottom:clamp(2rem,5vw,3.4rem);max-width:48rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.1rem;padding:.8rem 1.5rem;border-radius:999px;font-weight:600;font-size:.98rem;border:1px solid var(--line-2);background:transparent;transition:transform 160ms var(--ease-out),background 160ms,border-color 160ms,color 160ms;user-select:none;-webkit-user-select:none;text-align:center}
.btn:active{transform:scale(.97)}
.btn-p{background:#fff;color:#000;border-color:#fff}
.btn-s{min-height:2.5rem;padding:.45rem 1rem;font-size:.9rem}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn .arr{transition:transform 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{border-color:#fff;background:rgba(255,255,255,.08)}
  .btn-p:hover{background:#e6e6e6;border-color:#e6e6e6}
  .btn:hover .arr{transform:translateX(3px)}
}

/* Kopf */
.site{position:fixed;inset:0 0 auto 0;z-index:50;transition:background 240ms,border-color 240ms;border-bottom:1px solid transparent;padding-top:env(safe-area-inset-top)}
.site.on{background:rgba(0,0,0,.78);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:4.2rem}
.logo{font-weight:700;letter-spacing:-.03em;font-size:1.25rem;display:flex;align-items:center;gap:.55rem}
.logo i{width:.7rem;height:.7rem;border-radius:50%;background:#fff;display:block;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.links{display:none;gap:1.7rem;list-style:none;margin:0;padding:0;font-size:.94rem;color:var(--mut)}
.links a{transition:color 160ms;padding:.4rem 0}
.links a[aria-current=page]{color:#fff}
.nav-r{display:flex;align-items:center;gap:.8rem}
.nav-r .btn{min-height:2.6rem;padding:.5rem 1.15rem;font-size:.92rem}
.burger{width:2.8rem;height:2.8rem;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:transform 160ms var(--ease-out)}
.burger:active{transform:scale(.94)}
.burger span,.burger span::before,.burger span::after{display:block;width:1.1rem;height:1.5px;background:#fff;position:relative;transition:transform 260ms var(--ease-out)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-5px}.burger span::after{top:5px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded=true] span::after{transform:translateY(-5px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.98);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);padding:calc(5.5rem + env(safe-area-inset-top)) var(--gut) calc(2rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow-y:auto;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path 420ms var(--ease-drawer),visibility 0s 420ms}
.sheet.open{clip-path:inset(0);visibility:visible;transition:clip-path 420ms var(--ease-drawer),visibility 0s}
.sheet a{font-size:clamp(1.6rem,6.4vw,2.3rem);letter-spacing:-.035em;font-weight:600;padding:.5rem 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(10px);transition:opacity 260ms,transform 360ms var(--ease-out)}
.sheet.open a{opacity:1;transform:none}
.sheet.open a:nth-child(2){transition-delay:30ms}.sheet.open a:nth-child(3){transition-delay:60ms}.sheet.open a:nth-child(4){transition-delay:90ms}.sheet.open a:nth-child(5){transition-delay:120ms}.sheet.open a:nth-child(6){transition-delay:150ms}.sheet.open a:nth-child(7){transition-delay:180ms}
.sheet .btn{margin-top:1.4rem;font-size:1.05rem;letter-spacing:0;border:1px solid #fff;padding:.9rem 1.5rem;flex:none}
body.lock{overflow:hidden}
@media (min-width:1000px){.links{display:flex}.burger,.sheet{display:none}}
@media (hover:hover) and (pointer:fine){.links a:hover{color:#fff}}

/* Hero */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-block:7.5rem 5rem;overflow:hidden;isolation:isolate}
.hero.sub{min-height:0;padding-block:9rem 3.5rem}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(60% 60% at 50% 40%,#000,transparent 80%);-webkit-mask-image:radial-gradient(60% 60% at 50% 40%,#000,transparent 80%);opacity:.6}
.cone{position:absolute;left:0;top:0;width:46rem;height:46rem;margin:-23rem 0 0 -23rem;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,.05) 40%,transparent 68%);transform:translate3d(var(--cx,60vw),var(--cy,30vh),0);will-change:transform}
@media (hover:none),(pointer:coarse){.cone{animation:drift 16s var(--ease-io) infinite alternate;transform:none;left:30%;top:28%}}
@keyframes drift{from{transform:translate3d(-12vw,-4vh,0)}to{transform:translate3d(18vw,8vh,0)}}
.hero .wrap{display:grid;gap:clamp(1.4rem,3vw,2.2rem)}
.hero h1 .w{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(.28em);animation:wi 640ms var(--ease-out) forwards}
@keyframes wi{to{opacity:1;filter:none;transform:none}}
.hero .rise{opacity:0;transform:translateY(12px);animation:ri 700ms var(--ease-out) forwards;animation-delay:520ms}
.hero .rise.d1{animation-delay:640ms}.hero .rise.d2{animation-delay:760ms}.hero .rise.d3{animation-delay:880ms}
@keyframes ri{to{opacity:1;transform:none}}
.hero-act{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:.6rem 2rem;color:var(--dim);font-size:.9rem}
.hero-meta span{display:inline-flex;align-items:center;gap:.5rem}
.hero-meta span::before{content:"";width:.34rem;height:.34rem;border-radius:50%;background:#fff}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.85rem;color:var(--dim);margin-bottom:1.2rem}
.crumbs a{color:var(--mut)}.crumbs span::before{content:"/";margin-right:.4rem;color:var(--dim)}

/* Ortsband */
.band{border-block:1px solid var(--line);overflow:hidden;padding-block:1.1rem;background:var(--bg-2);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.band-t{display:flex;width:max-content;animation:marq 60s linear infinite}
.band span{padding-inline:1.4rem;color:var(--dim);font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:2.8rem}
.band span::after{content:"";width:.3rem;height:.3rem;border-radius:50%;background:#fff;opacity:.7}
@keyframes marq{to{transform:translateX(-50%)}}

/* Reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity 620ms var(--ease-out),transform 720ms var(--ease-out);transition-delay:calc(var(--i,0)*60ms)}
.rv.in{opacity:1;transform:none}
.nojs .rv{opacity:1;transform:none}

/* Karten */
.grid{display:grid;gap:1rem}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.2rem,3vw,1.7rem);overflow:hidden;isolation:isolate;transition:border-color 240ms,transform 320ms var(--ease-out)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity 300ms;background:radial-gradient(22rem circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.09),transparent 60%)}
a.card{display:block}
@media (hover:hover) and (pointer:fine){.card:hover{border-color:var(--line-2)}.card:hover::before{opacity:1}}
.card h3{margin-bottom:.5rem}
.card p{color:var(--mut);font-size:.97rem}
.num{font-family:var(--serif);font-style:italic;color:var(--mut);font-size:1.05rem;display:block;margin-bottom:1.1rem}
.more{display:inline-flex;gap:.4rem;align-items:center;margin-top:1rem;font-weight:600;font-size:.93rem}
.cat[hidden]{display:none}
.cat .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.cat .tags span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-2);border-radius:99px;padding:.15rem .6rem;color:var(--mut)}

/* Bedienelemente */
.field{display:grid;gap:.45rem}
.field label,.lbl{font-size:.86rem;color:var(--mut)}
.inp{width:100%;min-height:3.1rem;background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:14px;padding:.75rem 1rem;font-size:1rem;transition:border-color 160ms,background 160ms}
textarea.inp{min-height:8rem;resize:vertical}
.inp:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.07)}
.inp::placeholder{color:var(--dim)}
select.inp{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);background-position:calc(100% - 1.3rem) 50%,calc(100% - .95rem) 50%;background-size:.4rem .4rem;background-repeat:no-repeat;padding-right:2.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{min-height:2.6rem;padding:.4rem 1rem;border-radius:99px;border:1px solid var(--line-2);font-size:.93rem;color:var(--mut);transition:background 180ms,color 180ms,border-color 180ms,transform 160ms var(--ease-out);user-select:none;-webkit-user-select:none}
.chip:active{transform:scale(.96)}
.chip[aria-pressed=true]{background:#fff;color:#000;border-color:#fff;font-weight:600}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:#fff;color:#fff}.chip[aria-pressed=true]:hover{color:#000}}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:99px}
.stepper button{width:2.8rem;height:2.8rem;font-size:1.3rem;border-radius:50%;transition:background 160ms,transform 160ms var(--ease-out)}
.stepper button:active{transform:scale(.9)}
.stepper output{min-width:2.4rem;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.two{display:grid;gap:1rem}
@media (min-width:600px){.two{grid-template-columns:1fr 1fr}}
.status{min-height:1.4rem;font-size:.95rem;color:var(--mut)}
.status.ok::before{content:"✓ ";font-weight:700}.status.bad::before{content:"✕ ";font-weight:700}
.status.ok,.status.bad{color:#fff}
.note{font-size:.84rem;color:var(--dim)}
.note a{color:var(--mut);text-decoration:underline;text-underline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(1.2rem,3vw,2rem)}
input[type=range]{width:100%;accent-color:#fff;height:2rem;margin:0}

/* Demo-Rahmen */
.dm{border:1px solid var(--line-2);border-radius:28px;background:var(--bg-2);overflow:hidden}
.dm-bar{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;padding:.6rem;border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch}
.dm-bar::-webkit-scrollbar{display:none}
.tab{flex:none;min-height:2.6rem;padding:.4rem 1.05rem;border-radius:99px;font-size:.93rem;font-weight:500;color:var(--mut);white-space:nowrap;transition:background 200ms,color 200ms,transform 160ms var(--ease-out)}
.tab:active{transform:scale(.96)}
.tab[aria-selected=true]{background:#fff;color:#000;font-weight:600}
@media (hover:hover) and (pointer:fine){.tab:hover{color:#fff}.tab[aria-selected=true]:hover{color:#000}}
.dm-body{padding:clamp(1.1rem,3vw,2rem)}
.dm-body[hidden]{display:none}
.dm-intro{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;align-items:baseline;margin-bottom:1.4rem}
.dm-intro p{color:var(--mut);max-width:34rem;font-size:.97rem}
.badge{display:inline-block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line-2);border-radius:99px;padding:.2rem .7rem;color:var(--mut);white-space:nowrap}
.dm-grid{display:grid;gap:1.4rem}
@media (min-width:900px){.dm-grid.s{grid-template-columns:1.25fr 1fr}.dm-grid.e{grid-template-columns:1fr 1fr}}
.stack{display:grid;gap:1.1rem;align-content:start}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.2rem,1fr));gap:.5rem}
.slot{min-height:2.8rem;border:1px solid var(--line-2);border-radius:12px;font-variant-numeric:tabular-nums;font-size:.95rem;transition:background 160ms,color 160ms,transform 160ms var(--ease-out)}
.slot:active{transform:scale(.96)}
.slot[aria-pressed=true]{background:#fff;color:#000;font-weight:600}
.slot.full{color:var(--dim);background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(255,255,255,.07) 6px 7px)}
.slot.full[aria-pressed=true]{color:#000;background:#fff}
.slot small{display:block;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.result{background:#fff;color:#000;border-radius:20px;padding:1.3rem 1.4rem;display:grid;gap:.6rem}
.result[hidden]{display:none}
.result small{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#555}
.result b{font-size:1.5rem;letter-spacing:-.03em;line-height:1.15}
.result p{color:#333;font-size:.94rem}
.result .btn{border-color:#000;color:#000;justify-self:start}
.result .btn-p{background:#000;color:#fff}
.table{width:100%;border-collapse:collapse;font-size:.92rem}
.table th,.table td{text-align:left;padding:.65rem .6rem;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.table th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600}
.table tr.me td{background:rgba(255,255,255,.1)}
.scroll-x{overflow-x:auto}
.pill{display:inline-block;border:1px solid var(--line-2);border-radius:99px;padding:.05rem .6rem;font-size:.78rem}
.pill.on{background:#fff;color:#000;border-color:#fff}
.sw{display:inline-grid;grid-auto-flow:column;gap:.25rem;background:rgba(255,255,255,.05);border-radius:99px;padding:.25rem;border:1px solid var(--line)}
.sw button{padding:.4rem 1rem;border-radius:99px;font-size:.88rem;color:var(--mut)}
.sw button[aria-pressed=true]{background:#fff;color:#000;font-weight:600}

/* Shop */
.shop{display:grid;gap:1.2rem}
@media (min-width:900px){.shop{grid-template-columns:1fr 19rem;align-items:start}}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,11.5rem),1fr));gap:.8rem}
.prod{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column;transition:border-color 200ms}
.prod-art{aspect-ratio:1/1;background:#f2f2f2;display:grid;place-items:center}
.prod-art svg{width:56%;height:56%}
.prod-art svg *{fill:none;stroke:#000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prod-b{padding:.8rem .9rem 1rem;display:grid;gap:.25rem;flex:1;align-content:start}
.prod-b b{font-size:.95rem;line-height:1.25}
.prod-b span{color:var(--mut);font-size:.85rem}
.prod-b .p{color:#fff;font-weight:600;font-variant-numeric:tabular-nums;margin-top:.2rem}
.prod .btn{margin:0 .9rem .9rem;min-height:2.5rem;font-size:.9rem}
@media (hover:hover) and (pointer:fine){.prod:hover{border-color:var(--line-2)}}
.cart{border:1px solid var(--line-2);border-radius:20px;padding:1.1rem;background:var(--surface);display:grid;gap:.9rem}
@media (min-width:900px){.cart{position:sticky;top:5.5rem}}
.cart h3{display:flex;justify-content:space-between;align-items:baseline}
.cl{display:grid;gap:.6rem;max-height:18rem;overflow:auto}
.ci{display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;font-size:.92rem;border-bottom:1px solid var(--line);padding-bottom:.6rem}
.ci .mini{display:inline-flex;align-items:center;gap:.4rem;color:var(--mut)}
.ci .mini button{width:1.8rem;height:1.8rem;border:1px solid var(--line-2);border-radius:50%;line-height:1}
.sum{display:grid;gap:.35rem;font-size:.92rem;font-variant-numeric:tabular-nums}
.sum div{display:flex;justify-content:space-between}
.sum .t{font-weight:700;font-size:1.08rem;border-top:1px solid var(--line-2);padding-top:.5rem;margin-top:.2rem}
.bar{height:5px;background:rgba(255,255,255,.12);border-radius:9px;overflow:hidden}
.bar i{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(var(--v,0));transition:transform 500ms var(--ease-out)}
.empty{color:var(--dim);font-size:.93rem;padding-block:.5rem}

/* Gutschein und Ticket */
.voucher{position:relative;background:#fff;color:#000;border-radius:22px;padding:1.5rem;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;overflow:hidden}
.voucher small{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#555}
.voucher .amt{font-size:clamp(2.4rem,7vw,3.6rem);letter-spacing:-.05em;font-weight:700;line-height:1;margin:.3rem 0 .6rem}
.voucher p{color:#333;font-size:.93rem;overflow-wrap:anywhere}
.voucher .qr{width:7.4rem;height:7.4rem;border-radius:8px;overflow:hidden;border:1px solid #ddd}
.qr svg{width:100%;height:100%}
.ticket{position:relative;display:grid;grid-template-columns:1fr auto;gap:1.2rem;align-items:center;background:#fff;color:#000;border-radius:20px;padding:1.4rem;overflow:hidden;transition:opacity 360ms var(--ease-out),transform 520ms var(--ease-out)}
.ticket[hidden]{display:none}
.ticket.pre{opacity:0;transform:translateY(12px) scale(.97)}
.ticket small{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#555;font-weight:700}
.ticket b{display:block;font-size:1.5rem;letter-spacing:-.03em;margin:.2rem 0 .5rem;line-height:1.1;overflow-wrap:anywhere}
.ticket p{font-size:.88rem;color:#333}
.ticket .qr{width:8.2rem;height:8.2rem;border-radius:10px;overflow:hidden;border:1px solid #ddd}
.banner{position:fixed;left:50%;bottom:calc(1.2rem + env(safe-area-inset-bottom));z-index:60;width:min(32rem,100% - 2rem);transform:translate(-50%,24px);opacity:0;visibility:hidden;background:#fff;color:#000;border-radius:18px;padding:1rem 1.2rem;box-shadow:0 20px 60px -10px #000;transition:opacity 260ms,transform 420ms var(--ease-out),visibility 0s 420ms}
.banner.on{opacity:1;transform:translate(-50%,0);visibility:visible;transition:opacity 260ms,transform 420ms var(--ease-out),visibility 0s}
.banner b{display:block;margin-bottom:.15rem}

/* Selbsttest */
.q{display:grid;gap:.7rem;padding-block:1rem;border-bottom:1px solid var(--line)}
.q:last-of-type{border-bottom:0}
.q p{font-weight:500}
.yn{display:inline-grid;grid-auto-flow:column;gap:.3rem;background:rgba(255,255,255,.05);border-radius:999px;padding:.25rem;border:1px solid var(--line);width:max-content}
.yn input{position:absolute;opacity:0;pointer-events:none}
.yn label{padding:.45rem 1.2rem;border-radius:999px;cursor:pointer;font-size:.93rem;color:var(--mut);transition:background 200ms,color 200ms,transform 160ms var(--ease-out);user-select:none;-webkit-user-select:none}
.yn label:active{transform:scale(.96)}
.yn input:checked+label{background:#fff;color:#000;font-weight:600}
.yn input:focus-visible+label{outline:2px solid #fff;outline-offset:2px}
.stick{align-self:start}
@media (min-width:900px){.stick{position:sticky;top:6rem}}
.score{display:flex;align-items:baseline;gap:.6rem;margin:.4rem 0 1rem}
.score b{font-size:clamp(3.4rem,10vw,5.4rem);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.meter{height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin-bottom:1.2rem}
.meter i{display:block;height:100%;width:100%;border-radius:inherit;background:#fff;transform-origin:left;transform:scaleX(var(--v,0));transition:transform 700ms var(--ease-out)}
.tips{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.6rem;color:var(--mut);font-size:.96rem}
.tips li{padding-left:1.4rem;position:relative}
.tips li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;border-radius:50%;border:1.5px solid #fff}
.tips li.ok::before{background:#fff}

/* Preise */
.price{display:flex;flex-direction:column;gap:1rem;min-height:100%}
.price .amt{font-size:clamp(2.1rem,5vw,2.9rem);letter-spacing:-.045em;font-weight:600;line-height:1}
.price .amt small{font-size:.95rem;color:var(--mut);letter-spacing:0;font-weight:400;margin-right:.3rem}
.price ul,.tick{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;color:var(--mut);font-size:.96rem}
.price li,.tick li{padding-left:1.5rem;position:relative}
.price li::before,.tick li::before{content:"";position:absolute;left:0;top:.5em;width:.7rem;height:.4rem;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) scale(.9)}
.price .btn{margin-top:auto}
.price.hl{background:#fff;border-color:#fff}
.price.hl,.price.hl h3,.price.hl .amt{color:#000}
.price.hl p,.price.hl ul,.price.hl .amt small{color:#333}
.price.hl li::before{border-color:#000}
.price.hl .btn-p{background:#000;color:#fff;border-color:#000}
.pbadge{position:absolute;top:1.1rem;right:1.1rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;background:#000;color:#fff;padding:.3rem .65rem;border-radius:99px;font-weight:700}
.fine-print{margin-top:1.4rem;color:var(--dim);font-size:.88rem}
.opt{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem .2rem;border-bottom:1px solid var(--line);cursor:pointer}
.opt input{width:1.3rem;height:1.3rem;accent-color:#fff;flex:none}
.opt span:first-of-type{flex:1}
.opt .pr{color:var(--mut);font-variant-numeric:tabular-nums;font-size:.92rem}
.big{font-size:clamp(2.4rem,7vw,3.8rem);letter-spacing:-.05em;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}

/* Versprechen */
.promise{display:grid;gap:1.6rem;align-items:center;border:1px solid var(--line-2);border-radius:28px;padding:clamp(1.5rem,5vw,3rem);background:var(--bg-2)}
@media (min-width:860px){.promise{grid-template-columns:1.3fr 1fr}}
.sig{font-family:var(--serif);font-style:italic;font-size:clamp(2rem,4.5vw,3rem);color:#fff;line-height:1;letter-spacing:-.02em}
.sig-line{width:min(16rem,100%);height:24px;margin-top:.4rem;overflow:visible}
.sig-line path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.3s var(--ease-io) .3s}
.sig-line.in path{stroke-dashoffset:0}
.facts{list-style:none;margin:0;padding:0}
.facts li{display:flex;justify-content:space-between;gap:1rem;padding-block:.85rem;border-bottom:1px solid var(--line);font-size:.97rem}
.facts li:last-child{border-bottom:0}
.facts span:first-child{color:var(--mut)}.facts span:last-child{text-align:right}

/* Ablauf, FAQ */
.steps{counter-reset:s;display:grid}
.step{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;padding-block:1.5rem;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--serif);font-style:italic;color:var(--mut);font-size:1.15rem;padding-top:.15rem}
.step h3{margin-bottom:.35rem}.step p{color:var(--mut)}
.step .when{display:block;margin-top:.55rem;font-size:.82rem;color:var(--dim);letter-spacing:.06em}
@media (min-width:800px){.step{grid-template-columns:5rem 1fr 14rem;align-items:baseline}.step .when{margin:0;text-align:right}}
.faq{display:grid;gap:.7rem;max-width:52rem}
.faq details{border:1px solid var(--line);border-radius:16px;background:var(--bg-2);transition:border-color 240ms}
.faq details[open]{border-color:var(--line-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.3rem;font-weight:500;user-select:none;-webkit-user-select:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:1.9rem;height:1.9rem;border-radius:50%;border:1px solid var(--line-2);flex:none;position:relative;transition:transform 320ms var(--ease-out),background 200ms}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:.7rem;height:1.5px;background:#fff;transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i{transform:rotate(45deg);background:rgba(255,255,255,.08)}
.faq .ans{padding:0 1.3rem 1.3rem;color:var(--mut);font-size:.98rem;max-width:44rem}

/* Kontakt, Fuß */
.contact{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:900px){.contact{grid-template-columns:.9fr 1.1fr}}
.form{display:grid;gap:1rem}
.mail{display:inline-flex;font-size:clamp(1.25rem,3vw,1.7rem);letter-spacing:-.03em;font-weight:600;border-bottom:1px solid var(--line-2);padding-bottom:.2rem;margin-top:1.2rem;overflow-wrap:anywhere}
@media (hover:hover) and (pointer:fine){.mail:hover{border-color:#fff}}
footer{border-top:1px solid var(--line);padding-block:3rem calc(2.5rem + env(safe-area-inset-bottom));color:var(--mut);font-size:.93rem}
.foot{display:grid;gap:2rem}
@media (min-width:800px){.foot{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot h4{margin:0 0 .8rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot-p{max-width:22rem;margin-top:.9rem}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:#fff}}
.foot-b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--dim);font-size:.85rem}

/* Textseiten */
.page{padding-top:9rem;padding-bottom:4rem}
.page h1{font-size:clamp(2.2rem,6vw,4.2rem);margin-bottom:1.4rem}
.prose{max-width:44rem;display:grid;gap:1.1rem;color:var(--mut)}
.prose h2{font-size:1.5rem;color:#fff;margin-top:1.6rem;letter-spacing:-.02em}
.prose strong{color:#fff}
.prose a,.inl{color:#fff;text-decoration:underline;text-underline-offset:3px}
.warn{border:1px solid var(--line-2);background:rgba(255,255,255,.06);color:#fff;border-radius:14px;padding:1rem 1.2rem;font-size:.95rem}
.article{max-width:46rem;display:grid;gap:1.1rem;color:var(--mut)}
.article h2{font-size:clamp(1.5rem,3vw,2rem);color:#fff;margin-top:1.8rem}
.article h3{color:#fff;margin-top:.8rem}
.article strong{color:#fff}
.article a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sidebox{border:1px solid var(--line-2);border-radius:18px;padding:1.2rem 1.4rem;background:var(--surface)}
.mh{margin:1rem 0}.mw{max-width:34rem}.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt16{margin-top:1.6rem}.pt0{padding-top:0}.pb0{padding-bottom:0}
.hero h1 .w:nth-child(1){animation-delay:120ms}.hero h1 .w:nth-child(2){animation-delay:175ms}.hero h1 .w:nth-child(3){animation-delay:230ms}.hero h1 .w:nth-child(4){animation-delay:285ms}.hero h1 .w:nth-child(5){animation-delay:340ms}.hero h1 .w:nth-child(6){animation-delay:395ms}.hero h1 .w:nth-child(7){animation-delay:450ms}.hero h1 .w:nth-child(8){animation-delay:505ms}.hero h1 .w:nth-child(9){animation-delay:560ms}.hero h1 .w:nth-child(10){animation-delay:615ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1 .w,.hero .rise{animation:none;opacity:1;filter:none;transform:none}
  .rv{transition:opacity 300ms;transform:none}
  .cone,.band-t{animation:none}
  .sheet,.sheet a{transition:opacity 200ms}
  .sheet{clip-path:none;opacity:0}.sheet.open{opacity:1}
  .sig-line path{transition:none;stroke-dashoffset:0}
  .bar i,.meter i{transition:none}
}
@media (prefers-contrast:more){:root{--line:rgba(255,255,255,.32);--mut:#d0d0d0}}
@media print{.site,.cone,.sheet,.band{display:none}body{background:#fff;color:#000}}

/* Ergänzungen: Unterseiten */
.hero.sub h1{font-size:clamp(2.2rem,6vw,4.6rem)}
.hero.sub .wrap{gap:1.3rem}
.crumbs span a{color:var(--mut)}.crumbs [aria-current]{color:#fff}
.mt0{margin-top:0}.mh0{margin-bottom:0}
.tick.cols{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.7rem 1rem}
.foot{gap:2rem}
@media (min-width:800px){.foot{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr}}
.foot li a{display:inline-block;padding-block:.15rem}
.dm-body>p.mt1{margin-top:1.4rem}
.more{color:#fff}
.price .btn{align-self:stretch}
.grid.g4 .card h3{font-size:1.1rem}
.result:focus{outline:2px solid #000;outline-offset:2px}
.card .big{font-size:1.9rem}
.chip small{font-size:.72rem;color:var(--dim);margin-left:.15rem}
.chip:disabled{opacity:.45;pointer-events:none}
.prod .btn{margin-top:auto}
.dm-intro h3{font-size:1.4rem;margin-bottom:.3rem}
input[type=search]{-webkit-appearance:none;appearance:none}
.stepper{justify-self:start}
.table caption{text-align:left;padding-bottom:.6rem}
.cart .two{grid-template-columns:1fr auto;gap:.5rem}
.card p.big{color:#fff}

/* ---- Seiten 2 ---- */
.dm-bar{scroll-snap-type:x proximity}
.dm-bar .tab{scroll-snap-align:start}
@media (min-width:900px){.dm-bar{flex-wrap:wrap;overflow-x:visible;scroll-snap-type:none}}
.dm+p.mt1{margin-top:1.4rem}

/* ---- Demos 2 ---- */
[data-demo] .chip,[data-demo] .btn,[data-demo] .btn-s{min-height:2.75rem}
[data-demo] .ci .mini button{width:2.75rem;height:2.75rem}
[data-demo] .inp,[data-demo] input,[data-demo] select,[data-demo] textarea{font-size:1rem}
[data-demo] .chip[disabled],[data-demo] .slot[disabled]{opacity:.4;pointer-events:none}
[data-demo] .stk{color:#fff;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
[data-demo] .result .hero-act{gap:.6rem}
[data-demo] .result .btn{color:#000;border-color:#000}
[data-demo] .result .btn-p{color:#fff}
.chk{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;color:var(--mut);min-height:2.75rem;line-height:1.4}
.chk input{width:1.4rem;height:1.4rem;flex:none;margin-top:.1rem;accent-color:#fff}
/* Speisekarte */
.menu{display:grid;gap:1.4rem}
.mc h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:.5rem;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.mi{display:grid;gap:.35rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.mi-h{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.mi-h b{font-size:1rem}
.mi-h .p{font-variant-numeric:tabular-nums;font-weight:600}
.mi p{color:var(--mut);font-size:.9rem}
.mi.out .mi-h b,.mi.out p,.mi.out .p{color:var(--dim);text-decoration:line-through}
.mi .btn{justify-self:start}
.tags{display:flex;flex-wrap:wrap;gap:.35rem}
.tag{border:1px solid var(--line-2);border-radius:99px;padding:.05rem .55rem;font-size:.7rem;letter-spacing:.08em;color:var(--mut)}
.tag.sold{background:#fff;color:#000;border-color:#fff;letter-spacing:.04em;font-weight:600}
.menu-qr{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;border:1px solid var(--line-2);border-radius:20px;padding:1rem}
.menu-qr .qr{width:7.4rem;height:7.4rem;background:#fff;border-radius:10px;overflow:hidden;display:grid;place-items:center;color:#000}
.menu-qr p{margin-top:.3rem}
/* Bewertung */
.stars{display:flex;gap:.3rem}
.star{width:3rem;height:3rem;font-size:1.9rem;line-height:1;border-radius:12px;border:1px solid var(--line-2);color:#fff;transition:background 160ms,color 160ms,transform 160ms var(--ease-out)}
.star:active{transform:scale(.92)}
.star[aria-checked=true]{background:#fff;color:#000;border-color:#fff}
.star:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Stempelkarte */
.lcard{background:#fff;color:#000;border-radius:22px;padding:1.4rem;display:grid;gap:.8rem}
.lcard small{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#555}
.lcard b{font-size:1.5rem;letter-spacing:-.03em;line-height:1.1;overflow-wrap:anywhere}
.lcard p{color:#333;font-size:.94rem}
.stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}
.stamp{aspect-ratio:1/1;border:2px solid #000;border-radius:50%;display:grid;place-items:center;font-size:.9rem;color:#777;font-variant-numeric:tabular-nums;transition:background 220ms,color 220ms,transform 260ms var(--ease-out)}
.stamp.on{background:#000;color:#fff;transform:scale(1.04)}
.stamp.gift{font-size:1.3rem;border-style:dashed}
.stamp.gift.on{border-style:solid}
/* Newsletter */
.mailcard{background:#fff;color:#000;border-radius:16px;padding:1.2rem;display:grid;gap:.6rem;border:1px solid #ddd}
.mailcard small{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#555}
.mailcard b{font-size:1.2rem;letter-spacing:-.02em}
.mailcard p{color:#333;font-size:.92rem;overflow-wrap:anywhere}
.mailcard .btn{justify-self:start;background:#000;color:#fff;border-color:#000}
.mailcard[hidden]{display:none}
@media (max-width:400px){.star{width:2.75rem;height:2.75rem}.menu-qr{grid-template-columns:1fr}}

/* ---- Korrekturen ---- */
[hidden]{display:none!important}
.stamps{grid-template-columns:repeat(5,minmax(0,1fr))}
.stamp.on{transform:none}