:root{
  --lime:#8BC53F;
  --limeSoft: rgba(139,197,63,.14);
}

/* ---- Hero ---- */
.mod-hero-media{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 0 0 1px var(--limeSoft);
  background: rgba(0,0,0,.22);
  min-height: unset;
  position: relative;
}
.mod-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* bottom-safe: show more lower area (deck/ground) */
  object-position: center 85%;
  display:block;
  transform: scale(1.01);
  filter: contrast(1.03) saturate(1.03);
}
.mod-hero-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.18));
  pointer-events:none;
}
.hero-glow{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(closest-side, rgba(139,197,63,.22), rgba(139,197,63,0) 60%),
    radial-gradient(closest-side, rgba(255,255,255,.10), rgba(255,255,255,0) 65%);
  transform: translate(var(--mx,0px), var(--my,0px));
  transition: transform .12s ease;
  pointer-events:none;
  mix-blend-mode: screen;
  filter: blur(12px);
}

/* KPI pills */
.mod-kpis{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.mod-kpis span{
  font-size:12px; padding:8px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(242,245,251,.84);
}

/* WOW cards */
.wow-band{ margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wow-band .glass{ padding:18px; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.wow-band .glass:hover{
  transform: translateY(-3px);
  border-color: rgba(139,197,63,.30);
  box-shadow: 0 22px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(139,197,63,.16);
}
@media(max-width:980px){ .wow-band{ grid-template-columns:1fr; } }

/* Tabs */
.gallery-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.gallery-tabs button{
  cursor:pointer; font:inherit; font-weight:900; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04); color:#fff; transition:.2s ease;
}
.gallery-tabs button:hover{ border-color: rgba(139,197,63,.30); transform: translateY(-1px); }
.gallery-tabs button.active{ border-color: rgba(139,197,63,.65); background: rgba(139,197,63,.10); }

/* Gallery grid */
.mod-gallery{ padding:16px; }
.mod-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.mod-tile{
  grid-column: span 4; height:230px; border-radius:18px;
  border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
  overflow:hidden; cursor:pointer; position:relative; padding:0; transition:.25s ease;
}
.mod-tile img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:.35s ease; }
.mod-tile:hover{
  border-color: rgba(139,197,63,.28);
  box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(139,197,63,.12);
  transform: translateY(-2px);
}
.mod-tile:hover img{ transform: scale(1.06); }
.mod-chip{
  position:absolute; left:12px; bottom:12px; padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:900; background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12); color:#fff; backdrop-filter: blur(10px);
}
@media(max-width:1100px){ .mod-tile{ grid-column: span 6; height:210px; } }
@media(max-width:700px){ .mod-tile{ grid-column: span 12; height:210px; } }

/* Lightbox */
.mod-lightbox{ position:fixed; inset:0; display:none; z-index:9999; }
.mod-lightbox[aria-hidden="false"]{ display:block; }
.mod-lightbox-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.65); }
.mod-lightbox-card{ position:relative; max-width:1040px; width:calc(100% - 28px); margin:70px auto; padding:14px; border-radius:22px; }
.mod-lightbox-img{ width:100%; max-height:72vh; object-fit:contain; display:block; border-radius:16px; }
.mod-lightbox-caption{ margin-top:10px; color: rgba(242,245,251,.72); }
.mod-lightbox-close{ position:absolute; top:10px; right:12px; width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.35); color:#fff; font-size:22px; cursor:pointer; }

/* Brochures */
.brochure-frame{ border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); }
.brochure-frame iframe{ width:100%; height:640px; border:0; display:block; }
.brochure-3col{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media(max-width:1100px){ .brochure-3col{ grid-template-columns:1fr; } }

/* Assembly section (base) */
.assembly{ display:grid; grid-template-columns:1.1fr .9fr; gap:14px; align-items:center; }
.assembly img{ width:100%; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); }
@media(max-width:980px){ .assembly{ grid-template-columns:1fr; } }

/* Sticky CTA */
.sticky-cta{ position:fixed; left:16px; right:16px; bottom:16px; z-index:9999; display:none; }
.sticky-cta .bar{
  max-width:1120px; margin:0 auto; display:flex; gap:10px; justify-content:space-between; align-items:center;
  padding:12px; border-radius:20px; border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.45); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 20px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(139,197,63,.10);
}
.sticky-cta .bar strong{ font-size:12px; color: rgba(242,245,251,.82); letter-spacing:.10em; text-transform:uppercase; }
.sticky-cta .bar .actions{ margin:0; }
@media(max-width:820px){ .sticky-cta .bar{ flex-direction:column; align-items:stretch; } }

/* Stronger reveal */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* --- Build animation (segments explode) --- */
.build-stage{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  aspect-ratio: 3 / 2;
  min-height: 360px;
}
.build-stage::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(139,197,63,.10), rgba(0,0,0,0) 45%),
    radial-gradient(closest-side, rgba(255,255,255,.08), rgba(255,255,255,0) 70%);
  pointer-events:none;
  mix-blend-mode: screen;
}
.build-img, .build-seg{
  position:absolute; inset:0;
  background-image: url("../modular/segments.jpg");
  background-size: cover;
  background-position: center;
}
.build-img{filter: contrast(1.02) saturate(1.02); opacity:.92}
.build-seg{
  opacity: 0;
  transform: translate3d(0,0,0);
  transition: transform 1200ms cubic-bezier(.2,.85,.2,1), opacity 700ms ease;
  will-change: transform;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,.55));
}
.build-stage.is-ready .build-seg{opacity:1}
.seg-1{clip-path: polygon(0% 42%, 48% 20%, 63% 50%, 37% 65%, 0% 78%);}
.seg-2{clip-path: polygon(34% 34%, 64% 22%, 77% 26%, 86% 44%, 60% 60%, 44% 58%);}
.seg-3{clip-path: polygon(58% 16%, 100% 0%, 100% 52%, 76% 52%, 70% 30%);}
.seg-4{clip-path: polygon(58% 48%, 100% 40%, 100% 100%, 62% 100%, 55% 72%);}

@keyframes floaty{
  0%,100%{transform: translate(var(--tx,0), var(--ty,0)) rotate(var(--rot,0));}
  50%{transform: translate(calc(var(--tx,0) + 0.4%), calc(var(--ty,0) - 0.5%)) rotate(var(--rot,0));}
}
.build-stage.is-exploded .seg-1{--tx:-4%;--ty:3%;--rot:-1.2deg; transform: translate(-4%, 3%) rotate(-1.2deg); animation: floaty 6s ease-in-out infinite;}
.build-stage.is-exploded .seg-2{--tx:1%;--ty:-3%;--rot:0.8deg; transform: translate(1%, -3%) rotate(0.8deg); animation: floaty 7s ease-in-out infinite;}
.build-stage.is-exploded .seg-3{--tx:3%;--ty:-2.5%;--rot:0.7deg; transform: translate(3%, -2.5%) rotate(0.7deg); animation: floaty 6.5s ease-in-out infinite;}
.build-stage.is-exploded .seg-4{--tx:4%;--ty:4%;--rot:-0.6deg; transform: translate(4%, 4%) rotate(-0.6deg); animation: floaty 7.5s ease-in-out infinite;}

/* Lines/labels */
.build-overlay{position:absolute; inset:0; pointer-events:none;}
.build-line{stroke: rgba(139,197,63,.55); stroke-width:2; stroke-linecap:round; opacity:.95; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));}
.build-dot{fill:#8BC53F; opacity:.95;}
.build-label{font-weight:900; font-size:12px; letter-spacing:.12em; text-transform:uppercase; fill: rgba(242,245,251,.92);}
.build-label-bg{fill: rgba(0,0,0,.35); stroke: rgba(139,197,63,.35); stroke-width:1;}
/* =========================
   BUILD / EXPLODED (1 IMAGE: segments.jpg)
   ========================= */

.build-stage{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  aspect-ratio: 1000 / 666;     /* passt zu deinem SVG viewBox */
}

.build-img,
.build-seg{
  position:absolute;
  inset:0;
  background-image:url("/assets/modular/segments.jpg");
  background-size: cover;
  background-position:center;
  background-repeat:no-repeat;
  transition: transform .85s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
  will-change: transform, opacity;
}

/* Base: zeigt das komplette Bild */
.build-img{ z-index:1; opacity:1; }

/* Segmente: zeigen NUR Ausschnitte via clip-path */
.build-seg{ z-index:2; opacity:0; }

/* Wenn animiert: Base ausblenden, Segmente einblenden */
.build-stage.is-animated .build-img{ opacity:0; }
.build-stage.is-animated .build-seg{ opacity:1; }

/* ---- Segment-Aufteilung (einmalig feinjustieren, wenn nötig) ---- */
/* Diese Polygone sind “gute Startwerte” für dein Haus. */
.build-seg.seg-1{ clip-path: polygon(0% 55%, 44% 55%, 44% 100%, 0% 100%); }     /* Wohnmodul */
.build-seg.seg-2{ clip-path: polygon(38% 40%, 68% 40%, 68% 78%, 38% 78%); }     /* Mitte */
.build-seg.seg-3{ clip-path: polygon(58% 18%, 100% 18%, 100% 52%, 58% 52%); }   /* Schlaf/Loft */
.build-seg.seg-4{ clip-path: polygon(60% 52%, 100% 52%, 100% 100%, 60% 100%); }/* Erweiterung */

/* Bewegung im animierten Zustand */
.build-stage.is-animated .seg-1{ transform: translate(-80px, 25px); }
.build-stage.is-animated .seg-2{ transform: translate(-20px, -45px); }
.build-stage.is-animated .seg-3{ transform: translate(70px, -70px); }
.build-stage.is-animated .seg-4{ transform: translate(95px, 55px); }

/* optional: etwas Abstand für Button-Zeile */
.build-visual .actions{ margin-top: 12px; }
/* ===== BUILD STAGE LAYER FIX (ARROWS/TEXT VORNE) ===== */
.build-stage{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  aspect-ratio: 1000 / 666;
}

/* Bild-Layer */
.build-img,
.build-seg{
  position:absolute;
  inset:0;
  background-image:url("/assets/modular/segments.jpg");
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  transition: transform .85s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
  will-change: transform, opacity;
}

.build-img{ z-index: 1; opacity: 1; }
.build-seg{ z-index: 2; opacity: 0; }

/* SVG Overlay IMMER OBEN */
.build-overlay{
  position:absolute;
  inset:0;
  z-index: 5;
  pointer-events: none;
}

/* Linien / Labels sichtbar machen */
.build-line{
  fill:none;
  stroke: rgba(139,197,63,.9);
  stroke-width: 3;
}
.build-dot{ fill: rgba(139,197,63,1); }
.build-label-bg{ fill: rgba(20,24,18,.65); stroke: rgba(139,197,63,.35); }
.build-label{ fill: rgba(242,245,251,.92); font-weight: 700; letter-spacing:.08em; }

/* Toggle Zustand */
.build-stage.is-animated .build-img{ opacity:0; }
.build-stage.is-animated .build-seg{ opacity:1; }

/* Segment-Ausschnitte (Startwerte) */
.build-seg.seg-1{ clip-path: polygon(0% 55%, 44% 55%, 44% 100%, 0% 100%); }
.build-seg.seg-2{ clip-path: polygon(38% 40%, 68% 40%, 68% 78%, 38% 78%); }
.build-seg.seg-3{ clip-path: polygon(58% 18%, 100% 18%, 100% 52%, 58% 52%); }
.build-seg.seg-4{ clip-path: polygon(60% 52%, 100% 52%, 100% 100%, 60% 100%); }

/* Explode-Bewegung */
.build-stage.is-animated .seg-1{ transform: translate(-80px, 25px); }
.build-stage.is-animated .seg-2{ transform: translate(-20px, -45px); }
.build-stage.is-animated .seg-3{ transform: translate(70px, -70px); }
.build-stage.is-animated .seg-4{ transform: translate(95px, 55px); }
/* ===== BUILD EXPLODE OVERRIDE (MUSS GEWINNEN) ===== */
section.build-visual .build-stage{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  aspect-ratio: 1000 / 666;
}

section.build-visual .build-stage .build-img,
section.build-visual .build-stage .build-seg{
  position:absolute;
  inset:0;
  background-image: url("/assets/modular/segments.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .5s ease !important;
  will-change: transform, opacity;
}

/* Basis-Layer */
section.build-visual .build-stage .build-img{
  z-index: 1;
  opacity: 1 !important;
  transform: none !important;
}

section.build-visual .build-stage .build-seg{
  z-index: 2;
  opacity: 0 !important;
  transform: translate3d(0,0,0) !important;
}

/* Overlay immer oben */
section.build-visual .build-stage .build-overlay{
  position:absolute;
  inset:0;
  z-index: 5;
  pointer-events:none;
}

/* Clip-Bereiche */
section.build-visual .build-stage .build-seg.seg-1{ clip-path: polygon(0% 55%, 44% 55%, 44% 100%, 0% 100%) !important; }
section.build-visual .build-stage .build-seg.seg-2{ clip-path: polygon(38% 40%, 68% 40%, 68% 78%, 38% 78%) !important; }
section.build-visual .build-stage .build-seg.seg-3{ clip-path: polygon(58% 18%, 100% 18%, 100% 52%, 58% 52%) !important; }
section.build-visual .build-stage .build-seg.seg-4{ clip-path: polygon(60% 52%, 100% 52%, 100% 100%, 60% 100%) !important; }

/* ANIMATED STATE */
section.build-visual .build-stage.is-animated .build-img{
  opacity: 0 !important;
}

section.build-visual .build-stage.is-animated .build-seg{
  opacity: 1 !important;
}

/* Explode Moves */
section.build-visual .build-stage.is-animated .build-seg.seg-1{ transform: translate3d(-90px, 30px, 0) !important; }
section.build-visual .build-stage.is-animated .build-seg.seg-2{ transform: translate3d(-20px, -55px, 0) !important; }
section.build-visual .build-stage.is-animated .build-seg.seg-3{ transform: translate3d(85px, -75px, 0) !important; }
section.build-visual .build-stage.is-animated .build-seg.seg-4{ transform: translate3d(105px, 60px, 0) !important; }

/* FORCE-HOVER Modular Living Gallery (override) */
.modular-living .mod-tile{
  -webkit-appearance:none !important;
  appearance:none !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.03) !important;
  overflow:hidden !important;
  position:relative !important;
  cursor:pointer !important;

  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  will-change:transform !important;
}

.modular-living .mod-tile img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transform:scale(1.02) !important;

  transition:transform .35s ease, filter .35s ease !important;
  will-change:transform !important;
  pointer-events:none !important; /* wichtig bei button->img */
}

/* Hover */
.modular-living .mod-tile:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(139,197,63,.35) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(139,197,63,.12) !important;
}

.modular-living .mod-tile:hover img{
  transform:scale(1.08) !important;
  filter:saturate(1.08) contrast(1.02) !important;
}