/* MASER – Tischlerei und Innenausbau (fiktive Beispielseite von AV Website Solutions)
   Haltung: Holz ist das Bild. Leinen, Nussbaum, Loden. Georgia (ruhig, warm) als Anzeigeschrift, Figtree für Text. Maserung entsteht im Browser (SVG-Filter). Kein Inline-Code. */

@font-face{font-family:"Figtree";src:url("../../assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --leinen:#ece5d6; --leinen-2:#e0d7c4; --papier:#f6f1e6; --nuss:#2a1d14; --nuss-2:#3a2a1e; --eiche:#b9885a; --loden:#4a5a30; --loden-hell:#9fb07a; --grau:#625a49;
  --linie:rgba(42,29,20,.26); --linie-h:rgba(236,229,214,.24);
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif; --fl:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace; --seite:clamp(1.15rem,4vw,3.2rem); --kopf-h:70px; --ease:cubic-bezier(.2,.75,.1,1);
}
/* Seit 05.10.2026 stehen STARTER und PREMIUM auf dunklem Nussbaum (Betreiberregel: kein heller Grund); EXKLUSIV war schon dunkel und behält die Grundwerte.
   Für diese Seiten ist die Skala umgekehrt (nuss = helle Schrift, leinen = dunkler Grund); die ohnehin dunklen Flächen sind ausdrücklich gesetzt. */
body:not(.ma-ex){--leinen:#1a120c;--leinen-2:#221810;--papier:#2a1d14;--nuss:#ece5d6;--grau:#b3a893;--linie:rgba(236,229,214,.2);--loden:#9fb07a}
body:not(.ma-ex) .knopf:hover{color:#1a120c}
body:not(.ma-ex) .held-holz{background:#2a1d14}
body:not(.ma-ex) .held-fuss,body:not(.ma-ex) .fuss{background:#0f0905;color:#ece5d6}
body:not(.ma-ex) .fuss a{color:#ece5d6}
body:not(.ma-ex) .verbindung{background:#140d08;color:#ece5d6}
body:not(.ma-ex) .lead,body:not(.ma-ex) .schritte p,body:not(.ma-ex) .s-vier p,body:not(.ma-ex) .s-drei p{color:#cfc5b0}
body:not(.ma-ex) .art input:checked+.art-k{background:#3a2a1e}
body:not(.ma-ex) .fehler{color:#ff9a7a}
body:not(.ma-ex) .feld.fehlt input,body:not(.ma-ex) .feld.fehlt textarea{border-bottom-color:#ff9a7a}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 8px);background:#1a120c}
body{margin:0;font:400 1.0625rem/1.65 var(--fl);color:var(--nuss);background:var(--leinen);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;line-height:1.02;margin:0;text-wrap:balance;overflow-wrap:break-word}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
em{font-style:italic;color:var(--loden)}
::selection{background:var(--loden);color:#fff}
:focus-visible{outline:2px solid var(--loden);outline-offset:3px}
.mono{font:500 .7rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:absolute;left:12px;top:-90px;z-index:200;background:var(--nuss);color:var(--leinen);padding:.8em 1.2em;font-weight:600;text-decoration:none}
.sprung:focus{top:12px}
.filter-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.9rem;min-height:52px;padding:0 1.6rem;background:var(--nuss);color:var(--leinen);border:1px solid var(--nuss);border-radius:2px;text-decoration:none;font:600 .95rem/1 var(--fl);cursor:pointer;transition:background .3s var(--ease),border-color .3s,color .3s}
.knopf::after{content:"";width:16px;height:1px;background:currentColor;transition:width .3s var(--ease)}
.knopf:hover{background:var(--loden);border-color:var(--loden);color:#fff}
.knopf:hover::after{width:26px}
.knopf-klein{min-height:44px;padding:0 1.15rem;font-size:.88rem}
.knopf-voll{width:100%}
.pfeil{display:inline-flex;align-items:center;gap:.8rem;min-height:44px;font-weight:600;text-decoration:none}
.pfeil::after{content:"";width:22px;height:1px;background:currentColor;transition:width .3s var(--ease)}
.pfeil:hover{color:var(--loden)}
.pfeil:hover::after{width:34px}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--kopf-h);background:var(--leinen);box-shadow:0 1px 0 var(--linie);transition:background .4s,box-shadow .4s}
.kopf-fest{background:var(--leinen);box-shadow:0 1px 0 var(--linie)}
.kopf-in{height:100%;max-width:1500px;margin:auto;padding-inline:var(--seite);display:flex;align-items:center;gap:1.6rem}
.marke{display:inline-flex;flex-direction:column;gap:.2rem;text-decoration:none;min-height:44px;justify-content:center}
.marke b{font:400 1.6rem/1 var(--serif);letter-spacing:.26em}
.marke small{font:500 .56rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--grau)}
.nav{margin-inline:auto}
.nav ul{display:flex;gap:.3rem}
.nav li a{display:flex;align-items:center;min-height:44px;padding:0 .95rem;text-decoration:none;font-weight:500;font-size:.95rem;position:relative}
.nav li a::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:8px;height:1px;background:var(--loden);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav li a:hover::after,.nav li a[aria-current]::after{transform:scaleX(1)}
.nav-fuss{display:none}
.kopf-cta{margin-left:auto}
.nav-toggle{display:none}

/* ---------- Held ---------- */
.held{position:relative;min-height:max(700px,100svh);padding-top:var(--kopf-h);display:flex;flex-direction:column;overflow:clip}
.held-holz{position:absolute;top:var(--kopf-h);right:0;bottom:0;width:48%;background:var(--nuss)}
.held-wand{position:absolute;inset:0;width:100%;height:100%}
.held-wand .sb-holz-w{filter:url(#hw-nuss)}
.held-holz::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 30%),linear-gradient(180deg,rgba(0,0,0,.15),transparent 40%,rgba(0,0,0,.3))}
.held-in{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:1rem;width:100%;max-width:1500px;margin-inline:auto;padding:2rem var(--seite) 1rem;z-index:2}
.held-text{padding-block:1rem;position:relative;z-index:3;max-width:36rem}
.held-k{display:flex;align-items:center;gap:.8rem;color:var(--grau);margin-bottom:clamp(1.2rem,3vw,2rem)}
.punkt{width:9px;height:9px;background:var(--loden)}
.held h1{font-size:clamp(3.2rem,7vw,7.6rem);letter-spacing:-.05em;line-height:.96}
.lead{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.6;color:#4a3d30;max-width:32em;margin-top:clamp(1.3rem,3vw,2.2rem)}
.aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem;margin-top:clamp(1.6rem,3vw,2.4rem)}
.held-moebel{margin:0;position:relative;z-index:2;margin-left:-1vw;filter:drop-shadow(0 30px 40px rgba(20,12,6,.35))}
.held-fuss{position:absolute;z-index:3;right:0;bottom:0;max-width:100%;padding:.7rem var(--seite) .8rem 1.1rem;background:var(--nuss);color:var(--leinen);text-align:right}
.sideboard{width:100%;height:auto;overflow:visible}
.sb-schatten{fill:rgba(0,0,0,.35)}
.sb-sockel{fill:#1b120b}
.sb-korpus{fill:#170f09}
.sb-kante{fill:none;stroke:rgba(10,6,3,.7);stroke-width:1.4}
.gr-mulde{fill:#120c08;opacity:.92}
.gr-messing{fill:#b38b4d;stroke:#6f5226;stroke-width:.8}
.gr-glanz{fill:#f2dfae;opacity:.85}
.gr-leder{fill:none;stroke:#4d301d;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.gr-niet{fill:#2b1c12}

/* ---------- Bereiche ---------- */
.bereich{position:relative;padding:clamp(5rem,10vw,9rem) var(--seite)}
.bereich-in{max-width:1300px;margin:auto;position:relative}
.kopfzeile{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:.6rem 4rem;align-items:end;margin-bottom:clamp(2.4rem,5vw,4.2rem)}
.kopfzeile>.mono{grid-column:1/-1;color:var(--grau)}
.kopfzeile h2{font-size:clamp(2.6rem,6vw,5.4rem);letter-spacing:-.05em}
.kopfzeile .lead{margin-top:0;justify-self:end}
.kopfzeile-eng{grid-template-columns:minmax(0,1fr)}

/* Material */
.material{background:var(--papier)}
.konfig{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.6rem,4vw,4rem);align-items:center}
.konfig-bild{margin:0;background:var(--leinen-2);border:1px solid var(--linie);padding:clamp(1rem,3vw,2.4rem) clamp(1rem,3vw,2.4rem) clamp(1.4rem,3vw,2.6rem)}
.konfig-form{display:grid;gap:1.6rem}
.konfig fieldset{border:0;padding:0;margin:0;min-width:0}
.konfig legend{color:var(--grau);margin-bottom:.7rem;padding:0}
.arten{display:grid;gap:.6rem}
.art{position:relative;display:block}
.art input,.griff input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.art-k{display:grid;grid-template-columns:64px 1fr;grid-template-areas:"m n" "m t";gap:0 1rem;align-items:center;padding:.7rem .9rem;border:1px solid var(--linie);background:var(--papier);transition:border-color .25s,background .25s,box-shadow .25s}
.art-k .muster{grid-area:m;display:block;width:64px;height:64px;border:1px solid rgba(0,0,0,.25)}
.art-k b{grid-area:n;font:400 1.4rem/1.1 var(--serif);letter-spacing:-.02em}
.art-k em{grid-area:t;font-style:normal;color:var(--grau);font-size:.88rem;line-height:1.4}
.art input:checked+.art-k{border-color:var(--nuss);background:#fff;box-shadow:0 0 0 1px var(--nuss)}
.art input:hover+.art-k{border-color:var(--nuss)}
.art input:focus-visible+.art-k,.griff input:focus-visible+span{outline:2px solid var(--loden);outline-offset:3px}
.muster.m-eiche{filter:url(#m-eiche)}.muster.m-nuss{filter:url(#m-nuss)}.muster.m-esche{filter:url(#m-esche)}
.griffe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.griff{position:relative}
.griff span{display:flex;align-items:center;justify-content:center;min-height:52px;border:1px solid var(--linie);font-weight:500;background:var(--papier);transition:border-color .25s,background .25s,color .25s}
.griff input:checked+span{border-color:var(--nuss);background:var(--nuss);color:var(--leinen)}
.griff input:hover+span{border-color:var(--nuss)}
.konfig-summe{font:400 1.25rem/1.3 var(--serif);letter-spacing:-.01em}
.konfig-hinweis{color:var(--grau);font-size:.62rem}

/* Verbindung */
.verbindung{background:var(--nuss);color:var(--leinen)}
.verbindung em{color:var(--loden-hell)}
.verbindung .mono{color:rgba(236,229,214,.6)}
.verbindung .lead{color:rgba(236,229,214,.82)}
.verbindung-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.verbindung h2{font-size:clamp(2.6rem,5.6vw,5rem);letter-spacing:-.05em;margin-top:1rem}
.verbindung-h{margin-top:2rem!important;color:var(--loden-hell)!important}
.verbindung-bild{border:1px solid var(--linie-h);padding:clamp(1rem,3vw,2.4rem);background:rgba(0,0,0,.25)}
.zinken{width:100%;height:auto;overflow:visible}
.zk-a,.zk-b{will-change:transform}
.zk-kontur{fill:none;stroke:rgba(0,0,0,.7);stroke-width:2;stroke-linejoin:round}

/* Ablauf */
.werkstatt{background:var(--leinen)}
.schritte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(1rem,2.4vw,2.2rem)}
.schritte li{position:relative;padding-top:1.4rem}
.schritte li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--nuss);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.schritte.an li::before{transform:scaleX(1)}
.schritte li:nth-child(2)::before{transition-delay:.15s}.schritte li:nth-child(3)::before{transition-delay:.3s}.schritte li:nth-child(4)::before{transition-delay:.45s}
.s-n{display:block;font:italic 400 clamp(3.4rem,6vw,5.4rem)/1 var(--serif);letter-spacing:-.05em;color:var(--loden);margin-bottom:.4rem}
.schritte h3{font-size:clamp(1.6rem,2.4vw,2.1rem);margin-bottom:.6rem}
.schritte p{color:#4a3d30;max-width:19em}

/* Anfrage */
.anfrage{background:var(--leinen-2)}
.anfrage-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.anfrage h2{font-size:clamp(2.5rem,5.4vw,5rem);margin:.8rem 0 0;letter-spacing:-.05em}
.anfrage .mono{color:var(--grau)}
.adresse{font-style:normal;margin-top:2.2rem;line-height:1.8;font-size:.68rem}
.adresse span{color:var(--grau)}
.formular{background:var(--papier);border:1px solid var(--nuss);padding:clamp(1.2rem,3vw,2.2rem)}
.form-h{color:var(--loden)!important;margin-bottom:1.2rem;font-size:.62rem}
.feld{margin-bottom:1.15rem}
.feld label{display:block;font:500 .62rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin-bottom:.15rem}
.feld abbr{text-decoration:none;color:var(--loden)}
.feld input,.feld textarea{width:100%;min-height:46px;padding:.55rem 0;background:none;border:0;border-bottom:1px solid var(--linie);border-radius:0;font-size:1rem}
.feld textarea{resize:vertical;min-height:110px}
.feld input:focus,.feld textarea:focus{border-bottom:2px solid var(--loden);padding-bottom:calc(.55rem - 1px)}
.feld.fehlt input,.feld.fehlt textarea{border-bottom-color:#9b2c16}
.fehler{color:#9b2c16;font-size:.86rem;font-weight:600}
.fehler:empty{display:none}
.fehler:not(:empty){margin-top:.35rem}
.form-ok{margin-top:1.2rem;padding:1rem 1.1rem;border-left:3px solid var(--loden);background:var(--leinen)}
.form-ok[hidden]{display:none}
.form-ok b{display:block;margin-bottom:.25rem}

/* Fuß */
.fuss{background:var(--nuss);color:var(--leinen);padding:clamp(2.6rem,5vw,4rem) var(--seite) 6rem}
.fuss-in{max-width:1300px;margin:auto;display:grid;gap:1rem}
.fuss-marke b{font:400 1.2rem/1 var(--serif);letter-spacing:.24em;margin-right:.8rem}
.fuss .mono{color:rgba(236,229,214,.6);font-size:.64rem}
.fuss a{color:var(--leinen)}

/* Bewegung */
.js .held h1,.js .held .lead,.js .held .aktionen,.js .held-k,.js .held-moebel{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js.geladen .held h1,.js.geladen .held .lead,.js.geladen .held .aktionen,.js.geladen .held-k,.js.geladen .held-moebel{opacity:1;transform:none}
.js.geladen .held .lead{transition-delay:.15s}.js.geladen .held .aktionen{transition-delay:.25s}.js.geladen .held-moebel{transition-delay:.3s}
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.da{opacity:1;transform:none}

/* Handy */
@media (max-width:900px){
  .held-in{grid-template-columns:minmax(0,1fr)}
  .held-holz{width:100%;top:auto;height:54%}
  .held{min-height:0}
  .held-moebel{margin-left:0;margin-top:1rem}
  .held-fuss{text-align:left;left:0;right:auto;padding-left:var(--seite)}
}
@media (max-width:980px){
  .kopfzeile,.konfig,.verbindung-in,.anfrage-raster{grid-template-columns:minmax(0,1fr)}
  .kopfzeile .lead{justify-self:start}
  .schritte{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:2.4rem}
}
@media (max-width:860px){
  :root{--kopf-h:60px}
  .nav-toggle{display:inline-flex;align-items:center;gap:.6rem;min-height:46px;padding:0 0 0 .9rem;background:none;border:0;border-left:1px solid var(--linie);cursor:pointer;font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin-left:auto}
  .nav-toggle::after{content:"";width:20px;height:9px;border-top:2px solid var(--nuss);border-bottom:2px solid var(--nuss);transition:transform .4s var(--ease)}
  .nav-offen .nav-toggle::after{transform:scaleY(.2)}
  .kopf-cta{display:none}
  .marke b{font-size:1.35rem}
  .nav{position:fixed;inset:var(--kopf-h) 0 0 0;margin:0;background:var(--leinen);display:flex;flex-direction:column;justify-content:space-between;padding:2rem var(--seite) calc(2rem + env(safe-area-inset-bottom));opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s,transform .35s var(--ease),visibility 0s linear .35s;overflow-y:auto}
  body.nav-offen{overflow:hidden}
  .nav-offen .nav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav-offen .kopf{background:var(--leinen)}
  .nav ul{flex-direction:column;gap:0}
  .nav li a{font:400 clamp(2rem,10vw,3rem)/1 var(--serif);letter-spacing:-.04em;min-height:76px;padding:0;border-top:1px solid var(--linie)}
  .nav li a::after{display:none}
  .nav-fuss{display:block;color:var(--grau);font-size:.62rem}
  .held h1{font-size:clamp(3rem,15vw,4.6rem)}
  .held-holz{height:48%}
  .griffe{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
  .art-k{grid-template-columns:54px 1fr}
  .art-k .muster{width:54px;height:54px}
}
@media (max-width:620px){ .schritte{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){
  html:not(.bewegung-an){scroll-behavior:auto}
  html:not(.bewegung-an) *, html:not(.bewegung-an) *::before, html:not(.bewegung-an) *::after{animation:none!important;transition:none!important}
  html.js:not(.bewegung-an) .held h1, html.js:not(.bewegung-an) .held .lead, html.js:not(.bewegung-an) .held .aktionen, html.js:not(.bewegung-an) .held-k, html.js:not(.bewegung-an) .held-moebel, html.js:not(.bewegung-an) .rv{opacity:1;transform:none}
  html:not(.bewegung-an) .schritte li::before{transform:scaleX(1)}
}
.eingebettet .stufen,.eingebettet .demo-leiste{display:none!important}
.eingebettet .fuss{padding-bottom:2.6rem}