function Auftritte() {
  // Zusammengelegt aus Showreel und Appearances (31.08.2026). Beide behaupteten
  // dasselbe, naemlich Medien-Praesenz, mit zwei Ueberschriften.
  // Aufklappen ueber natives <details>: der Inhalt bleibt im DOM und damit im
  // Prerender-Schnappschuss, den Such- und LLM-Crawler lesen. Eine React-
  // Bedingung wuerde die eingeklappten Auftritte aus dem Snapshot entfernen.
  // `top: true` markiert die sichtbaren.
  //
  // Zwei Betriebsarten, gesteuert ueber `groups` im Woerterbuch:
  //  - `groups: null` (DE): eine Liste, `top` entscheidet sichtbar gegen
  //    aufklappbar. Genau das Verhalten von vorher.
  //  - `groups` gesetzt (EN): zwei Gruppen mit eigenen Ueberschriften. Die
  //    englischen Auftritte stehen komplett sichtbar oben, weil sie fuer eine
  //    internationale Redaktion die tragende Gruppe sind. In der zweiten Gruppe
  //    greift `top` wieder, und die Notiz darunter ordnet die deutschen Sender
  //    ein, die international niemand kennt.
  const c = window.PRESSE_CONTENT[window.PRESSE_LANG].auftritte;

  const Clip = (cl, i) => (
    <a key={i} className="clip-card" href={cl.href} target="_blank" rel="noopener noreferrer">
      <span className="clip-poster">
        <img src={cl.poster} alt={`${cl.outlet}: ${cl.title}`} loading="lazy" />
        <span className="clip-play" aria-hidden="true"></span>
      </span>
      <span className="clip-meta">
        <span className="clip-outlet">{cl.outlet}</span>
        <span className="clip-title">{cl.title}</span>
      </span>
    </a>
  );
  const Row = (a, i) => (
    <li key={i} className="appearance-item">
      <a className="appearance-link" href={a.href} target="_blank" rel="noopener noreferrer">
        <span className="appearance-outlet">{a.outlet}</span>
        <span className="appearance-title">{a.title}</span>
        <span className="appearance-date">{a.date}</span>
      </a>
    </li>
  );
  // Ohne Rest keinen Aufklapper: sonst steht dort ein leerer Knopf mit der
  // Beschriftung "Weitere 0 Auftritte anzeigen". Tritt ein, sobald alle
  // Eintraege einer Gruppe `top` tragen.
  const More = (rest) => (rest.length === 0 ? null : (
    <details className="appearance-more">
      <summary>
        <span className="more-zu">{c.moreOpen(rest.length)}</span>
        <span className="more-auf">{c.moreClose}</span>
      </summary>
      <ul className="appearance-list">{rest.map(Row)}</ul>
    </details>
  ));

  let listing;
  if (c.groups) {
    const primary = c.items.filter((a) => a.grp === 'primary');
    const secondary = c.items.filter((a) => a.grp === 'secondary');
    const secVisible = secondary.filter((a) => a.top);
    const secRest = secondary.filter((a) => !a.top);
    listing = (
      <>
        <h4 className="appearance-group">{c.groups.primary.heading}</h4>
        {c.groups.primary.note ? (<p className="appearance-group-note">{c.groups.primary.note}</p>) : null}
        <ul className="appearance-list">{primary.map(Row)}</ul>
        <h4 className="appearance-group">{c.groups.secondary.heading}</h4>
        {c.groups.secondary.note ? (<p className="appearance-group-note">{c.groups.secondary.note}</p>) : null}
        <ul className="appearance-list">{secVisible.map(Row)}</ul>
        {More(secRest)}
      </>
    );
  } else {
    const sichtbar = c.items.filter((a) => a.top);
    const rest = c.items.filter((a) => !a.top);
    listing = (
      <>
        <ul className="appearance-list">{sichtbar.map(Row)}</ul>
        {More(rest)}
      </>
    );
  }

  return (
    <section className="section appearances" id="auftritte">
      <div className="container-narrow">
        <div className="section-eyebrow"><span className="kicker-line"></span>{c.eyebrow}</div>
        <h2 className="section-title">{c.title}</h2>
        <p className="section-lede">{c.lede}</p>

        <div className="appearance-logos">
          {c.logos.map((l) => (<img key={l.alt} src={l.src} alt={l.alt} loading="lazy" />))}
        </div>

        <div className="showreel-featured">{Clip(c.featured, 'featured')}</div>
        <div className="showreel-grid">{c.clips.map((cl, i) => Clip(cl, i))}</div>

        <h3 className="appearance-subhead">{c.subhead}</h3>
        {listing}
        <a className="appearance-all" href={c.allHref} target="_blank" rel="noopener noreferrer">{c.allLabel}</a>

        <p className="appearance-note">
          {c.note.pre}
          <a href={c.note.linkAHref} target="_blank" rel="noopener noreferrer">{c.note.linkAText}</a>
          {c.note.mid}
          <a href={c.note.linkBHref} target="_blank" rel="noopener noreferrer">{c.note.linkBText}</a>
          {c.note.post}
        </p>
      </div>
    </section>
  );
}
window.Auftritte = Auftritte;