/* Services – Figma „🧰 Services“ (12034:10112) */

/* Graue Fläche hinter Hero und Zahlen (Figma „BG“, endet 10 px vor dem Zahlen-Abschnitt) */
.sv-top { background: var(--grey-50); margin-bottom: 10px; }

/* Hero: Vortragsfoto am linken Rand (690 × 642), Text ab x = 737 */
.sv-hero__inner {
  width: min(1440px, 100%); margin-inline: auto; padding: 64px var(--gutter) 0 0;
  display: grid; grid-template-columns: minmax(0, 690px) minmax(0, 623px); column-gap: 47px; align-items: center;
}
.sv-hero__media { height: 642px; }
.sv-hero__media img { width: 100%; height: 642px; object-fit: cover; }
.sv-hero__text { display: grid; justify-items: start; }
.sv-hero__lead { max-width: 606px; margin-top: 12px; }
.sv-hero__text .btn-row { margin-top: 48px; }
@media (max-width: 1279px) {
  .sv-hero__inner { grid-template-columns: 1fr 1fr; column-gap: 40px; padding-right: var(--gutter); }
  .sv-hero__media { height: auto; }
  .sv-hero__media img { width: 100%; height: auto; }
}
@media (max-width: 991px) {
  .sv-hero__inner { grid-template-columns: 1fr; row-gap: 40px; padding: 64px var(--gutter) 0; }
  .sv-hero__text { order: -1; }
  .sv-hero__media { max-width: 560px; }
}
@media (max-width: 767px) {
  .sv-hero__inner { padding-top: 48px; }
  .sv-hero__text .btn-row { margin-top: 32px; }
}

/* Zahlen */
.sv-zahlen { padding: 64px 0 54px; }
.sv-zahlen__list { display: flex; justify-content: space-between; gap: 32px; padding-inline: 11px; margin-block: 0; }
.sv-zahlen__list li { display: grid; gap: 6px; }
.sv-zahlen__wert { font-size: var(--fs-display-2); line-height: var(--lh-display-2); font-weight: 700; }
.sv-zahlen__label { font-size: var(--fs-display-4); line-height: 38px; font-weight: 700; }
@media (max-width: 991px) {
  .sv-zahlen__list { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-inline: 0; }
}
@media (max-width: 767px) {
  .sv-zahlen { padding: 48px 0 40px; }
  .sv-zahlen__label { font-size: 18px; line-height: 24px; }
}

/* Vier Leistungen */
.sv-leistungen { padding: 200px 0 132px; }
.sv-leistungen__head { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.sv-leistungen__head h2 { max-width: 777px; }
.sv-leistungen__head .btn { flex: none; }
.sv-leistung { background: var(--grey-50); padding: 48px 44px; display: grid; align-content: start; gap: 24px; scroll-margin-top: 24px; }
.sv-leistung__icon { width: 48px; height: 48px; background: var(--ink); display: flex; align-items: center; justify-content: center; }
.sv-leistung__icon svg { width: 28.4px; height: 28.4px; }
.sv-leistung__text { display: grid; gap: 12px; justify-items: start; max-width: 300px; }
.sv-leistung--gross {
  margin-top: 41px; min-height: 545px; padding: 84px 76px;
  display: flex; align-items: center; justify-content: center; gap: 95px;
}
.sv-leistung__content { width: 453px; display: grid; gap: 24px; }
.sv-leistung--gross .sv-leistung__text { max-width: none; }
.sv-leistung__link { margin-top: 4px; }
.sv-leistung__bild { width: 520px; height: auto; flex: none; }
.sv-leistungen__cards { display: grid; grid-template-columns: repeat(3, 388px); justify-content: space-between; margin-top: 32px; }
@media (max-width: 1279px) {
  .sv-leistung--gross { gap: 48px; padding: 64px 48px; }
  .sv-leistung__content { width: auto; flex: 1; }
  .sv-leistung__bild { width: 44%; }
  .sv-leistungen__cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (max-width: 991px) {
  .sv-leistungen { padding: 104px 0; }
  .sv-leistungen__head { flex-direction: column; align-items: flex-start; }
  .sv-leistung--gross { flex-direction: column; align-items: stretch; min-height: 0; }
  .sv-leistung__bild { width: 100%; max-width: 520px; margin-inline: auto; }
  .sv-leistungen__cards { grid-template-columns: 1fr 1fr; }
  .sv-leistung__text { max-width: none; }
}
@media (max-width: 767px) {
  .sv-leistungen { padding: 80px 0; }
  .sv-leistung, .sv-leistung--gross { padding: 32px 24px; }
  .sv-leistung--gross { margin-top: 32px; gap: 32px; }
  .sv-leistungen__cards { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
}

/* Vier Projekte (Karten 596 breit, Text unter dem Bild) */
.sv-projekte { padding-block: 132px; }
.sv-projekte__head { max-width: 796px; margin-inline: auto; text-align: center; display: grid; gap: 16px; justify-items: center; }
.sv-projekte__head p { max-width: 711px; }
.sv-projekte__grid { display: grid; grid-template-columns: repeat(2, 596px); justify-content: space-between; gap: 59px 28px; margin-top: 40px; }
.sv-projekt { display: flex; flex-direction: column; }
.sv-projekt__bild { display: block; aspect-ratio: 596 / 411; background: var(--ink); overflow: hidden; }
.sv-projekt__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.sv-projekt:hover .sv-projekt__bild img { transform: scale(1.03); }
.sv-projekt__titel { margin-top: 24px; max-width: 482px; transition: color .2s ease; }
.sv-projekt:hover .sv-projekt__titel { color: var(--cyan); }
.sv-projekt__fuss {
  margin-top: 24px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--ink) 22%, var(--white));
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 84px; /* Platz für quadratische Logos (60 px), damit „Mehr erfahren“ in jeder Reihe auf gleicher Höhe steht */
}
.sv-projekt__logo { height: 34px; width: auto; max-width: 190px; object-fit: contain; object-position: left center; }
.sv-projekt__logo--quadrat { height: 60px; } /* quadratische und hochformatige Logos */
.sv-projekt__wortmarke { font-size: 24px; line-height: 30px; font-weight: 700; }
.sv-projekt__mehr { font-size: 18px; line-height: 30px; font-weight: 700; border-bottom: 1.2px solid currentColor; flex: none; transition: color .2s ease; }
.sv-projekt:hover .sv-projekt__mehr { color: var(--cyan); }
.sv-projekte__button { margin-top: 62px; }
@media (max-width: 1279px) { .sv-projekte__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 991px) { .sv-projekte { padding-block: 104px; } .sv-projekte__grid { gap: 48px 24px; } }
@media (max-width: 767px) {
  .sv-projekte { padding-block: 80px; }
  .sv-projekte__grid { grid-template-columns: 1fr; gap: 40px; }
  .sv-projekte__button { margin-top: 40px; }
}

/* CTA „Lassen Sie uns reden“ – volle Breite 1440, Foto links */
.sv-cta { padding-block: 80px; }
.sv-cta__box { width: min(1440px, 100%); margin-inline: auto; background: var(--ink); color: var(--white); overflow: hidden; display: flex; align-items: center; gap: 50px; }
.sv-cta__bild { width: 825px; height: 554px; flex: none; }
.sv-cta__text { width: 463px; display: grid; justify-items: start; }
.sv-cta__text p { color: var(--grey-100); margin-top: 16px; }
.sv-cta__text .btn { margin-top: 40px; }
@media (max-width: 1279px) {
  .sv-cta__bild { width: 52%; height: auto; }
  .sv-cta__text { width: auto; flex: 1; padding-right: var(--gutter); }
}
@media (max-width: 767px) {
  .sv-cta { padding-block: 64px; }
  .sv-cta__box { flex-direction: column; align-items: stretch; gap: 32px; padding-top: 48px; }
  .sv-cta__text { order: -1; padding-inline: var(--gutter); }
  .sv-cta__bild { width: 100%; }
}

/* Drei Schritte – dritte Kachel in Ink (statt Template-Blau) */
.sv-prozess { padding-block: 132px; }
.sv-prozess__inner { width: min(1226px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.sv-prozess__head { max-width: 805px; margin-inline: auto; text-align: center; display: grid; gap: 16px; justify-items: center; }
.sv-prozess__head h2 { max-width: 760px; }
.sv-prozess__head p { max-width: 542px; }
.sv-prozess__cards { display: grid; grid-template-columns: 335px 335px 498px; justify-content: space-between; margin: 40px 0 0; }
.sv-prozess__card { padding: 40px; }
.sv-prozess__card .process-card__text { max-width: 248px; }
.sv-prozess__card--dark { background: var(--ink); color: var(--white); }
/* Ziffer wie in Figma: Box 158 px breit am rechten Rand, Glyphe ragt unten hinaus */
@media (min-width: 768px) { .sv-prozess__card .process-card__number { left: calc(100% - 158px); right: auto; bottom: -57px; } }
.sv-prozess__card--dark .process-card__number { color: var(--grey-100); }
@media (min-width: 768px) { .sv-prozess__card--dark .process-card__number { left: calc(100% - 174px); } }
.sv-prozess__button { margin-top: 48px; }
@media (max-width: 1279px) { .sv-prozess__cards { grid-template-columns: 1fr 1fr 1.4fr; gap: 24px; } }
@media (max-width: 991px) {
  .sv-prozess { padding-block: 104px; }
  .sv-prozess__cards { grid-template-columns: 1fr 1fr; }
  .sv-prozess__card--dark { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .sv-prozess { padding-block: 80px; }
  .sv-prozess__cards { grid-template-columns: 1fr; gap: 16px; }
  .sv-prozess__card { min-height: 300px; padding: 32px 24px; }
}

/* Kundenstimmen auf der Weltkarte (1217 × 483), Karten 293,5 × 150 an festen Plätzen */
.sv-stimmen { padding-block: 132px; }
.sv-stimmen__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.sv-stimmen__head p { max-width: 438px; }
.sv-karte { position: relative; width: min(1217px, 100%); margin: 40px auto 0; aspect-ratio: 1217 / 483.1; }
.sv-karte__bild { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-karte__stimmen { margin: 0; }
.sv-karte__stimme {
  position: absolute; width: 24.12%; min-height: 150px;
  background: var(--white); box-shadow: 0 2px 6px rgba(10, 18, 28, .06);
  display: flex; align-items: center; padding: 21px 23px;
}
.sv-karte__stimme figure { margin: 0; display: flex; align-items: center; gap: 12px; }
.sv-karte__avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; overflow: hidden; background: var(--grey-100); }
.sv-karte__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.sv-karte__avatar--initialen { display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--white); font-size: 16px; font-weight: 700; }
.sv-karte__body { display: grid; gap: 6px; }
.sv-karte__zitat { font-size: 18px; line-height: 20px; font-weight: 700; }
.sv-karte__quelle { font-size: 14px; line-height: 18px; color: var(--grey-600); }
/* Plätze aus Figma: P1 (38,5 | 73) · P2 (331,5 | 300) · P3 (601,5 | 73) · P4 (894,5 | 300) */
.sv-karte--n1 .sv-karte__stimme:nth-child(1),
.sv-karte--n2 .sv-karte__stimme:nth-child(1) { left: 49.42%; top: 15.1%; }
.sv-karte--n2 .sv-karte__stimme:nth-child(2) { left: 27.24%; top: 62.08%; }
.sv-karte--n3 .sv-karte__stimme:nth-child(1), .sv-karte--n4 .sv-karte__stimme:nth-child(1) { left: 3.16%; top: 15.1%; }
.sv-karte--n3 .sv-karte__stimme:nth-child(2), .sv-karte--n4 .sv-karte__stimme:nth-child(2) { left: 27.24%; top: 62.08%; }
.sv-karte--n3 .sv-karte__stimme:nth-child(3), .sv-karte--n4 .sv-karte__stimme:nth-child(3) { left: 49.42%; top: 15.1%; }
.sv-karte--n4 .sv-karte__stimme:nth-child(4) { left: 73.5%; top: 62.08%; }
@media (max-width: 1279px) {
  .sv-karte__stimme { width: 28%; padding: 16px 18px; }
}
@media (max-width: 991px) {
  .sv-stimmen { padding-block: 104px; }
  .sv-stimmen__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sv-karte { aspect-ratio: auto; }
  .sv-karte__bild { position: static; height: auto; }
  .sv-karte__stimmen { position: relative; margin-top: -14%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .sv-karte .sv-karte__stimme { position: static; width: auto; min-height: 0; }
}
@media (max-width: 767px) {
  .sv-stimmen { padding-block: 80px; }
  .sv-karte__stimmen { grid-template-columns: 1fr; gap: 16px; }
}