:root{
    --t-white:#FFFFFF;--t-paper:#F0EEE8;--t-ink:#2B3532;--t-green:#5B6A43;
    --t-muted:#5E625A;--t-line:#D2CEC3;--t-font:'Inter Tight',Arial,sans-serif;
    --t-display:'Newsreader',Georgia,serif;--t-hero-position:50% 70%;--t-hero-mobile-position:50% 50%;
    --garden-ink:#2B3532;--garden-action:#2A6B26;
    --gutter:24px;--content:1600px;--bar-height:72px;
  }
@font-face{font-family:'Newsreader';src:url("../media/font-newsreader-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}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-height) + 24px)}
body{margin:0;background:var(--t-white);color:var(--t-ink);font:400 18px/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.06;text-wrap:balance;overflow-wrap:break-word}
h2{font-size:clamp(48px,5.8vw,88px)}
p{max-width:62ch}
[hidden]{display:none!important}
::selection{background:var(--t-green);color:var(--t-white)}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
input:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.wrap{width:min(100% - var(--gutter)*2,var(--content));margin-inline:auto}
.section{padding-block:120px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:56px;padding:16px 32px;border:1px solid currentColor;background:var(--t-ink);color:var(--t-white);font-size:15px;font-weight:500;line-height:1.4;white-space:nowrap;transition:background .2s,color .2s}
.button:hover{background:var(--t-green);color:var(--t-white)}
.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}
.nowrap{white-space:nowrap}

/* Startbild */
.hero{--scene-height:max(680px,100svh);--hero-kopf-band:176px;--hero-fuss-band:136px;position:relative;height:var(--scene-height);background:var(--t-white);color:var(--t-ink);isolation:isolate}
.hero-frame{position:relative;overflow:clip;height:var(--scene-height);background:var(--t-white)}
.hero-art,.hero-art picture,.hero-art img,.hero-shade{position:absolute;inset:0;width:100%;height:100%}
.hero-art{overflow:hidden}
/* Sitzplatz-Foto der Praxis (Wunsch 24.10.2026). Am Desktop steht das Bildpaar rechts und läuft links weich ins
   Weiß aus: der Sitzplatz liegt neben und unter dem Text, links bleibt Papier für Logo und Überschrift. */
.hero-art{left:28%;width:72%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.hero-art img{object-fit:cover;object-position:var(--t-hero-position)}
/* Skizze und Foto sind ein deckungsgleiches Paar (gleiche Maße und Ausschnitte). Ruhend, ohne Skript oder bei
   reduzierter Bewegung: links die Bauskizze, rechts der fertige Garten. Mit Bewegung beginnt das Startbild als
   Skizze, beim Scrollen bleibt die Bühne stehen und der fertige Garten entsteht (Skript setzt --reveal und --zoom). */
.hero{--reveal:1;--zoom:1}
.hero-art picture{transform:scale(var(--zoom));transform-origin:50% 72%}
.hero-sketch{-webkit-mask-image:linear-gradient(100deg,#000 0%,#000 59%,transparent 74%);mask-image:linear-gradient(100deg,#000 0%,#000 59%,transparent 74%)}
.hero.has-motion{--reveal:0;height:calc(var(--scene-height) * 1.85)}
.hero.has-motion .hero-frame{position:sticky;top:0}
.hero.has-motion .hero-sketch{-webkit-mask-image:none;mask-image:none;opacity:calc(1 - var(--reveal))}
.hero.has-motion .hero-art picture{will-change:transform}
/* Weißer Verlauf wie in der Vorlage: die ganze linke Seite von oben (Logo) bis unten weich weiß, er darf das
   Nachbarhaus überdecken (Tom 24.10.2026). Endet vor dem mittleren Hochbeet, damit das Gebaute schwarz bleibt. */
.hero-shade{background:radial-gradient(ellipse 34% 17% at 28% 43%,#fffffff2 0%,#ffffffbf 50%,#ffffff00 100%),linear-gradient(90deg,#fff 0%,#fffffff2 26%,#ffffffb3 33%,#ffffff40 41%,#ffffff00 47%);pointer-events:none}
.site-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:32px;padding-block:28px;z-index:5}
/* Logo ohne Platte (Tom 23.10.2026), auf hellem Grund in den Originalfarben. */
.brand{position:relative;isolation:isolate;display:block;flex-shrink:0;filter:drop-shadow(0 0 10px #ffffffcc)}
.brand img{width:auto;height:104px;object-fit:contain}
.mobile-call{display:none}
.hero-copy{position:absolute;top:var(--hero-kopf-band);bottom:var(--hero-fuss-band);left:0;right:0;display:flex;flex-direction:column;justify-content:center;z-index:2;pointer-events:none}
.hero h1{font-size:min(clamp(58px,6.4vw,118px),10.5svh);line-height:1.02;letter-spacing:-.035em;max-width:8.2em;text-wrap:balance;text-shadow:0 0 4px #fff,0 0 12px #fff,0 0 24px #ffffffcc}
.hero-copy p{max-width:44ch;font-size:17px;line-height:1.6;margin-top:32px;color:var(--t-ink)}
.hero-inquiry{pointer-events:auto;align-self:flex-start;margin-top:32px;background:var(--garden-action);color:var(--t-white);border-color:var(--garden-action);min-width:208px}
.hero-inquiry:hover{background:#1F521C;color:var(--t-white);border-color:#1F521C}
.hero-inquiry:focus-visible{outline-color:var(--garden-action)}
.hero-scroll{position:absolute;inset-inline:0;bottom:36px;z-index:2;color:var(--t-ink);pointer-events:none}
.hero-nudge{position:relative;isolation:isolate;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}
/* Leichter weißer Schein statt Pille, wie in der Vorlage. */
.hero-nudge:before{content:"";position:absolute;inset:-6px -22px;z-index:-1;background:radial-gradient(closest-side,#ffffffb8,#ffffff80 55%,#ffffff00);pointer-events:none}
.hero-nudge .nudge-icon{width:28px;height:32px;flex:none;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #ffffffb3)}
.nudge-copy{font:500 16px/1.35 var(--t-font);text-shadow:0 0 3px #fff,0 0 10px #ffffffb3}
.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,.hero.is-guiding .hero-nudge{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}}

/* Kopfleiste beim Scrollen */
.scroll-bar{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--bar-height);background:#fffffff5;border-bottom:1px solid var(--t-line);box-shadow:0 6px 24px #10201d14;transform:translateY(-105%);transition:transform .32s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.scroll-bar.is-visible{transform:none}
.scroll-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100%}
.scroll-brand{display:block;flex-shrink:0}
.scroll-brand img{width:auto;height:56px;object-fit:contain}
.scroll-cta{min-height:46px;padding:11px 26px;font-size:14px}
.scroll-call{display:none}

/* Arbeiten */
.section-heading{margin-bottom:56px}
.section-heading h2{max-width:15ch}
#projects-title:focus-visible{outline:2px solid var(--t-green);outline-offset:6px}
.project-gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.project{min-width:0}
.project-open{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--t-paper)}
.project-open img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease-out}
.project-open:focus-visible{outline-color:var(--t-green);outline-offset:4px}
@media(hover:hover){.project-open:hover img{transform:scale(1.03)}}
.projects-more{margin-top:36px;max-width:none}
.instagram-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:16px;font-weight:500}
.instagram-link svg{width:24px;height:24px;flex:none}
.instagram-link:hover span{text-decoration:underline;text-underline-offset:5px}

/* Über uns */
.about{padding-top:0}
.about-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(48px,7vw,120px);align-items:center}
.about-image{position:relative;min-width:0}
.about-image img{aspect-ratio:3/2}
.about-copy h2{font-size:clamp(42px,3.9vw,60px);max-width:20ch;margin-bottom:32px}
.about-copy p{font-size:18px;line-height:1.65;max-width:38ch;color:var(--t-muted);text-wrap:pretty}

/* Leistungen */
.leistungen{background:var(--t-paper)}
/* Ohne Foto (Tom 23.10.2026: die Bilder stehen schon in der Galerie): Überschrift über die volle Breite,
   darunter die acht Leistungen am Desktop in zwei Reihen zu vier, am Tablet zu zwei, am Handy untereinander. */
.leistungen-copy{min-width:0}
.leistungen-copy h2{font-size:clamp(42px,3.9vw,60px);margin-bottom:48px}
.services{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 40px}
.services li{border-top:1px solid var(--t-line);padding-top:22px;min-width:0}
.services h3{font-size:28px;letter-spacing:-.02em;margin-bottom:12px}
.services p{font-size:16px;max-width:36ch;color:var(--t-muted)}

/* Referenzen und Unterstützung */
.partner{padding-block:112px;overflow:hidden}
.partner-head h2{font-size:clamp(42px,3.9vw,60px)}
.partner-head h3{font-size:30px;letter-spacing:-.02em}
.partner-head{margin-bottom:28px}
.partner-head-zwei{margin-top:64px}
/* Immer eine Zeile über die volle Breite, an den Rändern weich ausgeblendet. Ohne Skript oder bei
   reduzierter Bewegung steht sie und lässt sich wischen; das Skript lässt sie endlos laufen. */
.logo-band{--logo-luft:clamp(28px,3.4vw,52px);position:relative;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;--band-rand:clamp(72px,16vw,180px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 min(6%,var(--gutter)),#000 calc(100% - var(--band-rand)),transparent);mask-image:linear-gradient(90deg,transparent,#000 min(6%,var(--gutter)),#000 calc(100% - var(--band-rand)),transparent)}
.logo-band::-webkit-scrollbar{display:none}
.logo-band:focus-visible{outline:2px solid var(--t-green);outline-offset:-2px}
.logo-track{list-style:none;margin:0;padding:0 0 0 max(0px,calc(max(var(--gutter),(100vw - var(--content))/2) - var(--logo-luft)));display:flex;flex-wrap:nowrap;align-items:center;width:max-content}
.logo-band.is-running{overflow:hidden}
.logo-band.is-running .logo-track{padding:0;animation:logo-band var(--band-dauer,40s) linear infinite;will-change:transform}
.logo-band-rueckwaerts.is-running .logo-track{animation-direction:reverse}
.logo-band:hover .logo-track,.logo-band:focus-within .logo-track{animation-play-state:paused}
.logo-track li{flex:none;display:flex;align-items:center;justify-content:center;height:104px;padding-inline:var(--logo-luft)}
.logo-track img{width:auto;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.72;transition:filter .25s,opacity .25s}
.logo-track li:hover img{filter:none;opacity:1}
.logo-quer{height:40px}
.logo-hoch{height:66px}
.logo-rund{height:74px}
.logo-name{font:400 26px/1.15 var(--t-display);letter-spacing:-.02em;color:var(--t-ink);opacity:.72;white-space:nowrap}
@keyframes logo-band{to{transform:translateX(-50%)}}

/* Kontakt und Fuß */
.contact-reveal{background:var(--t-ink)}
.contact{padding-top:104px;background:var(--t-ink);color:var(--t-white);--t-muted:#CDD6D7;--t-line:#849596}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,120px)}
.contact-copy,.contact-form{min-width:0}
.contact h2{max-width:10ch;font-size:clamp(64px,6.6vw,108px);line-height:1.02;margin-bottom:28px;hyphens:manual}
.contact address{display:flex;flex-direction:column;align-items:start;gap:8px;margin-top:48px;font-style:normal;font-size:22px;overflow-wrap:anywhere}
.contact address a{max-width:100%}
.contact address>a:not(.instagram-link):hover{text-decoration:underline;text-underline-offset:5px}
.contact address span{font-size:16px;color:var(--t-muted);margin-top:20px}
.contact address .instagram-link{margin-top:20px}
.contact address .instagram-link span{margin-top:0;color:inherit}
.contact-signoff{display:flex;align-items:center;gap:24px;margin-top:72px;padding-block:32px;border-top:1px solid #ffffff1f;color:var(--t-muted);font-size:12px}
.signoff-brand{display:block;flex-shrink:0}
.signoff-brand img{width:auto;height:68px;object-fit:contain}
.signoff-instagram{margin-left:auto;font-size:14px;color:var(--t-white)}
.signoff-instagram svg{width:22px;height:22px}
.contact-signoff .wb-legal{display:flex;flex-wrap:wrap;gap:0 24px;margin-left:16px}
.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}

/* Formularbaustein */
.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}
@media(min-width:700px){
  .wb-form form{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .wb-form form>*{grid-column:1/-1}
  .wb-form form>label:nth-of-type(-n+4){grid-column:auto}
}
.wb-form label{margin:0 0 26px;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 var(--t-line);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:none;cursor:pointer}
.wb-form .wb-consent input{position:absolute;left:0;top:1px;width:20px;height:20px;margin:0;cursor:pointer;accent-color:var(--t-paper)}
.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 var(--t-paper);border-radius:2px;background:var(--t-paper);color:var(--t-ink);font-size:16px;font-weight:550;transition:background .2s}
.wb-form button[type=submit]:hover{background:var(--t-white)}
.wb-form [role=status]{margin:16px 0 0;font-size:15px}
.wb-form [role=status]:empty{margin:0}

/* Lichtbox */
.project-dialog{padding:0;border:0;width:min(1380px,calc(100% - 64px));max-width:none;max-height:calc(100svh - 48px);background:var(--t-white);color:var(--t-ink);overscroll-behavior:contain}
.project-dialog::backdrop{background:#101E23EB;backdrop-filter:blur(8px)}
.project-dialog[open]{display:flex;flex-direction:column;animation:dialog-in .25s ease-out}
.dialog-image{position:relative;flex:1;min-height:180px;background:var(--t-ink);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-white);color:var(--t-ink)}
.dialog-copy{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:32px;align-items:center;padding:24px 32px}
.dialog-copy h2{font-size:30px;letter-spacing:-.02em}
.dialog-navigation{display:flex;align-items:center;gap:8px}
#dialog-counter{min-width:42px;font-size:13px;text-align:center;font-variant-numeric:tabular-nums}
.dialog-copy .button{font-size:14px;min-height:52px}
@keyframes dialog-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.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}

@media(min-width:1100px){:root{--gutter:64px}}
/* Kontakt am Desktop: Formular füllt die Spaltenhöhe, das Nachrichtenfeld wächst mit; beide Spalten enden gleich. */
@media(min-width:1100px){
  .contact-form,.contact-form .wb-form{display:flex;flex-direction:column}
  .contact-form .wb-form{flex:1}
  .contact-form .wb-form form{flex:1;grid-template-rows:auto auto 1fr}
  .contact-form .wb-form form>label:nth-of-type(5){display:flex;flex-direction:column}
  .contact-form .wb-form form>label:nth-of-type(5) textarea{flex:1}
}
@media(min-width:1800px){:root{--gutter:96px}}
@media(min-width:700px) and (max-width:1099px){
  :root{--gutter:40px}
  /* Tablet quer: Überschrift läuft weiter ins Bild, deshalb breiterer Verlauf hinter dem Text. */
  .hero-art{left:30%;width:70%}
  .hero-shade{background:radial-gradient(ellipse 44% 20% at 30% 42%,#fffffff2 0%,#ffffffc4 55%,#ffffff00 100%),linear-gradient(90deg,#fff 0%,#fffffff2 28%,#ffffffb3 36%,#ffffff40 46%,#ffffff00 54%)}
  .hero h1{font-size:min(88px,10svh);max-width:8.2em}
  .brand img{height:92px}
  .project-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .about-layout{gap:40px}
  .contact-layout{grid-template-columns:minmax(0,1fr);gap:56px}
  .contact address{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 40px;align-items:start}
  .contact address span{margin-top:12px}
  .contact address .instagram-link{margin-top:12px}
  .contact h2{max-width:14ch}
  .about-copy h2,.leistungen-copy h2,.partner-head h2{font-size:clamp(36px,4.6vw,48px)}
  .about-copy p{font-size:17px}
  .services{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px}.services h3{font-size:26px}
  .contact h2{font-size:clamp(56px,8vw,80px)}
  .contact-signoff{margin-top:48px}
  .dialog-copy{grid-template-columns:1fr auto;gap:18px}.dialog-copy .button{grid-column:1/3}
}
/* Tablet hochkant: Text oben auf Weiß, darunter das ganze Bild mit dem Sitzplatz. Quer gilt der Desktop-Aufbau. */
@media(min-width:700px) and (max-width:1099px) and (max-aspect-ratio:1/1){
  .hero-art{left:0;width:100%;top:120px;height:auto;bottom:0;-webkit-mask-image:none;mask-image:none}
  .hero-art img{object-position:50% 100%}
  .hero-sketch{-webkit-mask-image:linear-gradient(100deg,#000 0%,#000 50%,transparent 64%);mask-image:linear-gradient(100deg,#000 0%,#000 50%,transparent 64%)}
  .hero-copy{justify-content:flex-start}
  .hero-shade{background:linear-gradient(180deg,#fff 0,#fff 380px,#ffffffcc 470px,#ffffff00 580px,#ffffff00 86%,#ffffff4d 100%)}
}
@media(max-width:699px){
  :root{--bar-height:64px}
  body{font-size:16px}.section{padding-block:72px}
  .hero{--scene-height:max(640px,100svh)}
  .site-header{padding-block:16px;gap:16px;align-items:center}
  .brand img{height:70px}
  .mobile-call{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--t-ink);border-radius:50%;flex-shrink:0;color:var(--t-ink);background:#ffffffb3}.mobile-call svg{width:23px;height:23px}
  /* Handy: das Bild beginnt unter dem Text, damit es kleiner skaliert und die Gartenbauten zeigt (Tom 24.10.2026). */
  /* Bildbereich so hoch, dass der Sitzplatz samt Bänken fast in voller Breite ins Bild passt; auf hohen Geräten
     wächst er mit, damit unter dem Text keine leere Fläche bleibt. */
  .hero{--art-top:max(300px,calc(var(--scene-height) - 155vw))}
  .hero-art{left:0;width:100%;top:var(--art-top);height:auto;bottom:0;-webkit-mask-image:none;mask-image:none}
  .hero-art img{object-position:var(--t-hero-mobile-position)}
  .hero-sketch{-webkit-mask-image:linear-gradient(120deg,#000 0%,#000 50%,transparent 64%);mask-image:linear-gradient(120deg,#000 0%,#000 50%,transparent 64%)}
  .hero.has-motion{height:calc(var(--scene-height) * 1.65)}
  /* Handy wie die Vorlage: Text oben auf Weiß, Knopf unten im Bild, darüber der Hinweis; unten nur ein Hauch. */
  .hero-shade{background:linear-gradient(180deg,#fff 0,#fff calc(var(--art-top) - 4px),#ffffffb3 calc(var(--art-top) + 36px),#ffffff00 calc(var(--art-top) + 96px),#ffffff00 84%,#ffffff4d 100%)}
  .hero-copy{top:104px;bottom:max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:flex-start;transform:none}
  .hero h1{font-size:clamp(44px,12.4vw,64px);max-width:none;line-height:1.04}
  .hero-copy p{font-size:16px;margin-top:20px;max-width:32ch}
  .hero-inquiry{margin-top:auto;min-height:54px;width:100%;padding:14px 24px}
  .hero-scroll{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 70px)}
  .scroll-brand img{height:48px}
  .scroll-bar-inner{gap:12px}
  .scroll-cta{margin-left:auto;min-height:44px;padding:10px 18px;font-size:14px}
  .scroll-call{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--t-ink);border-radius:50%;color:var(--t-ink);flex-shrink:0}.scroll-call svg{width:21px;height:21px}
  .section-heading{margin-bottom:32px}.section-heading h2{font-size:clamp(36px,9.6vw,48px);max-width:none}
  .project-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .projects-more{margin-top:24px}
  .about{padding-top:0}.about-layout{grid-template-columns:1fr;gap:32px}
  .about-copy h2{font-size:clamp(34px,9vw,48px);max-width:none;margin-bottom:20px}.about-copy p{font-size:17px;max-width:42ch}
  .leistungen-copy h2{font-size:clamp(34px,9vw,48px);margin-bottom:28px}
  .services{grid-template-columns:1fr;gap:26px}.services li{padding-top:18px}.services h3{font-size:25px;margin-bottom:8px}.services p{max-width:40ch}
  .partner{padding-block:72px}
  .partner-head h2{font-size:clamp(34px,9vw,48px)}.partner-head h3{font-size:24px}
  .partner-head{margin-bottom:16px}.partner-head-zwei{margin-top:40px}
  .logo-band{--logo-luft:22px}.logo-track li{height:84px}
  .logo-quer{height:32px}.logo-hoch{height:54px}.logo-rund{height:60px}
  .logo-name{font-size:21px}
  .contact{padding-top:72px}.contact-layout{grid-template-columns:minmax(0,1fr);gap:40px}
  .contact h2{font-size:clamp(48px,14vw,64px);max-width:10ch}
  .contact address{margin-top:28px;font-size:21px}.contact address span{font-size:15px}
  .wb-form input:not([type=checkbox]),.wb-form textarea{font-size:16px}
  .contact-signoff{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;margin-top:48px;padding-block:24px}
  .signoff-brand{grid-row:1/3}
  .signoff-instagram{justify-self:end;margin-left:0}
  .contact-signoff .wb-legal{justify-self:end;margin-left:0}
  .signoff-brand img{height:60px}
  .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:20px 18px;gap:16px}
  .dialog-copy h2{font-size:25px}
  .dialog-navigation{display:none}
  .dialog-copy .button{grid-column:1/3;width:100%;justify-content:center;font-size:13px}
}
@media(max-width:370px){:root{--gutter:16px}.hero h1{font-size:42px}.hero-copy p{font-size:15px}.contact h2{font-size:46px}.brand img{height:62px}}
@media(max-height:619px) and (min-width:700px){.hero{--scene-height:620px;--hero-kopf-band:156px;--hero-fuss-band:96px}.hero h1{font-size:min(64px,12.5vw);max-width:14ch}.hero-copy p{margin-top:20px}.hero-inquiry{margin-top:20px}.hero-scroll{display:none}.dialog-image img{height:54svh}.dialog-copy{padding:18px 24px}.dialog-copy h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero .nudge-icon{animation:none!important}}

/* wb-reviews:start v5 */
/* Google-Bewertungen (zentraler Baustein, KB.30), Toms Vorgabe vom 20.10.2026: Note und „Google Maps“
   in einer Zeile, Sterne eigene Zeile, Name ohne Unterstreichung, Karten als Wischleiste, lange Texte
   bis zu einer festen Höhe mit „Mehr lesen“. 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). */
.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): eigene kleine Zeile unter Note und „Google Maps“. */
.wb-reviews-basis{margin-top:2px;font-size:.8125em;opacity:.75}
.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 von
   „Mehr lesen“ 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}
.wb-review{flex:0 0 86%;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;
  scroll-snap-align:start;padding:22px 22px 20px;border-radius:4px;
  background:var(--wb-review-bg,color-mix(in srgb,currentColor 5%,transparent))}
.wb-review:only-child{flex-basis:100%}
.wb-review-stars{margin:0;letter-spacing:.14em;line-height:1}
.wb-review blockquote{margin:0;max-width:none}
.wb-review-author{margin:auto 0 0;padding-top:4px;font-size:.875em;opacity:.75}
.wb-review-author a{text-decoration:none}
.wb-review-author a:hover{text-decoration:underline}
.wb-reviews-notice{margin-top:16px;font-size:.75rem;line-height:1.5;opacity:.7;text-wrap:balance}
.wb-reviews-links{margin-top:8px;font-size:.875em}
.wb-review-mehr{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin:-6px 0 -10px;
  padding:0;border:0;background:none;color:inherit;font:inherit;font-size:.875em;font-weight:600;cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.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:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:50%;background:none;color:inherit;cursor:pointer}
/* 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:.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{transition:none}}
/* wb-reviews:end */