/* ------------------------------------------------------------
   IMPro GmbH style5-mf.css (Mobile First)
   Seiten: #start #elektro #uvc #kontakt #imp #dat
------------------------------------------------------------ */

/* Font */
@font-face{font-family:"CorpoSDem";src:url("../fonts/CorpoSDem.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}

/* Tokens */
:root{
	--brand-900: rgb(30,42,75);
	--brand-700: rgb(19,76,130);
	--brand-500: rgb(2,127,205);
	--ink-900: rgb(11 18 32);
	--ink-700: rgb(43 52 69);
	--ink-500: rgb(75 85 104);
	--ink-300: rgb(230 115 0);
	--surface-0: rgb(255 255 255);
	--surface-1: rgb(246 248 252);
	--surface-2: rgb(238 242 249);
	--line: rgba(30,42,75,.12);
	--radius-lg: 22px;
	--shadow-sm: 0 10px 30px rgba(11,18,32,.08);
	--shadow-md: 0 18px 50px rgba(11,18,32,.12);
	--gap: clamp(14px, 2.4vw, 24px);
	--h1: clamp(30px, 4.2vw, 54px);
	--h2: clamp(22px, 2.8vw, 34px);
	--h3: clamp(18px, 2.0vw, 22px);
	--h4: clamp(16px, 1.4vw, 20px);
	--p:  clamp(14px, 1.2vw, 16px);
	--lead: clamp(16px, 1.7vw, 22px);
	--focus: 0 0 0 4px rgba(2,127,205,.22);

/* Container (sauber) */
	--pad: clamp(14px, 2.4vw, 24px);
	--container-max: 72rem;        /* ~1152px */
	--container-wide-max: 84rem;   /* ~1344px */
}

/* Reset / Base */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{margin:0;font-family:"CorpoSDem", sans-serif;color:var(--ink-900);font-size:var(--p);line-height:1.5;background: url("../img/Fassade-1280.webp") center / cover no-repeat;background-attachment: scroll;}
p{ line-height:1.6; }
img{ max-width:100%; height:auto; display:block; }

a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.18em;}
a:hover{ text-decoration-thickness:.12em; }
strong{ color:var(--ink-900); }

.container,.container-wide{width:100%;margin-inline:auto;padding-inline:var(--pad);}
.container{max-width:min(90vw, var(--container-max));}
.container-wide{max-width:min(95vw, var(--container-wide-max));}
.page{min-height:100vh;min-height:100svh;min-height:100dvh;display:flex;flex-direction:column;}
.site-header{position:sticky;top:0;z-index:50;background: rgba(255,255,255,.85);border-bottom:1px solid var(--line);}

@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
	.site-header{-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);}
}
.site-header.scrolled{box-shadow: 0 12px 30px rgba(11,18,32,.10);background: rgba(255,255,255,.92);}
.header-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--gap);padding: clamp(7px, 1vw, 10px) 0;}
#start .header-inner{ justify-content:flex-end; }
.logo{ display:inline-flex; align-items:center; gap:10px; }
.logo-img{ width:clamp(4em, 8.67em, 10em); height:auto; }
.main-nav{display:flex;flex-direction:column;align-items:stretch;gap: clamp(8px, 1vw, 12px);flex-wrap:wrap;justify-content:flex-end;}
.nav-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%;padding: 8px 12px;min-height: 40px;border-radius:999px;border:1px solid transparent;color:var(--ink-700);background:transparent;text-decoration:none;font-weight:600;letter-spacing:.01em;transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;will-change:transform;}
.nav-link:focus-visible{outline:none;box-shadow:var(--focus);background: rgba(255,255,255,.85);border-color: rgba(2,127,205,.35);}
.nav-link.is-active{border: 1px solid var(--brand-900);background: linear-gradient(135deg, var(--brand-700), var(--brand-500));color: white;cursor: default;}
.nav-cta{color:#fff;background: linear-gradient(135deg, var(--brand-700), var(--brand-500));border-color: rgba(255,255,255,.15);box-shadow: 0 14px 30px rgba(2,127,205,.18);}
.nav-cta:focus-visible{box-shadow: var(--focus), 0 14px 30px rgba(2,127,205,.18);}
@media (hover:hover) and (pointer:fine){
	.nav-link:hover{background: linear-gradient(135deg, var(--brand-700), var(--brand-500));color: white;}
	.nav-cta:hover{transform: translateY(-1px);filter: brightness(1.02);color: var(--brand-900);}
}
#main{flex:1 0 auto;display:flex;flex-direction:column;}
#start #main{ justify-content:center; }
#elektro main,#kontakt main,#imp main{min-height: calc(100vh - 125px);min-height: calc(100svh - 125px);min-height: calc(100dvh - 125px);display:grid;align-items:center;align-content:center;}
#uvc main{min-height: calc(100vh - 125px);min-height: calc(100svh - 125px);min-height: calc(100dvh - 125px);display:grid;align-items:center;align-content:center;background: linear-gradient(180deg,rgba(19,76,130,0.15) 15%,rgba(2,127,205,.35) 75%);}

/* Optional backdrop brightness (nur wenn supported) */
@supports ((-webkit-backdrop-filter: brightness(0.75)) or (backdrop-filter: brightness(0.75))){
	#elektro main,#kontakt main,#imp main,#uvc main{-webkit-backdrop-filter: brightness(0.75);backdrop-filter: brightness(0.75);}}

/* Hero */
.hero{
  position:relative;
  padding: 0 0 clamp(26px, 5vw, 30px) 0;
}

#start .hero{
  background: linear-gradient(225deg, rgba(255, 255, 255, .015) 5%, rgba(255, 255, 255, .85) 20%, rgba(255, 255, 255, .85) 80%, rgba(255, 255, 255, .015) 95%);
  margin: 0 1vw;
  border-radius: 1.2vw;
}

#elektro .hero,
#uvc .hero,
#kontakt .hero,
#imp .hero{
  padding: clamp(15px, 1vw, 20px) 0;
}

/* Hero grid (mobile-first: 1 column) */
.hero-grid{
  display:grid;
  gap: clamp(16px, 4vw, 46px);
  grid-template-columns: 1fr;
}

#start .hero-grid{ max-width:100%; }
#start .hero-copy{ padding: 0.5vw 0; }

#kontakt .hero-grid{ justify-items:center; }
#imp .hero-grid,
#dat .hero-grid{
  gap: clamp(10px, 1vw, 15px);
  justify-items:center;
}

#kontakt .hero{ padding: 0 0 clamp(12px, 1vw, 14px) 0; }
#imp .hero,
#dat .hero{ background: rgba(255,255,255,.85); }

/* Headings */
h1{
  font-size:var(--h1);
  line-height:1;
  margin:0 0 12px;
  color:var(--brand-900);
  letter-spacing:-.01em;
}

#start h1,
#start h2,
#start p{ text-align:center; }

#kontakt h1{ margin:0; }

#uvc .hero-copy > h1{
  max-width:30ch;
  color: var(--surface-2);
}

.lead{
  margin:0 0 18px;
  font-size:var(--lead);
  color: aliceblue;
  max-width:62ch;
  text-shadow: -2px -2px 2px rgba(0,0,0,.1), 2px 2px 2px rgba(0,0,0,1);
}
#uvc .lead{ color: var(--surface-1); }
#imp .lead{ margin:auto; text-shadow:none; color: var(--ink-900); }

/* Actions */
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:10px 0 14px;
  justify-content:center;
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding: 0 16px;
  min-height:44px;
  font-weight:800;
  text-decoration:none;
  border:1px solid transparent;
  color:#fff;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  box-shadow: 0 18px 40px rgba(2,127,205,.20);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-primary:focus-visible{
  outline:none;
  box-shadow: var(--focus), 0 18px 40px rgba(2,127,205,.20);
}

@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{
    transform: translateY(-1px);
    filter: brightness(1.02);
  }
}

/* Bullets */
.hero-bullets{
  margin:8px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  color:var(--ink-700);
}
.hero-bullets li{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius:999px;
  background: aliceblue;
  border:1px solid var(--line);
}
.hero-bullets li::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:99px;
  background: rgba(2,127,205,.9);
  box-shadow: 0 0 0 4px rgba(2,127,205,.12);
}

/* Hero media */
.hero-media{ position:relative; }

/* Elektro: Mobile-first = aus (wenn du es auf Mobile weglassen willst) */
#elektro .hero-media{ display:none; }

/* Elektro: Desktop = an + Bild füllt Spalte */
@media (min-width: 901px){
  #elektro .hero-media{ display:block; }
  #elektro .hero-img{
    width:100%;
    height:auto;
    display:block;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border:1px solid rgba(255,255,255,.55);
    background: var(--surface-0);
  }
}

/* UVC: Compare auf Mobile aus */
#uvc .hero-compare{display:none;}
/* ab 901px anzeigen */
@media (min-width: 901px){
  #uvc .hero-compare{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(8px, 1.2vw, 14px);
    align-items:start;}
}

.compare-card{
  margin:0;
  padding: clamp(10px, 1.6vw, 14px);
  border-radius:18px;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(30,42,75,.12);
  box-shadow: 0 16px 40px rgba(11,18,32,.10);
  cursor: zoom-in; /* Lightbox hint */
}

.compare-label{
  font-weight:800;
  color: rgb(30,42,75);
  font-size: clamp(13px, 1.2vw, 14px);
  margin-bottom:10px;
  letter-spacing:.02em;
}

.compare-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.55);
}

/* Hero glow */
.hero-media::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: calc(var(--radius-lg) + 10px);
  background: radial-gradient(closest-side, rgba(2,127,205,.18), transparent 70%);
  z-index:-1;
  filter: blur(6px);
}

/* Sections */
.section{
  padding: 0 0 clamp(26px, 5vw, 30px) 0;
}

.section-head{ margin: clamp(10px, 1vw, 10px); }
.section-head-tight{ margin-top: clamp(10px, 1vw, 10px); }

.section-title{
  font-size: var(--h2);
  line-height:1.18;
  margin:0 0 10px;
  color: var(--brand-900);
  letter-spacing:-.01em;
  text-align:center;
  background: aliceblue;
}
#uvc .section-title{ color: var(--brand-500); }

.section-sub{
  margin:0;
  color: var(--ink-700);
  max-width:70ch;
}
#kontakt .section-sub{ color: var(--ink-300); }
#dat .section-sub{ max-width:100%; }

/* Layout grids (mobile-first) */
.content-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: clamp(5px, 0.5vw, 5px);
}
@media (min-width: 901px){
  .content-grid{ grid-template-columns: .5fr 1fr; }
}

.cards{
  display:grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* Card */
.card{
  background: rgba(255,255,255,.75);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 0 clamp(12px, 2.4vw, 15px) 0;
  margin-top: clamp(18px, 3vw, 28px);
}

.card h3{
  font-size: var(--h3);
  margin:0 0 10px;
  color: var(--brand-900);
}
.card p{ margin: 0 0 0 10px; }
.card p:last-child{ margin-bottom:0; }
.card p strong{ color:var(--ink-300); }

.card-highlight{
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.70)),
    radial-gradient(700px 240px at 10% 0%, rgba(2,127,205,.18), transparent 60%);
  border-color: rgba(2,127,205,.22);
}

.list{
  margin: 5px 0;
  padding-left:18px;
  color: var(--ink-700);
}
.list li{ margin:0; }

/* CTA */
.cta{
  margin-top: clamp(18px, 3vw, 28px);
  border-radius: var(--radius-lg);
  border:1px solid rgba(2,127,205,.22);
  background: aliceblue;
  box-shadow: var(--shadow-sm);
}

.cta-inner{
  padding: clamp(10px, 1.6vw, 10px) 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
  flex-wrap:wrap;
}

/* Partner logos */
.partner-img{
  max-height: 70px;
  height:auto;
  width:auto;
  max-width: 253px;
}

/* Footer */
.site-footer{
  margin-top:auto;
  border-top:1px solid var(--line);
  background: rgba(246,248,252,.85);
}
.footer-inner{ padding: clamp(10px, 1vw, 12px); }

#kontakt .footer-inner{ padding: 0 0 clamp(12px, 1vw, 14px); }

.address{
  font-style:normal;
  color: var(--ink-700);
  display:grid;
  gap:10px;
  justify-content:center;
}
.address a{
  color: var(--brand-900);
  text-decoration:none;
  font-weight:700;
}
.address a:hover{
  text-decoration:underline;
  text-underline-offset:.2em;
}

/* Focus / Reduced motion */
:focus-visible{
  outline:none;
  box-shadow: var(--focus);
  border-radius:10px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

/* Screenreader-only */
.sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* -------------------------
   Breakpoints: Enhancements
-------------------------- */

/* Nav ab 521px wieder horizontal (optional) */
@media (min-width: 521px){
  .main-nav{
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
  }
  .nav-link{ width:auto; min-height:30px; padding:5px 10px; }
}

/* Hero grids je Seite ab 901px */
@media (min-width: 901px){
  #uvc .hero-grid{ grid-template-columns: 1.1fr .9fr; }
  #kontakt .hero-grid{ grid-template-columns: 1fr; } /* bleibt 1spaltig */
  #start .hero-grid{ grid-template-columns: 1fr; }   /* bleibt 1spaltig */
  #imp .hero-grid,
  #dat .hero-grid{ grid-template-columns: 1fr; }     /* bleibt 1spaltig */

  /* Elektro zwischen 901–1200: 1.2 / 0.8 */
  #elektro .hero-grid{ grid-template-columns: 1.2fr .8fr; }
}

/* Elektro ab 1201px: 1.5 / 0.5 */
@media (min-width: 1201px){
  #elektro .hero-grid{ grid-template-columns: 1.5fr .5fr; }
}

/* Desktop Backgrounds ab 1025px mit image-set + fixed */
@media (min-width: 1025px){
  body{ background-attachment: fixed; }

  @supports (background-image: image-set(url("../img/Fassade-1920.webp") 1x)){
    body{
      background-image: image-set(
        url("../img/Fassade-1920.webp") 1x,
        url("../img/Fassade-2560.webp") 2x,
        url("../img/Fassade-3840.webp") 3x
      );
    }
  }
}

/* UVC Hintergrund (Fallback + image-set) */
#uvc{
  background: url("../img/Abluftbalken-1280.webp") center / cover no-repeat;
  background-color: var(--brand-900);
  background-blend-mode: color-dodge;
}

@supports (background-image: image-set(url("../img/Abluftbalken-1920.webp") 1x)){
  #uvc{
    background-image: image-set(
      url("../img/Abluftbalken-1920.webp") 1x,
      url("../img/Abluftbalken-2560.webp") 2x,
      url("../img/Abluftbalken-3840.webp") 3x
    );
  }
}

@supports ((-webkit-backdrop-filter: brightness(0.25)) or (backdrop-filter: brightness(0.25))){
  #uvc{
    -webkit-backdrop-filter: brightness(0.25);
    backdrop-filter: brightness(0.25);
  }
}

/* Lightbox (unverändert, mobile-first ok) */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  z-index:999;
}
.lightbox.is-open{ display:block; }

.lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(11,18,32,.72);
}

@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))){
  .lightbox__backdrop{
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.lightbox__panel{
  margin:0;
  width: min(1100px, 92vw);
  max-height: 86vh;
  overflow:hidden;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  padding: clamp(12px, 2vw, 18px);
}

.lightbox__caption{
  font-weight:900;
  color: var(--brand-900);
  margin: 0 0 10px 0;
  letter-spacing:.01em;
}

.lightbox__img{
  width:100%;
  height:auto;
  max-height: calc(86vh - 90px);
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(30,42,75,.12);
  background:#fff;
  display:block;
}

.lightbox__close{
  position:absolute;
  right: 10px;
  top: 10px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(30,42,75,.12);
  background: rgba(255,255,255,.85);
  color: var(--brand-900);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(11,18,32,.12);
}

.lightbox__close:focus-visible{
  outline:none;
  box-shadow: var(--focus), 0 12px 26px rgba(11,18,32,.12);
}