/* ═══════════════════════════════════════════════════════════════
   NELO Metals — Vorschau · gemeinsames Stylesheet
   Eine Datei für Startseite und alle Unterseiten.
   ═══════════════════════════════════════════════════════════════ */
:root{
  color-scheme:only light;
  --orange:#F7971D;
  --orange-deep:#DB7F07;
  --ink:#1C1D1F;
  --panel:#232426;
  --steel:#55595E;
  --line:#E4E5E7;
  --bg:#FFFFFF;
  --bg-alt:#F4F5F6;
  --radius:4px;
  --wrap:1180px;
  --cut:clamp(28px,5vw,64px); /* Schnittkante */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:#FFFFFF;-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--ink);background:var(--bg);font-weight:300;line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
strong{font-weight:600}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:0;background:var(--orange);color:#fff;padding:10px 16px;z-index:200;font-weight:600}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ---------- Eyebrow / Headlines ---------- */
.eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--steel)}
.eyebrow::before{content:"";width:14px;height:14px;background:var(--orange);flex:none}
h1,h2,h3{font-weight:800;line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:clamp(30px,4vw,46px);margin:18px 0 22px;text-transform:uppercase}
h2 .thin{font-weight:300}
.lead{max-width:760px;font-size:clamp(16px,1.5vw,18px);color:var(--steel)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:15px 26px;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.btn svg{width:16px;height:16px;flex:none}
.btn-solid{background:var(--orange);color:#fff}
.btn-solid:hover{background:var(--orange-deep)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-dark{border-color:var(--ink);color:var(--ink)}
.btn-dark:hover{background:var(--ink);color:#fff}

/* ---------- Topbar & Nav ---------- */
.topbar{background:var(--ink);color:#CFCFCF;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px;padding-top:6px;padding-bottom:6px}
.topbar a{display:inline-flex;align-items:center;gap:7px;transition:color .2s;white-space:nowrap}
.topbar .contact-links{display:flex;flex-wrap:wrap;justify-content:center;column-gap:22px;row-gap:2px;min-width:0}
.topbar a:hover{color:var(--orange)}
.topbar svg{width:13px;height:13px}
.topbar .tag{letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:#8E9094;white-space:nowrap}
@media(max-width:780px){
  .topbar .tag{display:none}
  .topbar .wrap{justify-content:center}
  .topbar{font-size:12.5px}
  .topbar .contact-links{column-gap:18px}
}
@media(max-width:370px){
  .topbar{font-size:11.5px}
  .topbar .contact-links{column-gap:12px}
  .topbar svg{width:12px;height:12px}
}
header.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line)}
header.nav::before{content:"";position:absolute;inset:0;backdrop-filter:blur(8px);z-index:-1}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:78px;gap:20px}
.logo img{height:52px;width:auto}
nav.main{display:flex;align-items:center;gap:30px}
nav.main a.link{font-size:14px;font-weight:500;letter-spacing:.02em;position:relative;padding:6px 0}
nav.main a.link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--orange);transition:width .22s}
nav.main a.link:hover::after,nav.main a.link.active::after{width:100%}
.nav-cta{padding:11px 20px;font-size:13px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:26px;height:2px;background:var(--ink);margin:6px 0;transition:.25s}
@media(max-width:960px){
  .burger{display:block}
  nav.main{position:fixed;inset:0;top:0;background:var(--ink);flex-direction:column;justify-content:center;gap:26px;transform:translateX(100%);visibility:hidden;transition:transform .3s,visibility 0s .3s}
  nav.main.open{transform:translateX(0);visibility:visible;transition:transform .3s,visibility 0s}
  nav.main a.link{color:#fff;font-size:20px}
  body.nav-open{overflow:hidden}
  body.nav-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg);background:#fff}
  body.nav-open .burger span:nth-child(2){opacity:0}
  body.nav-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg);background:#fff}
  .burger{z-index:110;position:relative}
}

/* ---------- Hero mit Schnittkante ---------- */
.hero{position:relative;color:#fff;min-height:min(88vh,780px);display:flex;align-items:center;isolation:isolate;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%)}
.hero .bg{position:absolute;inset:0;z-index:-2;background:url("/img/hero.jpg") center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(18,19,21,.88) 0%,rgba(18,19,21,.62) 46%,rgba(18,19,21,.28) 100%)}
.hero .wrap{padding-top:90px;padding-bottom:calc(var(--cut) + 70px)}
.hero .eyebrow{color:#D8D9DB}
.hero h1{font-size:clamp(30px,8.4vw,72px);text-transform:uppercase;margin:22px 0 24px;max-width:14ch;hyphens:manual}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero p{max-width:620px;font-size:clamp(15px,1.5vw,18px);color:#E3E4E6}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* Claim-Balken */
.beam{background:var(--orange);color:#fff;margin-top:calc(var(--cut) * -1);position:relative;z-index:2;clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)}
.beam .wrap{padding-top:calc(var(--cut) + 22px);padding-bottom:26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.beam p{font-weight:600;font-size:clamp(15px,1.7vw,19px);letter-spacing:.01em;max-width:none}
.beam a{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;gap:8px;align-items:center;border-bottom:2px solid rgba(255,255,255,.5);padding-bottom:3px;transition:border-color .2s}
.beam a:hover{border-color:#fff}

/* ---------- Sektionen ---------- */
section{padding:96px 0;background:var(--bg);color:var(--ink)}
@media(max-width:720px){section{padding:70px 0}}
.alt{background:var(--bg-alt)}

/* Über uns Split */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.about .media{position:relative}
.about .media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.about .media::after{content:"";position:absolute;left:-14px;bottom:-14px;width:56%;height:46%;border:3px solid var(--orange);z-index:-1}
.about p+p{margin-top:16px}
@media(max-width:900px){.about{grid-template-columns:1fr;gap:44px}}

/* USP-Karten */
.usps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.usp{background:#fff;border:1px solid var(--line);border-top:3px solid var(--orange);padding:30px 26px;transition:transform .2s,box-shadow .2s}
.usp:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(28,29,31,.09)}
.usp .ico{width:44px;height:44px;color:var(--orange);margin-bottom:18px}
.usp h3{font-size:17px;font-weight:700;margin-bottom:10px;line-height:1.35}
.usp p{font-size:14.5px;color:var(--steel)}
@media(max-width:960px){.usps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.usps{grid-template-columns:1fr}}

/* ---------- Einsatz: 7 Schritte ---------- */
.dark{background:var(--panel);color:#E8E9EA}
.dark .eyebrow{color:#A6A8AB}
.dark .lead{color:#B9BBBE}
.steps{margin-top:60px;display:grid;gap:0;position:relative}
.step{display:grid;grid-template-columns:150px 1fr;gap:34px;padding:34px 0;border-top:1px solid rgba(255,255,255,.12);position:relative}
.step:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.step .num{font-size:clamp(52px,6vw,76px);font-weight:800;line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--orange);letter-spacing:-.02em}
.step h3{font-size:19px;font-weight:700;color:#fff;margin-bottom:10px}
.step p{font-size:15px;color:#B9BBBE;max-width:820px}
.step::before{content:"";position:absolute;left:0;top:-1px;width:0;height:2px;background:var(--orange);transition:width .5s}
.step:hover::before{width:150px}
@media(max-width:680px){.step{grid-template-columns:1fr;gap:10px;padding:28px 0}.step .num{font-size:44px}}

/* ---------- Projekte / Galerie ---------- */
.filterline{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.chip{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--line);background:#fff;color:var(--steel);cursor:pointer;transition:.2s}
.chip.active,.chip:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.grid{columns:3 300px;column-gap:20px;margin-top:36px}
.card{break-inside:avoid;margin-bottom:20px;position:relative;overflow:hidden;cursor:pointer;background:var(--ink)}
.card img{width:100%;transition:transform .45s,opacity .3s}
.card:hover img{transform:scale(1.05);opacity:.55}
.card figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;color:#fff;transform:translateY(12px);opacity:0;transition:.3s;background:linear-gradient(transparent,rgba(18,19,21,.85))}
.card:hover figcaption{transform:none;opacity:1}
.card .cat{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:4px}
.card .name{font-size:15px;font-weight:600;line-height:1.35}
.card.hide{display:none}
.loadmore-wrap{text-align:center;margin-top:34px}
#loadmore{cursor:pointer}
#loadmore[hidden]{display:none}
.card.lm-hide{display:none}


/* Lightbox */
.lb{position:fixed;inset:0;background:rgba(15,16,17,.94);z-index:300;display:none;align-items:center;justify-content:center;padding:28px}
.lb.open{display:flex}
.lb img{max-width:min(1100px,94vw);max-height:82vh;object-fit:contain}
.lb .cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#D8D9DB;font-size:14px;letter-spacing:.04em}
.lb .close{position:absolute;top:20px;right:24px;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;padding:8px}

/* ---------- Leistungen ---------- */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px}
.svc{border:1px solid var(--line);background:#fff;padding:28px 24px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s,transform .2s}
.svc:hover{border-color:var(--orange);transform:translateY(-4px)}
.svc .ico{width:38px;height:38px;color:var(--orange)}
.svc h3{font-size:16.5px;font-weight:700}
.svc p{font-size:14px;color:var(--steel);flex:1}
.svc span{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.svc:hover span{color:var(--orange)}
@media(max-width:960px){.services{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.services{grid-template-columns:1fr}}

/* ---------- Kontakt ---------- */
#kontakt{clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%);padding-top:calc(96px + var(--cut))}
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;margin-top:54px}
.cline{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid rgba(255,255,255,.12)}
.cline:last-of-type{border-bottom:1px solid rgba(255,255,255,.12)}
.cline svg{width:20px;height:20px;color:var(--orange);flex:none;margin-top:5px}
.cline b{display:block;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#A6A8AB;margin-bottom:2px}
.cline a:hover{color:var(--orange)}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form .full{grid-column:1/-1}
label{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#A6A8AB;margin-bottom:7px}
input,textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);color:#fff;padding:13px 14px;font:inherit;font-size:15px;transition:border-color .2s}
input:focus,textarea:focus{outline:none;border-color:var(--orange)}
textarea{min-height:130px;resize:vertical}
.note{grid-column:1/-1;font-size:12.5px;color:#8E9094}
@media(max-width:900px){.contact{grid-template-columns:1fr;gap:44px}form{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:#A6A8AB;font-size:14px}
footer .top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;padding:64px 0 48px;border-bottom:1px solid rgba(255,255,255,.1)}
footer img{height:56px;width:auto;margin-bottom:18px}
footer h4{color:#fff;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:9px}
footer a:hover{color:var(--orange)}
footer .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:22px 0;font-size:13px}
footer .base span b{color:var(--orange);font-weight:600}
@media(max-width:820px){footer .top{grid-template-columns:1fr;gap:34px}}

/* Reveal */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .6s,transform .6s}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none}}

/* ---------- Unterseiten ---------- */
.subhero{position:relative;color:#fff;isolation:isolate;padding:96px 0 calc(var(--cut) + 66px);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%)}
.subhero .bg{position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover}
.subhero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(18,19,21,.90) 0%,rgba(18,19,21,.66) 50%,rgba(18,19,21,.34) 100%)}
.subhero h1{font-size:clamp(32px,6vw,60px);text-transform:uppercase;margin:20px 0 18px;hyphens:manual}
.subhero p{max-width:640px;color:#E3E4E6;font-size:clamp(15px,1.5vw,18px)}
.subhero .eyebrow{color:#D8D9DB}
.crumb{margin-top:26px;font-size:13px;color:#B9BBBE}
.crumb a:hover{color:var(--orange)}
.prose{max-width:820px}
.prose p+p{margin-top:16px}
.prose h3{font-size:20px;font-weight:700;margin:38px 0 12px}
.prose ul{margin:16px 0 0 0;list-style:none;display:grid;gap:9px}
.prose ul li{position:relative;padding-left:22px}
.prose ul li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;background:var(--orange)}
.tagline{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.matchip{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:9px 15px;border:1px solid var(--line);background:#fff;color:var(--steel)}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.spec{border:1px solid var(--line);border-top:3px solid var(--orange);background:#fff;padding:24px}
.spec h4{font-size:16px;font-weight:700;margin-bottom:10px}
.spec dl{display:grid;gap:6px;font-size:14.5px;color:var(--steel)}
.spec dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:6px}
.spec dt{font-weight:600;color:var(--ink)}
@media(max-width:900px){.specs{grid-template-columns:1fr}}
.ctaband{background:var(--panel);color:#E8E9EA;padding:66px 0}
.ctaband h2{color:#fff;margin-bottom:14px}
.ctaband p{color:#B9BBBE;max-width:620px}
.ctaband .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hinweis{border-left:3px solid var(--orange);background:var(--bg-alt);padding:22px 24px;margin-top:26px}
.hinweis b{display:block;margin-bottom:6px}

/* Bild neben Fliesstext auf Unterseiten — bricht unter 900px unter den Text */
.splitbild{float:right;width:min(420px,42%);margin:6px 0 26px 34px}
.splitbild img{width:100%;aspect-ratio:4/3;object-fit:cover}
.splitbild figcaption{font-size:12.5px;color:var(--steel);margin-top:8px;border-left:3px solid var(--orange);padding-left:10px}
@media(max-width:900px){.splitbild{float:none;width:100%;margin:26px 0}}


/* ═══════════════════════════════════════════════════════════════
   Projekt-Bänder — fünf laufende Bildreihen statt eines Rasters
   ═══════════════════════════════════════════════════════════════ */
.band{margin-top:64px}
.band:first-of-type{margin-top:52px}
.band-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px}
.band-kopf h3{font-size:clamp(19px,2.2vw,24px);font-weight:700;letter-spacing:-.01em}
.band-kopf p{font-size:14.5px;color:var(--steel);margin-top:5px;max-width:62ch}
/* Die Pfeile liegen IM Band, nicht daneben: mittig an der Kante, wo der Blick
   beim Blättern ohnehin hängt. Kein Kasten, kein Rahmen — nur der Pfeil.
   Damit Weiß auch auf hellen Fotos trägt, liegt ein schmaler Schleier darunter,
   der zur Bildmitte hin ausläuft; er verdeckt nichts, er trennt nur. */
.buehne{position:relative}
.bnav{position:absolute;top:0;bottom:6px;z-index:3;
      width:clamp(54px,5vw,74px);
      display:grid;place-items:center;
      border:0;padding:0;background:none;color:#fff;cursor:pointer;
      opacity:.9;transition:opacity .25s}
.bnav::before{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity .25s}
.bnav-links{left:0}
.bnav-rechts{right:0}
.bnav-links::before{background:linear-gradient(to right,rgba(18,19,21,.7),rgba(18,19,21,.42) 45%,rgba(18,19,21,0))}
.bnav-rechts::before{background:linear-gradient(to left,rgba(18,19,21,.7),rgba(18,19,21,.42) 45%,rgba(18,19,21,0))}
.bnav svg{position:relative;width:30px;height:30px;stroke-width:1.8;
          filter:drop-shadow(0 1px 2px rgba(18,19,21,.9)) drop-shadow(0 2px 10px rgba(18,19,21,.5));
          transition:transform .25s}
.bnav:hover{opacity:1}
.bnav-links:hover svg{transform:translateX(-4px)}
.bnav-rechts:hover svg{transform:translateX(4px)}
.bnav:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}

/* Die Spur ist ein normaler Scroll-Container. Dadurch funktionieren Wischen,
   Trackpad, Mausrad und Tastatur ohne eine Zeile JavaScript — der Autolauf
   setzt nur scrollBy obendrauf. */
/* KEIN scroll-behavior:smooth hier — es würde mit den fortlaufenden
   Positionszuweisungen des Autolaufs kollidieren: jede Zuweisung startete
   eine eigene Animation, die nie ankommt, und das Band bliebe stehen.
   Die Pfeiltasten geben behavior:'smooth' einzeln mit. */
/* Bewusst OHNE scroll-snap: Snapping rastet jeden kleinen Schritt des
   Autolaufs sofort auf den nächsten Rastpunkt zurück — das Band stünde still.
   Die Pfeiltasten blättern stattdessen exakt um eine Bildbreite weiter,
   dafür braucht es kein Snapping. */
.spur{display:flex;gap:16px;overflow-x:auto;
      padding-bottom:6px;
      scrollbar-width:none;-ms-overflow-style:none}
.spur::-webkit-scrollbar{display:none}
.spur:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.dia{position:relative;flex:0 0 clamp(240px,26vw,360px);
     overflow:hidden;background:var(--ink);cursor:pointer}
.dia img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
         transition:transform .6s cubic-bezier(.2,.6,.2,1),opacity .35s}
.dia:hover img,.dia:focus-within img{transform:scale(1.045);opacity:.62}
.dia figcaption{position:absolute;inset:auto 0 0 0;padding:15px 16px;color:#fff;
                background:linear-gradient(transparent,rgba(18,19,21,.88));
                transform:translateY(10px);opacity:0;transition:transform .3s,opacity .3s}
.dia:hover figcaption,.dia:focus-within figcaption{transform:none;opacity:1}
.dia .cat{display:block;font-size:10.5px;font-weight:600;letter-spacing:.18em;
          text-transform:uppercase;color:var(--orange);margin-bottom:3px}
.dia .name{font-size:14.5px;font-weight:600;line-height:1.35}

/* Fortschritt: zeigt, wie weit das Band gelaufen ist — ohne Zahlenballast. */
.fortschritt{height:2px;background:var(--line);margin-top:14px;overflow:hidden}
.fortschritt span{display:block;height:100%;width:0;background:var(--orange);
                  transition:width .25s linear}

@media(max-width:640px){
  .band-kopf{flex-direction:column;align-items:flex-start;gap:14px}
  .dia{flex-basis:78vw}
  .bnav{width:50px}
  .bnav svg{width:26px;height:26px}
}
/* Wer Bewegung reduziert haben möchte, bekommt kein Autoplay — das schaltet
   das Skript ab; hier zusätzlich die weichen Übergänge herausnehmen. */
@media (prefers-reduced-motion:reduce){
  .dia img{transition:none}
  .bnav,.bnav svg,.bnav::before{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   Weiche Abschnittsübergänge
   Die Abschnitte stießen bisher hart aneinander (weiß | grau | dunkel).
   Ein schmaler Verlauf an der Kante lässt sie ineinander laufen, ohne
   die markanten Schnittkanten von Hero und Kontakt anzutasten.
   ═══════════════════════════════════════════════════════════════ */
section{position:relative}
.verschmelzen-oben::before,
.verschmelzen-unten::after{content:"";position:absolute;left:0;right:0;height:120px;
                           pointer-events:none;z-index:1}
.verschmelzen-oben::before{top:0}
.verschmelzen-unten::after{bottom:0}
/* weiß → hellgrau */
#warum-nelo.verschmelzen-oben::before{background:linear-gradient(to bottom,var(--bg),transparent)}
/* hellgrau → weiß */
#projekte.verschmelzen-oben::before{background:linear-gradient(to bottom,var(--bg-alt),transparent)}
/* weiß → dunkel (vor dem Einsatz-Abschnitt) */
#einsatz.verschmelzen-oben::before{background:linear-gradient(to bottom,var(--bg),transparent)}
/* dunkel → weiß (nach dem Einsatz-Abschnitt) */
#einsatz.verschmelzen-unten::after{background:linear-gradient(to top,var(--bg),transparent)}
/* weiß → hellgrau (Leistungen) */
#leistungen.verschmelzen-oben::before{background:linear-gradient(to bottom,var(--bg),transparent)}

/* ── Kontaktseite ──────────────────────────────────────────────────────────

   ACHTUNG, Reihenfolge: Das Stilblatt enthaelt fuer den dunklen Kontaktblock
   der Startseite globale Regeln auf blanken Element-Namen —
       form{display:grid;grid-template-columns:1fr 1fr}
       label{text-transform:uppercase;letter-spacing:.14em;color:#A6A8AB}
       input,textarea{background:rgba(255,255,255,.05);color:#fff}
   Die greifen auf JEDEM Formular der Seite. Ohne die folgenden Ruecknahmen
   stand hier alles in Versalien, in zwei Spalten, und getippter Text waere
   weiss auf weiss gewesen. Geaendert werden die globalen Regeln bewusst
   nicht — sie halten die Startseite zusammen.
   ────────────────────────────────────────────────────────────────────────── */
.anfrageform{display:block}
.anfrageform label{text-transform:none;letter-spacing:0;color:var(--ink);font-size:13.5px}
.anfrageform input,.anfrageform select,.anfrageform textarea{
  background:#fff;border:1px solid var(--line);color:var(--ink)}

/* Drei gleichrangige Wege. Der Besucher waehlt zuerst, worum es geht; danach
   erscheinen nur die Felder dieses Weges. Das Umschalten macht CSS ueber
   :has() — kein JavaScript. Wo :has() fehlt, bleiben alle Gruppen sichtbar;
   dann ist das Formular laenger, aber vollstaendig benutzbar. */
.wegwahl-kopf{max-width:64ch}
.wegwahl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border:0;padding:0;margin:38px 0 0}
.wegkarte{position:relative}
.wegkarte input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;padding:0;border:0;
                width:100%;height:100%}
.wegkarte label{display:block;height:100%;margin:0;padding:22px 22px 24px;background:#fff;
                border:1px solid var(--line);border-left:3px solid var(--line);
                cursor:pointer;transition:border-color .2s,background .2s}
.wegtitel{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:7px;
          text-transform:none;color:var(--ink)}
.wegtext{display:block;font-size:14px;font-weight:400;color:var(--steel);line-height:1.55;
         text-transform:none;letter-spacing:0}
.wegkarte input:checked + label{border-left-color:var(--orange);background:var(--bg-alt)}
.wegkarte input:focus-visible + label{outline:3px solid var(--orange);outline-offset:2px}
.wegkarte label:hover{border-color:var(--steel)}

.anfrageform fieldset{border:0;padding:0;margin:34px 0 0}
.anfrageform legend{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
                    color:var(--steel);padding:0;margin-bottom:16px}
.feldgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.feld{margin:0}
.feld label{display:block;font-weight:600;margin-bottom:7px}
.feld input,.feld select,.feld textarea{width:100%;font:inherit;font-size:15.5px;
  padding:12px 14px;border-radius:0;transition:border-color .18s}
.feld textarea{resize:vertical;min-height:150px}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:0;border-color:var(--orange)}
.feld input::placeholder,.feld textarea::placeholder{color:#9aa1a9}
.pflicht{color:var(--orange)}

.einwilligung{display:flex;gap:12px;align-items:flex-start;margin-top:26px;max-width:78ch}
.einwilligung label{font-size:14px;font-weight:400;line-height:1.6;color:var(--steel);margin:0}
.einwilligung input{margin:2px 0 0;flex:none;width:18px;height:18px;padding:0;border:0;
                    background:none;accent-color:var(--orange)}
.einwilligung a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.absenden{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:30px}
.pflichthinweis{font-size:13px;color:var(--steel)}

/* Honigtopf: fuer Automaten sichtbar, fuer Menschen nicht. Bewusst nicht
   display:none — manche Automaten ueberspringen genau das. */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr{position:absolute;left:-9999px}

.meldung{display:none;margin-top:30px;padding:16px 20px;font-size:15px;line-height:1.6}
.meldung.an{display:block}
.meldung.fehler{border-left:3px solid #c0392b;background:#fdf3f2;color:#7d2018}

.direktband{background:var(--bg-alt)}
.direktgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.kbox{border-left:3px solid var(--orange);padding:14px 0 14px 20px;margin-top:24px}
.klabel{display:block;font-size:10.5px;font-weight:600;letter-spacing:.18em;
        text-transform:uppercase;color:var(--steel);margin-bottom:6px}
.kwert{display:block;font-size:clamp(18px,2.1vw,22px);font-weight:700;color:var(--ink);
       text-decoration:none;letter-spacing:-.01em}
a.kwert:hover{color:var(--orange)}
.knote{font-size:14.5px;color:var(--steel);line-height:1.6;margin-top:14px}
.anschrift{font-size:17px;line-height:1.7;margin-top:18px}
.wrap.schmal{max-width:70ch}

@media(max-width:820px){
  .wegwahl{grid-template-columns:1fr}
  .feldgrid{grid-template-columns:1fr}
  .direktgrid{grid-template-columns:1fr;gap:44px}
}

@supports selector(:has(*)){
  .anfrageform:has(.wegwahl input:checked) .zusatz{display:none}
  .anfrageform:has(#w-demontage:checked) .z-demontage,
  .anfrageform:has(#w-ankauf:checked)    .z-ankauf,
  .anfrageform:has(#w-container:checked) .z-container{display:block}
}

/* 404-Seite: eine Liste der Wege weiter, statt einer Sackgasse. */
.fehlerliste{list-style:none;padding:0;margin:26px 0 0}
.fehlerliste li{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--steel)}
.fehlerliste a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--orange)}
.fehlerliste a:hover{color:var(--orange)}

/* Rechtstexte: lange Fliesstexte brauchen eine schmale Spalte und klare
   Abstaende, sonst liest sie niemand — und genau das ist bei Impressum und
   Datenschutz der Vorwurf, den man sich einfaengt. */
.rechtstext{max-width:82ch}
.rechtstext h2{font-size:clamp(19px,2.1vw,23px);margin:48px 0 14px;letter-spacing:-.01em}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font-size:16.5px;font-weight:700;margin:30px 0 10px}
.rechtstext p{font-size:15.5px;line-height:1.75;color:var(--steel);margin:0 0 13px}
.rechtstext p.aufzaehlung{padding-left:20px;border-left:2px solid var(--line)}
.rechtstext a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}