/* Eigener Rhythmus für den mittleren Teil der Startseite: Hebel, Stimmen und
   Verkaufspsychologie erhalten unterschiedliche Flächen und echte Fotos.
   Texte, Reihenfolge und Schriften bleiben unverändert. */

/* Gemeinsame Bildrahmen. */
.design-studio .surface-photo {
  margin: 0 0 30px;
  border-radius: 18px;
  overflow: hidden;
  background: #201f20;
}
.design-studio .surface-photo img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: 50% 35%;
}
.design-studio .surface-photo--portrait img {
  height: 380px;
}

/* 1) Hebel-Abschnitt: konzentrierte dunkle Fläche. */
.design-studio #entscheidungen[data-surface="deep"] {
  background: #242223;
  color: #e6e3e1;
  padding: 88px 0 80px;
}
.design-studio #entscheidungen[data-surface="deep"] .section-head > span:first-child,
.design-studio #entscheidungen[data-surface="deep"] .section-head > span:last-child {
  color: #b6b2b0;
}
.design-studio #entscheidungen[data-surface="deep"] .section-head b {
  color: #ff6378;
  border-color: #ffffff3d;
}
.design-studio #entscheidungen[data-surface="deep"] .decision-intro h2,
.design-studio #entscheidungen[data-surface="deep"] .decision-item h3 {
  color: #f7f4ef;
}
.design-studio #entscheidungen[data-surface="deep"] .decision-intro p,
.design-studio #entscheidungen[data-surface="deep"] .decision-item p {
  color: #cbc7c5 !important;
}
.design-studio #entscheidungen[data-surface="deep"] .decision-item {
  border-color: #ffffff21;
}
.design-studio #entscheidungen[data-surface="deep"] .decision-item > .micro {
  color: #ff6378;
}
.design-studio #entscheidungen[data-surface="deep"] .decision-tabs button {
  color: #e6e3e1;
  border-color: #ffffff33;
}
.design-studio #entscheidungen[data-surface="deep"] .decision-tabs button {
  padding: 10px 4px;
  background: none;
}
.design-studio #entscheidungen[data-surface="deep"] .decision-tabs button[aria-selected="true"] {
  color: #ff6378;
  border-color: #ff6378;
  background: none;
}
.design-studio #entscheidungen[data-surface="deep"] .decision-next {
  color: #e6e3e1;
  border-color: #ffffff26;
}
.design-studio #entscheidungen[data-surface="deep"] .decision-next a {
  color: #fff;
}
.design-studio #entscheidungen[data-surface="deep"] .decision-layout {
  gap: 72px;
  align-items: start;
}

/* 2) Stimmen: kompakter, klar gruppierter Beweis auf warmem Sand. */
.design-studio #kundenstimmen[data-surface="proof"] {
  background: #ece8e0;
  padding: 68px 0 62px;
}
.design-studio #kundenstimmen[data-surface="proof"] .quote-row {
  margin-top: 0;
  padding-top: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
}
.design-studio #kundenstimmen[data-surface="proof"] blockquote {
  padding-left: 22px;
  border-left: 2px solid #c81035;
  font-size: 21px;
  line-height: 1.55;
  color: #2a2829;
}
.design-studio #kundenstimmen[data-surface="proof"] blockquote cite {
  display: block;
  margin-top: 16px;
  font-size: 15px;
  font-style: normal;
  color: #6b696a;
}
.design-studio #kundenstimmen[data-surface="proof"] .quote-mark {
  color: #c81035;
}
.design-studio #kundenstimmen[data-surface="proof"] .evidence-foot {
  margin-top: 30px;
  font-size: 14px;
  line-height: 1.6;
  color: #6b696a;
}

/* 3) Verkaufspsychologie: luftig und portraitgeführt. */
.design-studio #verkaufspsychologie[data-surface="airy"] {
  background: #fbfaf7;
  padding: 96px 0;
}
.design-studio #verkaufspsychologie[data-surface="airy"] .psychology {
  gap: 78px;
  align-items: start;
}

@media (max-width: 900px) {
  .design-studio #entscheidungen[data-surface="deep"] {
    padding: 64px 0 58px;
  }
  .design-studio #kundenstimmen[data-surface="proof"] .quote-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .design-studio #verkaufspsychologie[data-surface="airy"] {
    padding: 66px 0;
  }
  .design-studio .surface-photo img,
  .design-studio .surface-photo--portrait img {
    height: 240px;
  }
}
@media (max-width: 600px) {
  .design-studio .surface-photo {
    margin-bottom: 24px;
  }
  .design-studio .surface-photo img,
  .design-studio .surface-photo--portrait img {
    height: 210px;
  }
  .design-studio #kundenstimmen[data-surface="proof"] blockquote {
    font-size: 19px;
  }
}