.site-hero + #leistungen { margin-top: clamp(48px, 6vw, 94px); }

.services-intro {
  text-align: center;
  margin-bottom: clamp(32px, 5vw, 64px);
}
.services-intro h2 {
  max-width: 18ch;
  margin-inline: auto;
  font-size: clamp(2.5rem, 5.3vw, 4.75rem);
  letter-spacing: -.065em;
}
.services-intro h2 span { display: block; color: var(--muted); }
.services-intro .lead { margin-inline: auto; max-width: 52ch; }

.service-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(230px, auto));
  gap: 14px;
}
.service-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: end;
  min-width: 0;
  padding: clamp(22px, 3vw, 42px);
  border-radius: var(--radius);
  background: #282923;
  color: white;
}
.service-card-room { grid-row: span 2; min-height: 510px; }
.service-card img,
.service-card::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.service-card img { z-index: -2; object-position: center; }
.service-card-film img { object-position: 50% 47%; }
.service-card-portfolio img { object-position: 50% 55%; }
.service-card::before {
  content: "";
  z-index: -1;
  background: linear-gradient(180deg, transparent 8%, rgb(10 11 10 / .44) 42%, rgb(10 11 10 / .9) 100%);
}
.service-copy h3 { font-size: clamp(1.55rem, 2.5vw, 2.4rem); letter-spacing: -.045em; }
.service-card-room h3 { font-size: clamp(1.8rem, 3.2vw, 3.4rem); }
.service-copy p { max-width: 44ch; margin-top: 8px; line-height: 1.5; color: #f1f0ee; }
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin-top: 14px;
  padding-inline: 14px;
  border-radius: 100px;
  background: white;
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 650;
}
.service-link::after { content: ""; position: absolute; inset: 0; }
.service-card:hover .service-link { background: #ebebeb; }
.service-link:focus-visible { outline-color: white; outline-offset: 4px; }

.sample-section {
  padding-block: clamp(48px, 8vw, 116px);
  background: #f6f6f8;
}
.sample-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(30px, 5vw, 84px);
}
.sample-copy .pill { margin-top: 25px; }
.sample-copy > .text-link { display: block; margin-top: 17px; font-size: .875rem; }
.sample-expose {
  background: white;
  border: 1px solid #e8e8ec;
  border-radius: var(--radius);
  padding: clamp(12px, 1.7vw, 24px);
  box-shadow: 0 18px 50px rgb(21 21 21 / .08);
}
.sample-toolbar,
.sample-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  color: #465548;
  font-size: .875rem;
}
.sample-toolbar { justify-content: space-between; margin-bottom: 12px; }
.sample-toolbar > span { font-family: Georgia, serif; font-weight: 700; font-size: 1.125rem; }
.sample-toolbar a:hover, .sample-nav a:hover { text-decoration: underline; text-underline-offset: .2em; }
.sample-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  border-radius: 14px;
  background: #313d2f;
}
.sample-cover img { height: auto; aspect-ratio: 1.75; object-position: 50% 54%; }
.sample-cover::after {
  content: "";
  position: absolute;
  inset: 30% 0 0;
  background: linear-gradient(transparent, rgb(15 20 14 / .74));
  pointer-events: none;
}
.sample-cover-caption {
  position: absolute;
  z-index: 1;
  inset: auto 14px 14px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  color: white;
  font-family: Georgia, serif;
  font-size: clamp(1.5rem, 3.3vw, 3.125rem);
}
.sample-nav { margin-top: 12px; gap: 6px; }
.sample-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-inline: 12px;
  border-radius: 100px;
  background: #f3f3f5;
}
.sample-nav a:hover { background: #e9e9ec; }

.audience-section {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 22px clamp(36px, 8vw, 116px);
}
.audience-section .section-intro { margin: 0; }
.audience-section .audience-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.audience-section .audience-card {
  border-top: 1px solid var(--line);
  padding: clamp(20px, 3vw, 36px) 0;
  border-radius: 0;
  background: transparent;
}
.audience-section .audience-card:last-child { padding-bottom: 0; }
.audience-section .audience-card p { max-width: 52ch; }

.process-panel {
  padding: clamp(28px, 5.7vw, 80px);
  border-radius: var(--radius);
  background: #171717;
  color: white;
}
.process-panel .section-intro { margin-bottom: clamp(28px, 4.5vw, 62px); }
.process-panel .label, .process-panel .steps p { color: #bfbfc4; }
.process-panel .steps li { border-color: #46464a; }
.process-panel .steps li::before { color: #cfcfd4; }
.questions summary { min-height: 68px; }
.questions summary::after {
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f4f4f6;
}
.questions summary:hover::after { background: #eaeaec; }

@media (max-width: 800px) {
  .sample-layout, .audience-section { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 650px) {
  .service-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .service-card { min-height: 255px; }
  .service-card-room { grid-row: auto; min-height: 340px; }
}