/* Shared external styles for the Beqi Bau landing page. */
/* Base styles (moved from index.html inline <style>) */
:root{--forest:#132a21;--forest-2:#1c3b2d;--leaf:#a8d96d;--sand:#f4f1e9;--paper:#fffdf8;--ink:#17231e;--muted:#5e6a62;--line:#dfe5dc}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:82px}body{background:var(--sand);color:var(--ink);font-family:"DM Sans",sans-serif;line-height:1.55}a{text-decoration:none;color:inherit}.container{width:min(1500px,calc(100% - 56px));margin:auto}
/* Bewegungskurven an einer Stelle. Die eingebauten CSS-Easings (ease,
   ease-out) sind flach; diese Kurven starten schnell und laufen weich aus,
   dadurch wirkt jede Bewegung direkt statt traege. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-out-soft:cubic-bezier(.32,.72,0,1)}
/* Auch die Flaechen, die der Browser stellt, gehoeren zum Design. */
::selection{background:var(--leaf);color:var(--forest)}
header{position:fixed;z-index:10;width:100%;top:0;color:#fff;transition:background-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
/* Bewusst OHNE backdrop-filter: ein Element mit backdrop-filter wird laut
   Spec zur "Backdrop Root" - Kindelemente koennen dann nicht mehr den
   Seiteninhalt dahinter weichzeichnen. Das mobile Menue liegt im Header,
   sein Glaseffekt waere also ab dem ersten Scrollen tot (genau der Bug:
   oben glasig, gescrollt flach). --header-bg deckt mit 93% ohnehin fast
   alles ab, ein Blur war dort nie sichtbar. */
header.scrolled{background:var(--header-bg);box-shadow:0 8px 30px #0002}header nav{height:82px;display:flex;align-items:center;justify-content:space-between}.brand img{width:148px;height:auto;display:block}.navlinks{display:flex;gap:31px;font-size:.85rem}.navlinks a{opacity:.8;transition:.28s var(--ease-out-soft)}.navlinks a:hover{opacity:1;color:var(--leaf)}.navbutton{background:var(--leaf);color:var(--forest);padding:11px 18px;border-radius:100px;font-size:.8rem;font-weight:700}.menu{display:none;width:34px;height:28px;border:0;background:none;color:#fff;cursor:pointer;position:relative;transition:color .3s var(--ease-out),transform .16s var(--ease-out);padding:0}
/* Hover nur dort, wo es einen Zeiger gibt - auf dem Touchscreen bliebe der
   Knopf sonst nach dem Antippen vergroessert haengen. */
@media(hover:hover) and (pointer:fine){.menu:hover{color:var(--leaf);transform:scale(1.08)}}
.menu:active{transform:scale(.94)}
.menu-lines{position:absolute;inset:0;margin:auto;width:28px;height:18px;display:flex;flex-direction:column;justify-content:space-between}.menu-lines span{display:block;height:2px;width:100%;border-radius:2px;background:currentColor;transition:transform .38s var(--ease-out-soft),opacity .28s var(--ease-out-soft);transform-origin:center}.menu.open .menu-lines span:nth-child(1){transform:translateY(8px) rotate(45deg)}.menu.open .menu-lines span:nth-child(2){opacity:0;transform:scaleX(0)}.menu.open .menu-lines span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav-dropdown{position:relative}.nav-dropdown-trigger{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:#fff;opacity:.8;font:inherit;font-size:.85rem;cursor:pointer;padding:0;transition:.28s var(--ease-out-soft)}.nav-dropdown-trigger:hover,.nav-dropdown-trigger[aria-expanded="true"]{opacity:1;color:var(--leaf)}.nav-dropdown-chevron{width:10px;height:7px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:.28s var(--ease-out-soft)}.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-chevron{transform:rotate(180deg)}.nav-dropdown-panel{position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%);display:flex;gap:36px;background:var(--forest);border:1px solid #ffffff1a;border-radius:10px;padding:24px 28px;box-shadow:0 24px 50px #0006}.nav-dropdown-panel[hidden]{display:none}.nav-dropdown-col{display:flex;flex-direction:column;gap:2px;min-width:150px}.nav-dropdown-heading{display:block;color:var(--leaf);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}.nav-dropdown-col a{color:#fff;opacity:.82;font-size:.86rem;padding:6px 0;transition:.28s var(--ease-out-soft)}.nav-dropdown-col a:hover{opacity:1;color:var(--leaf);padding-left:3px}.nav-dropdown-col-more{border-left:1px solid #ffffff1a;padding-left:28px}
.hero{color:#fff;position:relative;overflow:hidden}
/* Statt eines Verlaufs mit heller und dunkler Zone (der zuletzt genau an der
   Textposition eine Luecke hatte) jetzt eine durchgehend gleichmaessige
   schwarze Abdunklung ueber dem ganzen Foto. Einfacher und robuster: unabhaengig
   davon, wie hoch Kicker/Ueberschrift/Text am Ende ausfallen, sitzen sie immer
   auf derselben Abdunklung statt auf einer bestimmten Verlaufs-Zone treffen zu
   muessen. */
.hero-bg{position:absolute;inset:-6% 0;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url("images/zaunbau-doppelstabmattenzaun-gartenweg-bielefeld.jpg") center 15%/cover;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),image-set(url("images/zaunbau-doppelstabmattenzaun-gartenweg-bielefeld.webp") type("image/webp"),url("images/zaunbau-doppelstabmattenzaun-gartenweg-bielefeld.jpg") type("image/jpeg")) center 15%/cover;will-change:transform;pointer-events:none}.hero .container{position:absolute;left:0;right:0;bottom:0}.hero-content{position:relative;z-index:1;padding-bottom:clamp(48px,7vh,88px)}.hero-stats{display:flex;gap:34px;margin-top:38px}.hero-stat{display:flex;flex-direction:column}.hero-stat strong{font:800 2.1rem Manrope;letter-spacing:-.04em;color:var(--leaf)}.hero-stat span{font-size:.74rem;color:#e5ebe4b3;margin-top:4px}.hero-stat-link{transition:transform .16s ease-out,opacity .2s ease}.hero-stat-link:hover{opacity:.85}.hero-stat-link:active{transform:scale(.97);transition-duration:.1s}.hero-stat-link span{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .28s var(--ease-out-soft)}.hero-stat-link:hover span{text-decoration-color:currentColor}.hero-stat-arrow{display:inline-block;transition:transform .28s var(--ease-out-soft)}.hero-stat-link:hover .hero-stat-arrow{transform:translate(3px,-3px)}.kicker{display:flex;align-items:center;gap:10px;color:var(--leaf);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:22px}.kicker:before{content:"";width:34px;height:2px;background:var(--leaf)}h1,h2,h3{font-family:Manrope;line-height:1.01;letter-spacing:-.07em}h1{font-size:clamp(3.4rem,7vw,6.4rem);max-width:850px}h1 em{color:var(--leaf);font-style:normal}.hero-text{font-size:1.1rem;color:#e5ebe4cc;max-width:510px;margin:22px 0 28px}.btn{display:inline-flex;align-items:center;gap:15px;border-radius:100px;padding:15px 22px;font-weight:700;font-size:.86rem;transition:.32s var(--ease-out-soft)}.btn.primary{background:var(--leaf);color:var(--forest)}.btn.outline{border:1px solid #ffffff66;color:#fff;margin-left:8px}.btn:hover{transform:translateY(-4px);box-shadow:0 12px 24px #0002}.btn:active{transform:scale(.97);transition-duration:.1s}
section{padding:120px 0}.intro{background:var(--paper)}.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px;align-items:center}.visual{position:relative;padding:0 32px 32px 0}.visual img{width:100%;height:510px;object-fit:cover;border-radius:4px;display:block}.visual:after{content:"";position:absolute;right:0;bottom:0;width:72%;height:78%;border:1px solid var(--leaf);z-index:0;border-radius:4px}.visual img{position:relative;z-index:1}.stamp{position:absolute;z-index:2;bottom:12px;left:-22px;width:125px;height:125px;border-radius:50%;display:grid;place-items:center;background:var(--leaf);color:var(--forest);font:800 .8rem Manrope;text-align:center;transform:rotate(-12deg)}.stamp span{font-size:1.6rem;display:block}
/* Die Bewertungszahl soll mit dem Stern in einer Zeile stehen ("5.0 ★"),
   display:block von .stamp span wuerde die beiden auseinanderreissen -
   hoehere Spezifitaet (span.stamp-rating) gewinnt zuverlaessig dagegen. */
.stamp span.stamp-rating{display:inline}.intro h2{font-size:clamp(2.8rem,5vw,5rem);margin-bottom:24px}.intro-copy{color:var(--muted);font-size:1.2rem;max-width:550px}.points{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:40px}.point{border-top:1px solid var(--line);padding-top:16px}.point strong{display:block;font:700 1rem Manrope;margin-bottom:5px}.point p{font-size:.86rem;color:var(--muted)}
.services{background:var(--forest);color:#fff}.section-top{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:52px}.section-top h2{font-size:clamp(2.8rem,5vw,5rem)}.section-top>p{color:var(--soft-on-dark);max-width:350px}
/* .service-icon ist eine gemeinsame Basis mit den Leistungs-Listen auf den
   Unterseiten (dort ueberschrieben durch ".service-item .service-icon") -
   hier nur Farbe/Strichstaerke, keine eigene Positionierung oder Groesse,
   damit nichts davon auf die andere Verwendung durchschlagen kann. */
.service-icon{height:36px;color:var(--leaf)}.service-icon svg{width:31px;height:31px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.service-icon svg .fill{fill:currentColor;stroke:none}
/* Frueher: sechs gleich grosse Kaesten mit Bild, Icon, Text - eine reine
   Karten-Wand, bei der jede Karte fuer sich isoliert war und die Hoehe der
   laengsten den Rest bestimmte. Jetzt: eine Liste mit einem einzigen grossen
   Vorschaubild, das beim Hovern/Fokussieren einer Zeile wechselt - Bild und
   Text sind ueber den Zustand verbunden statt sechsmal nebeneinander zu
   stehen. Auf schmalen/touch-Screens (keine verlaessliche Hover-Geste) faellt
   das auf eine einfache Liste mit kleinem Vorschaubild pro Zeile zurueck. */
.service-panel{display:grid;grid-template-columns:1fr;gap:8px}
.service-preview{display:none}
/* Touch: als horizontale Swipe-Karten statt als lange Liste - auf einem
   Touchscreen ist "durchwischen" die naheliegendere Geste. scroll-snap gibt
   dabei das native, richtig gefederte Scrollen kostenlos dazu, ganz ohne
   eigene Gesten-Physik in JS. Dazu ein sichtbarer Vor/Zurueck-Button-Zwilling
   unten (.service-carousel-controls) fuer alle, die lieber tippen statt
   wischen. Auf Maus/Trackpad (siehe @media(hover:hover) unten) bleibt die
   vertikale Liste mit Live-Vorschaubild bestehen - eine Wisch-Geste ergibt
   dort ohnehin keinen Sinn. */
.service-rows{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:12vw;padding:4px 12vw 10px;scrollbar-width:none}
.service-rows::-webkit-scrollbar{display:none}
.service-row{display:block;flex:none;width:min(76vw,300px);scroll-snap-align:center;border:1px solid #ffffff23;border-radius:14px;overflow:hidden;background:var(--forest-2);position:relative;color:#fff;transition:transform .45s var(--ease-out-soft),opacity .45s var(--ease-out-soft)}
.service-row:not(.is-current){transform:scale(.91);opacity:.55}
.service-row.is-prev{transform:scale(.91) rotate(-4deg)}
.service-row.is-next{transform:scale(.91) rotate(4deg)}
.service-row-icon{display:none}
.service-row-media{width:100%;height:270px;display:block}
.service-row-media img{width:100%;height:100%;object-fit:cover;display:block}
.service-row-text{display:block;padding:18px 20px 46px}
.service-row-text h3{font-size:1.15rem;letter-spacing:-.03em;margin-bottom:6px}
.service-row-text p{font-size:.85rem;color:var(--soft-on-dark)}
.service-row-arrow{position:absolute;right:18px;bottom:16px;font-size:1.3rem;color:var(--leaf)}
.service-carousel-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px}
.service-nav-btn{width:44px;height:44px;flex-shrink:0;border-radius:50%;border:1px solid #ffffff33;background:none;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .28s var(--ease-out-soft),transform .16s var(--ease-out-soft),opacity .28s var(--ease-out-soft)}
.service-nav-btn:hover{background:rgba(255,255,255,.08)}
.service-nav-btn:active{transform:scale(.92)}
.service-nav-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.service-nav-btn:disabled{opacity:.3;cursor:default}
.service-dots{display:flex;gap:8px}
.service-dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:#ffffff40;cursor:pointer;transition:background-color .28s var(--ease-out-soft),transform .28s var(--ease-out-soft)}
.service-dot.is-current{background:var(--leaf);transform:scale(1.3)}
/* Das grosse Vorschaubild samt Hover-Wechsel ist nur dort sinnvoll, wo Hover
   ueberhaupt zuverlaessig existiert (Maus/Trackpad) und genug Breite fuer
   zwei Spalten da ist - sonst bleiben es die Swipe-Karten oben. */
@media(hover:hover) and (pointer:fine) and (min-width:901px){
  .service-panel{grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
  .service-preview{display:block;position:sticky;top:110px;aspect-ratio:4/5;border-radius:6px;overflow:hidden;border:1px solid #ffffff23}
  .service-preview-img{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease-out-soft)}
  .service-preview-img.is-active{opacity:1}
  .service-preview-img img{width:100%;height:100%;object-fit:cover;display:block}
  .service-preview-label{position:absolute;z-index:1;left:22px;bottom:22px;background:var(--forest);color:#fff;font:700 1rem Manrope;letter-spacing:-.03em;padding:11px 20px;border-radius:100px}
  .service-rows{display:flex;flex-direction:column;overflow:visible;scroll-snap-type:none;padding:0;gap:0;border-top:1px solid #ffffff23}
  .service-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:18px;width:auto;flex:none;scroll-snap-align:none;border:0;border-bottom:1px solid #ffffff23;border-radius:0;background:none;transform:none;opacity:1;padding:22px 4px;transition:background-color .32s var(--ease-out-soft),padding-left .32s var(--ease-out-soft)}
  /* Die Karten-Klassen (is-prev/is-next/nicht-is-current) sind spezifischer
     als die blosse .service-row-Regel oben und wuerden sie sonst weiter
     abdunkeln/drehen, obwohl das Karussell-Skript hier gar nicht sichtbar
     laeuft - die Klassen bleiben aber vom letzten Handy-Zustand gesetzt. */
  .service-row.is-prev,.service-row.is-next,.service-row:not(.is-current){transform:none;opacity:1}
  .service-row-icon{display:block;width:30px;height:30px;color:var(--leaf)}
  .service-row-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .service-row-media{display:none}
  .service-row-text{padding:0}
  .service-row-text h3{font-size:1.3rem;margin-bottom:11px}
  .service-row-text p{font-size:.86rem;max-width:400px}
  .service-row-arrow{position:static;transition:transform .38s var(--ease-out-soft)}
  .service-row:hover,.service-row:focus-visible,.service-row.is-active{background:rgba(255,255,255,.05);padding-left:16px}
  .service-row:hover .service-row-arrow,.service-row:focus-visible .service-row-arrow,.service-row.is-active .service-row-arrow{transform:translate(4px,-4px)}
  .service-carousel-controls{display:none}
}
.projects{background:var(--paper)}.project-tabs{display:flex;gap:9px;flex-wrap:wrap}.projects-more{display:flex;justify-content:center;margin-top:36px}.tab{border:1px solid var(--line);background:none;border-radius:50px;padding:13px 18px;color:var(--muted);cursor:pointer;font:600 .75rem "DM Sans";transition:.28s var(--ease-out-soft)}.tab.active,.tab:hover{background:var(--forest);border-color:var(--forest);color:#fff}.project-grid{position:relative}.project-grid .project{position:absolute;top:0;left:0;overflow:hidden;border-radius:4px;cursor:zoom-in;transform:translate(var(--pos-x,0px),var(--pos-y,0px)) perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .38s var(--ease-out-soft),box-shadow .38s var(--ease-out-soft);will-change:transform}.project-grid .project img{height:auto}.project picture{display:contents}.project img{display:block;width:100%;height:100%;object-fit:cover;transition:.6s var(--ease-out-soft)}.project:hover{box-shadow:0 22px 44px #0d21194d}.project:hover img{transform:scale(1.07)}.project:before{content:"";position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .38s var(--ease-out-soft);pointer-events:none;mix-blend-mode:overlay;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#ffffff59,transparent 60%)}.project:hover:before{opacity:1}.project:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#0d2119d9)}.project-info{position:absolute;z-index:1;left:20px;right:20px;bottom:18px;color:#fff}.project-info small{color:var(--leaf);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em}.project-info h3{font-size:1.15rem;margin-top:5px;letter-spacing:-.04em}
.process{background:var(--mint)}.process-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:90px}.process h2{font-size:clamp(2.7rem,5vw,4.7rem)}.process-intro{color:var(--muted);margin-top:22px}.steps{border-top:1px solid var(--mint-line)}.step{display:grid;grid-template-columns:55px 1fr;gap:20px;padding:23px 0;border-bottom:1px solid var(--mint-line)}.step-no{font:700 1rem Manrope;color:var(--leaf-ink)}.step h3{font-size:1.25rem;letter-spacing:-.04em}.step p{font-size:.88rem;color:var(--muted);margin-top:5px}
.areas{background:var(--sand)}.areas-intro{color:var(--muted);font-size:1.1rem;max-width:620px;margin-top:16px}.area-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}.area-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--paper);border-radius:50px;padding:12px 20px;font:600 .85rem "DM Sans",sans-serif;color:var(--ink);transition:.28s var(--ease-out-soft)}.area-pill:hover{background:var(--forest);border-color:var(--forest);color:#fff}
.reviews{background:var(--paper)}.reviews-head{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:42px}.reviews-head h2{font-size:clamp(2.8rem,5vw,5rem)}.rating{display:flex;align-items:center;gap:17px;color:var(--muted)}.rating strong{font:800 3.7rem Manrope;color:var(--forest);letter-spacing:-.08em}.stars{color:#e3a52d;font-size:1.25rem;letter-spacing:3px}.rating small{display:block;font-size:.78rem;margin-top:2px}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.review{border:1px solid var(--line);padding:27px;background:#fff;border-radius:5px;min-height:205px;position:relative}.review:before{content:"“";position:absolute;right:22px;top:8px;font:800 5rem Georgia;color:var(--mint);line-height:1}.review .stars{font-size:.85rem;letter-spacing:2px}.review p{margin:23px 0;color:var(--ink);font-size:.94rem}.review strong{font:700 .8rem Manrope;color:var(--muted)}.review-nav{display:flex;justify-content:flex-end;margin-top:22px}.review-next{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--forest);border-radius:50%;background:var(--forest);color:#fff;font:400 2rem/1 "DM Sans";cursor:pointer;transition:.32s var(--ease-out-soft)}.review-next:hover{background:var(--leaf);border-color:var(--leaf);color:var(--forest);transform:translateX(3px)}.review-source{margin-top:24px;color:var(--forest);font-weight:700;font-size:.85rem}.review-source a:hover{color:#668f43}
.contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 4px}
.map-section{background:var(--sand);padding:clamp(56px,9vh,110px) 0}.map-section .kicker{margin-bottom:14px}.map-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:stretch}.map-section h2{font-size:clamp(2.1rem,3.3vw,3.1rem)}.map-address{color:var(--muted);font-size:1.02rem;line-height:1.6;margin:14px 0 20px}.request-map{display:flex;flex-direction:column}.request-map .map-address{margin:0 0 16px}.btn.outline-dark{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--forest);color:var(--forest);background:none}.btn.outline-dark:hover{background:var(--forest);color:#fff}.map-frame{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--line);margin-top:20px;box-shadow:0 18px 40px rgba(19,42,33,.1);transition:box-shadow .38s var(--ease-out-soft)}.map-frame:hover{box-shadow:0 22px 50px rgba(19,42,33,.16)}.request-map .map-frame{flex:1;aspect-ratio:auto;min-height:280px}.map-frame iframe{width:100%;height:100%;border:0;display:block}.map-load-btn{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(160deg,var(--mint),var(--sand));border:0;cursor:pointer;padding:24px;text-align:center;color:var(--forest);font:700 .95rem "DM Sans",sans-serif;transition:.32s var(--ease-out-soft)}.map-load-btn:hover{background:linear-gradient(160deg,var(--mint-line),var(--mint))}.map-load-icon svg{width:34px;height:34px;fill:none;stroke:var(--forest);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dark-mode .map-load-icon svg{stroke:var(--leaf)}
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--forest);color:#e8efe9;box-shadow:0 -12px 35px #0004}.cookie-banner[hidden]{display:none}.cookie-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:20px 0}.cookie-banner-inner p{font-size:.86rem;line-height:1.55;max-width:720px;margin:0}.cookie-banner-inner p a{color:var(--leaf);text-decoration:underline}.cookie-banner-inner p strong{color:var(--leaf);font-weight:700}.cookie-banner-actions{display:flex;gap:12px;flex-shrink:0}.cookie-banner-actions .btn{margin:0;padding:13px 20px;font-size:.82rem;white-space:nowrap;cursor:pointer;border:0}.cookie-banner-actions .btn.outline{border:1px solid #ffffff55;color:#fff;background:none}.cookie-banner-actions .btn.outline:hover{background:#ffffff14}.cookie-banner-actions .btn.primary{background:var(--leaf);color:var(--forest)}
@media(max-width:760px){.cookie-banner-inner{flex-direction:column;align-items:stretch;gap:16px;padding:18px 0}.cookie-banner-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cookie-banner-actions .btn.outline,.cookie-banner-actions .btn.primary{display:flex;align-items:center;justify-content:center}}.map-load-btn small{font-weight:400;font-size:.72rem;color:var(--muted);max-width:320px;line-height:1.5}.map-load-btn small a{text-decoration:underline;color:var(--muted)}
.dark-mode .map-section{background:var(--forest-2)}.dark-mode .map-address{color:var(--soft-on-dark)}.dark-mode .btn.outline-dark{border-color:#ffffff55;color:#fff}.dark-mode .btn.outline-dark:hover{background:var(--leaf);border-color:var(--leaf);color:var(--forest)}.dark-mode .map-load-btn{background:linear-gradient(160deg,var(--forest-2),var(--d-surface-2));color:#fff}.dark-mode .map-load-btn:hover{background:linear-gradient(160deg,var(--d-card),var(--forest-2))}.dark-mode .map-load-btn small{color:var(--soft-on-dark)}.dark-mode .map-load-btn small a{color:#dce8df}.dark-mode .map-frame{border-color:var(--d-line);box-shadow:0 18px 40px rgba(0,0,0,.3)}.dark-mode .map-frame:hover{box-shadow:0 22px 50px rgba(0,0,0,.4)}
.request-form-label{font:700 .95rem Manrope,sans-serif;color:var(--forest);letter-spacing:-.02em;margin:20px 0 4px;padding-top:18px;border-top:1px solid var(--line)}.request-form{margin-top:12px;display:flex;flex-direction:column;gap:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-field{display:flex;flex-direction:column;gap:5px}.form-field label{font:700 .76rem "DM Sans",sans-serif;color:var(--forest);letter-spacing:.01em}.form-field input,.form-field select,.form-field textarea{font:400 .92rem "DM Sans",sans-serif;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:11px 14px;min-height:46px;transition:.28s var(--ease-out-soft)}.form-field textarea{min-height:92px;resize:vertical}.form-field input:hover,.form-field select:hover,.form-field textarea:hover{border-color:#c3cdbe}.form-field input:focus-visible,.form-field select:focus-visible,.form-field textarea:focus-visible{border-color:var(--forest);outline:2px solid var(--leaf);outline-offset:1px}.form-field input[aria-invalid="true"],.form-field select[aria-invalid="true"],.form-field textarea[aria-invalid="true"]{border-color:#c0392b}.field-error{color:#c0392b;font-size:.78rem}.form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.request-form .btn.primary{align-self:flex-start;border:0;cursor:pointer}.request-form .btn.primary:disabled{opacity:.6;cursor:progress}.form-status{font-size:.86rem;min-height:1.2em}.form-status.success{color:#2f7a3f}.form-status.error{color:#c0392b}
/* Hinweis direkt am Formular statt nur in der Datenschutzerklaerung verlinkt:
   Art. 13 DSGVO verlangt die Information ueber die Verarbeitung genau an der
   Stelle, an der die Daten erhoben werden. */
.form-privacy-note{font-size:.74rem;color:var(--muted);margin-top:-2px}
.form-privacy-note a{text-decoration:underline;color:inherit}
.dark-mode .form-privacy-note{color:var(--d-muted)}
.dark-mode .request-form-label{color:var(--d-text);border-top-color:var(--d-line-2)}.dark-mode .form-field label{color:var(--d-text)}
/* Feld-Hintergrund war identisch mit dem Hintergrund von .map-section
   (beide var(--forest-2)) - die Felder waren dadurch komplett unsichtbar,
   nur die Labels blieben lesbar. --forest-2 ist zudem eine gesaettigte
   Markenfarbe, kein neutraler Grauton aus der d-*-Rampe; ein dezenter
   Helligkeitsunterschied haette hier kaum gereicht. Halbtransparentes Weiss
   funktioniert dagegen auf jedem dunklen Untergrund unabhaengig vom Farbton -
   dieselbe Masche wie schon bei .theme-toggle und den Cookie-Buttons. */
.dark-mode .form-field input,.dark-mode .form-field select,.dark-mode .form-field textarea{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:var(--d-text)}
.dark-mode .form-field input:hover,.dark-mode .form-field select:hover,.dark-mode .form-field textarea:hover{border-color:rgba(255,255,255,.4)}
.dark-mode .form-field input:focus-visible,.dark-mode .form-field select:focus-visible,.dark-mode .form-field textarea:focus-visible{border-color:var(--leaf)}
.dark-mode .form-field input::placeholder,.dark-mode .form-field textarea::placeholder{color:var(--d-muted)}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
footer{background:var(--forest);color:#dce8df;padding:45px 0 28px}.footer-brand{font:800 1.5rem Manrope;letter-spacing:-.08em}.footer-brand i{color:var(--leaf);font-style:normal}.footer-contact{text-align:right;font-size:.88rem;line-height:2}.footer-contact a:hover,.footer-bottom a:hover{color:var(--leaf)}.footer-bottom{border-top:1px solid #ffffff20;padding-top:20px;display:flex;justify-content:space-between;color:#8ea596;font-size:.75rem}.footer-bottom a{transition:.28s var(--ease-out-soft)}
/* transition:.7s hiess: alle Eigenschaften, 700ms, Standardkurve. Jetzt nur
   die zwei Eigenschaften, die sich wirklich bewegen (beide GPU-freundlich),
   etwas kuerzer und mit einer Kurve, die schnell startet und weich auslaeuft. */
.reveal{opacity:0;transform:translateY(25px);transition:opacity .7s var(--ease-out-soft),transform .7s var(--ease-out-soft)}
/* Der Hero bekommt als einzige Stelle eine eigene Inszenierung: statt eines
   Blocks, der als Platte hochfaehrt, setzen sich Kicker, Ueberschrift, Text,
   Buttons und Bewertung kurz nacheinander - das liest sich, wie der Satz
   gelesen wird. Bewusst @keyframes statt transition: ein einmaliger Auftritt
   wird nie unterbrochen, laeuft ausserhalb des Main-Threads (bleibt also
   waehrend des Ladens fluessig) und blockiert die transition-Eigenschaft der
   Buttons nicht, die dort fuer Hover und Klick gebraucht wird. */
/* Komplett hinter no-preference: die Zeilen werden hier vor dem Auftritt auf
   opacity:0 gesetzt, und niemand darf auf eine laufende Animation angewiesen
   sein, um die Ueberschrift ueberhaupt zu sehen. Wer reduzierte Bewegung
   eingestellt hat, bekommt den Hero deshalb einfach fertig - ohne Staffelung,
   ohne Versteckt-Zustand. */
@media(prefers-reduced-motion:no-preference){
  .hero-content.reveal{opacity:1;transform:none;transition:none}
  .hero-content.reveal>*{opacity:0}
  .hero-content.reveal.show>*{animation:heroRise .72s var(--ease-out-soft) both}
  /* Buttons blenden nur ein, ohne Versatz: ein bleibender transform aus der
     Animation wuerde sonst ihr Hover-Anheben und den Klick-Druck ueberschreiben. */
  .hero-content.reveal.show>.btn{animation-name:heroFade}
  .hero-content.reveal.show>:nth-child(2){animation-delay:.06s}
  .hero-content.reveal.show>:nth-child(3){animation-delay:.12s}
  .hero-content.reveal.show>:nth-child(4),
  .hero-content.reveal.show>:nth-child(5){animation-delay:.18s}
  .hero-content.reveal.show>:nth-child(6){animation-delay:.24s}
}
@keyframes heroRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
.reveal.show{opacity:1;transform:none}.project.reveal.show{transform:translate(var(--pos-x,0px),var(--pos-y,0px)) perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
@media(max-width:760px){.hero-bg{transform:none!important}.map-section{padding:40px 0}.btn.outline{display:none}section{padding:80px 0}.split,.process-grid,.map-inner{grid-template-columns:1fr;gap:45px}.map-frame{aspect-ratio:4/3}.visual img{height:390px}.visual{padding-right:18px}.stamp{left:-8px}.points{gap:12px}.section-top,.footer-bottom{display:block}.reviews-head{display:block;text-align:center;margin-bottom:30px}.reviews-head .kicker{justify-content:center}.reviews-head h2{font-size:clamp(2.5rem,11vw,3.6rem)}.reviews-head .rating{justify-content:center;margin-top:22px;gap:12px;align-items:center}.rating strong{font-size:2.35rem}.rating .stars{font-size:1rem;letter-spacing:2px}.rating small{font-size:.7rem;line-height:1.25;max-width:160px;text-align:left}.section-top>p{margin-top:18px}.review-grid{grid-template-columns:1fr}.project-tabs{margin-top:26px}.contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0;width:auto;margin-top:30px}.contact-actions .btn:first-child{grid-column:1 / -1}.contact-actions .btn{min-height:56px;margin:0;padding:15px 12px;justify-content:center;font-size:.78rem}.footer-contact{text-align:left;margin-top:25px}.footer-bottom>*{display:block;margin-top:8px}.review-nav{display:flex;justify-content:center;margin-top:24px}.review-next{width:auto;min-width:170px;height:48px;padding:0 24px;border-radius:100px;font-size:.82rem;font-weight:700;letter-spacing:.01em}.review-grid .review{display:none!important}.review-grid .review.mobile-featured,.review-grid.expanded .review{display:block!important}.review{padding:25px 22px;min-height:0;text-align:center;background:rgba(255,255,255,.52);border:1px solid rgba(255,255,255,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 16px 35px rgba(19,42,33,.1)}.review .stars{margin-bottom:4px}.review p{margin:18px 0;font-size:.94rem;line-height:1.55}.review strong{display:block}.review-source{margin-top:24px;font-size:.8rem;text-align:center}}
:focus-visible{outline:2px solid var(--leaf);outline-offset:3px;border-radius:2px}
/* .reveal wird bei .project (Startseiten-Mauerwerk) fuer zwei Dinge
   missbraucht: die Einblend-Animation UND die eigentliche Positionierung im
   Raster (translate(--pos-x,--pos-y), siehe .project-grid .project weiter
   oben). transform:none!important hat bisher beides getroffen - bei
   reduzierter Bewegung fielen alle Projektbilder auf dieselbe Position
   (0,0) zurueck und lagen sichtbar uebereinander statt im Mauerwerk. Die
   Einblend-Bewegung darf wegfallen, die Positionierung nicht. */
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.reveal{opacity:1!important}.reveal:not(.project){transform:none!important}}
@media(prefers-reduced-transparency:reduce){.navlinks{background:var(--header-bg);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Page-specific additions below */

/* Breadcrumbs */
.breadcrumbs {
  background: var(--sand);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.breadcrumbs ol {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}
.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--forest);
}
.breadcrumbs li:not(:last-child)::after {
  content: "↗";
  color: var(--muted);
  margin-left: 4px;
}
.breadcrumbs [aria-current="page"] {
  color: var(--forest);
  font-weight: 600;
}

/* Enhanced image loading */
img {
  max-width: 100%;
  height: auto;
}

.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{max-width:none}
.navlinks{align-items:center}
.navbutton,.theme-toggle{align-self:center}

.back-to-top{
  position:fixed;
  z-index:20;
  right:28px;
  bottom:28px;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:var(--leaf,#a8d96d);
  box-shadow:0 10px 24px rgba(19,42,33,.22);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(14px);
  transition:opacity .32s var(--ease-out-soft),transform .28s var(--ease-out-soft),background .28s var(--ease-out-soft),box-shadow .28s var(--ease-out-soft);
}
.back-to-top.visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.back-to-top:hover{background:#b9e57f;box-shadow:0 14px 30px rgba(19,42,33,.3);transform:translateY(-3px)}
.back-to-top-icon{
  width:20px;
  height:20px;
  display:block;
  fill:none;
  stroke:var(--forest);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

footer{padding:72px 0 28px;background:linear-gradient(135deg,var(--forest-deep) 0%,var(--footer-2) 100%)}
.footer-main{display:grid;grid-template-columns:1.5fr .8fr .9fr 1.1fr;gap:44px;padding-bottom:58px}
.footer-brand img{filter:brightness(1.08)}
.footer-intro p{margin-top:17px}
.footer-column,.footer-contact{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.footer-column h3,.footer-contact h3{margin:4px 0 19px;color:var(--leaf,#a8d96d);font:700 .72rem "DM Sans",sans-serif;letter-spacing:.15em;text-transform:uppercase}
.footer-column a,.footer-contact a,.footer-contact span{color:#c1d0c5;font-size:.84rem;line-height:1.6;margin-bottom:9px;transition:color .28s var(--ease-out-soft),transform .28s var(--ease-out-soft)}
.footer-column a:hover,.footer-contact a:hover{color:var(--leaf,#a8d96d);transform:translateX(3px)}
.footer-cta{display:inline-flex;gap:12px;align-items:center;margin-top:27px;color:var(--leaf,#a8d96d);font-size:.82rem;font-weight:700}
.footer-cta span,.footer-contact-button span{font-size:1.1rem}
.footer-contact-button{margin-top:12px;padding:9px 14px;border:1px solid #ffffff2e;border-radius:100px}
.footer-contact-button:hover{border-color:var(--leaf,#a8d96d)}
.footer-bottom{padding-top:22px;border-top:1px solid #ffffff20}
.footer-bottom span:nth-child(2){display:flex;gap:22px}

.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #ffffff35;
  border-radius:100px;
  width:36px;
  height:36px;
  padding:0;
  background:#ffffff12;
  color:#fff;
  font:700 1.1rem/1 Arial,sans-serif;
  cursor:pointer;
  transition:.28s var(--ease-out-soft);
}
/* Hover nur mit echtem Zeiger - sonst bleibt der Knopf nach dem Antippen
   auf dem Handy im Hover-Zustand haengen (wie beim Menue-Knopf). */
@media(hover:hover) and (pointer:fine){
  .theme-toggle:hover{background:#ffffff25;color:var(--leaf);border-color:#ffffff55}
}
/* Gedrueckt: gleiche knappe Rueckmeldung wie Menue-Knopf und Buttons. */
.theme-toggle:active{transform:scale(.94);transition-duration:.1s}
/* Eingeschaltet traegt der Knopf die Akzentfarbe der Seite - der Zustand
   ist damit auf einen Blick sichtbar und gehoert sichtbar zum Farbschema,
   statt ein neutraler grauer Kreis zu bleiben. aria-pressed setzt das
   Skript ohnehin schon, es braucht also keine zusaetzliche Klasse. */
.theme-toggle[aria-pressed="true"]{
  background:var(--leaf-soft);
  border-color:#a8d96d5c;
  color:var(--leaf);
}
.theme-label{display:none}
/* Offene Kontur statt gefuelltem Zeichen - gleicher Strich wie die uebrigen
   Icons der Seite (Chevron 1.6, Leistungs-Icons 1.7), damit Sonne und Mond
   als Teil derselben Icon-Familie lesen und nicht als Schriftzeichen. */
.theme-toggle svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* Abstand zum Nachbarn rechts (Anrufen-Button bzw. Menue-Knopf). */
.theme-toggle{margin-right:14px}
@media(min-width:1001px){
  /* Am Desktop stehen vier Elemente in der Kopfzeile. space-between verteilt
     sie gleichmaessig, dadurch haengt der Umschalter allein zwischen
     Navigation und Anrufen-Button. Die Navigation bekommt stattdessen
     automatische Seitenabstaende: sie bleibt mittig, und Umschalter und
     Anrufen-Button ruecken als Aktionspaar nach rechts zusammen. */
  .navlinks{margin-inline:auto}
}

/* Die Tokens selbst umhaengen, statt jede Fundstelle einzeln nachzuziehen.
   --muted/--line sind fuer helle Flaechen gedacht; im Dark Mode landete
   dadurch dunkelgrauer Text auf dunklem Grund, ueberall dort, wo eine der 45
   Einzelregeln fehlte (zuletzt bei den Ablauf-Schritten und den Namen unter
   den Bewertungen: 2.97:1 bzw. 2.77:1). So stimmen auch kuenftige Stellen
   automatisch.
   html.dark-mode statt .dark-mode: :root und .dark-mode waeren gleich
   spezifisch, das zusaetzliche html hebt die Spezifitaet der Umhaengung
   sicher ueber jede spaetere :root-Regel. */
html.dark-mode{--muted:var(--d-muted);--line:var(--d-line)}
.dark-mode body{background:var(--d-bg);color:var(--d-text)}
/* Der Hero nutzt ein eigenes, festes Foto statt der Papier-/Sand-Tokens - der
   Umschalter sitzt aber genau hier im Header, direkt ueber diesem Foto. Ohne
   eigene Dark-Mode-Reaktion aendert sich beim Klick im gesamten sichtbaren
   Bereich nichts (Header schwebt ohnehin transparent, Hero blieb bisher exakt
   gleich) - erst nach dem Herunterscrollen wird ueberhaupt sichtbar, dass
   sich etwas getan hat. Ein zweiter fester Farbwert statt eines eigenen
   Verlaufs (der die alte Nahtstelle wieder mitbringen wuerde): das Foto wird
   im Dark Mode spuerbar dunkler, ohne dass sich an Aufbau oder Textkontrast
   etwas aendert. */
.dark-mode .hero-bg{background:linear-gradient(rgba(0,0,0,.63),rgba(0,0,0,.63)),url("images/zaunbau-doppelstabmattenzaun-gartenweg-bielefeld.jpg") center 15%/cover;background:linear-gradient(rgba(0,0,0,.63),rgba(0,0,0,.63)),image-set(url("images/zaunbau-doppelstabmattenzaun-gartenweg-bielefeld.webp") type("image/webp"),url("images/zaunbau-doppelstabmattenzaun-gartenweg-bielefeld.jpg") type("image/jpeg")) center 15%/cover}
.dark-mode .breadcrumbs{background:var(--d-surface);border-color:var(--d-line)}
.dark-mode .breadcrumbs a{color:var(--d-muted)}
.dark-mode .breadcrumbs li:not(:last-child)::after{color:var(--d-muted)}
.dark-mode .breadcrumbs [aria-current="page"]{color:var(--d-text)}
.dark-mode .intro,.dark-mode .projects,.dark-mode .reviews,.dark-mode .areas{background:var(--d-surface)}
.dark-mode .area-pill{background:var(--d-card);border-color:var(--d-line);color:var(--d-text)}
.dark-mode .areas-intro{color:var(--d-muted)}
.dark-mode .intro-copy,.dark-mode .point p,.dark-mode .section-top>p,.dark-mode .process-intro{color:var(--d-muted)}
.dark-mode .process{background:var(--d-surface-2)}
.dark-mode .point,.dark-mode .review,.dark-mode .steps,.dark-mode .step{border-color:var(--d-line)}
.dark-mode .review{background:var(--d-card);color:var(--d-text)}
.dark-mode .review p{color:var(--d-text)}
.dark-mode .review:before{color:var(--d-line-2)}
.dark-mode .tab{border-color:var(--d-line-2);color:var(--soft-on-dark)}
.dark-mode .tab.active,.dark-mode .tab:hover{background:var(--leaf);border-color:var(--leaf);color:var(--forest)}
.dark-mode .review-source{color:var(--leaf)}
.dark-mode .rating strong{color:var(--d-text)}
.dark-mode .rating small{color:var(--d-muted)}
.dark-mode .review-source a:hover{color:var(--leaf)}
.dark-mode .footer-column a,.dark-mode .footer-contact a,.dark-mode .footer-contact span{color:var(--soft-on-dark)}
.dark-mode .back-to-top{box-shadow:0 10px 24px rgba(0,0,0,.4)}

.faq{background:var(--paper)}
.faq-list{max-width:820px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:0}
.faq-item summary{padding:22px 42px 22px 0;position:relative;cursor:pointer;list-style:none;font:700 1.08rem Manrope;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:4px;color:var(--forest);font-size:1.5rem;font-weight:400;transition:transform .28s var(--ease-out-soft)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{max-width:680px;padding:0 0 22px;color:var(--muted);font-size:.94rem}
.dark-mode .faq{background:var(--d-surface)}
.dark-mode .faq-item summary{color:var(--d-text)}
.dark-mode .faq-item summary::after{color:var(--leaf)}

@media(max-width:760px){
  .hero{min-height:100svh}
  .hero-stats{gap:22px}
  .hero-stat strong{font-size:1.6rem}
  .reviews-head{text-align:center}
  .reviews-head .kicker{justify-content:center}
  .reviews-head .rating{justify-content:center;margin-top:22px}
  .review{
    padding:25px 22px;
    text-align:center;
    background:rgba(255,255,255,.52);
    border-color:rgba(255,255,255,.78);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 16px 35px rgba(19,42,33,.1);
  }
  .review p{line-height:1.55}
  .review strong{display:block}
  .review-next{
    display:flex;
    align-items:center;
    justify-content:center;
    width:auto;
    min-width:170px;
    border-radius:100px;
  }
  .review-grid .review{display:none!important}
  .review-grid .review.mobile-featured,
  .review-grid.expanded .review{display:block!important}
  footer{padding:54px 0 24px}
  .footer-main{grid-template-columns:1fr 1fr;gap:34px 22px;padding-bottom:38px}
  .footer-intro,.footer-contact{grid-column:1 / -1}
  .footer-column h3,.footer-contact h3{margin-bottom:14px}
  .footer-bottom span:nth-child(2){gap:16px}
  .footer-bottom span:last-child{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:12px}
  .back-to-top{right:18px;bottom:18px;width:42px;height:42px}
}

/* Project lightbox */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(8,17,13,.95);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .38s var(--ease-out-soft),visibility .38s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox-figure{position:relative;margin:0;max-width:min(90vw,1100px);display:flex;flex-direction:column;align-items:center;transform:scale(.96);transition:transform .38s var(--ease-out-soft)}
.lightbox.open .lightbox-figure{transform:scale(1)}
.lightbox-img{display:block;max-width:100%;max-height:74vh;width:auto;height:auto;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5);transition:opacity .32s var(--ease-out-soft)}
.lightbox-caption{margin-top:18px;text-align:center;color:#fff}
.lightbox-caption-label{display:block;color:var(--leaf);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.lightbox-caption-title{font:700 1.1rem Manrope,sans-serif}
.lightbox-counter{position:absolute;top:26px;left:50%;transform:translateX(-50%);color:#ffffff99;font-size:.8rem;letter-spacing:.08em}
.lightbox-close,.lightbox-nav{position:absolute;z-index:2;border:1px solid #ffffff35;background:#ffffff12;color:#fff;cursor:pointer;transition:.28s var(--ease-out-soft);display:flex;align-items:center;justify-content:center}
.lightbox-close:hover,.lightbox-nav:hover{background:var(--leaf);color:var(--forest);border-color:var(--leaf)}
.lightbox-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;font-size:1.15rem}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;font-size:1.7rem}
.lightbox-nav:hover{transform:translateY(-50%) scale(1.06)}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
@media(max-width:700px){
  .lightbox-nav{width:42px;height:42px;font-size:1.3rem}
  .lightbox-prev{left:8px}
  .lightbox-next{right:8px}
  .lightbox-close{top:12px;right:12px;width:38px;height:38px}
  .lightbox-counter{top:14px}
  .lightbox-caption-title{font-size:1rem}
}


/* ---------------------------------------------------------------------------
   Rechtsseiten (Impressum, Datenschutz)
   Diese beiden Seiten haben ein eigenes Layout (.label/.layout/.content).
   Frueher lag das als kopiertes Inline-CSS in beiden Dateien - jede Aenderung
   am Design musste an drei Stellen gepflegt werden. Hier gebuendelt und auf
   .page-legal begrenzt, damit es die uebrigen Seiten nicht beeinflusst.
   --------------------------------------------------------------------------- */
/* Ebenfalls ohne backdrop-filter - auf Impressum/Datenschutz liegt das mobile
   Menue genauso im Header und wuerde sonst dort seinen Glaseffekt verlieren
   (gleiche Ursache wie oben bei header.scrolled). Bei 96% Deckung war der
   Blur hier ohnehin nicht zu sehen. */
.page-legal header{position:sticky;z-index:5;background:rgba(19,42,33,.96)}
.page-legal main{padding:100px 0 120px;line-height:1.65}
.page-legal .label{display:flex;align-items:center;gap:10px;color:#668f54;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.page-legal .label:before{content:"";width:34px;height:2px;background:#668f54}
.page-legal h1{font-size:clamp(3.5rem,8vw,7rem);line-height:1.02;margin:24px 0 55px;max-width:none}
.page-legal h1 em{font-style:normal;color:var(--leaf-ink)}
.page-legal .layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:start}
.page-legal .intro{background:none;font-size:1.15rem;color:var(--muted);max-width:330px}
.page-legal .content{background:var(--paper);padding:42px 48px;border:1px solid var(--line);border-radius:5px;box-shadow:0 18px 45px #17231e0d}
.page-legal .content h2{font-size:1.5rem;margin:0 0 13px}
.page-legal .content section{padding:0 0 31px;margin-bottom:31px;border-bottom:1px solid var(--line)}
.page-legal .content section:last-of-type{border:0;margin-bottom:0;padding-bottom:0}
.page-legal .content p,.page-legal .content li{color:var(--muted);margin:0}
.page-legal .content ul{padding-left:20px;margin:0}
.page-legal .content strong{color:var(--ink)}
.page-legal .content a{color:var(--leaf-ink);text-decoration:underline;text-underline-offset:3px}
.page-legal .content a.back{display:inline-flex;margin-top:36px;background:var(--forest);color:#fff;text-decoration:none;padding:14px 20px;border-radius:100px;font-weight:700;font-size:.86rem}
.page-legal .content a.back:hover{background:var(--forest-2)}
.dark-mode .page-legal .label{color:var(--leaf)}
.dark-mode .page-legal .label:before{background:var(--leaf)}
.dark-mode .page-legal h1 em{color:var(--leaf)}
.dark-mode .page-legal .intro{color:var(--d-muted)}
.dark-mode .page-legal .content{background:var(--d-surface);border-color:var(--d-line);box-shadow:none}
.dark-mode .page-legal .content h2{color:var(--d-text)}
.dark-mode .page-legal .content p,.dark-mode .page-legal .content li{color:var(--d-muted)}
.dark-mode .page-legal .content strong{color:var(--d-text)}
.dark-mode .page-legal .content a{color:var(--leaf)}
.dark-mode .page-legal .content a.back{background:var(--leaf);color:var(--forest)}
.dark-mode .page-legal .content a.back:hover{background:var(--leaf)}
@media(max-width:760px){
  .page-legal main{padding:70px 0 80px}
  .page-legal h1{margin-bottom:40px}
  .page-legal .layout{display:block}
  .page-legal .intro{margin-bottom:35px}
  .page-legal .content{padding:28px 24px}
}


/* ===========================================================================
   FLUIDE SKALIERUNG
   Vorher gab es genau einen Umbruch bei 760px: darunter Handy-Layout, darueber
   volles Desktop-Layout. Zwischen 761px und ~1000px (iPad hochkant, kleine
   Notebooks) war damit nichts abgedeckt - die Navigation braucht dort allein
   schon rund 870px und lief aus dem Container heraus.

   Diese Sektion loest das in drei Schritten:
   1. Tokens: Abstaende und Nav-Hoehe als clamp()-Werte an einer Stelle.
   2. Feste px-Groessen (Schrift, Bildhoehen) werden fluide.
   3. Ein eigener Tablet-Bereich 761-1000px fuer die mehrspaltigen Raster.

   Wichtig fuer spaetere Aenderungen: dieser Block steht bewusst am Dateiende
   und gewinnt daher bei gleicher Spezifitaet gegen alles weiter oben. Regeln,
   die nur Tablets betreffen duerfen, sind als Bereich (min-width UND
   max-width) geschrieben, damit sie das Handy-Layout nicht ueberschreiben.
   =========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* Gesamter Seitenrand links+rechts: 32px am Handy, 56px ab ~1120px */
  --gutter:clamp(32px,5vw,56px);
  /* Vertikaler Abstand der Sektionen. Reine vw-Formel bemass das nur an der
     Breite - auf einem breiten, aber flachen Laptop-Fenster (z.B. 1366x768)
     blieb der Wert trotzdem nahe am 120px-Maximum, obwohl kaum Hoehe da war:
     bei "Was wir tun" waren dadurch nur 3 von 6 Zeilen ohne Scrollen sichtbar.
     min(vw,vh) nimmt jetzt den knapperen der beiden Werte - ein grosser
     Monitor (auch quadratisch/hochkant) bleibt bei 120px, ein flaches Fenster
     bekommt automatisch weniger. */
  --section-y:clamp(70px,min(9vw,12vh),120px);
  --section-y-sm:clamp(58px,7.5vw,90px);
  /* Spaltenabstand in den zweispaltigen Layouts */
  --split-gap:clamp(40px,6vw,100px);
  /* Akzentgruen fuer helle Flaechen. --leaf ist auf dunklem Grund stark
     (9.3:1), auf hellem aber praktisch unlesbar: 1.6:1 auf --paper und
     1.4:1 auf dem Ablauf-Hintergrund. Gleicher Farbton (87 Grad), nur
     dunkler - erreicht auf allen hellen Flaechen mindestens 4.9:1. */
  --leaf-ink:#4b6f20;
  /* Hoehe der Kopfzeile - steuert zugleich Sprungmarken und Menue-Position.
     Der Mittelwert ist so gelegt, dass die Hoehe zwischen 375px (66px) und
     1200px (82px) gleichmaessig mitwaechst statt lange konstant zu bleiben. */
  --nav-h:clamp(66px,58.7px + 1.94vw,82px);
}
/* Auf dem Handy darf die Kopfzeile schlanker sein als der 66px-Sockelwert
   der fluiden Formel oben - 15% duenner (rund 56px). scroll-padding-top,
   die Menue-Position und -Hoehe haengen alle an --nav-h und passen sich
   automatisch mit an. */
@media(max-width:760px){:root{--nav-h:56px}}

html{scroll-padding-top:calc(var(--nav-h) + 10px)}
.container{width:min(1500px,calc(100% - var(--gutter)))}
section{padding:var(--section-y) 0}
header nav{height:var(--nav-h)}
.brand img{width:clamp(112px,12vw,148px)}

/* --- 2. Fluide Typografie ------------------------------------------------ */
/* Die Minima lagen bisher so hoch, dass auf 320-375px breiten Geraeten die
   Ueberschriften breiter wurden als der Container. */
/* Die Hero-Ueberschrift richtete sich allein nach der Fensterbreite. Ein
   Laptop ist aber breit und flach (z.B. 1349x640) und bekam damit die
   Schriftgroesse eines 1440p-Desktops - rund 100px, die den halben
   Bildschirm fuellten. min(vw,vh) nimmt jetzt den kleineren Wert, die
   Ueberschrift folgt also auch der Fensterhoehe.

   Zweitens war max-width:850px zu schmal: "Pflaster, Terrasse & Zaun."
   ist bei 94px rund 990px breit. Die Zeile brach deshalb mitten im Satz
   um, statt dem <br> im Markup zu folgen - aus zwei gewollten Zeilen
   wurden vier. 1100px deckt die Zeile bis zur Maximalgroesse ab. */
h1{
  font-size:clamp(2.4rem,min(6.8vw,11vh),6.4rem);
  max-width:min(100%,1100px);
}
/* Der eigentliche Engpass fuer die Zeilenlaenge war nicht die h1, sondern
   ihr Elternelement: .hero-content war auf 780px begrenzt. Die Ueberschrift
   konnte deshalb gar nicht breiter werden, egal welche max-width sie selbst
   bekam. Der Fliesstext behaelt seine eigene Begrenzung von 510px. */
.hero-content{max-width:min(100%,1120px)}

/* Untergrenze der Hero-Hoehe war 820px und lag damit ueber der sichtbaren
   Hoehe flacher Laptop-Fenster. Dazu kamen ueber section{padding:120px 0}
   noch einmal 240px obendrauf - zusammen war der Bereich auf einem
   1349x640-Laptop rund 1000px hoch und nie am Stueck sichtbar. Die Hoehe
   regelt jetzt allein min-height, das Innenabstand-Paar faellt klein aus. */
/* Der Text sitzt jetzt unten im Bild statt zentriert: .hero .container ist
   dafuer absolut positioniert (bottom:0) statt per Flexbox ausgerichtet -
   align-items/justify-content:flex-end positionierten den Inhalt in diesem
   Setup zuverlaessig wie center statt wie end (Browser-Eigenheit mit
   min-height:max()/100svh als Flex-Container-Hoehe). Die Luft zum unteren
   Rand kommt jetzt von .hero-content selbst (padding-bottom), nicht mehr
   von .hero - ein absolut positioniertes Kind ignoriert das Padding seines
   Containers ohnehin. */
.hero{min-height:max(620px,100svh)}
.intro h2,.section-top h2,.reviews-head h2{font-size:clamp(2rem,4.6vw,5rem)}
.process h2{font-size:clamp(2rem,4.6vw,4.7rem)}
.map-section h2{font-size:clamp(1.85rem,3.6vw,3.1rem)}
.page-legal h1{font-size:clamp(2.4rem,7vw,7rem)}
.hero-text{font-size:clamp(.98rem,2.2vw,1.1rem)}
.intro-copy{font-size:clamp(1.02rem,2.2vw,1.2rem)}
.areas-intro{font-size:clamp(.98rem,2.1vw,1.1rem)}
.hero-stat strong{font-size:clamp(1.6rem,3.4vw,2.1rem)}
.rating strong{font-size:clamp(2.3rem,5vw,3.7rem)}
.page-legal .intro{font-size:clamp(1rem,2.1vw,1.15rem)}

/* --- 3. Fluide Bildhoehen ------------------------------------------------ */
/* Feste Hoehen wie 510px liessen die Bilder auf schmalen Screens fast
   quadratisch bis hochkant wirken, weil nur die Breite mitging. */
.visual img{height:clamp(300px,38vw,510px)}
.stamp{width:clamp(92px,10vw,125px);height:clamp(92px,10vw,125px);font-size:clamp(.68rem,.9vw,.8rem)}
.stamp span{font-size:clamp(1.2rem,1.9vw,1.6rem)}
/* Feste/fluide Hoehen fuer .project entfallen: die Startseiten-Galerie
   ist jetzt ein Mauerwerk-Raster (.project-grid .project{height:auto}
   oben), die Bildhoehe ergibt sich aus dem jeweiligen Seitenverhaeltnis. */

/* --- 4. Fluide Abstaende ------------------------------------------------- */
.split{gap:var(--split-gap)}
.process-grid{gap:clamp(40px,5.5vw,90px)}
.map-inner{gap:clamp(36px,4.5vw,70px)}
.page-legal .layout{gap:clamp(40px,5.5vw,90px)}
.footer-main{gap:clamp(28px,3.2vw,44px)}
.navlinks{gap:clamp(18px,2.2vw,31px)}
/* Ergaenzend zu --section-y oben: der Abstand zwischen Sektions-Ueberschrift
   und Inhalt sowie die Zeilenhoehe der "Was wir tun"-Liste waren bisher fest
   und trugen auf einem flachen Laptop-Fenster zusaetzlich zum "nur 3 von 6
   Zeilen sichtbar"-Problem bei. */
.section-top{margin-bottom:clamp(24px,4.5vh,52px)}
@media(hover:hover) and (pointer:fine) and (min-width:901px){
  .service-row{padding:clamp(11px,1.8vh,22px) 4px}
}

/* --- 5. Navigation: Umbruch auf 1000px ----------------------------------- */
/* Bisher klappte das Menue erst bei 760px zusammen. Logo (148px) + sechs
   Links + Theme-Umschalter + Anrufen-Button brauchen aber rund 870px, das
   Menue lief auf Tablets sichtbar aus der Zeile. Alle Regeln fuer den
   eingeklappten Zustand stehen jetzt nur noch hier. */
@media(max-width:1000px){
  .navbutton{display:none}
  .menu{display:block}
  /* Das Panel liegt dauerhaft im Layout (absolut, also ohne Einfluss auf die
     Kopfzeile) und wird nur sichtbar geschaltet. Mit display:none konnte es
     nur beim Oeffnen animieren und verschwand beim Schliessen schlagartig -
     jetzt laeuft beide Richtungen dieselbe Bewegung, nur rueckwaerts.
     Transition statt @keyframes, damit ein schnelles Auf-Zu-Auf aus der
     aktuellen Position weiterlaeuft statt neu zu starten. */
  .navlinks{
    display:flex;
    position:absolute;
    top:var(--nav-h);
    right:0;
    left:auto;
    width:min(320px,calc(100vw - 18px));
    max-height:calc(100svh - var(--nav-h) - 20px);
    overflow-y:auto;
    overscroll-behavior:contain;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:18px 24px 24px;
    background:linear-gradient(145deg,var(--menu-1),var(--menu-2));
    backdrop-filter:blur(30px) saturate(180%) brightness(.78);
    -webkit-backdrop-filter:blur(30px) saturate(180%) brightness(.78);
    border:1px solid rgba(255,255,255,.14);
    border-top-color:rgba(255,255,255,.4);
    border-right:0;
    border-radius:24px 0 0 24px;
    box-shadow:0 24px 48px #00000042,inset 0 1px 0 rgba(255,255,255,.06);
    /* Skaliert aus der Ecke, in der der Menue-Knopf sitzt, statt aus der Mitte */
    transform-origin:top right;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px) scale(.97);
    pointer-events:none;
    /* Schliessen faellt kuerzer aus als Oeffnen: das System antwortet
       schneller, als der Nutzer sich entscheidet. */
    transition:opacity .22s var(--ease-out-soft),transform .22s var(--ease-out-soft),visibility 0s linear .22s;
  }
  .navlinks.open{
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
    transition:opacity .34s var(--ease-out-soft),transform .34s var(--ease-out-soft),visibility 0s;
  }
  /* Bewusst an .navlinks statt an .navlinks.open gehaengt: beim Schliessen
     faellt .open sofort weg, waehrend das Panel noch sichtbar ausblendet -
     an .open gebunden wuerden die Eintraege mitten in der Bewegung auf das
     Desktop-Styling zurueckspringen. */
  .navlinks a{
    display:flex;
    align-items:center;
    min-height:52px;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.13);
    color:#f4faf5;
    font-size:1.08rem;
    line-height:1.2;
    font-weight:700;
    letter-spacing:.015em;
    text-align:left;
    text-shadow:0 1px 3px rgba(0,0,0,.3);
    opacity:1;
    /* translate statt padding-left: padding loest bei jedem Frame ein neues
       Layout aus, transform laeuft auf der GPU. */
    transition:color .28s var(--ease-out-soft),transform .28s var(--ease-out-soft);
  }
  .navlinks a:hover{transform:translateX(5px);color:var(--leaf);opacity:1}
  /* Kein :last-of-type mehr: "Galerie" ist zwar der letzte <a>, aber nicht die
     letzte Zeile - danach kommt noch "Mehr" (ein <button> im .nav-dropdown).
     Die Regel loeschte damit ausgerechnet die Trennlinie zwischen Galerie und
     Mehr. Die Linien laufen jetzt durch bis zur letzten Zeile. */
  /* verhindert, dass Flexbox die Eintraege zusammenstaucht, wenn der
     Menue-Inhalt hoeher als der scrollbare Bereich ist */
  .navlinks>*{flex-shrink:0}
  .nav-dropdown{width:100%}
  .nav-dropdown-trigger{
    width:100%;
    justify-content:space-between;
    min-height:52px;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.13);
    color:#f4faf5;
    font-size:1.08rem;
    font-weight:700;
    letter-spacing:.015em;
    text-shadow:0 1px 3px rgba(0,0,0,.3);
    opacity:1;
  }
  /* "Mehr" ist seit dem Umzug des Dark-Mode-Schalters die letzte Zeile. Im
     zugeklappten Zustand liefe die Trennlinie darunter ins Leere; aufgeklappt
     wird sie wieder gebraucht, dort trennt sie den Schalter vom Untermenue. */
  .navlinks>:last-child .nav-dropdown-trigger[aria-expanded="false"]{border-bottom:0}
  .nav-dropdown-panel{
    position:static;
    transform:none;
    display:flex;
    flex-direction:column;
    background:none;
    border:0;
    box-shadow:none;
    padding:14px 0 6px 14px;
    gap:18px;
  }
  .nav-dropdown-panel[hidden]{display:none}
  .nav-dropdown-col-more{border-left:0;padding-left:0}
  .nav-dropdown-col a{padding:8px 0;text-shadow:0 1px 3px rgba(0,0,0,.3)}
  /* Der Umschalter sitzt jetzt in der Kopfzeile, nicht mehr im Menue-Panel.
     Kopfzeile ist space-between; auf dem Handy sind Menue-Panel (absolut) und
     Anrufen-Button (ausgeblendet) aus dem Fluss, ohne margin-left:auto wuerde
     der Umschalter also in der Mitte der Kopfzeile landen statt direkt links
     neben dem Menue-Knopf. */
  .theme-toggle{margin-left:auto;margin-right:14px}
}

/* --- 6. Tablet-Bereich 761-1000px ---------------------------------------- */
/* Bewusst als Bereich geschrieben: diese Regeln duerfen das Handy-Layout
   weiter oben nicht anfassen. */
@media(min-width:761px) and (max-width:1000px){
  .review-grid{grid-template-columns:repeat(2,1fr)}
  .footer-main{grid-template-columns:1fr 1fr}
  .footer-intro{grid-column:1 / -1}
  /* Spaltenzahl (3 -> 2) wird von der Mauerwerk-Funktion in script.js
     anhand der Fensterbreite entschieden, hier ist nichts mehr noetig. */
  .section-top{align-items:flex-start}
  .section-top>p{max-width:none}
}
@media(min-width:761px) and (max-width:900px){
  /* Zwei Spalten mit 100px Abstand lassen hier je Spalte zu wenig uebrig */
  .split,.process-grid,.map-inner,.page-legal .layout{grid-template-columns:1fr}
  .page-legal .intro{max-width:none}
  .visual{padding-right:22px}
}

/* --- 7. Lange Komposita ------------------------------------------------- */
/* Deutsche Zusammensetzungen wie "Sichtschutzelemente" sind unteilbar rund
   170px breit. Das Raster .points blieb auch auf dem Handy zweispaltig und
   wurde dadurch breiter als der Bildschirm. Unter 440px eine Spalte, dazu
   Silbentrennung als Netz - <html lang="de"> ist gesetzt, also greift sie. */
.point strong,.point p,.service-item h3,.faq-item summary{
  overflow-wrap:break-word;
  hyphens:auto;
}
@media(max-width:440px){
  .points{grid-template-columns:1fr}
}

/* --- 8. Projektraster auf dem Handy ------------------------------------- */
/* Spaltenzahl und Abstand kommen von der Mauerwerk-Funktion in script.js,
   hier nur die kleinere Schrift fuer die schmaleren Bildunterschriften. */
@media(max-width:760px){
  .project-grid .project-info{left:11px;right:11px;bottom:9px}
  .project-grid .project-info small{font-size:.56rem;letter-spacing:.06em}
  .project-grid .project-info h3{
    font-size:.78rem;
    margin-top:3px;
    line-height:1.2;
    letter-spacing:-.02em;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* --- 9. Akzentfarbe lesbar machen --------------------------------------- */
/* Die Kicker-Zeile ("WILLKOMMEN BEI BEQI BAU" und so weiter) stand an 68
   Stellen in hellem Blattgruen auf nahezu weissem Grund - 1.4 bis 1.6:1,
   also faktisch unsichtbar. Auf dunklen Sektionen und im Dark Mode bleibt
   das helle --leaf, dort stimmt der Kontrast mit 9.3:1. */
.kicker{color:var(--leaf-ink)}
.kicker:before{background:var(--leaf-ink)}
.hero .kicker,.services .kicker,.page-hero .kicker{color:var(--leaf)}
.hero .kicker:before,.services .kicker:before,.page-hero .kicker:before{background:var(--leaf)}
.dark-mode .kicker{color:var(--leaf)}
.dark-mode .kicker:before{background:var(--leaf)}

/* Schrittnummern im Ablauf der Startseite: 3.5:1 auf hellem, 2.5:1 auf
   dunklem Grund - beides zu wenig fuer normal grossen Text. */
.steps .step-no{color:var(--leaf-ink)}
.dark-mode .steps .step-no{color:var(--leaf)}

/* Die Rechtsseiten hatten dafuer ein eigenes Gruen mit 3.7:1. Jetzt derselbe
   Token wie ueberall. Das grosse <em> in der Ueberschrift bleibt heller:
   ab dieser Schriftgroesse genuegen 3:1, und der Akzent soll dort wirken. */
.page-legal .label{color:var(--leaf-ink)}
.page-legal .label:before{background:var(--leaf-ink)}

/* Zwei Regeln waren fuer die dunkle Leistungs-Sektion gedacht, stehen im
   Stylesheet aber flach und damit global. Auf den Unterseiten faengt
   service-pages.css das ab, die Startseite laedt diese Datei jedoch nicht -
   dort wirkten sie ungebremst auf hellem Grund.
   .section-top>p war #b9c9be auf nahezu weiss: 1.7:1. */
.section-top>p{color:var(--muted)}
.services .section-top>p{color:var(--soft-on-dark)}
.dark-mode .section-top>p{color:var(--d-muted)}
/* FAQ-Antworten im Dark Mode standen in --muted auf dunklem Grund: 2.9:1. */
.dark-mode .faq-item p{color:var(--d-muted)}

/* --- 10. Feinschliff kleine Handys --------------------------------------- */
/* Werte, die auf dem Handy bewusst groesser/mittig sind als die fluide
   Grundskala oben - sie muessen nach dem Block stehen, um zu greifen. */
@media(max-width:760px){
  .reviews-head h2{font-size:clamp(1.9rem,9vw,3.6rem)}
  .rating strong{font-size:clamp(1.9rem,8vw,2.35rem)}
  .hero-stat strong{font-size:clamp(1.45rem,6vw,1.6rem)}
  .visual img{height:clamp(280px,62vw,390px)}
}
@media(max-width:380px){
  /* iPhone SE und aehnlich schmale Geraete */
  .btn{padding:14px 18px;font-size:.82rem}
  .contact-actions .btn{font-size:.74rem;padding:15px 8px}
  .kicker{font-size:.66rem;letter-spacing:.14em}
  .kicker:before{width:22px}
  .stamp{left:-4px}
}


/* ===========================================================================
   FARB-TOKENS
   Alle Farben der Seite laufen ueber diese Tokens auf :root.
   =========================================================================== */

:root{--forest:#132a21;--forest-2:#1c3b2d;--forest-deep:#10271e;--footer-2:#18392b;--leaf:#a8d96d;--leaf-ink:#4b6f20;--leaf-soft:rgba(168,217,109,.18);--sand:#f4f1e9;--paper:#fffdf8;--mint:#e6eddf;--mint-line:#c4d0c0;--ink:#17231e;--muted:#5e6a62;--line:#dfe5dc;--soft-on-dark:#b9c9be;--veil-1:#14161aed;--veil-2:#14161aa8;--header-bg:#132a21ed;--menu-1:#1c3b2da3;--menu-2:#10271e7a;--d-bg:#0c100f;--d-surface:#121716;--d-surface-2:#181f1d;--d-card:#1d2523;--d-line:#242d2a;--d-line-2:#303b37;--d-text:#e8edea;--d-muted:#9aa8a2}

/* ===========================================================================
   Vorher/Nachher-Regler
   Zwei Bilder liegen deckungsgleich uebereinander; das obere (Vorher) wird per
   clip-path auf den Reglerstand zugeschnitten und gibt so von rechts den Blick
   auf das darunterliegende Nachher-Bild frei. Kein Wrapper mit eigener Breite
   noetig, dadurch bleiben beide Bilder immer exakt gleich groß und
   object-fit:cover verhaelt sich fuer beide identisch. --pos wird ausschliesslich
   per JS gesetzt (script.js), hier steht nur der Startwert fuer den Fall, dass
   JavaScript fehlt: dann zeigt die Flaeche einfach den Nachher-Zustand ganz an,
   das Vorher-Bild bleibt als Ueberlagerung links sichtbar sobald man den (dann
   inaktiven) Regler ignoriert - kein leerer/kaputter Zustand ohne Skript. */
.compare-section{background:var(--paper)}
.dark-mode .compare-section{background:var(--d-surface)}
.compare-section .section-top>p{max-width:480px}
.compare-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3.5vw,52px);max-width:1040px;margin:0 auto}
.compare{display:block}
/* Grosser Radius plus weicher, tiefer Schatten statt der scharfen 4px-Kante
   der uebrigen Galerie: das Vergleichsbild soll wie eine freischwebende Karte
   wirken, nicht wie eine weitere Kachel im Raster. Der Schatten wird beim
   Hover minimal groesser und die Karte hebt sich leicht an - ein kleiner
   Hinweis, dass hier etwas Interaktives wartet, noch bevor man den Griff
   entdeckt. */
.compare-frame{position:relative;overflow:hidden;border-radius:clamp(16px,2vw,26px);aspect-ratio:var(--ratio,4/3);
  touch-action:none;-webkit-user-select:none;user-select:none;
  box-shadow:0 30px 60px -24px #17231e59,0 2px 8px #17231e14;
  transition:box-shadow .45s var(--ease-out-soft),transform .45s var(--ease-out-soft)}
.compare-frame:hover{transform:translateY(-3px);box-shadow:0 40px 70px -22px #17231e66,0 2px 8px #17231e1f}
.compare-frame picture{display:contents}
.compare-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  -webkit-user-drag:none;pointer-events:none}
/* Das Vorher-Bild liegt OBEN und wird von rechts abgeschnitten, das
   Nachher-Bild liegt unveraendert darunter. Dadurch zeigt die linke Seite
   immer "Vorher" und die rechte "Nachher" - die Leserichtung stimmt mit der
   Beschriftung ueberein, unabhaengig von der Zieh-Logik in script.js. */
.compare-before{z-index:2;clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.compare-after{z-index:1}
/* Glas-Etiketten statt flacher Flaeche: backdrop-filter blendet die Fotofarben
   dezent durch, die dunkle Grundflaeche darunter haelt den Kontrast fuer den
   weissen Text auch dort sicher, wo backdrop-filter fehlt (aeltere Browser). */
.compare-tag{position:absolute;top:16px;z-index:3;color:#fff;font:700 .66rem "DM Sans";
  text-transform:uppercase;letter-spacing:.09em;background:#17231e66;
  backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);
  border:1px solid #ffffff33;border-radius:100px;padding:8px 15px;pointer-events:none}
.compare-tag-before{left:16px}
.compare-tag-after{right:16px}
/* Der Regler selbst reagiert auf Klick/Ziehen ueber der GESAMTEN Flaeche
   (siehe script.js) - Zeiger ueberall im Bild aendert den Stand, nicht nur
   auf dem schmalen Griff. Der Griff markiert nur, wo der Stand gerade ist. */
.compare-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);transform:translateX(-50%);
  z-index:4;display:flex;align-items:center;justify-content:center;cursor:ew-resize}
/* Weiche Linie statt hartem Strich: oben/unten zu transparent ausgeblendet,
   dazu ein Schlagschatten als Glow, das wirkt leichter auf hellen wie dunklen
   Fotostellen gleichermassen. */
.compare-handle-line{position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);
  background:linear-gradient(#fff0,#fff 18%,#fff 82%,#fff0);filter:drop-shadow(0 0 5px #17231e59);
  pointer-events:none}
.compare-handle-btn{position:relative;width:46px;height:46px;border-radius:50%;background:#ffffffe6;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--forest);display:grid;place-items:center;
  box-shadow:0 12px 26px #17231e40,inset 0 0 0 1px #ffffff80;
  transition:transform .28s var(--ease-out-soft)}
.compare-handle-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.compare-frame:hover .compare-handle-btn,.compare.is-dragging .compare-handle-btn{transform:scale(1.1)}
/* Dezenter Puls-Ring um den Griff, bis zum ersten Ziehen oder Tippen einer
   Pfeiltaste: zeigt beilaeufig "hier laesst sich etwas verschieben", ohne
   Text oder Pfeil-Overlay. script.js setzt .is-touched bei der ersten
   Interaktion, danach bleibt der Griff ruhig. Die globale
   prefers-reduced-motion-Regel weiter oben deckt das Abschalten der Animation
   fuer Nutzer mit reduzierter Bewegung bereits ab. */
.compare-handle-btn:before{content:"";position:absolute;inset:-8px;border-radius:50%;
  border:1px solid var(--leaf);opacity:0;animation:comparePulse 2.6s ease-out infinite}
.compare.is-touched .compare-handle-btn:before{animation:none;opacity:0}
@keyframes comparePulse{0%{opacity:.55;transform:scale(.78)}70%{opacity:0;transform:scale(1.18)}100%{opacity:0;transform:scale(1.18)}}
.compare figcaption{margin-top:18px}
.compare figcaption small{display:block;color:var(--leaf-ink);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em}
.dark-mode .compare figcaption small{color:var(--leaf)}
.compare figcaption h3{font-size:1.15rem;margin-top:5px;letter-spacing:-.04em}
@media(max-width:1000px){.compare-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto;gap:40px}}
/* Ab Desktop-Breite darf die Karte breiter als hoch werden - auf dem Handy
   bleibt es beim quadratischen Format von oben (--ratio auf .compare-frame),
   das reicht dort fuer beide Fotos gleichermassen gut. Die feste Zahl hier
   ueberschreibt --ratio bewusst fuer alle Karten einheitlich, damit die zwei
   Vergleiche nebeneinander gleich hoch bleiben. */
@media(min-width:1001px){.compare-frame{aspect-ratio:5/3}}
/* Tastatur-Fokus auf dem Griff: die runde Flaeche ist der sinnvolle Fokusring,
   nicht der 0px breite Griff-Container darunter. */
.compare-handle:focus-visible{outline:none}
.compare-handle:focus-visible .compare-handle-btn{outline:2px solid var(--leaf);outline-offset:3px}