/* ==========================================================================
   L&A Nuredini GmbH, Hoch- und Tiefbau, Turgi AG
   Marke: Orange #FF751F / Schwarz / Weiss (direkt aus Logo.png gemessen)
   Leitmotiv: Stäbe. Senkrecht, unterschiedlich lang, an einer Linie
   ausgerichtet. Hochbau steigt darüber, Tiefbau reicht darunter.
   ========================================================================== */

:root{
  --o:#FF751F;          /* Markenorange, aus dem Logo gemessen           */
  --o-d:#E05A00;        /* Hover, gedeckt                                */
  --o-t:#B34400;        /* Orange für Text auf Weiss, 5,6:1 → AA         */
  --o-l:#FF9455;        /* Orange auf Schwarz, 8,4:1 → AAA               */
  --tint:#FFF3EA;       /* heller Orangegrund                            */
  --tint-2:#FFFAF6;
  --ink:#141414;        /* Schwarz                                       */
  --ink-2:#232323;
  --ink-3:#2E2E2E;
  --grey:#545454;       /* Logograu                                      */
  --white:#FFFFFF;
  --muted:#6B6B6B;      /* 5,3:1 auf Weiss → AA                          */
  --muted-d:#8C8C8C;
  --muted-l:#A3A3A3;    /* 7,3:1 auf Schwarz → AAA                       */
  --line:rgba(20,20,20,.13);
  --line-l:rgba(255,255,255,.16);

  --f-disp:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mark:'Saira Semi Condensed','Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;

  --wrap:1280px;
  --pad:clamp(20px,5vw,64px);
  --sec-y:clamp(78px,10vw,148px);
  --r:4px;
  --ease:cubic-bezier(.22,.61,.36,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}

html{scroll-behavior:smooth;scroll-padding-top:104px}
body{
  font-family:var(--f-body);
  font-size:clamp(15px,.45vw + 14px,17px);
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec-y)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 20px;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--o);outline-offset:3px}
/* Der blaugraue Antipp-Kasten von Android-Browsern bleibt bei Buttons
   sichtbar hängen. Der Fokusring oben zeigt weiterhin an, was aktiv ist. */
a,button,input,select,textarea{-webkit-tap-highlight-color:transparent}

/* Platzhalter, die vor dem Aufschalten ersetzt werden müssen.
   Bewusst auffällig: so kann die Seite nicht versehentlich mit
   erfundenen Kontaktdaten online gehen. Siehe README.md. */
.todo{
  font-style:normal;font-family:var(--f-disp);font-weight:600;
  font-size:.86em;letter-spacing:.02em;
  color:var(--o-t);background:var(--tint);
  border:1px dashed rgba(179,68,0,.45);
  padding:2px 8px;display:inline-block;
}

/* ==========================================================================
   TYPE
   ========================================================================== */
.h2{
  font-family:var(--f-disp);
  font-size:clamp(32px,4.6vw,58px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:800;
}
.h2--light{color:var(--white)}

.eyebrow{
  font-family:var(--f-disp);
  font-size:clamp(12px,1vw,13px);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--o-t);
  margin-bottom:24px;
}
.eyebrow--light{color:var(--o-l)}

.lead{font-size:clamp(18px,1.5vw,22px);line-height:1.5;letter-spacing:-.015em;font-weight:500}

/* ==========================================================================
   BUTTONS
   Orange Fläche mit schwarzer Schrift: 6,9:1. Weiss auf Orange käme nur
   auf 2,7:1 und wäre nicht lesbar genug, daher durchgehend schwarz.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--o);color:var(--ink);
  font-family:var(--f-disp);font-weight:700;font-size:14px;letter-spacing:.03em;
  padding:15px 28px;border:2px solid var(--o);cursor:pointer;
  transition:background .32s var(--ease),border-color .32s var(--ease),
             color .32s var(--ease),transform .32s var(--ease);
}
.btn:hover,.btn:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)}

.btn__ar{
  width:16px;height:9px;flex:none;position:relative;display:block;
  transition:transform .32s var(--ease);
}
.btn__ar::before{content:'';position:absolute;top:3.4px;left:0;width:100%;height:2px;background:currentColor}
.btn__ar::after{
  content:'';position:absolute;top:1px;right:0;width:7px;height:7px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);
}
.btn:hover .btn__ar{transform:translateX(4px)}

.btn--lg{padding:18px 36px;font-size:15px}
.btn--full{width:100%}
.btn--dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--dark:hover,.btn--dark:focus-visible{background:var(--o);border-color:var(--o);color:var(--ink)}
.btn--outline{background:transparent;color:var(--ink);border-color:rgba(20,20,20,.4)}
.btn--outline:hover,.btn--outline:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff}
/* auf dunklem Grund: weisser Rahmen, gefüllt beim Darüberfahren */
.btn--light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--light:hover,.btn--light:focus-visible{background:#fff;border-color:#fff;color:var(--ink)}

/* ==========================================================================
   STAB-MOTIV
   Senkrechte Stäbe, in js/main.js erzeugt. Sie wachsen aus einer Linie
   heraus: `.up` nach oben (Hochbau), `.dn` nach unten (Tiefbau).
   ========================================================================== */
.bars{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bars i{
  position:absolute;
  left:calc(var(--x) * 1%);
  width:calc(var(--w) * 1%);
  height:calc(var(--h) * 1%);
  background:var(--bc,var(--o));
  opacity:0;
  animation:barGrow .78s var(--ease) forwards;
  animation-delay:var(--d);
  will-change:transform,opacity;
}
.bars i.up{bottom:calc(var(--b) * 1%);transform-origin:center bottom}
.bars i.dn{top:calc(var(--b) * 1%);transform-origin:center top}

.bars i.b-o{--bc:var(--o)}
.bars i.b-od{--bc:var(--o-d)}
.bars i.b-ink{--bc:var(--ink-3)}
.bars i.b-grey{--bc:var(--grey)}
.bars i.b-white{--bc:#FFFFFF}
.bars i.b-tint{--bc:var(--tint)}

@keyframes barGrow{
  0%  {opacity:0;transform:scaleY(.04)}
  45% {opacity:1}
  100%{opacity:1;transform:scaleY(1)}
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.hdr.is-stuck{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(170%) blur(14px);
  -webkit-backdrop-filter:saturate(170%) blur(14px);
  border-bottom-color:var(--line);
}
.hdr__in{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--pad);
  height:92px;display:flex;align-items:center;gap:32px;
  transition:height .4s var(--ease);
}
.hdr.is-stuck .hdr__in{height:74px}

.hdr__logo{flex:none;display:flex;align-items:center;gap:14px;padding-block:8px}
.hdr__logo img{height:58px;width:auto;transition:height .4s var(--ease)}
.hdr.is-stuck .hdr__logo img{height:46px}
/* Über dem dunklen Hero trägt die weisse Variante, ab dem Scrollen die
   farbige. Das offene Mobilmenü ist weiss und zählt wie «gescrollt». */
.hdr__mark--light{display:none}
.hdr:not(.is-stuck):not(.is-navopen) .hdr__mark--light{display:block}
.hdr:not(.is-stuck):not(.is-navopen) .hdr__mark--dark{display:none}
/* Wortmarke neben dem Signet: im Logo selbst ist der Schriftzug bei
   Kopfzeilengrösse zu klein, um lesbar zu sein.

   Sie steht in einer eigenen Schrift, Saira Semi Condensed. Stünde sie in
   Archivo, läse sie sich wie ein weiterer Navigationspunkt; die schmale,
   technische Grotesk trennt die Marke sichtbar vom Bedienteil des Kopfes
   und passt zum Bau.

   Beide Zeilen stehen in Schwarz und laufen exakt gleich breit. Der Name
   misst 1em, der Zusatz .55em bei .08em Sperrung, das ergibt in dieser
   Schrift dieselbe Zeilenlänge. Weil alles an der Basisgrösse hängt, bleibt
   der Block bündig, wenn unten die Schriftgrösse geändert wird. Wer die
   Grösse ändert, ändert nur `font-size` an dieser Stelle. */
.hdr__word{
  font-family:var(--f-mark);font-size:20px;line-height:1;
  color:var(--ink);white-space:nowrap;
  border-left:1px solid var(--line);padding-left:15px;
}
.hdr__word b{display:block;font-weight:700;letter-spacing:-.005em}
.hdr__word span{
  display:block;font-weight:700;font-size:.55em;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);margin-top:5px;
}

.nav{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav a{
  font-family:var(--f-disp);font-size:13.5px;font-weight:600;letter-spacing:.01em;
  position:relative;padding:8px 0;color:var(--ink);
  transition:color .3s var(--ease);
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:2px;height:2px;width:100%;
  background:var(--o);transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--ease);
}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a:hover{color:var(--o-t)}
.nav .nav__cta{color:var(--o-t)}

.hdr__right{display:flex;align-items:center;gap:16px;flex:none}
.hdr__act{
  font-family:var(--f-disp);font-size:13.5px;font-weight:700;letter-spacing:.03em;
  color:var(--ink);padding:11px 20px;background:var(--o);border:2px solid var(--o);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.hdr__act:hover{background:var(--ink);border-color:var(--ink);color:#fff}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;width:44px}
.burger span{display:block;height:2.5px;background:var(--ink);margin:5px 0;transition:transform .3s var(--ease),opacity .2s,background .3s var(--ease)}
.hdr:not(.is-stuck):not(.is-navopen) .burger span{background:#fff}

/* heller Kopf, solange er über dem Hero liegt */
.hdr:not(.is-stuck):not(.is-navopen) .hdr__word,
.hdr:not(.is-stuck):not(.is-navopen) .hdr__word span{color:#fff}
.hdr:not(.is-stuck):not(.is-navopen) .hdr__word{border-left-color:rgba(255,255,255,.34)}
@media (min-width:941px){
  .hdr:not(.is-stuck) .nav a{color:#fff}
  .hdr:not(.is-stuck) .nav a:hover{color:var(--o-l)}
  .hdr:not(.is-stuck) .nav .nav__cta{color:var(--o-l)}
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ==========================================================================
   HERO  (Variante D)
   Bildband oben, darüber greift die weisse Textkarte. Die Schrift steht
   damit auf Weiss statt auf dem Foto. Kein Verlauf nötig, und ein
   späterer Bildwechsel kann die Lesbarkeit nicht kippen.
   ========================================================================== */
.hero{background:var(--white);padding-bottom:clamp(40px,5vw,72px)}

.hero__media{
  position:relative;
  height:clamp(420px,46vw,600px);
  background:var(--ink);
  overflow:hidden;
}
.hero__media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  animation:mediaIn 1.3s var(--ease) both;
}
/* dunkler Anlauf oben, damit der transparente Kopf darauf lesbar bleibt */
.hero__media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,15,15,.62) 0%,rgba(15,15,15,.12) 34%,rgba(15,15,15,0) 55%);
}
.hero__tag{
  position:absolute;z-index:2;
  left:max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad)));
  top:calc(92px + clamp(16px,2.4vw,34px));
  background:var(--o);color:var(--ink);padding:9px 16px;
  font-family:var(--f-disp);font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  animation:fadeUp .8s var(--ease) .5s both;
}

.hero__card{
  position:relative;z-index:2;
  max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--pad);
  margin-top:clamp(-150px,-11vw,-84px);
}
.hero__inner{
  background:var(--white);
  box-shadow:0 30px 70px rgba(20,20,20,.16);
  padding:clamp(30px,4vw,56px);
  display:grid;grid-template-columns:1.28fr .72fr;
  gap:clamp(28px,4vw,56px);align-items:end;
  animation:fadeUp .9s var(--ease) .2s both;
}

.hero__h1{
  font-family:var(--f-disp);
  font-size:clamp(38px,5vw,72px);
  line-height:.96;letter-spacing:-.045em;font-weight:800;
  color:var(--ink);
}
.hero__h1 span{display:block}
.hero__h1 em{font-style:normal;color:var(--o-t)}

.hero__lead{
  margin-top:22px;max-width:46ch;
  font-size:clamp(16px,1.15vw,18.5px);line-height:1.6;color:var(--muted);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.hero__side{display:grid;gap:18px}
.hero__side dt{
  font-family:var(--f-disp);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--o-t);margin-bottom:5px;
}
.hero__side dd{font-size:15.5px;line-height:1.5;font-weight:600}

@keyframes fadeUp{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
@keyframes mediaIn{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}

/* ==========================================================================
   KURZ ERKLÄRT  (Antwortblock für Suchmaschinen und Answer Engines)
   ========================================================================== */
.brief{background:var(--tint);padding-block:clamp(44px,5vw,72px)}
.brief__lead{
  font-family:var(--f-body);
  font-size:clamp(19px,1.85vw,26px);
  line-height:1.5;letter-spacing:-.018em;font-weight:400;
  color:var(--ink);max-width:64ch;
}
.brief__lead strong{font-weight:800}
.brief__facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin-top:clamp(30px,3.4vw,46px);
  padding-top:24px;border-top:1px solid rgba(20,20,20,.18);
}
.brief__facts dt{
  font-family:var(--f-disp);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--o-t);margin-bottom:8px;
}
.brief__facts dd{font-size:15.5px;line-height:1.5;font-weight:500}

/* ==========================================================================
   LEISTUNGEN
   Zwei Bänder über die volle Breite, in einer Orange-Rampe. Mehr Bereiche
   behauptet die Seite bewusst nicht. Der Handelsregisterzweck nennt genau
   diese beiden.
   ========================================================================== */
.svc{background:var(--tint-2);padding-bottom:0}

/* ==========================================================================
   ÜBER UNS
   ========================================================================== */
.about{background:var(--white)}
.about__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,7vw,104px)}
.about__left .h2{max-width:14ch}
.about__right p + p{margin-top:20px}
.about__right p:not(.lead){color:var(--muted)}


/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.sec__head{max-width:760px;margin-bottom:clamp(42px,5vw,72px)}
.sec__head-note{margin-top:24px;max-width:56ch;color:var(--muted);font-size:17px}

/* ==========================================================================
   ABLAUF  (dunkel)
   ========================================================================== */
.process{position:relative;background:var(--ink);color:var(--white);overflow:hidden}
.process__bars{position:absolute;top:0;left:0;right:0;height:clamp(64px,9vw,132px);z-index:0}
.process .wrap{position:relative;z-index:1}
.process .sec__head{margin-top:clamp(18px,5vw,64px)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);border-top:1px solid var(--line-l);padding-top:36px}
.steps li{position:relative;padding-right:16px}
.steps__n{font-family:var(--f-disp);font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--o-l)}
.steps h3{margin-top:14px;font-family:var(--f-disp);font-size:clamp(18px,1.8vw,23px);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.steps p{margin-top:13px;color:rgba(255,255,255,.68);font-size:15px;line-height:1.62}

/* ==========================================================================
   WERTE
   Karten auf dem Orangegrund. Über jedem Grundsatz stehen vier Stäbe,
   das Leitmotiv der Seite im Kleinformat. Beim Darüberfahren wachsen sie
   auf volle Höhe, die Karte hebt sich leicht an.
   ========================================================================== */
.values{background:var(--tint)}
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,24px)}

.val{
  background:var(--white);
  border:1px solid var(--line);
  padding:clamp(26px,2.6vw,34px) clamp(22px,2.2vw,30px) clamp(30px,3vw,38px);
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),
             border-color .4s var(--ease);
}
.val:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 42px rgba(20,20,20,.09);
  border-color:rgba(255,117,31,.55);
}

.val__bars{display:flex;align-items:flex-end;gap:5px;height:34px;margin-bottom:22px}
.val__bars i{width:7px;background:var(--o);transition:height .5s var(--ease)}
.val__bars i:nth-child(1){height:calc(var(--b1,50) * 1%)}
.val__bars i:nth-child(2){height:calc(var(--b2,50) * 1%)}
.val__bars i:nth-child(3){height:calc(var(--b3,50) * 1%)}
.val__bars i:nth-child(4){height:calc(var(--b4,50) * 1%)}
.val:hover .val__bars i{height:100%}

.val h3{
  font-family:var(--f-disp);font-size:clamp(19px,1.8vw,23px);
  font-weight:800;letter-spacing:-.03em;line-height:1.15;
}
.val p{margin-top:12px;color:var(--muted);font-size:15px;line-height:1.62}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{position:relative;background:var(--o);color:var(--ink);overflow:hidden;padding-block:clamp(88px,11vw,158px)}
/* zwei schmale Bänder, oben und unten, die Mitte bleibt für den Text frei */
.cta__bars{position:absolute;left:0;right:0;height:clamp(52px,7.5vw,104px);z-index:0}
.cta__bars--top{top:0}
.cta__bars--bot{bottom:0}
.cta__in{position:relative;z-index:1;text-align:center;max-width:880px}
.cta h2{font-family:var(--f-disp);font-size:clamp(34px,5.2vw,70px);line-height:.98;letter-spacing:-.04em;font-weight:800}
.cta p{margin:24px auto 0;max-width:56ch;color:rgba(20,20,20,.78);font-size:17px}
.cta__row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:40px}

/* ==========================================================================
   FAQ  (Akkordeon)
   ========================================================================== */
.faq{background:var(--tint-2)}
.faq__grid{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(40px,6vw,88px);align-items:start}
.faq__note{margin-top:24px;color:var(--muted);max-width:36ch}

.acc{border:0}
.acc__item{position:relative;transition:background .45s var(--ease)}
.acc__item h3{margin:0;font:inherit}

.acc__head{
  position:relative;width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:1fr 44px;align-items:center;gap:18px;
  padding:clamp(18px,2vw,24px) clamp(18px,2.4vw,30px);
  color:var(--ink);
  transition:padding-left .45s var(--ease);
}
.acc__head:hover{padding-left:calc(clamp(18px,2.4vw,30px) + 8px)}
.acc__title{
  position:relative;z-index:1;
  font-family:var(--f-disp);
  font-size:clamp(16.5px,1.5vw,20px);font-weight:700;
  letter-spacing:-.02em;line-height:1.32;
}
.acc__ico{
  justify-self:end;width:36px;aspect-ratio:1;
  border:2px solid var(--line);
  display:grid;place-items:center;
  transition:transform .5s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.acc__ico::before{
  content:'';width:34%;aspect-ratio:1;
  border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);
  transform:translateY(-16%) rotate(45deg);
  transition:border-color .4s var(--ease);
}
.acc__head:hover .acc__ico{border-color:var(--ink)}
.acc__item.is-open .acc__ico{transform:rotate(180deg);background:var(--ink);border-color:var(--ink)}
.acc__item.is-open .acc__ico::before{border-color:#fff}

.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.acc__inner{
  overflow:hidden;
  padding:0 clamp(18px,2.4vw,30px);
  transition:padding-bottom .55s var(--ease);
}
.acc__item.is-open .acc__inner{padding-bottom:clamp(22px,2.6vw,32px)}
.acc__inner > *{
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.acc__item.is-open .acc__inner > *{
  opacity:1;transform:none;
  transition-delay:calc(160ms + var(--i,0) * 65ms);
}
.acc__desc{font-size:16px;line-height:1.62;color:var(--muted);max-width:62ch}

/* ---------- Variante «plain»: FAQ, weisse Karte mit Rahmen ---------- */
.acc--plain{border:1px solid var(--line);background:var(--white)}
.acc--plain .acc__item + .acc__item{border-top:1px solid var(--line)}
.acc--plain .acc__item.is-open{background:var(--tint)}

/* ---------- Variante «bleed»: Leistungen, volle Breite, Orange-Rampe ----------
   Die Rampe läuft von 26 % auf 60 % Orange: hell genug für schwarzen Text
   (deutlich über AA), kräftig genug, dass das weisse Icon dahinter trägt. */
.acc--bleed{margin-top:clamp(44px,5vw,72px)}
.acc--bleed .acc__item{
  --ramp:color-mix(in srgb, var(--o) calc(26% + var(--t) * 34%), #FFFFFF);
  background:var(--ramp);
}
.acc--bleed .acc__item + .acc__item{border-top:1px solid rgba(255,255,255,.5)}

@supports not (background: color-mix(in srgb, red 50%, blue)){
  .acc--bleed .acc__item{background:#FFD3B8}
  .acc--bleed .acc__item[style*="--t:1"]{background:#FFAF7C}
}

.acc--bleed .acc__head{
  grid-template-columns:1fr 52px;
  padding-block:clamp(24px,3vw,40px);
  padding-right:max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad)));
  padding-left:calc(max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad))) + clamp(104px,10vw,168px));
}
.acc--bleed .acc__head:hover{
  padding-left:calc(max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad))) + clamp(104px,10vw,168px) + 10px);
}
.acc--bleed .acc__item.is-open .acc__head{padding-bottom:clamp(6px,1vw,14px)}
.acc--bleed .acc__title{font-size:clamp(24px,3.2vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1.04}
.acc--bleed .acc__ico{width:clamp(40px,3.4vw,48px);border-color:rgba(20,20,20,.28)}
.acc--bleed .acc__inner{
  padding-right:max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad)));
  padding-left:calc(max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad))) + clamp(104px,10vw,168px));
}
.acc--bleed .acc__desc{
  font-size:clamp(16px,1.35vw,19px);font-weight:500;color:rgba(20,20,20,.84);max-width:56ch;
}

/* grosses, weiss durchscheinendes Icon hinter dem Titel. Inline-SVG statt
   Icon-Font: sonst landet der Ligaturtext im <h3> und Googlebot liest
   «foundation Hochbau». */
.acc__ic{
  position:absolute;z-index:0;pointer-events:none;
  left:max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad)));
  top:50%;
  width:clamp(58px,7.2vw,104px);aspect-ratio:1;
  color:#FFFFFF;opacity:.78;
  transform:translateY(-50%) scale(.92);
  transform-origin:left center;
  transition:opacity .5s var(--ease),transform .55s var(--ease);
}
.acc__ic svg{width:100%;height:100%;display:block}
.acc__head:hover .acc__ic{opacity:.9}
.acc__item.is-open .acc__ic{opacity:.96;transform:translateY(-50%) scale(1)}

.acc__pts{margin-top:24px;border-top:1.5px solid rgba(20,20,20,.2)}
.acc__pts li{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:13px 0;border-bottom:1.5px solid rgba(20,20,20,.13);
}
.acc__pts li span{font-size:15.5px;font-weight:500}
.acc__pts li em{
  font-family:var(--f-disp);font-style:normal;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(20,20,20,.6);white-space:nowrap;flex:none;
}

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.contact{background:var(--white)}
.contact__grid{display:grid;grid-template-columns:.95fr 1.15fr;gap:clamp(44px,6vw,92px)}
.contact__blurb{margin-top:24px;color:var(--muted);max-width:42ch}
.contact__list{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
.contact__list dt{
  font-family:var(--f-disp);font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--o-t);margin-bottom:10px;
}
.contact__list dd{font-size:16px;line-height:1.5;font-weight:500}
.contact__list a{border-bottom:2px solid transparent;transition:border-color .3s var(--ease)}
.contact__list a:hover{border-bottom-color:var(--o)}

.form{background:var(--tint-2);border:1px solid var(--line);padding:clamp(24px,3.2vw,42px)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{margin-bottom:20px;display:flex;flex-direction:column}
.field label{
  font-family:var(--f-disp);font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-bottom:9px;
}
.field label em{font-style:normal;color:var(--muted-d);text-transform:none;letter-spacing:.03em}
.field input,.field select,.field textarea{
  width:100%;background:var(--white);border:1.5px solid var(--line);
  padding:13px 15px;font-size:15.5px;font-family:var(--f-body);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.field textarea{resize:vertical;min-height:130px}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 21px) 50%,calc(100% - 14px) 50%;
  background-size:7px 7px;background-repeat:no-repeat;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--o);box-shadow:0 0 0 4px rgba(255,117,31,.22);
}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#C0392B;background:#FDF3F2}
.field__err{
  font-family:var(--f-disp);font-size:12px;font-weight:600;color:#C0392B;
  margin-top:7px;display:none;
}
.field.is-bad .field__err{display:block}
.form__status{margin-top:18px;font-family:var(--f-disp);font-size:13.5px;font-weight:600;min-height:20px;line-height:1.5}
.form__status.ok{color:#1D7A44}
.form__status.bad{color:#C0392B}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding-top:clamp(66px,8vw,104px)}
.ftr__bars{position:absolute;top:0;left:0;right:0;height:clamp(44px,6vw,76px);z-index:0}
.ftr__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(30px,4vw,56px);
  padding-bottom:56px;
}
.ftr__logo{width:min(150px,54%);height:auto;margin-bottom:22px}
.ftr__addr{color:rgba(255,255,255,.62);font-size:15px;line-height:1.55}
.ftr__col h4{
  font-family:var(--f-disp);font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--o-l);margin-bottom:18px;
}
.ftr__col a{
  display:block;padding:6px 0;color:rgba(255,255,255,.76);font-size:15px;
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.ftr__col a:hover{color:var(--o-l);transform:translateX(4px)}
.ftr__col p{padding:6px 0;color:rgba(255,255,255,.6);font-size:14.5px;line-height:1.55}
.ftr__col .todo{background:rgba(255,148,85,.12);color:var(--o-l);border-color:rgba(255,148,85,.5)}

.ftr__base{
  position:relative;z-index:1;
  border-top:1px solid var(--line-l);padding-block:24px 28px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--f-disp);font-size:12.5px;color:rgba(255,255,255,.5);
}
.ftr__base a:hover{color:var(--o-l)}

/* ==========================================================================
   RECHTSSEITEN  (Impressum, Datenschutz)
   ========================================================================== */
.legal{padding-top:calc(92px + clamp(40px,5vw,72px));padding-bottom:clamp(64px,8vw,110px)}
.legal__in{max-width:820px}
.legal__crumb{font-family:var(--f-disp);font-size:13px;color:var(--muted);margin-bottom:22px}
.legal__crumb a{color:var(--o-t)}
.legal__crumb a:hover{text-decoration:underline}
.legal__crumb span[aria-hidden]{margin-inline:6px;color:var(--muted-d)}

.legal__h1{
  font-family:var(--f-disp);
  font-size:clamp(32px,4.4vw,54px);line-height:1.03;
  letter-spacing:-.035em;font-weight:800;
}
.legal__intro{margin-top:22px;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--muted)}
.legal h2{
  font-family:var(--f-disp);
  margin-top:clamp(38px,4vw,54px);margin-bottom:14px;
  font-size:clamp(19px,1.7vw,23px);font-weight:800;letter-spacing:-.025em;
}
.legal p{margin-top:14px;color:var(--muted);line-height:1.7}
.legal p strong{color:var(--ink)}
.legal a{color:var(--o-t)}
.legal a:hover{text-decoration:underline}

.legal__addr{
  margin-top:16px;font-style:normal;line-height:1.7;
  padding-left:18px;border-left:3px solid var(--o);
}
.legal__dl{margin-top:18px;display:grid;gap:14px}
.legal__dl > div{
  display:grid;grid-template-columns:230px 1fr;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.legal__dl dt{
  font-family:var(--f-disp);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--o-t);
}
.legal__dl dd{font-size:15.5px;line-height:1.6}
.legal__hint{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:var(--muted-d)}

.legal__note{
  margin-top:26px;padding:18px 20px;
  background:var(--tint);border-left:4px solid var(--o);
  font-size:15px;line-height:1.65;color:var(--ink);
}
.legal__note strong{font-weight:700}
.legal__stand{
  margin-top:clamp(40px,5vw,64px);padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--f-disp);font-size:13px;color:var(--muted-d);
}

@media (max-width:640px){
  .legal__dl > div{grid-template-columns:1fr;gap:6px}
}

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

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .nav{gap:20px}
  .nav a{font-size:12.5px}
  .steps{grid-template-columns:1fr 1fr;gap:40px 30px}
  .hdr__word{display:none}
}

@media (max-width:940px){
  .hero__media{height:clamp(300px,52vw,420px)}
  .hero__tag{top:calc(76px + 18px)}
  .hero__inner{grid-template-columns:1fr;align-items:start;gap:30px}
  .hero__card{margin-top:clamp(-90px,-9vw,-56px)}

  .nav{
    position:fixed;inset:0 0 auto;top:0;padding:104px var(--pad) 40px;
    background:var(--white);flex-direction:column;align-items:stretch;gap:0;margin:0;
    transform:translateY(-100%);transition:transform .5s var(--ease);
    box-shadow:0 24px 60px rgba(20,20,20,.18);
  }
  .nav.is-open{transform:none}
  .nav a{
    font-family:var(--f-disp);
    font-size:23px;letter-spacing:-.02em;padding:16px 0;min-height:48px;
    display:flex;align-items:center;
    border-bottom:1px solid var(--line);font-weight:800;
  }
  .burger{display:block}
  .hdr__in{height:76px}
  .hdr.is-stuck .hdr__in{height:68px}
  .hdr__logo img{height:46px}
  .hdr.is-stuck .hdr__logo img{height:42px}
  .hdr__word{display:block}

  .about__grid,.contact__grid,.faq__grid{grid-template-columns:1fr;gap:42px}
  .brief__facts{grid-template-columns:1fr 1fr;gap:22px}
  .about__left .h2{max-width:none}
  .vals{grid-template-columns:1fr 1fr}
  .ftr__in{grid-template-columns:1fr 1fr;gap:36px 26px}
  .ftr__brand{grid-column:1 / -1}
}

@media (max-width:760px){
  :root{--sec-y:clamp(62px,14vw,92px)}

  .hdr__act{display:none}
  .hdr__word{font-size:17px;padding-left:12px}
  .hero__h1{font-size:clamp(34px,9.5vw,50px)}
  .hero__cta .btn{flex:1 1 auto}
  .hero__inner{padding:26px 20px 30px}
  .hero__side{grid-template-columns:1fr 1fr;gap:16px}

  .steps{grid-template-columns:1fr 1fr;gap:30px 18px}
  .steps h3{font-size:17px}
  .steps p{font-size:13.5px}
  .val h3{font-size:17.5px}
  .val p{font-size:14.5px}

  .acc__pts li{flex-direction:column;gap:4px;align-items:flex-start;padding:11px 0}
  .acc--bleed .acc__head,
  .acc--bleed .acc__head:hover{
    grid-template-columns:1fr 40px;gap:12px;
    padding:22px 16px 22px 92px;
  }
  .acc--bleed .acc__inner{padding-left:92px;padding-right:16px}
  .acc--bleed .acc__title{font-size:clamp(21px,6vw,28px)}
  .acc--bleed .acc__ico{width:36px;border-width:1.5px}
  .acc__ic{left:8px;width:56px}
  .cta__row{flex-direction:column}
  .form__row{grid-template-columns:1fr;gap:0}
  .contact__list{grid-template-columns:1fr 1fr}
  .brief__facts{grid-template-columns:1fr 1fr;gap:20px}
  .form{padding:22px 18px}
  .ftr__in{grid-template-columns:1fr 1fr}
  .ftr__base{flex-direction:column;gap:8px}
}

@media (max-width:430px){
  .contact__list{grid-template-columns:1fr}
}

@media (max-width:360px){
  .steps,.vals{grid-template-columns:1fr}
  .acc--bleed .acc__head,
  .acc--bleed .acc__head:hover{padding-left:74px}
  .acc--bleed .acc__inner{padding-left:74px}
  .acc__ic{width:44px;left:6px}
}

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