/* ============================================================
   Aktivitäten-Hebung — Schicht ÜBER dem Bestand.
   Alle Selektoren mit html-Präfix: die Seite trägt <style>-Blöcke
   im Body, die per Quellreihenfolge gewinnen würden (Werkstatt-
   Falle #2). Nur transform/opacity werden animiert.
   ============================================================ */

/* ---------- A · Kapitel-Bühnen: das Foto trägt Kicker + Titel ---------- */

html .akt-buehne {
  border: 0;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.4rem;
  background: var(--graphit, #1A1A17);
}
html .akt-buehne picture,
html .akt-buehne img {
  width: 100%;
  height: 100%;
}
html .akt-buehne-wort {
  /* Basis (Position, Verlauf, Farbe) kommt aus motion.css: .m-buehnenwort —
     das Markup trägt beide Klassen. Hier nur noch Kartenspezifisches. */
}
html .akt-buehne-wort .aktivitaet-meta {
  margin: 0 0 0.35rem;
  color: #FCFBF8;
  opacity: 0.85;
}
html .akt-buehne-wort .aktivitaet-meta span { color: inherit; }
html .akt-buehne-wort .aktivitaet-titel {
  margin: 0;
  color: #FCFBF8;
  font-size: clamp(1.45rem, 1.1rem + 1.1vw, 1.95rem);
  line-height: 1.15;
}
html .akt-buehne-wort .aktivitaet-titel em { color: inherit; }

/* ---------- B · Sommer/Winter-Signatur (Lichtstrecken-Technik) ---------- */

html .akt-jahreszeiten { margin: clamp(4rem, 10vh, 7rem) 0; }
html .akt-jahreszeiten-vorspann {
  max-width: 46rem;
  margin: 0 auto clamp(2.2rem, 5vh, 3.5rem);
  padding: 0 clamp(1.25rem, 4vw, 2rem);
  text-align: center;
}
html .akt-jahreszeiten-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphit-60, #1A1A17A1);
  margin-bottom: 1.1rem;
}
html .akt-jahreszeiten-label-linie {
  width: 2.25rem;
  height: 1px;
  background: var(--graphit-40, #1A1A1766);
}
html .akt-jahreszeiten-vorspann h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.12;
  margin: 0 0 0.9rem;
}
html .akt-jahreszeiten-vorspann h2 em { font-style: italic; }
html .akt-jahreszeiten-vorspann p {
  color: var(--graphit-70, #1A1A17B3);
  line-height: 1.65;
  margin: 0;
}

/* ---------- C · Balance: zwei Spalten statt einsamer Reihen ----------
   Höhepunkte hat 4 Sommer- und 2 Winterkarten, Gut-zu-wissen 4 —
   im alten 3er-Raster stand je Saison eine Karte neben Leere.
   2×2 bzw. 1×2 geht in jeder Saison auf. */

@media (min-width: 900px) {
  html #kap-hoehepunkte .hp-grid,
  html #kap-gutzuwissen .hp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- D · Bergbahn-Banner: Foto + Zahlen ---------- */

html .saison-cta--buehne {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  overflow: hidden;
}
html .saison-cta--buehne .saison-cta-bild {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  margin: -2.5rem calc(-1 * clamp(1.5rem, 4vw, 3rem)) -2.5rem 0;
}
html .saison-cta--buehne .saison-cta-bild picture,
html .saison-cta--buehne .saison-cta-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html .akt-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  margin: 1.4rem 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphit-60, #1A1A17A1);
}
html .akt-zahlen b {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0;
  color: var(--graphit, #1A1A17);
  margin-right: 0.15rem;
}
@media (max-width: 899px) {
  html .saison-cta--buehne { display: flex; flex-direction: column; align-items: stretch; }
  html .saison-cta--buehne .saison-cta-bild {
    order: -1;
    margin: -2.5rem calc(-1 * clamp(1.5rem, 4vw, 3rem)) 1.5rem;
    aspect-ratio: 16 / 10;
  }
}

/* ---------- E · Concierge-Politur ---------- */

/* hidden verlor gegen display:flex der Klasse — der Kern von Neos
   Gerippe-Zeile („Gerade draußen: · ·"). Attribut gewinnt jetzt immer. */
html .concierge-wetter[hidden] { display: none !important; }