/*!
 * animations.css – Grosser Allround GmbH
 * Ruhige, seriöse Bewegung. Versteckt wird nur, wenn animations.js die Klasse .js-anim am <html> gesetzt hat.
 * Bei prefers-reduced-motion setzt animations.js diese Klasse nicht: dann gibt es keine Bewegung.
 */
:root{--ease-out:cubic-bezier(.2,.7,.2,1);--ease-soft:cubic-bezier(.25,.6,.3,1)}

/* ---------- Scroll-Reveal ---------- */
/* Liste muss mit CFG.reveal in animations.js übereinstimmen */
.js-anim :is(.pillar,.about > div:first-child > *,.head > div,.head > p,.svc,.tabs,.proj-intro,.gallery > button,
  .suppliers > div,.partner,.cta-band .wrap > *,.contact > div > *,.contact > form,.prose > div:first-child,.prose > div:last-child > *,
  .items > .item,.steps > .step,.pics > figure,.faq > details,section > .wrap > .eyebrow,.more > a,
  .article > *,.rg-box,.rg-grid > .item,section > .wrap > .rg-note):not(.rv-in):not(.rv-done){
  opacity:0;transform:translate3d(0,22px,0)
}
.js-anim .rv-in{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease-soft) var(--rv-d,0s),transform .9s var(--ease-out) var(--rv-d,0s)
}
/* Bilder und Projektkacheln: zusätzlich minimal skaliert */
.js-anim :is(.gallery > button,.pics > figure):not(.rv-in):not(.rv-done){transform:translate3d(0,18px,0) scale(.985)}
/* Schmale Elemente nur weich einblenden */
.js-anim :is(.more > a,section > .wrap > .eyebrow,.tabs):not(.rv-in):not(.rv-done){transform:translate3d(0,10px,0)}

/* ---------- Hero ---------- */
.js-anim :is(.hero,.svc-hero) h1:not(.is-split):not(.split-done){opacity:0}
.js-anim .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .03em .16em;margin:-.1em -.03em -.16em}
.js-anim .wi{display:inline-block;transform:translate3d(0,112%,0);
  transition:transform 1s var(--ease-out);transition-delay:calc(var(--d0,0s) + var(--wi,0) * 55ms)}
.js-anim.hero-go :is(.hero,.svc-hero) h1 .wi{transform:none}
/* Verlaufstext im <em> pro Wort weiterführen */
.js-anim .hero h1 em.has-w{background:none;color:inherit}
.js-anim .hero h1 em.has-w .wi{background:linear-gradient(90deg,#FF6A55,#FF3B3B);-webkit-background-clip:text;background-clip:text;color:transparent}

.js-anim :is(.hero .wrap > p,.hero .wrap > div,.svc-hero .wrap > p,.svc-hero .wrap > div){opacity:0;transform:translate3d(0,16px,0)}
.js-anim .hero .dots{opacity:0}
.js-anim.hero-go :is(.hero .wrap > p,.hero .wrap > div,.svc-hero .wrap > p,.svc-hero .wrap > div,.hero .dots){
  opacity:1;transform:none;
  transition:opacity .9s var(--ease-soft) var(--hd,0s),transform 1s var(--ease-out) var(--hd,0s)
}
.js-anim.hero-go .hero .dots{transition-duration:1.8s}

/* Ken Burns + Platz für Parallax (Bild bleibt immer leicht vergrößert, damit keine Kante sichtbar wird) */
.js-anim :is(.hero,.svc-hero) .bgimg{scale:1.1;animation:ga-kenburns 16s var(--ease-soft) both;will-change:transform}
@keyframes ga-kenburns{from{scale:1.2}to{scale:1.1}}

/* ---------- Kopfzeile ---------- */
.nav{transition:box-shadow .35s ease,background-color .35s ease}
.nav.is-scrolled{box-shadow:0 12px 28px -20px rgba(23,17,15,.45);background:color-mix(in srgb,var(--bg) 97%,transparent)}
.nav .brand .logo{transform-origin:left center;transition:transform .4s var(--ease-out)}
.nav.is-scrolled .brand .logo{transform:scale(.88)}

/* Fortschrittsbalken (wird von animations.js erzeugt, position:fixed = kein Layout-Einfluss) */
.scroll-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,#FF4B3A,#D3232D 55%,#9E1027);transform:scaleX(0);transform-origin:0 50%}

/* ---------- Hover ---------- */
.btn{transition:transform .25s var(--ease-out),box-shadow .25s ease,color .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(211,35,45,.75)}
.btn.line:hover,.hero .btn:hover,.cta-band .btn:hover{box-shadow:0 14px 26px -14px rgba(0,0,0,.45)}
.btn svg{transition:transform .25s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}

.svc{transition:border-color .2s,transform .3s var(--ease-out),box-shadow .3s ease}
.svc:hover{transform:translateY(-4px)}
.svc .ic{transition:transform .35s var(--ease-out)}
.svc:hover .ic{transform:scale(1.08)}

.pillar{position:relative}
.pillar::after{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.pillar:hover::after{transform:scaleX(1)}

.item{transition:transform .3s var(--ease-out),box-shadow .3s ease,border-color .2s}
.item:hover{transform:translateY(-3px);box-shadow:0 16px 30px -22px rgba(23,17,15,.45)}
a.item:hover{box-shadow:0 16px 30px -18px rgba(211,35,45,.45)}

.pics img{transition:box-shadow .45s ease}
.pics figure:hover img{box-shadow:0 18px 32px -20px rgba(23,17,15,.6)}
.about .pic img{transition:transform .9s var(--ease-out)}
.about .pic:hover img{transform:scale(1.04)}
.gallery img{transition:transform .6s var(--ease-out)}
.gallery button:hover img{transform:scale(1.05)}

.more a{transition:transform .25s var(--ease-out),border-color .2s,color .2s}
.more a:hover{transform:translateY(-2px)}
.rg-box{transition:box-shadow .3s ease}
.rg-box:hover{box-shadow:0 16px 30px -24px rgba(23,17,15,.5)}

/* ---------- Sicherheitsnetze ---------- */
@media print{.js-anim *{opacity:1!important;transform:none!important}}
@media (prefers-reduced-motion:reduce){
  .js-anim *,.scroll-progress{transition:none!important;animation:none!important}
  .btn:hover,.svc:hover,.item:hover,.more a:hover,.svc:hover .ic,.about .pic:hover img,.gallery button:hover img,.pics figure:hover img{transform:none!important}
}

/* =====================================================================
   v2 „Bewegte Website“: Canvas, Scroll-Scrub, Pins, horizontale Galerie
   ===================================================================== */
/* Hero-Partikel-Haus (liegt zwischen Bild/Verlauf und Text) */
.fx-hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.hero .wrap,.svc-hero .wrap{will-change:transform,opacity}
.fx-on :is(.hero,.svc-hero) .bgimg{transform-origin:60% 40%}

/* Raster + Staub im Hintergrund (fixed, hinter allen Abschnitten) */
.fx-grid{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(to right,color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px),
                   linear-gradient(to bottom,color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px);
  background-size:72px 72px;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 75%)}
.fx-dust{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
.fx-glow{position:fixed;left:0;top:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:40;
  background:radial-gradient(circle,rgba(255,75,58,.13) 0%,rgba(255,75,58,.05) 35%,transparent 65%);
  opacity:0;transition:opacity .4s ease;will-change:transform}
.fx-glow.on{opacity:1}

/* Riesige Konturschrift hinter Abschnitten */
.has-giant{position:relative}
.has-giant > :not(.fx-giant){position:relative;z-index:1}
.fx-giant{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-giant span{position:absolute;top:clamp(8px,2vw,28px);left:0;white-space:nowrap;
  font:700 clamp(72px,15vw,230px)/1 var(--display);letter-spacing:-.02em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--accent) 38%,transparent);opacity:.75;will-change:transform}
.svc-band.has-giant .fx-giant span{-webkit-text-stroke-color:color-mix(in srgb,var(--accent) 30%,transparent)}

/* Scrub-Elemente: keine CSS-Transition (Wert kommt pro Frame) */
.fx-on .about .pic{will-change:transform}
.fx-on .about .pic img,.fx-on .pics img{transition:none;will-change:transform}
.fx-on .cta-band{transform-origin:50% 0;will-change:transform}

/* Fortschrittsstrich */
.fx-progress{position:relative;height:3px;margin-top:28px;background:var(--line);border-radius:2px;overflow:hidden}
.fx-progress i{position:absolute;inset:0;background:var(--grad);transform:scaleX(0);transform-origin:0 50%}

/* Gepinnter Ablauf (Leistungsseiten, nur große Bildschirme) */
@media (min-width:901px) and (min-height:620px){
  .fx-on .pin-steps{height:320vh;padding-block:0!important}
  .fx-on .pin-steps > .wrap{position:sticky;top:var(--nav-h,70px);height:calc(100vh - var(--nav-h,70px));
    display:flex;flex-direction:column;justify-content:center}
  .fx-on .pin-steps .step{opacity:.28;transition:opacity .45s ease,transform .6s var(--ease-out),border-color .3s}
  .fx-on .pin-steps .step.done{opacity:.55}
  .fx-on .pin-steps .step.on{opacity:1;transform:translateY(-10px);border-top-color:var(--accent)}
  .fx-on .pin-steps .step .n{display:inline-block;justify-self:start;transition:transform .6s var(--ease-out);transform-origin:0 100%}
  .fx-on .pin-steps .step.on .n{transform:scale(1.5)}
}
.pin-steps .fx-progress{display:none}
@media (min-width:901px) and (min-height:620px){.fx-on .pin-steps .fx-progress{display:block}}

/* Projekte: horizontale Galerie (gepinnt, nur große Bildschirme) */
#projekte .fx-progress{display:none}
@media (min-width:901px) and (min-height:620px){
  .fx-on #projekte.hpin{overflow-x:hidden;overflow-x:clip}
  .fx-on .hpin .hpin-stage{position:sticky;top:calc(var(--nav-h,70px) + 16px)}
  .fx-on .hpin .gallery{display:flex;gap:16px;width:max-content;will-change:transform}
  .fx-on .hpin .gallery button{flex:none;height:var(--gh,420px);width:calc(var(--gh,420px) * 1.32);grid-column:auto!important;grid-row:auto!important}
  .fx-on .hpin .gallery button:nth-child(3n+2){width:calc(var(--gh,420px) * .82)}
  .fx-on .hpin .gallery img{transition:none;will-change:transform}
  .fx-on .hpin .gallery .cap{font-size:14px;padding:40px 16px 14px}
  .fx-on #projekte .fx-progress{display:block;margin-top:18px;max-width:320px}
}

@media (prefers-reduced-motion:reduce){.fx-glow,.fx-dust{display:none}}
@media print{.fx-grid,.fx-dust,.fx-glow,.fx-hero-canvas,.fx-giant{display:none}}
.fx-on .hero .bgimg{opacity:.5}
.fx-on .svc-hero .bgimg{opacity:.6}
@media (min-width:901px) and (min-height:620px){
  .fx-on .pin-steps .head{margin-bottom:56px}
  .fx-on .pin-steps .step .n{font-size:58px}
  .fx-on .pin-steps .step b{font-size:21px}
  .fx-on .pin-steps .step span{font-size:15.5px}
  .fx-on .pin-steps .step.on .n{transform:scale(1.25)}
}

/* =====================================================================
   v4 Startseite: „Vom Rohbau zum fertigen Haus“ (echte Bauaufnahmen als Bildfolge, animations.js)
   html.bau: fester Vollbild-Hintergrund bis Ende „Projekte“, Inhalte auf halbtransparenten Glas-Flächen.
   html.bau-static (Bewegung reduziert): fertiges Haus als Standbild hinter dem Hero.
   Ohne JavaScript bleibt der ursprüngliche Hero mit Foto.
   ===================================================================== */
.bau-stage{display:none}
.bau .bau-stage{display:block;position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;z-index:0;overflow:hidden;pointer-events:none;
  background:#C9C4BE;will-change:transform}
.bau-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
/* leichter heller Schleier: ruhiger Hintergrund, Glas wirkt gleichmäßiger */
.bau .bau-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(247,245,244,.18),rgba(247,245,244,0) 30%,rgba(23,17,15,.06))}
.bau main > *{position:relative;z-index:1}
.bau .hero > .wrap{position:relative;z-index:1}
.bau .top{position:relative;z-index:31}
.bau .fx-grid,.bau .fx-dust{display:none}

/* Glas-Flächen: Bewegung bleibt sichtbar, Text gut lesbar */
.bau{--glass:rgba(250,248,246,.64);--glass-solid:rgba(250,248,246,.88);--glass-line:rgba(255,255,255,.55);--muted:#3A312E}
.bau main :is(.eyebrow,.pillar .n,.pillar a,.svc-more){color:#A1102A}
.bau .svc.main .svc-more{color:#fff}
.bau #projekte > .wrap{overflow:hidden;overflow:clip}
.bau main > :is(#ueber-uns,#leistungen,#projekte),.bau .svc-band{background:transparent;border-block:0}
.bau .hero > .wrap,
.bau main > :is(#ueber-uns,#leistungen,#projekte) > .wrap,
.bau .pillars .grid{
  background:var(--glass-solid);border:1px solid var(--glass-line);border-radius:14px;
  box-shadow:0 24px 50px -30px rgba(23,17,15,.45)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .bau .hero > .wrap,
  .bau main > :is(#ueber-uns,#leistungen,#projekte) > .wrap,
  .bau .pillars .grid{background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
}
.bau main > :is(#ueber-uns,#leistungen,#projekte) > .wrap{max-width:min(var(--wrap),calc(100% - 32px));padding-block:clamp(28px,4vw,56px)}
.bau .pillars{margin-top:clamp(24px,4vw,48px)}
.bau .pillars .grid{border-top:1px solid var(--glass-line)}
.bau .pillar + .pillar{border-left-color:rgba(23,17,15,.1)}
.bau .svc{background:rgba(255,255,255,.55)}
.bau .svc.main{background:var(--grad)}
.bau .chip:not([aria-pressed="true"]){background:rgba(255,255,255,.75)}
.bau .about .pic{box-shadow:0 18px 36px -24px rgba(23,17,15,.5)}

/* Hero: hell, Text auf Glas, kein Foto */
.bau .hero{background:transparent;color:var(--ink);overflow:visible;min-height:calc(100vh - 107px);display:flex;align-items:center;padding:clamp(28px,6vh,72px) 0}
.bau .hero :is(.bgimg,.shade,.dots){display:none}
.bau .hero > .wrap{max-width:min(640px,calc(100% - 32px));margin-left:max(16px,calc((100vw - var(--wrap)) / 2 + 8px));margin-right:auto;
  padding:clamp(24px,4vw,48px)}
.bau .hero h1{font-size:clamp(34px,4.8vw,66px)}
.bau .hero .eyebrow{color:#B3122B}
.bau .hero p{color:var(--muted);font-size:clamp(16px,1.35vw,19px)}
.bau .hero .btn{background:var(--grad);color:#fff}
.bau .hero .btn.line{background:rgba(255,255,255,.5);color:var(--ink)}
.bau .hero h1 em,.bau.js-anim .hero h1 em.has-w .wi{background-image:linear-gradient(90deg,#C8202A,#9E1027)}

/* Dunkelmodus des Systems: dunkles Glas */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]).bau{--glass:rgba(17,13,12,.7);--glass-solid:rgba(17,13,12,.9);--glass-line:rgba(255,255,255,.08);--muted:#C9BEBA}
  :root:not([data-theme="light"]).bau .svc{background:rgba(26,20,19,.6)}
  :root:not([data-theme="light"]).bau .chip:not([aria-pressed="true"]){background:rgba(26,20,19,.7)}
  :root:not([data-theme="light"]).bau .hero .btn.line{background:rgba(0,0,0,.3)}
  :root:not([data-theme="light"]).bau .hero .eyebrow{color:#FF8A78}
  :root:not([data-theme="light"]).bau .hero h1 em,:root:not([data-theme="light"]).bau.js-anim .hero h1 em.has-w .wi{background-image:linear-gradient(90deg,#FF6A55,#FF3B3B)}}

/* Ohne Bewegung: Standbild nur hinter dem Hero */
.bau-static .bau-stage{position:absolute;height:auto;bottom:0;z-index:0}
.bau-static .hero{position:relative}
.bau-static .hero > .wrap{position:relative;z-index:1}

/* Phasen-Label (unten rechts, über dem Hintergrund) */
.bau-label{transition:opacity .35s ease;position:fixed;right:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:25;display:grid;gap:5px;padding:9px 12px 10px;border-radius:10px;min-width:168px;
  background:rgba(255,255,255,.9);color:#17110F;box-shadow:0 8px 20px -12px rgba(23,17,15,.45);font:600 14px/1.25 var(--body);pointer-events:none}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.bau-label{background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}
.bau-label .bau-n{font:600 11px/1 var(--mono);letter-spacing:.14em;color:#B3122B}
.bau-label .bau-ticks{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:3px}
.bau-label .bau-ticks i{height:3px;border-radius:2px;background:rgba(23,17,15,.14)}
.bau-label .bau-ticks i.on{background:#D3232D}
.bau-label.flip .bau-t{animation:bau-flip .45s var(--ease-out)}
@keyframes bau-flip{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
.bau-label .bau-t{display:block}
.bau-static .bau-label{position:absolute;bottom:16px}
@media (max-width:600px){.bau main h2{font-size:clamp(26px,7.6vw,40px);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
  .bau-label{min-width:0;padding:6px 10px 7px;font-size:12.5px;right:10px;bottom:10px}
  .bau .hero{min-height:calc(100svh - 101px);padding:20px 0 64px;align-items:flex-start}
  .bau main > :is(#ueber-uns,#leistungen,#projekte) > .wrap{max-width:calc(100% - 20px);padding-inline:18px}
  .bau .hero > .wrap{max-width:calc(100% - 20px);margin-left:10px;margin-right:10px}}
/* Handy: Label in der Kopfzeile (zwischen Logo und Menü) */
.bau-label.in-nav{z-index:35;right:auto;bottom:auto;left:50%;transform:translate(-30%,-50%);min-width:0;padding:5px 9px 6px;gap:3px;font-size:12px;
  box-shadow:none;border:1px solid rgba(23,17,15,.1);background:rgba(255,255,255,.92)}
.bau-label.in-nav .bau-n{font-size:9.5px}
.bau-label.in-nav .bau-ticks{gap:3px;margin-top:1px}
.bau-label.in-nav .bau-ticks i{height:2px}
@media (max-width:360px){.bau-label.in-nav .bau-n{display:none}}
@media print{.bau-stage,.bau-label{display:none!important}}