/* ============================================================
   KEY-SERVICE PAGE — CONSOLIDATED STYLES
   Self-contained CSS for /key-service/.
   Excludes global style.css (CSS vars, buttons, base) and
   menu.css (topbar/navbar/footer). Everything else this page
   needs is inlined below from the original modular files.
   ============================================================ */

/* ===== from uebersicht.css ===== */
/* =============================================================
   Übersicht (brand homepage) – /uebersicht/
   Faithful rebuild of https://adam-haustechnik24.de/
   Depends on CSS variables from style.css
============================================================= */

/* ============= HERO SLIDER ============= */
.hero-slider{
  position:relative;
  width:100%;
  height:min(82vh, 720px);
  overflow:hidden;
  background:#0a1828;
}
.hero-slider__track{
  position:relative;
  width:100%;
  height:100%;
}
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity .9s ease;
  display:flex;
  align-items:center;
}
.hero-slide.active{
  opacity:1;
  visibility:visible;
  z-index:2;
}
.hero-slide__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.05);
  transition:transform 8s ease;
}
.hero-slide.active .hero-slide__image{
  transform:scale(1);
}
.hero-slide__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(6,17,34,.82) 0%, rgba(6,17,34,.55) 55%, rgba(6,17,34,.25) 100%);
}
.hero-slide__content{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 6vw;
}
.hero-slide__inner{
  max-width:780px;
  color:#fff;
  transform:translateY(20px);
  opacity:0;
  transition:opacity .9s ease .25s, transform .9s ease .25s;
}
.hero-slide.active .hero-slide__inner{
  transform:translateY(0);
  opacity:1;
}
.hero-slide__title{
  font-family:var(--font-display);
  font-size:clamp(1.8rem, 4.5vw, 3.4rem);
  font-weight:800;
  line-height:1.15;
  margin:0 0 1.2rem;
  letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.hero-slide__description{
  font-size:clamp(1rem, 1.4vw, 1.15rem);
  line-height:1.6;
  margin:0 0 2rem;
  color:rgba(255,255,255,.92);
  max-width:620px;
}
.hero-slide__button{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:var(--primary);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  padding:.95rem 1.8rem;
  border-radius:50px;
  text-decoration:none;
  font-size:.95rem;
  letter-spacing:.02em;
  box-shadow:0 10px 22px rgba(239,73,51,.35);
  transition:background .2s ease, transform .2s ease;
}
.hero-slide__button:hover{
  background:var(--primary-hover);
  transform:translateY(-2px);
}
.hero-slide__button svg{ width:18px; height:18px; }

/* arrows */
.hero-slider__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .2s ease, transform .2s ease;
}
.hero-slider__arrow:hover{
  background:var(--primary);
  border-color:var(--primary);
  transform:translateY(-50%) scale(1.06);
}
.hero-slider__arrow--prev{ left:1.4rem; }
.hero-slider__arrow--next{ right:1.4rem; }
.hero-slider__arrow svg{ width:22px; height:22px; }

/* dots */
.hero-slider__dots{
  position:absolute;
  bottom:1.6rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:.55rem;
  z-index:5;
}
.hero-slider__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  border:0;
  cursor:pointer;
  transition:background .2s ease, width .25s ease;
}
.hero-slider__dot.active{
  background:var(--primary);
  width:28px;
  border-radius:5px;
}

@media (max-width:720px){
  .hero-slider{ height:78vh; min-height:520px; }
  .hero-slide__content{ padding:0 1.2rem; }
  .hero-slider__arrow{ width:38px; height:38px; }
  .hero-slider__arrow--prev{ left:.6rem; }
  .hero-slider__arrow--next{ right:.6rem; }
}

/* ============= SERVICES GRID ============= */
.home-services{
  padding:5rem 0;
  background:#fff;
}
.home-services__head{
  text-align:center;
  max-width:640px;
  margin:0 auto 3rem;
}
.home-services__head .eyebrow-red{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:.55rem;
}
.home-services__head h2{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  font-weight:800;
  margin:0;
  color:var(--c-text);
  line-height:1.25;
}
.home-services__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.6rem;
}
.home-service-card{
  background:#fff;
  border:1px solid #e9ecef;
  border-radius:14px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display:flex;
  flex-direction:column;
}
.home-service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 38px rgba(6,17,34,.08);
  border-color:transparent;
}
.home-service-card__img{
  position:relative;
  aspect-ratio:5/4;
  overflow:hidden;
}
.home-service-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.home-service-card:hover .home-service-card__img img{ transform:scale(1.06); }

.home-service-card__body{
  position:relative;
  padding:0 1.4rem 1.4rem;
  display:flex;
  flex-direction:column;
  flex:1;
}
.home-service-card__icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--primary);
  display:grid;
  place-items:center;
  margin:-32px 0 1rem;
  box-shadow:0 8px 18px rgba(239,73,51,.32);
  transition:background .25s ease, transform .25s ease;
}
.home-service-card:hover .home-service-card__icon{
  background:var(--primary-hover);
  transform:rotate(-8deg) scale(1.05);
}
.home-service-card__icon img{
  width:34px;
  height:34px;
  filter:brightness(0) invert(1);
}
.home-service-card__body h3{
  font-family:var(--font-display);
  font-size:1.18rem;
  font-weight:800;
  margin:0 0 .55rem;
  color:var(--c-text);
}
.home-service-card__body p{
  color:var(--c-text-soft);
  font-size:.92rem;
  line-height:1.55;
  margin:0 0 1.1rem;
  flex:1;
}
.home-service-card__link{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.88rem;
  color:var(--primary);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  transition:gap .2s ease, color .2s ease;
}
.home-service-card__link:hover{ gap:.7rem; color:var(--primary-hover); }

@media (max-width:1024px){ .home-services__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .home-services__grid{ grid-template-columns:1fr; } }

/* ============= ABOUT BLOCK ============= */
.home-about{
  background:var(--c-bg-alt);
  padding:5rem 0;
}
.home-about__inner{
  max-width:1080px;
  margin:0 auto;
}
.home-about__top{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:.6rem;
}
.home-about h2{
  font-family:var(--font-display);
  font-size:clamp(1.55rem, 3vw, 2.15rem);
  font-weight:800;
  margin:0 0 1.2rem;
  color:var(--c-text);
  line-height:1.25;
}
.home-about__desc{
  font-size:1rem;
  line-height:1.7;
  color:var(--c-text-soft);
  margin:0 0 2.4rem;
  max-width:880px;
}
.home-about h3{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:800;
  margin:0 0 1.2rem;
  color:var(--c-text);
}
.about-services-list{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  margin-bottom:2.5rem;
}
.about-service-box{
  background:#fff;
  border-radius:12px;
  padding:1.2rem 1.5rem;
  display:flex;
  align-items:center;
  gap:1.2rem;
  border:1px solid #ecedef;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.about-service-box:hover{
  transform:translateX(4px);
  border-color:var(--primary);
  box-shadow:0 10px 22px rgba(6,17,34,.06);
}
.about-service-box__info{ flex:1; min-width:0; }
.about-service-box h4{
  font-family:var(--font-display);
  font-size:1.02rem;
  font-weight:700;
  margin:0 0 .25rem;
  color:var(--c-text);
}
.about-service-box p{
  font-size:.92rem;
  margin:0;
  color:var(--c-text-soft);
  line-height:1.5;
}
.about-service-box__btn{
  flex-shrink:0;
  background:var(--primary);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.85rem;
  padding:.6rem 1.2rem;
  border-radius:50px;
  text-decoration:none;
  transition:background .2s ease, transform .2s ease;
  white-space:nowrap;
}
.about-service-box__btn:hover{ background:var(--primary-hover); transform:translateY(-2px); }

.home-about__bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  margin-top:1rem;
}
.home-about__box{
  background:#fff;
  border-left:4px solid var(--primary);
  border-radius:0 12px 12px 0;
  padding:1.4rem 1.6rem;
}
.home-about__box h4{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:800;
  margin:0 0 .8rem;
  color:var(--c-text);
}
.home-about__box ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.home-about__box li, .home-about__box p{
  font-size:.93rem;
  color:var(--c-text-soft);
  line-height:1.55;
  margin:0;
}

@media (max-width:720px){
  .about-service-box{ flex-direction:column; align-items:flex-start; gap:.9rem; }
  .home-about__bottom{ grid-template-columns:1fr; }
}

/* ============= STATS ============= */
.home-stats{
  background:#fff;
  padding:4.5rem 0;
}
.home-stats__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
}
.stat-item{
  text-align:left;
  padding:1rem;
}
.stat-item__top{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
}
.stat-icon{
  width:62px;
  height:62px;
  border-radius:50%;
  background:rgba(239,73,51,.1);
  display:grid;
  place-items:center;
  flex-shrink:0;
  transition:background .25s ease, transform .25s ease;
}
.stat-item:hover .stat-icon{
  background:var(--primary);
  transform:scale(1.06);
}
.stat-icon img{
  width:32px;
  height:32px;
  transition:filter .25s ease;
}
.stat-item:hover .stat-icon img{ filter:brightness(0) invert(1); }
.stat-numbers{
  display:flex;
  align-items:baseline;
  font-family:var(--font-display);
  font-weight:800;
  color:var(--c-text);
  font-size:2.1rem;
  letter-spacing:-.02em;
  line-height:1;
}
.stat-numbers .suffix{ color:var(--primary); margin-left:2px; }
.stat-item h5{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:800;
  margin:0 0 .55rem;
  color:var(--c-text);
}
.stat-item p{
  font-size:.9rem;
  line-height:1.55;
  color:var(--c-text-soft);
  margin:0;
}

@media (max-width:1024px){ .home-stats__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .home-stats__grid{ grid-template-columns:1fr; } }

/* ============= WHY US ============= */
.home-why{
  background:var(--c-bg-alt);
  padding:0;
}
.home-why__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  min-height:520px;
}
.home-why__text{
  padding:5rem 4rem 5rem 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.home-why__text .eyebrow-red{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:.55rem;
}
.home-why__text h3{
  font-family:var(--font-display);
  font-size:clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight:800;
  margin:0 0 1.2rem;
  color:var(--c-text);
  line-height:1.3;
}
.home-why__text > p{
  font-size:1rem;
  line-height:1.65;
  color:var(--c-text-soft);
  margin:0 0 2rem;
}
.why-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4rem;
  margin-bottom:2rem;
}
.why-feature{
  display:flex;
  align-items:center;
  gap:1rem;
}
.why-feature__icon{
  width:62px;
  height:62px;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  flex-shrink:0;
  border:1px solid #ecedef;
  transition:background .25s ease, transform .25s ease;
}
.why-feature:hover .why-feature__icon{
  background:var(--primary);
  transform:scale(1.06);
  border-color:var(--primary);
}
.why-feature__icon img{
  width:30px;
  height:30px;
  transition:filter .25s ease;
}
.why-feature:hover .why-feature__icon img{ filter:brightness(0) invert(1); }
.why-feature__text h5{
  font-family:var(--font-display);
  font-size:.95rem;
  font-weight:800;
  margin:0;
  line-height:1.25;
  color:var(--c-text);
}
.home-why__btn{
  align-self:flex-start;
  background:var(--primary);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  padding:.95rem 2rem;
  border-radius:50px;
  text-decoration:none;
  font-size:.95rem;
  box-shadow:0 10px 22px rgba(239,73,51,.3);
  transition:background .2s ease, transform .2s ease;
}
.home-why__btn:hover{ background:var(--primary-hover); transform:translateY(-2px); }

.home-why__img{
  position:relative;
  min-height:400px;
}
.home-why__img img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

@media (max-width:980px){
  .home-why__grid{ grid-template-columns:1fr; }
  .home-why__text{ padding:3.5rem 1.2rem; }
  .home-why__img{ min-height:280px; order:-1; }
  .why-features{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .why-features{ grid-template-columns:1fr; }
}

/* CONTACT (map + form) section moved to contact.css — shared by /, /uebersicht/, /about/, /contact/ (all link contact.css). */

/* ============= FAQ ============= */
.home-faq{
  background:var(--c-bg-alt);
  padding:5rem 0;
}
.home-faq__head{
  text-align:center;
  max-width:760px;
  margin:0 auto 2.8rem;
}
.home-faq__head .eyebrow-red{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:.55rem;
}
.home-faq__head h2{
  font-family:var(--font-display);
  font-size:clamp(1.55rem, 3vw, 2.15rem);
  font-weight:800;
  margin:0;
  color:var(--c-text);
  line-height:1.3;
}
.home-faq__list{
  max-width:880px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.home-faq__item{
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 14px rgba(6,17,34,.05);
  overflow:hidden;
  border:1px solid transparent;
  transition:border-color .25s ease;
}
.home-faq__item[open]{
  border-color:var(--primary);
}
.home-faq__item summary{
  list-style:none;
  cursor:pointer;
  padding:1.15rem 1.4rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  color:var(--c-text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.home-faq__item summary::-webkit-details-marker{ display:none; }
.home-faq__item summary::after{
  content:"";
  width:14px;
  height:14px;
  border-right:2px solid var(--primary);
  border-bottom:2px solid var(--primary);
  transform:rotate(45deg);
  transition:transform .25s ease;
  flex-shrink:0;
  margin-top:-4px;
}
.home-faq__item[open] summary::after{
  transform:rotate(-135deg);
  margin-top:4px;
}
.home-faq__item .faq-body{
  padding:0 1.4rem 1.3rem;
  color:var(--c-text-soft);
  line-height:1.6;
  font-size:.95rem;
}

/* ============= UTIL ============= */
.uebersicht-page main{ padding-top:0; }

/* ===== from about.css ===== */
/* =============================================================
   About page – /about/  (REDESIGN — editorial / modern)
   Same content/HTML, new visual treatment.
   Footer + menu untouched.
   Stats section overrides .home-stats only when scoped under .about-page
============================================================= */

/* ============= 1. PAGE HEADER (split editorial hero) ============= */
.about-page-header{
  position:relative;
  background:var(--c-navy, #061122);
  color:#fff;
  padding:7rem 0 6rem;
  overflow:hidden;
  isolation:isolate;
}
.about-page-header::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('/img/about/about.webp');
  background-size:cover;
  background-position:center right;
  opacity:.45;
  -webkit-mask-image:linear-gradient(to right, transparent 30%, #000 95%);
          mask-image:linear-gradient(to right, transparent 30%, #000 95%);
  z-index:-2;
}
.about-page-header::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 100% 30%, rgba(239,73,51,.30), transparent 55%),
    linear-gradient(90deg, rgba(6,17,34,.92) 0%, rgba(6,17,34,.55) 70%, rgba(6,17,34,.15) 100%);
  z-index:-1;
}
.about-page-header__inner{
  position:relative;
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-start;
  gap:1.8rem;
}
.about-breadcrumb{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  list-style:none;
  padding:.55rem 1.1rem;
  margin:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  border-radius:50px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.about-breadcrumb li{ display:inline-flex; align-items:center; gap:.6rem; }
.about-breadcrumb a{ color:rgba(255,255,255,.78); text-decoration:none; transition:color .2s; }
.about-breadcrumb a:hover{ color:#fff; }
.about-breadcrumb li + li::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--primary);
  margin-right:.2rem;
}
.about-breadcrumb .current{ color:var(--primary); }

.about-page-header h1{
  font-family:var(--font-display);
  font-size:clamp(2.6rem, 7vw, 5.4rem);
  font-weight:900;
  margin:0;
  color:#fff;
  letter-spacing:-.02em;
  line-height:1;
  max-width:780px;
}
.about-page-header h1::after{
  content:"";
  display:block;
  width:90px;
  height:5px;
  background:var(--primary);
  margin:1.6rem 0 0;
  border-radius:3px;
}
.about-page-header__tagline{
  margin:1.5rem 0 0;
  font-size:1.05rem;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  max-width:520px;
}

/* Floating "since" badge – purely decorative */
.about-page-header__since{
  position:absolute;
  right:max(2rem, 6vw);
  bottom:-32px;
  display:none;
  align-items:center;
  gap:.7rem;
  background:var(--primary);
  color:#fff;
  padding:1rem 1.4rem;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(239,73,51,.35);
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.04em;
  z-index:5;
}
@media (min-width:1024px){ .about-page-header__since{ display:inline-flex; } }
.about-page-header__since strong{
  font-size:1.6rem;
  line-height:1;
}
.about-page-header__since span{
  display:block;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.92;
}

/* ============= 2. STATS – override .home-stats only on about page ============= */
.about-page .home-stats{
  background:linear-gradient(180deg, #fff 0%, var(--c-bg-alt) 100%);
  padding:5rem 0;
}
.about-page .home-stats__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.4rem;
}
.about-page .home-stats .stat-item{
  background:#fff;
  border:1px solid rgba(6,17,34,.06);
  border-left:4px solid var(--primary);
  border-radius:6px;
  padding:2rem 1.6rem;
  text-align:left;
  box-shadow:0 6px 18px rgba(6,17,34,.04);
  transition:transform .25s ease, box-shadow .25s ease;
  position:relative;
  overflow:hidden;
}
.about-page .home-stats .stat-item::before{
  content:"";
  position:absolute;
  top:0; right:0;
  width:90px; height:90px;
  background:radial-gradient(circle at top right, rgba(239,73,51,.10), transparent 70%);
  pointer-events:none;
}
.about-page .home-stats .stat-item:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px rgba(6,17,34,.10);
}
.about-page .home-stats .stat-item__top{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:.9rem;
}
.about-page .home-stats .stat-icon{
  width:42px; height:42px;
  background:rgba(239,73,51,.10);
  border-radius:10px;
  padding:8px;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.about-page .home-stats .stat-icon img{
  width:100%; height:100%;
  object-fit:contain;
  filter:none;
}
.about-page .home-stats .stat-numbers{
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 4vw, 2.8rem);
  font-weight:900;
  line-height:1;
  color:var(--c-text);
  letter-spacing:-.02em;
}
.about-page .home-stats .stat-numbers .suffix{
  color:var(--primary);
  margin-left:.1em;
}
.about-page .home-stats .stat-item h5{
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:800;
  margin:0 0 .55rem;
  color:var(--c-text);
}
.about-page .home-stats .stat-item p{
  font-size:.88rem;
  line-height:1.55;
  color:var(--c-text-soft);
  margin:0;
}
@media (max-width:980px){ .about-page .home-stats__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .about-page .home-stats__grid{ grid-template-columns:1fr; } }

/* ============= 3. INTRO – sticky title + numbered tile bullets ============= */
.about-intro{
  background:#fff;
  padding:6rem 0 5rem;
  position:relative;
}
.about-intro::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%; height:6px;
  background:linear-gradient(90deg, var(--primary) 0%, transparent 60%);
}
.about-intro__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  max-width:1180px;
  margin:0 auto;
  counter-reset:bullet;
}
.about-intro__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:.8rem;
}
.about-intro__eyebrow::before{
  content:"";
  width:36px; height:2px;
  background:var(--primary);
}
.about-intro h2{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight:800;
  margin:0 0 1.5rem;
  color:var(--c-text);
  line-height:1.25;
  letter-spacing:-.01em;
}
.about-intro h2 em{
  display:block;
  font-style:normal;
  font-weight:500;
  font-size:.65em;
  color:var(--c-text-soft);
  line-height:1.6;
  margin-top:1rem;
  padding-left:1.2rem;
  border-left:3px solid var(--primary);
}
.about-intro__lead{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color:var(--c-text);
  margin:.5rem 0 1.6rem;
  display:flex;
  align-items:center;
  gap:.8rem;
}
.about-intro__lead::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(6,17,34,.15), transparent);
}

.about-bullets{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.2rem;
  margin:1rem 0 2.5rem;
}
.about-bullet{
  position:relative;
  display:block;
  background:#fff;
  border:1px solid rgba(6,17,34,.08);
  border-radius:14px;
  padding:1.6rem 1.4rem 1.4rem;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  counter-increment:bullet;
  overflow:hidden;
}
.about-bullet::before{
  content:"";
  position:absolute;
  top:0; right:0;
  width:0; height:3px;
  background:var(--primary);
  transition:width .35s ease;
}
.about-bullet:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px rgba(6,17,34,.08);
  border-color:rgba(239,73,51,.35);
}
.about-bullet:hover::before{ width:100%; }

.about-bullet__check{
  width:48px;
  height:48px;
  border-radius:12px;
  background:transparent;
  color:var(--primary);
  border:2px solid currentColor;
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.05rem;
  margin:0 0 1rem;
  box-shadow:none;
  letter-spacing:.02em;
}
.about-bullet__check i{ display:none; }
.about-bullet__check::before{
  content:counter(bullet, decimal-leading-zero);
}
.about-bullet:hover .about-bullet__check{
  background:var(--primary);
  color:#fff;
}

.about-bullet__body{ display:block; }
.about-bullet__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.02rem;
  color:var(--c-text);
  margin:0 0 .6rem;
  line-height:1.35;
}
.about-bullet ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.about-bullet li{
  font-size:.88rem;
  line-height:1.55;
  color:var(--c-text-soft);
  position:relative;
  padding-left:1rem;
}
.about-bullet li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--primary);
}

.about-intro__btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:transparent;
  color:var(--primary);
  border:2px solid var(--primary);
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.85rem;
  padding:.95rem 1.8rem;
  border-radius:50px;
  text-decoration:none;
  transition:background .2s, color .2s, transform .2s;
}
.about-intro__btn:hover{
  background:var(--primary);
  color:#fff;
  transform:translateX(4px);
}
.about-intro__btn i{ transition:transform .25s; }
.about-intro__btn:hover i{ transform:translateY(3px); }

@media (max-width:920px){ .about-bullets{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .about-bullets{ grid-template-columns:1fr; } }

/* ============= 4. DETAIL BLOCKS – chapter / asymmetric editorial ============= */
.about-detail{
  padding:5.5rem 0;
  background:#fff;
  position:relative;
}
.about-detail.muted{
  background:var(--c-bg-alt);
}
.about-detail__grid{
  display:grid;
  grid-template-columns:5fr 6fr;
  gap:4rem;
  align-items:center;
}
.about-detail.reverse .about-detail__grid{
  grid-template-columns:6fr 5fr;
  direction:rtl;
}
.about-detail.reverse .about-detail__grid > *{ direction:ltr; }

/* Image with offset red outline frame */
.about-detail__img{
  position:relative;
  border-radius:0;
  overflow:visible;
  aspect-ratio:4/5;
  box-shadow:none;
  isolation:isolate;
}
.about-detail__img::before{
  content:"";
  position:absolute;
  top:18px; left:18px;
  width:100%; height:100%;
  border:3px solid var(--primary);
  border-radius:6px;
  z-index:-1;
  transition:top .3s ease, left .3s ease;
}
.about-detail__img::after{
  content:none;
}
.about-detail__img img{
  position:relative;
  z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:6px;
  box-shadow:0 24px 50px rgba(6,17,34,.15);
  transition:transform .5s ease;
}
.about-detail:hover .about-detail__img::before{
  top:10px; left:10px;
}
.about-detail:hover .about-detail__img img{
  transform:translate(-4px,-4px);
}

/* Text column */
.about-detail__text{
  position:relative;
  padding:.5rem 0;
}

/* Massive chapter number derived from existing pill */
.about-detail__pill{
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-start;
  gap:.6rem;
  background:transparent;
  color:var(--c-text-soft);
  padding:0;
  border-radius:0;
  margin:0 0 1.4rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:left;
  line-height:1.4;
}
.about-detail__pill .num{
  width:auto;
  height:auto;
  background:transparent;
  color:var(--primary);
  border-radius:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(3.6rem, 8vw, 6rem);
  line-height:.85;
  letter-spacing:-.04em;
  display:inline-flex;
  align-items:flex-start;
  position:relative;
  padding-left:0;
}
.about-detail__pill .num::before{
  content:"0";
}
.about-detail__pill .num::after{
  content:"/05";
  font-size:.28em;
  color:var(--c-text-soft);
  font-weight:600;
  letter-spacing:.08em;
  margin-left:.4rem;
  margin-top:.5rem;
  align-self:flex-end;
  padding-bottom:.3em;
}

.about-detail__text h3{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 2.7vw, 2.1rem);
  font-weight:800;
  margin:0 0 1.2rem;
  color:var(--c-text);
  line-height:1.2;
  letter-spacing:-.01em;
  position:relative;
  padding-left:1.1rem;
}
.about-detail__text h3::before{
  content:"";
  position:absolute;
  left:0;
  top:.35em;
  bottom:.35em;
  width:4px;
  background:var(--primary);
  border-radius:3px;
}
.about-detail__text p{
  font-size:1rem;
  line-height:1.75;
  color:var(--c-text-soft);
  margin:0 0 1rem;
  padding-left:1.1rem;
}
.about-detail__text p:last-child{ margin-bottom:0; }

/* Subtle separator line between blocks */
.about-detail + .about-detail::before{
  content:"";
  display:block;
  width:60px;
  height:2px;
  background:var(--primary);
  margin:0 auto 1rem;
  position:relative;
  top:-2.5rem;
}

@media (max-width:900px){
  .about-detail{ padding:3.5rem 0; }
  .about-detail__grid,
  .about-detail.reverse .about-detail__grid{
    grid-template-columns:1fr;
    gap:2.2rem;
    direction:ltr;
  }
  .about-detail__img{ order:-1; aspect-ratio:5/4; }
  .about-detail__img::before{ top:10px; left:10px; }
}

/* ============= UTIL ============= */
.about-page main{ padding-top:0; }

/* ===== from preisliste.css ===== */
/* =============================================================
   Preisliste für Türöffnungen – surcharge list block
   Used on Kassel landing (#preisliste section)
   Depends on CSS variables defined in style.css :root
============================================================= */

.preisliste-section{
  background:#fff;
}

.preisliste-head{
  text-align:center;
  margin-bottom:2.4rem;
}
.preisliste-head .eyebrow-red{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:.6rem;
}
.preisliste-head h2{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  font-weight:800;
  margin:0;
  color:var(--c-text);
}

/* ==== Rows ==== */
.preisliste-list{
  max-width:980px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

.preisrow{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1.4rem;
  background:var(--c-bg-alt);
  border-radius:14px;
  padding:.85rem 1.3rem .85rem .85rem;
  transition:background .2s ease, transform .2s ease;
}
.preisrow:hover{
  background:#eef0f3;
  transform:translateX(4px);
}

/* Red diamond number badge */
.preis-num{
  position:relative;
  width:54px; height:54px;
  background:var(--primary);
  border-radius:6px;
  transform:rotate(45deg);
  display:grid;
  place-items:center;
  flex-shrink:0;
  box-shadow:0 6px 14px rgba(239,73,51,.28);
}
.preis-num span{
  transform:rotate(-45deg);
  color:#fff;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.1rem;
  letter-spacing:-.02em;
}

.preis-label{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  color:var(--c-text);
  line-height:1.35;
}

/* Red rectangular price pill on the right */
.preis-pill{
  background:var(--primary);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  padding:.85rem 1.6rem;
  border-radius:10px;
  min-width:120px;
  text-align:center;
  box-shadow:0 6px 14px rgba(239,73,51,.28);
  white-space:nowrap;
  transition:background .2s ease, transform .2s ease;
}
.preisrow:hover .preis-pill{
  background:var(--primary-hover);
  transform:scale(1.04);
}

/* ==== Hinweis (notes) block ==== */
.preis-hinweis{
  max-width:980px;
  margin:2.5rem auto 0;
  padding:1.6rem 1.8rem;
  border-left:4px solid var(--primary);
  background:#fafbfc;
  border-radius:0 10px 10px 0;
}
.preis-hinweis h3{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:800;
  color:var(--c-text);
  margin:0 0 .9rem;
}
.preis-hinweis ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.preis-hinweis li{
  position:relative;
  padding-left:1.2rem;
  font-size:.93rem;
  color:var(--c-text-soft);
  line-height:1.55;
}
.preis-hinweis li::before{
  content:"–";
  position:absolute;
  left:0;
  color:var(--primary);
  font-weight:700;
}

/* ==== Responsive ==== */
@media (max-width: 720px){
  .preisrow{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "num  label"
      "num  pill";
    gap:.4rem 1rem;
    padding:.85rem 1rem;
  }
  .preis-num{ grid-area:num; align-self:center; }
  .preis-label{ grid-area:label; font-size:.97rem; }
  .preis-pill{
    grid-area:pill;
    justify-self:start;
    padding:.45rem 1rem;
    font-size:.9rem;
    min-width:0;
  }
  .preis-hinweis{ padding:1.3rem 1.3rem; }
  .preis-hinweis li{ font-size:.88rem; }
}

@media (max-width: 420px){
  .preis-num{ width:44px; height:44px; }
  .preis-num span{ font-size:.95rem; }
}

/* ===== from contact.css ===== */
/* ============================================================
   contact.css — modern editorial styling for /contact/
   Scoped under .contact-page to avoid clashing with other pages.
   Reuses .home-contact form styles from uebersicht.css.
   ============================================================ */

/* ---------- HERO ---------- */
.contact-hero{
  position:relative;
  background:#061122;
  color:#fff;
  padding:120px 0 100px;
  overflow:hidden;
  isolation:isolate;
}
.contact-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 85% 20%, rgba(239,73,51,.35), transparent 55%),
    radial-gradient(circle at 15% 95%, rgba(239,73,51,.18), transparent 50%),
    linear-gradient(120deg, #061122 0%, #0c1c36 60%, #061122 100%);
  z-index:-1;
}
.contact-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(circle at 50% 60%, #000 0%, transparent 70%);
          mask-image:radial-gradient(circle at 50% 60%, #000 0%, transparent 70%);
  z-index:-1;
}
.contact-hero__inner{
  position:relative;
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-start;
  gap:1.6rem;
  max-width:920px;
}
.contact-hero h1{
  font-family:var(--font-display);
  font-size:clamp(3rem, 8vw, 6rem);
  font-weight:900;
  margin:0;
  letter-spacing:-.025em;
  line-height:.95;
  color:#fff;
}
.contact-hero h1::after{
  content:"";
  display:block;
  width:110px;
  height:5px;
  background:var(--primary);
  margin-top:1.4rem;
  border-radius:4px;
}
.contact-breadcrumb{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  list-style:none;
  margin:0;
  padding:.55rem 1.1rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  border-radius:999px;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
}
.contact-breadcrumb li{ display:inline-flex; align-items:center; gap:.6rem; }
.contact-breadcrumb li + li::before{
  content:"";
  width:5px; height:5px;
  border-radius:50%;
  background:var(--primary);
}
.contact-breadcrumb a{ color:rgba(255,255,255,.78); text-decoration:none; }
.contact-breadcrumb a:hover{ color:#fff; }
.contact-breadcrumb .current{ color:var(--primary); }

.contact-hero__lead{
  margin:0;
  max-width:620px;
  font-size:1.05rem;
  line-height:1.6;
  color:rgba(255,255,255,.78);
}

.contact-hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.contact-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  padding:.95rem 1.4rem;
  border-radius:14px;
  text-decoration:none;
  font-family:var(--font-display);
  transition:all .3s ease;
  border:1px solid transparent;
}
.contact-cta-btn i{
  font-size:1.4rem;
  width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.12);
  flex-shrink:0;
}
.contact-cta-btn span{ display:flex; flex-direction:column; line-height:1.15; }
.contact-cta-btn small{ font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; opacity:.75; }
.contact-cta-btn strong{ font-size:1.1rem; font-weight:800; }
.contact-cta-btn.primary{ background:var(--primary); color:#fff; box-shadow:0 16px 30px -16px rgba(239,73,51,.7); }
.contact-cta-btn.primary:hover{ background:var(--primary-hover); transform:translateY(-2px); }
.contact-cta-btn.ghost{ color:#fff; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.05); }
.contact-cta-btn.ghost:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }

/* ---------- QUICK CONTACT TILES ---------- */
.contact-tiles{
  padding:60px 0 20px;
  margin-top:-60px;
  position:relative;
  z-index:5;
}
.contact-tiles__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}
.contact-tile{
  display:block;
  padding:1.6rem 1.4rem;
  background:#fff;
  border-radius:16px;
  text-decoration:none;
  color:var(--c-text);
  border:1px solid rgba(6,17,34,.06);
  box-shadow:0 24px 50px -30px rgba(6,17,34,.18);
  transition:all .35s ease;
  position:relative;
  overflow:hidden;
}
.contact-tile::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:var(--primary);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .35s ease;
}
.contact-tile:hover{ transform:translateY(-6px); border-color:rgba(239,73,51,.2); box-shadow:0 30px 60px -28px rgba(6,17,34,.28); }
.contact-tile:hover::before{ transform:scaleY(1); transform-origin:top; }

.contact-tile__icon{
  width:48px; height:48px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(239,73,51,.12), rgba(239,73,51,.04));
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  margin-bottom:1rem;
}
.contact-tile__icon.wa{ background:linear-gradient(135deg, #25D366, #128C7E); color:#fff; }
.contact-tile h3{
  margin:0 0 .35rem;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--c-text);
}
.contact-tile p{
  margin:0 0 .4rem;
  font-weight:600;
  color:var(--c-text);
  font-size:.95rem;
}
.contact-tile small{
  font-size:.78rem;
  color:var(--c-text-soft);
}

/* ---------- AREA / EINSATZGEBIET ---------- */
.contact-area{ padding:80px 0 60px; }
.contact-area__head{ max-width:680px; margin:0 0 3rem; }
.contact-area__head .eyebrow-red{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:.7rem;
}
.contact-area__head h2{
  font-family:var(--font-display);
  font-size:clamp(1.9rem, 3.5vw, 2.7rem);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 .8rem;
  color:var(--c-text);
}
.contact-area__head p{ color:var(--c-text-soft); font-size:1.02rem; line-height:1.65; margin:0; }

.contact-area__grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:32px;
  align-items:start;
}
.contact-area__map{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(6,17,34,.3);
  border:1px solid rgba(6,17,34,.08);
}
.contact-area__map::before{
  content:"";
  position:absolute;
  top:18px; right:18px;
  background:#fff;
  color:var(--primary);
  padding:.45rem .8rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  z-index:2;
  box-shadow:0 6px 14px rgba(6,17,34,.12);
}
.contact-area__map::before{ content:"50 km Radius"; }
.contact-area__map img{ width:100%; height:100%; object-fit:cover; display:block; min-height:380px; }

.contact-area__cards{ display:flex; flex-direction:column; gap:18px; }
.contact-area-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(6,17,34,.08);
  border-radius:18px;
  padding:1.8rem 1.7rem 1.6rem;
  box-shadow:0 14px 30px -22px rgba(6,17,34,.22);
}
.contact-area-card.alt{ background:linear-gradient(140deg, #061122 0%, #0c1c36 100%); color:#fff; border-color:transparent; }
.contact-area-card.alt h3{ color:#fff; }
.contact-area-card.alt p{ color:rgba(255,255,255,.78); }
.contact-area-card.alt small{ color:rgba(255,255,255,.55); }
.contact-area-card.alt strong{ color:var(--primary); }

.contact-area-card__num{
  position:absolute;
  top:-14px; left:24px;
  background:var(--primary);
  color:#fff;
  font-family:var(--font-display);
  font-weight:800;
  font-size:.82rem;
  letter-spacing:.06em;
  padding:.3rem .7rem;
  border-radius:8px;
}
.contact-area-card h3{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:800;
  margin:0 0 .8rem;
  color:var(--c-text);
}
.contact-area-card__sub{
  display:block;
  font-size:.85rem;
  color:var(--c-text-soft);
  margin-bottom:1rem;
}
.contact-area-card__cities{
  list-style:none;
  margin:0 0 1rem;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.4rem .8rem;
}
.contact-area-card__cities li{
  position:relative;
  padding-left:1rem;
  font-size:.9rem;
  color:var(--c-text);
}
.contact-area-card__cities li::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--primary);
}
.contact-area-card p{
  font-size:.92rem;
  line-height:1.6;
  color:var(--c-text-soft);
  margin:0 0 .8rem;
}
.contact-area-card small{ font-size:.78rem; color:var(--c-text-soft); }

/* ---------- CONTACT DETAILS ---------- */
.contact-details{ padding:80px 0; background:var(--c-light, #f6f7f8); }
.contact-details__grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:48px;
  align-items:center;
}
.contact-details__text .eyebrow-red{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:.8rem;
}
.contact-details__text h2{
  font-family:var(--font-display);
  font-size:clamp(1.8rem, 3vw, 2.5rem);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--c-text);
  margin:0 0 1rem;
}
.contact-details__intro{
  color:var(--c-text-soft);
  font-size:1rem;
  line-height:1.65;
  margin:0 0 1.8rem;
}

.contact-details__list{
  list-style:none;
  margin:0 0 1.8rem;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.contact-details__list li{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem 1.2rem;
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(6,17,34,.06);
  box-shadow:0 8px 20px -16px rgba(6,17,34,.18);
  transition:all .25s ease;
}
.contact-details__list li:hover{
  transform:translateX(4px);
  border-color:rgba(239,73,51,.25);
  box-shadow:0 14px 26px -18px rgba(6,17,34,.25);
}
.contact-details__ico{
  width:44px; height:44px;
  flex-shrink:0;
  border-radius:12px;
  background:rgba(239,73,51,.12);
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
}
.contact-details__ico.wa{ background:#25D366; color:#fff; }
.contact-details__list small{
  display:block;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-text-soft);
  margin-bottom:.15rem;
}
.contact-details__list a{
  color:var(--c-text);
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
}
.contact-details__list a:hover{ color:var(--primary); }

.contact-details__note{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  background:rgba(239,73,51,.08);
  border-left:3px solid var(--primary);
  padding:.9rem 1.1rem;
  border-radius:0 12px 12px 0;
  font-size:.88rem;
  color:var(--c-text);
  margin:0;
}
.contact-details__note i{ color:var(--primary); margin-top:.15rem; }

.contact-details__media{
  position:relative;
  isolation:isolate;
}
.contact-details__frame{
  position:absolute;
  top:24px; left:24px;
  right:-24px; bottom:-24px;
  border:3px solid var(--primary);
  border-radius:20px;
  z-index:-1;
}
.contact-details__media img{
  width:100%;
  height:100%;
  max-height:520px;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 30px 60px -30px rgba(6,17,34,.35);
  display:block;
}

/* ---------- WHY ---------- */
.contact-why{ padding:90px 0; }
.contact-why__head{ text-align:center; max-width:700px; margin:0 auto 3rem; }
.contact-why__head .eyebrow-red{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:.7rem;
}
.contact-why__head h2{
  font-family:var(--font-display);
  font-size:clamp(1.9rem, 3.5vw, 2.7rem);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 .8rem;
  color:var(--c-text);
}
.contact-why__head p{ color:var(--c-text-soft); font-size:1.02rem; line-height:1.65; margin:0; }

.contact-why__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.contact-why-card{
  position:relative;
  padding:2rem 1.6rem 1.7rem;
  background:#fff;
  border:1px solid rgba(6,17,34,.06);
  border-radius:18px;
  transition:all .35s ease;
  box-shadow:0 14px 30px -24px rgba(6,17,34,.18);
  overflow:hidden;
}
.contact-why-card::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg, var(--primary), transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
}
.contact-why-card:hover{ transform:translateY(-6px); border-color:rgba(239,73,51,.25); box-shadow:0 26px 48px -28px rgba(6,17,34,.3); }
.contact-why-card:hover::after{ transform:scaleX(1); }

.contact-why-card__icon{
  width:54px; height:54px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(239,73,51,.18), rgba(239,73,51,.04));
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  margin-bottom:1.2rem;
}
.contact-why-card h3{
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:800;
  margin:0 0 .6rem;
  color:var(--c-text);
  letter-spacing:-.01em;
}
.contact-why-card p{
  font-size:.93rem;
  line-height:1.6;
  color:var(--c-text-soft);
  margin:0;
}

/* ---------- PRICING ---------- */
.contact-pricing{ padding:90px 0; background:var(--c-light, #f6f7f8); }
.contact-pricing__head{ max-width:680px; margin:0 0 3rem; }
.contact-pricing__head .eyebrow-red{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:.7rem;
}
.contact-pricing__head h2{
  font-family:var(--font-display);
  font-size:clamp(1.9rem, 3.5vw, 2.7rem);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 .8rem;
  color:var(--c-text);
}
.contact-pricing__head p{ color:var(--c-text-soft); font-size:1.02rem; margin:0; }

.contact-pricing__list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.contact-pricing-row{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:1.5rem;
  padding:1.4rem 1.7rem;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(6,17,34,.06);
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.contact-pricing-row::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:var(--primary);
  transform:scaleY(.3);
  transition:transform .35s ease;
}
.contact-pricing-row:hover{
  transform:translateX(6px);
  border-color:rgba(239,73,51,.22);
  box-shadow:0 18px 36px -22px rgba(6,17,34,.22);
}
.contact-pricing-row:hover::before{ transform:scaleY(1); }

.contact-pricing-row__num{
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:800;
  color:var(--primary);
  letter-spacing:-.02em;
  min-width:42px;
}
.contact-pricing-row h3{
  margin:0;
  font-family:var(--font-display);
  font-size:1.1rem;
  font-weight:700;
  color:var(--c-text);
  letter-spacing:-.01em;
}
.contact-pricing-row__sub{
  font-size:.88rem;
  color:var(--c-text-soft);
  white-space:nowrap;
}
.contact-pricing-row__price{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:800;
  color:var(--c-text);
  letter-spacing:-.01em;
  background:rgba(239,73,51,.1);
  color:var(--primary);
  padding:.5rem 1rem;
  border-radius:10px;
  white-space:nowrap;
}

.contact-pricing__note{
  margin-top:2rem;
  background:#fff;
  border:1px dashed rgba(6,17,34,.18);
  border-radius:16px;
  padding:1.6rem 1.8rem;
}
.contact-pricing__note h4{
  margin:0 0 .9rem;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.05rem;
  color:var(--c-text);
  display:flex;
  align-items:center;
  gap:.5rem;
}
.contact-pricing__note h4 i{ color:var(--primary); }
.contact-pricing__note ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.contact-pricing__note li{
  position:relative;
  padding-left:1.1rem;
  font-size:.9rem;
  line-height:1.55;
  color:var(--c-text-soft);
}
.contact-pricing__note li::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--primary);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px){
  .contact-tiles__grid{ grid-template-columns:repeat(2, 1fr); }
  .contact-area__grid{ grid-template-columns:1fr; }
  .contact-details__grid{ grid-template-columns:1fr; gap:32px; }
  .contact-details__media{ order:-1; }
  .contact-why__grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 640px){
  .contact-hero{ padding:90px 0 80px; }
  .contact-hero h1{ font-size:clamp(2.4rem, 12vw, 3.2rem); }
  .contact-tiles{ margin-top:-40px; }
  .contact-tiles__grid{ grid-template-columns:1fr; }
  .contact-area-card__cities{ grid-template-columns:1fr; }
  .contact-why__grid{ grid-template-columns:1fr; }
  .contact-pricing-row{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "num title"
      "num sub"
      "price price";
    gap:.4rem 1rem;
  }
  .contact-pricing-row__num{ grid-area:num; }
  .contact-pricing-row h3{ grid-area:title; }
  .contact-pricing-row__sub{ grid-area:sub; white-space:normal; }
  .contact-pricing-row__price{ grid-area:price; justify-self:start; margin-top:.5rem; }
  .contact-cta-btn{ flex:1; }
}

/* ============================================================
   CONTACT SECTION (map + form)
   Shared section markup `.home-contact` is reused on:
   /, /uebersicht/, /about/, /contact/
   All four pages link this stylesheet so these rules apply
   regardless of where the contact form is embedded.
   ============================================================ */
.home-contact{
  background:var(--c-bg-alt);
  padding:0;
}
.home-contact__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:560px;
}
.home-contact__map{
  min-height:400px;
  position:relative;
}
.home-contact__map iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.home-contact__form-side{
  padding:4rem 4rem 4rem 3rem;
  background:var(--c-bg-alt);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.home-contact__form-side .eyebrow-red{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:.55rem;
}
.home-contact__form-side h3{
  font-family:var(--font-display);
  font-size:clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight:800;
  margin:0 0 1rem;
  color:var(--c-text);
}
.home-contact__form-side > p{
  font-size:.95rem;
  color:var(--c-text-soft);
  line-height:1.6;
  margin:0 0 1.8rem;
}

/* ---------- The actual contact form ---------- */
.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.9rem;
}
.contact-form .full{ grid-column:1/-1; }
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  background:#fff;
  border:1px solid #e4e6e9;
  border-radius:8px;
  padding:.95rem 1rem;
  font-size:.95rem;
  font-family:inherit;
  color:var(--c-text);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-form textarea{
  min-height:110px;
  resize:vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(239,73,51,.15);
}
.contact-form .privacy{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  font-size:.83rem;
  color:var(--c-text-soft);
  line-height:1.45;
  padding:.5rem 0;
}
.contact-form .privacy input{
  width:auto;
  margin-top:.25rem;
  accent-color:var(--primary);
}
.contact-form .privacy a{ color:var(--primary); text-decoration:underline; }
.contact-form button{
  background:var(--primary);
  color:#fff;
  border:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  padding:1rem 2rem;
  border-radius:50px;
  cursor:pointer;
  justify-self:start;
  box-shadow:0 10px 22px rgba(239,73,51,.3);
  transition:background .2s ease, transform .2s ease;
}
.contact-form button:hover{ background:var(--primary-hover); transform:translateY(-2px); }

.home-contact__email{
  margin-top:1.4rem;
  font-size:.88rem;
  color:var(--c-text-soft);
}
.home-contact__email a{ color:var(--primary); text-decoration:none; font-weight:600; }

@media (max-width:980px){
  .home-contact__grid{ grid-template-columns:1fr; }
  .home-contact__form-side{ padding:3rem 1.2rem; }
}
@media (max-width:520px){
  .contact-form{ grid-template-columns:1fr; }
}

/* ===== from key-service.css (page-specific .ks-*) ===== */
/* ============================================================
   key-service.css
   Page-unique styles for /key-service/ (Schlüsseldienst Kassel).
   All selectors are prefixed with `.ks-` so they don't collide
   with shared rules. The page also relies on:
   - style.css       (vars, buttons, base, .section, .eyebrow,
                      .footer, floating CTAs, cookie banner, .faq-*)
   - menu.css        (topbar + navbar)
   - uebersicht.css  (.section-head, .eyebrow-pill, .section-muted)
   - about.css       (.about-detail alternating image+text rows)
   - preisliste.css  (.preisliste-*, .preisrow, .preis-*)
   - contact.css     (.home-contact*, .contact-form*)
   ============================================================ */

/* ---------- HERO ---------- */
.ks-hero{
  position:relative;
  padding:7rem 0 5rem;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.ks-hero__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 500px at 85% 15%, rgba(239,73,51,.28), transparent 60%),
    radial-gradient(700px 480px at 10% 90%, rgba(239,73,51,.18), transparent 65%),
    linear-gradient(135deg, #061122 0%, #0a1828 55%, #0d1f33 100%);
}
.ks-hero__bg::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at center, #000 35%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 35%, transparent 85%);
  pointer-events:none;
}
.ks-hero__bg::after{
  content:""; position:absolute; inset:auto 0 0 0; height:140px;
  background:linear-gradient(to bottom, transparent, rgba(0,0,0,.35));
  pointer-events:none;
}
.ks-hero__inner{
  max-width:920px;
  margin:0 auto;
  text-align:center;
  position:relative;
}
.ks-hero__inner .eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:.5rem 1rem; border-radius:50px;
  margin-bottom:1.2rem; font-weight:600;
}
.ks-hero__inner .dot{
  width:8px; height:8px; border-radius:50%; background:var(--primary);
}
.ks-hero h1{
  font-family:var(--font-display);
  font-size:clamp(2rem, 4.5vw, 3.6rem);
  font-weight:800;
  line-height:1.15;
  margin:0 0 1.2rem;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.ks-hero h1 .highlight{
  color:var(--primary);
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.ks-hero .lead{
  font-size:clamp(1rem,1.4vw,1.15rem);
  line-height:1.65;
  color:rgba(255,255,255,.85);
  max-width:760px; margin:0 auto 2rem;
}
.ks-hero__ctas{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:.85rem; margin-bottom:2.4rem;
}
.ks-hero__ctas .btn-outline{
  background:#25D366;
  border-color:#25D366;
  color:#fff;
}
.ks-hero__ctas .btn-outline:hover{
  background:#1ebe5d;
  border-color:#1ebe5d;
  color:#fff;
}
.ks-hero__bullets{
  display:flex; justify-content:center; flex-wrap:wrap; gap:1.2rem 2rem;
  font-size:.92rem; color:rgba(255,255,255,.9);
}
.ks-hero__bullets span{ display:inline-flex; align-items:center; gap:.55rem; }
.ks-hero__bullets i{ color:var(--primary); font-size:1.1rem; }

/* ---------- INFO / PROBLEM ---------- */
.ks-info{
  background:var(--c-bg-alt);
  padding:5rem 0;
}
.ks-info__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:3rem;
  align-items:center;
}
.ks-info__head h2{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:800;
  color:var(--c-text);
  margin:0 0 .7rem;
  line-height:1.2;
}
.ks-info__sub{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--primary);
  font-size:1.15rem;
  margin:0 0 1rem;
}
.ks-info__copy{
  font-size:.98rem;
  color:var(--c-text-soft);
  line-height:1.7;
  margin:0 0 1.4rem;
}
.ks-info__problems{
  list-style:none; padding:0; margin:0 0 1.6rem;
  display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem 1.2rem;
}
.ks-info__problems li{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:700; color:var(--c-text);
  font-family:var(--font-display);
  font-size:1rem;
}
.ks-info__problems i{ color:var(--primary); font-size:1.05rem; }
.ks-info__cta{ justify-self:start; }

.ks-info__reviews{
  display:flex; flex-direction:column; gap:.9rem;
}
.ks-review-card{
  background:#fff;
  border:1px solid #e6e8ec;
  border-left:4px solid var(--primary);
  border-radius:10px;
  padding:1rem 1.2rem;
  display:flex; align-items:center; gap:1rem;
  box-shadow:0 4px 14px rgba(6,17,34,.06);
}
.ks-review-card__stars{
  color:var(--primary);
  font-size:1.1rem;
  letter-spacing:.05em;
}
.ks-review-card__text{
  display:flex; flex-direction:column; line-height:1.2;
}
.ks-review-card__text strong{
  font-family:var(--font-display);
  font-size:1.2rem;
  color:var(--c-text);
}
.ks-review-card__text span{
  font-size:.82rem;
  color:var(--c-text-soft);
}

/* ---------- WHY US ---------- */
.ks-why__grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:3rem;
  align-items:center;
}
.ks-why__image{
  position:relative;
  border-radius:14px; overflow:hidden;
  box-shadow:0 20px 40px rgba(6,17,34,.15);
}
.ks-why__image::after{
  content:""; position:absolute; inset:-12px -12px auto auto;
  width:80px; height:80px;
  border:3px solid var(--primary);
  border-radius:14px;
  z-index:-1;
}
.ks-why__image img{ width:100%; height:auto; display:block; }
.ks-why__text h2{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,2.6vw,2.2rem);
  font-weight:800;
  color:var(--c-text);
  margin:.6rem 0 1.2rem;
  line-height:1.2;
}
.ks-why__list{
  list-style:none; padding:0; margin:0 0 1.3rem;
  display:grid; gap:.75rem;
}
.ks-why__list li{
  display:flex; align-items:flex-start; gap:.7rem;
  font-size:.98rem;
  color:var(--c-text);
  line-height:1.5;
}
.ks-why__list i{
  color:var(--primary);
  font-size:1.15rem;
  flex-shrink:0;
  margin-top:.15rem;
}
.ks-why__tag{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--primary);
  font-size:1rem;
  margin:0;
}

/* ---------- EINSATZGEBIETE ---------- */
.ks-areas__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:.7rem;
  margin-top:2rem;
}
.ks-area{
  display:inline-flex; align-items:center; gap:.55rem;
  background:#fff;
  border:1px solid #e6e8ec;
  border-radius:8px;
  padding:.85rem 1rem;
  font-size:.93rem;
  color:var(--c-text);
  text-decoration:none;
  font-weight:600;
  transition:border-color .2s ease, transform .2s ease, color .2s ease;
}
.ks-area i{ color:var(--primary); font-size:1rem; flex-shrink:0; }
a.ks-area:hover{
  border-color:var(--primary);
  color:var(--primary);
  transform:translateY(-1px);
}

/* ---------- PARALLAX SECTION ---------- */
/* Full image is always visible (no cropping). Uses background-size:contain
   + background-attachment:fixed so the image stays "pinned" while the
   section scrolls past it. Dark navy fills the letterbox bars. */
.ks-parallax{
  position:relative;
  background:
    #061122
    url('/img/locksmith-at-work.jpg')
    center/contain
    no-repeat
    fixed;
  min-height:560px;
  display:flex;
  align-items:center;
}
.ks-parallax__overlay{
  width:100%;
  padding:5rem 0;
  color:#fff;
}
.ks-parallax__inner{
  max-width:520px;
  background:rgba(6,17,34,.82);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:2rem 2rem 2.2rem;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.ks-parallax__inner .eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  padding:.5rem 1rem; border-radius:50px;
  margin-bottom:1.3rem; font-weight:600;
}
.ks-parallax__inner .eyebrow .dot{
  width:8px; height:8px; border-radius:50%; background:var(--primary);
}
.ks-parallax__inner h2{
  font-family:var(--font-display);
  font-size:clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight:800;
  line-height:1.2;
  margin:0 0 1.1rem;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.ks-parallax__inner h2 .highlight{ color:var(--primary); }
.ks-parallax__inner p{
  font-size:1.05rem;
  line-height:1.65;
  color:rgba(255,255,255,.9);
  margin:0 0 2rem;
  max-width:560px;
}
.ks-parallax__stats{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.8rem;
}
.ks-parallax__stats > div{
  display:flex; flex-direction:column;
  padding:1rem .8rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  backdrop-filter:blur(4px);
}
.ks-parallax__stats strong{
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:800;
  color:#fff;
  line-height:1.1;
  margin-bottom:.25rem;
}
.ks-parallax__stats span{
  font-size:.78rem;
  color:rgba(255,255,255,.75);
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* iOS/Safari don't fully support background-attachment:fixed;
   fall back to scroll on small screens for performance + correctness */
@media (max-width:900px){
  .ks-parallax{
    background-attachment:scroll;
    min-height:auto;
  }
  .ks-parallax__overlay{
    background:linear-gradient(180deg, rgba(6,17,34,.88), rgba(6,17,34,.78));
    padding:4rem 0;
  }
  .ks-parallax__stats{ grid-template-columns:repeat(2, 1fr); }
}

/* ---------- BANNER ---------- */
.ks-banner{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color:#fff;
  padding:3rem 0;
}
.ks-banner__inner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1.5rem;
}
.ks-banner__inner h3{
  font-family:var(--font-display);
  font-size:clamp(1.2rem,2vw,1.65rem);
  font-weight:800;
  margin:0 0 .35rem;
  color:#fff;
}
.ks-banner__inner p{ margin:0; color:rgba(255,255,255,.92); font-size:.98rem; }
.ks-banner__ctas{ display:flex; gap:.7rem; flex-wrap:wrap; }
.ks-banner .btn-light{
  background:#fff; color:var(--primary); border:0;
}
.ks-banner .btn-light:hover{ background:#fff5f3; }

/* ---------- SERVICES GRID ---------- */
.ks-services__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.4rem;
  margin-top:2.5rem;
}
.ks-service-card{
  background:#fff;
  border:1px solid #e6e8ec;
  border-radius:14px;
  padding:2rem 1.6rem;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;
  overflow:hidden;
}
.ks-service-card::before{
  content:""; position:absolute; left:0; top:0; right:0; height:3px;
  background:var(--primary);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.ks-service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 36px rgba(6,17,34,.1);
  border-color:transparent;
}
.ks-service-card:hover::before{ transform:scaleX(1); }
.ks-service-card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:70px; height:70px; border-radius:50%;
  background:rgba(239,73,51,.08);
  color:var(--primary);
  font-size:2rem;
  margin-bottom:1.1rem;
  transition:background .3s ease, color .3s ease;
}
.ks-service-card:hover .ks-service-card__icon{
  background:var(--primary);
  color:#fff;
}
.ks-service-card h4{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:800;
  margin:0 0 .7rem;
  color:var(--c-text);
  line-height:1.35;
}
.ks-service-card p{
  font-size:.9rem;
  color:var(--c-text-soft);
  line-height:1.55;
  margin:0;
}

/* ---------- FAQ (base accordion + page tweak) ---------- */
.faq-list{ max-width:840px; margin:0 auto; display:grid; gap:.7rem; }
.faq-item{
  background:#fff; border:1px solid var(--c-border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.faq-item[open]{ border-color:var(--primary); box-shadow:var(--shadow-sm); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  list-style:none; cursor:pointer;
  padding:1.1rem 1.3rem;
  font-family:var(--font-display);
  font-weight:700; font-size:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary i{
  width:32px; height:32px; border-radius:50%;
  background:var(--c-bg-alt);
  display:grid; place-items:center;
  color:var(--c-text); flex:0 0 auto;
  transition:transform .25s, background .25s, color .25s;
}
.faq-item[open] summary i{
  transform:rotate(45deg); background:var(--primary); color:#ffffff;
}
.faq-item p{ padding:0 1.3rem 1.2rem; color:var(--c-text-soft); margin:0; }

.ks-faq .faq-list{ max-width:900px; margin:2rem auto 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .ks-hero{ padding:5rem 0 4rem; }
  .ks-info__grid{ grid-template-columns:1fr; gap:2rem; }
  .ks-why__grid{ grid-template-columns:1fr; gap:2rem; }
  .ks-why__image{ max-width:520px; margin:0 auto; }
}
@media (max-width:560px){
  .ks-hero{ padding:4rem 0 3rem; }
  .ks-hero__bullets{ gap:.7rem 1.2rem; font-size:.86rem; }
  .ks-info__problems{ grid-template-columns:1fr; }
  .ks-areas__grid{ grid-template-columns:1fr; }
  .ks-banner__inner{ flex-direction:column; text-align:center; }
  .ks-service-card{ padding:1.6rem 1.2rem; }
}