/* ==========================================================================
   YogaPänz – Startseiten-Einstieg: großes Porträt von Chrissi
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--plum-tint);
}

.hero__inner {
  width: min(100% - 2 * var(--space-m), var(--wrap));
  margin-inline: auto;
  display: grid;
  gap: var(--space-xl);
  padding-block: 0 var(--space-2xl);
}

/* Auf schmalen Displays läuft das Porträt randlos über die volle Breite. */
.hero__media {
  position: relative;
  margin-inline: calc(-1 * var(--space-m));
}

.hero__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 18%;
}

.hero__name {
  position: absolute;
  z-index: 1;
  left: var(--space-m);
  bottom: var(--space-s);
  max-width: calc(100% - 2 * var(--space-m));
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.hero__name span {
  display: block;
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--leaf-deep);
}

.hero__title {
  margin-bottom: var(--space-m);
  font-size: var(--step-4);
  line-height: 1.14;
}

.hero__title em {
  font-style: normal;
  padding-inline: 0.08em;
  background: linear-gradient(transparent 60%, var(--leaf) 60%, var(--leaf) 90%, transparent 90%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero .lead {
  max-width: 40ch;
}

/* Eigene Ausprägung nur für den Kursplan-Button im Hero-Bereich: warmes Rot
   aus der Beeren-Palette statt des neutralen Ghost-Stils, mit kurzem
   Aufmerksamkeits-Puls beim Laden. .btn--ghost bleibt für alle anderen
   Träger unverändert. */
.btn--ghost.btn--kursplan-highlight {
  --kursplan-red: #b91c3a;
  --kursplan-red-deep: #8f1530;
  border-color: var(--kursplan-red);
  background: var(--kursplan-red);
  color: var(--cream);
  animation: kursplan-pulse 1.7s ease-out 2;
}

.btn--ghost.btn--kursplan-highlight:hover,
.btn--ghost.btn--kursplan-highlight:focus-visible {
  background: var(--kursplan-red-deep);
  border-color: var(--kursplan-red-deep);
  color: var(--cream);
  transform: translateY(-2px) scale(1.03);
}

@keyframes kursplan-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(185, 28, 58, 0.55);
  }

  50% {
    box-shadow: 0 0 0 0.65rem rgba(185, 28, 58, 0);
  }
}

.hero__facts {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 0;
  display: grid;
  gap: var(--space-m);
  border-top: 1px solid var(--line);
  padding-top: var(--space-m);
}

.hero__facts strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--leaf-deep);
}

.hero__facts span {
  color: var(--ink-soft);
  font-size: var(--step--1);
}

@media (min-width: 48rem) {
  .hero__inner {
    padding-top: var(--space-xl);
  }

  .hero__media {
    margin-inline: 0;
  }

  .hero__media img {
    border-radius: var(--photo-corner-sm);
  }

  .hero__media img {
    aspect-ratio: 4 / 3;
    object-position: center 22%;
  }

  .hero__name {
    left: var(--space-l);
    bottom: var(--space-m);
    max-width: calc(100% - 2 * var(--space-l));
  }

  .hero__facts {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-l);
  }
}

@media (min-width: 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-2xl);
    padding-block: var(--space-2xl);
  }

  .hero__media {
    order: 2;
    min-height: 36rem;
  }

  .hero__media img {
    border-radius: var(--photo-corner);
  }

  .hero__media img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: center 15%;
  }

  .hero__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}