/* ==========================================================================
   NH40 · Aktivitäten- und Themenseiten (Phase T)
   ========================================================================== */

/* ==========================================================================
   T1a · Der Aktivitäten-Hero bekommt ein Bild
   --------------------------------------------------------------------------
   Bisher stand dort nur Text. Das Foto (Alpe Dornach, 1920 px) liegt seit
   jeher im Ordner der Seite und wurde nie im Hero verwendet.
   Bewusst kürzer als der Startseiten-Hero: eine Unterseite darf nicht so
   tun, als sei sie der Eingang.
   ========================================================================== */

.thema-hero {
  position: relative;
  min-height: min(66svh, 34rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--graphit);
  padding: 0;
}

.thema-hero-bild { position: absolute; inset: 0; }

.thema-hero-schleier {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Kräftiger als beim Startseiten-Hero: dort liegt der Text über dunklem
     Wald, hier über hellem Fels und Schnee. Gemessen gegen die hellste
     Stelle unter der Schlagzeile, nicht geschätzt. */
  background: linear-gradient(to top, #1A1A17FA 0%, #1A1A17EE 30%, #1A1A17C4 55%, #1A1A1766 76%, #1A1A1700 94%);
}

.thema-hero .hero-text,
.thema-hero .container {
  position: relative; z-index: 2;
  color: var(--alabaster);
  padding: 0 clamp(1.25rem, 5vw, 4.5rem) clamp(2rem, 5svh, 3.5rem);
  max-width: 62rem; margin: 0 auto; width: 100%;
}

.thema-hero .hero-eyebrow,
.thema-hero .hero-eyebrow span { color: var(--alabaster); opacity: 0.82; }
.thema-hero .hero-eyebrow-linie { background: rgba(252,251,248,0.5); }
.thema-hero .hero-titel { color: var(--alabaster); }
/* Der Kursiv-Teil erbt in der hellen Fassung ein dunkles Graphit. Auf dem
   dunklen Schleier ist er damit praktisch unsichtbar — die Farbe muss
   mitwandern, nicht nur die Deckkraft. */
.thema-hero .hero-titel em { color: var(--alabaster); opacity: 0.86; }
.thema-hero .hero-lead,
.thema-hero .hero-sub,
.thema-hero p { color: rgba(252,251,248,0.86); }

/* ==========================================================================
   T1b · Kapitel-Sprungleiste (Befund M8)
   --------------------------------------------------------------------------
   Die Aktivitätenseite ist lang. Ohne Übersicht scrollt man blind.
   Die Leiste klebt unter der Kopfzeile und markiert, wo man gerade ist —
   über einen IntersectionObserver, nicht über scroll-Ereignisse.
   ========================================================================== */

.kapitelleiste {
  position: sticky;
  top: var(--kopf-hoehe, 0px);
  z-index: 40;
  background: var(--alabaster);
  border-bottom: 1px solid var(--graphit-10);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.kapitelleiste::-webkit-scrollbar { display: none; }

.kapitelleiste-inner {
  display: flex; gap: clamp(1rem, 3vw, 2.25rem);
  max-width: 62rem; margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.kapitelleiste a {
  flex: none;
  display: block;
  padding: 0.95rem 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--graphit-60); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
  white-space: nowrap;
}
.kapitelleiste a:hover { color: var(--graphit); }
.kapitelleiste a[aria-current="true"] {
  color: var(--graphit);
  border-bottom-color: var(--graphit);
}
.kapitelleiste a:focus-visible { outline: 2px solid var(--graphit); outline-offset: -2px; }

/* Sprungziele dürfen nicht unter der Leiste verschwinden */
[id][data-kapitel-ziel] { scroll-margin-top: calc(var(--kopf-hoehe, 4.5rem) + 4rem); }

@media (prefers-reduced-motion: reduce) {
  .kapitelleiste a { transition: none; }
}

/* ==========================================================================
   Welle 2 · Themenseiten (02.08. nachts)
   --------------------------------------------------------------------------
   A · Bühnenvorspann: Winter, Biken und Workation bekommen ein Foto —
       ehrliches Material aus dem eigenen Bestand (Nebelhorn-Piste,
       Schlappoldalm, der Blick aus dem Haus). Eiskunstlauf bleibt bewusst
       typografisch: die einzige Eis-Grafik im Fundus ist eine
       Schanzen-Federzeichnung, also kein ehrliches Motiv.
       Bauart: Foto oben (Ken-Burns + Exit-Drift), Verlaufsnaht, Text im
       Graphit-Band darunter — das m-buehnenwort-Prinzip auf Hero-Grösse.
       Text steht nie auf ungeschütztem Foto: Alabaster auf Graphit ist
       16,7:1, foto-unabhängig, auf jeder Breite (die Schleier-Rechnung
       gegen helle Pisten-Fotos hielt auf flachen Fenstern nicht — darum
       Band statt Overlay).
   B · Auftritts-Choreografie beider Hero-Bauarten (deckt auch den
       Aktivitäten-Hero ab: .thema-hero .hero-*).
   html-Präfix: gewinnt gegen die <style>-Blöcke im Body (Werkstatt-Falle).
   ========================================================================== */

/* --- A · Bühnenvorspann ------------------------------------------------- */
html .ek-hero.thema-buehne {
  display: flex;
  flex-direction: column;
  min-height: min(92svh, 52rem);
  background: var(--graphit);
  padding: 0;
  overflow: clip;
}

html .thema-buehne .thema-buehne-bild {
  position: relative;
  flex: 1 1 auto;
  min-height: 15rem;
}

/* Verlaufsnaht ins Textband — im Bild, nie unter Text */
html .thema-buehne .thema-buehne-bild::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, #1A1A17FA 0%, #1A1A1773 24%, #1A1A1700 52%);
}

html .thema-buehne .container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(1.25rem, 3svh, 2.25rem);
  padding-bottom: clamp(2.25rem, 5svh, 3.5rem);
}

/* Textfarben auf dem Graphit-Band */
html .thema-buehne .ek-hero-eyebrow { color: rgba(252,251,248,0.82); }
html .thema-buehne .ek-hero-linie   { background: rgba(252,251,248,0.5); }
html .thema-buehne .ek-hero-titel   { color: var(--alabaster); }
html .thema-buehne .ek-hero-titel em { color: var(--alabaster); opacity: 0.88; }
html .thema-buehne .ek-hero-sub     { color: rgba(252,251,248,0.86); }

/* Knöpfe auf dunklem Grund — Umkehrung der hellen apt-action-Varianten */
html .thema-buehne .apt-action--primary { background: var(--alabaster); color: var(--graphit); }
html .thema-buehne .apt-action--primary:hover { background: #fff; }
html .thema-buehne .apt-action--ghost {
  border-color: rgba(252,251,248,0.45);
  color: var(--alabaster);
  background: transparent;
}
html .thema-buehne .apt-action--ghost:hover {
  border-color: var(--alabaster);
  background: rgba(252,251,248,0.12);
}
html .thema-buehne .apt-action:focus-visible {
  outline: 2px solid var(--alabaster);
  outline-offset: 3px;
}

/* --- B · Auftritt: Eyebrow → Titel → Prosa → Aktionen ------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.m-js:not(.m-notaus) .ek-hero-eyebrow,
  html.m-js:not(.m-notaus) .ek-hero-titel,
  html.m-js:not(.m-notaus) .ek-hero-sub,
  html.m-js:not(.m-notaus) .ek-hero-aktionen,
  html.m-js:not(.m-notaus) .thema-hero .hero-eyebrow,
  html.m-js:not(.m-notaus) .thema-hero .hero-titel,
  html.m-js:not(.m-notaus) .thema-hero .hero-prosa,
  html.m-js:not(.m-notaus) .thema-hero .hero-pull {
    animation: themaAuftritt 0.7s var(--ease-out) both;
  }
  html.m-js:not(.m-notaus) .ek-hero-eyebrow,
  html.m-js:not(.m-notaus) .thema-hero .hero-eyebrow { animation-delay: 0.08s; }
  html.m-js:not(.m-notaus) .ek-hero-titel,
  html.m-js:not(.m-notaus) .thema-hero .hero-titel   { animation-delay: 0.22s; }
  html.m-js:not(.m-notaus) .ek-hero-sub,
  html.m-js:not(.m-notaus) .thema-hero .hero-prosa   { animation-delay: 0.42s; }
  html.m-js:not(.m-notaus) .ek-hero-aktionen         { animation-delay: 0.58s; }
  html.m-js:not(.m-notaus) .thema-hero .hero-pull    { animation-delay: 0.70s; }
}

@keyframes themaAuftritt {
  from { opacity: 0; transform: translateY(14px); }
}