/* TGF Presse — Liste (nach Jahr gruppiert) + Detailansicht. Nutzt die Theme-Tokens
   (--red, --line, --muted, --font-label, --radius); fällt ohne Theme auf sinnvolle Werte zurück. */

.tgf-presse { --pr-line: var(--line, #e4dccb); --pr-red: var(--red, #c90000); --pr-muted: var(--muted, #6f5e4a); }

/* ---------- Liste ---------- */
.tgf-presse--liste .tgf-presse-jahrgruppe { margin: 0 0 2em; }
/* Pro-Zeilen-Block ein eigener Formatierungskontext (display:flow-root bzw. flex bei den
   Einträgen): so weicht jede Zeile einer rechts gefloateten Box aus — neben der Box wird die
   Zeile (samt Trennlinie) schmal, unterhalb der Box läuft alles voll breit weiter (Umfliessen). */
.tgf-presse--liste .tgf-presse-jahr {
    display: flow-root;
    font-family: inherit; font-size: 1.5rem; font-weight: 400; color: var(--pr-red);
    margin: 0 0 .6em; padding-bottom: .3em; border-bottom: 2px solid var(--pr-line);
}
.tgf-presse-eintraege { list-style: none; margin: 0; padding: 0; }
.tgf-presse-eintrag {
    display: flex; gap: 1.2em; align-items: baseline;
    padding: .6em 0; border-top: 1px solid var(--pr-line);
}
.tgf-presse-eintrag:first-child { border-top: 0; }
.tgf-presse-datum {
    flex: 0 0 6.5em; color: #3d3125; font-variant-numeric: tabular-nums;
    font-size: .92rem; white-space: nowrap;
}
.tgf-presse-text { flex: 1 1 auto; min-width: 0; }
.tgf-presse-titel { font-weight: 400; }
.tgf-presse-eintrag-meta {
    display: block; margin-top: .15em; color: #3d3125; font-size: .9rem;
}
.tgf-presse-eintrag-meta > * + *::before { content: "·"; margin: 0 .5em; color: var(--pr-line); }

@media (max-width: 560px) {
    .tgf-presse-eintrag { flex-direction: column; gap: .1em; }
    .tgf-presse-datum { flex-basis: auto; font-size: .82rem; }
}

/* ---------- Detail ---------- */
/* Lead voll breit über Box + Fliesstext (eigener Block vor der gefloateten Box). */
.tgf-presse-lead { display: flow-root; }
.tgf-presse-lead > :first-child { margin-top: 0; }

/* Zusatzinfos als rechts gefloatete Box — gleiche Optik wie die Theme-Box im Box-Pane
   (goldener Schleier + roter Strich links). Der Artikeltext fliesst darum herum. */
.tgf-presse-info {
    float: right; width: 300px; max-width: 42%; margin: 0 0 1.4em 30px;
    background: rgba(180, 147, 85, .14); border-left: 4px solid var(--pr-red);
    border-radius: var(--radius, 2px); padding: 20px 22px;
}
/* Kopfzeile: Titel links, Blätter-Pfeile rechts. */
.tgf-presse-info-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
/* Box-Titel = schwarze „Abschnitt"-Stufe (Prose-h4): Body-Schrift, semibold, kein Versal/Rot.
   Höhere Spezifität als `.prose h4`, damit das Margin-Reset (Abstand sitzt am Kopf) greift. */
.tgf-presse-info .tgf-presse-info-titel {
    font-family: inherit; text-transform: none; letter-spacing: normal; font-weight: 600;
    font-size: 1.12rem; line-height: 1.4; color: #2a2016; margin: 0;
}

/* Vor-/Zurück-Navigation durch alle Beiträge der Sorte (ersetzt das DNN-Box-Blättern). */
.tgf-presse-info-nav { display: inline-flex; gap: 6px; flex: 0 0 auto; }
/* Selektoren mit `.tgf-presse-info`-Präfix, damit die Pfeilfarbe die Theme-Regel
   `.reading .prose a` (rot) schlägt — sonst werden die <a>-Pfeile rot. */
.tgf-presse-info .tgf-presse-info-nav a,
.tgf-presse-info .tgf-presse-info-nav span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; background: var(--gold-soft, #d8bd80);
    border: 1px solid rgba(70, 52, 20, .20); border-radius: var(--radius, 2px);
    color: #4a3a22; font-size: 1.05rem; line-height: 1; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.tgf-presse-info .tgf-presse-info-nav a:hover { background: var(--gold, #B49355); color: #2a2016; border-color: rgba(70, 52, 20, .32); text-decoration: none; }
.tgf-presse-info .tgf-presse-info-nav .is-disabled { background: rgba(216, 189, 128, .45); border-color: rgba(70, 52, 20, .12); color: rgba(74, 58, 34, .4); cursor: default; }
.tgf-presse-info-daten { margin: 0; }
.tgf-presse-info-daten dt {
    font-family: var(--font-label, sans-serif); text-transform: uppercase; letter-spacing: .12em;
    font-size: .72rem; font-weight: 600; color: var(--pr-red); margin: 0 0 .15em;
}
.tgf-presse-info-daten dd { margin: 0 0 .9em; color: #3d3125; font-size: .94rem; }
.tgf-presse-info-daten dd:last-child { margin-bottom: 0; }

/* Abschnitte ohne Trennlinie; Abstand wie Titel→Datum (16px ≈ 1em) für gleichmässige Rhythmik. */
.tgf-presse-info-block { margin-top: 1em; }
.tgf-presse-info-block h3 {
    font-family: var(--font-label, sans-serif); text-transform: uppercase; letter-spacing: .12em;
    font-size: .72rem; font-weight: 600; color: var(--pr-red); margin: 0 0 .6em;
}
.tgf-presse-info-beilagen ul { list-style: none; margin: 0; padding: 0; }
.tgf-presse-info-beilagen li { margin: 0 0 .4em; }
.tgf-presse-info-beilagen li:last-child { margin-bottom: 0; }
.tgf-presse-info a { text-decoration: none; }
.tgf-presse-info a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Produktion ist eine Referenz, kein klassischer Link → dunkler Fliesstext-Look statt rot/
   unterstrichen. Höhere Spezifität als `.reading .prose a` (rot) und der allgemeine Box-Hover. */
.tgf-presse-info .tgf-presse-info-produktion a,
.tgf-presse-info .tgf-presse-info-produktion a:hover {
    color: #2a2016; text-decoration: none;
}

/* Auf schmalen Schirmen nicht floaten, sondern voll breit oben (DOM-Reihenfolge stimmt schon). */
@media (max-width: 560px) {
    .tgf-presse-info { float: none; width: auto; max-width: none; margin: 0 0 1.6em; }
}

/* Lead-Bild als eigener Kontext, damit das 100%-Bild nicht unter die gefloatete Info-Box rutscht,
   sondern daneben (auf die verbleibende Spaltenbreite) sitzt. */
.tgf-presse-bild { display: flow-root; margin: 0 0 1.6em; }
.tgf-presse-bild img { width: 100%; height: auto; border-radius: var(--radius, 2px); display: block; }
.tgf-presse-inhalt > :first-child { margin-top: 0; }