/* === Hero (ausgelagert) ============================================== */
.hero{
  position: relative;
  color: #fff;
  background: var(--hero-image, none) center / cover no-repeat;
  min-height: clamp(220px, 30vh, 380px);
  padding: 0;
  border-bottom:1px solid var(--border);
}
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.05) 100%),
    radial-gradient(80% 70% at 15% 70%, rgba(0,0,0,.22), transparent 60%);
  opacity:.95;
}
/* WICHTIG: Container als Bezugspunkt für absoluten Text */
.hero__inner{ min-height: inherit; position: relative; }

/* Text exakt an Containerkante ausrichten */
.hero__content{
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(16px, 5vh, 32px);
  max-width: 62ch;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

.hero__content > div:first-child,
.hero__content > div:first-child > *{
  font-weight: 800;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 .2rem 0;
}
.hero__content > div:last-child,
.hero__content > div:last-child > *{
  font-weight: 600;
  font-size: clamp(1.05rem, .9rem + .9vw, 1.4rem);
  margin: .2rem 0 0 0;
  opacity: .98;
}

.hero--tall{ min-height: clamp(220px, 30vh, 380px) !important; }
.hero .container{ padding-block: 0 !important; }