.hero {
  position: relative;
  min-height: min(100svh, 54rem);
  display: flex;
  align-items: flex-end;
  overflow: clip;
  isolation: isolate;
  background: var(--c-ink);
}

section.hero.small {
  height:90px !important;
  min-height: 90px !important;
  margin-bottom: -3rem;
}

/* Der Hero besteht aus zwei getrennten Bildebenen, damit beim Scrollen
   Tiefe entsteht: hinten der herausretuschierte Hintergrund, davor Simona
   als freigestelltes Bild.

   Stapelung von hinten nach vorn:
     0  .hero__layer--bg    Hintergrund
     1  .hero::after        Farbschleier fuer die Lesbarkeit der Schrift
     2  .hero__layer--fg    Simona
     3  .hero__inner        Text und Schaltflaechen
*/

.hero__layer {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

/* Oben und unten ueberstehend, damit beim Verschieben keine Kante ins Bild
   laeuft. Der Hintergrund braucht mehr Reserve, weil er schneller laeuft. */
.hero__layer--bg {
  top: -12%;
  bottom: -12%;
  z-index: 0;
}

.hero__layer--fg {
  top: -6%;
  bottom: -6%;
  z-index: 2;
}

.hero__layer picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(42, 34, 30, var(--hero-overlay-a1, 0.78)) 0%,
    rgba(42, 34, 30, var(--hero-overlay-a2, 0.62)) 18%,
    rgba(42, 34, 30, var(--hero-overlay-a3, 0.38)) 36%,
    rgba(42, 34, 30, var(--hero-overlay-a4, 0.16)) 52%,
    rgba(42, 34, 30, var(--hero-overlay-a5, 0.04)) 66%,
    rgba(42, 34, 30, 0) 78%
  ) !important;
}

.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding:
    var(--hero-padding-top)
    var(--hero-padding-inline)
    var(--hero-padding-bottom);
}

.hero__content {
  max-width: 44rem;
}

/* ─────────────────────────────────────────────────────────
   TEXT-EINBLENDUNG (Reihenfolge wie in Banner-1)
     1. Eyebrow   fadeUp
     2. H1        slideLeft
     3. Lead      fadeUp
   Tempo ueber --hero-anim-speed im :root-Block.
───────────────────────────────────────────────────────── */

.hero .eyebrow {
  color: var(--c-sand);
  opacity: 0;
  animation:
    fadeUp
    calc(var(--hero-anim-dur-eyebrow) * var(--hero-anim-speed))
    var(--hero-anim-ease-fade)
    calc(var(--hero-anim-del-eyebrow) * var(--hero-anim-speed))
    forwards;
}

.hero h1 {
  font-size: var(--fs-hero);
  color: var(--c-white);
  margin-bottom: var(--sp-s);
  opacity: 0;
  animation:
    slideLeft
    calc(var(--hero-anim-dur-title) * var(--hero-anim-speed))
    var(--hero-anim-ease-title)
    calc(var(--hero-anim-del-title) * var(--hero-anim-speed))
    forwards;
}

.hero h1 em {
  font-style: italic;
  color: var(--c-sand);
}


.hero__lead {
  font-size: 1.15rem;
  color: rgba(255, 253, 250, 0.9);
  max-width: 40ch;
  margin-bottom: 0;
  font-style: italic;
  opacity: 0;
  animation:
    fadeUp
    calc(var(--hero-anim-dur-lead) * var(--hero-anim-speed))
    var(--hero-anim-ease-fade)
    calc(var(--hero-anim-del-lead) * var(--hero-anim-speed))
    forwards;

	#font-family: var(--font-display);
  #font-style: italic;
  #font-size: clamp(1.5rem, 3vw, 2.35rem);
  #line-height: 1.38; 
}

/* Dekorativer Divider mit Herz oberhalb des Lead-Textes. */
.hero__lead::before {
  content: '';
  display: block;
  width: 7.5rem;
  height: 1.35rem;
  margin-bottom: var(--sp-m);
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cline x1='0' y1='11' x2='83' y2='11' stroke='%23fffdfa' stroke-opacity='.72' stroke-width='1'/%3E%3Cpath d='M101 18.5 91.8 9.7A5.5 5.5 0 0 1 99.6 2l1.4 1.4 1.4-1.4a5.5 5.5 0 0 1 7.8 7.7Z' fill='none' stroke='%23fffdfa' stroke-opacity='.82' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(var(--hero-anim-shift-y));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(var(--hero-anim-shift-x));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Ohne Bewegung: Text sofort sichtbar, keine Animation.
   Passend zur bereits vorhandenen Reduced-Motion-Logik im Parallax-JS. */
@media (prefers-reduced-motion: reduce) {

  .hero .eyebrow,
  .hero h1,
  .hero__lead {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Signature: Atemtakt */
.breath {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: var(--sp-m);
  padding: 0.6rem 1.1rem 0.6rem 0.6rem;
  border: 1px solid rgba(255, 253, 250, 0.28);
  border-radius: var(--r-pill);
  background: rgba(28, 22, 18, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.breath__ring {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 253, 250, 0.4);
  display: grid;
  place-items: center;
}

.breath__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c-sand);
  animation: breathe var(--breath-cycle) var(--ease) infinite;
}

.breath__label {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 253, 250, 0.88);
  min-width: 6.5rem;
}

@keyframes breathe {
  0% {
    transform: scale(1);
  }

  33.34% {
    transform: scale(2.6);
  }

  50% {
    transform: scale(2.6);
  }

  100% {
    transform: scale(1);
  }
}