/* T-002: Übersicht /veranstaltungen/ – auf dem Handy sind Angebot und die
   erste Webinar-Karte ohne Scrollen sichtbar, oberhalb des Cookie-Banners.
   Nur diese Seite bindet diese Datei ein (extraCss in index.njk), deshalb
   dürfen hier generische Selektoren (.pagehead, .band, .ecard, …) ohne
   Rücksicht auf andere Seiten verschärft werden. */

/* Karten-Reihenfolge: unsichtbar bis das Shuffle-Skript sie einsortiert hat
   (kein sichtbarer Sprung nach dem ersten Rendern). visibility statt
   opacity, damit das bestehende .reveal-Fade-In (exsos.css) unangetastet
   bleibt. Ohne JavaScript hebt das <noscript>-Stylesheet neben der Liste
   die Regel wieder auf – dann bleibt die serverseitig gebaute Reihenfolge
   sichtbar. */
.events[data-shuffle] { visibility: hidden; }
.events[data-shuffle].is-shuffled { visibility: visible; }

/* T-012: kompakte Kennzahlen im Kopfbereich – nur auf dem Handy (s. u.). */
.veranst-trustline { display: none; }

/* T-004: Vertrauensleiste (partials/trust-bar.njk) – exsos-event.css ist auf
   dieser Seite nicht eingebunden, deshalb fehlt die .lp-operator-note-Regel
   von dort. Werte identisch zur Vorlage in exsos-event.css. */
.lp-operator-note {
  max-width: 62ch;
  margin: 1.5rem auto 0;
  text-align: center;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.55;
}

/* T-004: Der Beratungs-Block unter den Listen tritt zurück – die
   Webinar-Auswahl oben bleibt das Hauptziel der Seite. */
.pcta--secondary { padding: clamp(1.8rem,3.4vw,2.6rem) 0; }
.pcta--secondary h2 { font-size: clamp(1.15rem,2vw,1.4rem); }
.pcta--secondary p { font-size: .95rem; margin: .6rem auto 1.1rem; }
.pcta--secondary .btn { padding: .7rem 1.4rem; font-size: .92rem; }

/* T-003: Karteninhalte, die eine Webinar-Karte von den anderen unterscheiden
   (Bild, Für-wen-Zeile, Kernfragen, Referent) – helfen bei der Themenwahl. */
.ecard__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: .5rem;
  margin-bottom: .8rem;
}
.ecard__fuerwen {
  font-size: .92rem;
  color: var(--muted);
  margin: 0 0 .7rem;
}
.ecard__fuerwen strong { color: inherit; }
.ecard__questions {
  margin: 0 0 .8rem;
  padding-left: 1.1rem;
  font-size: .88rem;
  color: var(--ink, #222);
  line-height: 1.4;
}
.ecard__questions li { margin-bottom: .25rem; }
/* T-012: Kernfragen im <details> – ab Tablet-Breite per Skript offen. */
.ecard__more { margin: 0 0 .8rem; }
.ecard__more summary {
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: .4rem;
}
.ecard__more[open] .ecard__questions { margin-bottom: 0; }
.ecard__host {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .9rem;
  margin: 0 0 .8rem;
}
.ecard__host-person {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.ecard__host-photo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.ecard__host-name { font-size: .88rem; font-weight: 600; }

/* T-017 (Variante B aus T-014): Die nächsten Termine stehen als Chips direkt
   über dem Button – Wahl und Handlung liegen zusammen, der nächste Termin ist
   hervorgehoben. Übernommen aus css-new/veranstaltungen-entwurf.css (T-014).
   Nur Tokens aus exsos-tokens.css, keine Hex-Werte, keine Versalien. */
.echips {
  background: var(--green-soft);
  border-radius: .6rem;
  padding: .75rem .85rem .85rem;
}
.echips__label {
  margin: 0 0 .55rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--forest);
}
.echips__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr));
  gap: .5rem;
}
.echip {
  display: block;
  /* 44px: Mindestgröße für eine Tippfläche auf dem Handy. */
  min-height: 44px;
  text-align: center;
  background: var(--surface);
  color: var(--forest);
  border: 1.5px solid var(--green);
  border-radius: .6rem;
  padding: .45rem .25rem;
  line-height: 1.25;
  text-decoration: none;
}
.echip:hover { background: var(--forest-soft); }
.echip__wd { font-weight: 700; margin-right: .3em; }
.echip__date { font-weight: 700; }
.echip__time { display: block; font-size: .88rem; }
/* Der nächste Termin führt visuell. */
.echip--next {
  background: var(--forest);
  color: var(--surface);
  border-color: var(--forest);
}
.echip--next:hover { background: var(--forest); }
/* Der Button steht in voller Breite unter den Chips (Entwurf B); ab
   Tablet-Breite bleibt er wie bisher linksbündig in seiner Eigenbreite. */
.ecard .echips + .btn { align-self: stretch; }

@media (min-width: 901px) {
  .ecard .echips + .btn { align-self: flex-start; }
}

@media (max-width: 900px) {
  .pagehead { padding: 1.1rem 0 1.3rem; }
  .pagehead .eyebrow { margin-bottom: .3rem; }
  .pagehead h1 { font-size: 1.55rem; line-height: 1.15; }
  .pagehead p { font-size: .92rem; margin: .5rem 0 0; line-height: 1.4; }

  .band { padding: 1.1rem 0 1.6rem; }
  .row-head { margin-bottom: .4rem; }
  .row-head h2 { font-size: 1.15rem; }

  .section-intro { display: none; }
  .pagehead .eyebrow { display: none; }

  /* T-012: Kennzahlen als 2×2-Raster unter dem Einleitungssatz. */
  .veranst-trustline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .15rem .8rem;
    list-style: none;
    margin: .7rem 0 0;
    padding: 0;
    font-size: .74rem;
    line-height: 1.3;
    opacity: .9;
  }
  .veranst-trustline strong { font-weight: 700; }

  .events { gap: .8rem; }
  /* T-012: .ecard ist ein Flex-Stapel mit 16px gap (exsos.css) – bei mehr
     Kindelementen summiert sich das. Hier tragen die eigenen Außenabstände. */
  .ecard { padding: 1.1rem; gap: .2rem; }
  .ecard__badge { font-size: .68rem; margin-bottom: .4rem; }
  .ecard__title { font-size: 1rem; line-height: 1.2; margin: .3rem 0 .5rem; }
  .ecard__meta { gap: .4rem; font-size: .82rem; margin-bottom: .6rem; }
  .ecard__meta svg { width: 15px; height: 15px; }
  .ecard .btn { margin-top: 0; padding: .6rem 1.1rem; font-size: .88rem; }

  /* T-017: .ecard trägt auf dem Handy nur .2rem gap, die Blöcke bringen ihre
     Abstände selbst mit. Die Chips sind die Entscheidungshilfe für den Klick
     und bleiben sichtbar – anders als Bild und Referent (s. u.). */
  .echips { padding: .6rem .7rem .7rem; }
  .echips__label { font-size: .85rem; margin-bottom: .45rem; }
  .echips__list { grid-template-columns: repeat(auto-fit, minmax(4.8rem, 1fr)); gap: .4rem; }
  .echip { padding: .4rem .2rem; font-size: .85rem; }
  .echip__time { font-size: .8rem; }
  .ecard .echips + .btn { margin-top: .5rem; }

  /* T-003/T-012: Bild und Referent würden die erste Karte auf dem Handy so
     weit strecken, dass Titel und Button unter den Cookie-Banner rutschen
     (T-002-Vorgabe) – sie bleiben hier aus. Die Für-wen-Zeile ist die
     eigentliche Entscheidungshilfe und bleibt sichtbar; die Kernfragen sind
     zugeklappt erreichbar (.ecard__more). */
  .ecard__img,
  .ecard__host { display: none; }
  /* T-012: Platz für die Für-wen-Zeile. „Online“ steht schon im Badge, und
     „jede Woche“ sagen die Termine selbst – Plattformzeile und Überschrift
     der Webinar-Sektion entfallen auf dem Handy. */
  .ecard__meta .ecard__meta-platform { display: none; }
  .band--webinare { padding-top: .9rem; }
  .band--webinare .row-head { display: none; }
  .ecard__fuerwen { font-size: .8rem; line-height: 1.35; margin: 0 0 .45rem; }
  .ecard__more { margin: 0 0 .5rem; }
  .ecard__more summary { font-size: .8rem; margin-bottom: 0; }
  .ecard__more[open] summary { margin-bottom: .35rem; }
  .ecard__questions { font-size: .8rem; }

  /* T-004: Die Vertrauensleiste (4 Kennzahlen, ab 560px einspaltig gestapelt)
     würde die erste Karte auf dem Handy zusätzlich unter den Cookie-Banner
     drücken (T-002-Vorgabe) – deshalb auf dieser Breite verborgen. Das Inline-
     style="padding:…" der Bar gewinnt gegen eine bloße .band-Anpassung
     (gleiche Spezifität, externe Regel verliert gegen Inline-Style), display:
     none umgeht das. */
  .veranst-trustbar { display: none; }
}