/* Rubriken-Stylesheet v5 — Systemfamilie: alle Koepfe identisches Raster,
   nur Form und Farbe wechseln. sport = gelber kreis auf blau,
   gesellschaft = rotes dreieck auf gelb, welt = blaues quadrat auf rot.
   Konstante: schwarze Grundlinie, Form oben rechts angeschnitten.
   v4: Hover — Titel faerben sich in der Grundfarbe der Rubrik,
   "alle" steht in der Grundfarbe und kippt beim Hover in die Formfarbe.
   v8: Plakat-Kaskade im Quart-Mass 4:3, nochmals 30% kompakter —
   Hoehen 176/132/99, Titel 34/25/19. Einheitliche Textfeldbreite:
   Titel laufen ueber die volle Spalte, Untertitel bis zur festen
   460px-Kante — die Umbrueche fallen auf allen Stufen gleich.
   v9/v14: Mobil steht die Komposition zuoberst, direkt unter der Trennlinie,
   darunter Meta, Titel, Untertitel.
   v10: 18px Weissraum zwischen den Stufen — jedes Plakat ein eigenes Blatt.
   v12: Rubrikkoepfe 34px (nochmals -30%), Formen auf 40px mitskaliert,
   Name mittig; Stufe-1-Bild mit 18px Weissraum zur Oberkante.
   v13: 18px Weissraum auch zwischen Stufe 3 und Rubrikleiste —
   dasselbe Blattmass an allen vier Fugen.
   v15: Rubriken als freie Blaetter — 18px Fugen statt Trennlinien,
   keine horizontale Linie mehr in den Koepfen. */

/* --- Plakat-Kaskade (Startseite) --- */
.plakat + .plakat { margin-top: 18px; }
.plakat:first-of-type .komposition { margin-top: 18px; }
.plakat { min-height: 176px; }
.plakat .plakat__text { padding-top: 21px; padding-bottom: 21px; }
.plakat .titel--plakat { font-size: clamp(22px, 3.2vw, 34px); max-width: none; }
.plakat .untertitel { font-size: 13px; margin-top: 10px; max-width: 460px; }
.plakat--s2 { min-height: 132px; }
.plakat--s2 .plakat__text { padding-top: 15px; padding-bottom: 15px; }
.plakat--s2 .titel--plakat { font-size: clamp(17px, 2.4vw, 25px); }
.plakat--s2 .untertitel { font-size: 12px; margin-top: 8px; }
.plakat--s3 { min-height: 99px; }
.plakat--s3 .plakat__text { padding-top: 11px; padding-bottom: 11px; }
.plakat--s3 .titel--plakat { font-size: clamp(14px, 1.8vw, 19px); }
.plakat--s3 .untertitel { font-size: 11px; margin-top: 6px; }
@media (max-width: 760px) {
  /* Mobile Reihenfolge je Stufe: Meta -> Komposition -> Titel -> Untertitel.
     display:contents loest die Textbox auf, damit die Komposition
     zwischen Meta und Ueberschrift ruecken kann. */
  .plakat { display: grid; grid-template-columns: 1fr; }
  .plakat .plakat__text { display: contents; }
  .plakat .komposition { order: 1; min-height: 108px; }
  .plakat:first-of-type .komposition { margin-top: 0; }
  .plakat .meta { order: 2; margin: 12px 0 8px; }
  .plakat .titel--plakat { order: 3; }
  .plakat .untertitel { order: 4; margin: 8px 0 20px; }
  .plakat--s2 .komposition { min-height: 81px; }
  .plakat--s3 .komposition { min-height: 62px; }
}

.rubrik--sport        { --rubrik: var(--blau); --rubrik-form: var(--gelb); --rubrik-kopf-text: #fff; --rubrik-akzent: var(--blau); }
.rubrik--gesellschaft { --rubrik: var(--gelb); --rubrik-form: var(--rot);  --rubrik-kopf-text: #fff; --rubrik-akzent: var(--ocker); }
.rubrik--welt         { --rubrik: var(--rot);  --rubrik-form: var(--blau); --rubrik-kopf-text: #fff; --rubrik-akzent: var(--rot); }

/* --- Startseite: dreispaltige Rubrikleiste --- */
.rubriken {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}
.rubrik { display: flex; flex-direction: column; }

.rubrik__kopf {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--rubrik);
  color: var(--rubrik-kopf-text);
  text-decoration: none;
  height: 34px;
}
.rubrik__name {
  z-index: 3;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--rubrik-kopf-text);
}
/* Formen- und Linienbausteine der Koepfe */
.rk { position: absolute; display: block; }
.rk--kreis { border-radius: 50%; }
.rk--dreieck { width: 0; height: 0; background: transparent !important; }
.rk--linie-h { left: 0; right: 0; height: 2px; background: #111; z-index: 2; }
.rk--linie-v { top: 0; bottom: 0; width: 2px; background: #111; }

.rubrik__eintrag {
  display: block;
  text-decoration: none;
  color: #111;
  padding: 0.8rem 1rem 0.6rem;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  line-height: 1.35;
}
.rubrik__eintrag { transition: color 0.15s ease; }
.rubrik__eintrag:hover { background: rgba(0,0,0,0.03); color: var(--rubrik); }
.rubrik__eintrag .meta { display: block; font-size: 0.7rem; letter-spacing: 0.12em; color: var(--rubrik-akzent); margin-bottom: 0.15rem; }
.rubrik__eintrag .meta .neutral { color: #8a8a8a; }
.rubrik__eintrag .thema { display: block; font-size: 0.78rem; color: #555; margin-top: 0.15rem; }

.rubrik__folgt {
  padding: 0.9rem 1rem;
  font-size: 0.82rem;
  color: #8a8a8a;
  font-style: italic;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  margin: 0;
}
.rubrik__alle {
  margin-top: auto;
  display: block;
  padding: 0.6rem 1rem 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--rubrik);
  text-decoration: none;
  transition: color 0.15s ease;
}
.rubrik__alle:hover { color: var(--rubrik-form); text-decoration: underline; }

@media (max-width: 720px) {
  .rubriken { grid-template-columns: 1fr; }
}

/* --- Archiv: Rubrik-Abschnitte mit Ankern --- */
/* v16: die drei Rubriken stehen nebeneinander wie die Rubrikleiste der Startseite (18px Fuge);
   der Zaehler laeuft ueber die volle Breite. Vorher griff das 1:3-Raster der Archivseite
   (Filter : Liste) und verteilte die Rubriken auf zwei Spalten. */
.archiv { grid-template-columns: repeat(3, 1fr); column-gap: 18px; }
.archiv-zaehler { grid-column: 1 / -1; }
@media (max-width: 720px) { .archiv { grid-template-columns: 1fr; } }
.archiv-zaehler { font-size: 0.8rem; letter-spacing: 0.12em; color: #8a8a8a; margin: 2rem 0 1rem; }
.rubrik-archiv { margin: 0 0 2.2rem; }
.rubrik-archiv .rubrik__kopf { display: block; margin: 0 0 0.6rem; }
.rubrik-archiv span.rubrik__kopf { cursor: default; }
h2.rubrik-archiv__titel { margin: 0; }
.rubrik-archiv .rubrik__eintrag { border-bottom: 1px solid rgba(0,0,0,0.12); padding-left: 0; padding-right: 0; }
.rubrik-archiv .rubrik__folgt { padding-left: 0; border-bottom: 1px solid rgba(0,0,0,0.12); }

h1.archiv-zaehler { font-weight: 400; }

/* ---- Dunkelmodus (Mockup 18.10.2026) ---- */
[data-theme="dark"] .rubrik--gesellschaft{--rubrik-akzent:var(--gelb)}
[data-theme="dark"] .rubrik--sport{--rubrik-akzent:#86aefc}
[data-theme="dark"] .rubrik--welt{--rubrik-akzent:#ff8a80}
[data-theme="dark"] .rubrik__eintrag{color:var(--schwarz)}
[data-theme="dark"] .rubrik__eintrag .meta{color:var(--rubrik-akzent)}   /* Rubrikfarbe statt Seitenakzent */
[data-theme="dark"] .rubrik__eintrag .thema{color:var(--grau)}
[data-theme="dark"] .rubrik__eintrag:hover{background:rgba(255,255,255,0.06);color:var(--schwarz)}