:root{color-scheme:dark;--bg:#090a0b;--text:#f5f5f4;--muted:#a1a3a6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"univia-pro",Arial,sans-serif;font-weight:400}a{color:inherit;text-decoration:none}.nav{height:78px;position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,90px);background:linear-gradient(#050607dd,#05060700);transition:transform .38s ease,background .3s}.nav.hidden{transform:translateY(-105%)}.nav.scrolled{background:#08090aee;backdrop-filter:blur(14px)}.brand{font-weight:700;letter-spacing:.05em;font-size:23px;white-space:nowrap}.brand span{font-weight:400}.brand small{display:block;font-size:10px;letter-spacing:.35em;text-align:right;color:#c8c8c8}.nav nav{display:flex;gap:clamp(14px,2.4vw,38px)}.nav nav a{font-size:11px;letter-spacing:.13em;transition:color .2s}.nav nav a:hover{color:#aaa}.menu{display:none}.hero{height:100svh;min-height:600px;position:relative;overflow:hidden;background:#070809}.hero-image{position:absolute;inset:0;background:url('assets/hero-original.jpg') center center/cover no-repeat;animation:arrive 2s ease-out both}.hero-shade{position:absolute;inset:0;background:linear-gradient(to bottom,#05050550 0%,transparent 25%,transparent 65%,#090a0b 100%);pointer-events:none}.scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.3em;display:flex;flex-direction:column;align-items:center;gap:12px;text-shadow:0 2px 8px black}.scroll-line{height:42px;width:1px;background:linear-gradient(transparent,#fff);animation:pulse 2.4s infinite}.section{padding:clamp(90px,10vw,170px) clamp(24px,8vw,160px);scroll-margin-top:70px}.services{min-height:95vh}.eyebrow{font-size:12px;letter-spacing:.28em;color:#9a9ca0;margin:0 0 24px}h1,.section-title{font-size:clamp(40px,7vw,108px);letter-spacing:-.045em;line-height:1.05;margin:0 0 24px;font-weight:700}.period{color:#a4a6a8}.intro{color:#b7b7b7;font-size:clamp(16px,1.6vw,21px)}.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 55px;margin-top:80px}.service-grid article{border-top:1px solid #444;padding:30px 0 55px}.service-grid article span{color:#9b9b9b;font-size:12px}.service-grid h2{font-size:clamp(21px,2.4vw,35px);letter-spacing:-.02em;margin:25px 0 12px}.service-grid p,.section>p:not(.eyebrow){color:#aeb0b2;line-height:1.65}.muted{background:#111214}.contact{display:inline-block;font-size:clamp(22px,4vw,48px);border-bottom:1px solid #888;padding-bottom:12px}footer{padding:30px clamp(24px,8vw,160px);border-top:1px solid #272727;color:#888;font-size:12px}@keyframes arrive{from{opacity:.35;transform:scale(1.045)}to{opacity:1;transform:scale(1)}}@keyframes pulse{50%{opacity:.3}}@media(max-width:760px){.nav{height:70px}.menu{display:block;background:none;border:0;color:white;font-size:26px;cursor:pointer}.nav nav{display:none;position:absolute;top:70px;left:0;right:0;padding:25px;background:#090a0bf7;flex-direction:column;gap:25px}.nav nav.open{display:flex}.hero{min-height:550px}.hero-image{background-position:center center}.service-grid{grid-template-columns:1fr;margin-top:55px}.section{padding:90px 24px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Feinabstimmung der Überschriften und Leistungsbeschreibungen */
h1,.section-title{font-size:clamp(32px,5.25vw,81px);letter-spacing:-.035em}
.service-grid h2{font-size:clamp(19px,1.92vw,28px);line-height:1.22;letter-spacing:-.015em;overflow-wrap:break-word}
.service-grid p{max-width:62ch;font-size:clamp(15px,1.12vw,17px);line-height:1.75}
@media(max-width:760px){.service-grid{row-gap:6px}.service-grid article{padding-bottom:40px}}

/* Version 3: großzügige abwechselnde Leistungsabschnitte */
.service-rows{display:flex;flex-direction:column;gap:clamp(72px,9vw,145px);margin-top:clamp(60px,7vw,105px)}
.service-row{display:grid;grid-template-columns:minmax(0,1.13fr) minmax(0,1fr);gap:clamp(35px,6vw,105px);align-items:center}
.service-row:nth-child(even) .service-visual{order:2}
.service-row:nth-child(even) .service-copy{order:1}
.service-visual{position:relative;min-height:310px;aspect-ratio:1.3;overflow:hidden;background:#17191b;border:1px solid #33383c}
.service-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(138deg,transparent 15%,#ffffff0b 38%,transparent 52%),repeating-linear-gradient(155deg,#ffffff08 0 1px,transparent 1px 38px);transform:scale(1.2);transition:transform 1.2s ease}
.service-visual:hover:before{transform:scale(1)}
.visual-01{background:radial-gradient(ellipse at 85% 80%,#555b5b 0%,transparent 47%),linear-gradient(145deg,#1e2426,#0b0e10 70%)}
.visual-02{background:radial-gradient(ellipse at 25% 75%,#62615c 0%,transparent 53%),linear-gradient(145deg,#292b2c,#0b0d0e 75%)}
.visual-03{background:radial-gradient(ellipse at 75% 35%,#5a6266 0%,transparent 55%),linear-gradient(145deg,#242b2d,#0b0d0e 75%)}
.visual-04{background:radial-gradient(ellipse at 20% 30%,#4e5b54 0%,transparent 55%),linear-gradient(145deg,#232a26,#0b0d0e 75%)}
.visual-index{position:absolute;top:26px;left:28px;font-size:12px;letter-spacing:.25em;color:#c5c7c7}
.visual-caption{position:absolute;bottom:28px;left:28px;right:28px;display:flex;flex-direction:column;gap:8px}
.visual-caption span{font-size:10px;letter-spacing:.24em;color:#a8adb0}
.visual-caption strong{font-size:clamp(22px,3vw,40px);font-weight:700;letter-spacing:-.035em}
.visual-caption small{font-size:12px;color:#adb0b2}
.service-number{display:block;color:#aeb0b2;font-size:12px;letter-spacing:.22em;margin-bottom:26px}
.service-copy h2{font-size:clamp(23px,2.5vw,38px);line-height:1.2;letter-spacing:-.025em;margin:0 0 22px;font-weight:700}
.service-copy p{font-size:clamp(15px,1.2vw,18px);line-height:1.85;color:#b5b7b9;margin:0;max-width:58ch}
@media(max-width:820px){.service-row{grid-template-columns:1fr;gap:25px}.service-row:nth-child(even) .service-visual,.service-row:nth-child(even) .service-copy{order:initial}.service-visual{min-height:250px;aspect-ratio:1.5}.service-rows{gap:78px}}

/* Version 4: vier vorläufige illustrative Baustellenbilder */
.service-visual{background-size:cover;background-position:center;border-color:#27292b}
.visual-01{background-image:linear-gradient(#05060713,#05060728),url('assets/leistung-01.jpg')}
.visual-02{background-image:linear-gradient(#05060713,#05060728),url('assets/leistung-02.jpg')}
.visual-03{background-image:linear-gradient(#05060713,#05060728),url('assets/leistung-03.jpg')}
.visual-04{background-image:linear-gradient(#05060713,#05060728),url('assets/leistung-04.jpg')}
.service-visual:before{display:none}
.visual-index{background:#08090ab3;padding:8px 10px;border:1px solid #ffffff2a}

/* Hero: 10-second muted intro, freeze to its final frame */
.hero-image{background-image:url('assets/hero-video-end.jpg');animation:none}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1;opacity:1;transition:opacity .35s ease;pointer-events:none}
.hero-video.is-finished{opacity:0}
.hero-shade{z-index:2}
.hero .scroll{z-index:3}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}

/* V6 – Über uns und Karriere */
.about-slogan,.career-intro h3{font-size:clamp(22px,3vw,42px);letter-spacing:-.025em;line-height:1.2;margin:32px 0 25px}.about-copy{max-width:790px}.about-copy p,.career-intro p{color:#b8bbbf;line-height:1.85;font-size:clamp(15px,1.2vw,18px)}.career-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(35px,6vw,105px);margin-top:30px}.career-note{font-size:14px!important;color:#8e949a!important;margin-top:30px}.career-form{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}.field{display:flex;flex-direction:column;gap:9px}.field.full,.privacy-hint.full{grid-column:1/-1}.field label{font-size:12px;color:#c6c8cb;letter-spacing:.05em}.field input,.field select,.field textarea{width:100%;background:#17191b;border:1px solid #41464a;border-radius:0;padding:15px;color:#fff;font:inherit;min-height:50px}.field textarea{resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #c4c9cd;outline-offset:2px}.privacy-hint{font-size:12px;color:#a9adb1;line-height:1.65;margin:0}.career-submit{cursor:pointer;background:#d3d7da;color:#111;border:0;padding:17px 19px;font:700 12px 'univia-pro',Arial,sans-serif;letter-spacing:.07em}.career-submit:hover{background:#fff}.form-feedback{font-size:12px;color:#aeb4b8;margin:0;align-self:center}@media(max-width:900px){.career-layout{grid-template-columns:1fr}}@media(max-width:520px){.career-form{grid-template-columns:1fr}.field{grid-column:1/-1}}

/* V7 – Kontakt */
.contact-lead{max-width:650px;color:#b8bbbf;font-size:clamp(16px,1.35vw,19px);line-height:1.8;margin:0 0 clamp(45px,6vw,90px)}
.contact-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(38px,7vw,120px);align-items:start}
.contact-details{border-top:1px solid #3d4144;padding-top:30px}.contact-kicker{font-size:11px;letter-spacing:.2em;color:#969da3;margin:0 0 35px}.contact-details h3{font-size:clamp(24px,2.6vw,35px);letter-spacing:-.02em;margin:0 0 10px}.contact-details p{color:#b8bbbf;line-height:1.75}.contact-mail{display:inline-flex;gap:14px;align-items:center;font-size:clamp(19px,2.25vw,29px);border-bottom:1px solid #7d858b;padding:8px 0 12px;margin:32px 0 6px;overflow-wrap:anywhere}.contact-mail:hover{color:#fff;border-color:#fff}.contact-muted{font-size:13px!important;color:#8f969d!important}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;padding:clamp(22px,3vw,45px);background:#111315;border:1px solid #292e32}.contact-form .field.full,.contact-form .privacy-hint.full{grid-column:1/-1}.contact-submit{min-height:52px}.contact-form .form-feedback{grid-column:1/-1}@media(max-width:920px){.contact-layout{grid-template-columns:1fr}.contact-details{padding-bottom:12px}}@media(max-width:520px){.contact-form{grid-template-columns:1fr}.contact-form .field{grid-column:1/-1}.contact-form{padding:22px}}

/* Projekte: echte H-C Bau Fotos */
.projects-lead{max-width:640px;color:#b8bdc2;line-height:1.65;margin:0 0 36px}
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 26px}
.project-card{min-width:0}.project-image{aspect-ratio:1.55;overflow:hidden;background:#151719}
.project-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.project-card:hover .project-image img{transform:scale(1.035)}
.project-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:15px;color:#aeb4ba;font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.project-status{color:#e1e5e8}.project-card h3{font-size:clamp(22px,2.1vw,31px);margin:12px 0 8px;letter-spacing:-.02em}.project-card p{margin:0;color:#b8bdc2;line-height:1.6}
.project-upcoming{margin-top:70px;border-top:1px solid #373b3f;padding-top:30px}.project-upcoming h3{font-size:clamp(23px,3vw,38px);margin:8px 0 24px}
.upcoming-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}.upcoming-list>div{border:1px solid #35393c;padding:24px;display:flex;flex-direction:column;gap:8px}.upcoming-list strong{font-size:21px}.upcoming-list span{color:#b8bdc2;font-size:13px}
@media(max-width:720px){.projects-grid,.upcoming-list{grid-template-columns:1fr}.projects-grid{gap:30px}.project-upcoming{margin-top:48px}}

/* V9: originalna statična fotografija nakon završetka videa */
.hero-image{background-image:url('assets/hero-original.jpg');background-position:center center;animation:none}
.hero-video{transition:opacity .55s ease}
/* Nova usluga: neutralna tehnička ilustracija dok ne stigne fotografija */
.visual-05{background-image:linear-gradient(#06090b20,#06090b60),url('assets/glasfaser-technik.svg');background-size:cover;background-position:center}
.service-copy p+p{margin-top:1.1em}

/* V10: originalne fotografije H-C Bau za svih pet kategorija */
.visual-01{background-image:linear-gradient(#05060710,#05060724),url("assets/kategorija-01.jpg");background-size:cover;background-position:center}
.visual-02{background-image:linear-gradient(#05060710,#05060724),url("assets/kategorija-02.jpg");background-size:cover;background-position:center}
.visual-03{background-image:linear-gradient(#05060710,#05060724),url("assets/kategorija-03.jpg");background-size:cover;background-position:center}
.visual-05{background-image:linear-gradient(#05060710,#05060724),url("assets/kategorija-04.jpg");background-size:cover;background-position:center}
.visual-04{background-image:linear-gradient(#05060710,#05060724),url("assets/kategorija-05.jpg");background-size:cover;background-position:center}
.visual-05{background-position:center 42%}


/* V12 – Mobile-first finishing, desktop layout unchanged */
html{scroll-padding-top:74px}
body{overflow-x:hidden}
img,video{max-width:100%}
button,input,select,textarea{font-size:16px}
.menu{min-width:44px;min-height:44px;align-items:center;justify-content:center;border-radius:2px}
.nav nav a:focus-visible,.menu:focus-visible,.scroll:focus-visible,.career-submit:focus-visible{outline:2px solid #e4e6e8;outline-offset:4px}
@media(max-width:820px){
  .section{padding:clamp(70px,10vw,96px) clamp(20px,5vw,38px)}
  h1,.section-title{font-size:clamp(32px,7.2vw,52px);line-height:1.12;overflow-wrap:break-word}
  .service-copy h2{font-size:clamp(22px,5.2vw,32px)}
  .service-row{gap:22px}
  .service-visual{width:100%;min-height:0;aspect-ratio:1.45}
  .service-rows{gap:70px;margin-top:52px}
  .service-copy p{font-size:16px;line-height:1.75}
  .hero{height:100svh;min-height:0}
  .hero-image{background-size:contain;background-position:center center;background-color:#070809}
  .hero-video{object-fit:contain;object-position:center center;background:#070809}
  .scroll{bottom:max(20px,env(safe-area-inset-bottom))}
  .career-form,.contact-form{gap:18px}
  .project-image{aspect-ratio:1.55}
  .contact-mail{font-size:clamp(18px,4.4vw,27px)}
}
@media(max-width:760px){
  .nav{height:68px;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  .nav nav{top:68px;max-height:calc(100svh - 68px);overflow-y:auto;box-shadow:0 18px 28px #0008;padding:20px 24px 28px}
  .nav nav a{display:block;padding:9px 0;font-size:13px}
  .menu{display:flex}
  .brand{font-size:21px}
}
@media(max-width:520px){
  .hero-image{background-size:contain}
  .service-visual{aspect-ratio:1.18}
  .visual-05{background-position:center 38%}
  .service-copy h2{hyphens:auto;overflow-wrap:anywhere}
  .project-meta{font-size:10px}
  .career-form,.contact-form{grid-template-columns:1fr}
  .career-form .field,.contact-form .field{grid-column:1/-1}
  .career-submit{min-height:52px}
  .upcoming-list>div{padding:20px}
  .contact-form{padding:18px}
  .section{padding-left:20px;padding-right:20px}
}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}