/*
 * Leistungen · page-isolated premium hero/header treatment
 * Scope: loaded only by /de/leistungen/ via protected/views/de/leistungen.php
 * No global layout, shared view, shared stylesheet or shared script is modified.
 */

/* --------------------------------------------------------------------------
   Header / first screen
   This stylesheet is page-exclusive, therefore the direct header selectors
   below cannot affect any other URL.
   -------------------------------------------------------------------------- */
html,
body {
  overflow-x: clip;
}

html body > main {
  padding-top: 0 !important;
}

body.lt-integrated-hero-header::before,
body.lt-integrated-hero-header::after {
  display: none !important;
}

.lt-site-header {
  position: fixed !important;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9990;
  background: linear-gradient(180deg, rgba(7, 24, 28, .86) 0%, rgba(7, 24, 28, .72) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(15px) saturate(118%) !important;
  backdrop-filter: blur(15px) saturate(118%) !important;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, backdrop-filter .22s ease !important;
}

.lt-site-header::after {
  opacity: 0 !important;
}

.lt-site-header:not(.is-scrolled) .lt-brand img {
  filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0, 0, 0, .18));
}

.lt-site-header:not(.is-scrolled) .lt-nav-link,
.lt-site-header:not(.is-scrolled) .lt-nav-trigger {
  color: rgba(255, 255, 255, .94) !important;
  text-shadow: 0 1px 9px rgba(0, 0, 0, .24) !important;
}

.lt-site-header:not(.is-scrolled) .lt-nav-link:hover,
.lt-site-header:not(.is-scrolled) .lt-nav-trigger:hover,
.lt-site-header:not(.is-scrolled) .lt-nav-link[aria-current="page"],
.lt-site-header:not(.is-scrolled) .lt-nav-item.is-active > .lt-nav-trigger {
  background: rgba(255, 255, 255, .11) !important;
  color: #fff !important;
}

.lt-site-header:not(.is-scrolled) .lt-nav-item.is-active > .lt-nav-trigger::after,
.lt-site-header:not(.is-scrolled) .lt-nav-link[aria-current="page"]::after {
  background: rgba(255, 255, 255, .86) !important;
}

.lt-site-header:not(.is-scrolled) .lt-language__trigger {
  border-color: rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .10) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .12) !important;
}

.lt-site-header:not(.is-scrolled) .lt-language__trigger i {
  color: rgba(255, 255, 255, .78) !important;
}

.lt-site-header:not(.is-scrolled) .lt-header-cta {
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow: 0 10px 28px rgba(6, 73, 19, .30), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

.lt-site-header.is-scrolled,
body.lt-nav-open .lt-site-header {
  background: rgba(250, 253, 252, .96) !important;
  border-bottom-color: rgba(43, 82, 52, .12) !important;
  box-shadow: 0 10px 30px rgba(17, 41, 29, .11) !important;
  -webkit-backdrop-filter: blur(20px) saturate(138%) !important;
  backdrop-filter: blur(20px) saturate(138%) !important;
}

.lt-site-header.is-scrolled .lt-brand img,
body.lt-nav-open .lt-site-header .lt-brand img {
  filter: none !important;
}

.lt-site-header.is-scrolled .lt-nav-link,
.lt-site-header.is-scrolled .lt-nav-trigger,
body.lt-nav-open .lt-site-header .lt-nav-link,
body.lt-nav-open .lt-site-header .lt-nav-trigger {
  color: #263526 !important;
  text-shadow: none !important;
}

.lt-site-header.is-scrolled .lt-language__trigger,
body.lt-nav-open .lt-site-header .lt-language__trigger {
  border-color: rgba(80, 126, 82, .17) !important;
  background: rgba(255, 255, 255, .82) !important;
  color: #314635 !important;
}

/* --------------------------------------------------------------------------
   Page hero
   -------------------------------------------------------------------------- */
[data-page-leistungen] .lt-leistungen-hero {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  padding: calc(var(--lt-header-height) + 70px) 0 72px !important;
  border: 0 !important;
  background: #0b1d1e !important;
  isolation: isolate;
}

[data-page-leistungen] .lt-leistungen-hero__media {
  position: absolute;
  z-index: -3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

[data-page-leistungen] .lt-leistungen-hero__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 18%;
  transform: scale(1.002);
}

[data-page-leistungen] .lt-leistungen-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 23, 26, .94) 0%, rgba(7, 23, 26, .88) 28%, rgba(7, 23, 26, .68) 48%, rgba(7, 23, 26, .25) 68%, rgba(7, 23, 26, .10) 100%),
    linear-gradient(180deg, rgba(4, 19, 23, .18) 0%, rgba(4, 19, 23, .04) 62%, rgba(4, 19, 23, .48) 100%);
}

[data-page-leistungen] .lt-leistungen-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 105px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .04));
}

[data-page-leistungen] .lt-leistungen-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(310px, .76fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: end;
  min-height: 500px;
}

[data-page-leistungen] .lt-leistungen-hero__copy {
  align-self: center;
  max-width: 760px;
}

[data-page-leistungen] .lt-leistungen-hero .lt-eyebrow {
  color: #cfe9d0;
}

[data-page-leistungen] .lt-leistungen-hero .lt-eyebrow::before {
  background: #76bd69;
}

[data-page-leistungen] .lt-leistungen-hero h1 {
  max-width: 760px;
  margin-bottom: 18px;
  color: #fff;
  font-size: clamp(2.08rem, 3.25vw, 3.05rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .20);
}

[data-page-leistungen] .lt-leistungen-hero .lt-lead {
  max-width: 690px;
  margin-bottom: 25px;
  color: rgba(238, 246, 242, .88);
  font-size: clamp(1.02rem, 1.45vw, 1.17rem);
  line-height: 1.67;
}

[data-page-leistungen] .lt-leistungen-hero .lt-btn--primary {
  background: #268f19;
  border-color: rgba(255, 255, 255, .08);
  color: #fff;
  box-shadow: 0 12px 28px rgba(13, 88, 19, .30);
}

[data-page-leistungen] .lt-leistungen-hero .lt-btn--primary:hover {
  background: #1b7710;
  color: #fff;
}

[data-page-leistungen] .lt-leistungen-hero__secondary {
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .10);
  color: #fff;
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}

[data-page-leistungen] .lt-leistungen-hero__secondary:hover {
  border-color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

[data-page-leistungen] .lt-leistungen-hero__principles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

[data-page-leistungen] .lt-leistungen-hero__principles span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  background: rgba(6, 21, 23, .28);
  color: rgba(244, 249, 246, .87);
  font-size: .78rem;
  font-weight: 690;
  line-height: 1.1;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

[data-page-leistungen] .lt-leistungen-hero__principles i {
  color: #a8dca0;
}

[data-page-leistungen] .lt-leistungen-hero__aside {
  align-self: end;
  max-width: 390px;
  justify-self: end;
  padding: 22px 23px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 18px;
  background: rgba(7, 22, 25, .56) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .20) !important;
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  backdrop-filter: blur(16px) saturate(118%);
}

[data-page-leistungen] .lt-leistungen-hero__aside .lt-card__icon {
  margin-bottom: 12px;
  background: rgba(255, 255, 255, .12);
  color: #cce7c9;
}

[data-page-leistungen] .lt-leistungen-hero__aside h2 {
  margin-bottom: 8px;
  color: #fff;
  font-size: 1.08rem;
  line-height: 1.3;
}

[data-page-leistungen] .lt-leistungen-hero__aside p {
  margin: 0;
  color: rgba(237, 244, 240, .82);
  font-size: .91rem;
  line-height: 1.58;
}

/* --------------------------------------------------------------------------
   Compact premium refinement for this page only
   -------------------------------------------------------------------------- */
[data-page-leistungen] .lt-section {
  padding: 64px 0;
}

[data-page-leistungen] .lt-section__head {
  max-width: 740px;
  margin-bottom: 26px;
}

[data-page-leistungen] .lt-section__head h2 {
  margin-bottom: 10px;
}

[data-page-leistungen] .lt-primary-service {
  padding: clamp(24px, 3vw, 34px);
  border-color: rgba(86, 139, 84, .22);
  border-radius: 20px;
  background: linear-gradient(145deg, #f1f8ee 0%, #fff 72%);
  box-shadow: 0 16px 38px rgba(31, 70, 36, .09);
}

[data-page-leistungen] .lt-primary-service__proof {
  border-color: rgba(82, 131, 80, .16);
  background: rgba(255, 255, 255, .92);
}

[data-page-leistungen] .lt-leistungen-card-grid .lt-card {
  border-radius: 17px;
  border-color: rgba(73, 112, 79, .14);
  box-shadow: 0 9px 26px rgba(26, 58, 34, .055);
}

[data-page-leistungen] .lt-leistungen-card-grid .lt-card:hover {
  transform: translateY(-2px);
  border-color: rgba(46, 125, 39, .23);
  box-shadow: 0 15px 32px rgba(26, 58, 34, .085);
}

[data-page-leistungen] .lt-leistungen-proof .lt-split__media {
  border-color: rgba(66, 113, 78, .15);
  box-shadow: 0 16px 34px rgba(25, 58, 39, .10);
}

/* --------------------------------------------------------------------------
   Tablet / mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  [data-page-leistungen] .lt-leistungen-hero__grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(285px, .82fr);
    gap: 32px;
  }
  [data-page-leistungen] .lt-leistungen-hero__media img {
    object-position: 56% 16%;
  }
}

@media (max-width: 991px) {
  .lt-site-header:not(.is-scrolled) .lt-mobile-toggle {
    border-color: rgba(255, 255, 255, .23) !important;
    background: rgba(255, 255, 255, .10) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px rgba(0, 0, 0, .12) !important;
  }

  body.lt-nav-open .lt-site-header .lt-mobile-toggle,
  .lt-site-header.is-scrolled .lt-mobile-toggle {
    border-color: rgba(80, 126, 82, .17) !important;
    background: rgba(255, 255, 255, .82) !important;
    color: var(--lt-green) !important;
  }

  .lt-site-header:not(.is-scrolled) .lt-main-nav .lt-nav-link,
  .lt-site-header:not(.is-scrolled) .lt-main-nav .lt-nav-trigger {
    color: #304333 !important;
    text-shadow: none !important;
  }

  [data-page-leistungen] .lt-leistungen-hero {
    min-height: 720px;
    padding: calc(var(--lt-header-height) + 48px) 0 54px !important;
  }

  [data-page-leistungen] .lt-leistungen-hero__media img {
    object-position: 50% 14%;
  }

  [data-page-leistungen] .lt-leistungen-hero::before {
    background:
      linear-gradient(90deg, rgba(7, 23, 26, .93) 0%, rgba(7, 23, 26, .82) 54%, rgba(7, 23, 26, .36) 100%),
      linear-gradient(180deg, rgba(7, 23, 26, .30) 0%, rgba(7, 23, 26, .12) 55%, rgba(7, 23, 26, .50) 100%);
  }

  [data-page-leistungen] .lt-leistungen-hero__grid {
    display: block;
    min-height: 610px;
  }

  [data-page-leistungen] .lt-leistungen-hero__copy {
    width: min(54%, 500px);
    max-width: 500px;
  }

  [data-page-leistungen] .lt-leistungen-hero h1 {
    font-size: clamp(2rem, 4.7vw, 2.62rem);
  }

  [data-page-leistungen] .lt-leistungen-hero__aside {
    width: min(54%, 500px);
    max-width: 500px;
    margin-top: 22px;
    justify-self: start;
  }
}

@media (max-width: 680px) {
  [data-page-leistungen] .lt-leistungen-hero {
    min-height: 845px;
    padding: calc(var(--lt-header-height) + 28px) 0 285px !important;
    background: #091c1d !important;
  }

  [data-page-leistungen] .lt-leistungen-hero__media {
    top: auto;
    bottom: 0;
    height: 38%;
  }

  [data-page-leistungen] .lt-leistungen-hero__media img {
    object-position: 50% 8%;
  }

  [data-page-leistungen] .lt-leistungen-hero::before {
    z-index: -2;
    background:
      linear-gradient(180deg, #091c1d 0%, #091c1d 47%, rgba(9, 28, 29, .97) 58%, rgba(9, 28, 29, .56) 78%, rgba(9, 28, 29, .20) 100%);
  }

  [data-page-leistungen] .lt-leistungen-hero::after {
    height: 54%;
    background: linear-gradient(180deg, rgba(9, 28, 29, .92), rgba(9, 28, 29, .20) 45%, rgba(9, 28, 29, .08));
  }

  [data-page-leistungen] .lt-leistungen-hero__grid {
    display: block;
    min-height: 0;
  }

  [data-page-leistungen] .lt-leistungen-hero__copy {
    width: 100%;
    max-width: none;
  }

  [data-page-leistungen] .lt-leistungen-hero h1 {
    max-width: 100%;
    margin-bottom: 14px;
    font-size: clamp(1.88rem, 8vw, 2.38rem);
    line-height: 1.08;
  }

  [data-page-leistungen] .lt-leistungen-hero .lt-lead {
    margin-bottom: 20px;
    font-size: .98rem;
    line-height: 1.58;
  }

  [data-page-leistungen] .lt-leistungen-hero .lt-actions {
    gap: 8px;
  }

  [data-page-leistungen] .lt-leistungen-hero .lt-actions .lt-btn {
    min-height: 44px;
    padding: 10px 13px;
    font-size: .88rem;
  }

  [data-page-leistungen] .lt-leistungen-hero__principles {
    display: none;
  }

  [data-page-leistungen] .lt-leistungen-hero__aside {
    display: none;
  }

  [data-page-leistungen] .lt-section {
    padding: 50px 0;
  }

  [data-page-leistungen] .lt-primary-service,
  [data-page-leistungen] .lt-card {
    border-radius: 15px;
  }
}

@media (max-width: 390px) {
  [data-page-leistungen] .lt-leistungen-hero {
    min-height: 845px;
    padding-bottom: 280px !important;
  }
  [data-page-leistungen] .lt-leistungen-hero__principles span {
    font-size: .69rem;
  }
}

@media (max-width: 340px) {
  [data-page-leistungen] .lt-leistungen-hero {
    min-height: 900px;
    padding-bottom: 275px !important;
  }
  [data-page-leistungen] .lt-leistungen-hero__media {
    height: 35%;
  }
  [data-page-leistungen] .lt-leistungen-hero__principles {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-page-leistungen] .lt-leistungen-card-grid .lt-card:hover {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   Readability repair requested after review
   Scope: closing CTA section + hero aside on /de/leistungen/ only
   -------------------------------------------------------------------------- */
[data-page-leistungen] .lt-closing {
  border: 1px solid rgba(255, 255, 255, .10);
  background:
    radial-gradient(circle at top right, rgba(88, 128, 215, .18) 0, rgba(88, 128, 215, 0) 28%),
    linear-gradient(135deg, #0b3558 0%, #0e4a73 55%, #0f5f8a 100%) !important;
  box-shadow: 0 22px 48px rgba(7, 31, 49, .18);
}

[data-page-leistungen] .lt-closing::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}

[data-page-leistungen] .lt-closing__inner {
  position: relative;
  z-index: 1;
}

[data-page-leistungen] .lt-closing h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .16);
}

[data-page-leistungen] .lt-closing p,
[data-page-leistungen] .lt-closing .lt-lead {
  color: rgba(245, 249, 252, .96) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .10);
}

[data-page-leistungen] .lt-closing .lt-btn--secondary {
  border-color: rgba(92, 116, 240, .24);
  background: #4360df;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(67, 96, 223, .22);
}

[data-page-leistungen] .lt-closing .lt-btn--secondary:hover {
  border-color: #3750c3;
  background: #3750c3;
  color: #fff !important;
}

[data-page-leistungen] .lt-leistungen-hero__aside {
  border-color: rgba(255, 255, 255, .22);
  background: linear-gradient(180deg, rgba(66, 74, 82, .76), rgba(34, 43, 49, .64)) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .24) !important;
}

[data-page-leistungen] .lt-leistungen-hero__aside h2,
[data-page-leistungen] .lt-leistungen-hero__aside p {
  color: #fff !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .18);
}

[data-page-leistungen] .lt-leistungen-hero__aside p {
  color: rgba(245, 249, 252, .95) !important;
}
