@font-face{font-family:Inter;src:url("assets/fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:Fraunces;src:url("assets/fonts/fraunces-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Manrope;src:url("assets/fonts/manrope-latin.woff2") format("woff2");font-style:normal;font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;src:url("assets/fonts/manrope-latin-ext.woff2") format("woff2");font-style:normal;font-weight:400 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Outfit;src:url("assets/fonts/outfit-latin.woff2") format("woff2");font-style:normal;font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Outfit;src:url("assets/fonts/outfit-latin-ext.woff2") format("woff2");font-style:normal;font-weight:400 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--ink:#29251e;--deep:#28261d;--brown:#554b34;--paper:#f7f6f1;--cream:#e5e3da;--sand:#b8a889;--warm:#a84236;--sage:#667050;--line:rgba(41,37,30,.18);--serif:Fraunces,Georgia,serif;--sans:Inter,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:5.5rem}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans)}img{display:block;max-width:100%}a{color:inherit}button,input,textarea,select{font:inherit}.skip-link{position:fixed;z-index:1000;top:1rem;left:1rem;background:#fff;padding:.7rem 1rem;transform:translateY(-160%)}.skip-link:focus{transform:none}.eyebrow{margin:0 0 1rem;font-size:var(--fs-xs);font-weight:800;letter-spacing:.16em;text-transform:uppercase}.section{padding:8rem max(5vw,2rem)}h1,h2,h3,p{margin-top:0}h2{font:500 var(--fs-3xl)/.94 var(--serif);letter-spacing:-.055em}h2 em,h1 em{font-weight:330}.section-heading{max-width:63rem;margin-bottom:4rem}.section-heading>p:last-child,.statement>p:last-child,.sauna-heading>p:last-child{max-width:43rem;color:#6b615b;font-size:var(--fs-l)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:3.35rem;padding:.85rem 1.15rem;border:1px solid transparent;text-decoration:none;text-transform:uppercase;letter-spacing:.09em;font-size:var(--fs-xs);font-weight:800;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button-light{background:var(--paper);color:var(--deep)}.button-dark{background:var(--deep);color:#fff}.button-warm{background:var(--warm);color:#fff}.button-ghost{border-color:rgba(255,255,255,.6);color:#fff}

/* Header and hero */
.site-header{position:fixed;z-index:100;top:0;left:0;display:grid;grid-template-columns:1fr auto 1fr;width:100%;height:5rem;padding:0 var(--kopf-seitenabstand,max(3vw,1.25rem));align-items:center;color:#fff;border-bottom:1px solid rgba(255,255,255,.18);transition:background .3s,color .3s,height .3s}.site-header.is-scrolled{height:4.35rem;color:var(--ink);background:rgba(248,246,240,.96);box-shadow:0 10px 35px rgba(33,21,15,.08);backdrop-filter:blur(12px)}.nav{display:flex;gap:1.8rem}.nav a,.lang-link,.phone-link{font-size:var(--fs-s);font-weight:750;letter-spacing:.1em;text-decoration:none;text-transform:uppercase}.nav a{position:relative}.nav a:after{position:absolute;right:0;bottom:-.45rem;left:0;height:1px;background:currentColor;content:"";transform:scaleX(0);transition:transform .25s}.nav a:hover:after,.nav a.is-active:after{transform:scaleX(1)}.header-actions{display:flex;justify-content:flex-end;gap:1rem;align-items:center}.lang-link{padding:.32rem .43rem;border:1px solid currentColor}.header-cta{padding:.68rem .85rem;background:#fff;color:var(--deep);font-size:var(--fs-s);font-weight:800;letter-spacing:.09em;text-decoration:none;text-transform:uppercase}.site-header.is-scrolled .header-cta{background:var(--deep);color:#fff}.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--deep);color:#fff}.hero-image,.hero-image img,.hero-image>div{position:absolute;inset:0;width:100%;height:100%}.hero-image img{object-fit:cover;object-position:center}.hero-image>div{background:linear-gradient(90deg,rgba(32,19,14,.98) 0%,rgba(32,19,14,.87) 34%,rgba(32,19,14,.28) 66%,rgba(32,19,14,.08))}.hero-content{position:relative;width:min(52rem,62vw);padding:9rem 0 6rem max(5vw,2rem)}.hero h1{max-width:15ch;margin:0 0 1.8rem;font:500 var(--fs-hero)/.82 var(--serif);letter-spacing:-.075em}.hero h1 em{color:#f4dfc8}.hero-content>p:not(.eyebrow){max-width:38rem;margin-bottom:2rem;font-size:var(--fs-l)}.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem}.hero-signature{position:absolute;right:5vw;bottom:3.4rem;display:grid;text-align:right;text-transform:uppercase;letter-spacing:.13em}.hero-signature span,.hero-signature small{font-size:var(--fs-xs)}.hero-signature strong{font:500 var(--fs-2xl) var(--serif);letter-spacing:0;text-transform:none}.scroll-cue{position:absolute;bottom:1.5rem;left:50%;display:grid;gap:.4rem;justify-items:center;color:#fff;font-size:var(--fs-xs);letter-spacing:.13em;text-decoration:none;text-transform:uppercase;transform:translateX(-50%)}.scroll-cue i{height:1.5rem;border-left:1px solid currentColor}

/* Direction and offers */
.statement{position:relative;overflow:hidden;padding:8rem max(12vw,2rem);background:var(--cream)}.statement:before{position:absolute;inset:0;opacity:.16;background:repeating-linear-gradient(90deg,transparent 0,transparent 7px,rgba(85,75,52,.08) 8px,rgba(85,75,52,.08) 10px);content:"";pointer-events:none}.statement h2{position:relative;z-index:1;max-width:20ch;margin-bottom:1.6rem}.statement>p:last-child{position:relative;z-index:1}.logo-watermark{position:absolute;right:-6rem;bottom:-10rem;width:min(46vw,42rem);height:min(46vw,42rem);opacity:.055;background:url("assets/logo-holzmeisterei-frenken.png") center/contain no-repeat;filter:grayscale(1)}.maker{display:grid;grid-template-columns:minmax(19rem,.72fr) minmax(0,1fr);gap:7vw;align-items:center;background:var(--paper)}.maker figure{position:relative;margin:0}.maker figure:before{position:absolute;z-index:0;top:-1.2rem;right:1.2rem;bottom:1.2rem;left:-1.2rem;border:1px solid var(--warm);content:""}.maker figure img{position:relative;z-index:1;width:100%;height:min(72rem,78vh);min-height:38rem;object-fit:cover;object-position:center 34%}.maker>div{max-width:51rem}.maker>div>p:not(.eyebrow){max-width:43rem;color:#665d57}.maker dl{display:grid;grid-template-columns:repeat(3,1fr);margin:2.8rem 0 0;border-top:1px solid var(--line)}.maker dl div{padding:1.25rem 1rem 0 0}.maker dl div+div{padding-left:1rem;border-left:1px solid var(--line)}.maker dt{font:600 var(--fs-l) var(--serif)}.maker dd{margin:.35rem 0 0;color:#6b615b;font-size:var(--fs-xs);line-height:1.5}.offer{background:var(--paper)}.offer-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.offer-grid article{min-height:22rem;padding:2rem 1.6rem;border-right:1px solid var(--line)}.offer-grid article:last-child{border-right:0}.offer-grid span{color:var(--warm);font:500 var(--fs-l) var(--serif)}.offer-grid h3{margin:4rem 0 1rem;font:500 var(--fs-2xl)/1.05 var(--serif)}.offer-grid p{color:#665d57;font-size:var(--fs-m)}.offer-grid a,.sauna-card a{font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-decoration:none;text-transform:uppercase}.offer-grid a:after,.sauna-card a:after{margin-left:.35rem;content:"↗"}

/* Planning */

/* Bespoke project process */
.project-path{position:relative;overflow:hidden;background:var(--paper)}.project-path:after{position:absolute;top:3rem;right:-7rem;width:30rem;height:30rem;opacity:.045;background:url("assets/logo-holzmeisterei-frenken.png") center/contain no-repeat;content:"";filter:grayscale(1)}.project-path .section-heading,.project-path-list,.project-path>.button{position:relative;z-index:1}.project-path-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 2.6rem;padding:0;list-style:none;border-top:1px solid var(--line);border-left:1px solid var(--line)}.project-path-list li{display:grid;grid-template-columns:auto 1fr;gap:1rem;min-height:11rem;padding:1.4rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(90deg,transparent 0,transparent 92%,rgba(168,66,54,.08) 92%,rgba(168,66,54,.08) 100%)}.project-path-list b{color:var(--warm);font:500 var(--fs-xl) var(--serif)}.project-path-list span{display:grid;align-content:start;gap:.3rem}.project-path-list strong{font:500 var(--fs-xl)/1.03 var(--serif)}.project-path-list small{color:#665d57}.project-path>.button{box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}

 /* Kit drawing */
.kit-teaser{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(22rem,.55fr);gap:7vw;align-items:center;background:var(--deep);color:#fff}.kit-teaser>div{max-width:48rem}.kit-teaser h2{margin-bottom:1.4rem}.kit-teaser>div>p:not(.eyebrow){max-width:43rem;color:#d8d3c7}.kit-teaser aside{display:grid;gap:1.5rem;padding:2rem;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04)}.kit-teaser aside img{width:100%;max-height:18rem;filter:brightness(0) invert(1);opacity:.62}.kit-teaser aside b{font:500 var(--fs-xl) var(--serif)}.kit-teaser aside p{margin:.5rem 0 0;color:#d8d3c7}.sauna{position:relative;overflow:hidden;padding:8rem max(5vw,2rem);background:#25150f;color:#fff}.sauna:after{position:absolute;right:-10rem;bottom:-12rem;width:42rem;height:42rem;opacity:.04;background:url("assets/logo-holzmeisterei-frenken.png") center/contain no-repeat;content:"";filter:invert(1)}.sauna-heading{position:relative;z-index:1;max-width:60rem;margin-bottom:4rem}.sauna-heading>p:last-child{color:#d3c5b8}.sauna-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.sauna-card{position:relative;min-height:42rem;overflow:hidden;background:#0f0a08}.sauna-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s}.sauna-card:hover img{transform:scale(1.04)}.sauna-card:after{position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,9,5,.92),transparent 65%);content:""}.sauna-card>div{position:absolute;z-index:1;right:2rem;bottom:2rem;left:2rem}.sauna-card span{font-size:var(--fs-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase}.sauna-card h3{margin:.4rem 0 .8rem;font:500 var(--fs-2xl)/.95 var(--serif)}.sauna-card p{max-width:32rem;color:#eadfd2}.sauna-card a{display:inline-block}.steam-note{position:relative;z-index:1;display:flex;gap:.55rem;align-items:center;margin-top:1.5rem;color:#d6c4b3;font:500 var(--fs-l) var(--serif)}.steam-note span{width:1px;height:1.5rem;background:#d6c4b3;opacity:.45;animation:steam 2.8s ease-in-out infinite}.steam-note span:nth-child(2){animation-delay:.45s}.steam-note span:nth-child(3){animation-delay:.9s}@keyframes steam{50%{opacity:1;transform:translateY(-.55rem) rotate(5deg)}}

/* Projects and enquiry */
.projects{background:var(--paper)}.project-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1.5rem}.project-card{position:relative;min-height:32rem;overflow:hidden;background:var(--deep)}.project-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.project-card:hover img{transform:scale(1.035)}.project-card:after{position:absolute;inset:0;background:linear-gradient(0deg,rgba(28,16,11,.87),transparent 55%);content:""}.project-card>div{position:absolute;z-index:1;right:2rem;bottom:1.8rem;left:2rem;color:#fff}.project-card span{display:block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.13em;text-transform:uppercase}.project-card strong{display:block;font:500 var(--fs-2xl)/1.04 var(--serif)}.enquiry{display:grid;grid-template-columns:.75fr 1.25fr;gap:7vw;background:var(--cream)}.enquiry h2{margin-bottom:1.5rem}.enquiry-intro>p:not(.eyebrow){max-width:28rem;color:#665d57}.direct-contact{display:grid;gap:.4rem;margin-top:2rem}.direct-contact a{font:500 var(--fs-xl) var(--serif);text-decoration:none}.enquiry-paths{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.enquiry-path{display:flex;flex-direction:column;min-height:28rem;padding:clamp(1.4rem,3vw,2.4rem);border:1px solid var(--line);background:rgba(255,255,255,.58)}.enquiry-path>span{color:var(--warm);font-size:var(--fs-xs);font-weight:800;letter-spacing:.11em;text-transform:uppercase}.enquiry-path h3{margin:3rem 0 1rem;font:500 var(--fs-2xl)/1 var(--serif)}.enquiry-path p{color:#665d57}.enquiry-path .button{align-self:flex-start;margin-top:auto}.project-form{padding:clamp(1.2rem,3vw,2.4rem);background:#fff;box-shadow:0 1.5rem 4rem rgba(33,21,15,.1)}.project-form fieldset{min-width:0;border:0;padding:0}.route-picker{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1.7rem}.route-picker legend,.extras legend{margin-bottom:.7rem;font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase}.route-picker label{display:block;cursor:pointer}.route-picker input{position:absolute;opacity:0}.route-picker label span{display:grid;min-height:8.5rem;padding:1rem;border:1px solid var(--line);transition:border-color .2s,background .2s}.route-picker input:checked+span{border-color:var(--deep);background:#f5ece8;box-shadow:inset 3px 0 var(--warm)}.route-picker b{font:500 var(--fs-xl) var(--serif)}.route-picker small{color:#665d57}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.project-form label:not(.route-picker label){display:grid;gap:.4rem;margin-bottom:1rem}.project-form label>span:first-child{font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase}.project-form input,.project-form select,.project-form textarea{width:100%;border:1px solid var(--line);padding:.75rem;background:#fff;color:var(--ink);outline:none}.project-form input:focus,.project-form select:focus,.project-form textarea:focus{border-color:var(--deep);box-shadow:0 0 0 3px rgba(168,66,54,.24)}.form-panel{margin:1.4rem 0;padding-top:1.4rem;border-top:1px solid var(--line)}.form-panel.is-hidden{display:none}.form-panel h3{margin-bottom:.35rem;font:500 var(--fs-2xl) var(--serif)}.form-help{margin-bottom:1.2rem;color:#665d57;font-size:var(--fs-s)}.extras{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin:0 0 1rem}.extras label{display:flex!important;gap:.4rem;align-items:center;font-size:var(--fs-s)}.extras input,.consent input{width:1rem;height:1rem;accent-color:var(--deep)}.consent{display:flex!important;grid-template-columns:none!important;gap:.65rem;align-items:flex-start;margin:1.3rem 0!important}.consent span{font-size:var(--fs-s)!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important}.form-note{min-height:1.5rem;margin:1rem 0 0;color:#5d735f;font-size:var(--fs-s)}.form-note.is-error{color:#a33}.form-note.is-success{color:#4d7454}.trap{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Legal pages and responsive */
.legal-main{padding:9rem max(6vw,1.5rem) 6rem}.legal-section{max-width:52rem;margin:auto}.legal-section h1{font:500 var(--fs-4xl)/.95 var(--serif)}.legal-section h2{margin-top:2.5rem;font-size:var(--fs-2xl)}.legal-section p{color:#5f5752}.site-footer{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;padding:2.5rem var(--kopf-seitenabstand,max(3vw,1.25rem));background:var(--deep);color:#d9cfc4;font-size:var(--fs-xs)}.footer-brand{font:500 var(--fs-xl) var(--serif);text-decoration:none}.site-footer p{margin:0;text-align:center}.site-footer nav{display:flex;justify-content:flex-end;gap:1rem}.site-footer nav a{text-decoration:none}
@media(max-width:1080px){.site-header{grid-template-columns:1fr auto auto}.nav{display:none}.phone-link{display:none}.hero-content{width:min(52rem,78vw)}.offer-grid{grid-template-columns:repeat(2,1fr)}.offer-grid article:nth-child(2){border-right:0}.offer-grid article{border-bottom:1px solid var(--line)}.enquiry{grid-template-columns:1fr}.kit-teaser{grid-template-columns:1fr .55fr}.site-footer{grid-template-columns:1fr 1fr}.site-footer p{display:none}}
@media(max-width:700px){.section,.statement,.sauna{padding:5.5rem 1.2rem}.site-header{display:flex;gap:.6rem;height:4.35rem;padding:0 1rem}.brand span{display:none}.nav-toggle{margin-left:auto}.header-actions{gap:.6rem}.header-actions .header-cta{display:none}.header-cta{padding:.65rem .7rem;font-size:var(--fs-s)}.hero{min-height:47rem;align-items:flex-end}.hero-image>div{background:linear-gradient(0deg,rgba(32,19,14,.99),rgba(32,19,14,.58) 62%,rgba(32,19,14,.08))}.hero-content{width:calc(100vw - 0px);max-width:100%;min-width:0;padding:7rem 1.2rem 4.5rem}.hero h1{max-width:9ch;font-size:var(--fs-4xl);line-height:.87}.hero h1 em{display:block;max-width:7ch}.hero-content>p:not(.eyebrow){width:20rem;max-width:calc(100vw - 2.4rem);overflow-wrap:anywhere}.hero-actions{display:grid;grid-template-columns:1fr;max-width:17rem}.hero-actions .button{width:100%}.hero-signature{display:none}.scroll-cue{right:1.2rem;bottom:1rem;left:auto;transform:none}.logo-watermark{right:-7rem;bottom:-7rem;width:25rem;height:25rem}.maker{grid-template-columns:1fr;gap:3.5rem}.maker figure:before{top:-.65rem;right:.65rem;bottom:.65rem;left:-.65rem}.maker figure img{height:35rem;min-height:0}.maker dl{grid-template-columns:1fr}.maker dl div,.maker dl div+div{padding:1rem 0;border-left:0;border-bottom:1px solid var(--line)}.offer-grid{grid-template-columns:1fr}.offer-grid article,.offer-grid article:nth-child(2){min-height:auto;border-right:0}.offer-grid h3{margin:2rem 0 .8rem}.kit-teaser{grid-template-columns:1fr;padding:5.5rem 1.2rem}.kit-teaser aside{margin-top:1rem}.kit-teaser aside img{max-height:14rem}.sauna-grid,.project-grid,.enquiry-paths{grid-template-columns:1fr}.sauna-card{min-height:34rem}.enquiry{padding:5.5rem 1.2rem}.enquiry-path{min-height:24rem}.route-picker,.form-grid{grid-template-columns:1fr}.route-picker label span{min-height:auto}.site-footer{grid-template-columns:1fr;padding:2rem 1rem}.site-footer nav{justify-content:flex-start}.site-footer p{display:block;text-align:left}.extras{display:grid;grid-template-columns:1fr}}
/* `hidden` erzeugt hier einen zusätzlichen Scroll-Container und setzt dadurch
   die Sticky-Bühne der Aufbaugeschichte außer Kraft. `clip` verhindert den
   horizontalen Überlauf, ohne die vertikale Scrollmechanik zu übernehmen. */
html,body{overflow-x:clip}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.drawing-base,.drawing-frame,.drawing-detail{opacity:1!important;clip-path:inset(0)!important}}

.site-header--solid{color:var(--ink);background:var(--paper);border-color:var(--line)}.site-header--solid .header-cta{background:var(--deep);color:#fff}.subhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,.55fr);gap:8vw;align-items:end;min-height:36rem;padding:10rem max(8vw,2rem) 6rem;background:var(--cream)}.subhero h1{margin-bottom:1.5rem;font:500 var(--fs-hero)/.84 var(--serif);letter-spacing:-.07em}.subhero>div>p:not(.eyebrow){max-width:40rem;color:#625850;font-size:var(--fs-l)}.subhero aside{padding:1.5rem;border-left:1px solid var(--line);color:#65594f;font:500 var(--fs-xl)/1.3 var(--serif)}.kit-hero{background:linear-gradient(120deg,#f4f2ec,#c9c4b3)}.kit-hero aside{border:0}.kit-hero aside p{max-width:16rem}.kit-hero aside img{width:100%;margin-top:2rem;filter:sepia(.25) brightness(.65)}.config-hero{background:linear-gradient(125deg,#25150f 0%,#3f251a 62%,#a97954 160%);color:#fff}.config-hero>div>p:not(.eyebrow),.config-hero aside{color:#e4d6c7}.sauna-page-hero{position:relative;overflow:hidden;min-height:44rem;color:#fff;background:linear-gradient(90deg,rgba(31,17,11,.93),rgba(31,17,11,.3)),url("assets/portfolio/gartensauna-aussen-lukas-web.jpg") center/cover}.sauna-page-hero>div{position:relative;z-index:2}.sauna-page-hero>div>p:not(.eyebrow){color:#f0e8dd}.sauna-page-hero:before{position:absolute;z-index:1;right:4vw;bottom:-8rem;width:min(36vw,30rem);height:34rem;background:radial-gradient(ellipse at 22% 90%,rgba(255,255,255,.3),transparent 38%),radial-gradient(ellipse at 58% 82%,rgba(255,255,255,.2),transparent 34%),radial-gradient(ellipse at 82% 92%,rgba(255,255,255,.24),transparent 36%);content:"";filter:blur(18px);animation:sauna-vapour 7s ease-in-out infinite alternate;pointer-events:none}.sauna-page-hero:after{position:absolute;right:8vw;bottom:4rem;width:20rem;height:20rem;opacity:.1;background:url("assets/logo-holzmeisterei-frenken.png") center/contain no-repeat;content:"";filter:invert(1)}@keyframes sauna-vapour{from{opacity:.3;transform:translateY(2rem) scale(.94)}to{opacity:.68;transform:translateY(-2rem) scale(1.08)}}.sauna-cta-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.assembly-story{position:relative;display:grid;grid-template-columns:minmax(22rem,.82fr) minmax(30rem,1.18fr);gap:4vw;align-items:start;padding:7rem max(5vw,2rem);background:linear-gradient(110deg,#c9c4b3,#dedbd1 56%,#c7c1af)}.assembly-copy{align-self:start}.assembly-copy h2{max-width:37rem;margin-bottom:1.1rem}.assembly-copy>p:not(.eyebrow){max-width:36rem;color:#554d43}.assembly-steps{max-width:37rem;margin:1.35rem 0 0;padding:0;border-top:1px solid rgba(41,37,30,.22);list-style:none}.assembly-steps li{display:flex;gap:1rem;padding:.85rem 0;border-bottom:1px solid rgba(41,37,30,.22);transition:border-color .3s}.assembly-steps li.ist-erreicht{border-bottom-color:var(--warm)}.assembly-steps li.ist-erreicht b{color:var(--deep)}.assembly-steps b{min-width:1.8rem;font:500 var(--fs-l) var(--serif);color:var(--warm)}.assembly-steps span{display:grid;gap:.08rem}.assembly-steps strong{font-size:var(--fs-s)}.assembly-steps small{color:#5b5349;font-size:var(--fs-xs);line-height:1.35}.assembly-stage{position:sticky;top:6rem;display:grid;place-items:center;align-self:start;height:min(34rem,72vh);background:radial-gradient(circle at 53% 48%,rgba(255,255,255,.78),rgba(255,255,255,.12) 54%,transparent 72%)}.assembly-stage:before{position:absolute;inset:10% 5%;border:1px solid rgba(41,37,30,.09);content:"";pointer-events:none}.assembly-stage svg{width:min(94%,48rem);overflow:visible;filter:drop-shadow(0 1.6rem 1.6rem rgba(53,32,18,.13))}.assembly-part{fill:none;stroke:#43372b;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.assembly-part path,.assembly-part circle{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,0));opacity:calc(.06 + var(--draw,0)*.94);transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1),opacity .5s ease,fill-opacity .7s ease}.assembly-part path:nth-of-type(2),.assembly-part circle:nth-of-type(2){transition-delay:.18s}.assembly-part path:nth-of-type(3){transition-delay:.36s}.assembly-part path:nth-of-type(4){transition-delay:.54s}.assembly-part path:nth-of-type(5){transition-delay:.72s}.assembly-part path:nth-of-type(6),.assembly-part circle:last-child{transition-delay:.9s}.assembly-ground{stroke:#746b5a;stroke-width:4}.assembly-structure{stroke:#765f42;stroke-width:7}.assembly-roof-frame{stroke:#55452f;stroke-width:6}.assembly-walls{stroke:#795d3e}.assembly-roof{stroke:#302b24;stroke-width:7}.assembly-details{stroke:var(--warm);stroke-width:5}.assembly-surface{stroke-width:4;fill-opacity:calc(var(--draw,0) * .76)}.wall-surface{fill:#d8c39f}.wall-surface--side{fill:#bfa77f}.roof-surface{fill:#5b5549}.roof-surface--side{fill:#44423a}.assembly-progress{position:absolute;right:6%;bottom:8%;left:6%;height:2px;background:rgba(41,37,30,.18)}.assembly-progress span{display:block;width:calc(var(--assembly-progress) * 100%);height:100%;background:var(--warm);transition:width .08s linear}.assembly-caption,.assembly-count{position:absolute;bottom:10%;font-size:var(--fs-xs);font-weight:800;letter-spacing:.13em;text-transform:uppercase}.assembly-caption{left:7%}.assembly-count{right:7%}.kit-depth{background:var(--paper)}.kit-depth-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.kit-depth-grid article{padding:2rem;border-right:1px solid var(--line)}.kit-depth-grid article:last-child{border:0}.kit-depth-grid h3{margin:.5rem 0 .8rem;font:500 var(--fs-2xl) var(--serif)}.kit-depth-grid p{color:#655b55}.kit-depth .section-heading>p:not(.eyebrow){max-width:46rem;color:#655b55}.kit-promise{display:grid;grid-template-columns:.35fr 1fr;gap:2rem;margin-top:3rem;padding:2rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.kit-promise p{max-width:52rem;margin:0}.kit-enquiry{background:var(--cream)}.project-form--single{max-width:62rem}
.category-picker{margin-bottom:2rem}.category-picker legend{margin-bottom:1rem;font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase}.category-picker>div{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}.category-picker label{display:block;cursor:pointer}.category-picker input{position:absolute;opacity:0}.category-picker label span{display:grid;min-height:8rem;padding:1rem;border:1px solid var(--line);transition:border-color .2s,background .2s}.category-picker input:checked+span{border-color:var(--deep);background:#f5ece8;box-shadow:inset 3px 0 var(--warm)}.category-picker b{font:500 var(--fs-xl) var(--serif)}.category-picker small{color:#665b52}.configurator{display:grid;grid-template-columns:.7fr 1.3fr;gap:6vw;background:var(--paper)}.config-intro{position:sticky;top:7rem;align-self:start}.config-step{padding-top:1rem}.config-step[hidden]{display:none}.config-step.is-current{animation:step-in .35s ease-out}@keyframes step-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.step-number{margin:0 0 1rem;font-size:var(--fs-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase}.config-actions{display:flex;gap:.8rem;justify-content:space-between;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line)}.button-ghost-dark{border-color:var(--line);background:transparent;color:var(--ink)}.config-actions button:disabled{opacity:.35;pointer-events:none}.sauna-detail{background:var(--paper)}.sauna-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.sauna-detail-grid article{background:#f0ebe2}.sauna-detail-grid img{width:100%;height:26rem;object-fit:cover}.sauna-detail-grid div{padding:2rem}.sauna-detail-grid span{font-size:var(--fs-xs);font-weight:800;letter-spacing:.13em;text-transform:uppercase}.sauna-detail-grid h3{margin:.6rem 0 1rem;font:500 var(--fs-2xl)/1.04 var(--serif)}.sauna-detail-grid p,.sauna-detail-grid li{color:#665b52}.sauna-detail-grid ul{padding-left:1rem}.sauna-detail-grid a{font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-decoration:none;text-transform:uppercase}.sauna-detail-grid a:after{margin-left:.3rem;content:"↗"}.sauna-process{display:grid;grid-template-columns:.75fr 1.25fr;gap:6vw;padding:7rem max(8vw,2rem);background:#24140e;color:#fff}.sauna-process h2{margin:0}.sauna-process ol{margin:0;padding:0;list-style:none}.sauna-process li{display:flex;gap:1rem;padding:1.2rem 0;border-top:1px solid rgba(255,255,255,.2)}.sauna-process li:last-child{border-bottom:1px solid rgba(255,255,255,.2)}.sauna-process b{font:500 var(--fs-l) var(--serif);color:var(--warm)}.sauna-process span{display:grid}.sauna-process small{color:#d7c7b8}.sauna-cta{background:var(--cream)}.sauna-cta>p:not(.eyebrow){max-width:35rem;color:#665b52}
@media(max-width:900px){.subhero,.configurator,.sauna-process{grid-template-columns:1fr}.subhero aside{max-width:30rem}.assembly-story{grid-template-columns:minmax(18rem,.9fr) minmax(24rem,1.1fr);padding:5.5rem 1.5rem}.assembly-copy{padding-top:7vh}.assembly-steps li{padding:.6rem 0}.assembly-stage{height:100vh}.kit-depth-grid,.category-picker>div{grid-template-columns:repeat(2,1fr)}.config-intro{position:static}.sauna-detail-grid{grid-template-columns:1fr}}
@media(max-width:700px){.project-path-list{grid-template-columns:1fr}.project-path-list li{min-height:auto;padding:1.15rem}.subhero{min-height:0;padding:8rem 1.2rem 4rem}.subhero h1{font-size:var(--fs-4xl)}.subhero aside{padding:1rem 0;border-left:0;border-top:1px solid currentColor}.assembly-story{display:block;padding:4.5rem 1.2rem}.assembly-copy{position:relative;height:auto;padding-top:5rem}.assembly-stage{position:relative;height:24rem;margin-bottom:2rem}.assembly-stage:before{inset:5% 0}.assembly-part{--draw:1}.assembly-surface{fill-opacity:.76}.assembly-steps li{opacity:1;transform:none}.assembly-progress{display:none}.kit-depth-grid,.category-picker>div{grid-template-columns:1fr}.kit-promise{grid-template-columns:1fr;gap:.5rem;padding:1.5rem 0}.kit-depth-grid article{border-right:0;border-bottom:1px solid var(--line)}.configurator{padding:5.5rem 1.2rem}.sauna-detail-grid img{height:21rem}.sauna-process{padding:5rem 1.2rem}.config-actions{flex-wrap:wrap}.config-actions .button{flex:1}.sauna-page-hero:after{display:none}}

/* ---------------------------------------------------------------------------
   Mobile Navigation und Fokus (Sprint 1)
   Bis 1080px war .nav schlicht ausgeblendet: unterhalb Desktop gab es gar
   keine Navigation. Der Menuebutton oeffnet die Navigation als Panel.
--------------------------------------------------------------------------- */

:root{--kopfhoehe:5rem}

/* Ein sichtbarer, ruhiger Fokusring auf allem, was bedienbar ist. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--warm);outline-offset:3px;border-radius:2px}
.site-header a:focus-visible,.site-header button:focus-visible{outline-color:currentColor}
.skip-link{transition:transform .18s}
.skip-link:focus-visible{outline-offset:0}

.nav-toggle{display:none;gap:.55rem;align-items:center;padding:.55rem .8rem;background:none;border:1px solid currentColor;color:inherit;font-size:var(--fs-s);font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.nav-toggle-balken{position:relative;display:block;width:1.1rem;height:2px;background:currentColor;transition:background .2s}
.nav-toggle-balken:before,.nav-toggle-balken:after{position:absolute;left:0;width:100%;height:2px;background:currentColor;content:"";transition:transform .22s}
.nav-toggle-balken:before{top:-.36rem}
.nav-toggle-balken:after{top:.36rem}
.nav-toggle[aria-expanded="true"] .nav-toggle-balken{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-balken:before{transform:translateY(.36rem) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-balken:after{transform:translateY(-.36rem) rotate(-45deg)}

@media(max-width:1080px){
  .site-header{grid-template-columns:1fr auto auto;gap:.7rem}
  .site-header>.brand,.site-header>.nav-toggle,.site-header>.header-actions{position:relative;z-index:91}
  .nav-toggle{display:inline-flex}

  /* Panel liegt unter dem Kopfbereich, damit die Kopfhoehe egal ist. */
  .nav{position:fixed;z-index:90;top:0;right:0;left:0;display:grid;gap:0;
       padding:calc(var(--kopfhoehe) + .75rem) max(3vw,1.25rem) 1.6rem;
       background:var(--paper);color:var(--ink);
       border-bottom:1px solid var(--line);box-shadow:0 24px 50px rgba(33,21,15,.16);
       transform:translateY(-101%);visibility:hidden;
       transition:transform .28s ease,visibility .28s}
  .nav[data-offen]{transform:none;visibility:visible}
  .nav a{padding:1rem .2rem;font-size:var(--fs-xs);border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .nav a:after{display:none}
  .nav a[aria-current="page"]{color:var(--brown)}
  .nav a[aria-current="page"]:before{margin-right:.6rem;content:"—"}

  /* Solange das Panel offen ist, braucht der Kopfbereich einen eigenen Grund,
     sonst steht weisse Schrift auf hellem Papier. */
  body[data-nav-offen] .site-header{color:var(--ink);background:var(--paper);border-color:var(--line)}
  body[data-nav-offen] .site-header .header-cta{background:var(--deep);color:#fff}
  body[data-nav-offen]{overflow:hidden}
}

/* Visuell verborgene Auswahlfelder bleiben bedienbar, duerfen aber weder die
   Panelbreite noch den horizontalen Scrollbereich vergroessern. */
.category-picker input,.route-picker input{width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.category-picker input:focus-visible+span,
.route-picker input:focus-visible+span{outline:3px solid var(--warm);outline-offset:3px}

@media(max-width:700px){
  :root{--kopfhoehe:4.35rem}
  .nav-toggle span:not(.nav-toggle-balken){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .nav-toggle{padding:.55rem .6rem}
}

@media(prefers-reduced-motion:reduce){
  .nav{transition:none}
  .nav-toggle-balken,.nav-toggle-balken:before,.nav-toggle-balken:after{transition:none}
}

/* Vollständige statische Bauzeichnung bei reduzierter Bewegung. */
.is-static .assembly-part{--draw:1}

/* Fehlerhafte Felder auch ohne Farbwahrnehmung erkennbar: Rahmen, Markierung
   und Text am Feld, nicht nur eine rote Umrandung. */
.hat-fehler input,.hat-fehler textarea,.hat-fehler select{border-color:#a2331f;box-shadow:inset 3px 0 0 #a2331f}
.hat-fehler>span:first-child:after,.hat-fehler>legend:after{margin-left:.4rem;color:#a2331f;font-weight:800;content:"– bitte prüfen"}
[aria-disabled="true"]{opacity:.5;cursor:default}
[aria-disabled="true"]:hover{transform:none}

/* Konfigurator: Fortschritt, Hinweise, Mehrfachauswahl und Zusammenfassung */
.config-progress{margin:0 0 1.5rem;font-size:var(--fs-xs);font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#7a6a5e}
.step-hinweis{max-width:44rem;margin:-.5rem 0 1.8rem;color:#6b615b;font-size:var(--fs-m)}
.feld-hinweis{display:block;margin-top:.4rem;color:#7a6a5e;font-size:var(--fs-s)}
.project-form .form-grid>label{align-self:start;align-content:start}

.mehrfach-gruppe{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.5rem;margin-top:.5rem}
.mehrfach-option{display:flex;gap:.55rem;align-items:center;padding:.7rem .8rem;border:1px solid var(--line);cursor:pointer}
.mehrfach-option:hover{border-color:var(--warm)}
.mehrfach-option:has(input:checked){border-color:var(--deep);background:var(--cream)}
.feld-mehrfach{grid-column:1/-1}

.config-zusammenfassung{margin:0 0 1.8rem;padding:1.25rem 1.4rem;border:1px solid var(--line);background:var(--cream)}
.config-zusammenfassung>h3{margin:0 0 .5rem;font:500 var(--fs-2xl) var(--serif)}
.config-zusammenfassung .zusammenfassung-block{padding:1.2rem 0;border-bottom:1px solid var(--line)}
.form-details{margin:1rem 0 1.2rem;border:1px solid var(--line);background:rgba(255,255,255,.55)}
.form-details summary{padding:1rem 1.1rem;cursor:pointer;color:var(--brown);font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.form-details[open] summary{border-bottom:1px solid var(--line)}
.form-details-grid{padding:1.1rem}
.form-details .extras{grid-column:1/-1}
.config-details{margin-top:1.4rem;border:1px solid var(--line);background:rgba(229,229,223,.45)}
.config-details summary{display:grid;justify-content:start;gap:.2rem;padding:1rem 1.1rem;cursor:pointer;color:var(--ink);font-weight:750}
.config-details summary::marker{color:var(--sage)}
.config-details summary small{color:#74786d;font-size:var(--fs-xs);font-weight:500}
.config-details.hat-angaben{border-left:4px solid var(--sage)}
.config-details[open] summary{border-bottom:1px solid var(--line)}
.config-details-grid{padding:1.1rem}
.config-details + label[data-zusammenfassung]{margin-top:1.5rem}
.category-change{margin:.8rem 0 0;padding:.55rem .75rem;border:1px solid var(--line);background:transparent;color:var(--brown);font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.hat-kategorie:not(.zeigt-kategorien) .category-picker>div{grid-template-columns:minmax(14rem,22rem)}
.hat-kategorie:not(.zeigt-kategorien) .category-picker label:not(:has(input:checked)){display:none}
.hat-kategorie:not(.zeigt-kategorien) .category-picker label span{min-height:auto}

/* Die Aufbaugeschichte zeigt flächige, klar getrennte Bauzustände. Sie ergänzt
   die Erklärung, ohne eine künstliche Scrollstrecke zu erzwingen. */
[data-assembly]{display:none!important}

/* Ein Wasserzeichen darf nie gegen Bild oder Inhalt arbeiten. Bis es einen
   konkreten Platz im Layout hat, bleibt das Logo reine Marke im Kopfbereich. */
.logo-watermark{display:none}
/* .sauna:after stand hier ebenfalls auf display:none. Das Zeichen hat
   inzwischen seinen Platz - siehe weiter unten -, die Abschaltung war der
   Grund, warum auf der dunklen Flaeche nie etwas zu sehen war. */

/* Der Versand ist eine Schlussaktion und darf in frühen Schritten nicht wie
   die nächste erwartete Bedienung aussehen. */
.config-actions .is-hidden{display:none!important}
.config-next-help{margin:1rem 0 0;color:#6b615b;font-size:var(--fs-s);line-height:1.5}
.zusammenfassung-block h3{display:flex;flex-wrap:wrap;gap:.7rem;align-items:baseline;margin:0 0 .7rem;font:600 var(--fs-xs) var(--sans);letter-spacing:.13em;text-transform:uppercase}
.zusammenfassung-aendern{padding:.2rem .5rem;background:none;border:1px solid currentColor;color:var(--brown);font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.zusammenfassung-aendern:hover{background:var(--cream)}
.zusammenfassung-block dl{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:.45rem 1.5rem;margin:0}
.zusammenfassung-block dt{color:#7a6a5e;font-size:var(--fs-s)}
.zusammenfassung-block dd{margin:0;font-size:var(--fs-m)}
.zusammenfassung-block p{margin:0;font:500 var(--fs-xl) var(--serif)}

@media(max-width:700px){
  .zusammenfassung-block dl{grid-template-columns:1fr;gap:.15rem}
  .zusammenfassung-block dt{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em}
  .zusammenfassung-block dd{margin-bottom:.6rem}
}

/* Die Montagegrafik ist eine Zugabe, kein Grund zu scrollen.
   Die sechs Bauphasen sind durchgehend lesbar; erreichte Phasen bekommen nur
   eine ruhige Markierung. Die Zeichnung fuellt sich beilaeufig. */
.assembly-stage{overflow:hidden;border:1px solid rgba(47,48,43,.12);background:linear-gradient(145deg,#f2f0e9,#d9dbd2)}
.assembly-stage:after{position:absolute;inset:auto 10% 15% 10%;height:20%;border-radius:50%;background:rgba(47,48,43,.08);content:"";filter:blur(24px);pointer-events:none}
.assembly-stage svg{position:relative;z-index:1}
.assembly-stage .assembly-part{fill:initial;stroke:none;opacity:var(--draw,0);transform:translateY(calc((1 - var(--draw,0))*28px));transform-origin:center bottom;transition:opacity .55s ease,transform .7s cubic-bezier(.2,.75,.25,1)}
.assembly-roof{transform:translateY(calc((1 - var(--draw,0))*-42px))}
.assembly-details{transform:translateY(0) scale(calc(.94 + var(--draw,0)*.06));transform-origin:center center}
.assembly-part path,.assembly-part circle{stroke-dasharray:none;stroke-dashoffset:0;opacity:1;transition:none}
.assembly-steps li{border-left:3px solid transparent;padding-left:.8rem}
.assembly-steps li.ist-erreicht{border-left-color:var(--sage);background:linear-gradient(90deg,rgba(104,112,86,.1),transparent 65%)}
.assembly-progress span{background:var(--sage)}
.is-static .assembly-part{opacity:1;transform:none}
.is-static .assembly-part path,.is-static .assembly-part circle{transition:none}
.assembly-steps li b{transition:color .3s}
@media(prefers-reduced-motion:reduce){
  .assembly-part path,.assembly-part circle{transition:none;transition-delay:0s}
  .assembly-steps li{transition:none}
}

/* Der aktuelle Projektbrief beginnt nach dem festen Header statt dahinter. */
.config-step{scroll-margin-top:6.25rem}

/* Ruhigere Werkstattpalette: dunkles Cord-Oliv, warmes Arbeitsgrau und Rot
   nur noch als kleiner Akzent an entscheidenden Stellen. */
:root{--ink:#2f302b;--deep:#34372d;--brown:#565846;--paper:#f4f3ef;--cream:#e5e5df;--sand:#b8ad96;--warm:#984b43;--sage:#687056;--line:rgba(47,48,43,.18)}
html.is-jumping{scroll-behavior:auto}
body{background:var(--paper)}
.statement,.enquiry,.kit-enquiry,.sauna-cta{background:var(--cream)}
.kit-teaser,.site-footer,.sauna-process{background:var(--deep)}
.button-warm{background:var(--deep)}
.offer-grid span,.project-path-list b,.card-number,.enquiry-path>span{color:var(--sage)}
.project-path-list li{background:none}
.maker figure:before{border-color:var(--sage)}
.maker figure img{height:min(48rem,68vh);min-height:30rem;object-position:center}
.route-picker input:checked+span,.category-picker input:checked+span{background:#eceee7;box-shadow:inset 4px 0 var(--sage)}
.project-form input:focus,.project-form select:focus,.project-form textarea:focus{box-shadow:0 0 0 3px rgba(104,112,86,.22)}
.form-contact-block{margin-top:2rem;padding-top:1.7rem;border-top:1px solid var(--line)}
.form-contact-block>.eyebrow{margin-bottom:1rem}

/* Anklickbare Projektkarten und zugängliche Bildansicht. */
.project-card{width:100%;padding:0;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.project-card:focus-visible{outline:4px solid var(--sage);outline-offset:4px}
.project-card>div small{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;font-size:var(--fs-xs);font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.project-card>div small:after{content:"↗";font-size:var(--fs-m)}
.project-gallery{width:min(76rem,calc(100vw - 2rem));max-width:none;margin:auto;padding:0;border:0;background:#22241f;color:#fff;box-shadow:0 2rem 6rem rgba(0,0,0,.4)}
.project-gallery::backdrop{background:rgba(22,24,20,.82);backdrop-filter:blur(5px)}
.project-gallery-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem}
.project-gallery-bar strong{font:500 var(--fs-xl) var(--serif)}
.project-gallery-bar button{width:2.7rem;height:2.7rem;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:var(--fs-2xl);line-height:1;cursor:pointer}
.project-gallery figure{margin:0}
.project-gallery img{width:100%;height:min(72vh,52rem);object-fit:contain;background:#171814}
.project-gallery figcaption{min-height:2rem;padding:.35rem 1rem;color:#d8d9d2;font-size:var(--fs-xs);text-align:center}
.project-gallery-actions{display:flex;justify-content:space-between;padding:.8rem 1rem 1rem}
.project-gallery-actions button{min-width:7rem;padding:.7rem 1rem;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-weight:750;cursor:pointer}
.project-gallery-actions button:hover,.project-gallery-bar button:hover{background:rgba(255,255,255,.1)}

/* Projektserien zeigen bereits in der Übersicht, dass mehr als ein Endfoto
   vorhanden ist. Die eigentliche Serie bleibt per Tastatur und Dialog bedienbar. */
.sauna-gallery-link{display:inline-block;margin:0 1.1rem .8rem 0;padding:0;border:0;border-bottom:1px solid currentColor;background:transparent;color:#fff;font:800 var(--fs-xs)/1.6 var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.sauna-gallery-link:after{margin-left:.35rem;content:"↗"}
.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.project-card-wide{grid-column:1/-1}
.project-card{min-height:34rem}
.project-card-images{position:absolute;inset:0;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:3px;background:var(--paper)}
.project-card .project-card-images img{position:static;width:100%;height:100%;min-width:0;object-fit:cover}
.project-card .project-card-images img:first-child{grid-row:1/3}
.project-card>div{pointer-events:none}
.project-gallery figcaption{display:flex;justify-content:space-between;gap:1rem;text-align:left}
.project-gallery [data-gallery-count]{margin-left:auto;white-space:nowrap}

@media(max-width:700px){
  html,body{max-width:100%;overflow-x:hidden}
  .subhero{overflow:hidden}
  .subhero>*,.section-heading,.kit-depth-grid>*{min-width:0}
  .subhero h1{max-width:100%;font-size:var(--fs-4xl);overflow-wrap:anywhere}
  .subhero p,.section-heading p,.kit-depth-grid p{overflow-wrap:anywhere}
  .maker figure img{height:28rem;min-height:0}
  .project-gallery{width:100vw}
  .project-gallery img{height:65vh}
  .project-card-wide{grid-column:auto}
}

/* Zweite Verdichtungsrunde nach dem echten Browserdurchlauf.
   Die frueheren h2-Ueberschreibungen sind entfallen: die Basisregel begrenzt
   die Groesse inzwischen selbst ueber die Skala. */
.section{padding-top:6rem;padding-bottom:6rem}
.statement{padding-top:6rem;padding-bottom:6rem}
.statement:before{opacity:.08}
.offer-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.offer-grid article{min-height:20rem;padding:1.6rem 1.25rem}
.offer-grid h3{margin-top:2.7rem;font-size:var(--fs-xl)}
.project-path:after{display:none}
.project-path-list{grid-template-columns:repeat(4,minmax(0,1fr))}
.project-path-list li{min-height:10rem}
.config-hero{background:linear-gradient(125deg,#303429 0%,#4b5140 68%,#757b64 150%)}
.sauna,.sauna-process{background:var(--deep)}
.sauna-page-hero{background:linear-gradient(90deg,rgba(39,43,34,.92),rgba(39,43,34,.24)),url("assets/portfolio/gartensauna-aussen-lukas-web.jpg") center/cover}
.configurator{grid-template-columns:minmax(16rem,.55fr) minmax(0,1.45fr);gap:4vw}
.config-next-help{color:#74786d;font-size:var(--fs-s)}
.config-progress{margin:.8rem 0 .2rem}
.config-step>.step-number{margin-bottom:.7rem}
.step-number[tabindex="-1"]{width:max-content;max-width:100%}
.project-form{box-shadow:0 1rem 2.8rem rgba(37,40,32,.08)}
.kit-enquiry .section-heading{margin-bottom:2.5rem}
.kit-teaser h2{max-width:10ch}
.kit-hero aside img{max-width:28rem;margin:1.5rem auto 0;padding:1.5rem;border:1px solid rgba(47,48,43,.14);background:rgba(255,255,255,.24);filter:none;opacity:.82}
.configurator,.kit-enquiry{scroll-margin-top:4.8rem}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline-color:var(--sage)}
.project-gallery img{height:min(58vh,42rem)}

@media(max-width:1100px){
  .offer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .offer-grid article:nth-child(n+4){border-top:1px solid var(--line)}
  .configurator{grid-template-columns:1fr}
  .config-intro{position:static}
  .config-intro h2{max-width:14ch}
}
@media(max-width:900px){
  .project-path-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .section,.statement{padding-top:4.5rem;padding-bottom:4.5rem}
  .offer-grid,.project-path-list{grid-template-columns:1fr}
  .offer-grid article{min-height:auto;padding:1.5rem 0}
  .configurator{grid-template-columns:1fr}
  .project-gallery img{height:52vh}
}

/* Originale Vektor-Wortmarke statt nachgesetzter Schrift. Auf dunklem Grund
   erscheint das weiße Masterlogo, auf hellen Kopfzeilen die schwarze Fassung.
   Kopf- und Fusszeile hatten bislang unterschiedliche seitliche Abstaende
   (max(3vw,1.25rem) gegen max(5vw,2rem)) - dadurch standen Kopf- und
   Fusslogo beim Runterscrollen sichtbar nicht untereinander. Beide Zeilen
   teilen sich jetzt denselben Wert. */
:root{--kopf-seitenabstand:max(3vw,1.25rem)}
.brand{display:flex;align-items:center;gap:.65rem;width:max-content;text-decoration:none}
.brand-mark{position:relative;display:block;flex:none;width:4.15rem;height:4.15rem;line-height:0}
.brand-mark img{position:absolute;inset:0;width:100%;height:100%;padding:0;border-radius:0;background:transparent;object-fit:contain;transition:opacity .2s}
.brand-mark-dark{opacity:0}
.site-header.is-scrolled .brand-mark-light,.site-header--solid .brand-mark-light,body[data-nav-offen] .brand-mark-light{opacity:0}
.site-header.is-scrolled .brand-mark-dark,.site-header--solid .brand-mark-dark,body[data-nav-offen] .brand-mark-dark{opacity:1}

/* Wortmarke im Kopf: gleiche Hell/Dunkel-Logik wie das Icon, per Breite
   gesteuert (das SVG hat ein festes Seitenverhaeltnis 662:206). */
.brand-wortmarke{position:relative;display:block;width:9.5rem;line-height:0}
.brand-wortmarke img{position:absolute;inset:0;top:50%;width:100%;height:auto;transform:translateY(-50%);transition:opacity .2s}
.brand-wortmarke-dark{opacity:0}
.site-header.is-scrolled .brand-wortmarke-light,.site-header--solid .brand-wortmarke-light,body[data-nav-offen] .brand-wortmarke-light{opacity:0}
.site-header.is-scrolled .brand-wortmarke-dark,.site-header--solid .brand-wortmarke-dark,body[data-nav-offen] .brand-wortmarke-dark{opacity:1}

.footer-brand{display:flex;align-items:center;gap:.85rem;width:max-content;text-decoration:none}
.footer-brand-icon{flex:none;width:5.5rem;height:5.5rem;object-fit:contain}
.footer-brand-wortmarke{width:11.5rem;height:auto}
@media(max-width:700px){
  .brand-mark{width:3.55rem;height:3.55rem}
  .brand-wortmarke{width:7.8rem}
  .footer-brand-icon{width:4.8rem;height:4.8rem}
  .footer-brand-wortmarke{width:9.4rem}
}
@media(max-width:520px){
  /* Auf sehr schmalen Schirmen wird die Wortmarke neben dem Icon zu eng -
     dann faellt sie weg und das Icon traegt die Marke allein. */
  .brand-wortmarke,.footer-brand-wortmarke{display:none}
}

/* Farbklima der tatsächlichen Arbeitskleidung: dunkles Cordbraun für große
   Flächen, mittleres warmes Braun für Auswahlzustände und kleine Akzente. */
:root{
  --ink:#302923;
  --deep:#382920;
  --brown:#634837;
  --paper:#f6f4ef;
  --cream:#e8e3dc;
  --sand:#b79f8b;
  --sage:#765945;
  --line:rgba(48,41,35,.18);
}
.config-hero{background:linear-gradient(125deg,#35251d 0%,#634837 68%,#8a6c58 150%)}
.route-picker input:checked+span,.category-picker input:checked+span{background:#eee6df;box-shadow:inset 4px 0 var(--sage)}
.project-form input:focus,.project-form select:focus,.project-form textarea:focus{box-shadow:0 0 0 3px rgba(118,89,69,.2)}

/* ---------------------------------------------------------------------------
   Schriftskala
   Vorher gab es rund 40 freihaendig gesetzte Groessen und zehn verschiedene
   clamp()-Definitionen fuer Ueberschriften; die kleinste sichtbare Schrift lag
   bei 9,6px - darunter auch Navigation, Buttons und Formularbeschriftungen.
   Alles laeuft jetzt ueber diese Stufen. Untergrenze ist 14px, fuer
   Bedienelemente 15px.
--------------------------------------------------------------------------- */
:root{
  --fs-xs:.875rem;      /* 14px - Beschriftungen, Bildunterschriften, Fusszeile */
  --fs-s:.9375rem;      /* 15px - Navigation, Buttons, Formularbeschriftungen */
  --fs-m:1rem;          /* 16px - Fliesstext */
  --fs-l:1.125rem;      /* 18px - Einleitungsabsaetze */
  --fs-xl:1.375rem;     /* 22px - Kartenueberschriften */
  --fs-2xl:clamp(1.35rem,2vw,1.65rem);    /* 22-26px - h3, Kartentitel */
      /* 24-30px - h3 */
  --fs-3xl:clamp(1.9rem,3.2vw,2.5rem);    /* 30-40px - Abschnittstitel */
              /* 32-48px - h2 */
  --fs-4xl:clamp(2.2rem,4vw,3rem);        /* 35-48px - h1 Unterseiten */
       /* 40-60px - h1 auf Unterseiten */
  --fs-hero:clamp(2.5rem,5vw,3.5rem);     /* 40-56px - Startseite */
    /* 44-72px - Startseite */
}

/* small erbt sonst den Browserstandard (13,3px) und faellt unter die Skala. */
small{font-size:var(--fs-xs)}

/* Zeilenhoehe fuer kleine Groessen: eng gesetzte 14px sind schwer zu lesen. */
.eyebrow{line-height:1.45}

/* Kurzkontakt: Freitext ohne Umweg ueber den Konfigurator. Der Server bekommt
   custom_type=offen, was das Regelmodell als unentschieden kennt. */
.quick-contact{display:grid;grid-template-columns:minmax(16rem,.8fr) minmax(0,1.2fr);gap:4vw;align-items:stretch;padding:5rem max(5vw,2rem);background:var(--cream)}
.quick-contact>div:first-child{position:relative;min-height:100%;padding-bottom:clamp(15rem,24vw,23rem)}
.quick-contact>div:first-child:after{
  position:absolute;bottom:0;left:clamp(-1rem,-1vw,0rem);width:clamp(15rem,23vw,21rem);aspect-ratio:1;
  background:url("assets/textures/walnuss-logo-hd.png") center/cover no-repeat;
  content:"";opacity:.82;pointer-events:none;
  -webkit-mask:url("assets/logo/holzmeisterei-frenken-logo.svg") center/contain no-repeat;
  mask:url("assets/logo/holzmeisterei-frenken-logo.svg") center/contain no-repeat;
  filter:saturate(.72) contrast(1.05);
}
.quick-contact h2{margin-bottom:1rem}
.quick-contact>div>p{max-width:34rem;color:#5f5a50}
.project-form--quick{display:grid;gap:1.1rem;padding:2rem;background:var(--paper);border:1px solid var(--line)}
.project-form--quick .form-grid{gap:1rem}
.project-form--quick textarea{width:100%}
.project-form--quick .button{justify-self:start}
.direct-contact a:hover{text-decoration:underline}
.direct-contact a:first-child{font-size:var(--fs-2xl)}

@media(max-width:900px){
  .quick-contact{grid-template-columns:1fr;gap:2rem;padding:4rem 1.2rem}
  .quick-contact>div:first-child{min-height:0;padding-bottom:0}
  .quick-contact>div:first-child:after{position:relative;bottom:auto;left:auto;display:block;width:min(13rem,48vw);margin:2.2rem auto -.3rem;opacity:.72}
  .project-form--quick{padding:1.4rem}
}

/* ---------------------------------------------------------------------------
   Passung auf schmalen Schirmen und bei starkem Zoom
   Das Projektraster stand unbedingt auf zwei Spalten und ueberschrieb damit
   die Einspaltenregel; bei 320px blieben 129px je Karte und der Textkasten
   wurde auf 65px zusammengedrueckt. auto-fit regelt das ohne Medienabfrage
   und kann nicht erneut ueberschrieben werden.
--------------------------------------------------------------------------- */
.project-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.project-card-wide{grid-column:auto}

/* Der Textkasten liegt ueber dem Bild. Sein Innenabstand darf die Karte nicht
   auffressen, wenn sie schmal wird. */
.project-card>div{right:clamp(.75rem,4%,2rem);left:clamp(.75rem,4%,2rem);bottom:clamp(.9rem,4%,1.8rem)}

/* Klickflaechen: WCAG 2.2 verlangt 24x24. Die textlichen Verweise lagen bei
   17px Hoehe. */
.offer-grid a,.sauna-card a,.sauna-detail-grid a,.project-gallery a,.direct-contact a{
  display:inline-flex;align-items:center;min-height:1.5rem;padding-block:.15rem
}
.nav-toggle{min-height:1.75rem}
.site-footer nav a,.footer-legal-links a{display:inline-flex;align-items:center;min-height:1.5rem}
.consent input[type=checkbox],.mehrfach-option input[type=checkbox]{width:1.5rem;height:1.5rem;flex:0 0 auto}

/* Kopfbereich: "Kontakt" statt Telefonnummer. Die Nummer stand dort klein und
   unruhig; sie gehoert gross in den Kontaktbereich. */
.contact-link{font-size:var(--fs-s);font-weight:750;letter-spacing:.1em;text-decoration:none;text-transform:uppercase;
  display:inline-flex;align-items:center;min-height:1.5rem;padding-bottom:.12rem;border-bottom:1px solid currentColor}
.contact-link:hover{border-bottom-color:transparent}
.direct-contact-lead{margin:0 0 .35rem;color:#6b6459;font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.kit-enquiry .direct-contact{margin:0 0 2.2rem}

@media(max-width:700px){ .contact-link{display:none} }

/* Flaechenwechsel: "maker" und "offer" hatten denselben Grund, ebenso
   "enquiry" und der neue Kurzkontakt. Zwei gleiche Toene nebeneinander lesen
   sich als eine einzige, flache Flaeche. Jetzt wechseln sie sich ab. */
.offer{background:var(--cream)}
.quick-contact{background:var(--paper)}
.project-form--quick{background:#fff}
.quick-contact>div>p{color:#5b554c}

/* ---------------------------------------------------------------------------
   Ruhe in den Karten
   Die Verweise sassen je nach Textlaenge auf drei verschiedenen Hoehen; das
   liest sich unruhig. Als Spalte mit margin-top:auto stehen sie auf einer
   Linie, unabhaengig davon, wie lang der Text darueber ist.
--------------------------------------------------------------------------- */
.offer-grid article,.kit-depth-grid article,.enquiry-path{display:flex;flex-direction:column}
.offer-grid article>a,.kit-depth-grid article>a,.enquiry-path>.button{margin-top:auto}
.offer-grid h3{margin-top:0}
.offer-grid p{margin-bottom:1.6rem}

/* Der Text unter einer Ueberschrift war mit 14px kleiner als der Absatz
   darueber mit 16px. Das wirkt wie Kleingedrucktes, obwohl Platz da ist. */
.maker dd{font-size:var(--fs-m);line-height:1.55}
.maker dt{font-size:var(--fs-xl)}
.maker dl div{padding-top:1.4rem}

/* Die Signatur steht rechts unten ueber dem hellen Teil des Hero-Bildes.
   Weiss auf Weiss war dort nicht lesbar. */
.hero-signature{text-shadow:0 1px 3px rgba(20,14,9,.9),0 0 18px rgba(20,14,9,.65)}
.hero-signature span,.hero-signature small{font-size:var(--fs-s)}
.hero-signature:after{position:absolute;z-index:-1;inset:-1.4rem -1.6rem;border-radius:2px;
  background:radial-gradient(ellipse at 70% 50%,rgba(20,14,9,.62),transparent 72%);content:""}
/* Zwei der Verweise brechen auf zwei Zeilen um. Unten buendig heisst dann,
   dass ihre Oberkanten auseinanderlaufen. Gleiche Hoehe, Text oben verankert:
   damit beginnen alle auf derselben Linie, egal wie lang die Beschriftung ist. */
.offer-grid article>a{min-height:3.3rem;align-items:flex-start}
/* Dasselbe Muster wie bei "Direkt": eine 22- bis 26-Pixel-Ueberschrift, und
   direkt darunter 14 Pixel. Der Sprung wirkt wie Kleingedrucktes, obwohl
   Platz da ist. Der erklaerende Satz gehoert auf Fliesstextgroesse. */
.project-path-list li small,.project-card small,.assembly-steps small,.offer-grid small{
  font-size:var(--fs-m);line-height:1.5
}
.project-card>div small{font-size:var(--fs-m)}

/* Die Signatur lag zuvor auf einem Pseudoelement mit z-index -1. Weil
   .hero-signature keinen Stapelkontext bildet, rutschte der Schleier hinter
   das Hero-Bild und war wirkungslos. Der Grund gehoert ans Element selbst. */
.hero-signature{padding:.85rem 1.15rem;background:rgba(24,17,11,.66);backdrop-filter:blur(3px);
  border-radius:2px;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.hero-signature:after{display:none}
/* Drei Bauwerksarten statt nur des Hauses: die Bausatzmontage betrifft
   Gartenhaus, Carport und Spielturm gleichermassen. */
.kit-illus{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;align-items:end;margin-top:1.5rem}
.kit-illus img{width:100%;height:auto;opacity:.9}
@media(max-width:700px){.kit-illus{gap:.4rem}}

/* ---------------------------------------------------------------------------
   Ruhiger Hintergrund statt blanker Flaechen
   Das Markenzeichen steht fest hinter dem Inhalt, sehr schwach. Der Inhalt
   scrollt darueber hinweg, helle Abschnitte wirken dadurch nicht mehr leer.
   Dunkle Abschnitte decken es ab, das ist gewollt.
--------------------------------------------------------------------------- */
main,.site-footer{position:relative;z-index:1}
.site-header{z-index:100}

/* Zeichnungen auf der Bausatzseite duerfen groesser stehen. */
.kit-hero .kit-illus{grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.kit-hero .kit-illus img{opacity:1}
.kit-illus img{padding:.6rem;background:rgba(255,255,255,.42);border:1px solid rgba(91,74,51,.16)}

/* ---------------------------------------------------------------------------
   Rote Details
   Der Markenton war zwar definiert, aber kaum sichtbar gesetzt. Er markiert
   jetzt die Einstiegszeilen, die aktive Seite und die Verweispfeile.
--------------------------------------------------------------------------- */
/* Farbe bewusst geerbt: auf dunklen Abschnitten muss die Zeile hell bleiben. */
.eyebrow{position:relative;padding-left:1.9rem}
.eyebrow:before{position:absolute;top:.52em;left:0;width:1.3rem;height:2px;background:var(--warm);content:""}
.nav a[aria-current="page"]{color:var(--warm)}
.nav a:after{background:var(--warm);height:2px}
.offer-grid a:after,.sauna-card a:after,.sauna-detail-grid a:after{color:var(--warm)}
.contact-link{border-bottom-color:var(--warm)}
.header-cta{border-bottom:2px solid var(--warm)}
.maker figure:before{border-color:var(--warm)}
.direct-contact a:first-of-type{color:var(--brown)}
.section-heading h2 em,.statement h2 em{color:var(--brown)}
.form-note.is-error{color:var(--warm)}

/* Die Ueberschrift war auf 10 Zeichen je Zeile begrenzt und brach dadurch
   nach "uns" um. Bei dieser Schriftgroesse traegt die Spalte deutlich mehr. */
.kit-teaser h2{max-width:18ch}

/* Auf dem dunklen Grund werden die Zeichnungen ohnehin nach Weiss invertiert.
   Ein zusaetzlicher heller Kasten darunter macht sie nur flau. */
.kit-teaser .kit-illus img{background:none;border:0;padding:0;opacity:.85}
.kit-teaser .kit-illus{gap:1.1rem}

/* Die rote Linie unter der dunklen Schaltflaeche las sich wie ein Fehler,
   nicht wie ein Detail. Der Markenton markiert stattdessen das Ueberfahren. */
.header-cta{border-bottom:0}
.header-cta:hover{background:var(--warm);color:#fff}

/* ---------------------------------------------------------------------------
   Das Markenzeichen als gesetztes Element
   Vorher lag es mit background-attachment:fixed auf jeder hellen Flaeche. Damit
   zeigte jeder Abschnitt einen anderen, vom Rollstand abhaengigen Ausschnitt des
   Baumes - mal zu praesent, mal unsichtbar, nirgends komponiert.

   Jetzt steht es auf drei Flaechen, und jede komponiert ihr eigenes Bild: der
   Baum sitzt rechts, wird vom Rand angeschnitten und waechst aus der Unterkante.
   .sauna machte das ueber ein :after schon so; die anderen ziehen nach.

   Als Pseudoelement, nicht als background-image: zweimal hat mir eine
   background-image-Regel das Foto beziehungsweise den Verlauf eines Abschnitts
   ueberschrieben, weil der seinen Hintergrund per Kurzschreibweise setzt. Ein
   eigenes Element kann das nicht mehr passieren.
--------------------------------------------------------------------------- */
/* Formulare bleiben frei. Auf der Bausatz-Erklaerung und am Abschluss der
   Startseite sitzt das Zeichen dagegen in einer ruhigen, unbedienbaren Zone. */
.statement,.sauna-cta,.kit-depth,.enquiry{position:relative;overflow:hidden}
.statement:after,.sauna:after,.sauna-cta:after,.kit-depth:after,.enquiry:after{
  position:absolute;
  z-index:0;
  /* Am rechten Rand, mittig zur Abschnittshoehe, ganz sichtbar. Am Bildschirm
     verankert (background-attachment:fixed) zeigte jeder Abschnitt nur einen
     zufaelligen Ausschnitt: auf zwei von drei Flaechen war gar nichts zu
     sehen. Am Abschnitt verankert traegt jede Flaeche den ganzen Baum. */
  display:block;
  right:max(2vw,1rem);
  /* Auf kurzen Flaechen mittig, auf hohen weit oben: mittig sass der Baum dort
     hinter den Bildern und war nicht zu sehen. */
  top:min(50%,17rem);
  /* .sauna:after bringt aus seiner alten Fassung bottom und opacity mit. */
  bottom:auto;
  opacity:1;
  filter:none;
  width:var(--zeichen-breite);
  max-height:86%;
  aspect-ratio:837/693;
  background:var(--zeichen-bild) center right/contain no-repeat;
  content:"";
  transform:translateY(-50%);
  pointer-events:none;
}
.statement>*,.sauna-cta>*,.kit-depth>*,.enquiry>*{position:relative;z-index:1}

.statement{--zeichen-bild:url("assets/logo/holzmeisterei-frenken-logo-flaeche-creme.svg")}
.sauna{--zeichen-bild:url("assets/logo/holzmeisterei-frenken-logo-flaeche-dunkel.svg")}
.sauna-cta{--zeichen-bild:url("assets/logo/holzmeisterei-frenken-logo-flaeche-creme.svg")}
.kit-depth{--zeichen-bild:url("assets/logo/holzmeisterei-frenken-logo-flaeche-creme.svg")}
.enquiry{--zeichen-bild:url("assets/logo/holzmeisterei-frenken-logo-flaeche-creme.svg")}
.kit-depth:after{right:-4rem;top:18rem;width:min(46rem,48%);opacity:.64}
.enquiry:after{right:-5rem;top:auto;bottom:-8rem;width:min(34rem,38%);opacity:.82;transform:none}
.sauna:after{opacity:1;filter:none}

/* ---------------------------------------------------------------------------
   Rote Details deutlicher
   Der Markenton war bisher nur ein 20 Pixel kurzer Strich. Er markiert jetzt
   auch die Schrittzahlen, die Verweispfeile und den Fokusrahmen.
--------------------------------------------------------------------------- */
/* Der Strich wurde von 1,3 auf 2,2rem verlaengert, der Einzug blieb bei
   1,9rem stehen - dadurch lief er in den ersten Buchstaben. Beide Werte
   gehoeren zusammen: Strichlaenge plus Abstand. */
.eyebrow{padding-left:3.1rem}
.eyebrow:before{width:2.2rem;height:3px;top:.46em}
.project-path-list b,.assembly-steps b{color:var(--warm)}
/* Auf dem dunklen Ablaufband kam --warm nur auf 2,27 gegen den Untergrund. Der
   gleiche Farbton aufgehellt erreicht 4,53. */
.sauna-process b{color:#d27b75}
.offer-grid a:after,.sauna-card a:after,.sauna-detail-grid a:after,.project-gallery a:after{color:var(--warm);font-weight:800}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:var(--warm)}
.button-warm{background:var(--warm);color:#fff}
.form-note.is-success:before{color:var(--warm)}
.site-footer a:hover{color:var(--warm)}
.config-step.is-current .step-number{color:var(--warm)}

/* Groesse an einer Stelle, damit die drei Flaechen nicht auseinanderlaufen.
   Der Baum steht mittig hinter dem Abschnitt und ist so breit, dass die
   Kronenrundung den Inhalt umfasst: der Text steht innerhalb des Bogens, der
   Stamm laeuft darunter aus. Rechts angeschnitten war er nur Beiwerk, mittig
   und gross fasst er den Abschnitt ein. */
:root{--zeichen-breite:min(38rem,40%)}
@media(max-width:900px){:root{--zeichen-breite:min(26rem,52%)}}
@media(max-width:600px){:root{--zeichen-breite:min(17rem,62%)}}

/* ---------------------------------------------------------------------------
   Rote Details: ein zweiter, hellerer Ton fuer Bewegung
   --warm ist der ruhige Markenton fuer Flaechen. Fuer Zustaende, die auf eine
   Handlung antworten - Zeigen, Klicken, Fokus -, ist er zu gedeckt. --signal
   liegt heller und gesaettigter und kommt nur dort zum Einsatz.
--------------------------------------------------------------------------- */
:root{--signal:#c4402c}

.button-warm:hover,.button-dark:hover{background:var(--signal);color:#fff}
.button-light:hover{background:var(--signal);color:#fff}
.header-cta:hover,.site-header.is-scrolled .header-cta:hover{background:var(--signal);color:#fff}
.nav a:hover{color:var(--signal)}
.nav a:after{background:var(--signal);height:2px}
.lang-link:hover,.contact-link:hover{border-color:var(--signal);color:var(--signal)}
.offer-grid a:hover,.sauna-card a:hover,.sauna-detail-grid a:hover,.project-gallery a:hover{color:var(--signal)}
.offer-grid a:hover:after,.sauna-card a:hover:after,.sauna-detail-grid a:hover:after{color:var(--signal)}
.site-footer a:hover{color:var(--signal)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* Auf dunklem Grund braucht der Signalton mehr Helligkeit, sonst faellt er
   gegen den Untergrund ab. */
.hero .button-light:hover,.sauna .button:hover,.kit-teaser .button:hover,
.config-hero .button:hover,.kit-enquiry--dunkel .button:hover{background:#d4553f;color:#fff}
.site-header:not(.is-scrolled) .nav a:hover{color:#e8927f}

/* Notbetrieb der Dateivorschau sichtbar machen, nicht verstecken: ohne Hinweis
   sieht der verkuerzte Fragensatz wie ein Defekt aus. */
.config-notbetrieb{margin:0 0 1.75rem;padding:.9rem 1.1rem;border-left:3px solid var(--signal);background:rgba(196,64,44,.07);color:var(--ink);font-size:var(--fs-s);line-height:1.5}

/* Fehlerseite: die Wege nebeneinander, nicht als Textzeile. Der zweite Knopf
   nutzt button-light, das ist papierfarben mit dunklem Text - auf dem
   ebenfalls papierfarbenen Seitengrund war er ohne Rand unsichtbar. */
.fehler-wege{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.fehler-wege .button-light{border-color:var(--line)}

/* ---------------------------------------------------------------------------
   Bausatzseite: die Zeichnungen sind das Argument, nicht Beiwerk
   Sie standen als etwa 100 Pixel breite Kaestchen in einer schmalen Spalte.
   Die Spalte bekommt mehr Platz, die Zeichnungen werden entsprechend groesser.
--------------------------------------------------------------------------- */
.kit-hero{grid-template-columns:minmax(0,1fr) minmax(24rem,.92fr)}
.kit-hero aside p{max-width:22rem}
.kit-hero .kit-illus{gap:1.2rem;margin-top:2.4rem}
.kit-hero .kit-illus img{width:100%;height:auto}
@media(max-width:900px){
  .kit-hero{grid-template-columns:1fr}
  .kit-hero .kit-illus{max-width:34rem}
}

/* ---------------------------------------------------------------------------
   Lukas-Feinschliff: Das bestehende Layout bleibt unveraendert. Die letzten
   Farbvorgaben neutralisieren nur das zuvor sehr braune Gesamtbild. Fraunces
   bleibt fuer die grossen, markenpraegenden Ueberschriften; kleinere Titel
   und funktionale Texte laufen einheitlich in Inter.
--------------------------------------------------------------------------- */
:root{
  --ink:#2b2e2d;
  --deep:#303433;
  --brown:#565b59;
  --paper:#f7f7f4;
  --cream:#e7e8e5;
  --sand:#aaa9a2;
  --sage:#646c68;
  --line:rgba(43,46,45,.18);
}
.hero-image>div{background:linear-gradient(90deg,rgba(28,32,31,.98) 0%,rgba(28,32,31,.86) 34%,rgba(28,32,31,.28) 66%,rgba(28,32,31,.08))}
.hero h1 em{color:#e4e6e2}
.site-header.is-scrolled{background:rgba(247,247,244,.96);box-shadow:0 10px 35px rgba(30,34,33,.08)}
.project-card:after{background:linear-gradient(0deg,rgba(24,29,28,.88),transparent 55%)}
.site-footer{color:#d9ddda}

.offer-grid h3,.sauna-card h3,.project-card strong,.enquiry-path h3,
.project-path-list strong,.maker dt,.kit-depth-grid h3,.category-picker b,
.route-picker b,.form-panel h3,.sauna-detail-grid h3,.project-gallery-bar strong,
.config-zusammenfassung>h3,.direct-contact a{
  font-family:var(--sans);
  font-weight:650;
  letter-spacing:-.025em;
}

/* Die Bildmarke war auf Mobilgeraeten durch die alte pauschale span-Regel
   vollstaendig unsichtbar. Das Logo bleibt nun in jeder Breite erkennbar. */
.brand-mark{width:4.55rem;height:4.55rem}
.brand-wortmarke{width:10.35rem}
@media(max-width:700px){
  .site-header .brand .brand-mark{display:block;width:3.75rem;height:3.75rem}
  .site-header .brand .brand-wortmarke{display:block;width:8.2rem}
  .hero-image>div{background:linear-gradient(0deg,rgba(28,32,31,.98),rgba(28,32,31,.58) 62%,rgba(28,32,31,.08))}
}
@media(max-width:520px){
  .site-header .brand .brand-wortmarke{display:none}
}

/* Die Melierung ist nur ein Detailmaterial: auf wenigen ausgewaehlten
   Sekundaerflaechen, nie als Grund der gesamten Seite. */
.enquiry-path,
.sauna-detail-grid article,
.config-zusammenfassung,
.kit-promise,
.maker dl div,
.route-picker input:checked+span,
.category-picker input:checked+span,
.mehrfach-option:has(input:checked){
  background-color:var(--cream);
  background-image:url("assets/textures/hoodie-grau-meliert-subtil.jpg");
  background-size:640px 640px;
}

@media(max-width:700px){
  .kit-depth:after{right:-6rem;top:14rem;width:22rem;opacity:.5}
  .enquiry:after{right:-6rem;bottom:-5rem;width:20rem;opacity:.55}
}

/* ---------------------------------------------------------------------------
   Markenpolitur: warme Arbeitskleidung, ruhige Melierung, sichere Innenabstaende
   Braun bleibt ein Akzentmaterial. Die graue Melierung sitzt nur auf
   Sekundaerkacheln; Formulare und grosse Leseflaechen bleiben ruhig.
--------------------------------------------------------------------------- */
:root{
  --workwear-brown:#634837;
  --workwear-brown-deep:#382920;
  --workwear-brown-soft:#8a6c58;
  --tile-padding-x:clamp(1.2rem,3vw,1.7rem);
}

.button-dark,
.site-header.is-scrolled .header-cta,
.site-header--solid .header-cta{background:var(--workwear-brown-deep)}
.button-dark:hover,
.site-header.is-scrolled .header-cta:hover,
.site-header--solid .header-cta:hover{background:var(--signal)}
.kit-teaser{
  background:linear-gradient(125deg,var(--workwear-brown-deep),#4b3930 68%,#59483e);
}
.maker figure:before{border-color:var(--workwear-brown-soft)}
.section-heading h2 em,.statement h2 em{color:var(--workwear-brown)}

/* Wo bereits graue Kacheln stehen, wird das reale Melange-Material dezent
   sichtbar. Das Overlay bleibt hell genug fuer unveraenderten Textkontrast. */
.offer-grid article,
.maker dl div,
.kit-promise,
.enquiry-path{
  background-color:var(--cream);
  background-image:linear-gradient(rgba(255,255,255,.46),rgba(255,255,255,.46)),
    url("assets/textures/hoodie-grau-meliert-subtil.jpg");
  background-size:auto,640px 640px;
}

/* Ein echtes Markenasset als leises Wasserzeichen in zwei Abschlusskacheln. */
.enquiry-path:first-child,
.kit-promise{position:relative;overflow:hidden;isolation:isolate}
.enquiry-path:first-child:after,
.kit-promise:after{
  position:absolute;
  z-index:-1;
  right:-3.5rem;
  bottom:-4.5rem;
  width:16rem;
  aspect-ratio:837/693;
  background:url("assets/logo/holzmeisterei-frenken-logo-flaeche-creme.svg") center/contain no-repeat;
  content:"";
  opacity:.58;
  pointer-events:none;
}
.kit-promise:after{right:-2.5rem;bottom:-5rem;width:18rem;opacity:.5}

@media(max-width:700px){
  /* Kachelinhalt darf nie direkt an der Abschnittskante beginnen. */
  .offer-grid article{padding:1.5rem var(--tile-padding-x)}
  .maker dl div,
  .maker dl div+div{padding:1.15rem var(--tile-padding-x)}
  .kit-promise{padding:1.5rem var(--tile-padding-x)}
  .enquiry-path:first-child:after{right:-5rem;bottom:-3.5rem;width:15rem;opacity:.5}
  .kit-promise:after{right:-5rem;bottom:-4rem;width:16rem;opacity:.42}
}

/* ---------------------------------------------------------------------------
   Abschlusskorrektur Anfragebereich
   Im Conversion-Moment bleibt die Gestaltung bewusst ruhig: kein zweites
   Markenzeichen hinter Karten oder Schaltflaechen. Die Baum-Bildmarke bleibt
   in den dafuer komponierten Image-/Markenabschnitten sichtbar.
--------------------------------------------------------------------------- */
.enquiry::after,
.enquiry-path:first-child::after,
.kit-promise::after{content:none}

@media(min-width:701px){
  .enquiry{gap:clamp(3rem,4.5vw,5.5rem)}
  .enquiry-path{min-height:25rem}
}

@media(max-width:700px){
  .enquiry-path{min-height:auto}
  .enquiry-path h3{margin-top:2rem}
  .enquiry-path .button{margin-top:2rem}
}

@media(max-width:360px){
  .direct-contact a{font-size:var(--fs-l)}
}

.site-footer .footer-credit{
  grid-column:1/-1;
  margin:1.25rem 0 0;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.16);
  color:#aeb4b0;
  font-size:var(--fs-xs);
  letter-spacing:.04em;
  text-align:right;
}

@media(max-width:700px){
  .site-footer .footer-credit{text-align:left}
}

/* Kleine Informationskacheln tragen das Melange-Material als wiederkehrendes
   Detail. Es bleibt auf kompakte Karten begrenzt und wird nicht zum
   grossflaechigen Seitenhintergrund. */
.maker dl div,
.project-path-list li,
.kit-depth-grid article{
  background-color:#e1e2de;
  background-image:linear-gradient(rgba(48,52,48,.07),rgba(48,52,48,.07)),
    url("assets/textures/hoodie-grau-meliert-subtil.jpg");
  background-size:auto,640px 640px;
}

/* Alle drei Leistungsargumente brauchen denselben echten Innenabstand. Die
   alte erste Spalte hatte links absichtlich 0 und klebte dadurch am Rand. */
.maker dl div,
.maker dl div+div{
  min-height:9rem;
  padding:1.35rem 1.25rem 1.25rem;
}

@media(max-width:700px){
  .maker dl div,
  .maker dl div+div{
    min-height:auto;
    padding:1.15rem var(--tile-padding-x);
  }
}

/* Die grossen Markenbaender erhalten wieder den warmen Braunverlauf der
   Arbeitsweste. Funktionale Dunkelflaechen und der Footer bleiben neutral. */
.sauna,
.sauna-process{
  background:linear-gradient(125deg,var(--workwear-brown-deep) 0%,#4b3930 58%,#6a4d3c 130%);
}

/* Im zweispaltigen Zwischenformat wird das Querformat stark beschnitten.
   Der Bildfokus bleibt deshalb auf Lukas als Ansprechpartner links. */
@media(min-width:701px) and (max-width:1080px){
  .maker figure img{object-position:18% center}
}

@media(min-width:701px) and (max-width:980px){
  .maker dl{grid-template-columns:1fr}
  .maker dl div,
  .maker dl div+div{
    min-height:auto;
    padding:1rem var(--tile-padding-x);
    border-left:0;
    border-bottom:1px solid var(--line);
  }
}

/* Typografische Schlusskorrektur
   Die bisherige Display-Serife wirkte zu redaktionell. Ueberschriften und
   hervorgehobene Kartentitel nutzen nun dieselbe klare Grotesk wie die
   Navigation, mit Gewicht statt Kursivschrift als Hierarchie. */
:root{--serif:Outfit,Arial,sans-serif;--sans:Manrope,Arial,sans-serif}

.hero h1,
.subhero h1,
.legal-section h1{
  font-weight:750;
  line-height:.96;
  letter-spacing:-.012em;
}

/* Der Startseiten-Hero steht deutlich groesser als alle anderen Titel.
   Outfit braucht hier mehr Laufweite und etwas weniger Gewicht, damit vor
   allem "Holzbauwerk" nicht wie ein geschlossener Block wirkt. */
.hero h1{
  font-weight:700;
  line-height:1;
  letter-spacing:-.008em;
}
.hero h1 em{letter-spacing:-.006em}

h2{
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.012em;
}

h1 em,
h2 em{
  font-style:normal;
  font-weight:430;
  letter-spacing:-.008em;
}

.maker dt,
.offer-grid h3,
.project-path-list strong,
.kit-teaser aside b,
.sauna-card h3,
.project-card strong,
.enquiry-path h3,
.route-picker b,
.form-panel h3,
.kit-depth-grid h3,
.category-picker b,
.sauna-detail-grid h3,
.config-zusammenfassung>h3,
.zusammenfassung-block p,
.project-gallery-bar strong{
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.035em;
}