/* Page enhancements for Hallenbau & Überdachungen (keeps global style.css intact) */
.page-hero{
  padding: 28px 0 14px;
}
.page-hero .hero-shell{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: stretch;
}
.hero-media{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 0 0 1px var(--greenSoft);
  min-height: 380px;
  position: relative;
}
.hero-media img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.hero-media:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.10));
  pointer-events:none;
}
.hero-copy{
  padding: 4px 0;
}
.hero-copy .eyebrow{
  font-weight:900;
  font-size: 12px;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: rgba(242,245,251,.70);
  display:flex; align-items:center; gap:10px;
}
.hero-copy .dot{
  width:9px;height:9px;border-radius:999px;background: var(--green);
  box-shadow: 0 0 0 6px rgba(139,197,63,.12);
}
.hero-copy h1{
  margin: 12px 0 10px;
  font-size: 42px;
  line-height: 1.08;
}
.hero-copy p{
  margin: 0;
  color: rgba(242,245,251,.82);
  line-height: 1.6;
  font-size: 16px;
}
.hero-actions{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }
.kpis{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap;}
.kpis span{
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(242,245,251,.84);
}
.visual-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.visual-tile{
  grid-column: span 4;
  height: 220px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.visual-tile img{
  width:100%; height:100%;
  object-fit: cover; display:block;
}
@media(max-width: 980px){
  .page-hero .hero-shell{ grid-template-columns: 1fr; }
  .hero-media{ min-height: 320px; }
  .hero-copy h1{ font-size: 34px; }
  .visual-tile{ grid-column: span 12; height: 220px; }
}