/* DESIGN 3 — "Nachtblau": cinematisch, dunkel, Tropfen im Zentrum */
.hero-nacht{min-height:100vh;display:flex;align-items:center;padding:calc(var(--nav-h) + 40px) 0 120px;position:relative;overflow:hidden;text-align:center}
.hero-nacht>.container{min-width:0;width:100%}
.hero-nacht .drop-scene{width:clamp(200px,26vw,320px);margin:0 auto 18px}
.hero-nacht h1{margin:14px auto 0;max-width:16ch;font-size:clamp(32px,4.8vw,64px);line-height:1.14}
.hero-nacht h1 .hl{display:block;margin-bottom:-.14em}
.hero-nacht .lead{margin:22px auto 0;text-align:center}
.hero-nacht .actions{justify-content:center;margin-top:34px}
.hero-nacht .kicker{font-family:var(--serif);letter-spacing:.45em;font-size:clamp(15px,1.7vw,21px);color:var(--ice);text-transform:uppercase}
/* Schriftzug in den Farben des Firmenzeichens: Silber des B, Blau des Tropfens */
.hero-nacht .kicker .wortmarke{display:inline-block;padding-bottom:.1em;background:linear-gradient(96deg,#f7f8f9 0%,#eceef2 30%,#c2e6fd 66%,#8ed3fb 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-nacht .kicker small{display:block;font-family:var(--font);letter-spacing:.3em;font-size:clamp(11.5px,1.1vw,13.5px);color:var(--muted);margin-top:6px}
.hero-nacht .kicker small .nb{white-space:nowrap}
.hero-nacht .trust{margin-top:64px}
.hero-nacht .scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:11px;letter-spacing:.28em;text-transform:uppercase;z-index:2}
.hero-nacht .scroll-hint i{width:1px;height:44px;background:linear-gradient(180deg,var(--cyan),transparent);position:relative;overflow:hidden}
.hero-nacht .scroll-hint i::after{content:"";position:absolute;left:-2px;top:-10px;width:5px;height:10px;background:var(--cyan);border-radius:3px;animation:hint 2.8s ease-in-out infinite}
@keyframes hint{to{top:50px}}
.hero-nacht .glow-bg{position:absolute;left:50%;top:30%;width:900px;height:900px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(22,70,255,.22),transparent 60%);filter:blur(30px);pointer-events:none}
.hero-nacht .blueprint.l svg{right:auto;left:-8%;top:auto;bottom:-10%;transform:scaleX(-1);opacity:.2}

/* Leistungen — drei grosse Säulen */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.5vw,30px)}
@media(max-width:960px){.pillars{grid-template-columns:1fr}}
.pillar{position:relative;border-radius:var(--radius);overflow:hidden;min-height:440px;display:flex;align-items:flex-end;border:1px solid var(--line);isolation:isolate;transition:transform .4s var(--ease),box-shadow .4s}
.pillar:hover{transform:translateY(-8px);box-shadow:0 40px 80px rgba(0,0,0,.45),var(--glow-s)}
.pillar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease)}
.pillar:hover img{transform:scale(1.06)}
.pillar::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,5,10,.15),rgba(3,5,10,.55) 45%,rgba(3,5,10,.96) 100%)}
.pillar .in{padding:clamp(24px,3vw,36px)}
.pillar .n{font-family:var(--serif);font-size:13px;letter-spacing:.4em;color:var(--cyan)}
.pillar h3{font-size:clamp(26px,2.6vw,34px);margin:8px 0 10px}
.pillar p{color:var(--text-2)}
.pillar ul{margin-top:16px;display:grid;gap:8px}
.pillar ul li{font-size:14.5px;color:var(--ice);padding-left:20px;position:relative}
.pillar ul li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.pillar .more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:700;color:#fff;padding:10px 16px;border-radius:999px;border:1px solid var(--line-2);background:rgba(3,5,10,.5);backdrop-filter:blur(6px);transition:.3s}
.pillar:hover .more{background:var(--blue);border-color:transparent}
.pillar .more svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* Ganzheitliches Haus (Design 1: statische Illustration mit Pulsen) */
.holistic{position:relative}
.holistic .house-wrap{position:relative;padding:20px}
.holistic .house-wrap::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,rgba(22,70,255,.3),transparent 65%);filter:blur(30px)}
.flow-list{display:grid;gap:14px;margin-top:26px}
.flow-list .f{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:var(--panel);transition:.3s}
.flow-list .f:hover{border-color:var(--line-2);transform:translateX(6px)}
.flow-list .f i{width:12px;height:12px;border-radius:50%;margin-top:7px;flex:none;box-shadow:0 0 12px currentColor}
.flow-list .f b{display:block}
.flow-list .f span{color:var(--muted);font-size:14.5px}
.c-water{color:#64b5ff;background:#64b5ff}.c-heat{color:#ff9a4d;background:#ff9a4d}.c-air{color:#9ff0ff;background:#9ff0ff}.c-power{color:#ffd95a;background:#ffd95a}.c-grey{color:#a9b4c9;background:#a9b4c9}

/* Über uns Teaser */
.about-collage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;padding-bottom:30px}
.about-collage .round:nth-child(1){width:100%;margin-top:40px}
.about-collage .round:nth-child(2){width:100%}
.about-collage .round:nth-child(3){width:70%;margin:-10px 0 0 15%;grid-column:2}
.about-collage .badge{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;background:#03050a;border:1px solid var(--line-2);display:grid;place-items:center;box-shadow:var(--glow);z-index:2}
.about-collage .badge img{width:92px}


/* Galerie-Teaser */
.gal-teaser{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:760px){.gal-teaser{grid-template-columns:repeat(2,1fr)}}
.gal-teaser .round{transition:transform .4s var(--ease)}
.gal-teaser .round:hover{transform:translateY(-6px)}
.gal-teaser .round:nth-child(even){margin-top:28px}

/* ruhiger Tropfenregen im Hero */
.hero-nacht .rain{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.hero-nacht .rain i{position:absolute;top:-30px;left:var(--x);width:6px;height:10px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 40% 35%,#fff 0,#8fd0ff 30%,#1646ff 85%);box-shadow:0 0 10px rgba(100,181,255,.7);opacity:0;animation:rainFall var(--d,18s) linear var(--dl,0s) infinite}
@keyframes rainFall{0%{transform:translateY(0);opacity:0}8%{opacity:.35}92%{opacity:.3}100%{transform:translateY(105vh);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-nacht .rain,.hero-nacht .scroll-hint i::after{display:none}}

/* ---- Design 3: das ganze Zeichen fällt wie ein Tropfen von oben, dann folgen die Texte ---- */
.hero-nacht .drop-scene.mark-fall .drop{display:none}
.hero-nacht .drop-scene.mark-fall .mark{opacity:0;transform:translateY(-36vh) scale(.45)}
.hero-nacht .drop-scene.mark-fall.go .mark{animation:markFall 1.8s .05s both}
.hero-nacht .drop-scene.mark-fall.shown .mark,.hero-nacht .drop-scene.mark-fall.settled .mark{animation:none;opacity:1;transform:none;filter:none}
.hero-nacht .drop-scene.mark-fall.settled .rip{animation-delay:0s}.hero-nacht .drop-scene.mark-fall.settled .rip.r2{animation-delay:.2s}.hero-nacht .drop-scene.mark-fall.settled .rip.r3{animation-delay:.4s}
@keyframes markFall{
  0%{opacity:0;transform:translateY(-36vh) scale(.45);filter:drop-shadow(0 0 14px rgba(47,123,255,.5));animation-timing-function:cubic-bezier(.45,0,.8,.45)}
  10%{opacity:1}
  70%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 10px rgba(47,123,255,.3));animation-timing-function:ease-out}
  78%{transform:translateY(6px) scale(1.05,.95)}
  88%{transform:translateY(-3px) scale(.985,1.015)}
  100%{opacity:1;transform:none;filter:none}
}
.hero-nacht .drop-scene.mark-fall.go .rip{animation-delay:1.3s}
.hero-nacht .drop-scene.mark-fall.go .rip.r2{animation-delay:1.5s}
.hero-nacht .drop-scene.mark-fall.go .rip.r3{animation-delay:1.7s}
.hero-nacht .drop-scene.mark-fall .halo{transition-delay:1.4s}
/* Smartphone-Feinschliff Hero */
@media(max-width:600px){.hero-nacht{padding:calc(var(--nav-h) + 28px) 0 96px}.hero-nacht .drop-scene{width:clamp(170px,46vw,220px);margin-bottom:12px}.hero-nacht .kicker{letter-spacing:.28em;font-size:12px}.hero-nacht .kicker small{letter-spacing:.18em;font-size:10px}.hero-nacht h1{margin-top:10px}.hero-nacht .lead{margin-top:16px;font-size:16.5px}.hero-nacht .actions{margin-top:26px}.hero-nacht .trust{margin-top:44px}.hero-nacht .drop-scene.mark-fall .mark{transform:translateY(-30vh) scale(.45)}}
@media(max-width:380px){.hero-nacht h1{font-size:36px}}
/* Texte kommen von oben nach unten (wie nachfolgende Tropfen) */
.hero-nacht .hero-reveal.in{animation:fadeDown .9s var(--ease) forwards}
@keyframes fadeDown{0%{opacity:0;transform:translateY(-26px)}100%{opacity:1;transform:none}}

/* ruhiges Referenz-Laufband */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);max-width:1100px;margin:0 auto}
.marquee .track{display:flex;gap:48px;width:max-content;animation:mq 46s linear infinite;align-items:center}
.marquee:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee .logos{flex-wrap:nowrap;gap:48px;justify-content:flex-start}
.marquee .lg{white-space:nowrap;flex:none}

/* Kein Lichtschein hinter dem Zeichen */
.hero-nacht .drop-scene .halo,.hero-nacht .glow-bg{display:none}
/* Ringe nur im Ladebildschirm - im Hero keine zweiten Ringe */
.hero-nacht .drop-scene.mark-fall .rip{display:none}

/* Hero: Leitungs-Blueprints etwas praesenter */
.hero-nacht .blueprint svg{opacity:.5}
.hero-nacht .blueprint.l svg{opacity:.3}
/* Kreislauf: Waermepumpe blaest, Klima schneit, Lueftung dreht */
.cycle{position:absolute;inset:0;pointer-events:none;z-index:1}
.cycle{display:flex;align-items:center;justify-content:center}
.cycle-svg{width:min(100%,1500px);height:auto;max-height:96%;opacity:.75;transform:translateY(-5.5%)}
@media(max-width:1100px){.cycle-svg{opacity:.5}}
@media(max-width:760px){.cycle{display:none}}

/* Gewerbe-Animationen im Seiten-Hero */
.page-hero .ph-anim{position:absolute;left:6%;bottom:10%;width:clamp(80px,9vw,130px);opacity:.55;pointer-events:none;z-index:0}
.page-hero .ph-anim svg{width:100%;height:auto;display:block}
@media(max-width:760px){.page-hero .ph-anim{left:3%;bottom:4%;width:70px;opacity:.4}}
/* Problem-Haus: Liste + Zonen */
.pain-split{align-items:center}
.pain-list{display:flex;flex-direction:column;gap:10px}
.pain-list .f{padding:12px 16px;border-radius:14px;gap:12px;align-items:center}
.pain-list .f .emo{font-size:22px;flex:none;filter:grayscale(.2)}
.pain-list .f b{font-size:15px}
.pain-list .f span{display:block;color:var(--muted);font-size:13.5px;line-height:1.45}
.pain-list .f.on{border-color:var(--cyan);background:rgba(22,70,255,.14);box-shadow:var(--glow-s);transform:translateX(6px)}
.p-house .zone{fill:rgba(47,123,255,.16);stroke:rgba(143,208,255,.5)}
.p-house .zone.on{opacity:1}
.p-house .hot.on circle.c{fill:var(--blue);stroke:#fff;filter:drop-shadow(0 0 10px var(--cyan))}
/* Bilder-Marquee im Hero */
.work-marquee{max-width:1240px}
.works{display:flex;gap:18px;flex-wrap:nowrap}
.works .wk{margin:0;flex:none;position:relative}
.works .wk img{width:270px;height:158px;object-fit:cover;border-radius:14px;border:1px solid var(--line);display:block;opacity:.92}
.works .wk figcaption{position:absolute;left:10px;bottom:8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.work-marquee .track{gap:18px}
@media(max-width:600px){.works .wk img{width:190px;height:112px}}
/* Problem-Haus: Karten direkt in den Zimmern */
.p-house-wrap{max-width:1080px;margin:30px auto 0}
.p-house{position:relative}
.p-house svg{display:block;width:100%;height:auto}
.p-house .p-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,0);width:var(--w,min(22%,230px));background:rgba(5,10,22,.9);border:1px solid var(--line);border-radius:12px;padding:9px 12px;transition:border-color .3s,background .3s,box-shadow .3s}
.p-house .p-pin .emo{font-size:16px;margin-right:7px;vertical-align:-2px}
.p-house .p-pin>b{font-size:clamp(11px,1.05vw,14.5px);line-height:1.25}
.p-house .p-pin>span{display:block;color:var(--muted);font-size:clamp(10px,.9vw,12.5px);line-height:1.4;max-height:0;overflow:hidden;opacity:0;transition:max-height .35s,opacity .35s,margin .35s}
.p-house .p-pin.on{border-color:var(--cyan);background:rgba(13,30,70,.96);box-shadow:var(--glow-s);z-index:3}
.p-house .p-pin.on>span{max-height:110px;opacity:1;margin-top:5px}
@media(max-width:760px){
 .p-house{display:flex;flex-direction:column;gap:8px}
 .p-house svg{order:-1;margin-bottom:6px}
 .p-house .p-pin{position:static;transform:none;width:auto}
 .p-house .p-pin>span{max-height:none;opacity:1;margin-top:4px}
}

/* Gewerbe-Heros: grosse Animation rechts statt B */
.page-hero .ph-scene.trade{width:clamp(250px,24vw,370px);opacity:.9}
.page-hero .ph-scene.trade svg{width:100%;height:auto;display:block}
@media(max-width:760px){.page-hero .ph-scene.trade{width:180px;opacity:.5}}

/* Problem-Haus v3: Texte immer sichtbar, Karten zentriert */
.p-house .p-pin{transform:translate(-50%,-50%);width:var(--w,min(30%,330px))}
.p-house .p-pin>span{max-height:none;opacity:1;margin-top:4px}
.p-house .p-pin>b{display:block;margin-top:2px}
.p-house .p-pin .emo{float:left;margin-top:2px}
.p-house .p-pin>b,.p-house .p-pin>span{margin-left:28px}
@media(max-width:760px){.p-house .p-pin{transform:none;width:auto}.p-house .p-pin .emo{float:none}.p-house .p-pin>b,.p-house .p-pin>span{margin-left:0}}

/* Problem-Haus: feinere Zustaende */
.p-house .zone{fill:url(#zg);stroke:none}
.p-house .p-pin{background:rgba(7,13,28,.92);border-color:rgba(120,150,200,.22)}
.p-house .p-pin.on{border-color:#6ab0ff;background:linear-gradient(180deg,rgba(22,70,255,.28),rgba(10,24,60,.96));box-shadow:0 0 0 1px rgba(106,176,255,.3),0 10px 30px rgba(22,70,255,.3)}

/* Gewerbe-Bildkarten unter den Referenz-Buttons */
.gcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
.gcard{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);height:220px;display:flex;align-items:flex-end;isolation:isolate;transition:transform .35s,box-shadow .35s,border-color .35s}
.gcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--ease)}
.gcard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,5,10,.05) 40%,rgba(3,5,10,.82))}
.gcard .gi{width:100%;padding:14px 18px;color:#fff;font-weight:800;font-size:17px}
.gcard:hover{transform:translateY(-6px);border-color:var(--cyan);box-shadow:var(--glow-s)}
.gcard:hover img{transform:scale(1.07)}
@media(max-width:900px){.gcards{grid-template-columns:repeat(2,1fr)}.gcard{height:170px}}

/* Rechtstexte */
.legal h2{font-size:19px;margin-bottom:8px}
.legal h2.mt{margin-top:30px}
.legal p{color:var(--text-2);line-height:1.7}
.legal p.mt{margin-top:12px}
.legal a{color:var(--cyan)}
.legal a:hover{text-decoration:underline}

/* Konstruktionslinien auf kleinen Bildschirmen: massstabsgerecht statt abgeschnitten,
   deutlich zurueckgenommen, damit sie das Zeichen nicht stoeren. */
@media(max-width:760px){
  .blueprint svg{min-width:0;width:82%;right:-14%;top:4%;opacity:.3}
  .hero-nacht .blueprint svg{opacity:.3}
  .hero-nacht .blueprint.l svg{left:-16%;bottom:-2%;width:72%;opacity:.2}
}