/* HSCS Landingpage Styles */
:root{
  --bg:#0b1220;
  --bg-2:#0f1a33;
  --card:rgba(255,255,255,.06);
  --card-2:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --border:rgba(255,255,255,.12);
  --accent:#caa36a;
  --accent-2:#9a7a47;
  --danger:#ff6b6b;
  --ok:#57e389;
  --shadow:0 20px 70px rgba(0,0,0,.45);
  --radius:18px;
  --container:1140px;
}

*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  scroll-padding-top: 100px;
  min-height: 100%;
}
body{
  margin:0;
  font-family:Nunito,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 500px at 12% 12%, rgba(79,140,255,.35), transparent 55%),
    radial-gradient(900px 550px at 88% 18%, rgba(120,215,255,.25), transparent 55%),
    radial-gradient(1200px 700px at 50% 105%, rgba(87,227,137,.18), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
  line-height:1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-footer{ margin-top: auto; }

main{ flex: 1 0 auto; }
img{max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}
p{margin:0 0 14px;color:var(--muted);}
h1,h2,h3{margin:0 0 10px;line-height:1.15;letter-spacing:-.02em;}
h1{font-family:Fredoka,Nunito,system-ui,sans-serif;font-size:clamp(2.15rem,4vw,3.2rem);}
h2{font-family:Fredoka,Nunito,system-ui,sans-serif;font-size:clamp(1.6rem,2.6vw,2.2rem);}
h3{font-size:1.15rem;color:rgba(255,255,255,.9);}

.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto;}
.section-intro{max-width:70ch;}

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

.skip-link{
  position:absolute;left:12px;top:12px;
  padding:10px 12px;
  background:rgba(0,0,0,.8);
  border:1px solid var(--border);
  border-radius:12px;
  transform:translateY(-200%);
  transition:transform .15s ease;
  z-index:9999;
}
.skip-link:focus{transform:translateY(0);outline:none;box-shadow:0 0 0 4px rgba(202,163,106,.30);}

.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(11,18,32,.7);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-container{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:12px 0;
}

.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;}
.logo:hover{text-decoration:none;}
.logo-img{
  height:44px;width:auto;display:block;
  border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.logo-text{color:rgba(255,255,255,.92);}

.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;color:white;
}
.nav-toggle:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(202,163,106,.28);
  border-color:rgba(202,163,106,.48);
}
.hamburger{width:18px;height:2px;background:rgba(255,255,255,.86);border-radius:999px;position:relative;}
.hamburger::before,.hamburger::after{
  content:"";position:absolute;left:0;width:18px;height:2px;
  background:rgba(255,255,255,.86);border-radius:999px;
}
.hamburger::before{top:-6px;}
.hamburger::after{top:6px;}

.nav{
  display:flex;
  align-items:center;
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.nav-list{
  margin:0;padding:0;list-style:none;
  display:flex;align-items:center;gap:10px;
}
.nav-list a{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:12px;
  color:rgba(255,255,255,.84);
  text-decoration:none;
}
.nav-list a:hover{background:rgba(255,255,255,.06);}
.nav-cta{
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:#071022 !important;font-weight:800;
}
.nav-list a.nav-cta:hover,
.nav-cta:hover{
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  text-decoration:none;
  filter:brightness(1.05);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:14px;border:1px solid transparent;
  font-weight:800;text-decoration:none;cursor:pointer;
  transition:transform .12s ease,filter .12s ease,background .12s ease;
}
.btn:hover{transform:translateY(-1px);text-decoration:none;}
.btn:active{transform:translateY(0);}
.btn-primary{
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:#1a1208;
  box-shadow:0 20px 70px rgba(202,163,106,.22);
}
.btn-outline-light{
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.18);
}

section{padding:52px 0;}
section[id]{scroll-margin-top: 100px;}
.hero{padding:84px 0 46px;}
.hero-container{display:grid;gap:26px;align-items:center;}
.lead{font-size:1.1rem;color:rgba(255,255,255,.86);max-width:70ch;}
.hero-subline{max-width:75ch;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;}

.hero-visual{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.hero-logo{
  width:min(360px,100%);
  height:auto;display:block;
  border-radius:16px;
  margin:2px auto 14px;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
}
.hero-points{margin:0;padding-left:18px;color:rgba(255,255,255,.8);}
.hero-points li{margin-bottom:8px;}

.problem-solution,.combined-service,.services,.why-hscs,.contact{border-top:1px solid rgba(255,255,255,.08);}

.comparison-grid{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.problem-card,.solution-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 18px 14px;
  box-shadow:var(--shadow);
}
.problem-card .card-icon,.solution-card .card-icon{
  display:inline-grid;place-items:center;width:34px;height:34px;
  border-radius:14px;font-weight:900;margin-bottom:10px;
}
.problem-card .card-icon{background:rgba(255,107,107,.18);color:var(--danger);border:1px solid rgba(255,107,107,.28);}
.solution-card .card-icon{background:rgba(87,227,137,.14);color:var(--ok);border:1px solid rgba(87,227,137,.25);}
.problem-list,.solution-list{margin:10px 0 0;padding-left:18px;color:rgba(255,255,255,.78);}
.problem-list li,.solution-list li{margin-bottom:8px;}
.conversion-highlight{
  margin-top:16px;
  background:linear-gradient(135deg,rgba(79,140,255,.12),rgba(87,227,137,.10));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:18px;
}

.service-combo-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:12px;align-items:stretch;
}
.combo-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.combo-icon{
  display:inline-grid;place-items:center;
  width:36px;height:36px;border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  margin-bottom:10px;
}
.combo-connector{display:grid;place-items:center;padding-inline:6px;color:rgba(255,255,255,.72);font-weight:900;}
.result-box{
  margin-top:14px;
  background:var(--card-2);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  padding:18px;
}
.result-icon{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:14px;
  background:rgba(120,215,255,.14);
  border:1px solid rgba(120,215,255,.22);
  color:rgba(120,215,255,.95);
  font-weight:900;margin-bottom:10px;
}
.service-cta{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.gallery-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}
.gallery-item{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.gallery-item a{ display:block; }
.gallery-item img{
  width:100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 220px;
  object-fit: cover;
  display:block;
}
.gallery-item figcaption{
  padding: 10px 12px;
  color: rgba(255,255,255,.78);
  font-size: .95rem;
}
.gallery-item .pair{
  display:block;
  color: rgba(255,255,255,.92);
  font-weight: 800;
}

/* Mosaic spans */
.span-12{ grid-column: span 12; }
.span-6{ grid-column: span 6; }
.span-4{ grid-column: span 4; }
.span-3{ grid-column: span 3; }

@media (max-width: 980px){
  .span-4,.span-3{ grid-column: span 12; }
  .gallery-item img{ max-height: 260px; }
}

.modal{
  position: fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 22px;
  background: rgba(0,0,0,.72);
  z-index: 999;
}
.modal.is-open{ display:flex; }
.modal-panel{
  width: min(1000px, 100%);
  border-radius: var(--radius);
  background: rgba(11,18,32,.96);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
  overflow:hidden;
}
.modal-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.modal-title{ font-weight: 900; color: rgba(255,255,255,.92); }
.modal-close{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
.modal-close:hover{ filter: brightness(1.05); }
.modal-body{
  padding: 12px;
  display:grid;
  gap: 12px;
}
.modal-body img{
  width:100%;
  max-height: min(78vh, 820px);
  height:auto;
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
}

.services-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.service-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  height:100%;
}
.service-card h3{ color:rgba(255,255,255,.92); }
.service-card > p{ color:rgba(255,255,255,.78); }
.service-icon{
  display:inline-grid;place-items:center;
  width:36px;height:36px;border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  margin-bottom:10px;
}
.service-features{margin:12px 0 0;padding-left:18px;color:rgba(255,255,255,.78);}
.service-features li{margin-bottom:6px;}
.service-action{
  margin-top:auto;
  padding-top:16px;
}
.service-action .btn{ width:100%; }

.service-card--light{
  background:#ffffff;
  border-color:rgba(15,26,51,.12);
  color:#1a2338;
  box-shadow:0 18px 55px rgba(11,18,32,.18);
}
.service-card--light h3{ color:#0b1220; }
.service-card--light > p{ color:#3a4760; }
.service-card--light .service-icon{
  background:rgba(11,18,32,.06);
  border-color:rgba(11,18,32,.10);
}
.service-card--light .service-features{ color:#3a4760; }
.service-card--light .service-features li::marker{ color:#0b1220; }
.service-card--light .btn-outline-light{
  background:rgba(11,18,32,.06);
  color:#0b1220;
  border-color:rgba(11,18,32,.18);
}
.service-card--light .btn-outline-light:hover{ background:rgba(11,18,32,.10); }

.values-grid{margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.value-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.value-icon{
  display:inline-grid;place-items:center;width:36px;height:36px;border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  margin-bottom:10px;
}

.contact-grid{margin-top:22px;display:grid;grid-template-columns:1fr 1.2fr;gap:16px;align-items:start;}
.contact-info,.contact-form{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.contact-logo{
  width:min(320px,100%);
  height:auto;display:block;
  border-radius:16px;
  margin:2px auto 14px;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
}
address p{margin:0 0 10px;}
address a{color:rgba(120,215,255,.92);}
address a:hover{text-decoration:underline;}

.form-group{margin-bottom:12px;}
label{display:block;font-weight:800;color:rgba(255,255,255,.86);margin:0 0 6px;}
input,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  color:rgba(255,255,255,.9);
  outline:none;
}
input:focus,textarea:focus{
  border-color:rgba(79,140,255,.55);
  box-shadow:0 0 0 4px rgba(79,140,255,.22);
}

.form-privacy{
  font-size:.9rem;
  color:rgba(255,255,255,.72);
  margin:4px 0 14px;
  padding:10px 12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
}
.form-privacy a{
  color:rgba(202,163,106,.95);
  text-decoration:underline;
  text-underline-offset:3px;
}
.form-privacy a:hover{ filter:brightness(1.1); }

.alert-contact{
  margin-bottom:16px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  font-weight:700;
}
.alert-contact--success{
  background:rgba(87,227,137,.12);
  border-color:rgba(87,227,137,.35);
  color:rgba(255,255,255,.92);
}
.alert-contact--error{
  background:rgba(255,107,107,.12);
  border-color:rgba(255,107,107,.35);
  color:rgba(255,255,255,.92);
}

.page-hero{padding:54px 0 24px;}
.page-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.page-card a{color:rgba(120,215,255,.92);}

/* Service-Detail-Seiten */
.service-page{ padding:48px 0 64px; }
.service-page__hero{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:center;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
}
.service-page__eyebrow{
  display:inline-block;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:8px;
}
.service-page__hero h1{ margin:0 0 10px; font-size:clamp(1.8rem,3.2vw,2.4rem); line-height:1.15; }
.service-page__hero p{ color:rgba(255,255,255,.82); margin:0; }
.service-page__icon{
  display:grid;place-items:center;
  font-size:5rem;
  aspect-ratio:1/1;
  border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
}

.service-page__gallery{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:10px;
  aspect-ratio:4/3;
  padding:10px;
  border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
}
.service-page__gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
  display:block;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.service-page__gallery img:first-child{
  grid-row:1 / span 2;
}
.service-page__intro{ color:rgba(255,255,255,.84); margin:32px 0 20px; max-width:780px; }

.feature-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.feature-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
}
.feature-card h3{ margin:0 0 8px; color:rgba(255,255,255,.94); }
.feature-card p{ margin:0 0 10px; color:rgba(255,255,255,.78); }
.feature-card ul{ margin:auto 0 0; padding-left:18px; color:rgba(255,255,255,.82); }
.feature-card ul li{ margin-bottom:6px; }
.feature-card .feature-icon{
  display:inline-grid;place-items:center;
  width:38px;height:38px;border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  margin-bottom:10px;
  font-size:1.2rem;
}

/* Helle Variante – speziell für Reinigung (mehr weiße Flächen, dunkle Typo) */
.service-page--light .service-page__hero{
  background:#ffffff;
  border-color:rgba(15,26,51,.10);
  color:#0b1220;
  box-shadow:0 24px 70px rgba(11,18,32,.18);
}
.service-page--light .service-page__hero h1{ color:#0b1220; }
.service-page--light .service-page__hero p{ color:#3a4760; }
.service-page--light .service-page__eyebrow{ color:#0b6c8a; }
.service-page--light .service-page__icon{
  background:linear-gradient(160deg,#f5f8fc,#e7eef7);
  border-color:rgba(11,18,32,.10);
  color:#0b1220;
}
.service-page--light .service-page__intro{ color:rgba(255,255,255,.92); }

.feature-card--light{
  background:#ffffff;
  border-color:rgba(15,26,51,.10);
  color:#1a2338;
  box-shadow:0 18px 55px rgba(11,18,32,.15);
}
.feature-card--light h3{ color:#0b1220; }
.feature-card--light p{ color:#3a4760; }
.feature-card--light ul{ color:#3a4760; }
.feature-card--light .feature-icon{
  background:rgba(11,18,32,.06);
  border-color:rgba(11,18,32,.10);
  color:#0b1220;
}

.service-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

@media (max-width: 760px){
  .service-page__hero{ grid-template-columns:1fr; padding:22px; }
  .service-page__icon{ max-width:160px; margin:0 auto; }
  .service-page__gallery{ max-width:420px; margin:0 auto; }
  .feature-grid{ grid-template-columns:1fr; }
}

.site-footer{
  padding:34px 0 44px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.7);
  font-size:.95rem;
}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.footer-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.footer-logo{height:36px;width:auto;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.25);}
.footer-links{display:flex;gap:12px;flex-wrap:wrap;}
.footer-links a{
  color:rgba(255,255,255,.76);
  text-decoration:none;
  padding:8px 10px;
  border-radius:12px;
}
.footer-links a:hover{background:rgba(255,255,255,.06);text-decoration:none;}

@media (max-width: 980px){
  .services-grid{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr;}
  .comparison-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .service-combo-grid{grid-template-columns:1fr;}
  .combo-connector{display:none;}
}

@media (max-width: 860px){
  .logo-img{height:38px;}
  .nav-toggle{display:inline-flex;}
  .nav{
    position:absolute;left:0;right:0;top:68px;
    padding:10px 20px 16px;
    background:rgba(11,18,32,.94);
    border-bottom:1px solid rgba(255,255,255,.08);
    z-index:60;
    box-shadow:0 24px 70px rgba(0,0,0,.45);
    transform-origin:top;
    transform:scaleY(0);
    opacity:0;
    pointer-events:none;
    transition:transform .15s ease,opacity .15s ease;
  }
  .nav.is-open{transform:scaleY(1);opacity:1;pointer-events:auto;}
  .nav-list{flex-direction:column;align-items:stretch;gap:6px;}
  .nav-list a{justify-content:space-between;}
}

@media (min-width: 861px){
  .nav{
    position: static;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: none !important;
  }
}

@media (min-width: 981px){
  .hero-container{grid-template-columns:1.35fr .85fr;gap:30px;}
}