:root{--build:"b32"}
[hidden]{display:none!important}   /* sonst überschreiben display-Regeln das hidden-Attribut (z. B. Ergebnisbild im Kreis) */
@font-face{font-family:Cinzel;src:url(fonts/cinzel.woff) format("woff");font-weight:400 900;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/cormorant.woff) format("woff");font-weight:300 700;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/cormorant-italic.woff) format("woff");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/plus-jakarta-sans.woff) format("woff");font-weight:200 800;font-display:swap}
:root{--bg:#17110c;--card:#1f1711;--gold:#c9a24a;--gold-t:#e8c977;--grad:linear-gradient(180deg,#e8c977,#c9a24a);--text:#efe7d8;--muted:#a8998a;--line:rgba(201,162,74,.25)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:400 1rem/1.6 "Plus Jakarta Sans",system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3,.logo,.btn{font-family:Cinzel,Georgia,serif}
a{color:var(--gold-t)}
:focus-visible{outline:2px solid var(--gold-t);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.gold-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
header.top{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.logo{font-size:1.5rem;font-weight:700;letter-spacing:.2em;text-decoration:none}
.btn{display:inline-block;padding:.85rem 2rem;border-radius:50px;font-size:.9rem;font-weight:600;letter-spacing:.1em;cursor:pointer;text-decoration:none;border:1px solid var(--line);background:transparent;color:var(--gold-t);transition:transform .2s,box-shadow .2s}
.btn-gold{background:var(--grad);color:#0b0b0b;border:0}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,175,55,.25)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.hero{padding:5rem 0 4rem;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.2;margin-bottom:1.25rem}
.hero p{max-width:60ch;margin:0 auto 2rem;color:var(--muted);font-weight:300}
h2.title,h1.title{font-size:clamp(1.5rem,3vw,2rem);text-align:center;margin-bottom:2.5rem}
section.block{padding:3rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.75rem}
.card h3{font-size:1.1rem;margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.92rem}
.disc-mock{width:200px;aspect-ratio:1;border-radius:50%;border:2px solid var(--gold);margin:0 auto 1.25rem;display:grid;place-items:center;color:var(--gold-t);font-family:Cinzel,serif;background:radial-gradient(#222,#0f0f0f)}
footer{margin-top:3rem;padding:2.5rem 0;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.85rem}
footer a{margin:0 .6rem;text-decoration:none}
/* Konfigurator */
.steps{display:flex;max-width:720px;margin:2rem auto;list-style:none;gap:.5rem}
.steps li{flex:1;text-align:center;font-size:.75rem;color:var(--muted)}
.steps b{display:grid;place-items:center;width:28px;height:28px;margin:0 auto .3rem;border-radius:50%;border:2px solid #333;font-weight:600}
.steps li[aria-current=step]{color:var(--gold-t)}
.steps li[aria-current=step] b,.steps li.done b{border-color:var(--gold)}
.steps li.done b{background:var(--gold);color:#0b0b0b}
.cfg{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.panel{padding:2rem}
.panel h2{font-size:1.4rem;margin-bottom:1.5rem}
.field{margin-bottom:1.25rem}
.field label{display:block;margin-bottom:.4rem;font-size:.85rem;color:var(--gold-t);font-weight:500}
input,select{width:100%;padding:.85rem;background:#2a2017;color:#fff;border:1px solid var(--line);border-radius:8px;font:inherit}
input[type=range]{padding:0;accent-color:var(--gold)}
input[type=checkbox]{width:auto;margin-right:.5rem}
.row{display:flex;gap:1rem}.row>*{flex:1}
.nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}
.msg{min-height:1.4em;font-size:.85rem;color:#ff8f8f;margin-top:.75rem}
.price{color:var(--gold-t);font-size:1.1rem}
.hint{color:var(--muted);font-size:.8rem}
.preview{position:sticky;top:1rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
#variants{width:min(100%,400px)}
.board{--w:50;--h:50;width:min(100%,400px);aspect-ratio:var(--w)/var(--h);max-height:75vh;border:2px solid #333;border-radius:8px;display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:0 15px 35px rgba(0,0,0,.6);transition:background .3s}
.board[data-wood=weiss]{background:url(img/holz/weiss.jpg) center/cover}
.board[data-wood=mdf]{background:url(img/holz/mdf.jpg) center/cover}
.board[data-wood=eiche]{background:url(img/holz/eiche.jpg) center/cover}
.board[data-wood=nussbaum]{background:url(img/holz/nussbaum.jpg) center/cover}
.board[data-wood=esche]{background:url(img/holz/esche.jpg) center/cover}
.board[data-wood=beton]{background:url(img/holz/beton.jpg) center/cover}
.disc{width:78%;aspect-ratio:1;border-radius:50%;background:#fff;overflow:hidden;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.board.wide .disc{width:auto;height:78%}
.board.round{border-radius:50%}
.board.round .disc,.board.round.wide .disc{width:97%;height:auto}   /* rundes Holz: Nägel sitzen direkt am Rand */
.disc canvas,.disc img{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.disc .ph{color:#666;font-size:.85rem;padding:1rem;text-align:center}
.spin{width:44px;height:44px;border:4px solid #222;border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite;position:absolute}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation-duration:3s}.btn{transition:none}}
@media(max-width:900px){.cfg{grid-template-columns:1fr}.preview{position:static;order:-1}.steps li span{display:none}}
/* Rechtstexte */
.legal{max-width:760px;margin:2.5rem auto}
.legal h1{font-size:1.8rem;margin-bottom:1.5rem}
.legal h2{font-size:1.1rem;margin:1.75rem 0 .5rem;color:var(--gold-t)}
.legal p,.legal li{color:#d8d8d8;font-size:.95rem;margin-bottom:.6rem}
.legal ul{padding-left:1.25rem}
mark{background:rgba(212,175,55,.2);color:var(--gold-t);padding:0 .25rem;border-radius:3px}
/* Menü, Zoom, Startseite */
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;padding:.6rem 1.4rem;border:1px solid var(--line);border-radius:50px;color:var(--gold-t);font-family:Cinzel,Georgia,serif;letter-spacing:.1em}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:0;top:calc(100% + .5rem);min-width:230px;z-index:10;display:flex;flex-direction:column;gap:.25rem;padding:.5rem;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.6)}
.menu nav a{padding:.7rem 1rem;border-radius:8px;text-decoration:none;color:var(--text)}
.menu nav a:hover{background:#222}
.menu nav a.cta{background:var(--grad);color:#0b0b0b;font-weight:600}
.row>.zbtn{flex:0 0 46px;padding:.6rem 0;font-size:1.2rem;line-height:1}
.cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
/* Warenkorb */
.head-right{display:flex;align-items:center;gap:1rem}
.cartlink{color:var(--gold-t);text-decoration:none;font-size:.9rem}
.cart{max-width:760px;margin:0 auto;display:grid;gap:1rem}
.cart-item{display:flex;align-items:center;gap:1rem;padding:1rem}
.cart-item img{border-radius:50%;object-fit:cover;background:#fff}
.cart-item>div{flex:1}
.cart-item h3{font-size:1rem;margin-bottom:.2rem}
.cart-empty{text-align:center;color:var(--muted)}
/* Beispielbilder */
.disc-mock.ex{position:relative;width:220px;overflow:hidden}
.disc-mock.ex img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
/* Varianten-Auswahl */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.vopt{background:none;border:2px solid var(--line);border-radius:12px;padding:.4rem;color:var(--text);font:inherit;font-size:.78rem;cursor:pointer;text-align:center}
.vopt img,.vopt canvas{display:block;width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;background:#222;margin-bottom:.35rem}
.vopt img{display:none}
.vopt.fin img{display:block}
.vopt.fin canvas{display:none}
.vopt.wait{opacity:.5;cursor:default}
.vopt.wait canvas{visibility:hidden}
.vopt.wait span::after{content:" …"}
.vopt.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,175,55,.35)}
.vp{display:block;color:var(--muted);font-size:.7rem;min-height:1em}


.sugg-h{font-size:1rem;margin:1.2rem 0 .3rem;color:var(--gold)}
.vopt .xp{display:block;font-style:normal;font-weight:700;color:var(--gold);margin-top:.15rem;font-size:.8rem}
.vopt.wait.drawing canvas{visibility:visible}
.gs-vals{display:flex;flex-wrap:wrap;gap:.5rem}
.gs-val{padding:.6rem 1.2rem}
.gs-val.on{background:var(--grad);color:#0b0b0b;border-color:transparent}
.gs-val{display:flex;flex-direction:column;align-items:center;line-height:1.25}
.gs-p{font-size:.78rem;font-weight:600;opacity:.85}
.gs-sale{display:flex;flex-direction:column;gap:.2rem;max-width:560px;margin-bottom:1rem;padding:.8rem 1rem;border-radius:12px;background:var(--grad);color:#0b0b0b}
.gs-sale span{font-size:.9rem}
.gs-code{font-family:ui-monospace,Menlo,monospace;font-size:2rem;letter-spacing:.12em;color:var(--gold-t);margin:1rem 0}
.linkbtn{background:none;border:0;color:var(--gold-t);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.biginfo{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin:.6rem 0 .2rem;font-size:.9rem;color:var(--gold-t)}
.biginfo .btn{padding:.5rem 1.1rem}
.zoomov{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.94);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.zoomov[hidden]{display:none}
.zbar{display:flex;gap:.5rem;justify-content:center;padding:.6rem}
.zbar .btn{padding:.5rem 1.2rem}
.zscroll{flex:1;overflow:auto;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
.zscroll img{display:block;max-width:none;width:200%;height:auto;margin:0 auto}
.cart-thumb{position:relative;display:block;flex:0 0 140px}
.cart-thumb img{display:block;width:140px;height:140px;border-radius:50%;object-fit:cover;background:#222}
.cart-thumb span{display:none;font-size:.75rem;color:var(--muted)}
.cart-thumb.noimg img{display:none}
.cart-thumb.noimg span{display:block}
@media(max-width:520px){.cart-item{flex-wrap:wrap}.cart-thumb{flex-basis:100px}.cart-thumb img{width:100px;height:100px}}

/* ===== Startseite (Luxus, Apple-artiges Scrollen) ===== */
:root{--ink:#0a0908;--ink2:#121110;--paper:#f2ede4;--gold2:#c39a3e;--ease:cubic-bezier(.2,.7,.15,1)}
body.home{background:var(--ink)}
body.home header.top{position:fixed;inset:0 0 auto 0;z-index:40;padding:1.1rem max(1.25rem,calc(50% - 600px));border-bottom:1px solid transparent;transition:background .5s,border-color .5s,padding .5s}
body.home.scrolled header.top{background:rgba(10,9,8,.72);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:rgba(195,154,62,.18);padding-block:.7rem}
.bleed{width:100vw;margin-left:calc(50% - 50vw)}
.home em{font-family:Cormorant,Georgia,serif;font-style:italic;font-weight:500;letter-spacing:0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.08em}
.eyebrow{display:block;font:600 .72rem/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--gold2);margin-bottom:1.1rem}
.center{text-align:center}
.h2{font-family:Cinzel,Georgia,serif;font-weight:500;font-size:clamp(2rem,5.2vw,3.8rem);line-height:1.08;letter-spacing:.01em;margin-bottom:2.5rem;text-wrap:balance}
.h2 em{font-size:1.12em}
.lead{color:#cfc8bc;font-size:clamp(1.02rem,1.6vw,1.2rem);font-weight:300;max-width:52ch}
.fine{color:#8d867b;font-size:.82rem;margin-top:1.75rem}
.fine.center{margin-inline:auto;max-width:70ch}

/* Einblenden von unten */
.rv{opacity:0;transform:translateY(48px);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.3s var(--ease) var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* Hero */
.h-hero{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,5vw,5rem);padding:7rem max(1.25rem,calc(50% - 600px)) 4rem;position:relative;overflow:hidden;
  background:radial-gradient(60% 55% at 28% 48%,rgba(195,154,62,.13),transparent 70%),radial-gradient(40% 40% at 90% 10%,rgba(255,255,255,.04),transparent 70%),var(--ink)}
.h-hero-art{position:relative;aspect-ratio:1;width:min(100%,640px);justify-self:center}
.h-hero-art canvas,.h-hero-art img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;box-shadow:0 40px 90px -20px rgba(0,0,0,.9),0 0 0 1px rgba(195,154,62,.35),0 0 0 10px rgba(195,154,62,.05)}
.h-hero-art img{opacity:0;transition:opacity 1.6s var(--ease)}
.h-hero-art img.on{opacity:1}
.h-count{position:absolute;right:2%;bottom:4%;font:500 .78rem "Plus Jakarta Sans";letter-spacing:.14em;text-transform:uppercase;color:#a79d8d;background:rgba(10,9,8,.7);border:1px solid rgba(195,154,62,.3);border-radius:99px;padding:.45rem .9rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.h-count b{color:var(--gold-t);font-variant-numeric:tabular-nums;font-weight:600}
.h-hero h1{font-family:Cinzel,Georgia,serif;font-weight:500;font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1.05;margin-bottom:1.6rem;color:var(--paper)}
.h-hero h1 em{font-size:1.15em}
.h-hero .cta-row{justify-content:flex-start;margin-top:2.25rem}
.scroll-hint{position:absolute;left:50%;bottom:1.6rem;width:1px;height:56px;background:linear-gradient(rgba(195,154,62,0),rgba(195,154,62,.7));overflow:hidden}
.scroll-hint span{position:absolute;left:-1px;top:-20px;width:3px;height:20px;background:var(--gold-t);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{to{top:60px}}

/* Zoom: von der Linie zum Bild */
.zoom{height:280vh;position:relative}
.zoom-stick{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;background:var(--ink)}
.zoom-img{width:min(78vmin,760px);aspect-ratio:1;border-radius:50%;overflow:hidden;transform:scale(4.2);will-change:transform;box-shadow:0 0 0 1px rgba(195,154,62,.35)}
.zoom-img img{width:100%;height:100%;object-fit:cover;display:block}
.zoom-text{position:absolute;inset:0;pointer-events:none}
.zt{position:absolute;left:max(1.25rem,calc(50% - 600px));bottom:12vh;font-family:Cinzel,Georgia,serif;font-size:clamp(2rem,5vw,3.6rem);line-height:1.08;color:var(--paper);text-shadow:0 4px 40px rgba(0,0,0,.9);max-width:14ch}
.zt2{left:auto;right:max(4.5rem,calc(50% - 600px));text-align:right;opacity:0}
.zt em{font-size:1.1em}

/* Allgemeine Abschnitte */
.h-block{padding:clamp(5rem,12vw,9rem) 0}
.h-block.narrow{max-width:820px;margin:0 auto}

/* Zahlen */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(195,154,62,.2);border:1px solid rgba(195,154,62,.2);border-radius:20px;overflow:hidden}
.stat{background:var(--ink);padding:2.5rem 1.5rem;text-align:center}
.stat b{display:block;font-family:Cinzel,Georgia,serif;font-weight:500;font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;margin-bottom:.9rem}
.stat span{color:#a79d8d;font-size:.9rem}

/* Schritte */
.steps-v{list-style:none;max-width:860px;margin:0 auto;display:grid;gap:0}
.steps-v li{display:grid;grid-template-columns:5.5rem 1fr;gap:1.5rem;padding:2.2rem 0;border-top:1px solid rgba(195,154,62,.18)}
.steps-v li:last-child{border-bottom:1px solid rgba(195,154,62,.18)}
.steps-v .num{font-family:Cormorant,Georgia,serif;font-style:italic;font-size:3.2rem;line-height:1;color:var(--gold2)}
.steps-v h3{font-family:Cinzel,Georgia,serif;font-weight:500;font-size:1.35rem;margin-bottom:.5rem;color:var(--paper)}
.steps-v p{color:#b4ab9d;max-width:60ch}

/* Split mit Bild */
.h-split{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(2rem,6vw,6rem);padding:clamp(4rem,10vw,8rem) max(1.25rem,calc(50% - 600px));background:linear-gradient(180deg,var(--ink),#16130f 50%,var(--ink))}
.split-img img{width:100%;display:block;border-radius:6px;box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
.split-copy p:not(.eyebrow){color:#b4ab9d;margin-bottom:1rem;max-width:54ch}

/* Holz */
.wood{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.wood-board{aspect-ratio:1;width:min(100%,520px);justify-self:center;display:grid;place-items:center;box-shadow:0 0 0 10px #141312,0 0 0 11px rgba(195,154,62,.55),0 50px 90px -30px rgba(0,0,0,.95);transition:background-image .5s}
.wood-board img{width:88%;aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.wood-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.wood-sw{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:.9rem;align-items:center;text-align:left;padding:.7rem;border-radius:14px;background:var(--ink2);border:1px solid rgba(195,154,62,.16);color:var(--paper);font:inherit;cursor:pointer;transition:border-color .3s,transform .3s}
.wood-sw:hover{transform:translateY(-2px)}
.wood-sw i{grid-row:1/3;width:52px;height:52px;border-radius:10px;background-size:cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.wood-sw span{font-size:.92rem;font-weight:500}
.wood-sw small{color:#8d867b;font-size:.78rem}
.wood-sw.on{border-color:var(--gold2);box-shadow:0 0 0 1px var(--gold2)}

/* Galerie */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.gallery figure{margin:0}
.gallery img{width:100%;display:block;aspect-ratio:1;object-fit:cover;border-radius:6px;transition:transform 1.2s var(--ease)}
.gallery figure:hover img{transform:scale(1.03)}
.gallery figcaption{color:#8d867b;font-size:.82rem;margin-top:.7rem;letter-spacing:.04em}

/* Größen */
.sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;align-items:end}
.size{text-align:center;padding:2rem 1rem;border-radius:18px;background:var(--ink2);border:1px solid rgba(195,154,62,.14)}
.size-sq{height:140px;display:grid;place-items:end center;margin-bottom:1.25rem}
.size-sq span{display:block;width:calc(var(--s) * 1.25px);aspect-ratio:1;border:1px solid var(--gold2);border-radius:3px;background:radial-gradient(circle,rgba(195,154,62,.16) 0 62%,transparent 63%)}
.size h3{font-family:Cinzel,Georgia,serif;font-weight:500;font-size:1.6rem;color:var(--paper)}
.size p{color:#8d867b;font-size:.88rem;margin:.15rem 0 .6rem}
.size b{color:var(--gold-t);font-weight:600}

/* FAQ */
.faq details{border-top:1px solid rgba(195,154,62,.18);padding:1.35rem 0}
.faq details:last-child{border-bottom:1px solid rgba(195,154,62,.18)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-family:Cinzel,Georgia,serif;font-size:1.08rem;color:var(--paper)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:Cormorant,serif;font-size:1.8rem;line-height:.8;color:var(--gold2);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:#b4ab9d;margin-top:.8rem;max-width:62ch}

/* Schluss */
.h-final{text-align:center;padding:clamp(6rem,14vw,10rem) 1.25rem;background:radial-gradient(50% 60% at 50% 50%,rgba(195,154,62,.14),transparent 70%)}
.h-final .lead{margin:0 auto 2.25rem}

/* Faden-Leiste rechts */
.thread{position:fixed;right:clamp(10px,2vw,28px);top:110px;z-index:30;width:24px;pointer-events:none}
.thread-svg{display:block;width:24px;overflow:visible}
.t-base{stroke:rgba(242,237,228,.12);stroke-width:1;fill:none}
.t-gold{stroke:var(--gold2);stroke-width:1.5;fill:none;filter:drop-shadow(0 0 4px rgba(212,175,55,.6))}
.thread-pins{list-style:none;position:absolute;inset:0}
.thread-pins li{position:absolute;right:0;transform:translateY(-50%);pointer-events:auto}
.thread-pins a{display:flex;align-items:center;flex-direction:row-reverse;gap:.7rem;text-decoration:none;width:24px;height:24px;justify-content:flex-start;position:relative}
.thread-pins i{flex:0 0 auto;width:9px;height:9px;margin-right:7.5px;border-radius:50%;background:#2a2723;box-shadow:0 0 0 1px rgba(242,237,228,.25);transition:background .4s,box-shadow .4s,transform .4s}
.thread-pins span{position:absolute;right:30px;white-space:nowrap;font:500 .72rem "Plus Jakarta Sans";letter-spacing:.14em;text-transform:uppercase;color:#cfc8bc;opacity:0;transform:translateX(6px);transition:opacity .4s,transform .4s}
.thread-pins li.on i{background:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 10px rgba(212,175,55,.7)}
.thread-pins li.cur i{transform:scale(1.35)}
.thread-pins li.cur span,.thread-pins a:hover span,.thread-pins a:focus-visible span{opacity:1;transform:none}

/* Mobil */
@media(max-width:900px){
  .h-hero{grid-template-columns:1fr;padding-top:6rem;text-align:left}
  .h-hero-art{width:min(88vw,460px)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .h-split,.wood{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .sizes{grid-template-columns:repeat(2,1fr)}
  .size-sq{height:110px}.size-sq span{width:calc(var(--s) * .95px)}
  .zt2{right:2.5rem}
  .thread-pins span{display:none}
  .steps-v li{grid-template-columns:3.5rem 1fr;gap:1rem}
  .steps-v .num{font-size:2.4rem}
}
@media(max-width:520px){.wood-pick{grid-template-columns:1fr}.zt{bottom:9vh}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.zoom{height:auto}.zoom-stick{position:relative;height:auto;padding:4rem 0}.zoom-img{transform:none}.zt2{opacity:1}.zt{position:static;margin:1.5rem auto;text-align:center}.scroll-hint span{animation:none}}
.wood-board[data-wood=weiss]{background:url(img/holz/weiss.jpg) center/cover}
.wood-board[data-wood=mdf]{background:url(img/holz/mdf.jpg) center/cover}
.wood-board[data-wood=eiche]{background:url(img/holz/eiche.jpg) center/cover}
.wood-board[data-wood=nussbaum]{background:url(img/holz/nussbaum.jpg) center/cover}
.wood-board[data-wood=esche]{background:url(img/holz/esche.jpg) center/cover}
.wood-board[data-wood=beton]{background:url(img/holz/beton.jpg) center/cover}
/* Feinschliff */
body.home .logo{white-space:nowrap}
.zoom-text::before{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,rgba(10,9,8,.85))}
.thread-pins span{background:rgba(10,9,8,.85);padding:.3rem .6rem;border-radius:99px;border:1px solid rgba(195,154,62,.25)}
@media(max-width:900px){
  body.home .logo{font-size:1.05rem;letter-spacing:.16em}
  body.home .wrap{padding-right:1.7rem}
  .thread{right:3px;width:14px;top:96px}
  .thread-svg{width:14px}
  .thread-pins a{width:14px;height:14px}
  .thread-pins i{width:6px;height:6px;margin-right:4px}
  .h-hero,.h-split{padding-right:1.9rem}
}
/* Hero-Siegel */
.seal-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transform:scale(.96);transition:opacity 1.6s var(--ease),transform 1.8s var(--ease)}
.seal-ring.on{opacity:1;transform:none}
.seal-ring text{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:46px;letter-spacing:.42em;fill:#d9b65a}
.seal-ring text.sub{font-size:24px;font-weight:500;letter-spacing:.6em;fill:#a98a45}
/* Nah & fern (ersetzt den Zoom) */
.nf{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,4vw,3rem);max-width:860px;margin:0 auto}
.nf figure{margin:0;text-align:center}
.nf img{width:100%;max-width:380px;aspect-ratio:1;object-fit:cover;border-radius:50%;display:block;margin:0 auto 1.25rem;box-shadow:0 0 0 1px rgba(195,154,62,.4),0 30px 60px -25px rgba(0,0,0,.9)}
.nf figcaption{color:#b4ab9d;font-size:.92rem;max-width:30ch;margin:0 auto}
.nf figcaption b{display:block;font-family:Cinzel,Georgia,serif;font-weight:500;font-size:1.15rem;color:var(--paper);margin-bottom:.3rem}
@media(max-width:600px){.nf{grid-template-columns:1fr 1fr;gap:1rem}.nf figcaption{font-size:.8rem}.nf figcaption b{font-size:.95rem}}
/* Faden-Leiste: einfache Linien, gut sichtbar */
.thread{width:24px}
.t-line{position:relative;width:2px;margin-left:11px;background:rgba(242,237,228,.22);border-radius:2px}
.t-fill{position:absolute;inset:0;background:linear-gradient(var(--gold-t),var(--gold));transform-origin:top;transform:scaleY(0);box-shadow:0 0 8px rgba(212,175,55,.7);border-radius:2px}
.thread-pins{top:0;bottom:auto}
@media(max-width:900px){.thread{width:14px;right:4px}.t-line{margin-left:6px}}
/* Holz in echter Größe: Textur zeigt 120 cm, ein kleines Brett zeigt also gröbere Maserung als ein großes */
.board[data-wood]{background-size:calc(12000% / var(--w)) auto!important;background-position:center!important}
/* Freistellen nacharbeiten */
.cut-tools{display:grid;gap:.7rem;margin-top:1rem;padding:1rem;border:1px solid var(--line);border-radius:12px}
.cut-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:#1f1f1f;border-radius:10px}
.cut-seg button{font:inherit;font-size:.85rem;padding:.55rem .3rem;border:0;border-radius:8px;background:transparent;color:var(--text);cursor:pointer}
.cut-seg button.on{background:#2c2618;box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold-t)}
.cut-l{font-size:.85rem;color:var(--gold-t)}
.cut-tools .row .btn{padding:.6rem 1rem;font-size:.8rem}

/* Nur für Screenreader und Suchmaschinen sichtbar */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Foto hochladen: große Schaltfläche statt des schlichten Browser-Feldes; leerer Kreis öffnet ebenfalls die Auswahl */
.upload-btn{display:block;width:100%;text-align:center;padding:1rem 1.2rem;font-size:1rem}
#file:focus-visible+.upload-btn{outline:2px solid currentColor;outline-offset:3px}
.upload .hint{margin-top:.6rem}
.disc .ph{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* Handy: Tippflächen mindestens 44 px hoch (Kopfzeile, Fußzeile) */
@media(max-width:700px){
  .top .logo,.top .cartlink{display:inline-flex;align-items:center;min-height:44px}
  footer nav a{display:inline-block;padding:.7rem .2rem}
}