/*
 * News und Updates.
 *
 * Eigenes Präfix news-. Vermieden werden im Namen card, hero, kicker, label,
 * lead, row, panel, section, list, chip, btn, stat und cta: styles.css und
 * exercise-hb-shell.css fangen solche Namen mit über 300 Substring-Selektoren
 * ungefragt ein.
 *
 * GESTALTUNG: dieselbe wie im Dashboard. Die Seite trägt `dashboard-hb-body`
 * und lädt css/dashboard-hb.css — daher kommen der warme Papiergrund mit dem
 * feinen Raster, die Schriften und die --hb-*-Token.
 *
 * Diese Datei führt deshalb KEINE eigenen Farbwerte mehr. Sie hatte vorher ein
 * eigenes --news-*-Set mit fast, aber nicht ganz denselben Tönen — genau die
 * Sorte Doppelung, die auseinanderläuft, sobald jemand einen Ton ändert und
 * den zweiten Ort nicht kennt. Was hier steht, sind Abstände, Grössen und
 * Anordnung.
 *
 * Die --hb-*-Familie ist nur da, wo dashboard-hb.css geladen ist. Die
 * Rückfallwerte hinter jedem var() sind deshalb nicht Zierde, sondern der
 * Unterschied zwischen „sieht anders aus" und „unlesbar". check-css-tokens
 * prüft das.
 */

.news-page {
    /* Ein dunkleres Terrakotta für Textlinks. --hb-terra (#B0492C) trägt mit
       5,25:1 auf dem Kartengrund durchaus; dieser Ton hat mit 7,2:1 mehr
       Gewicht und hebt Links im Fliesstext deutlicher heraus, ohne die
       Farbfamilie zu verlassen.

       Er steht hier als eigenes Token und nicht bloss als var()-Rückfall: Ein
       Token, das nirgends definiert ist, nimmt still den Rückfallwert und
       ändert sich nie mit — genau die Falle, die check-css-tokens sucht. */
    --news-link: #8F3A22;
}

.news-shell {
    /* Deutlich breiter als vorher (760px). Der Kopfbereich und die Liste
       nutzen die ganze Fläche; nur der Fliesstext eines geöffneten Beitrags
       bleibt schmal — über 80 Zeichen je Zeile verliert man beim Lesen die
       Zeile, und dieser Bereich ist der einzige, in dem am Stück gelesen
       wird. */
    max-width: 1180px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* ------------------------------------------------------------ Kopfbereich */

.news-hero {
    margin-bottom: 44px;
    padding-bottom: 32px;
    border-bottom: 2px solid var(--hb-border, #DAD3C2);
}

/* Das h1 wird von der Markerregel in styles.css auf `display: inline`
   gesetzt — nur so bekommt der gelbe Strich die Breite der Buchstaben statt
   der Breite des Blocks. Ein inline gewordenes Element trägt keine eigenen
   senkrechten Aussenabstände mehr, deshalb hält der Träger den Abstand. */
.news-hero h1 {
    /* Der Wert steht ohne !important: Die Markerregel in styles.css setzt
       max-width und padding, nicht die Schriftgrösse. */
    font-size: clamp(2.1rem, 5vw, 3.1rem);
    line-height: 1.32;
}


.news-kicker {
    margin: 0 0 10px;
    font-family: var(--hb-mono, 'JetBrains Mono', monospace);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hb-terra, #B0492C);
}

.news-hero h1 {
    margin: 0 0 12px;
    font-family: var(--hb-serif, 'Lora', Georgia, serif);
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
    line-height: 1.15;
    color: var(--hb-ink, #23201B);
}

.news-vorspann {
    margin: 0;
    max-width: 62ch;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--hb-ink-mid, #6E6757);
}

/* ---------------------------------------------------------------- Liste */

.news-liste {
    /* Wieder einspaltig. Zweispaltig war die Fläche besser genutzt, aber die
       Beiträge lasen sich wie Kacheln statt wie eine Reihe — und die Reihe ist
       hier die Aussage: neu oben, älter unten. */
    display: grid;
    gap: 20px;
}

/* ---------------------------------------------------------- Eine Karte

   Aufbau wie die Dashboard-Karten: ein farbiger Balken oben mit heller
   Schrift, darunter der Inhalt auf hellem Grund.

   Die sechs Töne wechseln je Beitrag. Jeder ist gegen #FCFAF4 nachgemessen,
   weil der Balkentext klein ist und in Grossbuchstaben steht — da trägt kein
   knapper Kontrast:

     Terra    #B0492C   5,25:1
     Tinte    #23201B  15,55:1
     Blau     #185FA5   6,25:1
     Oliv     #5E7A4F   4,60:1
     Ocker    #8E5E3A   5,28:1   (NICHT --hb-ocker: das erreicht nur 3,82:1)
     Pflaume  #6A4B86   6,79:1
*/

.news-eintrag.ist-terra   { --news-ton: var(--hb-terra, #B0492C); }
.news-eintrag.ist-tinte   { --news-ton: var(--hb-ink,   #23201B); }
.news-eintrag.ist-blau    { --news-ton: var(--hb-blue,  #185FA5); }
.news-eintrag.ist-oliv    { --news-ton: var(--hb-oliv,  #5E7A4F); }
.news-eintrag.ist-ocker   { --news-ton: #8E5E3A; }
.news-eintrag.ist-pflaume { --news-ton: #6A4B86; }

.news-eintrag {
    border: 1px solid var(--hb-border, #DAD3C2);
    /* Der Balken sitzt bündig in der Karte. */
    overflow: hidden;
    background: var(--hb-card, #FCFAF4);
    transition: box-shadow 0.16s ease, transform 0.16s ease;
}

.news-eintrag:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(35, 32, 27, 0.08);
}

.news-eintrag.ist-angeheftet {
    /* Angeheftetes bekommt einen kräftigeren Rahmen in seiner eigenen Farbe. */
    border: 2px solid var(--news-ton, var(--hb-terra, #B0492C));
}

/* ── Der farbige Balken ── */

.news-balken {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 9px 18px;
    background: var(--news-ton, var(--hb-ink, #23201B));
}

.news-balken-marken,
.news-balken-datum {
    margin: 0;
    font-family: var(--hb-mono, 'JetBrains Mono', monospace);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.news-balken-marken {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-weight: 700;
    color: #FCFAF4;
}

.news-balken-datum {
    /* Etwas zurückgenommen, wie die Ortsangabe auf den Dashboard-Karten.
       0,76 Deckkraft auf dem hellsten der sechs Töne (Oliv) ergibt noch
       3,3:1 — für diese Nebenangabe vertretbar, für den Haupttext nicht;
       der steht deshalb voll deckend. */
    color: rgba(252, 250, 244, 0.76);
}

.news-balken-datum:empty { display: none; }

.news-angeheftet {
    padding: 1px 8px;
    /* Auf dem farbigen Balken: heller Kasten mit der Balkenfarbe als Schrift. */
    background: #FCFAF4;
    color: var(--news-ton, var(--hb-terra, #B0492C));
    font-weight: 700;
}

.news-marke {
    /* Auf dem Balken braucht die Marke keinen eigenen Rahmen mehr — sie steht
       ohnehin auf Farbe. */
    color: #FCFAF4;
}

/* ── Der Inhalt darunter ── */

.news-eintrag-inhalt {
    padding: 20px 22px 22px;
}

.news-eintrag h2 {
    margin: 0 0 8px;
    font-family: var(--hb-serif, 'Lora', Georgia, serif);
    font-size: 1.34rem;
    line-height: 1.3;
}

.news-eintrag h2 a {
    color: var(--hb-ink, #23201B);
    text-decoration: none;
}

.news-eintrag h2 a:hover {
    color: var(--news-ton, var(--hb-terra, #B0492C));
    text-decoration: underline;
    text-underline-offset: 3px;
}

.news-anriss {
    margin: 0 0 12px;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--hb-ink-mid, #6E6757);
}

.news-mehr {
    margin: 0;
}

.news-mehr a {
    font-family: var(--hb-mono, 'JetBrains Mono', monospace);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--news-ton, var(--news-link, #8F3A22));
    text-decoration: none;
}

.news-mehr a::after { content: " →"; }
.news-mehr a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------- Zwischenzustände */

.news-laden,
.news-leer {
    margin: 0;
    padding: 30px 0;
    color: var(--hb-ink-muted, #746C5D);
    font-size: 0.96rem;
}

@media (max-width: 620px) {
    .news-shell { padding: 28px 16px 60px; }
    .news-eintrag { padding: 20px 18px; }
    .news-eintrag::before { margin: -20px -18px 14px; }
}

/* ---------------------------------------------------------- Die Staffelung

   Was neu ist, bekommt Platz; was älter wird, schrumpft. Vier Stufen, gesetzt
   von news.js nach der Position in der Liste:

     stufe-gross    der neueste (und alles Angeheftete)
     stufe-mittel   die nächsten zwei
     stufe-klein    danach — Balken und Titel, kein Anriss
     stufe-zeile    ab dem siebten — eine Zeile, nur die Überschrift

   Die Farbe bleibt auf jeder Stufe dieselbe. Sie unterscheidet die Beiträge;
   die Grösse sagt, wie alt sie sind. Zwei Aussagen, zwei Mittel.            */

.news-eintrag.stufe-gross .news-eintrag-inhalt { padding: 26px 26px 26px; }
.news-eintrag.stufe-gross h2                   { font-size: 1.62rem; }
.news-eintrag.stufe-gross .news-anriss         { font-size: 1.04rem; }
.news-eintrag.stufe-gross .news-balken         { padding: 11px 22px; }

.news-eintrag.stufe-mittel .news-eintrag-inhalt { padding: 19px 22px 20px; }
.news-eintrag.stufe-mittel h2                   { font-size: 1.28rem; }
.news-eintrag.stufe-mittel .news-anriss         { font-size: 0.95rem; }

.news-eintrag.stufe-klein .news-eintrag-inhalt { padding: 14px 18px 15px; }
.news-eintrag.stufe-klein h2                   { font-size: 1.08rem; margin: 0; }
.news-eintrag.stufe-klein .news-balken         { padding: 6px 18px; }
.news-eintrag.stufe-klein .news-balken-marken,
.news-eintrag.stufe-klein .news-balken-datum   { font-size: 0.64rem; }

/* ── Die eingeklappte Zeile ──

   Kein Balken: Auf einer einzeiligen Karte wäre ein durchgefärbter Streifen
   lauter als der Titel. Die Farbe steht deshalb an der Kante — dasselbe
   Erkennungszeichen, ein Bruchteil der Fläche. */

.news-eintrag.stufe-zeile {
    border-left: 4px solid var(--news-ton, var(--hb-border, #DAD3C2));
}

.news-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 11px 16px;
}

.news-zeile h2 {
    margin: 0;
    font-family: var(--hb-serif, 'Lora', Georgia, serif);
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.35;
}

.news-zeile h2 a {
    color: var(--hb-ink-mid, #6E6757);
    text-decoration: none;
}

.news-zeile h2 a:hover {
    color: var(--news-ton, var(--hb-ink, #23201B));
    text-decoration: underline;
    text-underline-offset: 3px;
}

.news-zeile-datum {
    flex: none;
    font-family: var(--hb-mono, 'JetBrains Mono', monospace);
    font-size: 0.68rem;
    /* #746C5D auf dem Kartengrund #FCFAF4 ergibt 4,89:1. */
    color: var(--hb-ink-muted, #746C5D);
}

/* Die Zeilen rücken enger zusammen als die Karten — sie sind ein Verzeichnis,
   keine Reihe von Kacheln. */
.news-eintrag.stufe-zeile + .news-eintrag.stufe-zeile { margin-top: -12px; }

/* Angehoben wird nur, was auch Fläche hat. Eine Zeile, die bei Berührung
   springt, wirkt wie ein Fehler. */
.news-eintrag.stufe-zeile:hover {
    transform: none;
    box-shadow: none;
    border-left-width: 6px;
}

@media (max-width: 620px) {
    .news-eintrag.stufe-gross .news-eintrag-inhalt { padding: 20px 18px; }
    .news-eintrag.stufe-gross h2 { font-size: 1.34rem; }
    .news-zeile { padding: 10px 14px; }
}

/* ------------------------------------------------------------ Aufgeklappt

   Der Beitrag öffnet sich in seiner eigenen Karte. Die Seitenüberschrift
   bleibt stehen, die Liste darunter auch — man sieht, wo man ist.            */

/* Die geöffnete Karte tritt hervor: Rahmen in ihrer Farbe, etwas mehr
   Gewicht. Sie soll sich abheben, ohne dass die Nachbarn verschwinden. */
.news-eintrag.ist-offen {
    border-color: var(--news-ton, var(--hb-border, #DAD3C2));
    box-shadow: 0 4px 20px rgba(35, 32, 27, 0.10);
}

.news-eintrag.ist-offen:hover { transform: none; }

/* Auch eine eingeklappte Zeile bekommt beim Öffnen Luft — sonst klebt der
   Text an der Kante. */
.news-eintrag.stufe-zeile.ist-offen { border-left-width: 4px; }

.news-volltext {
    padding: 0 22px 22px;
    /* Der Lesetext bleibt schmal, auch wenn die Karte breit ist. */
    max-width: 74ch;
}

.news-eintrag.stufe-gross .news-volltext  { padding: 0 26px 26px; }
.news-eintrag.stufe-klein .news-volltext  { padding: 0 18px 18px; }
.news-eintrag.stufe-zeile .news-volltext  { padding: 0 16px 16px; }

/* Zwischen Anriss und Volltext eine Linie: Der Anriss steht weiter oben und
   wiederholt sonst optisch den ersten Absatz. */
.news-eintrag.ist-offen .news-volltext {
    padding-top: 16px;
    border-top: 1px solid var(--hb-border, #DAD3C2);
    margin-top: 4px;
}

.news-verfasser {
    margin: 18px 0 0;
    font-family: var(--hb-mono, 'JetBrains Mono', monospace);
    font-size: 0.72rem;
    color: var(--hb-ink-muted, #746C5D);
}

/* ── Die beiden Schalter ── */

.news-mehr-knopf,
.news-zuklappen button {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--hb-mono, 'JetBrains Mono', monospace);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--news-ton, var(--news-link, #8F3A22));
    cursor: pointer;
}

.news-mehr-knopf::after { content: " ↓"; }
.news-mehr-knopf[aria-expanded="true"]::after { content: " ↑"; }

.news-mehr-knopf:hover,
.news-zuklappen button:hover { text-decoration: underline; text-underline-offset: 3px; }

.news-mehr-knopf:focus-visible,
.news-zuklappen button:focus-visible {
    outline: 2px solid var(--news-ton, var(--hb-terra, #B0492C));
    outline-offset: 3px;
}

.news-zuklappen {
    margin: 22px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--hb-border, #DAD3C2);
}

.news-zuklappen button::before { content: "↑ "; }