/* ==========================================================================
   ASIM Haustechnik GmbH
   Marke: Rot #CE1B27 / Navy #15334E (aus dem Logo) / Weiss / Hellgrau
   Aufbau nach der Vorlage (Industriepark-Layout), Masse auf 1440 px
   gemessen und fliessend skaliert. Schriften: Sora (Titel), DM Sans (Text).
   ========================================================================== */

:root{
  --red:#CE1B27;            /* Rot aus dem Logo */
  --red-d:#AE1520;
  --red-soft:#F3CFCB;
  --navy:#15334E;           /* Navy aus dem Logo */
  --navy-d:#0F2236;
  --blue:#1F7AD6;           /* Akzent der Leistungs-Icons */
  --hot:#D9312B;            /* Flamme / Wärme in den Icons */
  --ink:#1C2632;
  --text:#47515D;
  --muted:#5F6874;
  --line:#E3E5E8;
  --grey:#F4F4F4;
  --ph:#E4E7EB;             /* Grund hinter Bildern, solange sie laden */
  --white:#FFFFFF;

  --f-head:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:1620px;
  --pad:clamp(20px,7.85vw,151px);       /* 113 px bei 1440, wie in der Vorlage */
  --sec-y:clamp(64px,8.3vw,160px);
  --hdr:104px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}

html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{width:100%;max-width:calc(var(--wrap) + var(--pad) * 2);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-top:var(--sec-y)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red);color:#fff;padding:12px 20px;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

/* ==========================================================================
   TYPO
   Titel in Sora 400: in der Vorlage stehen alle Überschriften im normalen
   Schnitt, gross und ruhig, nie fett.
   ========================================================================== */
.h2{
  font-family:var(--f-head);
  font-weight:400;
  font-size:clamp(30px,3.9vw,76px);
  line-height:1.14;
  letter-spacing:-.028em;
  color:var(--ink);
}
.h2--light{color:#fff}

/* ==========================================================================
   BUTTONS  (Pille, Pfeil aus dem MS-Baukasten)
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  height:46px;padding:0 24px;border-radius:999px;
  background:var(--red);color:#fff;border:1px solid var(--red);
  font-family:var(--f-body);font-size:14px;font-weight:500;letter-spacing:.005em;
  white-space:nowrap;cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),
             box-shadow .3s var(--ease),transform .3s var(--ease);
}
.btn:hover,.btn:focus-visible{background:var(--red-d);border-color:var(--red-d);box-shadow:0 14px 26px -14px rgba(206,27,39,.75)}

.btn__ar{width:14px;height:9px;flex:none;position:relative;display:block;transition:transform .32s var(--ease)}
.btn__ar::before{content:'';position:absolute;top:3.5px;left:0;width:100%;height:1.6px;background:currentColor}
.btn__ar::after{
  content:'';position:absolute;top:1.2px;right:.5px;width:6px;height:6px;
  border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg);
}
a:hover .btn__ar,.btn:hover .btn__ar{transform:translateX(4px)}

.btn--ghost{background:transparent;color:var(--ink);border-color:#CDD1D6}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
.btn--block{width:100%}

/* roter Kreis mit Pfeil nach rechts oben (Vorlage: "auf dem Plan öffnen") */
.circ{
  width:30px;height:30px;flex:none;border-radius:50%;background:var(--red);
  display:grid;place-items:center;transition:transform .35s var(--ease),background .3s var(--ease);
}
.circ svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a:hover > .circ{transform:rotate(45deg)}

/* ==========================================================================
   ICONS
   Symbole im SVG-Sprite. Vollfarbig im weissen Kreis mit Navy-Ring wie
   auf der Icon-Vorlage, einfarbig weiss auf den roten Flächen.
   ========================================================================== */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* Das SVG liegt absolut im Kreis: Prozentwerte beziehen sich so immer auf
   den Kreis selbst. Im Grid ohne feste Zeilenhöhe fiel es auf 150 px
   zurück und rutschte unter den Kreis. */
.svc-ico{
  --i-acc:var(--blue);--i-hot:var(--hot);
  position:relative;flex:none;width:56px;height:56px;border-radius:50%;
  border:2px solid var(--navy);background:#fff;color:var(--navy);
}
.svc-ico svg{position:absolute;left:18%;top:18%;width:64%;height:64%;stroke-width:2.1;overflow:visible}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:#fff;
  transition:box-shadow .4s var(--ease);
}
.hdr.is-stuck,.hdr--solid{box-shadow:0 1px 0 var(--line),0 14px 34px -22px rgba(21,51,78,.35)}
.hdr__in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  height:var(--hdr);transition:height .4s var(--ease);
}
.hdr.is-stuck .hdr__in{height:78px}

.hdr__brand{display:flex;align-items:center;position:relative;z-index:2}
.hdr__logo{display:block;flex:none}
.hdr__logo img{height:58px;width:auto;transition:height .4s var(--ease)}
.hdr.is-stuck .hdr__logo img{height:46px}

.nav{display:flex;align-items:center;gap:clamp(22px,2.9vw,52px)}
.nav a{position:relative;padding:6px 0;font-size:14px;color:#4A5360;transition:color .3s var(--ease)}
/* Pfeil nach rechts oben beim Überfahren (Vorgabe) */
.nav a:not(.btn)::after{content:"↗";display:inline-block;opacity:0;margin-left:0;transform:translate(-5px,3px);transition:.3s}
.nav a:not(.btn):hover::after{opacity:1;margin-left:5px;transform:none}
.nav a:not(.btn):hover,.nav a.is-active{color:var(--ink)}
.nav a.is-active{font-weight:500}
.nav .nav__cta{display:none}

.hdr__right{justify-self:end;display:flex;align-items:center;gap:12px;position:relative;z-index:2}
.hdr__call{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:background .3s var(--ease),border-color .3s var(--ease);
}
.hdr__call svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;transition:stroke .3s}
.hdr__call:hover{background:var(--red);border-color:var(--red)}
.hdr__call:hover svg{stroke:#fff}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;width:44px}
.burger span{display:block;height:2px;border-radius:2px;background:var(--ink);margin:5px 0;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==========================================================================
   HERO
   Oben Titel links, Kurztext rechts, darunter das Bild über die volle
   Breite. Der runde Marker sitzt genau auf der Bildkante, die Kacheln
   steigen unten links als Treppe aus dem Bild.
   ========================================================================== */
/* Titel und Bild bilden zusammen genau einen Bildschirm, wie in der
   Vorlage (bei 1440 × 900 sind es dort 403 + 485 px). Das Bild nimmt
   die restliche Höhe, höchstens so viel, wie sein eigenes Format hergibt. */
.hero{padding-top:var(--hdr);display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.hero__top{
  flex:none;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,262px);
  gap:40px;align-items:end;
  padding-top:clamp(30px,3.7vw,68px);padding-bottom:clamp(24px,2.2vw,40px);
}
.hero__h1{
  font-family:var(--f-head);font-weight:400;
  font-size:clamp(38px,4.6vw,84px);line-height:1.12;letter-spacing:-.03em;
  color:var(--ink);
}
.hero__meta{
  display:flex;flex-wrap:wrap;row-gap:6px;
  margin-top:clamp(18px,1.9vw,32px);
  font-size:12.5px;line-height:1.4;color:var(--muted);
}
.hero__meta li{display:flex;align-items:center}
.hero__meta li + li::before{
  content:'';width:1px;height:14px;background:#D3D7DC;margin:0 clamp(14px,1.6vw,26px);
}
.hero__aside{padding-bottom:2px}
.hero__kicker{font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--ink);letter-spacing:-.01em}
.hero__lead{margin-top:10px;font-size:14px;line-height:1.62;color:var(--text)}
.hero__aside .btn{margin-top:22px}

.hero__media{position:relative;flex:1 1 auto;min-height:clamp(300px,26vw,500px);max-height:calc(100vw / 2.564)}
.hero__img{position:absolute;inset:0;overflow:hidden;background:var(--ph)}
/* Ausschnitt nach unten versetzt: dort liegen Isolation und Heizrohre */
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 80%}

/* runder Marker. Er steht links neben der Kurztext-Spalte (262 px) statt
   auf festen 67 %, sonst läuft der Ring bei kleineren Breiten über den
   Button. Bei 1440 px landet er so bei rund 66 %, wie in der Vorlage. */
.badge{
  --bw:clamp(104px,12.2vw,230px);
  position:absolute;z-index:3;top:0;
  left:calc(100% - max(var(--pad),(100% - var(--wrap)) / 2) - 262px - var(--bw) / 2 - 28px);
  width:var(--bw);aspect-ratio:1;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;border-radius:50%;
}
.badge__ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.badge__track{fill:none;stroke:rgba(206,27,39,.16);stroke-width:.8}
.badge__arc{fill:none;stroke:url(#ringGrad);stroke-width:1.5;stroke-linecap:round}
.badge__arc--a{stroke-dasharray:118 400}
.badge__arc--b{stroke-dasharray:46 400;stroke-dashoffset:-168;opacity:.55}
.badge__dot{
  position:relative;width:41%;aspect-ratio:1;border-radius:50%;
  background:var(--red);display:grid;place-items:center;
  box-shadow:0 14px 30px -12px rgba(206,27,39,.8);
  transition:transform .45s var(--ease),background .3s var(--ease);
}
.badge__dot svg{width:36%;height:36%;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.badge:hover .badge__dot{transform:scale(1.08);background:var(--red-d)}
.badge:hover .badge__dot svg{animation:nudge 1s var(--ease) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* Kachel-Treppe */
.tiles{
  --tw:clamp(132px,11vw,212px);
  --th:calc(var(--tw) * .75);
  position:absolute;z-index:2;left:0;bottom:0;
  display:grid;grid-template-columns:repeat(4,var(--tw));grid-template-rows:repeat(2,var(--th));
}
.tile--1{grid-area:1 / 1;--tc:#CE1B27;--th-c:#B5161F}
.tile--2{grid-area:2 / 2;--tc:#D83A33;--th-c:#C22A28}
.tile--3{grid-area:2 / 3;--tc:#B5161F;--th-c:#9E131C}
.tile--4{grid-area:2 / 4;--tc:#D83A33;--th-c:#C22A28}
.tile a{
  display:flex;flex-direction:column;justify-content:space-between;gap:10px;height:100%;
  padding:clamp(12px,1.25vw,22px);background:var(--tc);color:#fff;
  transition:background .35s var(--ease);
}
.tile a:hover{background:var(--th-c)}
.tile .ico{width:clamp(32px,2.8vw,48px);height:clamp(32px,2.8vw,48px);color:#fff;stroke-width:2.1;overflow:visible}
.tile span{font-size:clamp(12.5px,1vw,16px);line-height:1.35;font-weight:500}

/* ==========================================================================
   CLIP-REVEAL (Intro im Hero)
   Jede Zeile liegt in einer Maske und gleitet von unten herein. Die Zeilen
   baut js/main.js erst im Browser, im Quelltext bleibt normaler Text
   stehen. Läuft kein Skript, bleibt alles sichtbar (.cr-safe nach 2,6 s).
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js:not(.cr-safe) .hero [data-cr]:not(.cr-ready){visibility:hidden}
  .js:not(.cr-safe) .hero .tile:not(.cr-done){clip-path:inset(100% 0 0 0)}
  .js:not(.cr-safe) .hero .badge:not(.cr-done){opacity:0;transform:translate(-50%,-50%) scale(.6)}
  .js .hero__img img{animation:heroZoom 1.8s var(--ease-out) both}
}
.cr-line{display:block;overflow:hidden;padding:.06em 0 .14em;margin:-.06em 0 -.14em}
.cr-mask{display:inline-block;overflow:hidden;vertical-align:top;padding:0 0 12px;margin-bottom:-12px}
.cr-in,.cr-el{
  transform:translate3d(0,112%,0);
  animation:crUp 1.05s var(--ease-out) forwards;
  animation-delay:var(--d,0ms);
}
.cr-in{display:inline-block;vertical-align:top}
@keyframes crUp{to{transform:translate3d(0,0,0)}}

.hero.is-intro .tile{animation:tileClip .95s var(--ease-out) forwards;animation-delay:var(--d,0ms);clip-path:inset(100% 0 0 0)}
.hero.is-intro .tile .ico,.hero.is-intro .tile span{animation:crFadeUp .8s var(--ease-out) both;animation-delay:calc(var(--d,0ms) + 180ms)}
.hero.is-intro .badge{animation:badgeIn .9s var(--ease-out) both;animation-delay:var(--d,0ms)}
.hero__meta li.cr-sep::before{animation:crFade .6s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes tileClip{to{clip-path:inset(0 0 0 0)}}
@keyframes crFadeUp{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes crFade{from{opacity:0}to{opacity:1}}
@keyframes badgeIn{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes heroZoom{from{transform:scale(1.07)}to{transform:scale(1)}}

/* ==========================================================================
   WORT-ANIMATION  (Vorgabe .words, startet beim Hereinscrollen)
   ========================================================================== */
.js .words span{display:inline-block;opacity:0;transform:translateY(55px)}
.js .words.is-in span{animation:word .7s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--wd,0ms)}
@keyframes word{to{opacity:1;transform:none}}

/* ==========================================================================
   ÜBER UNS  (Titel links, Text rechts, Breitbild, drei grosse Zahlen)
   ========================================================================== */
.about{padding-bottom:clamp(40px,4.4vw,84px)}
.about__head{display:grid;grid-template-columns:minmax(0,59fr) minmax(0,41fr);align-items:start}
.about__text{max-width:484px;padding-top:.4em}
.about__text p{font-size:16px;line-height:1.68}
.about__text .btn{margin-top:28px}

.about__media{margin-top:clamp(36px,3.2vw,62px);aspect-ratio:1214 / 467;overflow:hidden;background:var(--ph)}
/* Ausschnitt auf die Heizrohre vorne, Ofen und Fenster bleiben im Bild */
.about__media img{width:100%;height:100%;object-fit:cover;object-position:50% 66%}

.stats{
  display:flex;justify-content:space-between;gap:24px;
  margin-top:clamp(20px,2vw,36px);
  padding:clamp(18px,1.9vw,32px) clamp(0px,1.8vw,26px) 0;
  border-top:1px solid var(--line);
}
.stats li{display:flex;flex-direction:column}
.stats strong{
  font-family:var(--f-head);font-weight:300;
  font-size:clamp(46px,6.1vw,118px);line-height:1;letter-spacing:-.045em;
  color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.stats li > span{margin-top:14px;font-size:13px;line-height:1.5;color:var(--ink)}

/* ==========================================================================
   SEKTIONSKOPF + GALERIE
   Bilder in vier Formaten im Wechsel, wie in der Vorlage. Der graue Grund
   beginnt auf einem Drittel der Bildhöhe und läuft in die Karten weiter.
   ========================================================================== */
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.sec__head > .btn{flex:none;margin-bottom:.35em}

.snav{display:flex;gap:10px;padding-bottom:.3em;flex:none}
.snav__btn{
  position:relative;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:#fff;cursor:pointer;
  display:grid;place-items:center;
  transition:background .3s var(--ease),border-color .3s var(--ease),opacity .3s;
}
.snav__btn > svg:last-child{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.snav__btn--next{border-color:transparent}
.snav__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.snav__ring circle{fill:none;stroke:var(--line);stroke-width:1.2}
.snav__ring .snav__ring-fg{
  stroke:var(--red);stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:141.4;stroke-dashoffset:141.4;transition:stroke-dashoffset .35s var(--ease);
}
.snav__btn:not(:disabled):hover{background:var(--red);border-color:var(--red)}
.snav__btn:not(:disabled):hover > svg:last-child{stroke:#fff}
.snav__btn:disabled{opacity:.4;cursor:default}

.progress{display:flex;gap:clamp(8px,1.1vw,18px);margin-top:clamp(24px,3.3vw,50px)}
.progress > *{
  flex:1;height:2px;padding:0;border:0;background:var(--red-soft);
  position:relative;cursor:pointer;transition:background .35s var(--ease);
}
.progress > *::before{content:'';position:absolute;inset:-10px 0}
.progress > .is-active{background:var(--red)}

.work{background:#fff}
.slider{
  --split:clamp(70px,9.3vw,180px);
  margin-top:clamp(18px,2.1vw,32px);
  background:linear-gradient(#fff 0 var(--split),var(--grey) var(--split));
}
.slider__track{
  --edge:max(var(--pad),calc((100% - var(--wrap)) / 2));
  position:relative;display:flex;align-items:flex-start;gap:clamp(10px,1vw,18px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);
  padding:0 var(--edge) 6px;
  scrollbar-width:none;cursor:grab;
}
.slider__track::-webkit-scrollbar{display:none}
.slider__track.is-drag{scroll-snap-type:none;cursor:grabbing;user-select:none}

.slide{flex:none;width:var(--w);scroll-snap-align:start}
.slide:nth-child(4n+1){--w:clamp(250px,27.6vw,530px);--ar:397 / 279}
.slide:nth-child(4n+2){--w:clamp(170px,13vw,250px);--ar:187 / 204}
.slide:nth-child(4n+3){--w:clamp(200px,20vw,385px);--ar:288 / 342}
.slide:nth-child(4n+4){--w:clamp(200px,20.1vw,386px);--ar:290 / 191}
.slide__img{position:relative;aspect-ratio:var(--ar);overflow:hidden;background:var(--ph)}
.slide__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);-webkit-user-drag:none}
.slide:hover .slide__img img{transform:scale(1.05)}
.slide__ico{
  position:absolute;left:14px;top:14px;
  width:clamp(44px,3.5vw,58px);height:clamp(44px,3.5vw,58px);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.5);
}
.tag{
  display:inline-flex;margin-top:12px;padding:5px 13px;
  border:1px solid #D7DADE;border-radius:999px;background:#fff;
  font-size:12.5px;font-weight:500;line-height:1.5;color:var(--ink);
}

/* ==========================================================================
   LEISTUNGEN  (weisse Karten auf Grau, wie die Parzellen-Karten der Vorlage)
   ========================================================================== */
.offers{background:var(--grey);padding-top:clamp(56px,6.5vw,120px);padding-bottom:clamp(64px,7vw,132px)}
.rule{position:relative;height:2px;margin-top:clamp(24px,3.3vw,50px);background:var(--red-soft)}
.rule::before{content:'';position:absolute;left:0;top:0;bottom:0;width:33%;background:var(--red)}
.offers__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.4vw,24px);
  margin-top:clamp(18px,2.1vw,32px);
}
.offer{
  display:flex;flex-direction:column;background:#fff;
  padding:clamp(22px,2.5vw,44px);scroll-margin-top:110px;
  transition:box-shadow .45s var(--ease),transform .45s var(--ease);
}
.offer:hover{box-shadow:0 34px 60px -40px rgba(21,51,78,.4);transform:translateY(-3px)}
.offer__top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center}
.offer__ico{width:clamp(56px,4.6vw,72px);height:clamp(56px,4.6vw,72px)}
.offer__h{font-family:var(--f-head);font-weight:400;font-size:clamp(24px,2.1vw,38px);line-height:1.1;letter-spacing:-.028em;color:var(--ink)}
.offer__sub{margin-top:5px;font-size:14px;color:var(--muted)}
.offer__jump{align-self:start;display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--ink)}
.offer__desc{margin-top:clamp(18px,1.8vw,28px);font-size:15.5px;line-height:1.7;max-width:62ch}
.offer__pts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;
  margin-top:clamp(18px,1.8vw,26px);padding-block:clamp(16px,1.5vw,22px);
  border-block:1px solid var(--line);
}
.offer__pts li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.offer__pts li::before{
  content:'';position:absolute;left:2px;top:.3em;width:12px;height:6.5px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg);
}
.offer__foot{margin-top:auto;padding-top:clamp(20px,2vw,30px);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.offer__link{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--ink);transition:color .3s var(--ease)}
.offer__link:hover{color:var(--red)}

/* ==========================================================================
   ABLAUF  (Farbrampe aus der Vorlage, Technik aus MS)
   Jede Zeile eine Stufe dunkler. Alle Stufen halten mit weisser Schrift
   mindestens 4,5:1, auch die hellste.
   ========================================================================== */
.plans{background:var(--grey)}
.plans__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  padding-top:clamp(56px,6.5vw,120px);padding-bottom:clamp(24px,2.2vw,40px);
}
.plans__note{max-width:36ch;font-size:14.5px;line-height:1.55;color:var(--muted);padding-bottom:.4em}

.acc__item{background:var(--c);color:#fff;scroll-margin-top:80px}
.acc__item:nth-child(1){--c:#D6412F}
.acc__item:nth-child(2){--c:#C82525}
.acc__item:nth-child(3){--c:#B41920}
.acc__item:nth-child(4){--c:#9A141C}
.acc__item:nth-child(5){--c:#7E1017}
.acc__item h3{margin:0;font:inherit}

.acc__head{
  --svc:clamp(44px,3.9vw,64px);
  width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(16px,1.7vw,28px);
  padding:clamp(20px,2.7vw,44px) 0;
  background:none;border:0;color:inherit;text-align:left;cursor:pointer;
}
/* feste Breite UND Höhe: nur mit aspect-ratio bliebe die Höhe für das
   SVG unbestimmt, es fiele auf 150 px zurück und zöge den Kreis zur Ellipse */
.acc__svc{
  flex:none;width:var(--svc);height:var(--svc);border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);color:#fff;
  display:grid;place-items:center;
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease);
}
.acc__svc .ico{display:block;width:calc(var(--svc) * .6);height:calc(var(--svc) * .6);stroke-width:2.1;overflow:visible}
.acc__head:hover .acc__svc{border-color:#fff;transform:rotate(-6deg)}
.acc__item.is-open .acc__svc{background:rgba(255,255,255,.14);border-color:#fff}
.acc__title{
  font-family:var(--f-head);font-weight:400;
  font-size:clamp(22px,2.5vw,46px);line-height:1.1;letter-spacing:-.025em;
  transition:transform .45s var(--ease);
}
.acc__head:hover .acc__title{transform:translateX(8px)}
.acc__ico{
  width:clamp(38px,3.6vw,56px);aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);display:grid;place-items:center;
  transition:transform .5s var(--ease),background .4s var(--ease),border-color .4s var(--ease);
}
.acc__ico::before{
  content:'';width:26%;aspect-ratio:1;
  border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:translateY(-18%) rotate(45deg);transition:border-color .4s var(--ease);
}
.acc__head:hover .acc__ico{border-color:#fff}
.acc__item.is-open .acc__ico{transform:rotate(180deg);background:#fff;border-color:#fff}
.acc__item.is-open .acc__ico::before{border-color:var(--c)}

.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.acc--instant .acc__panel,.acc--instant .acc__ico,.acc--instant .acc__svc,.acc--instant .acc__inner > *{transition:none !important}
.acc__inner{min-height:0;overflow:hidden;padding-left:calc(clamp(44px,3.9vw,64px) + clamp(16px,1.7vw,28px))}
.acc__inner > :last-child{margin-bottom:clamp(30px,3.4vw,58px)}

/* Inhalt läuft versetzt nach, nachdem die Zeile Platz gemacht hat */
.acc__inner > *{
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.acc__item.is-open .acc__inner > *{opacity:1;transform:none;transition-delay:calc(160ms + var(--i,0) * 70ms)}

.acc__lead{font-family:var(--f-head);font-weight:500;font-size:clamp(17px,1.35vw,22px);line-height:1.35;letter-spacing:-.015em}
.acc__desc{margin-top:10px;font-size:15.5px;line-height:1.68;color:rgba(255,255,255,.92);max-width:60ch}
.acc__more{
  display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding-bottom:4px;
  font-size:14px;font-weight:600;color:#fff;border-bottom:1.5px solid rgba(255,255,255,.5);
  transition:border-color .3s var(--ease);
}
.acc__more:hover{border-color:#fff}

/* ==========================================================================
   AUS EINER HAND  (Text links, Bild rechts)
   ========================================================================== */
.project{padding-bottom:clamp(64px,7vw,132px)}
.project__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,41%);gap:clamp(40px,6vw,110px);align-items:start}
.project__sub{margin-top:clamp(22px,2.3vw,40px);font-family:var(--f-head);font-size:clamp(17px,1.3vw,21px);color:var(--ink);letter-spacing:-.01em}
.project__lead{margin-top:12px;font-size:16px;line-height:1.68;max-width:54ch}
.duo{margin-top:clamp(26px,2.6vw,42px);max-width:560px;border-top:1px solid var(--line)}
.duo a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.duo strong{display:block;font-family:var(--f-head);font-weight:500;font-size:17px;letter-spacing:-.01em;color:var(--ink);transition:color .3s var(--ease)}
.duo__t{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.duo .svc-ico{transition:transform .45s var(--ease),border-color .3s var(--ease)}
.duo a:hover strong{color:var(--red)}
.duo a:hover .svc-ico{transform:rotate(-6deg);border-color:var(--red)}
.project__media{aspect-ratio:498 / 467;overflow:hidden;background:var(--ph);margin-top:-.4vw}
.project__media img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   STANDORT  (Luftbild, Marker, Titel unten links, Karte unten rechts)
   ========================================================================== */
.map{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(560px,50.5vw,960px);
  background:#1B232D;color:#fff;
}
/* Google Maps im Nachtmodus: die Standard-Einbettung kennt keine Stile,
   deshalb invertiert ein Filter die Karte und dreht die Farben zurück
   (Rot bleibt Rot). Ein Navy-Schleier zieht sie in die Markenfarbe. Bis
   zur Zustimmung steht ein dunkles Strassenraster als Platzhalter. */
.map__bg{
  position:absolute;inset:0;z-index:-2;
  background-color:#16202B;
  background-image:
    radial-gradient(circle at 58% 40%,rgba(206,27,39,.2),transparent 30%),
    repeating-linear-gradient(28deg,rgba(255,255,255,.05) 0 2px,transparent 2px 86px),
    repeating-linear-gradient(-62deg,rgba(255,255,255,.035) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 120px);
}
.map__bg iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:invert(90%) hue-rotate(180deg) saturate(.75) brightness(.92) contrast(.92);
}
.map__bg::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:rgba(21,51,78,.3);mix-blend-mode:multiply;
}
.map::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,17,28,.7) 0%,rgba(8,17,28,.3) 34%,rgba(8,17,28,0) 58%),
    linear-gradient(0deg,rgba(8,17,28,.45) 0%,rgba(8,17,28,0) 40%);
}

.map__consent{
  position:absolute;z-index:2;top:clamp(24px,4.4vw,84px);right:max(var(--pad),calc((100% - var(--wrap)) / 2));
  width:min(380px,calc(100% - 32px));padding:22px 22px 20px;border-radius:12px;
  background:rgba(12,24,38,.92);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.6);
  font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.82);
}
.map__consent-h{font-family:var(--f-head);font-weight:500;font-size:16px;color:#fff;margin-bottom:6px}
.map__consent a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.map__consent .btn{margin-top:16px;height:42px}
.map.has-map .map__consent{display:none}

/* Titelblock lässt Klicks zur Karte durch */
.map__in{position:absolute;left:0;right:0;bottom:clamp(40px,6.2vw,112px);z-index:1;pointer-events:none}
.map__label{
  position:relative;padding-left:16px;margin-bottom:clamp(18px,1.8vw,30px);
  font-size:13px;line-height:1.5;color:rgba(255,255,255,.86);
}
.map__label::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:3px;background:var(--red)}

.map__card{
  position:absolute;z-index:2;
  right:clamp(16px,3.2vw,60px);bottom:clamp(16px,3.2vw,60px);
  width:min(600px,42vw);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,34px);
  padding:clamp(20px,1.9vw,32px);
  background:#fff;color:var(--ink);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.6);
}
.map__card h3{font-family:var(--f-head);font-weight:500;font-size:16px;letter-spacing:-.01em}
.map__sub{margin-top:4px;font-size:13px;color:var(--muted)}
.map__desc{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--text)}
.map__pairs{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:18px}
.map__pairs dt{font-size:11.5px;color:var(--muted)}
.map__pairs dd{margin-top:3px;font-size:14px;font-weight:500;color:var(--ink)}
.map__card-r{display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.map__open{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:500}
.map__hr{font-size:12.5px;line-height:1.55;color:var(--muted)}

/* ==========================================================================
   CTA  (weiss, rechts das Kachel-Mosaik aus der Vorlage)
   ========================================================================== */
.cta{
  position:relative;overflow:hidden;background:#fff;
  min-height:clamp(250px,23.1vw,444px);display:flex;align-items:center;
}
.cta__in{position:relative;z-index:1;padding-block:clamp(48px,4.6vw,80px)}
.cta__h{
  font-family:var(--f-head);font-weight:400;
  font-size:clamp(28px,3.1vw,60px);line-height:1.15;letter-spacing:-.028em;color:var(--ink);
}
.cta p{margin-top:clamp(12px,1.2vw,20px);font-size:16px;max-width:34ch}
.cta__row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2vw,34px)}

.mosaic{
  position:absolute;top:0;right:0;height:100%;aspect-ratio:6.2 / 3;
  display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);
}
.mosaic i{background:var(--mc,transparent)}
.mosaic .m1{--mc:#FCE7E5}
.mosaic .m2{--mc:#F6C3BF}
.mosaic .m3{--mc:#E3574E}
.mosaic .m4{--mc:#C41E27}
.js .mosaic i{opacity:0;transform:scale(1.14)}
.js .mosaic.is-in i{animation:tileSet .66s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes tileSet{0%{opacity:0;transform:scale(1.14)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}

/* ==========================================================================
   KONTAKT / FOOTER
   ========================================================================== */
.ftr{background:var(--navy-d);color:#fff;padding-top:clamp(64px,8.3vw,160px)}
.ftr__top{display:grid;grid-template-columns:minmax(0,58.9fr) minmax(0,41.1fr);gap:32px;align-items:start}
.ftr__h{font-family:var(--f-head);font-weight:400;font-size:clamp(30px,3.3vw,64px);line-height:1.1;letter-spacing:-.028em}
.ftr__contacts{display:grid;grid-template-columns:minmax(0,304fr) minmax(0,195fr);gap:26px 24px;padding-top:.5em}
.ftr__contacts dt{margin-bottom:6px;font-size:12.5px;color:rgba(255,255,255,.58)}
.ftr__contacts dd{font-size:15px;line-height:1.55}
.ftr__contacts a{transition:color .3s var(--ease)}
.ftr__contacts a:hover{color:#F1A19C}
.ftr__wide{grid-column:1 / -1}
.todo{
  display:inline-block;padding:2px 10px;border:1px dashed rgba(255,255,255,.45);border-radius:4px;
  font-size:13px;color:rgba(255,255,255,.82);
}

.ftr__bottom{
  display:grid;grid-template-columns:minmax(0,58.9fr) minmax(0,25fr) minmax(0,16.1fr);gap:32px;align-items:start;
  margin-top:clamp(70px,11vw,212px);padding-bottom:clamp(48px,5vw,92px);
}
.ftr__logo{height:clamp(56px,4.6vw,84px);width:auto}
.ftr__fine{display:flex;gap:clamp(24px,4vw,72px);margin-top:22px;font-size:12px;line-height:1.65;color:rgba(255,255,255,.58)}
.ftr__fine a,.ftr__cookie{transition:color .3s var(--ease)}
.ftr__fine a:hover,.ftr__cookie:hover{color:#fff}
.ftr__cookie{padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left}
.ftr__nav{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:14px}
.ftr__nav a{color:rgba(255,255,255,.86);transition:color .3s var(--ease),transform .3s var(--ease)}
.ftr__nav a:hover{color:#fff;transform:translateX(4px)}
.ftr__legal h3{margin-bottom:10px;font-size:12.5px;font-weight:400;color:rgba(255,255,255,.58)}
.ftr__legal p{font-size:13px;line-height:1.62;color:rgba(255,255,255,.82)}

/* ==========================================================================
   KONTAKTFORMULAR
   Dunkel, links unter «Kontakt», wo die Vorlage Platz lässt. Die Angaben
   rechts bleiben oben neben dem Titel stehen.
   ========================================================================== */
.ftr__top{grid-template-areas:"h info" "form info";row-gap:clamp(28px,3vw,48px)}
.ftr__h{grid-area:h}
.ftr__contacts{grid-area:info;align-self:start}
.ftr__contacts a{overflow-wrap:anywhere}
.ftr__form{grid-area:form;max-width:640px}

.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;margin-bottom:16px}
.field label{margin-bottom:8px;font-size:12.5px;color:rgba(255,255,255,.66)}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:12px 14px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;
  font-family:var(--f-body);font-size:15px;line-height:1.4;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.field textarea{min-height:132px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.38)}
.field select{
  appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:16px;
}
.field select option{color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:rgba(255,255,255,.62);background-color:rgba(255,255,255,.1);
  box-shadow:0 0 0 4px rgba(206,27,39,.28);
}
/* Autofill sonst hellgelb mit dunkler Schrift */
.field input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 100px #1A2D43 inset;caret-color:#fff}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#FF8F87}
.field__err{display:none;margin-top:6px;font-size:12px;color:#FFB0AA}
.field.is-bad .field__err{display:block}
.form__foot{display:flex;align-items:center;justify-content:space-between;gap:18px 24px;flex-wrap:wrap;margin-top:6px}
.form__note{max-width:40ch;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.56)}
.form__note a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.form__status{min-height:1.4em;margin-top:14px;font-size:13.5px}
.form__status.ok{color:#9BE3B1}
.form__status.bad{color:#FFB0AA}

/* ==========================================================================
   PROJEKTE  (Fotos von der Baustelle im Bento-Raster, Klick öffnet Lightbox)
   ========================================================================== */
.showcase{background:#fff;padding-bottom:clamp(64px,7vw,132px)}
.showcase__note{max-width:36ch;font-size:14.5px;line-height:1.55;color:var(--muted);padding-bottom:.4em}
.bento{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,16vw,300px);
  gap:clamp(8px,.85vw,14px);margin-top:clamp(28px,3.3vw,50px);
}
.bento__item,.pgrid__item{position:relative;display:block;overflow:hidden;background:var(--ph);isolation:isolate}
.bento__item--a{grid-column:1 / 3;grid-row:1 / 3}
.bento__item--b{grid-column:3;grid-row:1}
.bento__item--c{grid-column:4;grid-row:1 / 3}
.bento__item--d{grid-column:3;grid-row:2}
.bento__item--e{grid-column:1;grid-row:3}
.bento__item--f{grid-column:2 / 4;grid-row:3}
.bento__item--g{grid-column:4;grid-row:3}
.bento__item img,.pgrid__item img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.bento__item::after,.pgrid__item::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(15,34,54,.74) 0%,rgba(15,34,54,0) 48%);
  opacity:0;transition:opacity .45s var(--ease);
}
.bento__cap{
  position:absolute;z-index:1;left:16px;right:16px;bottom:14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:14px;font-weight:500;line-height:1.3;color:#fff;
  opacity:0;transform:translate3d(0,8px,0);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.bento__zoom{position:relative;flex:none;width:32px;height:32px;border-radius:50%;background:var(--red)}
.bento__zoom::before,.bento__zoom::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1.8px;background:#fff;transform:translate(-50%,-50%)}
.bento__zoom::after{transform:translate(-50%,-50%) rotate(90deg)}
.bento__item:hover img,.pgrid__item:hover img{transform:scale(1.05)}
.bento__item:hover::after,.bento__item:focus-visible::after,.pgrid__item:hover::after,.pgrid__item:focus-visible::after{opacity:1}
.bento__item:hover .bento__cap,.bento__item:focus-visible .bento__cap,.pgrid__item:hover .bento__cap,.pgrid__item:focus-visible .bento__cap{opacity:1;transform:none}
@media (hover:none){
  .bento__item::after,.pgrid__item::after{opacity:1}
  .bento__cap{opacity:1;transform:none}
}

.showcase__more{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:clamp(24px,2.6vw,40px);font-size:14px;color:var(--muted)}

/* ---------- Projektseite ---------- */
.page{padding-top:var(--hdr)}
.page__head{padding-top:clamp(36px,4.6vw,84px)}
.page__h1{font-family:var(--f-head);font-weight:400;font-size:clamp(38px,4.6vw,84px);line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.pgrid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,.85vw,14px);
  margin-top:clamp(20px,2.4vw,36px);padding-bottom:clamp(64px,7vw,120px);
}
.pgrid__item{aspect-ratio:3 / 4}

.lightbox{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;
  padding:clamp(56px,6vw,80px) clamp(16px,6vw,96px);border:0;
  background:rgba(8,16,26,.95);color:#fff;
}
.lightbox[open]{display:grid;place-items:center}
.lightbox::backdrop{background:transparent}
.lightbox__fig{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%}
.lightbox__img{
  width:auto;height:auto;max-width:min(1100px,100%);
  max-height:calc(100vh - 170px);max-height:calc(100svh - 170px);
  border-radius:4px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
}
.lightbox__cap{max-width:60ch;font-size:14px;line-height:1.5;text-align:center;color:rgba(255,255,255,.86)}
.lightbox__count{position:absolute;top:24px;left:24px;font-size:13px;color:rgba(255,255,255,.62)}
.lightbox__btn{
  position:absolute;width:48px;height:48px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;
  display:grid;place-items:center;transition:background .3s var(--ease),border-color .3s var(--ease);
}
.lightbox__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lightbox__btn:hover{background:var(--red);border-color:var(--red)}
.lightbox__close{top:14px;right:14px}
.lightbox__prev{left:16px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:16px;top:50%;transform:translateY(-50%)}
.lb-open{overflow:hidden}

/* ==========================================================================
   EINSATZGEBIET, FAQ, ZÜRICH-SEITE
   Sichtbarer Text für die lokale Suche und für KI-Antworten: Orte als
   Liste, Fragen als <details> mit kurzen, direkten Antworten.
   ========================================================================== */
.map__towns{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(18px,1.8vw,26px);max-width:min(560px,48vw)}
.map__towns li{
  padding:5px 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  background:rgba(8,17,28,.42);font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.9);
}
.map__more{
  display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding-bottom:3px;pointer-events:auto;
  font-size:14px;font-weight:600;color:#fff;border-bottom:1.5px solid rgba(255,255,255,.5);transition:border-color .3s var(--ease);
}
.map__more:hover{border-color:#fff}
.ftr__area{margin-top:14px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.75)}

.faq{background:var(--grey);padding-bottom:clamp(64px,7vw,132px)}
.faq__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);align-items:start}
.faq__note{margin-top:20px;max-width:32ch;font-size:15px;line-height:1.6;color:var(--muted)}
.faq__note a,.faq__a a,.area a:not(.btn){color:var(--red)}
.faq__note a:hover,.faq__a a:hover,.area a:not(.btn):hover{text-decoration:underline}
.faq__list{border-top:1px solid #D6D9DD}
.faq__item{border-bottom:1px solid #D6D9DD}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(18px,1.7vw,24px) 0;cursor:pointer;list-style:none;
  font-family:var(--f-head);font-weight:400;font-size:clamp(17px,1.35vw,21px);line-height:1.35;letter-spacing:-.015em;
  color:var(--ink);transition:color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:'';flex:none;width:38px;height:38px;border-radius:50%;border:1px solid #C9CDD2;
  background:
    linear-gradient(var(--ink),var(--ink)) center / 12px 1.6px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center / 1.6px 12px no-repeat;
  transition:transform .4s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease);
}
.faq__item summary:hover{color:var(--red)}
.faq__item[open] summary::after{
  transform:rotate(45deg);border-color:var(--red);background-color:var(--red);
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
}
.faq__a{padding:0 54px clamp(18px,1.7vw,24px) 0;font-size:15.5px;line-height:1.7;color:var(--text);animation:crFadeUp .45s var(--ease-out)}

/* ---------- Zürich-Seite ---------- */
.area__lead{margin-top:clamp(18px,1.8vw,28px);max-width:62ch;font-size:clamp(16.5px,1.3vw,19px);line-height:1.65}
.area__facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 28px;
  margin-top:clamp(28px,3vw,44px);padding-top:22px;border-top:1px solid var(--line);
}
.area__facts dt{margin-bottom:6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.area__facts dd{font-size:15px;line-height:1.55;color:var(--ink)}
.area__row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,41%);gap:clamp(36px,6vw,110px);align-items:center;
  padding-block:clamp(48px,6vw,110px);border-top:1px solid var(--line);
}
.area__row:first-child{border-top:0}
.area__row--flip .area__media{order:-1}
.area__h{font-family:var(--f-head);font-weight:400;font-size:clamp(26px,2.7vw,48px);line-height:1.15;letter-spacing:-.025em;color:var(--ink)}
.area__row p{margin-top:14px;max-width:56ch;font-size:16px;line-height:1.72}
.area__media{aspect-ratio:4 / 3;overflow:hidden;background:var(--ph)}
.area__media img{width:100%;height:100%;object-fit:cover}
.area__towns{padding-block:clamp(48px,6vw,100px);border-top:1px solid var(--line)}
.towns{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;max-width:980px}
.towns li{padding:6px 13px;border:1px solid #D7DADE;border-radius:999px;background:#fff;font-size:13.5px;color:var(--ink)}
.area__towns p{margin-top:18px;max-width:62ch;font-size:15px;line-height:1.65;color:var(--muted)}

/* ==========================================================================
   COOKIE-HINWEIS  (unten links, blockiert nichts)
   ========================================================================== */
.cookie{
  position:fixed;z-index:150;left:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);
  width:min(440px,calc(100% - 24px));
  padding:22px 22px 20px;border-radius:14px;
  background:#fff;color:var(--text);
  box-shadow:0 30px 70px -24px rgba(15,34,54,.45),0 0 0 1px rgba(15,34,54,.07);
  opacity:0;transform:translate3d(0,24px,0);
  transition:opacity .4s var(--ease),transform .55s var(--ease-out);
}
.cookie.is-open{opacity:1;transform:none}
.cookie__h{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-weight:500;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.cookie__h svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cookie__h svg circle{fill:var(--red);stroke:none}
.cookie__t{margin-top:10px;font-size:13.5px;line-height:1.6}
.cookie__t a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.cookie__row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.cookie__row .btn{height:44px;padding:0 16px}

/* ==========================================================================
   RECHTSSEITEN  (Impressum, Datenschutz)
   ========================================================================== */
.legal{padding-top:calc(var(--hdr) + clamp(40px,5vw,80px));padding-bottom:clamp(64px,8vw,120px)}
.legal__in{max-width:860px}
.legal__crumb{font-size:13px;color:var(--muted);margin-bottom:22px}
.legal__crumb a{color:var(--red)}
.legal__crumb a:hover{text-decoration:underline}
.legal__crumb span[aria-hidden]{margin-inline:6px}
.legal__h1{font-family:var(--f-head);font-weight:400;font-size:clamp(34px,4.2vw,64px);line-height:1.08;letter-spacing:-.03em;color:var(--ink)}
.legal__intro{margin-top:20px;font-size:clamp(16px,1.3vw,19px);line-height:1.6}
.legal h2{margin-top:clamp(38px,4vw,56px);margin-bottom:12px;font-family:var(--f-head);font-weight:500;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.02em;color:var(--ink)}
.legal h3{margin-top:26px;font-family:var(--f-head);font-weight:500;font-size:17px;color:var(--ink)}
.legal p{margin-top:12px;line-height:1.72}
.legal p a,.legal dd a,.legal li a{color:var(--red)}
.legal p a:hover,.legal dd a:hover,.legal li a:hover{text-decoration:underline}
.legal__addr{margin-top:14px;font-style:normal;line-height:1.72;padding-left:18px;border-left:3px solid var(--red);color:var(--ink)}
.legal__dl{margin-top:16px;display:grid;gap:12px}
.legal__dl > div{display:grid;grid-template-columns:240px 1fr;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.legal__dl dt{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.legal__dl dd{font-size:15.5px;line-height:1.6;color:var(--ink)}
.legal em{font-style:normal;color:#9A4A0C;background:#FFF1E3;padding:1px 7px}
.legal__list{margin-top:12px}
.legal__list li{position:relative;padding:4px 0 4px 20px;line-height:1.65}
.legal__list li::before{content:'';position:absolute;left:0;top:1em;width:9px;height:2px;background:var(--red)}
.legal__stand{margin-top:clamp(40px,5vw,64px);padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.js .reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--rd,0ms)}
.js .reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIVE
   Mobil bleibt so nah wie möglich an der Desktop-Fassung: Kachel-Treppe an
   der Bildkante, Kennzahlen in einer Reihe, Galerie in wechselnden Formaten.
   ========================================================================== */
@media (max-width:1180px){
  .offers__grid{grid-template-columns:1fr}
  .offer{max-width:760px}
}

@media (max-width:1080px){
  .nav{gap:24px}
  .hdr__call{display:none}
}

@media (max-width:980px){
  :root{--hdr:76px}
  html{scroll-padding-top:76px}
  .hdr.is-stuck .hdr__in{height:68px}
  .hdr__in{grid-template-columns:1fr auto}
  .hdr__logo img{height:48px}
  .hdr.is-stuck .hdr__logo img{height:42px}
  .hdr__right{gap:10px}
  .hdr__call{display:grid}
  .hdr__cta{height:42px;padding:0 18px;font-size:13.5px}
  .burger{display:block}

  .nav{
    position:fixed;z-index:1;inset:0 0 auto;
    padding:calc(var(--hdr) + 12px) var(--pad) 28px;
    background:#fff;flex-direction:column;align-items:stretch;gap:0;
    transform:translateY(-100%);transition:transform .5s var(--ease);
    box-shadow:0 26px 60px -20px rgba(21,51,78,.3);
  }
  .nav.is-open{transform:none}
  .nav a:not(.btn){font-family:var(--f-head);font-size:22px;letter-spacing:-.02em;color:var(--ink);padding:15px 0;border-bottom:1px solid var(--line)}
  .nav .nav__cta{display:inline-flex;margin-top:22px;height:50px}

  /* Hero gestapelt: Bild im eigenen Format, die Kachel-Treppe hängt wie
     auf dem Desktop an der unteren Bildkante */
  .hero{min-height:0}
  .hero__top{grid-template-columns:1fr;gap:26px;align-items:start}
  .hero__aside{max-width:520px}
  .hero__media{flex:none;min-height:0;max-height:none;height:auto}
  .hero__img{position:relative;aspect-ratio:2008 / 783}
  .badge{left:auto;right:var(--pad);transform:translate(0,-50%)}
  .js:not(.cr-safe) .hero .badge:not(.cr-done){transform:translate(0,-50%) scale(.6)}
  @keyframes badgeIn{from{opacity:0;transform:translate(0,-50%) scale(.6)}to{opacity:1;transform:translate(0,-50%) scale(1)}}
  .tiles{
    --mth:clamp(80px,16vw,128px);
    position:relative;left:auto;bottom:auto;margin-top:calc(var(--mth) * -1);
    grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:var(--mth) var(--mth);
  }

  .about__head{grid-template-columns:1fr;gap:22px}
  .about__text{max-width:620px;padding-top:0}
  .plans__head{flex-direction:column;align-items:flex-start;gap:14px}
  .project__grid{grid-template-columns:1fr}
  .project__media{max-width:640px;margin-top:0}
  .map__card{width:min(560px,calc(100% - 32px))}

  .cta{flex-direction:column;align-items:stretch;min-height:0}
  .cta__in{width:100%}
  .mosaic{position:relative;width:100%;height:auto}

  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .faq__grid{grid-template-columns:1fr;gap:28px}
  .area__facts{grid-template-columns:1fr 1fr}
  .area__row{grid-template-columns:1fr;gap:28px}
  .area__row--flip .area__media{order:0}
  .area__media{max-width:640px}
  .ftr__top{grid-template-columns:1fr;grid-template-areas:"h" "info" "form";gap:30px}
  .ftr__form{max-width:none}
  .ftr__bottom{grid-template-columns:1fr 1fr;row-gap:44px}
  .ftr__brand{grid-column:1 / -1}
}

@media (max-width:760px){
  .hdr__cta-x{display:none}

  .hero__meta{row-gap:2px;font-size:12px}
  .hero__meta li + li::before{display:none}
  .hero__meta li:not(:last-child)::after{content:'·';margin:0 7px;color:#B3B9C1}
  .hero__meta li.cr-sep::after{animation:crFade .6s var(--ease) both;animation-delay:var(--d,0ms)}
  .hero__img{aspect-ratio:4 / 3}
  .hero__img img{object-position:64% 70%}
  .badge{width:96px;right:16px}
  .tiles{--mth:clamp(78px,24vw,112px)}
  .tile a{padding:10px 10px 11px;gap:6px}
  .tile .ico{width:24px;height:24px}
  .tile span{font-size:11.5px;line-height:1.3;-webkit-hyphens:manual;hyphens:manual}


  .about__media{aspect-ratio:16 / 10}
  .stats{gap:12px;padding-inline:0}
  .stats li{flex:1 1 0;min-width:0}
  .stats strong{font-size:clamp(32px,9.6vw,44px)}
  .stats .unit{font-size:.5em;letter-spacing:-.01em}
  .stats li > span{margin-top:10px;font-size:11.5px}

  .sec__head{flex-wrap:wrap}
  .slide:nth-child(4n+1){--w:72vw}
  .slide:nth-child(4n+2){--w:46vw}
  .slide:nth-child(4n+3){--w:54vw}
  .slide:nth-child(4n+4){--w:64vw}
  .slide__ico{width:40px;height:40px;left:10px;top:10px}

  .pgrid{grid-template-columns:1fr 1fr}
  .map__towns{max-width:none}
  .faq__a{padding-right:0}
  .area__facts{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:40vw;grid-auto-flow:dense}
  .bento__item--a{grid-column:1 / -1;grid-row:span 2}
  .bento__item--b,.bento__item--d,.bento__item--e,.bento__item--g{grid-column:auto;grid-row:auto}
  .bento__item--c{grid-column:auto;grid-row:span 2}
  .bento__item--f{grid-column:1 / -1;grid-row:auto}
  .bento__cap{left:12px;right:12px;bottom:10px;font-size:12.5px}
  .bento__zoom{width:26px;height:26px}
  .lightbox{padding:64px 12px 92px}
  .lightbox__img{max-height:calc(100svh - 200px)}
  .lightbox__prev,.lightbox__next{top:auto;bottom:22px;transform:none}
  .lightbox__prev{left:calc(50% - 60px)}
  .lightbox__next{right:calc(50% - 60px)}

  .offer__top{grid-template-columns:auto minmax(0,1fr)}
  .offer__jump{display:none}
  .offer__pts{grid-template-columns:1fr}

  .acc__head{--svc:44px;gap:14px}
  .acc__inner{padding-left:0}
  .acc__ico{width:36px}

  .map{min-height:0;display:flex;flex-direction:column}
  .map__consent{left:var(--pad);right:var(--pad);width:auto;top:20px}
  .map__in{position:relative;bottom:auto;padding-top:clamp(260px,72vw,400px);padding-bottom:30px}
  .map__card{position:relative;right:auto;bottom:auto;width:auto;margin:0 var(--pad) var(--pad);grid-template-columns:1fr}

  .form__row{grid-template-columns:1fr;gap:0}
  .form__foot{flex-direction:column-reverse;align-items:stretch}
  .form__foot .btn{width:100%}

  .ftr__contacts{grid-template-columns:1fr 1fr}
  .ftr__fine{flex-direction:column;gap:10px}

  .cookie{left:12px;right:12px;bottom:12px;width:auto;padding:18px 18px 16px}
}

@media (max-width:480px){
  .hero__h1{font-size:clamp(32px,9.4vw,44px)}
  .ftr__contacts{grid-template-columns:1fr}
  .legal__dl > div{grid-template-columns:1fr;gap:4px}
  .cta__row .btn,.offer__foot .btn{flex:1 1 100%}
}

@media (max-width:380px){
  .hdr__logo img,.hdr.is-stuck .hdr__logo img{height:42px}
  .hdr__right{gap:8px}
  .hdr__call{width:40px;height:40px}
  .hdr__cta{padding:0 12px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0ms !important;transition-duration:.001ms !important}
  .badge__ring{animation:none}
  .js .reveal{opacity:1;transform:none}
  .js .words span{opacity:1;transform:none}
  .js .mosaic i{opacity:1;transform:none}
  .acc__inner > *{opacity:1;transform:none;transition-delay:0ms !important}
}