/* Faded Art – Design "Galerie"
   Idee: Das Fadenbild hängt wie in einer Galerie. Ruhige Wand, Tinte, Haarlinien wie Fäden, Werkschild unter jedem Bild.
   Eine Schrift mit Haarstrichen (Bodoni Moda) für Titel, eine ruhige Grotesk (Hanken Grotesk) für Text.
   Hell ist Standard (Galeriewand), dunkel ist die Galerie bei Nacht. Kein Gold, kein Verlauf, keine runden Karten.
   Wird nach home.css geladen und überschreibt nur, was anders aussieht. */
@font-face{font-family:"Bodoni Moda";src:url(fonts/bodoni-moda.woff) format("woff");font-weight:400 900;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(fonts/bodoni-moda-italic.woff) format("woff");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk.woff) format("woff");font-weight:100 900;font-display:swap}

/* Farben: Galerie bei Nacht (dunkel) */
body.v2{
  --walnut:#0f0f10; --walnut-2:#161617; --walnut-3:#202022;
  --gold:#d8d6d1; --gold-hi:#f1f0ec; --ivory:#ecebe7; --muted:#9a9893; --faint:#8a8883; --soft:#c8c6c1;
  --acc:216,214,209; --acchi:241,240,236; --bgrgb:15,15,16; --fgrgb:236,235,231;
  --on-acc:#0f0f10; --glow:transparent; --deep:#0b0b0c; --frame:#0b0b0b; --knob-dark:#9a9893;
  --line:rgba(var(--fgrgb),.14);
  --serif:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif; --sans:"Hanken Grotesk",system-ui,sans-serif;
  --r:2px;
  font-size:1.0625rem; letter-spacing:.005em;
}
/* Galeriewand (hell, Standard) */
html[data-theme=light] body.v2{
  --walnut:#ededea; --walnut-2:#f7f7f5; --walnut-3:#e2e2de;
  --gold:#141414; --gold-hi:#141414; --ivory:#141414; --muted:#62615d; --faint:#72716d; --soft:#2c2c2a;
  --acc:20,20,20; --acchi:20,20,20; --bgrgb:237,237,234; --fgrgb:20,20,20;
  --on-acc:#f7f7f5; --deep:#e4e4e0; --frame:#141414; --knob-dark:#141414;
  --line:rgba(20,20,20,.14);
}

/* Typografie */
body.v2 h1,body.v2 h2,body.v2 h3,body.v2 .h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
body.v2 .h2{font-size:clamp(2.2rem,5vw,4rem);line-height:1.02;font-variation-settings:"opsz" 96}
body.v2 .sub,body.v2 .lead{color:var(--muted)}
body.v2 .fine{color:var(--faint)}
body.v2 a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.25em}

/* Kopfzeile: nur Text, Haarlinie beim Scrollen */
body.v2 header.top{padding-block:1.2rem}
body.v2.scrolled header.top{background:rgba(var(--bgrgb),.92);-webkit-backdrop-filter:none;backdrop-filter:none;padding-block:.8rem}
body.v2 .logo{font-family:var(--serif);font-weight:500;letter-spacing:.28em;font-size:1rem;background:none;-webkit-text-fill-color:currentColor;color:var(--ivory)}
body.v2 .menu summary,body.v2 .theme-btn{border-radius:var(--r);border-color:var(--line)}
body.v2 .menu summary{color:var(--ivory)}
body.v2 .menu nav{border-radius:var(--r);box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
body.v2 .menu nav a.cta{background:var(--ivory);color:var(--walnut)}
body.v2 .cartlink{color:var(--ivory)}
body.v2 .theme-btn{color:var(--ivory)}

/* Knöpfe: rechteckig, Tinte */
body.v2 .btn{border-radius:var(--r);font-family:var(--sans);font-weight:500;letter-spacing:.02em;padding:.95rem 1.6rem;color:var(--ivory);border:1px solid var(--ivory);background:transparent}
body.v2 .btn:hover{transform:none;box-shadow:none;background:rgba(var(--fgrgb),.06)}
body.v2 .btn-gold{background:var(--ivory);color:var(--walnut);border-color:var(--ivory)}
body.v2 .btn-gold:hover{background:var(--soft);border-color:var(--soft)}
body.v2 .btn-quiet{border:0;padding-inline:0;text-decoration:underline;text-decoration-color:var(--ivory)}
body.v2 .btn-quiet:hover{background:none;color:var(--muted)}

/* Hero: links Titel, rechts das Logo wie ein gehängtes Werk */
body.v2 .hero{background:var(--walnut);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);padding-top:7.5rem}
body.v2 .hero-copy{order:-1}
body.v2 .mark{font-family:var(--sans);font-weight:500;letter-spacing:.02em;font-size:.95rem;color:var(--muted);margin-bottom:2rem}
body.v2 .mark::before{content:"";display:inline-block;width:2.5rem;height:1px;background:var(--ivory);vertical-align:middle;margin-right:.9rem}
body.v2 .hero h1{font-size:clamp(3.2rem,8.2vw,7.4rem);line-height:.94;font-weight:400;font-variation-settings:"opsz" 96;margin-bottom:2rem}
body.v2 .hero .lead{max-width:40ch;font-size:1.1rem}
body.v2 .hero-art{width:min(100%,560px,72svh)}
body.v2 .hero-count{font-family:var(--serif);font-style:italic;color:var(--muted);right:2%;bottom:2%}
body.v2 .hero-count b{font-style:normal;color:var(--ivory);font-family:var(--sans)}
body.v2 .hero-ring text{font-family:var(--serif);fill:var(--ivory);font-weight:500;letter-spacing:.42em}

/* Abschnitte: viel Luft, Haarlinien statt Kästen */
body.v2 .sec + .sec{border-top:1px solid var(--line)}
body.v2 .trust{background:transparent;border-color:var(--line)}
body.v2 .trust b{font-family:var(--serif);font-size:1.25rem;color:var(--ivory)}
body.v2 .trust li{padding-left:1rem;border-left:1px solid var(--line)}

/* Werkschild unter jedem Bild (Titel kursiv, Angaben klein) */
body.v2 .cmp figcaption,body.v2 .nf figcaption,body.v2 .gal-item figcaption{margin-top:1.1rem;padding-top:.8rem;border-top:1px solid var(--line);text-align:left;max-width:none;color:var(--muted);font-size:.86rem}
body.v2 .cmp figcaption b,body.v2 .nf figcaption b,body.v2 .gal-item figcaption b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.3rem;color:var(--ivory);margin-bottom:.15rem}
body.v2 .cmp-lux figcaption b{color:var(--ivory)}
body.v2 .cmp img,body.v2 .nf img{box-shadow:0 26px 50px -30px rgba(0,0,0,.55)}
body.v2 .cmp-lux img{box-shadow:0 0 0 1px var(--ivory),0 26px 50px -30px rgba(0,0,0,.55)}
body.v2 .cmp-pick button,body.v2 .wood-sw,body.v2 .size-b,body.v2 .seg,body.v2 .room-price{border-radius:var(--r)}
body.v2 .cmp-pick button{background:transparent;border:1px solid var(--line)}
body.v2 .cmp-pick button.on{border-color:var(--ivory);color:var(--ivory)}

/* Bilder wie gehängt: kein Glanz, nur Schatten an der Wand */
body.v2 .real-img img,body.v2 .bw-img img,body.v2 .gal-wall{border-radius:0;box-shadow:none}
body.v2 .wood-frame{box-shadow:0 30px 60px -32px rgba(0,0,0,.6);padding:12px}

/* Entstehen: Regler als feine Skala */
body.v2 .build{background:var(--walnut)}
body.v2 .build-art{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
body.v2 .build-steps h3{color:var(--ivory);font-style:italic}
body.v2 .build-meter b{font-family:var(--serif);color:var(--ivory)}
body.v2 .build-orig img{box-shadow:0 0 0 3px var(--walnut),0 0 0 4px var(--ivory)}
body.v2 .build-orig figcaption{border-radius:var(--r);background:var(--walnut-2)}
body.v2 .scrub-fill{background:var(--ivory);box-shadow:none}
body.v2 .scrub-knob{background:var(--ivory);box-shadow:0 0 0 4px rgba(var(--fgrgb),.12);width:18px;height:18px;margin:-9px 0 0 -9px}
body.v2 .player button{border-radius:var(--r)}
body.v2 .player button.main{background:var(--ivory);color:var(--walnut)}

/* Auswahl-Elemente */
body.v2 .wood-sw.on,body.v2 .size-b.on,body.v2 .seg button.on{background:transparent;box-shadow:inset 0 0 0 1px var(--ivory);color:var(--ivory)}
body.v2 .seg button{border-radius:var(--r)}
body.v2 .wood-name{font-style:italic;color:var(--ivory)}
body.v2 .dot{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 2px var(--walnut)}
body.v2 .dot.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 2px var(--walnut),0 0 0 3px var(--ivory)}
body.v2 .room-price b{font-family:var(--serif);color:var(--ivory)}
body.v2 .room-svg{border-radius:0}

/* Ablauf, Gutschein, Fragen */
body.v2 .steps-v li{border-top-color:var(--ivory)}
body.v2 .steps-v .num{font-family:var(--serif);font-style:italic;color:var(--muted)}
body.v2 .gift-card{border-radius:var(--r);background:var(--walnut-2);box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -32px rgba(0,0,0,.5);transform:rotate(-2deg)}
body.v2 .gift-card .gc-mark{font-family:var(--serif);color:var(--muted)}
body.v2 .gift-card .gc-t{font-style:italic}
body.v2 .gift-card img{opacity:.18;filter:grayscale(1)}
html[data-theme=light] body.v2 .gift-card img{filter:invert(1) grayscale(1)}
body.v2 .faq summary{font-size:1.35rem}
body.v2 .faq summary::after{color:var(--ivory);font-family:var(--sans);font-weight:300}
body.v2 .final{background:transparent}
body.v2 .final h2{font-style:italic}

/* Faden rechts: eine Linie Tinte */
body.v2 .t-fill{background:var(--ivory);box-shadow:none}
body.v2 .thread-pins li.on i{background:var(--ivory);box-shadow:0 0 0 1px var(--ivory)}
body.v2 .thread-pins i{background:var(--walnut)}
body.v2 .thread-pins span{border-radius:var(--r);background:var(--walnut-2);color:var(--ivory)}

/* Unterseiten (Konfigurator, Warenkorb, Rechtstexte) im selben Stil */
body.v2.page .card{border-radius:var(--r);background:var(--walnut-2);border-color:var(--line)}
body.v2.page .legal h2{font-style:italic;color:var(--ivory)}
body.v2 input,body.v2 select{border-radius:var(--r)}
body.v2 .steps li.done b{background:var(--ivory);color:var(--walnut)}
body.v2 .steps li[aria-current=step]{color:var(--ivory)}
body.v2 .steps li[aria-current=step] b{border-color:var(--ivory)}
body.v2 .vopt{border-radius:var(--r)}
body.v2 .vopt.sel{border-color:var(--ivory);box-shadow:none}
body.v2 .restart{border-radius:var(--r);color:var(--ivory)}
body.v2 .board{border-radius:0;border-color:var(--line)}
body.v2 .field label,body.v2 .cut-l,body.v2 .price,body.v2 .biginfo,body.v2 .sugg-h,body.v2 .vopt .xp{color:var(--ivory)}
body.v2 .gs-val.on{background:var(--ivory);color:var(--walnut)}
body.v2 .gs-sale{background:var(--ivory);color:var(--walnut);border-radius:var(--r)}
body.v2 footer{font-size:.82rem}

@media(max-width:900px) and (orientation:portrait),(max-width:600px){
  body.v2 .hero{grid-template-columns:1fr;padding-top:6rem}
  body.v2 .hero-copy{order:0}
  body.v2 .hero h1{font-size:clamp(2.9rem,13vw,4rem)}
  body.v2 .hero-art{width:min(80vw,400px)}
  body.v2 .trust li{border-left:0;padding-left:0}
}
body.v2 .faq summary{color:var(--ivory)}
body.v2 .faq p{color:var(--muted)}
@media(max-width:900px) and (orientation:portrait),(max-width:600px){body.v2 .hero-copy{order:-1}body.v2 .hero-art{margin-top:1rem}}
/* Logo zuerst, dann der Titel (Desktop: Logo links, Handy: Logo oben) */
body.v2 .hero-copy{order:0}
@media(max-width:900px) and (orientation:portrait),(max-width:600px){body.v2 .hero-copy{order:0}body.v2 .hero-art{margin:0 auto 1.5rem}}
/* 404 */
.nf404{min-height:80svh;display:grid;place-content:center;justify-items:start;gap:1rem;max-width:680px;margin:0 auto;padding:7rem 1.25rem 3rem}
.nf404-art{width:150px;height:150px;color:var(--ivory);margin-bottom:1rem}
.nf404 h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,7vw,4.4rem);line-height:1}
.nf404 .lead{color:var(--muted);max-width:44ch}
/* Gutschein einlösen */
body.v2 .vbox{margin-top:1rem;border-top:1px solid var(--line);padding-top:.8rem}
body.v2 .vbox summary{cursor:pointer;color:var(--ivory);font-size:.95rem;list-style:none;display:flex;justify-content:space-between}
body.v2 .vbox summary::-webkit-details-marker{display:none}
body.v2 .vbox summary::after{content:"+";font-size:1.2rem;line-height:1}
body.v2 .vbox[open] summary::after{content:"−"}
body.v2 .vbox .redeem{margin-top:.7rem}
body.v2 .redeem .row{gap:.5rem}
body.v2 .redeem .btn{flex:0 0 auto;padding:.85rem 1.2rem}
body.v2 .redeem-ok{font-size:.9rem;color:var(--ivory);margin-bottom:.7rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:var(--r)}
body.v2 .redeem-msg.ok{color:var(--ivory)}
body.v2 .redeem-sec{padding-bottom:1rem}
html body.v2 .redeem-msg.ok{color:var(--ivory)}
/* Kreis nutzt 92 % des Bretts (50-cm-Brett: Kreis 46 cm) */
body.v2 .disc{width:92%}
body.v2 .board.wide .disc{width:auto;height:92%}
body.v2 .wood-board img{width:92%}
/* Unterseiten: Kopfzeile immer mit Hintergrund, damit nichts darunter durchscheint */
body.v2.page header.top{background:rgba(var(--bgrgb),.94);border-bottom-color:var(--line)}
/* Format als Form statt Wort */
.fmt{display:block;margin:0 auto;border:1.5px solid currentColor}
.fmt-rund{width:22px;height:22px;border-radius:50%}
.fmt-quad{width:22px;height:22px}
.fmt-hoch{width:17px;height:23px}
.fmt-quer{width:26px;height:19px}
.seg[data-k=fmt] button{padding:.7rem .3rem;display:grid;place-items:center}
@media(max-width:600px){.seg[data-k=fmt]{grid-template-columns:repeat(4,1fr)}}

/* Bewertungen */
body.v2 .rv-sum{margin:.4rem 0 1.6rem;color:var(--ivory)}
body.v2 .rv-st{color:var(--gold);letter-spacing:.12em}
body.v2 .rv-list{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
body.v2 .kv{margin:0;padding:1.3rem;border:1px solid rgba(var(--acc),.25);background:rgba(var(--acc),.04);display:flex;flex-direction:column;gap:.6rem}
body.v2 .kv img{width:100%;aspect-ratio:1;object-fit:cover}
body.v2 .kv blockquote{margin:0;color:var(--ivory);line-height:1.6;white-space:pre-line}
body.v2 .kv figcaption{font-size:.85rem;opacity:.7;margin-top:auto}
body.v2 .rv-note{font-size:.8rem;opacity:.65;margin-top:1.4rem;max-width:70ch}
.rv-stars{display:inline-flex;flex-direction:row-reverse;gap:.15rem}
.rv-stars input{position:absolute;opacity:0;pointer-events:none}
.rv-stars label{font-size:2.2rem;line-height:1;cursor:pointer;color:rgba(128,128,128,.45);text-transform:none}
body.v2 .rv-stars label{color:rgba(128,128,128,.45)}
body.v2 .rv-stars input:checked~label,body.v2 .rv-stars label:hover,body.v2 .rv-stars label:hover~label{color:var(--gold)}
body.v2 .rv-stars input:focus-visible+label{outline:2px solid var(--gold)}
.rv-form textarea{width:100%;font:inherit}

/* ---------- Feinschliff: ruhiger, edler ---------- */
/* Kopfzeile beim Scrollen: blickdicht mit feinem Weichzeichner, nichts scheint grau durch */
body.v2.scrolled header.top,body.v2.page header.top{background:rgb(var(--bgrgb));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* Abschnitte etwas enger: weniger Leerlauf, besonders am Handy */
body.v2 .sec{padding-block:clamp(3.75rem,8vw,7.5rem)}
/* Beschriftung der Abschnitts-Leiste rechts nur dort dauerhaft, wo daneben Platz ist (sonst nur beim Darüberfahren) */
@media(max-width:1600px){body.v2 .thread-pins li.cur span{opacity:0;transform:translateX(6px)}
  body.v2 .thread-pins a:hover span,body.v2 .thread-pins a:focus-visible span{opacity:1;transform:none}}
/* Fließtext ruhiger lesbar */
body.v2 main p,body.v2 .sec p{line-height:1.7}
/* Fußzeile */
body.v2 footer.site-foot{max-width:1240px;margin:0 auto;padding:clamp(3rem,6vw,4.5rem) clamp(1.25rem,4vw,3rem) 2rem;border-top:1px solid var(--line);text-align:left;font-size:.88rem;color:var(--muted)}
.sf-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2.5rem}
.sf-brand .logo{display:inline-block;margin:0 0 1rem;font-size:1rem;letter-spacing:.28em}
.sf-brand p{max-width:34ch;line-height:1.7;margin:0}
.sf-col{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start}
.sf-col a,.sf-col span{margin:0;padding:.15rem 0;text-decoration:none;color:var(--muted);transition:color .25s}
body.v2 .sf-col a{color:var(--muted)}
body.v2 .sf-col a:hover{color:var(--ivory)}
.sf-h{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory);margin:0 0 .4rem}
.sf-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--faint)}
@media(max-width:820px){.sf-grid{grid-template-columns:1fr 1fr;gap:2rem 1.5rem}.sf-brand{grid-column:1/-1}}
@media(max-width:700px){.sf-col a{padding:.55rem 0}}

/* Weiß und Schwarz matt: Platte ohne Rahmen, nur Wandschatten */
body.v2 .wood-frame[data-wood=weiss],body.v2 .wood-frame[data-wood=mdf]{padding:0;background:none;box-shadow:0 30px 60px -28px rgba(0,0,0,.6)}
body.v2 .wood-board[data-wood=weiss],body.v2 .wood-board[data-wood=mdf]{box-shadow:none}
body.v2 .wood-frame{transition:padding .4s var(--ease),background-color .4s}
.room-board.flat{stroke:none}