:root {
    --t-paper:#E1E7DF;--t-white:#F9FBF8;--t-ink:#1E2421;--t-green:#173D28;
    --t-sage:#1B7F3B;--t-muted:#4F5C53;--t-line:#B6C2B9;
    --t-font:'Inter Tight',Arial,sans-serif;--t-display:'Gilda Display',Georgia,serif;
    --t-hero-font:'Instrument Serif',Georgia,serif;
    --t-hero-position:62% 50%;--t-hero-mobile-position:63% 50%;
    --gutter:24px;--content:1600px;
  }
@font-face{font-family:'Gilda Display';src:url("../media/font-gilda-display-400.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url("../media/font-instrument-serif-400.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Tight';src:url("../media/font-inter-tight-var.woff2") format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{--fs-h2:clamp(40px,4.4vw,68px);--fs-h3:clamp(24px,1.9vw,30px);--fs-body:18px;--fs-small:16px;--fs-meta:14px;--fs-label:13px}
@media(max-width:699px){:root{--fs-h2:min(40px,10.4vw);--fs-h3:24px;--fs-body:16px;--fs-small:15px;--fs-meta:13px;--fs-label:12px}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px;overflow-x:clip}
body{margin:0;background:var(--t-paper);color:var(--t-ink);font:400 var(--fs-body)/1.55 var(--t-font);-webkit-font-smoothing:antialiased}
body.dialog-open{overflow:hidden}
button,input,textarea{font:inherit;color:inherit}
button,a,input,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto;object-fit:cover}
svg{display:block}
figure,p,h1,h2,h3{margin:0}
h1,h2,h3{font-family:var(--t-display);font-weight:400;letter-spacing:-.035em;line-height:1.05;text-wrap:pretty}
h2{font-size:var(--fs-h2)}
p{max-width:62ch}
button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
input:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:4px}
[hidden]{display:none!important}
::selection{background:var(--t-green);color:var(--t-white)}
.wrap{width:min(100% - var(--gutter)*2,var(--content));margin-inline:auto}
.section{padding-block:112px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;min-height:56px;padding:16px 24px;border:1px solid currentColor;background:var(--t-green);color:var(--t-white);font-size:var(--fs-small);font-weight:500;line-height:1.4;transition:background .2s,color .2s}
.button svg{width:24px;height:24px;flex-shrink:0;transition:transform .3s cubic-bezier(.2,.65,.3,1)}
.button:hover svg{transform:translateX(4px)}
.button:hover{background:var(--t-white);color:var(--t-green)}
.button>span{font-size:24px;line-height:1}
.text-link{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:6px}
.skip-link{position:fixed;top:16px;left:24px;z-index:100;padding:16px;background:var(--t-white);color:var(--t-ink);transform:translateY(-160%)}
.skip-link:focus{transform:none}
.example-note{position:absolute;right:12px;bottom:12px;padding:3px 7px;background:#19231ee6;color:#fff;border-radius:2px;font:400 10px/1.4 var(--t-font);pointer-events:none;z-index:2}
.hero{position:relative;height:100svh;min-height:700px;background:var(--t-paper)}
.hero-frame{position:absolute;inset:0;overflow:clip;display:flex;flex-direction:column;background:var(--t-green);color:var(--t-white)}
.hero-art,.hero-art img,.hero-shade{position:absolute;inset:0;width:100%;height:100%}
.hero-art img{object-position:var(--t-hero-position)}
.hero-shade{background:linear-gradient(90deg,#0b170ebb 0%,#0b170e60 37%,#0b170e0a 78%),linear-gradient(180deg,#0b170e38,transparent 35%,transparent 65%,#0b170ecc)}
.site-header{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:32px;z-index:2}
.brand{display:flex;align-items:center;gap:12px;max-width:55%;min-width:0}
.brand-mark{width:auto;height:40px;max-width:190px;object-fit:contain;flex-shrink:0}
.brand>span{font:400 clamp(22px,1.8vw,30px)/1.08 var(--t-display);letter-spacing:-.045em;overflow-wrap:anywhere}
.brand-mark:only-child{height:clamp(48px,9svh,84px);max-width:220px;filter:drop-shadow(0 1px 8px rgba(0,0,0,.45))}
.mobile-call{display:none}
.hero-copy{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-block:12px max(24px,env(safe-area-inset-bottom));pointer-events:none}
.hero h1{font-family:var(--t-hero-font);font-size:min(clamp(52px,5.4vw,88px),11svh);line-height:1;max-width:17ch;letter-spacing:-.025em;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 40px;margin-top:28px}
.hero-inquiry{pointer-events:auto;margin:0;background:var(--t-white);color:var(--t-green);border-color:var(--t-white);min-width:224px}
.hero-inquiry:hover{background:var(--t-green);color:var(--t-white)}
.hero-example{right:max(var(--gutter),calc((100vw - var(--content))/2));bottom:24px}
.hero-scroll{position:relative;z-index:2;color:var(--t-white);pointer-events:none}
.section-heading{margin-bottom:48px}
.section-heading h2{max-width:18ch}
.project-gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
.project{display:flex;flex-direction:column;min-width:0}
.project-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.project-open{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--t-green)}
.project-open img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.65,.3,1)}
.project-open:focus-visible{outline-color:var(--t-green);outline-offset:4px}
.project-stand{position:absolute;z-index:2;top:10px;left:10px;padding:4px 9px;border-radius:2px;background:#19231ee6;color:#fff;font:500 var(--fs-label)/1.35 var(--t-font);letter-spacing:.01em;pointer-events:none}
.project-stand-nachher{background:var(--t-sage)}
.project-copy{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-top:16px}
.project-caption{font-size:clamp(22px,1.7vw,27px);line-height:1.15;letter-spacing:-.02em}
.project-all{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;min-height:44px;margin-top:-9px;padding:0;color:var(--t-green);font-size:var(--fs-meta);font-weight:500;white-space:nowrap}
.project-all span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.project-all svg{width:20px;height:20px}
.project-more{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:56px;margin-top:56px;padding:14px 22px;border:1px solid var(--t-green);color:var(--t-green);font-size:var(--fs-small);font-weight:500;transition:background .2s,color .2s}
.project-more svg{width:22px;height:22px}
.project-gallery.is-gekuerzt>.project:nth-child(n+5){display:none}
@media(hover:hover){.project-open:hover img{transform:scale(1.04)}.project-all:hover span{text-decoration-thickness:2px}.project-more:hover{background:var(--t-green);color:var(--t-white)}}
@media(min-width:700px){.project-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 24px}.project-gallery.is-gekuerzt>.project:nth-child(n+5){display:flex}.project-gallery.is-gekuerzt>.project:nth-child(n+7){display:none}}
@media(min-width:1100px){.project-gallery{gap:72px 40px}.project-open{aspect-ratio:1}.project-media{gap:8px}}
@media(max-width:699px){.project-more{display:flex;width:100%;margin-top:44px}}
#dialog-stand{top:16px;left:16px}
@media(max-width:699px){.project-dialog .dialog-navigation{display:flex}.dialog-navigation .icon-button{width:44px;height:44px;padding:10px}#dialog-stand{top:12px;left:12px}}

.garden-ideas,.garden-privacy-dialog{--t-white:#ffffff;--t-ink:#28382e;--t-muted:#59655b;--gutter:24px;--content:1408px;font:400 18px/1.55 var(--t-font);color:var(--t-ink)}

.garden-ideas h2,.garden-privacy-dialog h2,.garden-privacy-dialog h3{font-family:var(--t-display);font-weight:400;letter-spacing:-.035em;line-height:1.04}
.garden-ideas .garden-heading h2{font-weight:400;letter-spacing:-.035em}
.garden-ideas summary:focus-visible{outline:3px solid currentColor;outline-offset:6px}
.garden-ideas summary{-webkit-tap-highlight-color:transparent}
@media(min-width:1200px){.garden-ideas{--gutter:64px}}
@media(min-width:1700px){.garden-ideas{--gutter:96px}}
@media(max-width:370px){.garden-ideas{--gutter:16px}}
@media(max-width:700px){.garden-ideas,.garden-privacy-dialog{font-size:16px}.garden-ideas .garden-stage{padding-bottom:0}.garden-ideas .garden-editor-foot{width:100%;margin:0;padding:14px var(--gutter) 6px;background:var(--t-paper)}}
.about{padding-top:24px}
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.about-image{position:relative;min-width:0;overflow:hidden}
.about-image img{aspect-ratio:3/2;object-position:center}
.about-layout>*,.contact-layout>*{min-width:0}
.about-copy h2{max-width:12ch;margin-bottom:32px}
.about-copy p{max-width:40ch;color:var(--t-muted)}
.about-copy p+p{margin-top:20px}

.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:72px}
.service{display:grid;grid-template-columns:auto minmax(0,1fr);grid-row:span 2;grid-template-rows:subgrid;align-items:center;column-gap:14px;row-gap:14px;min-width:0}
.service>div{display:contents}
.service-icon{display:grid;place-items:center;color:var(--t-green);transition:color .3s}
.service-icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.service:hover .service-icon{color:var(--t-sage)}
.service:hover .service-icon svg{transform:scale(1.12) rotate(-6deg)}
.services h3{font-size:var(--fs-h3);letter-spacing:-.025em;margin:0}
.services p{grid-column:1/-1;align-self:start;font-size:var(--fs-small);color:var(--t-muted)}

.reviews{margin-top:clamp(128px,15vw,224px)}
.review-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.review{margin:0;min-width:0}
.review blockquote{position:relative;margin:0;padding-left:21px}

.review blockquote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--t-sage);transform:scaleY(var(--review-line,1));transform-origin:50% 0;transition:background-color .3s}
.review:hover blockquote::before{background:var(--t-green)}
.review blockquote p{font-size:var(--fs-small);color:var(--t-muted);max-width:32ch}
.review figcaption{margin-top:16px;padding-left:21px;font-size:var(--fs-meta);color:var(--t-ink)}

.jobs{background:var(--t-white)}
.jobs-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,100px);align-items:start}
.jobs-layout>*{min-width:0}
.jobs-kicker{margin:0 0 20px;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--t-muted)}
.jobs-intro h2{max-width:11ch;margin:0}
.jobs-body{display:grid;gap:clamp(36px,4vw,56px);min-width:0}
.jobs-body h3{margin:0 0 16px;font-family:var(--t-font);font-size:var(--fs-label);font-weight:500;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--t-muted)}
.jobs-openings{list-style:none;margin:0;padding:0;border-top:1px solid var(--t-line)}
.jobs-openings li{padding:16px 0 18px;border-block-end:1px solid var(--t-line);font-family:var(--t-display);font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.025em;overflow-wrap:break-word;hyphens:auto;transition:color .3s}
@media(hover:hover){.jobs-openings li:hover{color:var(--t-green)}}
.jobs-gender{white-space:nowrap}
.jobs-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.jobs-perks{list-style:none;display:grid;gap:14px;margin:0;padding:0;font-size:var(--fs-small)}
.jobs-perks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start}
.jobs-perks svg{width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--t-green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-reveal{background:var(--t-green)}
.contact{padding-top:96px;background:var(--t-green);color:var(--t-white);--t-muted:#ccd5c5;--t-line:#74846f}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px)}
.contact h2{max-width:12ch;margin-bottom:0}
.contact-details{display:grid;gap:30px;margin-top:48px;font-style:normal;font-size:var(--fs-body);line-height:1.45;overflow-wrap:anywhere}
.contact-details>div{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:18px;row-gap:2px;justify-items:start}
.contact-details>div>:not(.contact-label){grid-column:2}
.contact-label{grid-column:1;grid-row:1;display:flex;align-items:center;height:1.45em;color:var(--t-muted)}
.contact-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.contact-label-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.contact-details a{max-width:100%}
.contact-details a:hover{text-decoration:underline;text-underline-offset:5px}
.contact-details .contact-route{margin-top:6px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.contact-route span{display:inline-block;transition:transform .3s cubic-bezier(.2,.65,.3,1)}
.contact-route:hover span{transform:translateX(4px)}

.contact-hours-title{display:block;margin-bottom:6px;font-weight:500}
.contact-hours{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:28px;row-gap:4px;margin:0;font-variant-numeric:tabular-nums}
.contact-hours dt{color:var(--t-muted)}
.contact-hours dd{margin:0}
.contact-hours-note{margin-top:14px;padding:8px 12px;border-left:2px solid var(--t-muted);background:#ffffff14;color:var(--t-muted);font-size:var(--fs-meta);line-height:1.45}
.contact-signoff{display:flex;justify-content:space-between;gap:24px;margin-top:72px;padding-block:32px;color:var(--t-white);font-size:var(--fs-label)}

.contact>div[style]{color:var(--t-white)!important;font-family:var(--t-font)!important;font-size:var(--fs-label)!important}
.inquiry-form{min-width:0;padding-top:8px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;font-size:var(--fs-meta);margin-bottom:16px}
.interest-options{display:flex;flex-wrap:wrap;gap:8px}
.interest-options label{position:relative;cursor:pointer}
.interest-options input{position:absolute;top:50%;left:16px;width:1px;height:1px;opacity:0}
.interest-options span{display:block;border:1px solid #899c80;border-radius:24px;padding:11px 16px;font-size:var(--fs-label);line-height:1.4;transition:background .2s,color .2s,border-color .2s}
@media(hover:hover){.interest-options label:hover span{border-color:var(--t-white)}}
.interest-options input:checked+span{background:var(--t-paper);color:var(--t-green);border-color:var(--t-paper)}
.interest-options input:focus-visible+span{outline:2px solid var(--t-white);outline-offset:3px}
.interest-group{margin-bottom:32px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.field{margin-bottom:28px;min-width:0}
.field>label{display:block;font-size:var(--fs-meta);margin-bottom:6px}
.field>label span{font-size:var(--fs-label);color:var(--t-muted)}
.field input,.field textarea{display:block;width:100%;border:0;border-bottom:1px solid #94a58d;border-radius:0;padding:8px 0;min-height:48px;background:transparent;font-size:var(--fs-body);line-height:1.5;box-shadow:none;transition:border-color .25s}
.field input:focus,.field textarea:focus{border-color:var(--t-white)}
.field textarea{resize:vertical;min-height:100px}
.field textarea::placeholder{color:var(--t-muted);opacity:1}
.field input[aria-invalid=true]{border-color:#ffc5b5}
.field-error{font-size:var(--fs-label);color:#ffd3c7;margin-top:8px}
.einw{display:flex;align-items:start;gap:12px;font-size:var(--fs-label);line-height:1.5;cursor:pointer;max-width:54ch}
.einw input{accent-color:#e2e5d7;width:20px;height:20px;flex-shrink:0;margin:0;cursor:pointer}
.submit-button{width:100%;min-height:60px;margin-top:24px;background:var(--t-paper);color:var(--t-green);border-color:var(--t-paper)}
.submit-button:hover{background:var(--t-white);color:var(--t-green)}
.project-reference{display:flex;align-items:center;gap:14px;padding:14px 0;margin-bottom:24px;font-size:var(--fs-meta)}
.project-reference img{width:84px;height:64px;flex-shrink:0}
.project-reference>span{flex:1}
.project-reference button{width:44px;min-width:44px;min-height:44px;font-size:26px}
.form-success{padding:40px 0}
.form-success strong{display:block;font-size:var(--fs-h3);font-weight:450;line-height:1.15}
.form-success p{margin-top:16px}
.form-success .text-link{margin-top:24px;padding:0}
.is-complete>:not(.form-success){display:none!important}
.project-dialog{padding:0;border:0;width:min(1380px,calc(100% - 64px));max-width:none;max-height:calc(100svh - 48px);background:var(--t-paper);color:var(--t-ink);overscroll-behavior:contain}
.project-dialog::backdrop{background:#0b170ee8;backdrop-filter:blur(8px)}
.project-dialog[open]{display:flex;flex-direction:column;animation:dialog-in .28s ease-out}
.dialog-image{position:relative;flex:1;min-height:180px;background:#15251a;touch-action:pan-y}
.dialog-image img{width:100%;height:min(67svh,820px);object-fit:contain}
.icon-button{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;padding:12px}
.icon-button svg{width:24px;height:24px}
.dialog-close{position:absolute;z-index:4;top:16px;right:16px;border-radius:50%;background:var(--t-paper);color:var(--t-ink)}
.dialog-copy{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:32px;align-items:center;padding:26px 32px}
.dialog-copy h2{font-size:var(--fs-h3);letter-spacing:-.02em}
.dialog-copy .concept-note{font-size:var(--fs-label);margin-top:8px;color:var(--t-muted)}
.dialog-navigation{display:flex;align-items:center;gap:8px}
#dialog-counter{min-width:42px;font-size:var(--fs-label);text-align:center;font-variant-numeric:tabular-nums}
.dialog-copy .button{min-height:52px}
@keyframes dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1100px){:root{--gutter:64px}}
@media(min-width:1800px){:root{--gutter:96px}}
@media(min-width:700px) and (max-width:1099px){
  .hero h1{font-size:min(72px,8.6vw,11svh);max-width:15ch}
  .about-layout,.contact-layout{gap:32px}
  .services{gap:28px}
  .review-list{gap:24px}
  .jobs-layout{grid-template-columns:1fr;gap:40px}
  .dialog-copy{grid-template-columns:1fr auto;gap:18px}.dialog-copy .button{grid-column:1/3}
}
@media(max-width:699px){
  .section{padding-block:64px}
  .hero{height:100svh;min-height:min(740px,100svh)}
  .site-header{padding-block:24px;gap:16px}
  .brand{max-width:calc(100% - 64px);gap:9px}.brand-mark{height:30px;max-width:140px}.brand>span{font-size:clamp(19px,5.6vw,23px)}
  .brand-mark:only-child{height:58px;max-width:150px}
  .mobile-call{display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff99;border-radius:50%;flex-shrink:0}.mobile-call svg{width:23px;height:23px}
  .hero-art img{object-position:var(--t-hero-mobile-position)}
  .hero-shade{background:linear-gradient(180deg,#0b170e80 0%,#0b170e5c 20%,#0b170e75 55%,#0b170ecc 100%)}
  .hero-copy{padding-block:8px max(24px,env(safe-area-inset-bottom))}
  .hero-actions{display:contents}
  .hero h1{margin-top:auto}
  .hero-scroll{margin-top:auto;padding-top:16px}
  .hero h1{font-size:min(clamp(44px,14.6vw,64px),11svh);max-width:14ch;line-height:1.02}
  .hero-inquiry{margin-top:24px;min-height:54px;min-width:210px;padding:14px 20px}
  .hero-example{bottom:20px;font-size:9px}
  .section-heading{margin-bottom:30px}.section-heading h2{max-width:13ch}
  .project-open .example-note{font-size:8px;right:6px;bottom:6px;padding:2px 5px}
  .about{padding-top:0}.about-layout{grid-template-columns:1fr;gap:32px}
  .about-image img{aspect-ratio:3/2}
  .about-copy h2{max-width:13ch;margin-bottom:24px}
  .about-copy p{max-width:42ch}
  .services{grid-template-columns:1fr;gap:28px;margin-top:40px}.service{column-gap:12px;row-gap:8px}
  .reviews{margin-top:112px}.review-list{grid-template-columns:1fr;gap:32px}.review blockquote p{max-width:40ch}
  .jobs-layout{grid-template-columns:1fr;gap:28px}.jobs-kicker{margin:0 0 10px}
  .jobs-intro h2{max-width:14ch;margin:0}
  .jobs-body{gap:32px}.jobs-openings li{padding:12px 0 14px}
  .jobs-columns{grid-template-columns:1fr;gap:32px}
  .service-icon svg{width:28px;height:28px}
  .contact{padding-top:64px}.contact-layout{grid-template-columns:1fr;gap:44px}
  .contact h2{max-width:12ch}
  .contact-details{gap:26px;margin-top:32px}.contact-hours{column-gap:20px}
  .form-row{gap:16px}.field{margin-bottom:24px}
  .contact-signoff{flex-wrap:wrap;gap:8px;margin-top:40px;padding-block:24px}
  .project-dialog{width:calc(100% - 24px);max-height:calc(100svh - 24px)}
  .dialog-image img{height:49svh;min-height:210px}
  .dialog-close{top:10px;right:10px;width:44px;height:44px;padding:10px}
  .dialog-copy{grid-template-columns:minmax(0,1fr) auto;padding:22px 18px;gap:18px}
  .dialog-navigation{display:none}
  .dialog-copy .button{grid-column:1/3;width:100%;justify-content:center}
}
@media(max-width:370px){:root{--gutter:16px}.hero{min-height:min(700px,100svh)}.hero h1{font-size:min(44px,13.2vw)}.form-row{grid-template-columns:1fr;gap:0}.interest-options span{padding:10px 12px}}
@media(max-height:699px){.hero{min-height:360px}.site-header{padding-block:16px}.hero-copy{padding-block:4px max(12px,env(safe-area-inset-bottom))}.hero-actions{margin-top:20px}.hero h1{font-size:min(50px,12.5vw,10svh);max-width:18ch}.dialog-image img{height:54svh}.dialog-copy{padding:18px 24px}}
@media(max-width:699px) and (max-height:699px){.hero-inquiry{margin-top:20px}.hero-scroll{padding-top:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-art img{transform:none!important}}


.hero-nudge{display:inline-flex;align-items:center;gap:14px;max-width:100%;min-height:58px;padding:8px 4px;color:inherit;text-align:left;pointer-events:auto;transition:opacity .18s}
.hero-nudge .nudge-icon{width:28px;height:32px;flex:none}
.nudge-copy{font:500 16px/1.35 var(--t-font)}
.nudge-copy small{display:block;font-size:13px;font-weight:400;margin-top:3px}
.hero-nudge .nudge-touch{display:none}
.hero-nudge:hover .nudge-copy>span{text-decoration:underline;text-underline-offset:4px}
.hero-nudge.is-away{opacity:0;visibility:hidden;pointer-events:none}
.hint-ready .nudge-mouse.nudge-icon{animation:hint-down 1.7s ease-in-out 2}
.hint-ready .nudge-touch.nudge-icon{animation:hint-swipe 1.7s ease-in-out 2}
.hero.hint-used .nudge-icon,.hero.is-guiding .nudge-icon{animation:none}
@keyframes hint-down{0%,15%,100%{transform:translateY(-4px)}55%,65%{transform:translateY(6px)}}
@keyframes hint-swipe{0%,15%{transform:translateY(7px);opacity:1}55%,65%{transform:translateY(-9px);opacity:1}78%{transform:translateY(-9px);opacity:0}79%{transform:translateY(7px);opacity:0}100%{transform:translateY(7px);opacity:1}}
@media(hover:none) and (pointer:coarse){.hero-nudge .nudge-mouse{display:none}.hero-nudge .nudge-touch{display:block}}
@media(max-width:699px){.hero-nudge{min-height:54px;padding-block:4px}.nudge-copy{font-size:15px}}
@media(prefers-reduced-motion:reduce){.hero .nudge-icon{animation:none!important}}
#projects-title:focus-visible{outline:2px solid var(--t-green);outline-offset:6px}


:is(.tpl-s1,#tpl-s#tpl-s){grid-template-columns:repeat(2,minmax(0,1fr))}
:is(.tpl-s2,#tpl-s#tpl-s){width:59px;height:72px}
.wb-form{min-width:0;padding-top:8px;color:inherit}.wb-form>p{margin:0 0 24px;font-size:15px}.wb-form form{display:grid;gap:0}.wb-form label{margin:0 0 28px;font-size:15px;font-weight:500;line-height:1.4}.wb-form input:not([type=checkbox]),.wb-form textarea{margin-top:8px;padding:8px 0;min-height:48px;border:0;border-bottom:1px solid currentColor;border-radius:0;background:transparent;color:inherit;font-size:18px;line-height:1.5;box-shadow:none}.wb-form textarea{min-height:104px;resize:vertical}.wb-form input:focus-visible,.wb-form textarea:focus-visible{outline:2px solid currentColor;outline-offset:4px}.wb-form .wb-consent{display:block;position:relative;padding-left:32px;margin:0 0 8px;font-size:13px;font-weight:400;line-height:1.5;max-width:54ch;cursor:pointer}.wb-form .wb-consent input{position:absolute;left:0;top:1px;width:20px;height:20px;margin:0;cursor:pointer}.wb-form .wb-consent a{color:inherit;text-decoration:underline;text-underline-offset:3px}.wb-form button[type=submit]{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:60px;margin-top:24px;padding:16px 24px;border:1px solid currentColor;border-radius:2px;background:transparent;color:inherit;font-size:16px;font-weight:550}.wb-form [role=status]{margin:16px 0 0;font-size:15px}.contact-signoff .wb-legal{display:flex;flex-wrap:wrap;gap:0 24px;margin-left:auto}.contact-signoff .wb-legal a{display:inline-flex;align-items:center;min-height:44px;margin:0;color:inherit;text-decoration:underline;text-underline-offset:4px}
.website-draft{background:var(--t-surface,#f3f1ea);color:var(--t-ink);padding:14px 24px;text-align:center;font-size:15px;line-height:1.6}.website-draft strong{font-weight:600;margin-right:.6em}.website-draft p{display:inline;margin:0 .6em 0 0}

.tpl-anker{display:block;height:0;overflow:hidden}

/* Hero: Unterzeile mit Leistung und Ort */
.hero-sub{margin-top:18px;font-size:var(--fs-body);color:#ffffffe0;max-width:40ch}

/* Kopf: WhatsApp neben dem Anruf */
.header-actions{display:flex;align-items:center;gap:10px}
.wa-icon{width:20px;height:20px;fill:currentColor;flex:none}
.header-whatsapp{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:9px 18px;border:1px solid #ffffff99;border-radius:24px;color:var(--t-white);font-size:var(--fs-meta);font-weight:500;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.header-whatsapp:hover{background:var(--t-white);color:var(--t-green);border-color:var(--t-white)}

/* Kontakt: WhatsApp-Knopf unter den Angaben */
.wa-button{margin-top:40px;min-width:min(100%,320px);background:var(--t-paper);color:var(--t-green);border-color:var(--t-paper);white-space:nowrap}
.wa-button:hover{background:var(--t-white);color:var(--t-green)}
.wa-button-label{display:inline-flex;align-items:center;gap:12px;font-size:inherit!important;line-height:inherit!important}
.wa-button .wa-icon{width:22px;height:22px}


/* Häufige Fragen */
.faq{padding-top:0}
.faq-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:start}
.faq-layout h2{max-width:12ch}
.faq-list{border-top:1px solid var(--t-line);min-width:0}
.faq-item{border-bottom:1px solid var(--t-line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding-block:18px;font-weight:500;cursor:pointer;list-style:none;text-wrap:pretty}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.faq-chevron{width:22px;height:22px;flex:none;fill:none;stroke:var(--t-green);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.faq-item[open] .faq-chevron{transform:rotate(180deg)}
.faq-item p{max-width:56ch;color:var(--t-muted)}
.faq-item[open] p{padding-bottom:22px}

@media(min-width:700px) and (max-width:1099px){.faq-layout{gap:32px}}
@media(max-width:699px){
  .hero-sub{margin-top:14px}
  .hero-example{display:none}
  .header-actions{gap:8px}
  .header-whatsapp{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
  .header-whatsapp .wa-icon{width:22px;height:22px}
  .header-whatsapp-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .wa-button{width:100%;margin-top:32px}
  .faq-layout{grid-template-columns:1fr;gap:28px}
  .faq-item summary{min-height:56px;padding-block:14px}
}

/* Überschriften (Tom, 02.11.2026): Zeilen ausnutzen statt künstlich schmal umbrechen, kein Wort allein in der letzten Zeile
   (die letzten zwei Wörter hängen im HTML mit   zusammen). Hero: zwei Zeilen „Ihr Grundstück.“ / „Ein Ort zum Wohlfühlen.“ */
.hero h1{max-width:none}
.hero h1 .h1-zeile{display:block}
.hero-sub{max-width:36em}
.section-heading h2,.about-copy h2,.faq-layout h2,.contact h2{max-width:none}
#gartenideen .garden-heading h2{max-width:16ch;text-wrap:pretty}
.hero-sub,.about-copy p,.services p,.faq-item p{text-wrap:pretty}
/* Fünf Leistungen: am Tablet zwei Spalten, damit „Haushaltsauflösungen“ nicht über die Spalte ragt. */
.services h3{hyphens:auto}
@media(min-width:700px) and (max-width:1099px){.services{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
@media(max-width:699px){
  .hero h1{font-size:min(11vw,64px,11svh);max-width:none}
  #gartenideen .garden-heading h2,.garden-stage:has(.garden-result-actions:not([hidden])) #gartenideen .garden-heading h2{max-width:none;font-size:clamp(34px,9.4vw,52px)}
}/* D&J: Projektkarten, Bildausschnitt je Kachel */
/* projekte-ausschnitt:start */
.project[data-project="thuja"] .project-media>.project-open:nth-child(1) img{object-position:58% 50%}
.project[data-project="thuja"] .project-media>.project-open:nth-child(2) img{object-position:55% 50%}
.project[data-project="beet-hauswand"] .project-media>.project-open:nth-child(1) img{object-position:50% 60%}
.project[data-project="beet-hauswand"] .project-media>.project-open:nth-child(2) img{object-position:50% 60%}
.project[data-project="hofpflaster"] .project-media>.project-open:nth-child(1) img{object-position:50% 60%}
.project[data-project="hofpflaster"] .project-media>.project-open:nth-child(2) img{object-position:38% 50%}
.project[data-project="gehweg"] .project-media>.project-open:nth-child(1) img{object-position:50% 60%}
.project[data-project="gehweg"] .project-media>.project-open:nth-child(2) img{object-position:50% 60%}
.project[data-project="kugelbaum"] .project-media>.project-open:nth-child(1) img{object-position:50% 55%}
.project[data-project="kugelbaum"] .project-media>.project-open:nth-child(2) img{object-position:50% 55%}
.project[data-project="sichtschutzzaun"] .project-media>.project-open:nth-child(1) img{object-position:55% 50%}
.project[data-project="sichtschutzzaun"] .project-media>.project-open:nth-child(2) img{object-position:50% 60%}
.project[data-project="gruenflaeche"] .project-media>.project-open:nth-child(1) img{object-position:58% 50%}
.project[data-project="gruenflaeche"] .project-media>.project-open:nth-child(2) img{object-position:55% 50%}
.project[data-project="mulchbeet"] .project-media>.project-open:nth-child(1) img{object-position:42% 50%}
.project[data-project="mulchbeet"] .project-media>.project-open:nth-child(2) img{object-position:58% 50%}
.project[data-project="formschnitt"] .project-media>.project-open:nth-child(1) img{object-position:50% 55%}
.project[data-project="mehrfamilienhaus"] .project-media>.project-open:nth-child(1) img{object-position:45% 55%}
.project[data-project="mehrfamilienhaus"] .project-media>.project-open:nth-child(2) img{object-position:40% 60%}
.project[data-project="hecke-strauch"] .project-media>.project-open:nth-child(1) img{object-position:62% 50%}
.project[data-project="hecke-strauch"] .project-media>.project-open:nth-child(2) img{object-position:50% 55%}
.project[data-project="gartenhaus"] .project-media>.project-open:nth-child(1) img{object-position:40% 50%}
.project[data-project="gartenhaus"] .project-media>.project-open:nth-child(2) img{object-position:45% 50%}
/* projekte-ausschnitt:end */

/* wb-reviews:start v9 */
/* Google-Bewertungen (zentraler Baustein, KB.30), Toms Vorgaben vom 20. und 30.10.2026: Note und „Google Maps“
   in einer Zeile, Karten als Wischleiste, Kartenkopf mit Name links und Sternen rechts, lange Texte bis zu
   einer festen Höhe, darunter allein ein Chevron, Anzahl und Zeitraum unten beim Hinweis. Der Aufbau steht
   nur hier (Raster, order): Das HTML aus render() setzt der Host auch in ältere Fassungen ein, die ihr altes
   CSS behalten. Gewicht einer Klasse: schlägt Grundregeln wie p{margin:0}, jede Seitenregel mit Abschnitt
   davor (#stimmen .wb-review, .wb-reviews .wb-review) schlägt den Baustein. Stellschrauben: --wb-review-bg
   (Kartenhintergrund), --wb-mehr-zeilen (Höhe in Zeilen); seit v9 (A6, 02.11.2026) Ecken, Rahmen und Schatten der
   Karte (--wb-review-radius 4px, --wb-review-rahmen, --wb-review-schatten), der Knöpfe (--wb-knopf-radius 50%,
   --wb-knopf-rahmen, --wb-knopf-schatten) und die Schriftstufen (--wb-review-kopf Note und Quelle, --wb-review-name,
   --wb-review-klein Hinweis und Anzahl). Ohne Wert steht alles wie in v8. Rahmen, Schatten und Kopf hängen an
   :where() (Gewicht null): ungesetzt gelten wie bisher die Grundregeln der Seite. */
.wb-reviews{--wb-mehr-zeilen:7;display:flex;flex-wrap:wrap;align-items:center;column-gap:.45em}
/* Ohne Zitate (FB22 #319): Baustein und Seitenabschnitt um ihn weg, auch gegen eigenes display der
   Seite. Den Abschnitt markiert die Montage (website_reviews.inject) mit hidden und data-wb-leer. */
.wb-reviews[hidden],[data-wb-leer]{display:none!important}
.wb-reviews>*{flex:0 0 100%;min-width:0;margin:0}
.wb-reviews-rating,.wb-reviews-source{flex:0 0 auto}
.wb-reviews-rating+.wb-reviews-source::before{content:"·";margin-right:.45em}
/* Anzahl und Zeitraum zur Note (BGH I ZR 143/23, Tom 21.10.2026) stehen seit 30.10.2026 unten beim Hinweis, gleich
   groß und in dessen Zeile, solange beide hineinpassen; sonst darunter. Im HTML bleiben sie direkt hinter der Note.
   max-width hart: Seitenregeln wie p{max-width:62ch} (Morina) oder #stimmen p{…} brächen den Hinweis sonst um,
   Toms Vorgabe für alle Seiten ist ab Tablet eine Zeile (#685). Wird die Spalte zu schmal, meldet es der Befund. */
.wb-reviews-notice,.wb-reviews-basis{flex:0 1 auto;align-self:flex-end;max-width:none!important;font-size:var(--wb-review-klein,.75rem);
  line-height:1.5;opacity:.7}
/* pretty statt balance (Tom 01.11.2026): balance machte die Zeilen am Handy künstlich gleich lang und brach zu früh um;
   pretty füllt die Zeile und lässt trotzdem kein Wort allein in der letzten. */
.wb-reviews-notice{order:1;margin-top:16px;text-wrap:pretty}
/* Auch die Zeile mit Anzahl und Zeitraum nie balance (A6, 02.11.2026): sonst griffe dort eine Grundregel der Seite für p mit balance. */
.wb-reviews-basis{order:2;text-wrap:pretty}
.wb-reviews a{color:inherit;overflow-wrap:anywhere}
.wb-reviews-source a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.wb-reviews cite{font-style:normal}
/* Nur waagrecht scrollbar (FB24 #462): baut eine Seite die Karte um und ragt etwa die 44-px-Tippfläche des
   Chevrons unter die Karte, wurde die Leiste sonst senkrecht scrollbar und wackelte am Handy. Der Puffer
   unten (16 px, Rand −12 px) hält den Überstand sichtbar; die Lage bleibt wie vorher (4 px). */
.wb-reviews-quotes{display:flex;gap:16px;margin-top:20px;padding-bottom:16px;margin-bottom:-12px;overflow-x:auto;
  overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.wb-reviews-quotes::-webkit-scrollbar{display:none}
/* Kopf eine Zeile (Tom 30.10.2026): Name links, Sterne rechts; ein langer Name bricht um und lässt den Sternen
   ihren Platz. Die mittlere Reihe nimmt die Höhe auf, darum steht der Chevron gleich hoher Karten auf einer Linie. */
.wb-review{flex:0 0 86%;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto 1fr auto;grid-template-areas:"name sterne" "text text" "mehr mehr";column-gap:12px;
  scroll-snap-align:start;padding:22px 22px 20px;border-radius:var(--wb-review-radius,4px);
  background:var(--wb-review-bg,color-mix(in srgb,currentColor 5%,transparent))}
:where(.wb-review){border:var(--wb-review-rahmen);box-shadow:var(--wb-review-schatten)}
.wb-review:only-child{flex-basis:100%}
.wb-review-author{grid-area:name;align-self:baseline;min-width:0;margin:0;font-size:var(--wb-review-name,.875em);opacity:.75;overflow-wrap:anywhere}
.wb-review-author a{text-decoration:none}
.wb-review-author a:hover{text-decoration:underline}
.wb-review-stars{grid-area:sterne;align-self:baseline;justify-self:end;margin:0 -.14em 0 0;letter-spacing:.14em;line-height:1;white-space:nowrap}
.wb-review blockquote{grid-area:text;align-self:start;min-width:0;margin:12px 0 0;max-width:none}
.wb-reviews-links{order:3;margin-top:8px;font-size:.875em}
.wb-review-mehr{grid-area:mehr;justify-self:center;display:grid;place-items:center;width:44px;height:44px;margin:-8px 0 -18px;
  padding:0;border:0;border-radius:var(--wb-knopf-radius,50%);background:none;color:inherit;cursor:pointer}
.wb-review-mehr svg{display:block;transition:transform .3s cubic-bezier(.3,.7,.2,1)}
.wb-review-mehr[aria-expanded="true"] svg{transform:rotate(180deg)}
.wb-reviews-nav{display:none;flex:0 0 auto;gap:8px;margin-left:auto}
.wb-reviews-nav button{display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:var(--wb-knopf-rahmen,1px solid color-mix(in srgb,currentColor 30%,transparent));border-radius:var(--wb-knopf-radius,50%);
  background:none;color:inherit;cursor:pointer}
:where(.wb-reviews-nav button){box-shadow:var(--wb-knopf-schatten)}
:where(.wb-reviews-rating,.wb-reviews-source){font-size:var(--wb-review-kopf)}
/* Note und „Google Maps“ in einer Zeile auch am Handy (Tom 20.10.2026; mit der Anzahl brach die Kopfzeile bei
   390 px um, seit 21.10. steht sie in der eigenen Zeile darunter): die Kopfzeile dort etwas kleiner. */
@media (max-width:479px){.wb-reviews-rating,.wb-reviews-source{font-size:var(--wb-review-kopf,.8125em)}.wb-reviews{column-gap:.35em}}
@media (min-width:700px){
  .wb-reviews-quotes{gap:20px}
  .wb-review{flex-basis:340px}
  .wb-reviews-nav:not([hidden]){display:flex}
}

/* Zustände aus website_reviews_runtime.js */
.wb-reviews-quotes.wb-mehr-an{align-items:flex-start}
.wb-review-text.is-lang{max-height:var(--wb-mehr-hoehe);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 3em),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 3em),transparent)}
.wb-review-text.is-lang.is-offen{max-height:none;-webkit-mask-image:none;mask-image:none}
.wb-review-text.is-fahrt{transition:max-height .45s cubic-bezier(.3,.7,.2,1)}
.wb-review-mehr[hidden],.wb-reviews-nav[hidden]{display:none}
.wb-review-mehr:focus-visible,.wb-reviews-nav button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.wb-reviews-notice.is-einzeilig{white-space:nowrap}
/* Leiste bis an den Fensterrand: die Ränder misst das Skript (Scrollleiste, beliebiger Seitenrand). */
.wb-reviews-quotes.wb-leiste{box-sizing:border-box;flex-basis:calc(100% + var(--wb-rand-l,0px) + var(--wb-rand-r,0px));
  margin-inline:calc(var(--wb-rand-l,0px) * -1) calc(var(--wb-rand-r,0px) * -1);
  padding-inline:var(--wb-rand-l,0px) var(--wb-rand-r,0px);scroll-padding-inline:var(--wb-rand-l,0px) var(--wb-rand-r,0px)}
.wb-reviews-quotes.wb-schleife{cursor:grab}
.wb-reviews-quotes.wb-zieht{cursor:grabbing;scroll-snap-type:none;user-select:none}
.wb-reviews-quotes.wb-schleife:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.wb-review-text.is-fahrt,.wb-review-mehr svg{transition:none}}
/* wb-reviews:end */