/* ===========================================================================
   ONLINE-PREDIGT · SCHICHT 4/4 — SEITE: NEU
   Chronik statt Liste: Der Katalog kann nach Datum sortieren, aber nicht
   zeigen, WAS sich geändert hat. Diese Seite tut genau das.
   =========================================================================== */

@layer seite {

  .neu__pfad { color: var(--text-3); font-size: var(--txt-etikett); padding-block-start: var(--raum-6); }
  .neu__pfad a { color: inherit; }

  .neu__kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); padding-block: var(--raum-4) var(--raum-5); }
  /* 90ch statt 58ch (PO 2026-08-04): die Einleitung soll den Behälter füllen statt einspaltig
     zu wirken — der Text ist admin-editierbar (Länge unbekannt), deshalb gedeckelt statt frei. */
  .neu__unter { color: var(--text-2); font-size: var(--txt-gross); max-inline-size: min(90ch, 100%); }

  /* Abonnieren */
  .abo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--raum-5);
    align-items: center;
  }
  .abo__text { color: var(--text-2); font-size: var(--txt-klein); max-inline-size: min(48ch, 100%); }
  .abo__wege { display: flex; flex-wrap: wrap; gap: var(--raum-2); }

  /* Werkzeugleiste */
  .neu__werkzeug {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-3);
    padding-block: var(--raum-5) var(--raum-4);
    border-block-end: var(--linie-breit) solid var(--linie);
  }
  .neu__anzahl { color: var(--text-2); font-size: var(--txt-klein); margin-inline-start: auto; }
  .neu__anzahl strong { color: var(--text); }

  /* Marke «seit deinem letzten Besuch» */
  .besuchsmarke {
    display: flex;
    align-items: center;
    gap: var(--raum-3);
    margin-block: var(--raum-6) var(--raum-4);
    color: var(--marke);
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-fett);
    letter-spacing: var(--sperrung-etikett);
    text-transform: uppercase;
    font-family: var(--schrift-mono);
  }
  .besuchsmarke::after {
    content: "";
    flex: 1;
    block-size: 2px;
    background: var(--marke);
    border-radius: var(--radius-voll);
  }

  /* Monatsgruppe */
  .monat { margin-block-start: var(--raum-7); }
  .monat__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--raum-3);
    margin-block-end: var(--raum-3);
  }
  .monat__kopf h2 { font-size: var(--txt-t4); letter-spacing: -0.01em; }
  .monat__zahl { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }

  .chronik { border-block-start: var(--linie-breit) solid var(--linie); }

  .neuigkeit {
    display: grid;
    grid-template-columns: 4.5rem auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--raum-4);
    min-block-size: var(--tastfeld);
    padding: var(--raum-3) var(--raum-3);
    margin-inline: calc(var(--raum-3) * -1);
    border-block-end: var(--linie-breit) solid var(--linie);
    color: var(--text);
    text-decoration: none;
  }
  .neuigkeit:hover { background: var(--flaeche-3); color: var(--text); }
  .neuigkeit:hover .neuigkeit__titel { text-decoration: underline; }

  .neuigkeit__tag {
    color: var(--text-3);
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
    font-variant-numeric: tabular-nums;
  }

  .neuigkeit__bild {
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    inline-size: 4rem;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-s);
    background: var(--verlauf-bild);
  }
  .neuigkeit__bild svg { inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: var(--auf-tief); stroke-width: 1.6; opacity: 0.85; }

  .neuigkeit__titel { font-size: var(--txt-klein); font-weight: var(--gewicht-fett); line-height: var(--zeile-titel); }
  .neuigkeit__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-1) var(--raum-3);
    margin-block-start: var(--raum-1);
    color: var(--text-3);
    font-size: var(--txt-etikett);
  }

  @media (max-width: 60rem) {
    .abo { grid-template-columns: 1fr; gap: var(--raum-4); }
  }

  @media (max-width: 34rem) {
    .neuigkeit { grid-template-columns: 4rem minmax(0, 1fr); row-gap: var(--raum-2); }
    .neuigkeit__bild { display: none; }
    .neuigkeit__art { grid-column: 2 / -1; }
  }
}

/* ── Bestands-Nachtrag E5 (destillationsbedingt, ausserhalb der Abgabe): Leerzustand der
   Chronik — die Tabelle startet ohne Rück-Historie (N2). R16-Leerzustands-Muster. */
@layer seite {
  .leer-karte { display: grid; gap: var(--raum-2); padding: var(--raum-6); text-align: center; }
  .leer-karte__titel { font-weight: 650; }
  .leer-karte__text { color: var(--text-2); font-size: var(--txt-klein); margin-inline: auto; max-inline-size: min(52ch, 100%); }
}