/* Middendorf Metallbau — Startseite (Design-Handoff-Umsetzung, pixelgenau nach Spez) */
/* Gilt nur für den dunklen Hero-Bereich; alle weiteren Sektionen nutzen style.css */
.hero2 a{text-decoration:none}
@keyframes mbRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Hero ---------- */
.hero2{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:radial-gradient(120% 90% at 78% 55%, #1B1E4B 0%, #101228 45%, #080914 100%);
}
#weldCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#heroFlash{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(60% 50% at 66% 60%, rgba(196,220,255,.85) 0%, rgba(150,185,255,.25) 40%, rgba(0,0,0,0) 75%);
  mix-blend-mode:screen;
}
.scrim-x{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg, rgba(8,9,20,.96) 0%, rgba(8,9,20,.90) 36%, rgba(8,9,20,.55) 52%, rgba(8,9,20,.18) 66%, rgba(8,9,20,.12) 100%)}
.scrim-y{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, rgba(8,9,20,.85) 0%, rgba(8,9,20,0) 22%, rgba(8,9,20,0) 62%, rgba(8,9,20,.92) 100%)}

/* Header */
header.home-top{
  position:absolute;top:0;left:0;right:0;z-index:4;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px clamp(18px,4vw,48px);border-bottom:1px solid rgba(226,231,240,.10);
}
.brand-type{display:flex;align-items:center;text-decoration:none;flex:none}
.brand-logo{height:34px;width:auto;max-width:none}
nav.home-nav{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);
  font-family:'Barlow Condensed',sans-serif;font-size:14px;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;
}
nav.home-nav a{color:rgba(226,231,240,.74)}
nav.home-nav a:hover{color:#fff}
.top-actions{display:flex;align-items:center;gap:12px}
.phone-pill{
  display:flex;align-items:center;gap:10px;padding:9px 16px;border:1px solid rgba(226,231,240,.22);
  font-family:'Barlow Condensed',sans-serif;font-size:15px;letter-spacing:.10em;color:#F2F4F8;white-space:nowrap;
}
.phone-pill:hover{border-color:#E07A1F;color:#E07A1F}
.phone-pill .dot{width:6px;height:6px;background:#E07A1F;display:block}
.top-cta{
  padding:10px 18px;background:#E07A1F;color:#12132A;white-space:nowrap;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;
}
.top-cta:hover{background:#F0994A;color:#12132A}
@media (max-width: 520px){ .phone-pill{display:none} }

/* Hero-Inhalt */
.hero2-inner{
  position:relative;z-index:3;width:100%;max-width:1480px;margin:0 auto;
  padding:clamp(104px,15vh,190px) clamp(18px,4vw,48px) clamp(28px,4vw,44px);
  animation:mbRise .9s ease both;
}
.eyebrow2{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.eyebrow2 .dash{display:block;width:clamp(28px,6vw,72px);height:1px;background:#E07A1F}
.eyebrow2 .txt{font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:.30em;text-transform:uppercase;color:#B9C1D6}
h1.mega{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(52px,10.5vw,168px);line-height:.84;letter-spacing:.005em;color:#F4F6FA;text-wrap:balance;
}
h1.mega .line{display:block}
h1.mega .outline{color:transparent;-webkit-text-stroke:1.5px #E07A1F}
.hero2-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(24px,5vw,64px);margin-top:clamp(22px,3vw,34px)}
.hero2-row p{max-width:46ch;font-size:clamp(15px,1.25vw,18px);line-height:1.65;color:#C2CADD;text-wrap:pretty}
.cta2{display:flex;flex-wrap:wrap;gap:12px}
.btn2{
  display:flex;align-items:center;gap:12px;padding:15px 26px;background:#E07A1F;color:#12132A;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;letter-spacing:.14em;text-transform:uppercase;
}
.btn2:hover{background:#F0994A;color:#12132A}
.btn2 .arr{font-family:'Barlow',sans-serif;font-weight:600}
.btn2-ghost{
  display:flex;align-items:center;gap:12px;padding:15px 26px;border:1px solid rgba(226,231,240,.28);color:#F2F4F8;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:17px;letter-spacing:.14em;text-transform:uppercase;
}
.btn2-ghost:hover{border-color:#F2F4F8;color:#F2F4F8}
.facts{
  margin-top:clamp(28px,4vw,48px);border-top:1px solid rgba(226,231,240,.14);padding-top:16px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
}
.fact{display:flex;flex-direction:column;gap:6px;border-left:1px solid rgba(224,122,31,.55);padding-left:14px}
.fact .k{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#7C86A6}
.fact .v{font-family:'Barlow Condensed',sans-serif;font-size:26px;letter-spacing:.04em;color:#EEF1F7}

/* ---------- Sektionen ---------- */
.sect{padding:clamp(48px,7vw,96px) clamp(18px,4vw,48px)}
.sect-light{background:#EDEFF3;color:#151833}
.sect-lighter{background:#F6F7F9;color:#151833}
.wrap2{max-width:1480px;margin:0 auto}
.sep{display:flex;align-items:center;gap:16px;margin-bottom:clamp(28px,4vw,44px)}
.sep .tick{display:block;width:1px;height:14px;background:#2B2F77}
.sep .line{display:block;flex:1;height:1px;background:rgba(43,47,119,.35)}
.sep .lbl{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.30em;text-transform:uppercase;color:#2B2F77}
.h2row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:clamp(22px,3vw,36px)}
h2.big{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(34px,4.5vw,64px);text-transform:uppercase;letter-spacing:.01em;line-height:1;color:#151833}
.h2row .side{font-family:'Barlow Condensed',sans-serif;font-size:15px;letter-spacing:.20em;text-transform:uppercase;color:#4A5068}
.link-more{display:flex;justify-content:flex-end;margin-top:18px}
.link-more a{font-family:'Barlow Condensed',sans-serif;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#2B2F77}
.link-more a:hover{color:#E07A1F}

/* Leistungs-Karten */
.svc{display:flex;flex-wrap:wrap;gap:1px}
.svc a{
  flex:1 1 280px;display:flex;flex-direction:column;background:#F6F7F9;color:#151833;
  box-shadow:0 0 0 1px rgba(43,47,119,.18);
}
.svc a:hover{background:#fff;color:#151833}
.svc .ph{aspect-ratio:16/10;overflow:hidden}
.svc .ph img{width:100%;height:100%;object-fit:cover}
.svc .body{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.2vw,28px)}
.svc .no{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.26em;color:#E07A1F}
.svc .ttl{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(24px,2.2vw,32px);text-transform:uppercase;letter-spacing:.02em;line-height:1.05}
.svc .txt{font-size:15px;line-height:1.6;color:#4A5068}

/* Tor-CTA / Kontakt-Band */
.band-blue{background:#2B2F77;padding:clamp(40px,6vw,72px) clamp(18px,4vw,48px)}
.band-night{background:#1B1E4B;padding:clamp(40px,6vw,72px) clamp(18px,4vw,48px)}
.band-row{max-width:1480px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.band-row .stack{display:flex;flex-direction:column;gap:10px;max-width:62ch}
.band-row .h{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,50px);text-transform:uppercase;letter-spacing:.02em;color:#F4F6FA;line-height:1.02}
.band-row .sub{font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:#C3C8E6}
.band-night .adr{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.30em;text-transform:uppercase;color:#8A93C0}
.band-night .h{font-weight:700;font-size:clamp(26px,3vw,44px);line-height:1.05}
.band-btns{display:flex;flex-wrap:wrap;gap:12px}
.band-btns .ghost{
  padding:15px 26px;border:1px solid rgba(226,231,240,.30);color:#F2F4F8;
  font-family:'Barlow Condensed',sans-serif;font-size:17px;letter-spacing:.12em;text-transform:uppercase;
}
.band-btns .ghost:hover{border-color:#fff;color:#F2F4F8}
.band-btns .solid{
  padding:15px 26px;background:#E07A1F;color:#12132A;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;letter-spacing:.12em;text-transform:uppercase;
}
.band-btns .solid:hover{background:#F0994A;color:#12132A}

/* Referenzen-Teaser */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.ref-grid figure{display:flex;flex-direction:column;gap:10px}
.ref-grid .ph{aspect-ratio:4/3;overflow:hidden}
.ref-grid .ph img{width:100%;height:100%;object-fit:cover}
.ref-grid figcaption{font-family:'Barlow Condensed',sans-serif;font-size:16px;letter-spacing:.10em;text-transform:uppercase;color:#151833}
.ref-grid figcaption span{color:#7C86A6}

/* Zertifikate */
.cert-row{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:flex-start}
.cert-row .lead{flex:1 1 320px;display:flex;flex-direction:column;gap:14px}
.cert-row .lead p{font-size:16px;line-height:1.65;color:#4A5068;max-width:52ch;text-wrap:pretty}
.cert-row .lead a{font-family:'Barlow Condensed',sans-serif;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#2B2F77}
.cert-row .lead a:hover{color:#E07A1F}
.cert-list{flex:1 1 380px;display:flex;flex-direction:column;gap:1px}
.cert-item{display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.2vw,28px);background:#fff;box-shadow:0 0 0 1px rgba(43,47,119,.18)}
.cert-item .n{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;letter-spacing:.04em;color:#2B2F77}
.cert-item .s{font-size:15px;line-height:1.6;color:#4A5068}

/* Footer */
footer.home-foot{background:#0B0C1A;padding:26px clamp(18px,4vw,48px)}
.home-foot .row{max-width:1480px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.home-foot .copy{font-size:13px;color:#7C86A6}
.home-foot nav{display:flex;gap:22px;font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.home-foot nav a{color:rgba(226,231,240,.66)}
.home-foot nav a:hover{color:#fff}

/* ---------- Responsive & Bewegung ---------- */
@media (max-width: 1120px){
  nav.home-nav{display:none}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero2-inner{animation:none}
  #heroFlash{display:none}
}