/* Fliesen ZEC – statischer Nachbau, ohne WordPress/Brizy */

:root{
  --dark:#393d3e;
  --taupe:#7b7169;
  --sand:#bfb3ae;
  --text:#ffffff;
  --body-font:'Roboto Condensed',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body-font);
  font-weight:300;
  font-size:16px;
  line-height:1.5;
  color:#000;
  background:#fff;
}
img{display:block;max-width:100%}
h1,h2{font-weight:300;margin:0}
a{color:inherit}

.rt p{margin:0 0 16px}
.rt p:last-child{margin-bottom:0}
.rt ul{margin:0 0 16px;padding-left:20px}
.rt strong{font-weight:400}

/* ---------- Header ---------- */
.head{
  position:relative;z-index:30;
  height:142px;margin-bottom:2px;background:var(--dark);
  display:flex;align-items:center;
  padding:10px 265px 0 192px;
}
.head__logo{display:block;margin-right:auto}
.head__logo img{width:179px;height:72px}
.head__nav{display:flex;gap:45px}
.head__nav a{
  font-size:20px;font-weight:300;color:#fff;text-decoration:none;
  padding:0 5px;transition:opacity .2s;
}
.head__nav a:hover{opacity:.7}
.head__burger{display:none}

/* ---------- Hero-Slider ---------- */
.hero{position:relative;height:397px;overflow:hidden}
.hero__track{position:relative;height:100%}
/* Ueberblendung statt Verschieben: die Bilder liegen uebereinander. */
.hero__slide{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 1.6s ease;
}
.hero__slide.is-active{opacity:1}
.hero__bg{
  position:absolute;inset:0;
  will-change:transform;transform-origin:center center;backface-visibility:hidden;
}
.hero__bg picture,.hero__bg img{display:block;width:100%;height:100%}
.hero__bg img{object-fit:cover;object-position:50% 52%}
.hero__slide::after{content:"";position:absolute;inset:0}
.hero__slide p{
  position:relative;z-index:1;margin:0;
  font-size:39px;line-height:46px;font-weight:300;color:#fff;text-align:center;
  text-shadow:0 2px 18px rgba(0,0,0,.28);
}
.hero__slide p span{display:inline-block}
.hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  background:none;border:0;cursor:pointer;
  color:#fff;font-size:28px;line-height:1;padding:10px;opacity:.85;
}
.hero__arrow:hover{opacity:1}
.hero__arrow--prev{left:8px}
.hero__arrow--next{right:8px}
.hero__dots{
  position:absolute;left:0;right:0;bottom:52px;z-index:2;
  display:flex;justify-content:center;gap:8px;
}
.hero__dots button{
  width:8px;height:8px;padding:0;border-radius:50%;
  border:1px solid #fff;background:none;cursor:pointer;
}
.hero__dots button.is-active{background:#fff}
.hero__dots button{transition:transform .25s,background .25s}
.hero__dots button:hover{transform:scale(1.35)}
.hero__arrow{transition:opacity .2s,transform .25s}
.hero__arrow--prev:hover{transform:translateY(-50%) translateX(-3px)}
.hero__arrow--next:hover{transform:translateY(-50%) translateX(3px)}
/* duenner Fortschrittsbalken am unteren Rand des Slider-Bereichs */
.hero__fortschritt{
  position:absolute;left:0;bottom:0;height:2px;width:0;
  background:rgba(255,255,255,.75);z-index:2;
}

/* ---------- Karten ---------- */
.card{padding:51px 60px}
.card--dark{background:var(--dark);color:var(--text)}
.card--taupe{background:var(--taupe);color:var(--text)}
.card h2{font-size:39px;line-height:46px;margin-bottom:28px}

/* ---------- Über uns ---------- */
/* Die Karten stehen im Textfluss und wachsen mit ihrem Inhalt (wie im Original,
   dort dehnt ein offenes Akkordeon die Karte und damit die Seite). Nur die
   überlappenden Bilder sind absolut positioniert. */
.about{background:#fff;padding:117px 0 115px}
.about__inner{position:relative;width:1152px;margin:0 auto}
.about__img{
  position:absolute;left:108px;top:83px;z-index:2;
  width:363px;height:451px;object-fit:cover;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.about__card{
  margin-left:406px;width:668px;min-height:602px;
  padding:51px 60px 51px 97px;
}
.about__card .rt{font-size:16px;line-height:1.55}
.about__card .rt p:first-child{margin-bottom:22px}

/* ---------- Projekte ---------- */
.projects{background:#fff;padding-bottom:0}
.projects__inner{position:relative;width:1152px;margin:0 auto;padding-top:130px}
.projects__img{
  position:absolute;left:576px;top:64px;
  width:468px;height:467px;object-fit:cover;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.projects__card{
  position:relative;z-index:2;
  margin-left:108px;width:468px;min-height:434px;padding:40px 45px;
}
/* ragt bewusst in den Impressionen-Bereich hinein, wie im Original */
.projects__news{
  position:relative;z-index:3;
  margin:-63px 0 -54px 208px;width:562px;min-height:260px;padding:40px 45px;
}
.projects__news h2{font-size:24px;line-height:32px;margin-bottom:16px}

/* ---------- Akkordeon ---------- */
.acc__item{border-bottom:1px solid rgba(255,255,255,.25)}
.acc__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 0;background:none;border:0;cursor:pointer;
  font-family:var(--body-font);font-size:16px;font-weight:300;color:#fff;text-align:left;
}
.acc__icon{
  flex:0 0 auto;width:12px;height:12px;
  border-right:1px solid #fff;border-bottom:1px solid #fff;
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s;
}
.acc__head[aria-expanded="true"] .acc__icon{transform:rotate(-135deg) translate(-3px,-3px)}
.acc__body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.acc__item.is-open .acc__body{max-height:1600px}
.acc__body .rt{padding:4px 0 18px;font-size:16px;line-height:1.55}
.acc__grid{display:flex;flex-wrap:wrap;gap:5px;padding:8px 0 18px}
.acc__grid img{object-fit:cover}
.acc__grid--pool img{width:auto;max-height:180px}
.acc__grid--reno img{width:109px;height:82px}

/* ---------- Impressionen ---------- */
.gallery{
  /* +59px gegenueber dem Original: das neue Raster baut flacher, so bleibt
     der Rest der Seite deckungsgleich */
  position:relative;padding:150px 0 155px;
  background:url(img/colin-meg-8nKqk7tcxJc-unsplash.jpg) 50% 54% repeat;
}
.gallery::before{content:"";position:absolute;inset:0;background:rgba(47,47,47,.98)}
.gallery h2,.gallery__grid{position:relative;z-index:1}
.gallery h2{
  font-size:39px;line-height:46px;color:#fff;text-align:center;margin-bottom:56px;
}
/* Ruhiges 3x2-Raster in einheitlichem 4:3 statt der krummen Masonry-Hoehen.
   Beim Darueberfahren waechst das Foto im Rahmen — kein Lupen-Zeiger. */
.gallery__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  width:1152px;margin:0 auto;
}
.kachel{
  position:relative;overflow:hidden;
  margin:0;padding:0;border:0;background:#2f2f2f;cursor:pointer;
  aspect-ratio:4/3;
  box-shadow:0 12px 30px -18px rgba(0,0,0,.9);
  transition:box-shadow .4s ease;
}
.kachel img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.61,.36,1),filter .5s ease;
}
.kachel:hover img,.kachel:focus-visible img{transform:scale(1.09);filter:brightness(1.06)}
.kachel:hover{box-shadow:0 22px 46px -20px rgba(0,0,0,1)}
.kachel:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* feiner heller Rahmen, der beim Darueberfahren aufscheint */
.kachel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid rgba(255,255,255,0);transition:border-color .4s ease;
}
.kachel:hover::after{border-color:rgba(255,255,255,.45)}

/* ---------- Leistungen ---------- */
.services{background:#fff;padding:110px 0 100px}
.services__inner{position:relative;width:1152px;margin:0 auto;padding-top:60px}
.services__img{
  position:absolute;left:108px;top:0;z-index:2;
  width:374px;height:444px;object-fit:cover;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.services__card{
  margin-left:412px;width:612px;min-height:464px;
  padding:45px 55px 45px 78px;
}
.services__card .acc__item{border-bottom-color:rgba(255,255,255,.35)}

/* ---------- Kontakt ---------- */
.contact{
  position:relative;padding:124px 0 65px;
  background:url(img/alev-takil-eKLJWrBGGE0-unsplash.jpg) 33% 53% repeat;
}
.contact::before{content:"";position:absolute;inset:0;background:rgba(123,113,105,.95)}
.contact>*{position:relative;z-index:1}
.contact h2{font-size:39px;line-height:46px;color:#fff;text-align:center;margin-bottom:8px}
.contact__phone{margin:0 0 44px;color:#fff;text-align:center;font-size:16px}
.contact__phone a{text-decoration:none}
/* Zwei Spalten wie im Original: Formular links (428), Karte rechts (442) */
.contact__grid{width:936px;margin:0 auto;display:flex;gap:23px;padding-left:25px}
.contact__form{width:428px;flex:0 0 428px}
.contact__map{flex:0 0 442px;margin-top:3px}
.karte{position:relative;width:442px;height:442px;background:#fff}
.karte iframe{display:block;width:100%;height:100%;border:0}
.karte__platzhalter{
  height:100%;padding:28px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  text-align:center;color:var(--dark);
}
.karte__adresse{margin:0;font-size:17px;line-height:1.6}
.karte__adresse strong{font-weight:400;font-size:19px}
.karte__btn{
  padding:13px 26px;cursor:pointer;
  font-family:var(--body-font);font-size:16px;font-weight:300;letter-spacing:1px;
  color:#fff;background:var(--taupe);border:0;transition:opacity .2s;
}
.karte__btn:hover{opacity:.85}
.karte__hinweis{margin:0;font-size:13px;color:#666;max-width:270px}
.karte__route{font-size:14px;color:var(--taupe)}
.contact__row{display:flex;gap:10px}
/* Maße wie im Original: 54px hohe Felder, 10px Abstand, weißer Rand, 16px Schrift */
/* display:block – sonst erzeugt der Zeilenumbruch nach dem textarea 7px Extraluft */
.contact__form input,.contact__form textarea{
  display:block;
  width:100%;height:54px;margin-bottom:10px;padding:0 16px;
  font-family:var(--body-font);font-size:16px;font-weight:300;color:#fff;
  background:none;border:1px solid #fff;border-radius:0;
}
.contact__form textarea{height:165px;padding:14px 16px;resize:vertical}
.contact__form ::placeholder{color:rgba(255,255,255,.85)}
.contact__form input:focus,.contact__form textarea:focus{outline:1px solid #fff}
.contact__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.contact__form button{
  width:100%;height:67px;cursor:pointer;
  font-family:var(--body-font);font-size:16px;font-weight:300;letter-spacing:1px;
  color:#fff;background:var(--sand);border:1px solid #fff;transition:opacity .2s;
}
.contact__form button:hover{opacity:.85}
.contact__form button[disabled]{opacity:.6;cursor:default}
.contact__status{min-height:22px;margin:10px 0 0;color:#fff;font-size:14px}

/* ---------- Footer ---------- */
.foot{background:var(--dark);color:#fff;padding:78px 0 40px}
.foot__grid{
  width:min(1240px,100% - 80px);margin:0 auto;
  display:grid;grid-template-columns:1.25fr .75fr .95fr;gap:56px;
}
.foot__logo{width:179px;height:72px;margin-bottom:22px}
.foot__claim{margin:0 0 24px;max-width:40ch;font-size:15px;line-height:1.7;color:rgba(255,255,255,.72)}
.foot__cta{
  display:inline-block;padding:13px 26px;text-decoration:none;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;border:1px solid rgba(255,255,255,.45);
  transition:background .25s,border-color .25s;
}
.foot__cta:hover{background:rgba(255,255,255,.12);border-color:#fff}
.foot__h{
  margin:0 0 20px;font-size:11px;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sand);
}
.foot__nav{display:flex;flex-direction:column;gap:11px}
.foot__nav a,.foot__tel,.foot__mail{
  width:fit-content;text-decoration:none;color:rgba(255,255,255,.82);
  transition:color .2s;
}
.foot__nav a:hover,.foot__tel:hover,.foot__mail:hover{color:#fff}
.foot__tel{display:block;margin-bottom:8px;font-size:23px;letter-spacing:.02em}
.foot__mail{display:block;margin-bottom:18px;font-size:15px}
.foot__adr{font-style:normal;font-size:15px;line-height:1.7;color:rgba(255,255,255,.6)}

/* ---------- Popups ---------- */
.popup{
  position:fixed;inset:0;z-index:100;
  background:rgba(57,61,62,.9);
  display:flex;align-items:center;justify-content:center;padding:40px 20px;
}
.popup[hidden]{display:none}
.popup__panel{
  position:relative;width:750px;max-height:100%;overflow-y:auto;
  background:#fff;color:#000;padding:52px 60px;
}
.popup__panel h2{font-size:32px;line-height:40px;margin-bottom:24px}
.popup__panel .rt{font-size:15px;line-height:1.6}
.popup__close{
  position:absolute;top:12px;right:16px;
  background:none;border:0;cursor:pointer;font-size:32px;line-height:1;color:var(--dark);
}

/* ---------- Responsive ----------
   Die versetzte Anordnung des Originals braucht die vollen 1152px Inhaltsbreite.
   Darunter werden Bild und Karte schlicht untereinander gestapelt. */
@media (max-width:1199px){
  .head{padding:10px 40px 0}
  .gallery__grid{width:auto;margin:0 40px}
  .about,.services{padding:64px 0}
  .about__inner,.projects__inner,.services__inner{
    position:static;width:auto;min-height:0;margin:0 40px;padding-top:0;
    display:flex;flex-direction:column;gap:28px;
  }
  .about__img,.projects__img,.services__img,
  .about__card,.projects__card,.projects__news,.services__card{
    position:static;width:100%;height:auto;min-height:0;margin-left:0;
  }
  .about__img,.services__img,.projects__img{max-width:468px;height:auto}
  .projects{padding:0 0 64px}
  .projects__news{margin:0}
  .about__card{padding:44px 48px}
}

@media (max-width:900px){
  .head{height:auto;padding:20px 24px;flex-wrap:wrap}
  .head__logo img{width:140px;height:auto}
  .head__burger{
    display:flex;flex-direction:column;gap:5px;
    background:none;border:0;cursor:pointer;padding:8px;
  }
  .head__burger span{display:block;width:26px;height:2px;background:#fff}
  .head__nav{
    display:none;flex-basis:100%;flex-direction:column;gap:0;padding-top:16px;
  }
  .head__nav.is-open{display:flex}
  .head__nav a{padding:10px 0;border-top:1px solid rgba(255,255,255,.2)}

  .hero{height:320px}
  .hero__slide p{font-size:26px;line-height:34px;padding:0 40px}

  .about,.services{padding:48px 0}
  .about__inner,.projects__inner,.services__inner{margin:0 24px;gap:24px}
  .card,.about__card{padding:32px 28px}
  .card h2{font-size:30px;line-height:38px}

  .projects{padding-bottom:48px}
  .acc__grid--pool img{max-height:140px}

  .gallery{padding:56px 0}
  .gallery h2{font-size:30px;line-height:38px;margin-bottom:28px}
  .gallery__grid{width:auto;margin:0 24px;grid-template-columns:repeat(2,1fr);gap:10px}

  .contact{padding:56px 24px}
  .contact h2{font-size:30px;line-height:38px}
  .contact__grid{width:auto;padding:0;flex-direction:column;align-items:center;gap:24px}
  .contact__form{width:100%;max-width:428px;flex:0 1 auto;margin:0 auto}
  .contact__map{width:100%;max-width:442px;flex:0 1 auto;margin:0}
  .karte{width:100%;height:340px}
  .contact__row{flex-direction:column;gap:0}

  .foot{padding:56px 0 34px}
  .foot__grid{width:min(1240px,100% - 44px);grid-template-columns:1fr;gap:38px}
  .foot__bar{width:min(1240px,100% - 44px);margin-top:38px;
    flex-direction:column;align-items:flex-start;gap:22px}
  .foot__legal{gap:12px}
  .destec-pop{right:auto;left:0}
  .popup__panel{width:100%;padding:44px 24px}
}

/* =========================================================
   Politur: Bewegung, destec-Leiste, Lichtkasten
   Die Ruhelage aller Elemente bleibt exakt die des Originals —
   Parallax laeuft ueber object-position bzw. background-position,
   nicht ueber transform, damit sich keine Box verschiebt.
   ========================================================= */

/* Startzustand der Einblendungen. Ohne JS (oder bei reduzierter Bewegung)
   bleibt alles sichtbar — deshalb setzt erst das Skript die Klasse. */
.js-reveal{opacity:0;transform:translateY(24px)}

/* ---------- Rechtsleiste + destec-Signatur im Footer ---------- */
.foot__bar{
  width:min(1240px,100% - 80px);margin:56px auto 0;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.foot__legal{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:13px;color:rgba(255,255,255,.55);
}
.foot__legallink{
  padding:0;border:0;background:none;cursor:pointer;
  font:inherit;color:rgba(255,255,255,.78);
  text-decoration:underline;text-underline-offset:3px;
}
.foot__legallink:hover{color:#fff}
.foot__build{color:rgba(255,255,255,.36);letter-spacing:.06em}
.destec{position:relative;display:inline-flex}
.made-by{
  display:inline-flex;align-items:center;gap:14px;
  text-decoration:none;opacity:.75;transition:opacity .25s;
}
.destec:hover .made-by{opacity:1}
.made-by>span:first-child{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.made-by img{height:44px;width:auto;filter:brightness(0) invert(1)}
.destec-pop{
  position:absolute;bottom:calc(100% + 14px);right:0;width:300px;
  background:#fff;color:#000;
  padding:19px 20px 20px;text-align:left;
  box-shadow:0 26px 50px -24px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
  z-index:5;pointer-events:none;
}
.destec:hover .destec-pop,.destec:focus-within .destec-pop{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}
.destec-pop__cta{
  display:inline-block;margin-top:14px;
  font-size:13px;letter-spacing:.06em;color:var(--dark);
  text-decoration:underline;text-underline-offset:3px;
}
.destec-pop__cta:hover{color:var(--taupe)}
.destec-pop i{
  display:block;font-style:normal;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--taupe);
}
.destec-pop b{display:block;font-size:19px;font-weight:400;margin:4px 0 6px}
.destec-pop em{display:block;font-style:normal;font-size:14px;line-height:1.5;color:#444}

/* ---------- Lichtkasten ---------- */
.lb{
  position:fixed;inset:0;z-index:200;
  background:rgba(57,61,62,.95);
  display:flex;align-items:center;justify-content:center;
}
.lb[hidden]{display:none}
/* Die Kundenfotos sind 480x493 px gross (WhatsApp-Exporte, mehr gibt die
   Mediathek nicht her). Ohne Breitenangabe blieb das Bild in seiner
   Naturgroesse stehen — bei den Akkordeon-Zuschnitten waren das 117x88 px.
   Jetzt feste Anzeigebreite mit Deckel: gross genug, aber hoechstens leicht
   ueber die echte Aufloesung hinaus, sonst wird alles matschig. */
.lb__img{width:min(92vw,620px);height:auto;max-height:86vh;object-fit:contain}
.lb button{
  position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;
  cursor:pointer;transition:background .2s;line-height:1;
}
.lb button:hover{background:rgba(255,255,255,.28)}
.lb__close{top:22px;right:26px;width:46px;height:46px;font-size:28px}
.lb__prev,.lb__next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:20px}
.lb__prev{left:22px}
.lb__next{right:22px}

/* Die kleinen Projektfotos im Akkordeon wachsen ebenfalls beim Darueberfahren */
.acc__grid img{cursor:pointer;transition:transform .4s ease,filter .4s ease}
.acc__grid img:hover{transform:scale(1.12);filter:brightness(1.08);position:relative;z-index:1}

/* Die drei grossen Fotos heben sich beim Darueberfahren leicht an */
.about__img,.projects__img,.services__img{
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s ease;
}
.about__img:hover,.projects__img:hover,.services__img:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 50px rgba(0,0,0,.32);
}

/* ---------- Wer weniger Bewegung will, bekommt weniger ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-reveal{opacity:1;transform:none}
  .hero__track{transition:none}
}

/* =========================================================
   Grafische Aufwertung
   ========================================================= */

/* Feine Akzentlinie unter den Abschnitts-Ueberschriften. Traegt die
   Sandfarbe der Seite und gibt den Titeln Halt, ohne laut zu werden. */
/* Wichtig: die Linie sitzt IM vorhandenen Abstand (bottom negativ) und
   verbraucht keinen Platz — sonst wachsen die Karten und die ganze Seite
   verschiebt sich gegen das Original. */
.card h2,.gallery h2{position:relative}
.card h2::after,.gallery h2::after,.contact__phone::after{
  content:"";position:absolute;
  width:54px;height:2px;background:var(--sand);opacity:.85;
}
.card h2::after{bottom:-14px;left:0}
.gallery h2::after{bottom:-26px;left:50%;transform:translateX(-50%)}
.projects__news h2::after{width:38px;bottom:-8px}
/* im Kontaktteil ist unter der Ueberschrift kaum Luft – dort sitzt die Linie
   unter der Telefonzeile */
.contact__phone{position:relative}
.contact__phone::after{bottom:-22px;left:50%;transform:translateX(-50%)}

/* Akkordeon: die ganze Zeile reagiert, nicht nur der Text */
.acc__head{padding-left:2px;transition:padding-left .25s ease,color .25s ease}
.acc__item:hover .acc__head{padding-left:8px}
.acc__item{transition:border-color .25s ease}
.acc__item:hover{border-bottom-color:rgba(255,255,255,.6)}

/* Kopfleiste: der Abschnitt, in dem man gerade steht, wird markiert */
.head__nav a{position:relative}
.head__nav a::after{
  content:"";position:absolute;left:5px;right:5px;bottom:-4px;height:1px;
  background:#fff;transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
.head__nav a:hover::after{transform:scaleX(1)}
.head__nav a.is-hier{opacity:1}
.head__nav a.is-hier::after{transform:scaleX(1);background:var(--sand);height:2px}

/* Nach oben – bei einer langen Einzelseite spart das viel Wischen */
.hoch{
  position:fixed;right:26px;bottom:26px;z-index:90;
  width:48px;height:48px;border:0;cursor:pointer;
  background:var(--dark);color:#fff;font-size:20px;line-height:1;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s,background .25s ease;
}
.hoch.is-da{opacity:1;visibility:visible;transform:none}
.hoch:hover{background:var(--taupe)}

@media (max-width:900px){
  .hoch{right:16px;bottom:16px;width:44px;height:44px}
}

/* =========================================================
   Feinschliff-Runde: gemeinsame Bildsprache, mehr Tiefe
   ========================================================= */

/* Micro-Label ueber den Ueberschriften — zieht sich als roter Faden
   durch die Seite und gibt den Titeln Kontext. Sitzt im Textfluss. */
.eyebrow{
  display:block;margin-bottom:10px;
  font-size:12px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;
  color:var(--sand);
}
.card--dark .eyebrow{color:var(--sand)}
.card--taupe .eyebrow,.services__card .eyebrow{color:rgba(255,255,255,.9)}
.eyebrow--mitte{text-align:center;position:relative;z-index:1}
.gallery .eyebrow{color:var(--sand)}
.contact .eyebrow{color:rgba(255,255,255,.92)}

/* Dunkle Karten bekommen eine feine Lichtkante oben und mehr Tiefe unten,
   damit sie plastischer auf dem Weiss/Foto liegen. */
.card--dark,.card--taupe{
  box-shadow:0 30px 60px -34px rgba(0,0,0,.75);
}
.card--dark{border-top:2px solid var(--sand)}
.projects__news{border-top:2px solid rgba(255,255,255,.55)}

/* Hero: Verlauf fuer sichere Lesbarkeit + Textblock mit CTA */
.hero__slide::after{
  background:
    radial-gradient(120% 90% at 50% 42%,rgba(30,32,30,.30),transparent 62%),
    linear-gradient(180deg,rgba(30,32,30,.28),rgba(30,32,30,.10) 45%,rgba(24,26,24,.42));
}
/* die farbige Tonung des Originals bleibt als zweite, dezentere Ebene */
.hero__slide--1 .hero__bg::after,
.hero__slide--2 .hero__bg::after{content:"";position:absolute;inset:0}
.hero__slide--1 .hero__bg::after{background:rgba(191,179,174,.28)}
.hero__slide--2 .hero__bg::after{background:rgba(123,113,105,.30)}
.hero__text{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:26px}
.hero__cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 30px;
  font-size:15px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:#fff;border:1px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.04);backdrop-filter:blur(2px);
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.hero__cta::after{content:"→";font-size:16px;transition:transform .3s ease}
.hero__cta:hover{background:#fff;color:var(--dark);transform:translateY(-2px)}
.hero__cta:hover::after{transform:translateX(4px)}

/* Button-Sweep: Formular + Footer-Knoepfe fuellen sich beim Darueberfahren */
.contact__form button,.foot__cta,.karte__btn{position:relative;overflow:hidden;z-index:0}
.contact__form button::before,.foot__cta::before,.karte__btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.16);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.contact__form button:hover::before,.foot__cta:hover::before,.karte__btn:hover::before{transform:scaleX(1)}

/* Sehr feine Textur ueber der ganzen Seite — nimmt den Flaechen das Flache,
   ohne sichtbar zu rauschen. Liegt ueber allem, faengt aber keine Klicks. */
body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion:reduce){
  .hero__cta,.contact__form button::before{transition:none}
}
@media (max-width:900px){
  .hero__text{gap:18px}
  .hero__cta{padding:11px 24px;font-size:13px}
  .eyebrow{font-size:11px;letter-spacing:.22em}
}

/* =========================================================
   REDESIGN 20.07. — Editorial: grosse Typo, viel Luft, hoher Hero
   Bewusst weg von der 1:1-Geometrie. Zwei Teile:
   A) responsive Skala (global, mit clamp) — greift auf allen Groessen
   B) feste Komposition der Ueberlappungen — NUR ab Desktop (>=1300px),
      darunter uebernehmen die bestehenden Stapel-/Mobilregeln.
   ========================================================= */

/* ---------- A) globale Skala ---------- */
:root{ --luft:clamp(84px,10vw,168px); }
body{font-size:17px;line-height:1.62}
.rt p{margin:0 0 20px}

.hero{height:min(82vh,760px)}
.hero__slide p{font-size:clamp(29px,4.4vw,58px);line-height:1.16;letter-spacing:.01em}
.hero__text{gap:clamp(24px,4vw,44px)}
.hero__cta{padding:16px 40px;font-size:16px;letter-spacing:.16em}
.hero__dots{bottom:38px}
.hero__arrow{font-size:34px}

.eyebrow{font-size:13px;letter-spacing:.3em;margin-bottom:16px}
.card h2,.gallery h2,.contact h2{font-size:clamp(33px,3.6vw,52px);line-height:1.08}
.card h2::after,.gallery h2::after{width:64px;height:3px}
.projects__news h2{font-size:clamp(23px,2.4vw,32px)}

.about,.services{padding:var(--luft) 0}
.gallery{padding:calc(var(--luft) + 18px) 0}
.contact{padding:var(--luft) 0 calc(var(--luft) * .6)}
.card{padding:clamp(40px,4vw,64px)}
.gallery h2{margin-bottom:clamp(40px,5vw,70px)}
.contact__phone{margin-bottom:clamp(40px,5vw,56px);font-size:18px}

/* ---------- B) feste Komposition, nur Desktop ---------- */
@media (min-width:1300px){
  .about__inner,.projects__inner,.services__inner,.gallery__grid{width:1240px}
  .gallery__grid{gap:22px}

  .about__card{margin-left:430px;width:730px;min-height:640px;padding:64px 68px 64px 108px}
  .about__img{left:96px;top:104px;width:400px;height:496px}

  .projects__inner{padding-top:150px}
  .projects__card{margin-left:96px;width:512px;min-height:470px;padding:52px 56px}
  .projects__img{left:632px;top:70px;width:512px;height:512px}
  .projects__news{margin:-70px 0 -60px 232px;width:612px;padding:48px 54px}

  .services__inner{padding-top:70px}
  .services__img{left:96px;width:410px;height:496px}
  .services__card{margin-left:452px;width:672px;min-height:512px;padding:56px 60px 56px 92px}

  .contact__grid{width:904px;gap:34px;padding-left:0;justify-content:center}
}

/* Hero-Kicker: rahmt die grosse Headline editorial, greift die Logo-Zeile auf */
.hero__kicker{
  font-size:clamp(11px,1.1vw,14px);letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.9);
  padding-bottom:4px;position:relative;
}
.hero__kicker::after{
  content:"";position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  width:40px;height:1px;background:rgba(255,255,255,.55);
}
.hero__text{padding-top:6px}
@media (max-width:900px){ .hero__kicker{letter-spacing:.24em} }

/* Merkmal-Liste in der (fru=heren "Aktuelles"-)Box: kurze Haken statt Fuelltext */
.merkmale{list-style:none;margin:0;padding:0}
.merkmale li{
  position:relative;padding:0 0 0 30px;margin:0 0 14px;
  font-size:16px;line-height:1.5;
}
.merkmale li:last-child{margin-bottom:0}
.merkmale li::before{
  content:"";position:absolute;left:0;top:7px;
  width:11px;height:6px;border-left:2px solid var(--sand);border-bottom:2px solid var(--sand);
  transform:rotate(-45deg);
}

/* Cloudflare-Turnstile-Kaestchen im Kontaktformular */
.contact__form .cf-turnstile{margin:2px 0 14px;min-height:65px}