/* ============================================================================
 * COMPONENT · tc-neuerungen — Release-Liste im „Was gibt's Neues?"-Fenster
 * ----------------------------------------------------------------------------
 * Inhalt eines tc-modal, keine eigene Huelle: Overlay, Kopf (📰 + Titel + ✕),
 * Escape und Hintergrund-Klick kommen von TC.Modal (§9, Modal-Vertrag).
 * Gefuellt von js/ui/whats-new.js (#911). Bis dahin baute das Modul sein
 * Fenster selbst — eigenes Overlay, z-index 50000, Inline-Stile mit
 * Hex-Rueckfaellen, kein ✕, kein Escape.
 *
 *   .tc-neuerungen                 Liste aller gezeigten Releases
 *     .tc-neuerungen__release      ein Release (Trennlinie zum naechsten)
 *       .tc-neuerungen__kopf       Version + Datum in einer Zeile
 *         .tc-neuerungen__version
 *         .tc-neuerungen__datum
 *       .tc-neuerungen__titel      Titelzeile des Releases
 *       .tc-neuerungen__liste      <ul> der Eintraege
 *         .tc-neuerungen__eintrag  Symbol + Text
 *           .tc-neuerungen__symbol
 *           .tc-neuerungen__text
 *   .tc-neuerungen__fuss           in tc-modal__footer: Handbuch links, Knopf rechts
 *
 * Auf der Seite (changelog.html, #912):
 *   .tc-neuerungen--seite           groessere Schrift, Linie unter dem Kopf statt
 *                                   zwischen den Releases
 *   .tc-neuerungen__release--hervor Rahmen um die juengsten Releases (nur wenige —
 *                                   traegt ihn jedes, hebt er nichts mehr hervor)
 *   <strong> im __text              die Sache vor dem Gedankenstrich
 *   Etiketten NEU/VERBESSERUNG/FIX  tc-badge --success/--highlight/--danger
 *   Hinweis zwischen Releases       tc-callout
 *
 * Eigene Bewegung gibt es keine — Ein- und Ausblenden macht tc-modal, dessen
 * Reduced-Motion-Regel greift.
 *
 * changelog.html rendert seit #912 dieselben Daten mit derselben Bauform
 * (vorher eigene cl-*-Klassen, eine zweite Abschrift desselben Musters).
 * ============================================================================ */

.tc-neuerungen {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-4);
}

.tc-neuerungen__release + .tc-neuerungen__release {
  padding-top: var(--tc-space-4);
  border-top: 1px solid var(--tc-border-subtle);
}

.tc-neuerungen__kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--tc-space-1) var(--tc-space-3);
  margin-bottom: var(--tc-space-2);
}

.tc-neuerungen__version {
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-lg);
  font-weight: var(--tc-weight-bold);
  color: var(--tc-highlight);
}

.tc-neuerungen__datum {
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}

.tc-neuerungen__titel {
  margin: 0 0 var(--tc-space-2);
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-base);
  font-weight: var(--tc-weight-semibold);
  line-height: var(--tc-leading-snug);
  color: var(--tc-text-strong);
}

.tc-neuerungen__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tc-neuerungen__eintrag {
  display: flex;
  gap: var(--tc-space-2);
  padding: var(--tc-space-1) 0;
  font-size: var(--tc-text-sm);
  line-height: var(--tc-leading-normal);
  color: var(--tc-text-default);
}

.tc-neuerungen__symbol {
  flex: 0 0 1.5em;
  text-align: center;
}

.tc-neuerungen__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Fuss: der Verweis aufs Handbuch links, „Verstanden" rechts. tc-modal__footer
   schiebt alles nach rechts; die Huelle nimmt die ganze Breite. */
.tc-neuerungen__fuss {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--tc-space-2);
}

.tc-neuerungen__text strong {
  color: var(--tc-text-strong);
  font-weight: var(--tc-weight-semibold);
}

.tc-neuerungen__text .tc-badge {
  margin-left: var(--tc-space-1);
  vertical-align: 0.1em;
}


/* ============================================================================
 * Seite — die ganze Liste als Lesetext (changelog.html)
 * ========================================================================== */
.tc-neuerungen--seite {
  gap: var(--tc-space-6);
}

.tc-neuerungen--seite .tc-neuerungen__release + .tc-neuerungen__release {
  padding-top: 0;
  border-top: 0;
}

.tc-neuerungen--seite .tc-neuerungen__kopf {
  padding-bottom: var(--tc-space-2);
  margin-bottom: var(--tc-space-3);
  border-bottom: 1px solid var(--tc-border-subtle);
}

.tc-neuerungen--seite .tc-neuerungen__version {
  font-size: var(--tc-text-xl);
}

.tc-neuerungen--seite .tc-neuerungen__datum {
  font-size: var(--tc-text-sm);
}

.tc-neuerungen--seite .tc-neuerungen__titel {
  font-size: var(--tc-text-lg);
  margin-bottom: var(--tc-space-3);
}

.tc-neuerungen--seite .tc-neuerungen__eintrag {
  font-size: var(--tc-text-base);
}

.tc-neuerungen__release--hervor {
  padding: var(--tc-space-5);
  border: 1px solid var(--tc-deco-warm-border);
  border-radius: var(--tc-radius-lg);
  background: linear-gradient(135deg, var(--tc-deco-warm-bg) 0%, transparent 50%);
}

@media (max-width: 600px) {
  .tc-neuerungen__release--hervor { padding: var(--tc-space-4); }
}