/* ============================================================
   /veranstaltungen/ - am Original nachgemessen
   ============================================================
   (/opt/tooling/news1.mjs + /opt/tooling/ver1.mjs, Viewport 1440)

     Einleitung   810px breite Spalte, zentriert, h1 bei y=197,
                  21px Abstand zum Absatz (3 Zeilen)
     Karten       x=216, 1008px breit, weiss, Radius 27px, 74px untereinander,
                  erste Karte bei y=398
     Kartenteile  Textspalte 639px | Bildspalte 369px (Bild formatfuellend)
                  Kopf   Innenabstand 39/39/29, 29px zwischen Titel- und
                         Metagruppe, 12px innerhalb der Gruppen
                  Rumpf  Innenabstand 0/39, 23px Abstand
                  Termine Innenabstand 74/39/39, Plaketten 9px Radius,
                         12px Innenabstand, 23px Abstand

   Vorher: keine Kartenflaeche, Textspalte ueber die volle Containerbreite,
   Termin-/Ortsangaben als eigene Chip-Erfindung statt Symbolzeilen. */

/* Saemtlicher Text dieser Seite laeuft im Original in POPPINS (per
   getComputedStyle nachgemessen: Einleitung, Karten-Eyebrows, Meta-Zeilen,
   Fliesstext, Flyer-Knoepfe, Termin-Plaketten - alles Poppins, nichts
   Inter). Unser Inter lief schmaler, brach spaeter um und liess die Seite
   25px kuerzer werden - jede Zeile darunter stand im Differenzbild rot.
   Font-family erbt, daher genuegt der Sektions-Scope. */
.section--veranst-intro, .section--events { font-family: var(--font-heading); }

.section--veranst-intro { padding-top: 123px; padding-bottom: 0; }
.section--veranst-intro > .container { max-width: 810px; padding: 0; }
.section--veranst-intro h1 { margin: 0 0 21px; }
.section--veranst-intro .section-intro {
  margin: 0; max-width: none;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* Unten 122px statt sitewide 96px: im Original liegen zwischen letzter
   Karte (Ende 8737) und Footer 26px mehr als bei uns - ohne das stand der
   gesamte Footer 25px zu hoch (letzte Baender im Differenzbild rot). */
.section--events { padding-top: 74px; padding-bottom: 122px; }
.section--events > .container { max-width: 1200px; padding: 0 96px; }

.event-card {
  display: flex; align-items: stretch;
  background: #fff; border-radius: 27px; overflow: hidden;
  /* Gleiche Schattengeometrie wie Kopfzeile und Kontaktkarten des Originals
     (0 0 47px). Der computed value stand beim Messen auf Alpha 0, im
     gerenderten Bild ist der Schatten aber sichtbar - uebernommen wird
     deshalb der an der Kopfzeile gemessene Alphawert .23. */
  box-shadow: 0 0 47px rgba(0, 0, 0, .23);
  /* Hover-Anhebung wie die Startseiten-Karten. */
  transition: transform var(--duration-hover) var(--ease-smooth),
              box-shadow var(--duration-hover) var(--ease-smooth);
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .20);
}
.event-card + .event-card { margin-top: 74px; }

.event-card__text { flex: 0 0 639px; max-width: 639px; display: flex; flex-direction: column; }
.event-card__head { display: flex; flex-direction: column; gap: 29px; padding: 39px 39px 29px; }
.event-card__titles { display: flex; flex-direction: column; gap: 12px; }
.event-card__eyebrow {
  margin: 0; font-size: var(--fs-body); line-height: var(--lh-body);
  font-weight: var(--fw-bold);
  /* Original: rgb(201,201,201) - auf Weiss nur 1,6:1 und damit weit unter
     WCAG AA. Wie im Projekt etabliert die nachgedunkelte Variante. */
  color: var(--color-text-faint);
}
.event-card__titles h2 { margin: 0; }

.event-card__meta { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.event-card__meta li {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-bold);
  color: var(--color-text-muted);
}
.event-card__meta svg { flex: 0 0 auto; }

/* Abstand im Rumpf 22.5px (eine Leerzeile), nicht 23: das Original setzt
   Vorspann, Flyer-Knopf und Schlussabsatz als EINEN Textfluss mit
   Leerzeilen (Lauf 5 @1440: Online-Seminar-Terminblock bei 604.5, mit 23px
   waren wir 0.5px drueber und die Rundung wanderte als +1..+3px-Kette durch
   die untere Seitenhaelfte). */
.event-card__body { display: flex; flex-direction: column; gap: 22.5px; padding: 0 39px; }
.event-card__body p { margin: 0; }
.event-card__flyer {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  background: #fff; border-radius: 9px; padding: 12px;
  box-shadow: 0 0 47px rgba(0, 0, 0, .23);
  /* Lauf 7: jetzt ein echter Download-Link (Original: cursor pointer,
     Klick laedt das PDF); Link-Defaults neutralisieren. */
  cursor: pointer; text-decoration: none;
}

.event-card__sessions { padding: 74px 39px 39px; }
.event-card__sessions ul { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 23px; margin: 0; }
.event-chip {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  background: #fff; border-radius: 9px; padding: 12px;
  /* Ruhezustand am Original (@390, Vergleichslauf 2026-07-24): feiner Rahmen,
     KEIN Dauerglow - der 47px-Glow ist die Hover-Sprache der Pills. */
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: box-shadow var(--duration-hover) var(--ease-smooth);
}
.event-chip:hover { box-shadow: 0 0 47px rgba(0, 0, 0, .23); }
.event-chip__row { display: flex; align-items: center; gap: 9px; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-bold); }
/* Zweitzeilen der Session-Chips (Ort/Uhrzeit): das Original setzt sie als
   Bildunterschrift-Stufe 12/400/18 (getComputedStyle: "Muenchen"/"Bonn"/"Berlin"
   = 12px, fw400), nicht wie die Datumszeile in 15/700. */
.event-chip__row--sm { gap: 6px; font-size: var(--fs-micro); font-weight: var(--fw-regular); line-height: 18px; }
.event-chip svg { flex: 0 0 auto; }

.event-card__media { flex: 1 1 auto; min-width: 0; position: relative; overflow: hidden; }
/* Beide Ebenen absolut: die Karte bekommt ihre Hoehe aus dem Text, nicht
   aus dem Flyer. Der Flyer fuellt die Spalte formatfuellend (cover) - so
   entstehen die im Original gemessenen Kartenhoehen statt der (viel
   hoeheren) Flyer-Eigenhoehe. */
.event-card__media-bg,
.event-card__media-fg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Fuellebene: cover ohne CSS-Blur/-Zoom (Original: filter:none,
   transform:none). Die Weichheit des Originals kommt daher, dass dort fuer
   diese Ebene dauerhaft der winzige Framer-Platzhalter (32px) hochskaliert
   bleibt - wir laden dafuer die ph-*-Dateien (siehe Template). Zwischen
   Fuell- und Motivebene liegt im Original ein rgba(0,0,0,.09)-Scrim; fuer
   opake Pixel identisch zu brightness(.91) auf der Fuellebene. */
.event-card__media-bg { object-fit: cover; filter: brightness(.91); }
/* Bildausschnitt der Fuellebene je Karte (Original: object-position pro
   Karte individuell gesetzt, per getComputedStyle ausgelesen; wo 50% 50%,
   greift der Standard). Reihenfolge = Kartenreihenfolge in
   web/data/veranstaltungen.json. */
.event-card:nth-of-type(2)  .event-card__media-bg { object-position: 74% 100%; }
.event-card:nth-of-type(3)  .event-card__media-bg { object-position: 50% 98%; }
.event-card:nth-of-type(4)  .event-card__media-bg { object-position: 33% 51%; }
.event-card:nth-of-type(5)  .event-card__media-bg { object-position: 74% 100%; }
.event-card:nth-of-type(6)  .event-card__media-bg { object-position: 50% 39%; }
.event-card:nth-of-type(7)  .event-card__media-bg { object-position: 50% 0%; }
.event-card:nth-of-type(9)  .event-card__media-bg { object-position: 50% 100%; }
.event-card:nth-of-type(10) .event-card__media-bg { object-position: 8.5% 5.7%; }
/* Harte Zeilenumbrueche innerhalb eines Absatzes (z.B. die Moderatoren-
   Liste der Muenchner Runde) stehen in den Daten als \n - das Original
   rendert sie als eigene Zeilen. pre-WRAP statt pre-line: das Original
   erhaelt auch MEHRFACH-Leerzeichen (Muenchner Runde "Expertenforum  zur",
   WaX "eroeffnen.  Nach", Kick-Off-Absatz beginnt mit Leerzeichen) - mit
   pre-line kollabierten sie und ganze Zeilen brachen anders um (Lauf 5). */
.event-card__body p { white-space: pre-wrap; }
.event-card__media-fg { z-index: 1; object-fit: contain; }

@media (max-width: 1199px) {
  .section--events > .container { max-width: var(--container-max); padding: 0 var(--container-pad); }
  .section--veranst-intro > .container { max-width: 810px; padding: 0 var(--container-pad); }
  .event-card__text { flex: 1 1 auto; max-width: none; }
  /* Original @<=1199: Titel linksbuendig ueber die volle Spaltenbreite
     (getComputedStyle: h1 ta=left, x=23, w=1153) - nicht zentriert. */
  .section--veranst-intro h1 { text-align: left; }
}
@media (max-width: 809px) {
  /* Kopfabstand wie sitewide auf Mobil: Titel auf y=150 (74px feste
     Kopfzeile + 76px), nicht 138 (64px). */
  .section--veranst-intro { padding-top: 76px; }
  /* Original @390: erste Karte 51px unter dem Einleitungsabsatz (nicht 74px);
     die Eyebrow-Zeile der ersten Karte sitzt so auf y~469. Unten sind es im
     Original 165px bis zum Footer, mit den sitewide 122px standen wir 26px
     drueber (Lauf 5: Kartenende 13404, Footer 13569). */
  .section--events { padding-top: 51px; padding-bottom: 96px; }
  /* Original @390 UND @768: die Karten laufen RANDLOS ueber die volle
     Viewport-Breite (x=0), ohne Eckenrundung, mit 23px Innenpolster; das
     Motiv liegt full-bleed mit fester Medienhoehe 369px (nicht aus dem Text
     abgeleitet). Vorher: 23px Seitenrand + gerundete 344px-Karte + 420px
     Medienbox - jede Karte 51px zu hoch und der Text 39px zu weit rechts. */
  .section--events > .container { max-width: none; padding: 0; }
  .event-card { flex-direction: column; border-radius: 0; }
  .event-card__head { padding: 39px 23px 29px; }
  .event-card__body { padding: 0 23px; }
  /* Lauf 6 @390: Nur die Naehte AM FLYER-KNOPF sind im Original 23px (Text ->
     Knopf 3459,2 -> 3482,2, Knopf -> Schlussabsatz 3529,2 -> 3552,2); reine
     Text-Naehte bleiben 22,5 (Karte ohne Flyer: Block 472,5 = 315+22,5+135).
     Steht der Flyer am Blockende (FlyerLast), traegt er unten KEINEN
     Aufschlag (Karte 1 schliesst mit 22,5-Raster). */
  .event-card__flyer { margin-top: 0.5px; }
  .event-card__flyer:not(:last-child) { margin-bottom: 0.5px; }
  /* Lauf 6 @390: Die Zeilen-Icons rendern im Original mit fester Breite und
     INTRINSISCHER Hoehe (Pin 20 -> 23,42, Euro 22 -> 23,45, Sanduhr 13 ->
     23,63); unsere ganzzahligen height-Attribute (23/24) stauchten jede
     Zeile um 0,4-0,6px - Hauptquelle der -6px-Kettendrift. height:auto
     greift bei Inline-SVG NICHT (faellt aufs Attribut zurueck), darum
     explizite Werte je Icon-Breite. Nur mobil: @1440 ist mit den
     Attributhoehen verifiziert (Lauf 5). */
  .event-card__meta svg[width="20"] { height: 23.42px; }
  .event-card__meta svg[width="22"] { height: 23.45px; }
  .event-card__meta svg[width="13"] { height: 23.63px; }
  /* Original @390 (Lauf 5): Terminblock oben 51px (nicht 74), unter den
     Plaketten insgesamt 62px bis zum Flyerbild (23px Blockpolster + 39px
     Spaltenabschluss); Plakettenabstand 27px statt der 23px des Desktops. */
  .event-card__sessions { padding: 51px 23px 62px; }
  .event-card__sessions ul { gap: 27px; }
  /* Kartenabstand @390 im Original 51px, nicht die 74px des Desktops
     (Lauf 5: Karte-1-Ende 1648, Karte-2-Beginn 1699). */
  .event-card + .event-card { margin-top: 51px; }
  /* Original @390: die Termin-Plaketten bleiben in EINER Zeile und laufen
     rechts aus dem Kartenrand (letzte Plakette bei x=501). Vorher umbrachen
     sie (flex-wrap) auf mehrere Reihen und machten jede Karte mit >2 Terminen
     bis zu 84px zu hoch - das verschob alle folgenden Karten samt Flyerbild. */
  .event-card__sessions ul { flex-wrap: nowrap; overflow-x: auto; }
  .event-card__media { height: 369px; flex: 0 0 369px; }
}

/* Der Vorspann ist im Original EIN Textblock: die Absaetze stehen mit genau
   einer Leerzeile (22,5px) untereinander, nicht mit dem 23px-Abstand des
   umgebenden Rumpfes. */
.event-card__lead { display: flex; flex-direction: column; gap: 22.5px; }
.event-card__lead p { margin: 0; }

/* Jede Termin-Plakette ist im Original ein Anmeldelink. Die Plaketten haben
   KEINE feste Breite, sondern richten sich nach der Datumszeile (gemessen:
   135/139/137px) - der Ort darunter bricht innerhalb dieser Breite um.
   width:min-content statt fit-content: im Original bestimmt die (nowrap-)
   Datumszeile die Plakettenbreite, laengere Ort-/Zusatztexte brechen darin
   um (Lauf 5: 4. Plakette der ersten Karte @390 im Original 116px breit,
   bei uns 133 - der Zusatztext lief eine Zeile kuerzer). */
.event-chip { padding: 0; }
/* Innen 11px + 1px Rahmen = 12px Textabstand wie im Original; vorher
   12px + Rahmen = Plaketten 2px hoeher/breiter als die gemessenen 47/74px
   (Lauf 5, orig @1440: Einzeiler 47px, Zweizeiler 74px AUSSENmass). */
.event-chip__link {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 11px; color: inherit; overflow-wrap: normal;
  width: min-content; max-width: 160px;
}
/* Plaketten OHNE Anmeldelink (z.B. AufStand, FAS-Webinare, Workshops):
   ihnen fehlte das Innenpolster komplett - jede solche Plakette war 22px
   niedriger/schmaler als im Original und schob ab dort die ganze Karte
   zusammen (Lauf 5: orig 47px vs. uns 25px @390). */
.event-chip:not(:has(.event-chip__link)) { padding: 11px; width: min-content; }
.event-chip__row { white-space: nowrap; }
/* Der umbrechende Ort/Zeit-Text ist im Original linksbuendig gesetzt
   (getComputedStyle: ta=left, mehrzeilig innerhalb der Plakettenbreite) -
   nicht zentriert. Die Plakette selbst bleibt via align-items:center mittig. */
.event-chip__row--sm { white-space: normal; text-align: left; }
/* Original: der Ort-/Zusatztext bricht NOTFALLS mitten im Wort (gemessen an
   "Registrierung", 4. Plakette Karte 1: Textspalte 64px, Umbruch "Registrieru/
   ng") - nur so bleibt die Datumszeile alleinige Breitengeberin der Plakette
   (116px statt 133). min-width:0 laesst die Textspalte unter die Wortbreite
   schrumpfen. */
.event-chip__row--sm > span:last-child { word-break: break-word; min-width: 0; }

/* Seitenrand unterhalb 1200px: 23px statt der sitewide 39px (am Original
   gemessen, /opt/tooling/cpad.mjs). */
/* Auf `main` statt auf `.container`: der Seitenrand wird auf dieser Seite
   teils an anderen Elementen (z.B. .fas-sec) angewendet - so erben ihn alle. */
@media (max-width: 1199px) { main { --container-pad: 23px; } }


/* Termin-Datum: Desktop vierstellige Jahreszahl, mobil zweistellig
   (am Original nachgemessen @1440/@390, Vergleichslauf 2026-07-24). */
.chip-date-kurz { display: none; }
@media (max-width: 1199px) {
  .chip-date-lang { display: none; }
  .chip-date-kurz { display: inline; }
}