/* ============================================
   ECX 40 - Hero-Slider
   EIN Layout mit drei Anstrichen (a/b/c), keine
   drei Vorlagen. Werte aus dem Entwurf der
   Grafikerin, Klassen mit ecx-Praefix.
   Responsive nach docs/DECISIONS.md, Abschnitt
   "Responsive-Regeln": unter 900 einspaltig,
   Bild oben, Text darunter.
   ============================================ */

.ecx-hero {
  position: relative;
  overflow: hidden;
}

/*
 * Alle Slides liegen uebereinander in EINER Rasterzelle.
 *
 * Vorher stand der aktive Slide auf position:relative und die uebrigen auf
 * absolute - damit bestimmte immer der gerade sichtbare Slide die Hoehe des
 * Containers. Bei jedem Wechsel sprang der Hero und schob den gesamten
 * Seiteninhalt darunter mit: gemessen 87px bei 1440 und 99px bei 640.
 *
 * Im Raster zaehlt stattdessen der hoechste Slide, weil visibility:hidden
 * die Elemente unsichtbar macht, ihren Platz aber stehen laesst. Die Hoehe
 * ist damit fuer alle Slides dieselbe und aendert sich beim Wechsel nicht
 * mehr.
 *
 * Bewusst ohne JavaScript geloest: eine einmal gemessene Hoehe waere falsch,
 * sobald jemand die Schriftgroesse im Browser aendert oder eine Schrift
 * nachlaedt. Das Raster rechnet bei jedem Umbruch neu.
 *
 * Faellt ein Slide weg - Sprachfilter oder leere Abfrage - steht er gar
 * nicht erst im Markup und zaehlt entsprechend nicht mit. Bei nur einem
 * Slide ist die Zeile so hoch wie dieser eine, es entsteht keine
 * ueberschuessige Hoehe.
 *
 * minmax(0, 1fr) statt 1fr: sonst koennte ein sehr langer Titel die Spalte
 * ueber die Containerbreite hinaus aufdruecken.
 */
.ecx-hero__slides {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "slide";
}

.ecx-hero__slide {
  grid-area: slide;
  /*
   * Bezugsrahmen fuer .ecx-hero__lines, das mit inset:0 im Slide liegt.
   * Ohne diese Zeile fiele es auf .ecx-hero zurueck und luege quer ueber
   * allen Slides statt in jedem einzelnen.
   */
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms var(--ease);
  display: flex;
  align-items: stretch;
}
.ecx-hero__slide.ecx-is-active {
  opacity: 1;
  visibility: visible;
}

/* ---- Varianten: nur Hintergrund und Schriftfarbe ---- */
.ecx-hero__slide--a { background: linear-gradient(225deg, #1d4267 0%, #ea355d 65%); color: #fff; }
.ecx-hero__slide--b { background: var(--ec-blue); color: #fff; }
.ecx-hero__slide--c { background: #f0f2f6; color: var(--ink); }

/* ---- Dekoratives Linienbild, je Variante anders gelegt ---- */
.ecx-hero__lines {
  position: absolute;
  inset: 0;
  background: url('../../img/linien.png') no-repeat;
  background-position: 115% 130%;
  background-size: 55% auto;
  pointer-events: none;
}
.ecx-hero__slide--a .ecx-hero__lines { opacity: .8; mix-blend-mode: screen; }
.ecx-hero__slide--b .ecx-hero__lines { opacity: .8; mix-blend-mode: screen; }
.ecx-hero__slide--c .ecx-hero__lines {
  background-position: -8% center;
  background-size: 38% auto;
  opacity: .85;
}

/* ---- Das eine Raster ---- */
.ecx-hero__container {
  max-width: 1320px;
  margin: 0 auto;
  /* Unten etwas mehr Luft als im Entwurf, damit der rote Schein der
     Bildkachel ausklingen kann, statt hart abgeschnitten zu werden. */
  padding: 48px 32px 64px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}
/* visual "kein": der Text nimmt die volle Breite. */
.ecx-hero__container--voll { grid-template-columns: 1fr; }

.ecx-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.ecx-hero__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  min-width: 0;
}

.ecx-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .9;
}

/*
 * Sprachhinweis neben dem Eyebrow ("in German"), wenn der Beitrag nicht
 * in der Sprache der Seite vorliegt. Warum es ihn gibt, steht bei
 * ecx_termine_sprachuebergreifend() in inc/events.php.
 *
 * Ohne Versalien und mit weniger Deckkraft: er gehoert nicht zur
 * Rubrik, er ist ein Vorbehalt dazu.
 */
.ecx-hero__sprache {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  opacity: .72;
}

/*
 * Titel: Der Bereich muss "Sommerspecial" und
 * "degea live - Gamechanger gesucht: wie machen wir die Koloskopie fit
 * für die Zukunft?" gleichermassen aushalten. Deshalb clamp() statt fester
 * Groessen, balance fuer den Umbruch und break-words gegen lange Einzelwoerter.
 */
/*
 * color: inherit ist hier nicht kosmetisch. Der Altbestand setzt eine
 * Farbe direkt auf h2, und eine direkte Regel schlaegt Vererbung immer -
 * der Titel stand dunkelblau auf dunkelblauem Grund. Der Selektor ist
 * zweistufig, damit er auch gegen Regeln wie ".entry-content h2" gewinnt.
 * Gleiches Muster wie beim Aufklapp-Knopf der Navigation.
 */
.ecx-hero__text .ecx-hero__titel,
.ecx-hero__text .ecx-hero__lead,
.ecx-hero__text .ecx-hero__eyebrow { color: inherit; }

.ecx-hero__slide--c .ecx-hero__text .ecx-hero__eyebrow { color: var(--ec-red); }

.ecx-hero__titel {
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: none;
}

.ecx-hero__lead {
  font-size: 15.5px;
  line-height: 1.55;
  opacity: .82;
  margin: 0;
  max-width: 62ch;
}

/*
 * Ankuendigung (hero-config.php, 'zusatz'): Text und Zusatz stehen in
 * einem gemeinsamen Block. Der Zusatz ist halbfett und nicht
 * zurueckgenommen - er traegt die eigentliche Nachricht ("Am 13.
 * Oktober geht es los!"). Gibt es keinen Zusatz, entsteht der Block
 * nicht; die uebrigen Slides bleiben unveraendert.
 */
.ecx-hero__textblock { min-width: 0; }
.ecx-hero__text .ecx-hero__zusatz {
  font-size: 15.5px;
  line-height: 1.55;
  font-weight: 600;
  color: inherit;
  margin: 10px 0 0;
  max-width: 62ch;
}

.ecx-hero__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ---- Knoepfe ----
 * Grundform in 30-components/buttons.css. Hier steht nur, was der Hero
 * anders macht: die Slides a und b sind dunkel, dort wird der Zweitknopf
 * weiss. Slide c ist hell und behaelt die Grundform.
 */
.ecx-hero__slide:not(.ecx-hero__slide--c) .ecx-btn--sekundar {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
}
.ecx-hero__slide:not(.ecx-hero__slide--c) .ecx-btn--sekundar:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ---- Bildkachel ---- */
.ecx-hero__kachel {
  position: relative;
  display: block;
  width: 100%;
  max-width: 280px;
  border-radius: var(--r-lg);
  overflow: hidden;
  /*
   * GRUND DER KACHEL aus der Konfiguration ('bild_grund'), sonst Schwarz.
   * Beim Podcast --ec-blue-700, die Grundfarbe der Cover: ein 16:9-Bild
   * steht ganz im quadratischen Rahmen, und oben und unten setzt der
   * Grund das Cover fort statt schwarzer Balken. Ein quadratisches
   * Cover fuellt den Rahmen. DECISIONS Punkt 40.
   */
  background: var(--ecx-kachel-grund, #000);
  /*
   * Mehrstufiger roter Schein aus dem Entwurf. Haengt an der Bildkachel und
   * nicht am Podcast: jeder Inhalt, der in dieser Bauart laeuft, bekommt ihn.
   *
   * Streuung gegenueber dem Entwurf zurueckgenommen (100px -> 70px, Versatz
   * 40px -> 28px). Grund: Der Hero hat overflow:hidden, damit er eine
   * abgeschlossene Flaeche bleibt. Der Entwurfswert braucht 140px unterhalb
   * der Kachel, vorhanden sind 64px - der Schein waere mit sichtbarer Kante
   * abgeschnitten worden. Im Entwurf selbst war er das ebenfalls, dort steht
   * dasselbe overflow:hidden bei noch weniger Luft.
   * Mit diesen Werten liegt die Schnittkante im schwachen Ausklang und faellt
   * nicht auf.
   */
  box-shadow:
    0 28px 70px rgba(234,53,93,.62),
    0 14px 34px rgba(234,53,93,.5),
    0 4px 12px rgba(0,0,0,.3);
  transition: transform var(--dur) var(--ease);
}
.ecx-hero__kachel:hover { transform: translateY(-3px); }
/* Ohne Link (Ankuendigung): nichts, das zum Klicken einlaedt. */
.ecx-hero__kachel--still:hover { transform: none; }
/*
 * Heller Rand auf dunklem Grund (Varianten a und b). Das Cover von #120
 * hat unten einen dunkelblauen Balken; gegen den blauen Slide gemessen
 * 1,04:1 - die Kante verschwand, nur der rote Schein deutete sie an.
 * outline folgt der Rundung und nimmt keinen Platz.
 */
.ecx-hero__slide:not(.ecx-hero__slide--c) .ecx-hero__kachel--still {
  outline: 1px solid rgba(255,255,255,.28);
  outline-offset: 0;
}
/*
 * contain: der quadratische Rahmen schnitt aus Beitragsbildern im
 * Breitformat oben und unten heraus. Der schwarze Grund der Kachel
 * traegt die Streifen. Siehe events-seite.css, dort steht die
 * ausfuehrliche Begruendung.
 */
.ecx-hero__kachel img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1;
  object-fit: contain;
}

.ecx-hero__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
  transition: transform var(--dur) var(--ease);
}
.ecx-hero__kachel:hover .ecx-hero__play { transform: translate(-50%, -50%) scale(1.06); }
.ecx-hero__play svg { width: 20px; height: 20px; fill: var(--ec-red); transform: translateX(2px); }

/* ---- Terminkarte ---- */
.ecx-hero__termin {
  background: #fff;
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  max-width: 300px;
  width: 100%;
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px rgba(14,34,55,.1);
  position: relative;
  z-index: 1;
}
.ecx-hero__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ec-red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.ecx-hero__live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ec-red);
  animation: ecx-puls 1.6s var(--ease) infinite;
}
@keyframes ecx-puls {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}
.ecx-hero__termin-datum {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ec-blue);
  line-height: 1.1;
  margin-bottom: 8px;
}
.ecx-hero__termin-zeit {
  font-size: 16px;
  font-weight: 600;
  color: var(--ec-blue);
  margin-bottom: 16px;
}
.ecx-hero__termin ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ecx-hero__termin li { display: flex; gap: 8px; align-items: flex-start; }
.ecx-hero__termin-ico { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* ---- Striche zur Slide-Anzeige ---- */
.ecx-hero__punkte {
  position: absolute;
  right: 32px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  gap: 8px;
  align-items: center;
}
/*
 * Optisch ein 4px-Strich, im Tastbereich aber 44px hoch: die Flaeche liegt
 * als Pseudoelement darueber. So bleibt die Gestaltung fein und der Punkt
 * trotzdem bedienbar - Responsive-Regeln, Abschnitt Bedienbarkeit.
 */
.ecx-hero__punkt {
  position: relative;
  height: 4px;
  width: 28px;
  border-radius: 2px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(255,255,255,.35);
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.ecx-hero__punkt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}
/* Grund festhalten, sonst wird der Strich beim Ueberfahren anthrazit:
   das GeneratePress-Inline-CSS setzt button:hover { background:
   rgb(63,64,71) } auf 0,1,1 und schlaegt die Regel oben (0,1,0).
   Siehe 10-base.css. Die Varianten darunter liegen auf 0,2,0 und
   gewinnen ueber die Ladereihenfolge. */
.ecx-hero__punkt:hover { background: rgba(255,255,255,.35); }

.ecx-hero__punkt.ecx-is-active { background: #fff; width: 56px; }

.ecx-hero__slide--c ~ .ecx-hero__punkte .ecx-hero__punkt,
.ecx-hero__slide--c ~ .ecx-hero__punkte .ecx-hero__punkt:hover { background: rgba(29,66,103,.25); }

/* Auf hellen Slides sind die Striche dunkel. Die Klasse setzt das JavaScript. */
.ecx-hero.ecx-hero--hell .ecx-hero__punkt,
.ecx-hero.ecx-hero--hell .ecx-hero__punkt:hover { background: rgba(29,66,103,.25); }
.ecx-hero.ecx-hero--hell .ecx-hero__punkt.ecx-is-active { background: var(--ec-red); }

/* ============================================
   Unter 900: einspaltig, Bild oben, Text darunter
   ============================================ */
@media (max-width: 899px) {
  .ecx-hero__container {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 20px 56px;
  }
  /*
   * Einspaltig gehoert die Kachel in die Mitte. Der Entwurf hat hier
   * flex-start stehen - das stammt aus der zweispaltigen Ansicht und ist
   * fuer eine Spalte falsch.
   * Die Kachel behaelt ihre Maximalbreite: sie ist quadratisch und wuerde
   * auf volle Breite gezogen zu hoch.
   * Die Terminkarte bleibt unberuehrt, sie laeuft weiter ueber die volle
   * Breite (max-width: none unten).
   */
  .ecx-hero__visual { justify-content: center; }
  .ecx-hero__kachel { max-width: 220px; }

  /* Auf schmalen Schirmen faellt der Schein kleiner aus - 70px Streuung
     wirken auf 375px wie ein roter Nebel ueber der halben Breite. */
  .ecx-hero__kachel {
    box-shadow:
      0 14px 32px rgba(234,53,93,.55),
      0 6px 16px rgba(234,53,93,.42),
      0 3px 8px rgba(0,0,0,.28);
  }
  .ecx-hero__termin { max-width: none; }

  /*
   * Linienbild schmal.
   *
   * Die Deckkraft muss je Variante dastehen. Eine allgemeine Regel
   * erreicht sie nicht: jede Variante setzt ihre eigene, und
   * ".ecx-hero__slide--x .ecx-hero__lines" wiegt schwerer als
   * ".ecx-hero__lines". Hier stand frueher ein "opacity: .3" mit in der
   * Zeile darunter - es hat nie gegriffen, fuer keine der drei Varianten.
   * Deshalb ist es raus, damit es nicht ein zweites Mal jemanden glauben
   * laesst, das Abdunkeln sei erledigt.
   *
   * Genau daran lag der Fehler bei c: dort blieb die .85 der
   * Desktop-Regel stehen, und das Bild lag auf dem Handy mit voller
   * Deckkraft hinter Eyebrow und Ueberschrift. Zweispaltig faellt das
   * nicht auf, weil es dort links NEBEN dem Text liegt, hinter der
   * Terminkarte.
   *
   * a und b bleiben unveraendert: dunkle Slides, weisse Schrift,
   * mix-blend-mode screen - dort liest sich das Bild als feine Textur.
   * c ist hell mit dunkler Schrift und ohne Blendmodus, hier muss die
   * Deckkraft deutlich herunter.
   *
   * Verschoben wird nichts. Einspaltig gibt es keine freie Flaeche:
   * zwischen Karte (endet bei 201) und Text (beginnt bei 269) liegen
   * 68px, und die Karte ist fast so breit wie der Schirm. Nach oben
   * gezogen verschwindet das Bild dahinter, nach unten liegt es auf den
   * Knoepfen. Eine senkrechte Prozentangabe kippt ausserdem ihr
   * Vorzeichen, sobald das Bild hoeher als der Slide ist - bei 640 und
   * 899 landete es dadurch wieder mitten im Text.
   */
  .ecx-hero__lines { background-size: 90% auto; }
  .ecx-hero__slide--c .ecx-hero__lines {
    background-size: 70% auto;
    opacity: .3;
  }

  .ecx-hero__punkte { right: 20px; bottom: 16px; }
}

/*
 * BILD-SLIDE (PODCAST) UNTER 900: Kachel links, Text rechts daneben.
 *
 * Isa: "Cover links oder alles zentriert" - vorher stand das Cover
 * mittig ueber linksbuendigem Text. Neben dem Text bleibt die Kachel
 * klein; Eyebrow und Titel stehen rechts davon, Text und Knopf laufen
 * darunter ueber die volle Breite. Das geht ueber display: contents
 * am Textblock - so koennen seine Teile im Raster des Containers
 * stehen, ohne dass sich das Markup aendert.
 *
 * Der Termin-Slide bleibt, wie er ist: Karte ueber dem Text.
 */
@media (max-width: 899px) {
  .ecx-hero__container--bild {
    grid-template-columns: 160px minmax(0, 1fr);
    grid-template-areas:
      "bild eyebrow"
      "bild titel"
      "lead lead"
      "cta  cta";
    /*
     * auto und nicht 1fr: der Container ist so hoch wie der hoechste
     * Slide (alle liegen uebereinander), 1fr verteilte diesen Ueberschuss
     * auf die Zeilen neben der Kachel - Eyebrow und Titel rutschten unter
     * sie. So waechst nur, was die Kachel braucht, und zwar gleichmaessig
     * auf beide Zeilen: Eyebrow unten in der ersten, Titel oben in der
     * zweiten, zusammen mittig. align-content haelt alles beisammen.
     */
    grid-template-rows: auto auto auto auto;
    align-content: center;
    column-gap: 20px; row-gap: 10px;
    align-items: start;
  }
  .ecx-hero__container--bild .ecx-hero__visual { grid-area: bild; justify-content: flex-start; }
  .ecx-hero__container--bild .ecx-hero__kachel { max-width: none; }
  .ecx-hero__container--bild .ecx-hero__text { display: contents; }
  .ecx-hero__container--bild .ecx-hero__eyebrow { grid-area: eyebrow; align-self: end; }
  .ecx-hero__container--bild .ecx-hero__titel { grid-area: titel; }
  .ecx-hero__container--bild .ecx-hero__lead { grid-area: lead; margin-top: 8px; }
  .ecx-hero__container--bild .ecx-hero__cta { grid-area: cta; margin-top: 4px; }
  /* Mit Zusatz belegt der Textblock den Bereich "lead". */
  .ecx-hero__container--bild .ecx-hero__textblock { grid-area: lead; margin-top: 8px; }
  .ecx-hero__container--bild .ecx-hero__textblock .ecx-hero__lead { margin-top: 0; }
}

@media (max-width: 640px) {
  .ecx-hero__container { padding: 24px 18px 52px; }

  .ecx-hero__container--bild { grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; }

  /*
   * NUR "ZUR FOLGE". Der zweite Knopf ("Alle Episoden") entfaellt auf
   * dem Handy - Isa: ein Knopf reicht dort. Nur beim Bild-Slide: beim
   * Termin ist der zweite Knopf der Weg zur Detailseite.
   */
  .ecx-hero__container--bild .ecx-hero__cta .ecx-btn + .ecx-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ecx-hero__slide,
  .ecx-hero__punkt,
  .ecx-hero__kachel { transition-duration: 0s; }
  .ecx-hero__live::before { animation: none; }
}