:root{
  --bg:#0a1f42;
  --bg-soft:#edf4fb;
  --panel:#ffffff;
  --text:#1f2f44;
  --muted:#5d718f;
  --line:#dbe7f4;
  --accent:#2f6fff;
  --accent-2:#43c8ff;
  --shadow:0 20px 40px rgba(35,66,118,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,sans-serif;color:var(--text);background:#081a38}
body{overflow-x:hidden}

.lightband{
  position:fixed;inset:-20% -10%;pointer-events:none;z-index:-1;
  background:
    radial-gradient(40% 35% at var(--band-x,70%) var(--band-y,18%), rgba(67,200,255,.20), transparent 70%),
    radial-gradient(30% 26% at calc(var(--band-x,70%) - 24%) calc(var(--band-y,18%) + 30%), rgba(47,111,255,.11), transparent 72%);
  filter:blur(var(--band-blur,0px));
}

.site-header{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  height:72px;padding:0 24px;background:rgba(5,18,44,.72);
  backdrop-filter:blur(9px);border-bottom:1px solid rgba(146,207,255,.35);
}
.logo{font-weight:900;letter-spacing:.08em;color:#ff9800;text-decoration:none;text-shadow:0 0 16px rgba(255,152,0,.22)}
.nav{display:flex;gap:18px}
.nav a{text-decoration:none;color:#d9ecff;font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}
.phone{
  text-decoration:none;color:#eaf8ff;background:rgba(13,39,82,.78);border:1px solid rgba(146,207,255,.45);
  padding:9px 12px;border-radius:999px;font-weight:800;box-shadow:0 0 18px rgba(67,200,255,.22)
}

.section{padding:84px min(7vw,96px)}
#leistungen{background:linear-gradient(180deg,rgba(7,24,56,.9),rgba(9,31,70,.82));color:#ecf7ff;border-top:1px solid rgba(147,205,255,.28);border-bottom:1px solid rgba(147,205,255,.2)}
#leistungen .eyebrow,#leistungen .section-head h2{color:#ecf7ff}
#leistungen .section-head h2{text-align:center;letter-spacing:.08em}
#leistungen .section-head{position:relative;padding-bottom:16px}
#leistungen .section-head:after{content:"";display:block;height:2px;max-width:280px;margin:12px auto 0;background:linear-gradient(90deg,transparent,#8fd2ff,transparent)}

.hero{position:relative;padding-top:54px}
.hero-media{margin:0}
.hero-media img{
  width:100%;height:min(78vh,760px);object-fit:cover;border-radius:26px;
  box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.85)
}
.hero-overlay{
  position:absolute;left:min(7vw,86px);bottom:34px;max-width:min(620px,calc(100% - 28px));
  background:linear-gradient(180deg,rgba(8,31,71,.58),rgba(8,31,71,.38));backdrop-filter:blur(7px);
  border:1px solid rgba(137,204,255,.58);border-radius:18px;padding:24px;
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 20px 40px rgba(4,17,45,.48),0 0 36px rgba(67,200,255,.26)
}
.hero-overlay h1{font-size:clamp(2rem,5.4vw,4.4rem);line-height:1.03;margin:.2rem 0 .8rem;color:#f4fbff;text-transform:uppercase;text-shadow:0 8px 22px rgba(0,0,0,.35)}
.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:.76rem;color:#b8d6f5;margin:0 0 .55rem}
.lead{font-size:1.08rem;line-height:1.5;color:#e1f0ff;max-width:54ch}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  border-radius:13px;padding:12px 18px;font-weight:800;border:1px solid transparent;cursor:pointer
}
.btn-primary{background:linear-gradient(120deg,#2f8dff,#44d3ff);color:white;box-shadow:0 0 0 1px rgba(255,255,255,.28) inset,0 0 26px rgba(67,200,255,.5),0 14px 30px rgba(18,53,121,.45)}
.btn-secondary{background:rgba(255,255,255,.9);color:#1f3553;border-color:#d5e5f9}

.section-head h2{font-size:clamp(1.7rem,3.3vw,2.7rem);margin:.2rem 0 .7rem}

.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.service-card{
  background:rgba(10,31,67,.78);border:1px solid rgba(140,204,255,.55);border-radius:18px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 0 22px rgba(67,200,255,.24),0 10px 22px rgba(3,13,34,.38);transition:transform .35s ease,box-shadow .35s ease
}
.service-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(35,66,118,.14)}
.service-card img{width:100%;height:220px;object-fit:cover;display:block}
.service-copy{padding:16px 16px 12px}
.service-copy h3{margin:0 0 .5rem;font-size:1.22rem;color:#f4fbff}
.service-copy p{margin:0;color:#d6e9ff;line-height:1.6}
.placeholder-strip{padding:12px 16px;border-top:1px dashed rgba(149,207,255,.45);color:#b8d6f3;background:rgba(6,22,49,.52);font-size:.92rem}

.quality{
  margin-top:8px;background:linear-gradient(180deg,#f8fcff,#eef5fd);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:.92fr 1.08fr;gap:24px;align-items:center
}
.quality-media img{width:100%;height:100%;max-height:500px;object-fit:cover;border-radius:18px;box-shadow:var(--shadow)}
.quality-copy h2{font-size:clamp(1.55rem,3vw,2.5rem);margin:.2rem 0 .8rem}
.quality-copy p{color:var(--muted);line-height:1.75}
.quality-copy ul{margin:14px 0 0 18px;padding:0}
.quality-copy li{margin:.45rem 0;color:#415c80}

.showcase .showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.show-item{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 8px 20px rgba(35,66,118,.08)}
.show-item img{width:100%;height:210px;object-fit:cover;display:block}
.show-item span{display:block;padding:12px 14px;font-weight:700;color:#385173}

.cta{margin-top:22px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:.2rem 0 .7rem}
.cta p{color:var(--muted);line-height:1.7;max-width:70ch}

.lead-form{margin-top:16px;display:grid;gap:12px;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fbfdff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:grid;gap:6px;font-weight:600;color:#3a5376}
input,textarea{
  width:100%;padding:12px;border-radius:11px;border:1px solid #d4e3f5;
  background:white;color:#1f3553;font:inherit
}
input:focus,textarea:focus{outline:none;border-color:#8bb6ff;box-shadow:0 0 0 3px rgba(91,145,255,.2)}
input::placeholder,textarea::placeholder{color:#93a7c5}
.form-btn{width:max-content}
.form-status{min-height:1.2em;color:#2174c7}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

.site-footer{padding:28px min(7vw,96px) 64px;color:#6c82a4}

.wa-fab{position:fixed;right:16px;bottom:16px;z-index:60;background:#25D366;color:#06311a;text-decoration:none;padding:11px 14px;border-radius:999px;font-weight:900;box-shadow:0 12px 28px rgba(0,0,0,.25)}

.reveal-up{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal-up.in{opacity:1;transform:none}
.delay-1{transition-delay:.06s}.delay-2{transition-delay:.12s}.delay-3{transition-delay:.18s}.delay-4{transition-delay:.24s}

@media (max-width:1080px){
  .hero-media img{height:min(60vh,560px)}
  .hero-overlay{left:22px;right:22px;max-width:none}
  .quality{grid-template-columns:1fr}
}
@media (max-width:760px){
  .site-header{height:62px;padding:0 12px}
  .nav{display:none}
  .phone{font-size:.86rem;padding:8px 10px}
  .section{padding:56px 14px}
  .hero{padding-top:18px}
  .hero-media img{height:56vh;border-radius:18px}
  .hero-overlay{position:relative;left:auto;right:auto;bottom:auto;margin-top:12px;padding:16px;border-radius:14px}
  .service-grid,.showcase .showcase-grid,.row{grid-template-columns:1fr}
  .wa-fab{bottom:14px;right:14px}
}

@media (prefers-reduced-motion: reduce){
  .reveal-up,.delay-1,.delay-2,.delay-3,.delay-4{transition:none !important;transform:none !important;opacity:1 !important}
  .service-card,.service-card:hover{transition:none !important;transform:none !important}
  .lightband{display:none}
}

.consent-row{display:flex;align-items:flex-start;gap:8px;color:#3f5678;font-size:.92rem;line-height:1.5}.consent-row input{margin-top:4px;width:16px;height:16px}.consent-row a{color:#2f6fff;text-decoration:underline}

/* 2026-03-17 desktop scaling refinement */
:root{
  --desktop-site-max: 1120px;
  --desktop-side-pad: 20px;
  --desktop-hero-image-h: 500px;
  --desktop-h1: clamp(2.4rem, 4.2vw, 4.8rem);
}

@media (min-width: 980px){
  .head,
  main{
    max-width: var(--desktop-site-max) !important;
  }

  .head{
    display: grid !important;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px var(--desktop-side-pad) !important;
  }

  .brand{
    white-space: nowrap;
    font-size: clamp(1.2rem, 0.9rem + 0.7vw, 1.8rem);
    line-height: 1.05;
    letter-spacing: .03em;
  }

  .head nav{
    min-width: 0;
    justify-content: center;
    gap: clamp(12px, 1.2vw, 22px);
  }

  .head nav a{
    white-space: nowrap;
    font-size: clamp(.82rem, .72rem + .18vw, .96rem);
  }

  .phone{
    white-space: nowrap;
    font-size: clamp(.92rem, .82rem + .24vw, 1.06rem);
    padding: 10px 14px;
  }

  .theme-presets,
  .theme-toggle{
    align-self: center;
  }

  .hero{
    gap: clamp(18px, 2vw, 30px) !important;
    grid-template-columns: minmax(0, 1.14fr) minmax(320px, 0.86fr) !important;
  }

  .hero .img-wrap img,
  .hero-media img{
    height: var(--desktop-hero-image-h) !important;
    min-height: var(--desktop-hero-image-h) !important;
  }

  .hero-copy h1,
  .hero-overlay h1{
    font-size: var(--desktop-h1) !important;
  }

  .cards,
  .service-grid{
    gap: clamp(14px, 1.2vw, 22px) !important;
  }
}

@media (min-width: 1280px){
  :root{
    --desktop-site-max: 1180px;
    --desktop-side-pad: 22px;
    --desktop-hero-image-h: 520px;
  }
}

@media (min-width: 1440px){
  :root{
    --desktop-site-max: 1320px;
    --desktop-side-pad: 24px;
    --desktop-hero-image-h: 560px;
    --desktop-h1: clamp(2.8rem, 4vw, 5.2rem);
  }

  .head nav a{
    font-size: .92rem;
  }

  .phone{
    font-size: 1rem;
  }
}

@media (min-width: 1680px){
  :root{
    --desktop-site-max: 1460px;
    --desktop-side-pad: 26px;
    --desktop-hero-image-h: 620px;
    --desktop-h1: clamp(3rem, 3.8vw, 5.7rem);
  }

  .section{
    padding-top: 90px;
    padding-bottom: 90px;
  }
}

@media (min-width: 1920px){
  :root{
    --desktop-site-max: 1600px;
    --desktop-side-pad: 28px;
    --desktop-hero-image-h: 680px;
    --desktop-h1: clamp(3.2rem, 3.6vw, 6.1rem);
  }

  .card img,
  .service-card img{
    height: 280px;
  }
}

@media (min-width: 2400px){
  :root{
    --desktop-site-max: 1760px;
    --desktop-side-pad: 32px;
    --desktop-hero-image-h: 760px;
    --desktop-h1: clamp(3.5rem, 3.3vw, 6.6rem);
  }

  .card img,
  .service-card img{
    height: 320px;
  }
}