/* ================================================================
   Umsonst und Draußen 2023 — Seitenspezifische Styles
   Gemeinsame Klassen (story-grid-*, story-closing, story-back,
   story-full, has-fullscreen-hero) liegen in style.css
   ================================================================ */

/* ── Hero ──────────────────────────────────────────────────────── */
.uud23-hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  background: #0b1c26;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.uud23-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.uud23-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11,28,38,0.85) 0%,
    rgba(11,28,38,0.30) 45%,
    rgba(11,28,38,0.15) 70%,
    rgba(11,28,38,0.45) 100%
  );
}
.uud23-hero-content {
  position: relative;
  z-index: 1;
  padding: 64px 72px;
  width: 100%;
}
/* ── .page-hero-label Farbüberschreibung ── */
.uud23-hero .page-hero-label {
  color: var(--coral);
}

/* ── .hero-title: Basiswerte passen bereits, kein Override nötig ── */

/* ── Intro-Eyebrow (seiten-spezifisch, da nur UuD23) ── */
.uud23-intro-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  display: block;
  margin-bottom: 20px;
}
/* story-intro em/p-Sonderregeln: scoped via Hero-Geschwister-Selektor */
.uud23-hero ~ .story-intro em { font-style: italic; color: var(--coral); }

/* ── Atemzeichen ───────────────────────────────────────────────── */
.uud23-breath {
  max-width: 480px;
  margin: 80px auto;
  padding: 0 48px;
  text-align: center;
}
.uud23-breath-mark {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--coral);
  opacity: 0.6;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .uud23-hero-content { padding: 48px 40px; }
  .uud23-breath { padding: 0 32px; margin: 64px auto; }
}
@media (max-width: 640px) {
  .uud23-hero-content { padding: 40px 24px; }
}