/* =========================================================
   SERVICE TEMPLATE — CRONEX BAU GMBH
   Optimized universal CSS for Leistungen-Unterseiten
========================================================= */

.page-service {
  --service-bg: #080808;
  --service-bg-soft: #0d0d0f;
  --service-text: #fff;
  --service-muted: rgba(255, 255, 255, 0.73);
  --service-soft: rgba(255, 255, 255, 0.58);
  --service-line: rgba(255, 255, 255, 0.12);
  --service-line-strong: rgba(255, 255, 255, 0.19);
  --service-glass: rgba(255, 255, 255, 0.065);
  --service-accent: rgba(255, 255, 255, 0.055);
  --service-accent-strong: rgba(255, 255, 255, 0.10);

  background:
    radial-gradient(
      ellipse at 50% -10%,
      rgba(255, 255, 255, 0.075),
      transparent 34rem
    ),
    radial-gradient(
      ellipse at 15% 20%,
      rgba(255, 255, 255, 0.035),
      transparent 28rem
    ),
    radial-gradient(
      ellipse at 86% 36%,
      var(--service-accent),
      transparent 34rem
    ),
    linear-gradient(
      180deg,
      #090909 0%,
      #070707 44%,
      #0c0c0d 100%
    );

  color: var(--service-text);
}

.page-service main {
  position: relative;
  overflow: hidden;
}

.page-service h1,
.page-service h2,
.page-service h3,
.page-service p {
  text-wrap: pretty;
}

.page-service img {
  max-width: 100%;
}

.page-service a:focus-visible,
.page-service summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
}

/* =========================================================
   EYEBROW
========================================================= */

.service-eyebrow {
  margin: 0 0 16px;

  color: var(--service-soft);

  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* =========================================================
   GENERAL SECTION
========================================================= */

.service-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: 128px 0;
}

.service-section::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -2;

  background:
    radial-gradient(
      ellipse at 18% 24%,
      rgba(255, 255, 255, 0.042),
      transparent 31rem
    ),
    radial-gradient(
      ellipse at 86% 32%,
      var(--service-accent),
      transparent 34rem
    );

  pointer-events: none;
}

.service-section::after {
  content: "";

  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;

  width: min(1180px, calc(100% - 40px));
  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.15),
      rgba(255, 255, 255, 0.045),
      transparent
    );

  pointer-events: none;
}

.service-section-head {
  max-width: 940px;
  margin-bottom: 46px;
}

.service-section-head h2 {
  max-width: 940px;
  margin: 0;

  color: #fff;

  font-size: clamp(2.1rem, 4vw, 4.1rem);
  line-height: 1;
  letter-spacing: -0.066em;
}

.service-section-head p {
  max-width: 760px;
  margin: 22px 0 0;

  color: var(--service-muted);

  font-size: 1.04rem;
  line-height: 1.72;
}

/* =========================================================
   GLASS WINDOW
========================================================= */

.glass-window {
  position: relative;
  overflow: hidden;

  border: 1px solid var(--service-line);

  background:
    radial-gradient(
      circle at 0 0,
      rgba(255, 255, 255, 0.11),
      transparent 22rem
    ),
    radial-gradient(
      circle at 100% 0,
      var(--service-accent),
      transparent 28rem
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.026)
    );

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24);

  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
}

.glass-window::before {
  content: "";

  position: absolute;
  inset: 1px;

  border-radius: inherit;

  background:
    linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.03) 36%,
      transparent 64%
    );

  opacity: 0.55;
  pointer-events: none;
}

.glass-window::after {
  content: "";

  position: absolute;
  top: 0;
  right: 28px;
  left: 28px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.26),
      rgba(255, 255, 255, 0.07),
      transparent
    );

  pointer-events: none;
}

.glass-window > * {
  position: relative;
  z-index: 2;
}

/* =========================================================
   HERO
========================================================= */

.service-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  align-items: center;

  min-height: 100svh;
  padding: 150px 0 110px;

  background: #080808;
}

.service-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -6;

  margin: 0;
  overflow: hidden;
}

.service-hero__bg img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter:
    saturate(0.86)
    contrast(1.06)
    brightness(0.66);

  transform: scale(1.025);
}

.service-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -5;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.93) 0%,
      rgba(0, 0, 0, 0.62) 43%,
      rgba(0, 0, 0, 0.26) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.18),
      rgba(8, 8, 8, 0.10) 46%,
      rgba(8, 8, 8, 0.98) 100%
    );

  pointer-events: none;
}

.service-hero__texture {
  position: absolute;
  inset: 0;
  z-index: -4;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.024) 1px,
      transparent 1px
    );

  background-size: 64px 64px;

  mask-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.74),
      transparent 92%
    );

  opacity: 0.12;
  pointer-events: none;
}

.service-hero::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -3;

  background:
    radial-gradient(
      ellipse at 18% 34%,
      rgba(255, 255, 255, 0.10),
      transparent 34rem
    ),
    radial-gradient(
      ellipse at 80% 22%,
      rgba(255, 255, 255, 0.05),
      transparent 32rem
    ),
    radial-gradient(
      ellipse at 74% 80%,
      var(--service-accent-strong),
      transparent 35rem
    );

  pointer-events: none;
}

.service-hero::after {
  content: "";

  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: -2;

  width: min(1180px, calc(100% - 40px));
  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0.05),
      transparent
    );
}

.service-hero__inner {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0, 1.06fr)
    minmax(360px, 0.72fr);

  gap: 68px;
  align-items: center;
}

.service-hero h1 {
  max-width: 830px;
  margin: 0 0 28px;

  color: #fff;

  font-size: clamp(2.8rem, 5.15vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.076em;

  text-shadow:
    0 24px 72px rgba(0, 0, 0, 0.58),
    0 4px 16px rgba(0, 0, 0, 0.38);
}

.service-hero__lead {
  max-width: 720px;
  margin: 0;

  color: rgba(255, 255, 255, 0.78);

  font-size: clamp(1.02rem, 1.35vw, 1.17rem);
  line-height: 1.72;

  text-shadow:
    0 10px 34px rgba(0, 0, 0, 0.48);
}

.service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;

  margin-top: 34px;
}

.service-hero__chips,
.service-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.service-hero__chips {
  margin-top: 30px;
}

.service-hero__chips span,
.service-scope span {
  display: inline-flex;
  align-items: center;

  min-height: 38px;
  padding: 9px 14px;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.06);

  color: rgba(255, 255, 255, 0.76);

  font-size: 0.86rem;
  font-weight: 800;

  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(12px);
}

.service-hero__glass {
  position: relative;

  display: flex;
  justify-content: flex-end;
}

.glass-window--hero {
  width: min(500px, 100%);
  padding: 38px;

  border-radius: 38px;
}

.glass-window__topline {
  display: flex;
  gap: 7px;

  margin-bottom: 28px;
}

.glass-window__topline span {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.34);

  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.18);
}

.glass-window__eyebrow {
  margin: 0 0 18px;

  color: rgba(255, 255, 255, 0.58);

  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.glass-window--hero h2 {
  max-width: 430px;
  margin: 0 0 18px;

  color: #fff;

  font-size: clamp(1.75rem, 2.5vw, 2.45rem);
  line-height: 1.04;
  letter-spacing: -0.058em;
}

.glass-window--hero p:not(.glass-window__eyebrow) {
  max-width: 430px;
  margin: 0;

  color: rgba(255, 255, 255, 0.72);

  line-height: 1.68;
}

.glass-window__divider {
  width: 100%;
  height: 1px;

  margin: 28px 0 24px;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0.07),
      transparent
    );
}

.glass-window__list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.glass-window__list span {
  display: inline-flex;
  align-items: center;

  min-height: 36px;
  padding: 8px 13px;

  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.055);

  color: rgba(255, 255, 255, 0.76);

  font-size: 0.82rem;
  font-weight: 800;
}

.glass-window__note {
  margin-top: 28px;
  padding: 18px 20px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.025)
    );
}

.glass-window__note strong {
  display: block;

  margin-bottom: 6px;

  color: #fff;

  font-size: 1rem;
}

.glass-window__note span {
  display: block;

  color: rgba(255, 255, 255, 0.64);

  font-size: 0.94rem;
  line-height: 1.48;
}

/* =========================================================
   INTRO
========================================================= */

.service-intro {
  padding: 132px 0 118px;
}

.service-intro__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;

  gap: 74px;
  align-items: start;
}

.service-intro__headline h2 {
  max-width: 780px;
  margin: 0;

  color: #fff;

  font-size: clamp(2.1rem, 4vw, 4.15rem);
  line-height: 1;
  letter-spacing: -0.066em;
}

.service-intro__window {
  display: grid;
  gap: 20px;

  padding: 34px;

  border-radius: 32px;
}

.service-intro__window p {
  margin: 0;

  color: rgba(255, 255, 255, 0.75);

  line-height: 1.72;
}

/* =========================================================
   SERVICE CARDS
========================================================= */

.service-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 1px;
  padding: 1px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 34px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.035)
    );

  box-shadow:
    0 28px 86px rgba(0, 0, 0, 0.28);

  overflow: hidden;
}

.service-card {
  position: relative;
  overflow: hidden;

  min-height: 315px;
  padding: 32px 30px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.062),
      rgba(255, 255, 255, 0.030)
    ),
    rgba(255, 255, 255, 0.030);

  transition:
    transform 0.28s ease,
    background 0.28s ease;
}

.service-card::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 0 0,
      rgba(255, 255, 255, 0.105),
      transparent 18rem
    ),
    radial-gradient(
      circle at 100% 0,
      var(--service-accent),
      transparent 24rem
    );

  opacity: 0;

  transition:
    opacity 0.28s ease;
}

.service-card__line {
  position: relative;
  z-index: 2;

  display: block;

  width: 54px;
  height: 1px;

  margin-bottom: 36px;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.08)
    );
}

.service-card h3 {
  position: relative;
  z-index: 2;

  max-width: 250px;
  margin: 0 0 15px;

  color: #fff;

  font-size: 1.35rem;
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.service-card p {
  position: relative;
  z-index: 2;

  margin: 0;

  color: rgba(255, 255, 255, 0.68);

  line-height: 1.62;
}

.service-card:hover {
  transform: translateY(-5px);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.038)
    ),
    rgba(255, 255, 255, 0.042);
}

.service-card:hover::before {
  opacity: 1;
}

.service-scope {
  justify-content: center;

  margin-top: 24px;
}

.service-scope span {
  background: rgba(255, 255, 255, 0.035);

  font-size: 0.82rem;
}

/* =========================================================
   PHOTO STATEMENT
========================================================= */

.service-photo-statement {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  align-items: center;

  min-height: 82vh;
  padding: 150px 0;
}

.service-photo-statement__image {
  position: absolute;
  inset: 0;
  z-index: -5;

  margin: 0;
}

.service-photo-statement__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(0.9)
    contrast(1.04)
    brightness(0.7);

  transform: scale(1.025);
}

.service-photo-statement__shade {
  position: absolute;
  inset: 0;
  z-index: -4;

  background:linear-gradient(90deg, rgb(0 0 0 / 81%), rgb(0 0 0 / 0%) 48%, rgba(0, 0, 0, 0.18)), linear-gradient(180deg, rgb(8 8 8 / 0%), rgb(8 8 8 / 12%));
}

.service-photo-statement::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -3;

  background:
    radial-gradient(
      ellipse at 24% 38%,
      rgba(255, 255, 255, 0.10),
      transparent 34rem
    ),
    radial-gradient(
      ellipse at 18% 76%,
      var(--service-accent-strong),
      transparent 34rem
    );
}

.service-photo-statement__content {
  max-width: 790px;
}

.service-photo-statement__content h2 {
  max-width: 800px;
  margin: 0 0 26px;

  color: #fff;

  font-size: clamp(2.1rem, 4vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.066em;

  text-shadow:
    0 18px 60px rgba(0, 0, 0, 0.55);
}

.service-photo-statement__content
  > p:not(.service-eyebrow) {
  max-width: 670px;
  margin: 0;

  color: rgba(255, 255, 255, 0.79);

  font-size: 1.07rem;
  line-height: 1.72;
}

.service-photo-statement__note {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 7px;

  margin-top: 36px;
  padding: 14px 18px;

  border-radius: 24px;
}

.service-photo-statement__note strong {
  color: #fff;
}

.service-photo-statement__note span {
  color: rgba(255, 255, 255, 0.72);
}

/* =========================================================
   REFERENCE
========================================================= */

.service-reference__grid {
  display: grid;
  grid-template-columns: 1.03fr 0.97fr;

  gap: 64px;
  align-items: center;
}

.service-reference__media {
  position: relative;
  overflow: hidden;

  min-height: 640px;
  margin: 0;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 42px;

  background: #111;

  box-shadow:
    0 32px 96px rgba(0, 0, 0, 0.36);
}

.service-reference__media img {
  display: block;

  width: 100%;
  height: 100%;
  min-height: 640px;

  object-fit: cover;

  filter:
    saturate(0.96)
    contrast(1.04);

  transition:
    transform 0.65s ease;
}

.service-reference__media:hover img {
  transform: scale(1.045);
}

.service-reference__media::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04),
      rgba(0, 0, 0, 0.62)
    );

  pointer-events: none;
}

.service-reference__media figcaption {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  z-index: 2;

  padding: 22px 24px;

  border-radius: 26px;
}

.service-reference__media figcaption strong {
  display: block;

  margin-bottom: 7px;

  color: #fff;

  font-size: 1.12rem;
}

.service-reference__media figcaption span {
  display: block;

  color: rgba(255, 255, 255, 0.68);

  line-height: 1.45;
}

.service-reference__copy {
  padding: 10px 0;
}

.service-reference__copy h2 {
  margin: 0 0 24px;

  color: #fff;

  font-size: clamp(2rem, 3.5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.064em;
}

.service-reference__copy > p {
  margin: 0;

  color: rgba(255, 255, 255, 0.72);

  line-height: 1.72;
}

.service-detail-list {
  display: grid;
  gap: 12px;

  margin: 30px 0 0;
  padding: 0;

  list-style: none;
}

.service-detail-list li {
  padding: 18px 20px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;

  background: rgba(255, 255, 255, 0.04);

  color: rgba(255, 255, 255, 0.69);

  line-height: 1.55;
}

.service-detail-list strong {
  color: #fff;
}

/* =========================================================
   PROCESS
========================================================= */

.service-process__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.service-process__grid--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.service-process-card {
  position: relative;
  overflow: hidden;

  min-height: 280px;
  padding: 28px;

  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 30px;

  background:
    radial-gradient(
      circle at 0 0,
      rgba(255, 255, 255, 0.08),
      transparent 22rem
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.025)
    );

  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);

  transition: 0.3s ease;
}

.service-process-card__mark {
  display: block;

  width: 52px;
  height: 1px;

  margin-bottom: 38px;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.08)
    );
}

.service-process-card h3 {
  margin: 0 0 14px;

  color: #fff;

  font-size: 1.25rem;
  letter-spacing: -0.045em;
}

.service-process-card p {
  margin: 0;

  color: rgba(255, 255, 255, 0.67);

  line-height: 1.6;
}

.service-process-card:hover {
  transform: translateY(-6px);

  border-color: rgba(255, 255, 255, 0.19);
}

/* =========================================================
   PLANNING
========================================================= */

.service-planning__panel {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(360px, 0.9fr);

  gap: 58px;
  padding: 54px;

  border-radius: 42px;
}

.service-planning__main h2 {
  margin: 0 0 22px;

  color: #fff;

  font-size: clamp(2rem, 3.5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.064em;
}

.service-planning__main p:last-child {
  margin: 0;

  color: rgba(255, 255, 255, 0.72);

  line-height: 1.72;
}

.service-planning__facts {
  display: grid;
  gap: 12px;
}

.service-planning__facts > div {
  padding: 20px 22px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;

  background: rgba(255, 255, 255, 0.045);
}

.service-planning__facts strong {
  display: block;

  margin-bottom: 7px;

  color: #fff;
}

.service-planning__facts span {
  display: block;

  color: rgba(255, 255, 255, 0.68);

  line-height: 1.55;
}

/* =========================================================
   RELATED SERVICES
========================================================= */

.service-related__grid {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;

  gap: 72px;
  align-items: start;
}

.service-related__copy h2 {
  margin: 0 0 22px;

  color: #fff;

  font-size: clamp(2rem, 3.5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.064em;
}

.service-related__copy p:last-child {
  margin: 0;

  color: rgba(255, 255, 255, 0.72);

  line-height: 1.72;
}

.service-related__links {
  display: grid;
  gap: 12px;
}

.service-related__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
  padding: 22px 24px;

  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 22px;

  background: rgba(255, 255, 255, 0.04);

  color: #fff;

  text-decoration: none;

  transition: 0.25s ease;
}

.service-related__links a:hover {
  transform: translateX(6px);

  border-color: rgba(255, 255, 255, 0.20);

  background: rgba(255, 255, 255, 0.07);
}

.service-related__links span {
  font-weight: 850;
  letter-spacing: -0.03em;
}

.service-related__links small {
  color: rgba(255, 255, 255, 0.58);

  line-height: 1.35;
  text-align: right;
}

/* =========================================================
   FAQ
========================================================= */

.service-faq__grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;

  gap: 72px;
  align-items: start;
}

.service-faq__intro {
  position: sticky;
  top: 120px;
}

.service-faq__intro h2 {
  margin: 0 0 22px;

  color: #fff;

  font-size: clamp(2rem, 3.5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.064em;
}

.service-faq__intro p:last-child {
  margin: 0;

  color: rgba(255, 255, 255, 0.72);

  line-height: 1.72;
}

.service-faq__list {
  display: grid;
  gap: 12px;
}

.service-faq details {
  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.025)
    );
}

.service-faq summary {
  position: relative;

  padding: 24px 62px 24px 24px;

  color: #fff;

  font-weight: 800;
  line-height: 1.4;

  cursor: pointer;
  list-style: none;
}

.service-faq summary::-webkit-details-marker {
  display: none;
}

.service-faq summary::after {
  content: "+";

  position: absolute;
  top: 50%;
  right: 24px;

  transform: translateY(-50%);

  color: rgba(255, 255, 255, 0.62);

  font-size: 1.5rem;

  transition:
    transform 0.25s ease;
}

.service-faq details[open] summary::after {
  transform:
    translateY(-50%)
    rotate(45deg);
}

.service-faq details p {
  margin: 0;
  padding: 0 24px 24px;

  color: rgba(255, 255, 255, 0.68);

  line-height: 1.68;
}

/* =========================================================
   CTA
========================================================= */

.service-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  align-items: center;

  min-height: 70vh;
  padding: 135px 0;
}

.service-cta__bg {
  position: absolute;
  inset: 0;
  z-index: -5;

  margin: 0;
}

.service-cta__bg img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(0.88)
    contrast(1.03)
    brightness(0.64);

  transform: scale(1.025);
}

.service-cta__shade {
  position: absolute;
  inset: 0;
  z-index: -4;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.93),
      rgba(0, 0, 0, 0.68) 48%,
      rgba(0, 0, 0, 0.30)
    ),
    linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.32),
      rgba(8, 8, 8, 0.95)
    );
}

.service-cta::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -3;

  background:
    radial-gradient(
      ellipse at 22% 32%,
      rgba(255, 255, 255, 0.09),
      transparent 32rem
    ),
    radial-gradient(
      ellipse at 70% 28%,
      var(--service-accent-strong),
      transparent 34rem
    );
}

.service-cta__content {
  position: relative;
  z-index: 2;

  max-width: 820px;
}

.service-cta__content h2 {
  margin: 0 0 24px;

  color: #fff;

  font-size: clamp(2.1rem, 4vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.066em;

  text-shadow:
    0 18px 60px rgba(0, 0, 0, 0.55);
}

.service-cta__content p {
  max-width: 680px;
  margin: 0;

  color: rgba(255, 255, 255, 0.79);

  font-size: 1.06rem;
  line-height: 1.72;
}

.service-cta .btn-row {
  margin-top: 34px;
}


/* =========================================================
   LOCATION / HAMBURG
========================================================= */

.service-location{
  position:relative;
  min-height:72vh;
  display:flex;
  align-items:center;
  isolation:isolate;
  overflow:hidden;
  padding:130px 0;
}

.service-location__bg{
  position:absolute;
  inset:0;
  z-index:-5;
  margin:0;
  overflow:hidden;
}

.service-location__bg img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  filter:contrast(1.04) brightness(.72);
  transform:scale(1.025);
}

.service-location__shade{
  position:absolute;
  inset:0;
  z-index:-4;
  background:linear-gradient(90deg, rgba(0, 0, 0, .94) 0%, rgb(0 0 0 / 0%) 42%, rgba(0, 0, 0, .22) 100%), linear-gradient(180deg, rgb(8 8 8 / 0%), rgba(8, 8, 8, .88));
  pointer-events:none;
}

.service-location::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(
      ellipse at 20% 42%,
      rgba(255,255,255,.09),
      transparent 32rem
    );
  pointer-events:none;
}

.service-location::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(1180px, calc(100% - 40px));
  height:1px;
  transform:translateX(-50%);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.18),
      rgba(255,255,255,.05),
      transparent
    );
}

.service-location__inner{
  position:relative;
  z-index:2;
}

.service-location__content{
  max-width:690px;
}

.service-location__content h2{
  max-width:760px;
  margin:0 0 24px;
  color:#fff;
  font-size:clamp(2.1rem, 4vw, 4.25rem);
  line-height:1;
  letter-spacing:-.066em;
  text-shadow:0 18px 60px rgba(0,0,0,.58);
}

.service-location__content p{
  max-width:620px;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:1.05rem;
  line-height:1.72;
  text-shadow:0 8px 28px rgba(0,0,0,.46);
}

.service-location__content p + p{
  margin-top:16px;
}

.service-location__content .btn{
  margin-top:32px;
}
/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {
  opacity: 0;

  transform: translateY(22px);

  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}

.reveal.is-visible {
  opacity: 1;

  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;

    transform: none;

    transition: none;
  }

  .service-card,
  .service-process-card,
  .service-related__links a,
  .service-reference__media img {
    transition: none;
  }
}

/* =========================================================
   SERVICE COLOR THEMES
========================================================= */

.service-hochbau {
  --service-accent: rgb(64 41 41 / 13%);
  --service-accent-strong: rgba(45, 45, 45, 0.32);
}

.service-fassade {
  --service-accent: rgba(120, 74, 38, 0.10);
  --service-accent-strong: rgba(120, 74, 38, 0.18);
}

.service-beton {
  --service-accent: rgba(90, 90, 90, 0.13);
  --service-accent-strong: rgba(120, 120, 120, 0.18);
}

.service-abdichtung {
  --service-accent: rgba(34, 76, 110, 0.12);
  --service-accent-strong: rgba(34, 76, 110, 0.20);
}

.service-sanierung {
  --service-accent: rgba(116, 84, 42, 0.11);
  --service-accent-strong: rgba(116, 84, 42, 0.19);
}

/* =========================================================
   RESPONSIVE — 1200 PX
========================================================= */

@media (max-width: 1200px) {
  .service-process__grid--five {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .service-process__grid--five
    .service-process-card:nth-child(n + 4) {
    min-height: 240px;
  }
}

/* =========================================================
   RESPONSIVE — 1120 PX
========================================================= */

@media (max-width: 1120px) {
  .service-hero {
    min-height: auto;
    padding: 145px 0 96px;
  }

  .service-hero__inner {
    grid-template-columns: 1fr;

    gap: 52px;
  }

  .service-hero__glass {
    justify-content: flex-start;

    max-width: 720px;
  }

  .glass-window--hero {
    width: 100%;
  }

  .service-card-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .service-reference__grid,
  .service-related__grid,
  .service-faq__grid {
    grid-template-columns: 1fr;

    gap: 42px;
  }

  .service-reference__media,
  .service-reference__media img {
    min-height: 520px;
  }

  .service-planning__panel {
    grid-template-columns: 1fr;

    gap: 38px;
  }

  .service-faq__intro {
    position: static;
  }
}

/* =========================================================
   RESPONSIVE — 900 PX
========================================================= */

@media (max-width: 900px) {
  .service-section,
  .service-intro {
    padding: 98px 0;
  }

  .service-intro__grid {
    grid-template-columns: 1fr;

    gap: 34px;
  }

  .service-photo-statement {
    min-height: 72vh;
    padding: 120px 0;
  }

  .service-process__grid,
  .service-process__grid--five {
    grid-template-columns: 1fr 1fr;
  }

  .service-process-card {
    min-height: 240px;
  }
}

/* =========================================================
   RESPONSIVE — 680 PX
========================================================= */

@media (max-width: 680px) {
  .service-hero {
    padding: 122px 0 76px;
  }

  .service-hero__shade {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.42),
        rgba(0, 0, 0, 0.80) 42%,
        rgba(8, 8, 8, 0.99)
      ),
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.74),
        rgba(0, 0, 0, 0.40)
      );
  }

  .service-hero h1 {
  font-size: clamp(2.15rem, 10vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
}

  .service-hero__lead {
    font-size: 1rem;
  }

  .service-hero__actions,
  .service-hero__actions .btn {
    width: 100%;
  }

  .service-hero__chips span,
  .service-scope span {
    min-height: 34px;
    padding: 8px 11px;

    font-size: 0.77rem;
  }

  .glass-window--hero {
    padding: 26px 22px;

    border-radius: 28px;
  }

  .service-section,
  .service-intro {
    padding: 80px 0;
  }

  .service-section-head {
    margin-bottom: 34px;
  }

  .service-section-head h2,
.service-intro__headline h2,
.service-photo-statement__content h2,
.service-reference__copy h2,
.service-planning__main h2,
.service-related__copy h2,
.service-faq__intro h2,
.service-cta__content h2,
.service-location__content h2 {
  font-size: clamp(1.75rem, 8.5vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

  .service-intro__window,
  .service-planning__panel {
    padding: 26px 22px;

    border-radius: 28px;
  }

  .service-card-grid {
    grid-template-columns: 1fr;

    border-radius: 28px;
  }

  .service-card {
    min-height: auto;
    padding: 28px 22px;
  }

  .service-photo-statement {
    align-items: flex-end;

    min-height: 78vh;
    padding: 96px 0;
  }

  .service-photo-statement__shade {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.18),
        rgba(0, 0, 0, 0.90) 62%,
        rgba(0, 0, 0, 0.99)
      );
  }

  .service-photo-statement__note {
    display: block;

    border-radius: 22px;
  }

  .service-photo-statement__note strong {
    margin-bottom: 5px;
  }

  .service-reference__media,
  .service-reference__media img {
    min-height: 420px;
  }

  .service-reference__media {
    border-radius: 30px;
  }

  .service-reference__media figcaption {
    right: 14px;
    bottom: 14px;
    left: 14px;

    padding: 19px 20px;

    border-radius: 22px;
  }

  .service-process__grid,
  .service-process__grid--five {
    grid-template-columns: 1fr;
  }

  .service-process-card {
    min-height: auto;
    padding: 26px 22px;

    border-radius: 26px;
  }

  .service-related__links a {
    align-items: flex-start;
    flex-direction: column;

    gap: 7px;
  }

  .service-related__links small {
    text-align: left;
  }

  .service-faq summary {
    padding:
      22px
      56px
      22px
      20px;
  }

  .service-faq details p {
    padding:
      0
      20px
      22px;
  }

  .service-cta {
    align-items: flex-end;

    min-height: 72vh;
    padding: 96px 0;
  }

  .service-cta__shade {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.20),
        rgba(0, 0, 0, 0.90) 65%,
        rgba(0, 0, 0, 0.99)
      );
  }

  .service-cta .btn-row,
  .service-cta .btn {
    width: 100%;
  }
  .service-location{
    min-height:74vh;
    align-items:flex-end;
    padding:96px 0;
  }

  .service-location__bg img{
    object-position:62% center;
  }

  .service-location__shade{
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.22) 0%,
        rgba(0,0,0,.72) 48%,
        rgba(8,8,8,.98) 100%
      );
  }

  .service-location__content h2{
    font-size:clamp(2rem, 11vw, 3.25rem);
  }

  .service-location__content .btn{
    width:100%;
  }
  .service-location__content p{
  max-width:620px;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:0.9rem;
  line-height:1.72;
  text-shadow:0 8px 28px rgba(0,0,0,.46);
}
}



/* Предотвращает обрезание последних букв в заголовках */
.page-service h1,
.page-service h2,
.page-service h3 {
  text-wrap: balance;
  overflow: visible;
  padding-right: 0.08em;
}

.service-hero h1 {
  letter-spacing: -0.055em;
}

.service-section-head h2 {
  letter-spacing: -0.045em;
}

@media (max-width: 680px) {
  .service-hero h1 {
    letter-spacing: -0.035em;
    padding-right: 0.1em;
  }

  .service-section-head h2,
  .service-intro__headline h2,
  .service-photo-statement__content h2,
  .service-reference__copy h2,
  .service-planning__main h2,
  .service-related__copy h2,
  .service-faq__intro h2,
  .service-location__content h2 {
    letter-spacing: -0.025em;
    padding-right: 0.1em;
  }
}

.service-detail-list > div {
  display: grid;
  gap: 8px;
}

.service-detail-list strong,
.service-detail-list span {
  display: block;
}

/* Einheitliche H2-Größe auf Mobilgeräten */
@media (max-width: 680px) {
  .page-service h2 {
    font-size: clamp(1.7rem, 6.8vw, 2.1rem);
    line-height: 1.13;
    letter-spacing: -0.03em;
    text-wrap: balance;
    overflow: visible;
    padding-right: 0.08em;
  }
  
  .service-section-head p{
	  font-size: 0.9rem;
  }
}