/* ==========================================================================
   LAYOUT — Shell, Container, Sections, Grid, Hero
   Maße exakt nach Spezifikation Abschnitt 03 / 09.2
   ========================================================================== */

/* --- Shell -------------------------------------------------------------- */

.site-shell {
  width: min(var(--shell-max), calc(100% - 80px));
  margin: 24px auto;
  overflow: clip;
  border-radius: var(--radius-shell);
  background: var(--color-paper);
  box-shadow: var(--shadow-shell);
}

/* --- Container ---------------------------------------------------------- */

.container {
  width: min(var(--container-max), calc(100% - 96px));
  margin-inline: auto;
}

.container--narrow {
  width: min(760px, calc(100% - 96px));
  margin-inline: auto;
}

/* --- Section ------------------------------------------------------------ */

.section { padding-block: clamp(64px, 7.8vw, 112px); }
.section--tight { padding-block: clamp(48px, 5.5vw, 80px); }
.section--flush-top { padding-top: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);   /* Überschrift zu Content = 48 px */
}

.section-head__text { max-width: 640px; }
.section-head .eyebrow { margin-bottom: var(--space-3); }
.section-head .lead { margin-top: var(--space-4); }

/* --- Grid --------------------------------------------------------------- */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

/* --- Hero (Split 5/7, min. 620 px) -------------------------------------- */

/* Textspalte trägt die Aussage, deshalb bekommt sie die größere Hälfte.
   Vorher 5/7 — die Headline musste dadurch auf 1440 px vierzeilig brechen. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 24px;
  padding: 24px 48px 128px;   /* 128 px Nachlauf, weil die Fakten-Leiste überlappt */
}

.hero__copy,
.hero__media {
  min-height: 620px;
  border-radius: var(--radius-hero);
}

/* Unten mehr Luft als oben: Die Faktenleiste ragt 48 px in die Karte hinein.
   Bei gleichmäßigem Padding stoßen die Buttons exakt an ihre Oberkante —
   gemessen 0 px Abstand. 96 px unten ergeben 48 px echten Zwischenraum. */
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 48px 96px;
  background: var(--color-lime);
}

.hero__media {
  position: relative;
  overflow: hidden;
  background: var(--color-aqua);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal-point, 50% 22%);
}

/* --- Responsive (Spezifikation 09.2) ------------------------------------ */

@media (max-width: 1279px) {
  .site-shell { width: calc(100% - 48px); }
  .container  { width: calc(100% - 80px); }
  .section    { padding-block: clamp(64px, 7vw, 96px); }
}

@media (max-width: 1023px) {
  .site-shell {
    width: calc(100% - 32px);
    margin-block: 16px;
  }

  .container { width: calc(100% - 56px); }
  .container--narrow { width: calc(100% - 56px); }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 28px 96px;
  }

  .hero__copy  { min-height: 420px; padding: 40px; }
  .hero__media { min-height: 520px; border-radius: 28px; }

  .grid-12 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 767px) {
  .site-shell {
    width: 100%;
    margin: 0;
    border-radius: 0;
  }

  .container { width: calc(100% - 40px); }
  .container--narrow { width: calc(100% - 40px); }

  .hero { padding: 14px 20px 72px; }

  .hero__copy {
    min-height: 0;
    padding: 28px;
    border-radius: 22px;
  }

  .hero__media {
    min-height: 400px;
    border-radius: 22px;
  }

  .grid-12 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

  .section-head { margin-bottom: var(--space-6); }
}

@media (max-width: 479px) {
  .container { width: calc(100% - 32px); }
  .container--narrow { width: calc(100% - 32px); }
  .grid-12 { gap: 12px; }
}