/* =============================================================
   pages/home.css — Startseite
   ============================================================= */

/* -------------------------------------------------------------
   Bühne
   ------------------------------------------------------------- */
.hero__inner {
  display: flex;
  align-items: flex-start;
  min-height: 430px;
}
.hero__copy  { flex: 0 0 61%; }
.hero__figure{ flex: 1; margin-top: 0; }
.hero__figure img { width: 83.4%; margin-left: 2.3%; }

.hero__title {
  font-family: var(--f-display);
  font-size: 75px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
}
.hero__subtitle {
  margin: 5px 0 0;
  color: var(--c-accent);
  font-family: var(--f-display);
  font-size: 43px;
  font-weight: 600;
  line-height: 1;
}
.hero__text {
  margin-top: 45px;
  padding-right: 30px;
  color: var(--c-text-strong);
  font-family: var(--f-heading);
  font-size: 20.8px;
  font-weight: 600;
  line-height: 1;
}
.hero__text p { margin: 8px 0 16px; }

@media (max-width: 1024px) {
  .hero__inner { min-height: 420px; }
  .hero__copy   { flex: 0 0 65%; }
  .hero__figure { margin-top: 0; }
  .hero__figure img { width: 100%; margin-left: 0; }
  .hero__title    { font-size: 60px; }
  .hero__text     { font-size: 16px; }
  .hero__text p   { margin: 8px 0 16px; }
}

@media (max-width: 767px) {
  .hero__inner  { display: block; min-height: 0; }
  .hero__figure { display: none; }
  .hero__title  { font-size: 40px; }
  .hero__text   { margin-top: 20px; padding-right: 0; text-align: center; }
}

/* -------------------------------------------------------------
   Drei Leistungsfelder
   ------------------------------------------------------------- */
.services { padding-bottom: 50px; }
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch;
}
@media (max-width: 767px) {
  .services__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------
   Über uns
   ------------------------------------------------------------- */
.about { margin-bottom: var(--space-sm); }

.about__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.about__figure { flex: 0 0 36.1%; }

/* Flex-Spalte: verhindert das Zusammenfallen der Außenabstände,
   damit die Abstände denen des Originals entsprechen. */
.about__copy {
  display: flex;
  flex: 0 0 56.1%;
  flex-direction: column;
}
.about .section-title { margin-top: 5px; }

.about__text { margin-top: var(--space-sm); font-family: var(--f-heading); }

.about__lead {
  margin: 0;
  color: var(--c-text-strong);
  font-family: var(--f-heading);
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
.about__text + .about__lead { margin-top: 27px; }
.about__lead + .about__lead { margin-top: 25px; }
.about__lead--strong b { font-weight: 900; }

.about .stats { margin-top: 36px; padding-block: 10px; }

/* Ab Tablet entfällt das Logo; der Text läuft über die volle Breite. */
@media (max-width: 1024px) {
  .about       { padding-block: 50px; }
  .about__copy { padding-top: 30px; }
  .about__figure { display: none; }
  .about__inner  { display: block; }
  .about__copy   { text-align: center; }
  .about .section-title { text-align: center; }
  .about .eyebrow       { text-align: center; }
}

/* -------------------------------------------------------------
   Best-Practice-Fälle
   ------------------------------------------------------------- */
.cases { padding-block: 0; }

/* Der Inhaltsbereich der Fallstudien ist durchgehend nur 10px eingerückt. */
.cases > .container { padding-inline: 10px; }

.cases__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-block: 10px;
}
.cases__spacer  { height: 50px; }
.cases__block--lead { padding-top: 30px; }
.cases__eyebrow { font-size: var(--fs-h2); letter-spacing: var(--ls-wider); }

/* Aufteilung: breite Spalte (Text + Diagramm + Zeitstrahl) und Porträt daneben */
.case {
  display: flex;
  align-items: flex-start;
  padding-block: 10px;
}
.case--reverse { flex-direction: row-reverse; }

.case__main {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 66.5%;
  padding: 10px;
}
.case__aside {
  display: flex;
  flex: 0 0 33.5%;
  align-items: flex-start;
  justify-content: center;
  padding: 10px;
}
.case__aside img { width: 100%; }

.case__intro {
  flex: 0 0 100%;
  margin: 0 0 14.4px;
  padding: 10px;
  font-family: var(--f-heading);
  font-size: 19px;
  line-height: 1.5;
  text-align: center;
}
.case__chart,
.case__timeline { flex: 0 0 50%; padding: 10px; }
.case__chart img { width: 100%; }

/* Tablet: Einleitung neben dem Porträt, darunter Diagramm und Zeitstrahl. */
@media (max-width: 1024px) {
  .case, .case--reverse {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    padding-block: 10px;
  }
  .case__main { display: contents; }

  .case__intro    { grid-area: 1 / 1 / 2 / 4; flex: none; }
  .case__aside    { grid-area: 1 / 4 / 2 / 5; flex: none; }
  .case__chart    { grid-area: 2 / 1 / 3 / 3; flex: none; }
  .case__timeline { grid-area: 2 / 3 / 3 / 5; flex: none; }

  /* Das Porträt ist auf Tablet nur eine kleine Randabbildung. */
  .case__aside img { width: min(100%, 21vw); margin-left: auto; }
}

/* Mobil: alles untereinander, das Porträt entfällt (wie im Original). */
@media (max-width: 767px) {
  .case, .case--reverse { grid-template-columns: 1fr; }
  .case__intro    { grid-area: auto; }
  .case__chart    { grid-area: auto; }
  .case__timeline { grid-area: auto; }
  .case__aside    { display: none; }
}

/* -------------------------------------------------------------
   Stimmen
   ------------------------------------------------------------- */
.voices { padding-block: 50px; }
.voices__title { margin-bottom: var(--space-sm); }