/* Faded Art – Startseite v2
   Idee: Graphit und Silber wie Nagel und Faden. Dunkel ist Standard, hell per Schalter oben rechts.
   Ein einziger großer Moment: beim Scrollen spannt sich ein echtes Fadenbild. */
body.v2{
  /* Farben als Variablen: dunkel ist Standard, hell über den Schalter oben (html[data-theme=light]).
     Namen von früher (walnut, gold, ivory) bleiben, damit nichts bricht: walnut = Grund, gold = Akzent (jetzt Silber), ivory = Text. */
  --walnut:#111214; --walnut-2:#181a1d; --walnut-3:#22252a;
  --gold:#a7aeb7; --gold-hi:#e6e9ed; --ivory:#eceef1; --muted:#9aa0a8; --faint:#6f757d; --soft:#c9ced4;
  --acc:167,174,183; --acchi:230,233,237; --bgrgb:17,18,20; --fgrgb:236,238,241;
  --on-acc:#121417; --glow:#1f2226; --deep:#0c0d0f; --frame:#0c0d0f; --knob-dark:#5d646c;
  --line:rgba(var(--acc),.18);
  --serif:Cormorant,Georgia,serif; --sans:"Plus Jakarta Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.15,1);
  /* für die älteren Seiten (style.css) */
  --bg:var(--walnut); --card:var(--walnut-2); --gold-t:var(--gold-hi); --text:var(--ivory);
  --grad:linear-gradient(180deg,var(--gold-hi),var(--gold));
  color-scheme:dark;
  background:var(--walnut); color:var(--ivory); font-family:var(--sans); font-size:1.0625rem; line-height:1.65;
  transition:background-color .35s,color .35s;
}
html[data-theme=light] body.v2{
  --walnut:#f3f3f1; --walnut-2:#ffffff; --walnut-3:#e7e8ea;
  --gold:#5f6873; --gold-hi:#2b3138; --ivory:#16181b; --muted:#5b6169; --faint:#80868d; --soft:#3a3f45;
  --acc:95,104,115; --acchi:43,49,56; --bgrgb:243,243,241; --fgrgb:22,24,27;
  --on-acc:#ffffff; --glow:#ffffff; --deep:#e9eaec; --frame:#16181b; --knob-dark:#2b3138;
  color-scheme:light;
}
body.v2 .wrap{max-width:none;padding:0}
body.v2 main{overflow:clip}

/* Kopfzeile */
body.v2 header.top{position:fixed;inset:0 0 auto 0;z-index:40;padding:1rem max(1.25rem,calc(50% - 620px));border-bottom:1px solid transparent;transition:background .5s,border-color .5s,padding .5s}
body.v2.scrolled header.top{background:rgba(var(--bgrgb),.78);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-bottom-color:var(--line);padding-block:.65rem}
body.v2 .logo{white-space:nowrap;font-size:1.15rem}
body.v2 .menu summary{font-family:var(--sans);letter-spacing:.02em;font-size:.92rem;padding:.5rem 1.15rem}
body.v2 .menu nav{background:var(--walnut-2)}
body.v2 .cartlink{font-size:.92rem}
body.v2 footer{max-width:1240px;margin:0 auto;padding-inline:1.25rem;border-top-color:var(--line)}

/* Typo */
body.v2 h1,body.v2 h2,body.v2 h3{font-family:var(--serif);font-weight:500;letter-spacing:0;color:var(--ivory)}
.h2{font-size:clamp(2.1rem,5vw,3.9rem);line-height:1.05;margin:0 0 1.25rem;text-wrap:balance}
.sub{color:var(--muted);max-width:56ch;margin-bottom:2.5rem}
.lead{color:var(--soft);font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:46ch}
.fine{color:var(--faint);font-size:.85rem;margin-top:2rem;max-width:72ch}
body.v2 .btn{font-family:var(--sans);letter-spacing:.01em;font-weight:600;font-size:.98rem;padding:.9rem 1.7rem;border-radius:999px}
body.v2 .btn-gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--on-acc)}
body.v2 .btn-quiet{border-color:transparent;color:var(--ivory);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.35em;padding-inline:.5rem}
body.v2 .btn-quiet:hover{box-shadow:none;color:var(--gold-hi)}
body.v2 .cta-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}

/* Abschnitte */
.sec{max-width:1240px;margin:0 auto;padding:clamp(5rem,11vw,9rem) clamp(1.25rem,4vw,3rem)}
.sec + .sec{border-top:1px solid var(--line)}

/* 1. Hero */
.hero{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,5vw,5rem);
  padding:6.5rem max(1.25rem,calc(50% - 620px)) 3rem;
  background:radial-gradient(55% 60% at 30% 50%,var(--glow) 0%,transparent 70%),var(--walnut)}
.hero-art{position:relative;width:min(100%,660px,78svh);aspect-ratio:1;justify-self:center}
.hero-art canvas{width:100%;height:100%;display:block}
.hero-count{position:absolute;right:6%;bottom:6%;font-size:.85rem;color:var(--muted)}
.hero-count b{color:var(--gold-hi);font-weight:600;font-variant-numeric:tabular-nums}
.mark{font-family:Cinzel,Georgia,serif;font-weight:600;letter-spacing:.32em;color:var(--gold);font-size:.95rem;margin-bottom:1.75rem}
.hero h1{font-size:clamp(3rem,7.4vw,6.4rem);line-height:.98;margin:0 0 1.75rem;font-weight:400}
.hero .lead{margin-bottom:2.25rem}

/* 2. Wie es entsteht: Regler zum Ziehen */
.build{background:linear-gradient(var(--walnut),var(--deep) 20%,var(--deep) 80%,var(--walnut));padding:clamp(4.5rem,9vw,7rem) max(1.25rem,calc(50% - 620px))}
.build-in{display:grid;grid-template-columns:minmax(0,1.2fr) auto minmax(0,1fr);align-items:center;gap:clamp(1.25rem,3vw,2.75rem)}
.build-stage{position:relative;width:min(100%,78svh,620px);aspect-ratio:1;justify-self:center}
.build-art,.build-art canvas{width:100%;height:100%;display:block;border-radius:50%}
.build-art{box-shadow:0 0 0 1px rgba(var(--acc),.45),0 40px 90px -30px #000}
.build-orig{position:absolute;left:-4%;top:-4%;width:30%;margin:0;z-index:2}
.build-orig img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;display:block;box-shadow:0 0 0 3px var(--walnut),0 0 0 4px var(--gold),0 14px 30px -10px #000}
.build-orig figcaption{text-align:center;font-size:.82rem;color:var(--muted);margin-top:.5rem}
.build-meter{position:absolute;right:-2%;bottom:-2%;display:grid;gap:.15rem;text-align:right;background:rgba(var(--bgrgb),.85);border:1px solid var(--line);border-radius:14px;padding:.7rem 1rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.build-meter p{display:flex;align-items:baseline;justify-content:flex-end;gap:.5rem;line-height:1.2}
.build-meter b{font-family:var(--serif);font-weight:500;font-size:1.7rem;color:var(--gold-hi);font-variant-numeric:tabular-nums;min-width:3.6ch}
.build-meter span{font-size:.8rem;color:var(--muted)}
.build-steps{list-style:none;display:grid;margin:1.25rem 0 0}
.build-steps li{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.build-steps li.on{opacity:1;transform:none}
.build-steps h3{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.1;margin-bottom:.6rem;color:var(--gold-hi)}
.build-steps p{color:var(--soft);max-width:40ch}
body.v2 .linkbtn{color:var(--gold-hi)}
/* Regler: senkrechtes Lineal mit Raster, Knopf zum Ziehen */
.scrub-wrap{height:min(78svh,620px);display:flex;align-items:stretch;padding:0 2.6rem 0 .5rem}
.scrub{position:relative;width:44px;cursor:grab;touch-action:none;outline:none}
.scrub.drag{cursor:grabbing}
.scrub::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;background:rgba(var(--fgrgb),.18);border-radius:2px}
.scrub-fill{position:absolute;left:21px;top:0;width:2px;height:0;background:linear-gradient(var(--gold-hi),var(--gold));box-shadow:0 0 8px rgba(var(--acchi),.6)}
.scrub-ticks span{position:absolute;top:var(--p);left:14px;width:8px;height:1px;background:rgba(var(--fgrgb),.35)}
.scrub-ticks span.big{width:14px;left:8px;background:rgba(var(--fgrgb),.6)}
.scrub-ticks em{position:absolute;left:30px;top:0;transform:translateY(-50%);font-style:normal;font-size:.72rem;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.scrub-knob{position:absolute;left:22px;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--gold-hi),var(--gold) 60%,var(--knob-dark));box-shadow:0 0 0 4px rgba(var(--acc),.18),0 4px 12px rgba(0,0,0,.6);transition:box-shadow .2s}
.scrub:focus-visible .scrub-knob,.scrub.drag .scrub-knob{box-shadow:0 0 0 7px rgba(var(--acchi),.32),0 4px 12px rgba(0,0,0,.6)}

/* 3. Nah und fern */
.nf-sec{text-align:center}
.nf-sec .h2{margin-bottom:3.5rem}
.nf{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,5vw,4rem);max-width:900px;margin:0 auto}
.nf figure{margin:0}
.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(var(--acc),.45),0 30px 60px -25px #000}
.nf figcaption{color:var(--muted);font-size:.95rem;max-width:30ch;margin:0 auto}
.nf figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:1.45rem;color:var(--ivory);margin-bottom:.2rem}

/* 4. Schwarz und Weiß */
.bw{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.bw-img img{width:100%;display:block;border-radius:4px;box-shadow:0 40px 80px -30px #000}
.bw-copy p:not(.fine){color:var(--soft);margin-bottom:1rem;max-width:52ch}

/* 5. Holz */
.wood{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center;margin-top:3rem}
.wood-frame{padding:14px;background:var(--frame);box-shadow:inset 0 0 0 1px rgba(var(--acc),.6),0 50px 90px -30px #000;width:min(100%,520px);justify-self:center}
.wood-board{aspect-ratio:1;display:grid;place-items:center;transition:background-image .4s}
.wood-board img{width:88%;aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 6px 18px rgba(0,0,0,.55)}
.wood-name{font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.1;margin-bottom:1.5rem;color:var(--gold-hi)}
.wood-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.wood-sw{display:grid;grid-template-columns:48px 1fr;column-gap:.85rem;align-items:center;text-align:left;padding:.6rem;border-radius:12px;background:var(--walnut-2);border:1px solid transparent;color:var(--ivory);font:inherit;cursor:pointer}
.wood-sw i{grid-row:1/3;width:48px;height:48px;border-radius:8px;background-size:cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.wood-sw span{font-size:.92rem;font-weight:500;line-height:1.3}
.wood-sw small{color:var(--faint);font-size:.8rem}
.wood-sw:hover{border-color:var(--line)}
.wood-sw.on{border-color:var(--gold);background:var(--walnut-3)}
body.v2 .wood-board[data-wood=weiss]{background:url(img/holz/weiss.jpg) center/cover}
body.v2 .wood-board[data-wood=mdf]{background:url(img/holz/mdf.jpg) center/cover}
body.v2 .wood-board[data-wood=eiche]{background:url(img/holz/eiche.jpg) center/cover}
body.v2 .wood-board[data-wood=nussbaum]{background:url(img/holz/nussbaum.jpg) center/cover}
body.v2 .wood-board[data-wood=esche]{background:url(img/holz/esche.jpg) center/cover}
body.v2 .wood-board[data-wood=beton]{background:url(img/holz/beton.jpg) center/cover}

/* 6. Galerie */
.gal{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,520px);gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.gal-item{scroll-snap-align:start;position:relative;margin:0}
.gal-wall{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:4px}
.gal-orig{position:absolute;left:4%;top:calc(100% - 4% - 22% - 3.6rem);width:22%;aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 0 0 3px var(--walnut),0 0 0 4px var(--gold),0 10px 20px -6px #000}
.gal-item figcaption{color:var(--muted);font-size:.9rem;margin-top:.9rem;min-height:2.7rem}
.gal-item figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:1.3rem;color:var(--ivory)}

/* 7. Größen */
.room{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-top:2.5rem}
.room-svg{width:100%;display:block;border-radius:6px;overflow:hidden}
.room-wall{fill:#e9e1d3}
.room-floor{fill:#b9a283}
.room-sofa rect{fill:#5c6a63}
.room-sofa rect:nth-child(4){fill:#4e5b54}
.room-board{stroke:var(--frame);stroke-width:1.2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));transition:all .5s var(--ease)}
#boardArt{transition:all .5s var(--ease)}
.room-dim{font:500 5px var(--sans);fill:#5a4c3d;text-anchor:middle}
.size-pick{display:grid;gap:.6rem}
.size-b{display:grid;grid-template-columns:3rem 1fr auto;align-items:baseline;gap:.75rem;padding:1rem 1.1rem;background:var(--walnut-2);border:1px solid transparent;border-radius:12px;color:var(--ivory);font:inherit;cursor:pointer;text-align:left}
.size-b b{font-family:var(--serif);font-weight:500;font-size:1.6rem;line-height:1}
.size-b span{color:var(--muted);font-size:.92rem}
.size-b em{font-style:normal;color:var(--gold-hi);font-weight:600}
.size-b:hover{border-color:var(--line)}
.size-b.on{border-color:var(--gold);background:var(--walnut-3)}

/* 8. Ablauf (echte Reihenfolge, daher nummeriert) */
.steps-v{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;margin-top:3rem;counter-reset:s}
.steps-v li{display:grid;gap:.9rem;align-content:start;position:relative;padding-top:1.4rem;border-top:1px solid var(--gold)}
.steps-v .num{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--gold)}
.steps-v h3{font-size:1.5rem;margin-bottom:.35rem}
.steps-v p{color:var(--muted);font-size:.95rem}

/* 9. Gutschein */
.gift{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.gift p{color:var(--soft);max-width:48ch;margin-bottom:1.75rem}
.gift-card{aspect-ratio:1.6;max-width:460px;width:100%;justify-self:center;border-radius:16px;padding:1.6rem 1.8rem;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#2c2117,#15100b 60%);box-shadow:inset 0 0 0 1px rgba(var(--acc),.55),0 40px 70px -30px #000;transform:rotate(-3deg)}
.gift-card img{position:absolute;right:-18%;top:-22%;width:70%;opacity:.9}
.gift-card .gc-mark{font-family:Cinzel,Georgia,serif;letter-spacing:.3em;font-size:.8rem;color:var(--gold);margin:0}
.gift-card .gc-t{font-family:var(--serif);font-size:2.6rem;line-height:1;margin:1.6rem 0 .5rem;color:var(--ivory)}
.gift-card .gc-v{color:var(--muted);font-size:.9rem;margin:0}

/* 10. Fragen */
.faq{max-width:820px;margin-top:2rem}
.faq details{border-top:1px solid var(--line);padding:1.3rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-family:var(--serif);font-size:1.45rem;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.7rem;line-height:1;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted);margin-top:.7rem;max-width:62ch}

/* Schluss */
.final{text-align:center;padding:clamp(6rem,14vw,10rem) 1.25rem;background:radial-gradient(45% 55% at 50% 50%,var(--glow),transparent 70%);border-top:1px solid var(--line)}
.final h2{font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1;margin-bottom:1rem}
.final .lead{margin:0 auto 2.25rem}
.final .cta-row{justify-content:center}

/* Hero-Schriftzug auf dem Logo */
.hero-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease)}
.hero-ring.on{opacity:1}
.hero-ring text{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:44px;letter-spacing:.5em;fill:var(--gold-hi)}

/* 7. Raum-Planer */
.room{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;margin-top:2rem}
.room-view{display:grid;gap:1rem}
.room-svg{width:100%;display:block;border-radius:6px;overflow:hidden;--wall:#ece6dc;--furn:#7d7a74;--furn-dark:#666;--furn-light:#999}
.room-wall{fill:var(--wall);transition:fill .4s}
.room-floor{fill:#9c8467}.room-skirt{fill:#e9e3d8}
.furn .f-main{fill:var(--furn)}.furn .f-dark{fill:var(--furn-dark)}.furn .f-leg{fill:#2b241e}
.furn .f-duvet{fill:#efebe4}.furn .f-pillow{fill:#e2dccf}.furn .f-lamp{fill:#d9c9a3}
.furn rect{transition:fill .4s}
.room-board{stroke:rgba(0,0,0,.45);stroke-width:.5}
.room-dim,.room-ref{font:500 4.4px var(--sans);fill:rgba(40,32,24,.75);text-anchor:middle}
.room-ref{font-size:3.6px;fill:rgba(40,32,24,.6)}
.dark-wall .room-dim{fill:rgba(255,248,236,.8)}
.room-price{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem 1.25rem;background:var(--walnut-2);border:1px solid var(--line);border-radius:12px}
.room-price p{display:grid;gap:.1rem;min-width:0}
.room-price span{color:var(--muted);font-size:.9rem}
.room-price b{font-family:var(--serif);font-weight:500;font-size:1.9rem;color:var(--gold-hi);line-height:1.1}
.room-ctl{display:grid;gap:1.15rem}
.room-ctl fieldset{border:0;padding:0;margin:0;min-width:0}
.room-ctl legend{font-size:.85rem;color:var(--muted);margin-bottom:.45rem;padding:0}
.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;padding:4px;background:var(--walnut-2);border-radius:12px}
.seg4{grid-template-columns:repeat(4,1fr)}
.seg button{font:inherit;font-size:.86rem;color:var(--ivory);background:transparent;border:0;border-radius:9px;padding:.6rem .3rem;cursor:pointer;line-height:1.2;min-width:0}
.seg button:hover{background:rgba(var(--fgrgb),.06)}
.seg button.on{background:var(--walnut-3);box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold-hi)}
.sizes-seg button{display:grid;gap:.1rem}
.sizes-seg b{font-family:var(--serif);font-weight:500;font-size:1.25rem}
.sizes-seg small{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.dots{display:flex;flex-wrap:wrap;gap:.55rem}
.dot{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 0 0 2px var(--walnut);transition:box-shadow .2s,transform .2s}
.dot:hover{transform:scale(1.08)}
.dot.on{box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 0 0 2px var(--walnut),0 0 0 4px var(--gold)}
.wood-dot{background-size:cover}

/* Faden-Leiste rechts */
.thread{position:fixed;right:clamp(8px,1.6vw,24px);top:96px;z-index:30;width:24px;pointer-events:none}
.t-line{position:relative;width:2px;margin-left:11px;background:rgba(var(--fgrgb),.2);border-radius:2px}
.t-fill{position:absolute;inset:0;background:linear-gradient(var(--gold-hi),var(--gold));transform-origin:top;transform:scaleY(0);box-shadow:0 0 8px rgba(var(--acchi),.7);border-radius:2px}
.thread-pins{list-style:none;position:absolute;inset:0 0 auto 0}
.thread-pins li{position:absolute;right:0;transform:translateY(-50%);pointer-events:auto}
.thread-pins a{display:flex;align-items:center;justify-content:center;width:24px;height:24px;text-decoration:none;position:relative}
.thread-pins i{width:9px;height:9px;border-radius:50%;background:var(--walnut-3);box-shadow:0 0 0 1px rgba(var(--fgrgb),.35);transition:background .35s,box-shadow .35s,transform .35s}
.thread-pins span{position:absolute;right:28px;white-space:nowrap;font-size:.8rem;color:var(--ivory);background:rgba(var(--bgrgb),.9);border:1px solid var(--line);border-radius:999px;padding:.2rem .65rem;opacity:0;transform:translateX(6px);transition:opacity .35s,transform .35s}
.thread-pins li.on i{background:var(--gold-hi);box-shadow:0 0 0 1px var(--gold),0 0 10px rgba(var(--acchi),.7)}
.thread-pins li.cur i{transform:scale(1.4)}
.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) and (orientation:portrait),(max-width:600px){
  body.v2 .logo{font-size:1rem;letter-spacing:.16em}
  .hero{grid-template-columns:1fr;padding-top:5.5rem;padding-right:2rem;gap:1rem}
  .hero-art{width:min(86vw,440px)}
  .hero h1{font-size:clamp(2.7rem,12vw,3.6rem)}
  .build{padding-right:2rem}
  .build-in{grid-template-columns:1fr;gap:1.25rem}
  .build-stage{width:100%}
  .build-orig{width:28%;left:-2%;top:-2%}
  .build-meter{padding:.45rem .7rem;right:-1%}
  .build-meter b{font-size:1.25rem}
  .scrub-wrap{height:auto;padding:.75rem .5rem 1.6rem}
  .scrub{width:100%;height:44px}
  .scrub::before{left:0;right:0;top:21px;bottom:auto;width:auto;height:2px}
  .scrub-fill{top:21px;left:0;height:2px;width:0}
  .scrub-ticks span{left:var(--p);top:14px;width:1px;height:8px}
  .scrub-ticks span.big{top:8px;left:var(--p);width:1px;height:14px}
  .scrub-ticks em{left:0;top:22px;transform:translateX(-50%)}
  .scrub-knob{top:22px;left:0}
  .room{grid-template-columns:1fr}
  .sec{padding-right:2rem}
  .bw,.wood,.room,.gift{grid-template-columns:1fr}
  .nf{gap:1rem}
  .nf figcaption{font-size:.82rem}.nf figcaption b{font-size:1.1rem}
  .steps-v{grid-template-columns:1fr 1fr;gap:1.75rem 1.25rem}
  .gift-card{transform:none}
  .thread{right:4px;width:16px;top:84px}
  .t-line{margin-left:7px}
  .thread-pins a{width:16px;height:16px}
  .thread-pins i{width:7px;height:7px}
  .thread-pins span{display:none}
}
@media(max-width:520px) and (orientation:portrait){.wood-pick{grid-template-columns:1fr}.steps-v{grid-template-columns:1fr}.size-b{grid-template-columns:2.4rem 1fr auto}}
@media(prefers-reduced-motion:reduce){.build-steps li{transition:none}.hero-ring{transition:none}}

/* Altlasten aus style.css (alte Startseite) neutralisieren */
body.v2 .hero,body.v2 .hero p{text-align:left}
body.v2 .hero p{margin-inline:0}
body.v2 .cta-row{justify-content:flex-start}
body.v2 .final .cta-row{justify-content:center}
body.v2 .steps-v li{grid-template-columns:none;padding-block:1.4rem 0;border-bottom:0}
body.v2 .steps-v li:last-child{border-bottom:0}
body.v2 .faq summary{font-family:var(--serif)}
.gift-card img{right:-14%;top:auto;bottom:-30%;width:58%;opacity:.45}
body.v2 .steps-v{max-width:none;margin:3rem 0 0}
/* Handy quer: Desktop-Aufbau, aber an die geringe Höhe angepasst */
@media(max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:4.6rem;padding-bottom:2rem}
  .hero h1{font-size:clamp(2rem,6vw,2.8rem);margin-bottom:1rem}
  .hero .lead{font-size:.95rem;margin-bottom:1.25rem}
  .mark{margin-bottom:.8rem}
  .build-stage{width:min(100%,80svh)}
  .scrub-wrap{height:min(80svh,620px)}
}
/* Vergleich der Ausführungen */
.cmp-pick{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}
.cmp-pick button{display:flex;align-items:center;gap:.6rem;padding:.35rem 1rem .35rem .35rem;border-radius:999px;background:var(--walnut-2);border:1px solid transparent;color:var(--ivory);font:inherit;font-size:.92rem;cursor:pointer}
.cmp-pick img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.cmp-pick button.on{border-color:var(--gold);color:var(--gold-hi)}
.cmp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem)}
.cmp figure{margin:0}
.cmp img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;display:block;box-shadow:0 0 0 1px rgba(var(--acc),.35),0 24px 50px -24px #000}
.cmp-lux img{box-shadow:0 0 0 2px var(--gold),0 24px 50px -24px #000}
.cmp figcaption{margin-top:1rem;color:var(--muted);font-size:.9rem}
.cmp figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:1.35rem;color:var(--ivory)}
.cmp-lux figcaption b{color:var(--gold-hi)}
@media(max-width:900px) and (orientation:portrait),(max-width:600px){.cmp{grid-template-columns:1fr 1fr;gap:1.5rem 1rem}.cmp figcaption{font-size:.82rem}.cmp figcaption b{font-size:1.1rem}}
/* Player unter dem Katzenbild */
.player{display:flex;align-items:center;gap:.6rem;margin-top:1.5rem;flex-wrap:wrap}
.player button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--walnut-2);color:var(--ivory);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s}
.player button:hover{border-color:var(--gold)}
.player button.main{width:54px;height:54px;background:linear-gradient(180deg,var(--gold-hi),var(--gold));border:0;color:var(--on-acc)}
.player svg{width:20px;height:20px;fill:currentColor}
.player .main svg{width:24px;height:24px}
.player .i-play,.player .paused .i-pause{display:none}
.player .paused .i-play{display:block}
.player-note{color:var(--muted);font-size:.9rem;margin-left:.4rem;min-width:11ch}
/* Zähler neben den Knöpfen statt über dem Bild; "Original" als Etikett auf dem Foto */
.build-meter{position:static;display:flex;gap:2rem;justify-content:flex-start;text-align:left;background:none;border:0;padding:0;margin-top:1.5rem;-webkit-backdrop-filter:none;backdrop-filter:none}
.build-meter p{justify-content:flex-start}
.build-meter b{font-size:2rem;min-width:0}
.build-orig{position:absolute}
.build-orig figcaption{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);margin:0;padding:.15rem .6rem;border-radius:999px;background:rgba(var(--bgrgb),.85);border:1px solid var(--line);font-size:.75rem;color:var(--ivory);white-space:nowrap}
@media(max-width:900px) and (orientation:portrait),(max-width:600px){.build-meter{gap:1.5rem;margin-top:1rem}.build-meter b{font-size:1.6rem}}

/* Unterseiten (Konfigurator, Warenkorb, Gutschein, Rechtstexte) im selben Stil */
body.v2.page main{max-width:1240px;margin:0 auto;padding:6.5rem max(1.25rem,env(safe-area-inset-left,0px)) 3rem}
body.v2.page .card{background:var(--walnut-2);border-color:var(--line)}
body.v2.page h2.title,body.v2.page h1.title{font-size:clamp(2rem,4.5vw,3rem);text-align:left;margin-bottom:1.5rem}
body.v2.page .legal{max-width:760px}
body.v2.page .legal h1{font-size:clamp(2rem,4vw,2.8rem)}
body.v2.page .legal h2{font-family:var(--serif);font-size:1.4rem;color:var(--gold-hi)}
body.v2.page .legal p,body.v2.page .legal li{color:var(--soft)}
body.v2.page .panel h2{font-size:1.9rem}
body.v2.page .steps b{border-color:var(--walnut-3)}
body.v2.page .field label{font-family:var(--sans)}
body.v2.page .menu summary{color:var(--gold-hi)}
/* Vertrauensleiste */
.trust{border-block:1px solid var(--line);background:var(--walnut-2)}
.trust ul{list-style:none;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;padding:1.6rem max(1.25rem,calc(50% - 620px))}
.trust li{display:grid;gap:.2rem;min-width:0}
.trust b{font-family:var(--serif);font-weight:500;font-size:1.2rem;color:var(--gold-hi)}
.trust span{color:var(--muted);font-size:.88rem}
@media(max-width:900px) and (orientation:portrait),(max-width:600px){.trust ul{grid-template-columns:1fr 1fr;gap:1.1rem 1rem;padding-right:2rem}.trust b{font-size:1.05rem}.trust span{font-size:.8rem}}
/* Echtes Foto */
.real{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.real-img{margin:0}
.real-img img{width:100%;display:block;border-radius:4px;box-shadow:0 40px 80px -30px #000}
.real p:not(.fine){color:var(--soft);max-width:48ch;margin-bottom:1rem}
@media(max-width:900px) and (orientation:portrait),(max-width:600px){.real{grid-template-columns:1fr}}
@media(max-width:600px){.seg[data-k=fmt]{grid-template-columns:1fr 1fr}}
/* Raum-Vorschau im Konfigurator */
.room-c{margin-top:1.4rem;display:grid;gap:.7rem}
.rc-ctl{gap:.7rem}
.rc-ctl .dot{width:28px;height:28px}
/* Zoom-Ansicht */
.zoomov .zbar{align-items:center;flex-wrap:wrap}
#zrange{width:min(42vw,280px);padding:0;accent-color:var(--gold)}
.zval{min-width:3.6rem;text-align:center;color:var(--gold-hi);font-variant-numeric:tabular-nums;font-size:.9rem}
.zhint{text-align:center;color:var(--muted);font-size:.8rem;margin:0 0 .4rem}
.zoomov .zscroll{touch-action:pan-x pan-y;cursor:grab}
.zoomov .zscroll img{user-select:none;-webkit-user-drag:none}
.zoomov{z-index:60}.zoomov .zbar{padding-top:max(.6rem,env(safe-area-inset-top,0px))}
/* Neues Bild wählen */
.restart-row{display:flex;justify-content:flex-end;margin:-.75rem 0 .75rem}
.restart{display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-size:.88rem;color:var(--gold-hi);background:transparent;border:1px solid var(--line);border-radius:999px;padding:.45rem .95rem;cursor:pointer}
.restart::before{content:"↺";font-size:1rem;line-height:1}
.restart:hover{border-color:var(--gold)}

/* ===== Farben der älteren Seiten (style.css) an Silber und Hell/Dunkel anpassen ===== */
body.v2 input,body.v2 select{background:var(--walnut-3);color:var(--ivory);border-color:var(--line)}
body.v2 .btn{color:var(--gold-hi);border-color:var(--line)}
body.v2 .btn-gold,body.v2 .menu nav a.cta,body.v2 .gs-val.on,body.v2 .gs-sale{color:var(--on-acc)}
body.v2 .btn:hover{box-shadow:0 8px 24px rgba(var(--acc),.25)}
body.v2 .menu nav a{color:var(--ivory)}
body.v2 .menu nav a:hover{background:var(--walnut-3)}
body.v2 .steps b{border-color:var(--walnut-3)}
body.v2 .steps li.done b{background:var(--gold);color:var(--on-acc)}
body.v2 .steps li[aria-current=step]{color:var(--gold-hi)}
body.v2 .vopt{color:var(--ivory)}
body.v2 .vopt img,body.v2 .vopt canvas,body.v2 .cart-thumb img{background:var(--walnut-3)}
body.v2 .vopt.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(var(--acc),.35)}
body.v2 .sugg-h,body.v2 .vopt .xp{color:var(--gold-hi)}
body.v2 .cut-seg{background:var(--walnut-3)}
body.v2 .cut-seg button{color:var(--ivory)}
body.v2 .cut-seg button.on{background:var(--walnut-2);color:var(--gold-hi)}
body.v2 .spin{border-color:var(--walnut-3);border-top-color:var(--gold)}
body.v2 mark{background:rgba(var(--acc),.22);color:var(--gold-hi)}
body.v2 .field label,body.v2 .cut-l,body.v2 .price,body.v2 .cartlink,body.v2 .biginfo,body.v2 a{color:var(--gold-hi)}
body.v2 .hint{color:var(--muted)}
html[data-theme=light] body.v2 .msg{color:#b3261e}
body.v2 footer{color:var(--muted)}

/* Schalter Hell/Dunkel in der Kopfzeile */
.theme-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--gold-hi);cursor:pointer;transition:border-color .2s,transform .3s}
.theme-btn:hover{border-color:var(--gold)}
.theme-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.theme-btn .i-sun{display:none}
html[data-theme=light] .theme-btn .i-sun{display:block}
html[data-theme=light] .theme-btn .i-moon{display:none}
@media(max-width:600px){.theme-btn{width:34px;height:34px}body.v2 .head-right{gap:.6rem}}
/* Foto-Schaltfläche ist ein <label>: Farbe wie Haupt-Schaltfläche, nicht wie Feldbeschriftung */
body.v2 .field label.upload-btn{color:var(--on-acc);margin-bottom:0;font-family:var(--sans)}

/* Für wen */
.who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,2vw,1.6rem);margin-top:1.5rem}
.who-item{display:flex;flex-direction:column;gap:.35rem;text-decoration:none;color:inherit}
.who-item img{width:100%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 22px 40px -28px rgba(0,0,0,.6);transition:transform .25s}
.who-item:hover img{transform:scale(1.03)}
.who-item b{font-family:var(--serif,serif);font-weight:400;font-size:1.35rem;margin-top:.6rem}
.who-item span{color:var(--muted);font-size:.9rem}
@media (max-width:700px){.who{grid-template-columns:repeat(2,minmax(0,1fr))}}