/* ============================================
   ECX 40 - Partnerseite

   Ein Stylesheet fuer alle Partnerseiten. Die Sektionen tragen das
   Praefix .ecx-pt-, damit sie sich nicht mit .ecx-partner der
   Partner-Sektion auf der Startseite ueberschneiden.

   MITGENUTZT: Terminliste und Medienkarten kommen aus events.css und
   events-seite.css, beide werden auf dieser Seite mitgeladen. Hier steht
   nur, was die Partnerseite eigenes hat.
   ============================================ */

/* ---- Gemeinsames ---- */

.ecx-pt-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ec-red);
}

/*
 * Sektionskopf: Ueberschrift links, Weiterfuehrung rechts. Bei Events
 * und Mediathek derselbe Aufbau wie auf der Startseite.
 */
.ecx-pt-kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 22px;
}
.ecx-pt-kopf__titel {
  font-size: var(--t-h2); color: var(--ink);
  margin: 6px 0 0; line-height: 1.15;
}

/*
 * WEITERFUEHRUNG ALS TEXTLINK, seit 06.10.2026.
 *
 * "Zur DGE-BV-Website", "Zur DEGEA Website" -
 * in Isas Vorlage rote Links mit Pfeil, keine Knoepfe. Vorher standen
 * hier ein Zweitknopf (Ziele) und ein roter Knopf (Schluss).
 *
 * 44px Mindesthoehe ueber das Polster, siehe Responsive-Regeln.
 * Farbe fuer :hover wiederholt, sonst gewinnt das fremde a:hover
 * (docs/DECISIONS.md Punkt 18).
 */
.ecx-pt-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 0;
  color: var(--ec-red); font-weight: 600; font-size: var(--t-sm);
  text-decoration: none;
}
.ecx-pt-link:hover,
.ecx-pt-link:focus { color: var(--ec-red-700); }
.ecx-pt-link .ecx-icon {
  width: 16px; height: 16px;
  transition: transform var(--dur) var(--ease);
}
.ecx-pt-link:hover .ecx-icon { transform: translateX(4px); }

/* ---- Sektion 1: Hero ---- */

.ecx-pt-hero {
  position: relative; overflow: hidden;
  background: #f0f2f6; color: var(--ink);
}

/* Linienbild rechts, gross und mit voller Deckkraft (Vorgabe Grafikerin). */
.ecx-pt-hero__lines {
  position: absolute;
  right: -8%; top: -10%;
  width: 38%; height: 130%;
  background: url('../../img/linien.png') center/contain no-repeat;
  opacity: 1;
  pointer-events: none;
}

.ecx-pt-hero__container {
  position: relative; z-index: 1;
  padding-top: 48px; padding-bottom: 48px;
  display: grid; grid-template-columns: 2fr 1fr; gap: 56px;
  align-items: center;
}

.ecx-pt-hero__text {
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}

/*
 * DER NAME DER FACHGESELLSCHAFT, zweizeilig wie in der Vorlage. Dort
 * steht ein festes <br>; hier bricht die Breitengrenze um, damit es
 * auch bei DEGEA und einer weiteren Partnerseite ohne Eingriff in den
 * Text klappt. 30em sind bei 12px Versalien rund 37 Zeichen:
 * "Deutsche Gesellschaft fuer Endoskopie / und Bildgebende Verfahren
 * e.V." - genau der Umbruch der Vorlage. balance verteilt den Rest.
 */
.ecx-pt-hero__eyebrow {
  display: block; max-width: 30em;
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .14em;
  line-height: 1.5; text-transform: uppercase; color: var(--ec-red);
  text-wrap: balance;
}

/*
 * font-size und color ausdruecklich: style.css faerbt und skaliert
 * Ueberschriften site-weit. Dunkelblau und die Groesse aus der Vorlage.
 */
.ecx-pt-hero .ecx-pt-hero__titel {
  font-size: clamp(28px, 3vw, 42px); color: var(--ec-blue);
  margin: 0; line-height: 1.15; letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.ecx-pt-hero__lead {
  font-size: var(--t-body); color: var(--ink-2);
  margin: 0; line-height: 1.6;
}

.ecx-pt-hero__medium {
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-2); background: #fff;
}
.ecx-pt-hero__medium img { display: block; width: 100%; height: auto; }

/*
 * Ohne Bild - derzeit bei beiden Seiten - bleibt die rechte Spalte
 * leer und gehoert der Liniengrafik. Der Text steht damit auf zwei
 * Dritteln, wie in der Vorlage und wie im Hero der Events-Seite.
 */
.ecx-pt-hero__container--nurtext { grid-template-columns: minmax(0, 2fr) 1fr; }

/* ---- Sektion 2: Ziele ---- */

/*
 * FARBWECHSEL DER SEKTIONEN, nach der Vorlage
 *
 *   Hero          #f0f2f6
 *   Ziele         weiss
 *   Kennzahlen    --bg     hell grau, weisse Karten darauf
 *   Termine       weiss
 *   Mediathek     --bg
 *   Schluss       --ec-blue-50, siehe dort
 */
.ecx-pt-values { padding: 64px 0; background: var(--surface); }

/*
 * Kopf: Text links, Logo rechts auf gleicher Hoehe. Ohne Logo eine
 * Spalte; der Text behaelt seine Zeilenlaenge ueber max-width.
 */
.ecx-pt-values__kopf {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 56px; align-items: start;
  margin-bottom: 36px;
}
.ecx-pt-values__kopf--ohne-logo { grid-template-columns: minmax(0, 1fr); }

.ecx-pt-values__intro {
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  max-width: 62ch;
}

.ecx-pt-values .ecx-pt-values__titel {
  font-size: var(--t-h2); color: var(--ink);
  margin: 0; line-height: 1.15; letter-spacing: -0.01em;
}
.ecx-pt-values__text { font-size: var(--t-body); color: var(--ink-2); margin: 0; line-height: 1.6; }

/* Logo: Masse aus der Vorlage, hoechstens 240 x 60. */
.ecx-pt-values__logo { justify-self: end; }
.ecx-pt-values__logo img {
  display: block; width: auto; height: auto;
  max-width: 240px; max-height: 60px;
}

/* Vier Karten in einer Reihe. Die Nummern kommen aus der Reihenfolge. */
.ecx-pt-values__liste {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}

.ecx-pt-value {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px 22px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ecx-pt-value:hover { border-color: #c8d3e0; box-shadow: var(--shadow-1); }

/* Rotes Quadrat mit abgerundeten Ecken, weisse Ziffer. */
.ecx-pt-value__nummer {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--ec-red); color: #fff;
  font-size: 14px; font-weight: 700;
}

.ecx-pt-value .ecx-pt-value__titel {
  font-size: 15px; font-weight: 700; color: var(--ec-blue);
  margin: 0; line-height: 1.35; letter-spacing: -0.005em;
}
.ecx-pt-value__text { font-size: 13px; color: var(--ink-3); margin: 0; line-height: 1.55; }

/* ---- Sektion 3: Kennzahlen ---- */

.ecx-pt-stats { padding: 64px 0; background: var(--bg); }

.ecx-pt-stats__raster {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}

.ecx-pt-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 36px 28px;
}

/*
 * Symbol im hellen Quadrat. Rosa, das mittlere hellblau - so wechselt
 * es in der Vorlage.
 */
.ecx-pt-stat__symbol {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--ec-red-50); color: var(--ec-red);
  margin-bottom: 4px;
}
.ecx-pt-stat:nth-child(2) .ecx-pt-stat__symbol { background: var(--ec-blue-50); color: var(--ec-blue); }
.ecx-pt-stat__icon { width: 22px; height: 22px; }

.ecx-pt-stat__wert {
  font-size: clamp(40px, 4vw, 56px); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1; color: var(--ec-blue);
}
.ecx-pt-stat__label {
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  line-height: 1.45; max-width: 24ch;
}

/* ---- Sektion 4 und 5: Termine und Mediathek ---- */

.ecx-pt-events { padding: 64px 0; background: var(--surface); }
.ecx-pt-media { padding: 64px 0; background: var(--bg); }

/*
 * Drei Karten nebeneinander. Dasselbe Raster wie in der Mediathek der
 * Events-Seite, dort steht es auf minmax - hier sind es immer drei, die
 * Anzahl kommt aus der Konfiguration.
 */
.ecx-pt-media__raster {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}

/* ---- Sektion 6: Schluss ---- */

/*
 * HELL STATT DUNKELBLAU, und bewusst nicht weiss wie in der Vorlage.
 *
 * Der Abschnitt stand auf --ec-blue-900 (#0e2237), praktisch schwarz.
 * Damit war er der dunkelste Punkt der Seite und zog alles auf sich.
 *
 * Warum --ec-blue-50 und nicht --ec-blue: Der Newsletter-Banner
 * darunter ist bereits --ec-blue. Zwei kraeftig blaue Bloecke
 * unmittelbar hintereinander haetten sich gegenseitig entwertet. Weiss
 * wie in der Vorlage geht auch nicht: dort folgt kein Banner, hier
 * stuende der Abschnitt zwischen grauer Mediathek und blauem Banner
 * ohne eigenen Ton.
 */
.ecx-pt-schluss {
  position: relative; overflow: hidden;
  padding: 64px 0;
  background: var(--ec-blue-50); color: var(--ink);
}
/*
 * RECHTS HINTER DEM MEDIUM, seit 06.10.2026. Vorher links unten - mit
 * .8 Deckkraft lag das Linienbild dort quer hinter dem Fliesstext. Hier
 * rahmt es Foto oder Kachel ein und bleibt aus dem Text heraus.
 */
.ecx-pt-schluss__lines {
  position: absolute; right: -8%; bottom: -30%;
  width: 42%; height: 150%;
  background: url('../../img/linien.png') center/contain no-repeat;
  opacity: .8;
  pointer-events: none;
}

/* Mit Kachel: halbe-halbe wie in der Vorlage. */
.ecx-pt-schluss__container {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px;
  align-items: center;
}

/*
 * MIT FOTOS: Text zu Bild 2 zu 3.
 *
 * Auf dem Gruppenfoto stehen rund dreissig Personen nebeneinander
 * ueber 1280px. Damit Gesichter erkennbar bleiben, braucht das Bild
 * Breite: bei 1440 sind es so 725px, rund 24px je Person. Die
 * Textspalte behaelt rund 480px, das sind etwa 60 Zeichen - knapp, aber
 * gut lesbar. Bei 1:1 haette das Bild nur 604px; noch mehr Bildanteil
 * machte die Textspalte schmaler, als die Ueberschrift lang ist.
 */
.ecx-pt-schluss__container--bilder { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 48px; }

.ecx-pt-schluss__text { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-width: 0; }

.ecx-pt-schluss .ecx-pt-schluss__titel {
  font-size: var(--t-h2); color: var(--ink);
  margin: 0; line-height: 1.15; letter-spacing: -0.01em;
}
.ecx-pt-schluss__unter { font-size: var(--t-body); font-weight: 600; color: var(--ec-blue); margin: 0; line-height: 1.5; }
.ecx-pt-schluss__lead { font-size: var(--t-sm); color: var(--ink-2); margin: 0; line-height: 1.65; }

.ecx-pt-schluss__medium { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Kachel mit Kuerzel, wenn keine Fotos da sind - DEGEA derzeit. */
.ecx-pt-schluss__kachel {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  aspect-ratio: 4 / 3; border-radius: var(--r-xl);
  background: var(--ec-blue); color: #fff;
  font-size: clamp(32px, 5vw, 64px); font-weight: 800; letter-spacing: -0.02em;
}
.ecx-pt-schluss__kachel::before {
  content: ""; position: absolute; inset: -20%;
  background: url('../../img/linien.png') center/cover no-repeat;
  opacity: .8; mix-blend-mode: screen; pointer-events: none;
}
.ecx-pt-schluss__kachel > span { position: relative; z-index: 1; }

.ecx-pt-schluss__bildtext { font-size: var(--t-xs); color: var(--ink-3); margin: 0; }

/*
 * FOTOS IM 16:9-KASTEN - UND WARUM HIER cover STEHT.
 *
 * In der Mediathek (Punkt 21) und bei den Sponsoren- und Nachweislogos
 * steht contain: dort darf nichts vom Inhalt verloren gehen, ein Rand
 * ist der kleinere Schaden. Hier ist es umgekehrt, und zwar absichtlich:
 *
 *   - Der Kasten folgt dem Gruppenfoto (1280 x 733, also 1,746:1),
 *     nicht umgekehrt. 16:9 ist 1,778:1 - das Foto ist eine Spur
 *     hoeher als der Kasten. cover skaliert es deshalb auf die volle
 *     BREITE und nimmt oben und unten zusammen 1,8 Prozent weg (bei
 *     725px Darstellung 6 Pixel). Links und rechts, wo die aeussersten
 *     Personen bis an den Rand stehen, faellt NICHTS weg.
 *   - Das Hands-on-Foto ist 3:2. Dort fallen oben und unten je rund
 *     8 Prozent weg - Decke und Tischkante, gewollt.
 *   - contain gaebe beim Wechsel zwischen beiden einen springenden
 *     Rahmen: beim 3:2-Bild breite Streifen links und rechts.
 *
 * Wer das an die Mediathek angleicht, schneidet nichts ab, bekommt
 * aber Streifen. Wer den Kasten schmaler macht als 1,746:1 (etwa 3:2
 * oder 4:3), schneidet beim Gruppenfoto die Personen am Rand ab.
 */
.ecx-pt-bilder { display: flex; flex-direction: column; gap: 12px; }

.ecx-pt-bilder__buehne {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: var(--r-xl);
  background: var(--ec-blue);
}

.ecx-pt-bilder__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; visibility: hidden;
  transition: opacity 500ms var(--ease), visibility 0s linear 500ms;
}
.ecx-pt-bilder__bild.ecx-is-active {
  opacity: 1; visibility: visible;
  transition: opacity 500ms var(--ease), visibility 0s;
}

/*
 * Striche wie im Hero der Startseite (hero.css), in der Fassung fuer
 * hellen Grund: sie stehen unter dem Bild, nicht darauf - auf einem
 * hellen Foto waeren weisse Striche nicht zu sehen.
 */
.ecx-pt-bilder__punkte { display: flex; gap: 8px; align-items: center; }

.ecx-pt-bilder .ecx-pt-bilder__punkt {
  position: relative;
  height: 4px; width: 28px;
  border-radius: 2px; border: 0; padding: 0;
  cursor: pointer;
  background: rgba(29,66,103,.25);
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
/* Optisch 4px, im Tastbereich 44px - wie im Hero. */
.ecx-pt-bilder__punkt::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 44px;
}
/* Grund festhalten: GP setzt button:hover auf 0,1,1, siehe Punkt 18. */
.ecx-pt-bilder .ecx-pt-bilder__punkt:hover { background: rgba(29,66,103,.4); }
.ecx-pt-bilder .ecx-pt-bilder__punkt.ecx-is-active { background: var(--ec-red); width: 56px; }

/* ============================================
   RESPONSIV - Stufen nach docs/DECISIONS.md
   ============================================ */

@media (max-width: 1080px) {
  /* Vier Karten in einer Reihe werden bei 1080 zu schmal - zwei. */
  .ecx-pt-values__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .ecx-pt-hero__container,
  .ecx-pt-hero__container--nurtext { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; padding-bottom: 36px; }
  /* Die Kachel wuerde auf voller Breite erschlagend gross - begrenzen. */
  .ecx-pt-hero__medium { max-width: 380px; }

  /*
   * EINSPALTIG LIEGEN DIE LINIEN HINTER DEM TEXT - in Hero und Schluss.
   * Mit voller Deckkraft stand die Grafik bei 375 quer hinter dem
   * Fliesstext. Dieselbe Regel wie im Hero der Startseite, der
   * Events-Uebersicht und der Einzelansicht: unter 900 auf .3, siehe
   * docs/DECISIONS.md Punkt 35 und 38. Am Desktop bleibt es bei 100 bzw.
   * 80 Prozent.
   */
  .ecx-pt-hero__lines,
  .ecx-pt-schluss__lines { opacity: .3; }

  /* Logo ueber die Karten, links unter dem Text. */
  .ecx-pt-values__kopf { grid-template-columns: 1fr; gap: 24px; margin-bottom: 28px; }
  .ecx-pt-values__logo { justify-self: start; }
  .ecx-pt-values__logo img { max-width: 200px; max-height: 50px; }

  /* Bild unter den Text, wie die anderen zweispaltigen Sektionen. */
  .ecx-pt-schluss__container,
  .ecx-pt-schluss__container--bilder { grid-template-columns: 1fr; gap: 28px; }
  .ecx-pt-schluss__kachel { max-width: 380px; }

  /*
   * MEDIENKARTEN ERST HIER AUF ZWEI SPALTEN, nicht schon bei 1080.
   *
   * Es sind drei Karten. In zwei Spalten bleibt die dritte allein
   * stehen - das lohnt nur, wenn drei wirklich zu eng werden. Gemessen:
   * bei 1080 hat jede Karte 325px, das reicht, die Titel brechen auf
   * zwei Zeilen. Bei 900 sind es 265px und die Titel brechen auf vier.
   * Also bleibt es bis 900 bei drei Spalten.
   */
  .ecx-pt-media__raster { grid-template-columns: repeat(2, 1fr); }

  .ecx-pt-values, .ecx-pt-stats, .ecx-pt-events, .ecx-pt-media, .ecx-pt-schluss { padding: 48px 0; }
}

@media (max-width: 640px) {
  .ecx-pt-values__liste { grid-template-columns: 1fr; }
  .ecx-pt-stats__raster { grid-template-columns: 1fr; }
  .ecx-pt-media__raster { grid-template-columns: 1fr; }

  .ecx-pt-hero__medium, .ecx-pt-schluss__kachel { max-width: none; }

  /* Kopfzeile bricht um, die Weiterfuehrung steht dann links darunter. */
  .ecx-pt-kopf { align-items: flex-start; }

  .ecx-pt-stat { padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ecx-pt-value, .ecx-pt-link .ecx-icon,
  .ecx-pt-bilder__bild, .ecx-pt-bilder__punkt { transition-duration: 0s; }
}