/*
 * Soltech – freigegebene Editorial-Anpassungen
 * Übernommen aus der separaten Awwwards-Vorschau: Punkte 4–14 gemäss Auswahl.
 * Nicht gewählte Anpassungen an Buttons, Vertrauensleiste und Bodenbelags-Kacheln
 * sind bewusst nicht enthalten.
 */

:root {
  --editorial-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --editorial-rule: rgba(0, 42, 74, 0.16);
  --editorial-rule-dark: rgba(255, 255, 255, 0.16);
}

/* Mobile Navigation — compact editorial sheet with an explicit close state. */
@media (max-width: 1023px) {
  .nav.nav--menu-open,
  .home .nav.nav--menu-open:not(.scrolled) {
    background-color: var(--st-navy-900);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .mobile-nav {
    inset: var(--st-nav-height) 0 0;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: clamp(1.25rem, 6vw, 2.25rem) var(--st-container-padding) max(2rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    background: var(--st-navy-900);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 220ms var(--editorial-ease-out),
      transform 220ms var(--editorial-ease-out),
      visibility 0s linear 220ms;
  }

  .mobile-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .mobile-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 0 0 0 34px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1.25rem, 5.5vw, 1.65rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    transition: color 160ms ease;
  }

  .mobile-nav__link:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .mobile-nav__link::before {
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 1px;
    background: var(--st-secondary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 180ms var(--editorial-ease-out);
  }

  .mobile-nav__link.active {
    color: var(--st-white);
  }

  .mobile-nav__link.active::before {
    transform: scaleX(1);
  }

  .mobile-nav__link.active::after {
    display: none;
  }

  .mobile-nav > .btn {
    /* The primary action remains permanently visible in the fixed header.
       Hiding its duplicate keeps the open menu calm and unambiguous. */
    display: none;
  }

  .nav__toggle[aria-expanded='true'] {
    background-color: rgba(255, 255, 255, 0.08);
  }
}

/* 04 — Startseite / Unsere Stärken */
.feature-grid--modern {
  gap: 0;
  border-top: 1px solid var(--editorial-rule);
  border-bottom: 1px solid var(--editorial-rule);
}

.feature-grid--modern .feature {
  min-width: 0;
  padding: clamp(2rem, 4vw, 3.75rem) clamp(1.4rem, 3vw, 3rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color 180ms var(--editorial-ease-out);
}

.feature-grid--modern .feature + .feature {
  border-left: 1px solid var(--editorial-rule);
}

.feature-grid--modern .feature__icon-wrap {
  width: 42px;
  height: 42px;
  margin-bottom: clamp(2rem, 3vw, 3rem);
  border: 1px solid var(--editorial-rule);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.feature-grid--modern .feature__icon {
  width: 21px;
  height: 21px;
}

.feature-grid--modern .feature__title {
  max-width: 14ch;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 500;
}

.feature-grid--modern .feature__text {
  max-width: 44ch;
  font-size: 1rem;
}

@media (hover: hover) and (pointer: fine) {
  .feature-grid--modern .feature:hover {
    border-color: transparent;
    background: rgba(10, 57, 91, 0.035);
    box-shadow: none;
    transform: none !important;
  }
}

/* 05 — Startseite / Ausgewählte Referenzen.
   Die bestehende horizontale Bildparallaxe bleibt bewusst erhalten. */
.hz-panel__image-mask {
  border-radius: 0;
  box-shadow: none;
}

.hz-panel__hover-overlay {
  border-radius: 0;
  background: rgba(0, 42, 74, 0.42);
  backdrop-filter: none;
  transition: opacity 180ms var(--editorial-ease-out);
}

.hz-panel__hover-label {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  transform: translateY(4px);
  transition: transform 180ms var(--editorial-ease-out);
}

.hz-panel__number {
  position: static;
  z-index: auto;
  margin-bottom: var(--st-space-5);
  color: var(--st-primary);
  filter: none;
  font-family: var(--st-font-heading);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.11em;
}

.hz-panel__number::after {
  content: ' / REFERENZ';
  color: var(--st-text-tertiary);
  font-weight: 500;
}

.hz-panel__title {
  max-width: 12ch;
  margin-bottom: var(--st-space-6);
}

.hz-panel__quote {
  padding-left: var(--st-space-5);
  border-left-width: 1px;
}

/* 06 — Dienstleistungen / Leistungsübersicht */
.service-dir {
  gap: 0;
  border-top: 1px solid var(--editorial-rule);
}

.service-dir__item {
  border-bottom: 1px solid var(--editorial-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color 180ms var(--editorial-ease-out);
}

.service-dir__item:hover,
.service-dir__item:focus-visible {
  transform: none;
  box-shadow: none;
  background: rgba(10, 57, 91, 0.035);
}

.service-dir__content {
  align-items: baseline;
}

.service-dir__num {
  font-family: var(--st-font-heading);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
}

.service-dir__title {
  font-weight: 500;
}

.service-dir__media {
  margin-block: 10px;
}

.service-dir__media img {
  transition: transform 240ms var(--editorial-ease-out);
}

.service-dir__arrow {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  transition-property: color, background-color, transform;
  transition-duration: 180ms;
  transition-timing-function: var(--editorial-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .service-dir__item:hover .service-dir__media img {
    transform: scale(1.015);
  }

  .service-dir__item:hover .service-dir__arrow {
    transform: translateX(3px);
  }
}

/* 07 — Alle Dienstleistungs-Unterseiten / Anwendungswelten */
.immersive-welt__content {
  justify-content: center;
}

.immersive-welt__eyebrow {
  position: static;
  order: -1;
  margin-bottom: var(--st-space-4);
  color: var(--st-primary);
  -webkit-text-stroke: 0;
  opacity: 1;
  transform: none;
  font-family: var(--st-font-heading);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.12em;
}

.immersive-welt__title {
  max-width: 12ch;
  font-size: clamp(2.6rem, 4.4vw, 4.6rem);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

/* 08 — Alle Dienstleistungs-Unterseiten / Qualität & Vorteile */
.sticky-features__right {
  gap: 0;
  border-top: 1px solid var(--editorial-rule-dark);
}

.sticky-feature {
  display: grid;
  grid-template-columns: minmax(2.5rem, 0.22fr) minmax(10rem, 0.8fr) minmax(14rem, 1.4fr);
  align-items: start;
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border-bottom-color: var(--editorial-rule-dark);
}

.sticky-feature__num {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.sticky-feature__title {
  min-width: 0;
  margin: 0;
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  overflow-wrap: anywhere;
}

.sticky-feature__desc {
  max-width: 48ch;
  margin: 0;
  font-size: 1rem;
}

/* 09 — Referenzen / Projektübersicht.
   Die bestehende Bildparallaxe und ihre Skalierungsreserve bleiben erhalten. */
.project-card__image-wrapper {
  border-radius: 0;
}

.project-card__number {
  font-family: var(--st-font-heading);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
}

.project-card__number::after {
  height: 1px;
}

.project-card__quote {
  border-left-width: 1px;
}

/* 10 — Über uns / Unsere Grundsätze */
.values-grid {
  gap: 0;
  border-top: 1px solid var(--editorial-rule);
  border-bottom: 1px solid var(--editorial-rule);
}

.values-grid .value-card {
  padding: clamp(2rem, 4vw, 3rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.values-grid .value-card + .value-card {
  border-left: 1px solid var(--editorial-rule) !important;
}

.values-grid .value-card__num {
  position: static !important;
  margin-bottom: var(--st-space-8) !important;
  color: var(--st-primary) !important;
  font-size: 0.76rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.1em;
}

.values-grid .value-card:hover {
  transform: none !important;
}

/* 11 — Über uns / Team.
   Die ursprüngliche Bildparallaxe und Bild-Reveal-Animation bleiben erhalten. */
.team-card-anim {
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.team-card-anim .img-reveal-wrapper,
.team-card-anim .bg-reveal-wrapper {
  border-radius: 0 !important;
}

.team-card-bg-letters {
  display: none !important;
}

.vision-visual {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 12 — Kontakt / Kontaktkarte */
.page-kontakt .value-card {
  border-width: 0 0 1px 0;
  border-radius: 0;
  box-shadow: none;
}

.page-kontakt .value-card:hover {
  transform: none !important;
}

/* 14 — Responsive Robustheit für die übernommenen Komponenten */
@media (max-width: 1023px) {
  .feature-grid--modern .feature + .feature,
  .values-grid .value-card + .value-card {
    border-left: 0 !important;
    border-top: 1px solid var(--editorial-rule) !important;
  }
}

@media (max-width: 767px) {
  .nav__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 48px;
    gap: clamp(0.45rem, 2.5vw, 0.75rem);
  }

  .nav__logo {
    min-width: 0;
  }

  .nav__logo-img {
    width: min(100%, 154px);
    height: auto;
  }

  .split-grid,
  .split-grid--top {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .split-grid > *,
  .split-grid--top > * {
    min-width: 0;
    max-width: 100%;
  }

  .nav__cta {
    width: auto;
    min-height: 44px;
    padding: 0.65rem clamp(0.75rem, 3vw, 1rem);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 79, 124, 0.78);
    font-size: clamp(0.7rem, 3.1vw, 0.8rem);
    gap: 0.45rem;
    white-space: nowrap;
  }

  .nav__cta .arrow {
    width: 15px;
  }

  .nav__toggle {
    justify-self: end;
  }

  .sticky-feature {
    grid-template-columns: 2.5rem 1fr;
  }

  .sticky-feature__desc {
    grid-column: 2;
  }

  .service-dir__media {
    margin: 0;
  }

  .hz-panel__number {
    top: auto;
    right: auto;
  }

  /* Mobile references: fit one complete project below the fixed navigation. */
  .hz-scroll-wrapper,
  .hz-scroll-container,
  .hz-panel {
    height: calc(100svh - var(--st-nav-height));
    min-height: 620px;
  }

  .hz-panel {
    padding: clamp(0.75rem, 3.5vw, 1rem);
  }

  .hz-panel__inner {
    height: 100%;
    gap: clamp(0.75rem, 3vw, 1rem);
    justify-content: center;
  }

  .hz-panel__image-col {
    flex-basis: clamp(245px, 34svh, 305px);
  }

  .hz-panel__text-col {
    flex: 0 1 auto;
  }

  .hz-panel__number {
    margin-bottom: 0.55rem;
  }

  .hz-panel__title {
    margin-bottom: 0.85rem;
    font-size: clamp(2rem, 9.4vw, 2.35rem);
    line-height: 1.03;
  }

  .hz-panel__quote {
    padding: 1rem 1rem 1rem 1.2rem;
  }

  .hz-panel__quote p {
    margin-bottom: 0.8rem;
    font-size: clamp(0.9rem, 3.8vw, 1rem);
    line-height: 1.55;
  }

  .hz-panel__quote footer {
    font-size: 0.76rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav__link,
  .mobile-nav__link::before,
  .hz-panel__hover-overlay,
  .hz-panel__hover-label,
  .service-dir__item,
  .service-dir__media img,
  .service-dir__arrow,
  .feature-grid--modern .feature {
    transition-duration: 1ms !important;
  }
}