/* ================================================================
   LEISTUNGEN DECISION LAYOUT
   Converts the services page from repeated rows into a decision-led page.
   ================================================================ */

body:has(.services-chapter-band) {
  --decision-gap: clamp(40px, 5vw, 72px);
  --decision-card-gap: clamp(18px, 2vw, 28px);
}

body:has(.services-chapter-band) .leistungen-layered-section,
body:has(.services-chapter-band) .capability-stack,
body:has(.services-chapter-band) .capability-row,
body:has(.services-chapter-band) .layer-opener,
body:has(.services-chapter-band) .scene-breaker {
  all: revert-layer;
}

.leistungen-principle-section {
  background:
    radial-gradient(circle at 12% 18%, rgba(34,199,217,.16), transparent 30%),
    linear-gradient(90deg, rgba(34,199,217,.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34,199,217,.04) 1px, transparent 1px),
    var(--deep-2);
  background-size: auto, 56px 56px, 56px 56px, auto;
  color: var(--paper);
}
.leistungen-principle-section .section-title,
.leistungen-principle-section .lead-statement {
  color: var(--paper);
}
.leistungen-principle-section .principle-copy p {
  color: rgba(255,255,255,.74);
}
.leistungen-principle-section .principle-points span {
  color: var(--paper);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
}

.service-entry-section {
  background: linear-gradient(180deg, #ffffff 0%, #f4f7f9 100%);
  border-top: 1px solid rgba(30,35,40,.07);
  border-bottom: 1px solid rgba(30,35,40,.07);
}
.service-entry-heading {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, .72fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.service-entry-heading .eyebrow { grid-column: 1 / -1; margin: 0; }
.service-entry-heading .section-title { max-width: 720px; }
.service-entry-heading > p:not(.eyebrow) {
  max-width: 660px;
  color: var(--muted);
  font-size: clamp(1rem, 1.12vw, 1.12rem);
  line-height: 1.66;
}
.service-entry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}
.service-entry-card {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  min-height: 240px;
  padding: clamp(22px, 2.4vw, 34px);
  color: var(--deep);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(30,35,40,.09);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 36px rgba(14,19,23,.05);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.service-entry-card:hover {
  transform: translateY(-3px);
  border-color: rgba(34,199,217,.32);
  box-shadow: 0 18px 48px rgba(14,19,23,.08);
}
.service-entry-card > span {
  width: fit-content;
  min-width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  color: var(--cyan);
  background: rgba(34,199,217,.10);
  border: 1px solid rgba(34,199,217,.24);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 800;
}
.service-entry-card h3 {
  font-size: clamp(1.15rem, 1.45vw, 1.45rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.service-entry-card p {
  color: var(--muted);
  line-height: 1.55;
}
.service-entry-card-cta {
  color: var(--paper);
  background:
    radial-gradient(circle at 85% 12%, rgba(34,199,217,.25), transparent 30%),
    var(--deep-2);
  border-color: rgba(34,199,217,.22);
}
.service-entry-card-cta p { color: rgba(255,255,255,.75); }
.service-entry-card-cta h3 { color: var(--paper); }

.services-chapter-band {
  overflow: hidden;
  padding: clamp(82px, 8vw, 128px) 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 14% 12%, rgba(34,199,217,.2), transparent 28%),
    radial-gradient(circle at 86% 78%, rgba(31,111,235,.16), transparent 30%),
    linear-gradient(90deg, rgba(34,199,217,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34,199,217,.045) 1px, transparent 1px),
    var(--deep-2);
  background-size: auto, auto, 64px 64px, 64px 64px, auto;
}
.services-chapter-band-indoor {
  background:
    radial-gradient(circle at 82% 18%, rgba(34,199,217,.18), transparent 28%),
    radial-gradient(circle at 12% 88%, rgba(31,111,235,.16), transparent 32%),
    linear-gradient(90deg, rgba(34,199,217,.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34,199,217,.04) 1px, transparent 1px),
    #192028;
  background-size: auto, auto, 64px 64px, 64px 64px, auto;
}
.service-decision-chapter-contained {
  display: grid;
  gap: clamp(28px, 4.5vw, 56px);
  scroll-margin-top: var(--anchor-offset-gap, 30px);
}

.service-chapter-showcase {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  overflow: hidden;
  min-height: clamp(430px, 34vw, 570px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: clamp(22px, 2.4vw, 34px);
  box-shadow: 0 28px 84px rgba(0,0,0,.22);
}
.service-chapter-showcase-dark {
  color: var(--paper);
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.service-chapter-copy {
  grid-column: 1 / span 5;
  display: grid;
  align-content: center;
  gap: var(--s-5);
  min-width: 0;
  padding: clamp(40px, 4.6vw, 76px);
}
.service-chapter-media {
  grid-column: 6 / -1;
  position: relative;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--deep);
}
.service-chapter-showcase-reverse .service-chapter-media { grid-column: 1 / span 6; order: 1; }
.service-chapter-showcase-reverse .service-chapter-copy { grid-column: 7 / -1; order: 2; }
.service-chapter-media img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}
.service-chapter-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(14,19,23,.46), rgba(14,19,23,.06) 50%, transparent);
}
.service-chapter-media figcaption {
  position: absolute;
  z-index: 2;
  left: var(--s-5);
  bottom: var(--s-5);
  width: fit-content;
  max-width: calc(100% - 48px);
  padding: var(--s-2) var(--s-4);
  color: var(--paper);
  background: rgba(14,19,23,.70);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.service-chapter-copy h2 {
  max-width: 12ch;
  color: var(--paper);
  font-size: clamp(2.3rem, 3.8vw, 4.55rem);
  line-height: 1;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.service-chapter-copy p {
  max-width: 560px;
  color: rgba(255,255,255,.76);
  font-size: clamp(1rem, 1.12vw, 1.14rem);
  line-height: 1.62;
}
.service-chapter-copy .button-secondary {
  color: var(--paper);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.25);
}

.service-detail-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--decision-card-gap);
}
.service-detail-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-detail-card {
  grid-column: span 4;
  display: grid;
  grid-template-rows: 220px 1fr;
  overflow: hidden;
  color: var(--deep);
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 52px rgba(0,0,0,.18);
}
.service-detail-card-wide { grid-column: span 12; grid-template-columns: minmax(0, .48fr) minmax(0, .52fr); grid-template-rows: auto; }
.service-detail-card-large { grid-column: auto; }
.service-detail-card img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  background: var(--deep-2);
}
.service-detail-card > div {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: clamp(22px, 2.4vw, 34px);
}
.service-detail-card h3 {
  font-size: clamp(1.25rem, 1.65vw, 1.75rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.service-detail-card p:not(.eyebrow) {
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.58;
}
.service-detail-card .eyebrow { color: var(--cyan); }
.mini-service-cta {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-4);
  color: var(--deep);
  background: rgba(34,199,217,.12);
  border: 1px solid rgba(34,199,217,.28);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 780;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.mini-service-cta:hover {
  transform: translateY(-1px);
  background: rgba(34,199,217,.20);
  border-color: rgba(34,199,217,.48);
}

.interface-note-section-mid {
  padding-top: clamp(72px, 7vw, 104px);
  padding-bottom: clamp(72px, 7vw, 104px);
  background: #f4f7f9;
}
.interface-note-section-mid .note-box {
  box-shadow: 0 18px 54px rgba(14,19,23,.08);
}

@media (max-width: 1180px) {
  .service-entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-entry-heading,
  .service-chapter-showcase,
  .service-chapter-showcase-reverse,
  .service-detail-card-wide {
    grid-template-columns: 1fr;
  }
  .service-entry-heading .eyebrow,
  .service-entry-heading .section-title,
  .service-entry-heading > p:not(.eyebrow),
  .service-chapter-copy,
  .service-chapter-media,
  .service-chapter-showcase-reverse .service-chapter-copy,
  .service-chapter-showcase-reverse .service-chapter-media {
    grid-column: auto;
    order: initial;
  }
  .service-chapter-media { aspect-ratio: 16 / 9; }
  .service-detail-card { grid-column: span 6; }
  .service-detail-grid-two { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .service-entry-grid,
  .service-detail-grid,
  .service-detail-grid-two {
    grid-template-columns: 1fr;
  }
  .services-chapter-band {
    padding: 64px 0;
  }
  .service-entry-card,
  .service-detail-card,
  .service-detail-card-wide {
    grid-column: auto;
  }
  .service-entry-card { min-height: 0; }
  .service-chapter-copy { padding: var(--s-6); }
  .service-chapter-copy h2 { max-width: 100%; font-size: clamp(2.05rem, 10vw, 3rem); }
  .service-detail-card { grid-template-rows: 200px 1fr; }
  .service-detail-card-wide { grid-template-rows: 220px 1fr; }
  .mini-service-cta { width: 100%; }
}