/* ------------------------------------------------------------
IMPro GmbH style5-gpt.css (Premium / ruhig / modern)
Fokus: klare Typografie, ruhige Flächen, hochwertige Cards,
responsive ohne Media-Overkill (clamp), gute Accessibility.
------------------------------------------------------------ */
@font-face{font-family:"CorpoSDem";src:url("../fonts/CorpoSDem.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
: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);--container: clamp(43.75vw,90vw,95vw);--container-wide: clamp(56.25vw,90vw,95vw);--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(12px, 1.0vw, 16px);--lead: clamp(16px, 1.7vw, 22px);--focus: 0 0 0 4px rgba(2,127,205,.22);}
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{margin:0;font-family:"CorpoSDem", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;color:var(--ink-900);font-size:var(--p);line-height:1.5;background:image-set(url("../img/Fassade-1920.webp") 1x,url("../img/Fassade-2560.webp") 2x,url("../img/Fassade-3840.webp") 3x) center / cover no-repeat;background-attachment: scroll; /* mobile/Tablet-friendly */}
p{ line-height:1.6; }
#uvc{background:image-set(url("../img/Abluftbalken-1920.webp") 1x,url("../img/Abluftbalken-2560.webp") 2x,url("../img/Abluftbalken-3840.webp") 3x) center / cover no-repeat;backdrop-filter: brightness(0.25);background-blend-mode: color-dodge;background-color: var(--brand-900);}
/* Desktop: fixed background (optional, ruhiger Look) */
@media (min-width: 1025px){body, #uvc{ background-attachment: fixed;}}
/* kleinere Assets für <=1024px */
@media (max-width: 1024px){body{background-image:url("../img/Fassade-1280.webp");}#uvc{background-image:url("../img/Abluftbalken-1280.webp");}}
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{width: var(--container);margin-inline: auto;}
.container-wide{width: var(--container-wide);margin-inline: auto;}
/* inkl. Fallback für Ältere Browser die svh nicht verstehen */
.page{min-height: 100vh;min-height: 100svh;display:flex;flex-direction:column;}
.site-header{position:sticky;top:0;z-index:50;backdrop-filter: blur(10px);background: rgba(255,255,255,.85);border-bottom:1px solid var(--line);}
.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:center;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;align-items:center;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;padding: 5px 10px;min-height: 30px;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);display:grid;align-items:center;align-content: center;/* background: linear-gradient(180deg,rgba(255,255,255,0.25) 15%,rgba(255,255,255,.25) 75%); */backdrop-filter: brightness(0.75);}
#uvc main{min-height: calc(100vh - 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%);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{display:grid;gap: clamp(16px, 4vw, 46px);}
#start .hero-grid{grid-template-columns: 1.5fr;max-width:100%;}
#start .hero-copy{ padding: 0.5vw 0;}
#elektro .hero-grid{ grid-template-columns: 1.5fr .5fr; }
#uvc .hero-grid{ grid-template-columns: 1.1fr .9fr; }
#kontakt .hero-grid{grid-template-columns: 1fr;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); }
@media (max-width: 1200px){#elektro .hero-grid,#kontakt .hero-grid{grid-template-columns: 1.2fr .8fr;}}
@media (max-width: 900px){.hero-grid{ grid-template-columns: 1fr; }}
.hero-title-h1{font-size: var(--h1);line-height: 1;margin:0;}
.hero-title-h2{font-size: var(--h2);line-height: 1.18;margin:0;}
.hero-title-h3{font-size: var(--h3);line-height: 1.18;margin:0;}
.hero-title-h4{font-size: var(--h4);line-height: 1.18;margin:0;}
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{font-size:var(--lead);margin: auto;text-shadow: none;color: var(--ink-900);}
.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: 0px 16px;min-height:44px;font-weight:800;text-decoration:none;border:1px solid transparent;transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;}
.btn-primary{color:#fff;background: linear-gradient(135deg, var(--brand-700), var(--brand-500));box-shadow: 0 18px 40px rgba(2,127,205,.20);}
.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);}}

.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;}

.hero-compare{
display:grid;
grid-template-columns: 1fr 1fr;
gap: clamp(8px, 1.2vw, 14px);
align-items:start;
}
@media (max-width: 900px){
.hero-compare{ grid-template-columns: 1fr; }
}

.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);
}

.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-img{
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border:1px solid rgba(255,255,255,.55);
background: var(--surface-0);
}
.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{margin:0;color: var(--ink-700);max-width:100%;}

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

.cards{
display:grid;
gap: var(--gap);
/* margin-top: clamp(12px, 2vw, 18px); */
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;
}
#kontakt .person-card{
    padding: 10px clamp(12px,1.4vw,15px) 0;
}
.card h3{
font-size: var(--h3);
margin:0 0 10px;
color: var(--brand-900);
}
.card p{margin: 0 0px 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, .section-title, .card{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;gap: 35px;flex-wrap:wrap;}
#elektro .cta-inner{ justify-content:center; }

.cta-text{margin:0;color: var(--ink-700);/* max-width:70ch; */}

/* 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; }

.copyright{
margin-left:auto;
color: var(--ink-500);
font-weight:600;
}

/* 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; }
}

/* Services (optional: falls service-card separat behandelt wird) */
.cards-services > .service-card{ grid-column: auto; }

.service-head{display:flex;align-items:center;gap:12px;margin: 10px;}
.service-icon{
width:54px;
height:54px;
object-fit:contain;
opacity:.95;
}

.items{display:grid;gap:8px;margin: 10px;color: var(--ink-700);}
.items span{
padding:8px 10px;
border:1px solid var(--line);
background: rgba(255,255,255,.60);
border-radius:12px;
}

/* Partner */
.partners-flex{
display:flex;
gap: clamp(12px, 2vw, 18px);
flex-wrap:wrap;
align-items:center;
justify-content:center;
padding-top:10px;
}
.partner-img{
max-height: 70px;
height:auto;
filter:saturate(.95);
opacity:.95;
}
#start .partner-img{
max-width:100%;
max-height: 6.5vh;
}
/* 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;
}

/* Kontakt-Layout */
.contact-grid{
display:grid;
/* grid-template-columns: 0.25fr 1fr; */
gap: clamp(14px, 2.6vw, 26px);
}
@media (max-width: 980px){
.contact-grid{ grid-template-columns: 1fr; }
}

/* Ansprechpartner Cards */
.contact-cards{ margin-top:0; }
.contact-cards > .card{ grid-column: auto; } /* flüssiges Grid übernimmt */

.person-card .person-name{
margin:6px 0 0;
color: var(--ink-700);
font-size: var(--h4);
}
.contact-title{ margin:0; }

.hp-field{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.tel-reveal{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.tel-reveal input{
  width: min(260px, 100%);
}
/* Telefonzeile */
.with-icon{display:flex;align-items:center;gap:10px;}
.icon{
width: 2vw;
height: 2vh;
fill:currentColor;
color: var(--brand-700);
opacity:.9;
}

.with-icon a{font-size: clamp(10px, 1vw, 17px);color: var(--brand-900);text-decoration:none;}
.person-card-important{border-color: rgba(2,127,205,.22);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%);}

/* Kontaktformular */
.contact-card{padding: clamp(16px, 2.4vw, 22px);}
.contact-card-head{ margin-bottom:12px; }
.contact-card .section-title{ margin-bottom:6px; }

form{ width:100%; }
.form-success,
.form-errors{
margin: 0 0 14px;
padding: clamp(10px, 1.4vw, 14px) clamp(12px, 1.8vw, 16px);
border-radius: 18px;
border: 1px solid var(--line);
background: rgba(255,255,255,.78);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(6px);
}

.form-success{
border-color: rgba(2,127,205,.28);
background:
linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72)),
radial-gradient(800px 260px at 10% 0%, rgba(2,127,205,.16), transparent 60%);
color: var(--ink-900);
}

.form-errors{
border-color: rgba(230,115,0,.35);
background:
linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72)),
radial-gradient(800px 260px at 10% 0%, rgba(230,115,0,.14), transparent 60%);
color: var(--ink-900);
}

.form-success::before,
.form-errors::before{
display:inline-block;
margin-right:10px;
font-weight: 900;
letter-spacing: .02em;
}

.form-success::before{ content: "✓"; color: var(--brand-500); }
.form-errors::before{ content: "âš "; color: var(--ink-300); }

.form-errors strong{
display:block;
margin: 0 0 8px;
color: var(--ink-900);
}

.form-errors ul{
margin: 0;
padding-left: 18px;
color: var(--ink-700);
}

.form-errors li{
margin: 4px 0;
}

/* optional: Links in Meldungen */
.form-success a,
.form-errors a{
color: var(--brand-900);
font-weight: 700;
text-decoration: underline;
text-underline-offset: .18em;
}

/* Container: reserviert keinen Platz, aber sitzt sauber im Flow */
.spinner{
width: 100%;
min-height: 0;
margin: 10px 0 0;
opacity: 0;                 /* main4.js setzt auf 1 */
transition: opacity .18s ease;
pointer-events: none;
}

/* Der eigentliche Spinner (Ring) */
.spinner::before{
content:"";
display:block;
width: 28px;
height: 28px;
margin: 0 auto;
border-radius: 999px;

/* „Glass“-Ring: ruhig, markenkonform */
border: 3px solid rgba(30,42,75,.18);
border-top-color: rgba(2,127,205,.85);

animation: spin .9s linear infinite;
box-shadow: 0 10px 22px rgba(11,18,32,.10);
}

/* Optionaler Text darunter (nur wenn du später textContent setzen willst) */
.spinner::after{
content:"";
display:block;
height: 0; /* kein Text = keine Höhe */
}

@keyframes spin{
to{ transform: rotate(360deg); }
}

/* Reduced motion: kein Drehen */
@media (prefers-reduced-motion: reduce){
.spinner::before{ animation: none; }
}
.form-field{
display:grid;
gap:8px;
/* margin-top:12px; */
}

input, select, textarea{
width: 100%;
padding: 5px 10px;
border-radius:14px;
border:1px solid rgba(30,42,75,.5);
background: rgba(255,255,255,.80);
color: var(--ink-900);
font: inherit;
outline:none;
transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
textarea{ resize:vertical; min-height:140px; }

input:focus, select:focus, textarea:focus{
border-color: rgba(2,127,205,.35);
box-shadow: var(--focus);
background: rgba(255,255,255,.92);
}
.error-field{
border-color: rgba(255,0,0,.75) !important;
box-shadow: 0 0 0 2px rgba(255,0,0,.4) !important;
}
input:required::placeholder,select:required,textarea:required::placeholder{color: var(--ink-300);}

.form-row-inline{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 1.25vw;
}
@media (max-width: 640px){
.form-row-inline{ grid-template-columns: 1fr; }
}

.checkbox-label{
display:grid;
grid-template-columns: 18px 1fr;
gap:10px;
align-items:start;
margin-top:14px;
color: var(--ink-700);
}
.checkbox-label input{
width:18px; height:18px;
margin-top:3px;
accent-color: var(--brand-500);
}

.btn-submit{
margin-top:14px;
width:100%;
display:inline-flex;
justify-content:center;
align-items:center;
min-height:44px; /* Touch target */
border:1px solid transparent;
border-radius:999px;
padding:12px 16px;
font-weight:900;
color:#fff;
background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
box-shadow: 0 18px 40px rgba(2,127,205,.20);
cursor:pointer;
transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-submit:focus-visible{
box-shadow: var(--focus), 0 18px 40px rgba(2,127,205,.20);
}
@media (hover: hover) and (pointer: fine){
.btn-submit:hover{ transform: translateY(-1px); filter: brightness(1.02); }
}

.btn-submit.is-disabled,.btn-submit:disabled{opacity: .25;cursor: not-allowed;pointer-events: none;}
.form-success-msg{font-weight: 600;}.form-error-msg{font-weight: 600;}


.form-note{
margin:12px 0 0;
color: var(--ink-500);
font-size: clamp(13px, 1.2vw, 14px);
}

/* Mobile Feinschliff */
@media (max-width: 520px){
.main-nav{ justify-content:center; }
.nav-link{ width:100%; }
.hero-actions{flex-direction:column;align-items:stretch;}
.btn-primary{width:100%;}
}
/* ---------------------------
Lightbox (centered, premium)
---------------------------- */
.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);
backdrop-filter: blur(8px);
}

.lightbox__panel{
/* position:relative;*/
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);

/* centered */
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);
}

/* Optional: Klick-Hinweis Cursor */
.compare-card{ cursor: zoom-in; }