/* ═══════════════════════════════════════════════════════════
   Fan Point Kassel – Artikelseiten
   Wird von allen erzeugten Beitragsseiten geladen. Eine Datei fuer
   alle 335 Seiten, statt CSS in jede einzelne zu schreiben.
   Werte aus beflockung.html uebernommen, damit der Kopfbereich
   aussieht wie auf den uebrigen Seiten.
   ═══════════════════════════════════════════════════════════ */

.page-hero { background:var(--dark); position:relative; overflow:hidden; padding:3.5rem 0 4rem; }
.page-hero-bg { position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 95% at 80% 45%, rgba(78,114,20,.30) 0%, transparent 62%); }
.page-hero-inner { position:relative; z-index:2; max-width:1400px; margin:0 auto; padding:0 2rem; }

.brotkrume { display:flex; align-items:center; gap:.5rem; font-size:.8rem;
  color:rgba(255,255,255,.4); margin-bottom:1.25rem; flex-wrap:wrap; }
.brotkrume a { color:rgba(255,255,255,.4); text-decoration:none; }
.brotkrume a:hover { color:var(--gruen); }

/* Datum und Kategorie stehen an der Stelle, an der auf den anderen
   Seiten die kleine rote Zeile sitzt – gleiche Schrift, gleiche Lage. */
.a-meta { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.9rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--rot-hell);
  margin-bottom:.9rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.a-meta time { color:rgba(255,255,255,.45); letter-spacing:.14em; }
.a-meta .punkt { color:rgba(255,255,255,.25); }

.page-hero h1 { font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:clamp(2rem,5.5vw,3.6rem); line-height:.98; text-transform:uppercase;
  color:#fff; max-width:22ch; }
.page-hero .a-teaser { color:rgba(255,255,255,.62); font-size:1.08rem;
  margin-top:1.2rem; max-width:62ch; line-height:1.6; }

/* ── Der Beitrag ──────────────────────────────────────── */
.a-rumpf { background:var(--off-white); padding:3.5rem 0 4rem; }
.a-spalte { max-width:1400px; margin:0 auto; padding:0 2rem; }
.a-bild { display:block; width:100%; max-width:860px; height:auto;
  border-radius:3px; margin-bottom:2.5rem; background:var(--grau-hell); }

/* Lesespalte: 68 Zeichen ist die Breite, bei der man nicht die Zeile
   verliert. Nicht die ganzen 1336 px ausnutzen. */
.a-text { max-width:68ch; }
.a-text > *:first-child { margin-top:0; }
.a-text p { font-size:1.06rem; line-height:1.75; color:var(--text); margin:0 0 1.25rem; }
.a-text strong { color:var(--dark); }
.a-text a { color:var(--gruen-dunkel); font-weight:600;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.a-text a:hover { color:var(--rot); }
.a-text h1, .a-text h2, .a-text h3, .a-text h4 {
  font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase;
  line-height:1.12; color:var(--dark); margin:2.25rem 0 .85rem; }
.a-text h1, .a-text h2 { font-size:1.6rem; }
.a-text h3 { font-size:1.35rem; }
.a-text h4 { font-size:1.15rem; letter-spacing:.02em; }
.a-text ul, .a-text ol { margin:0 0 1.25rem 1.3rem; }
.a-text li { font-size:1.04rem; line-height:1.7; color:var(--text); margin-bottom:.45rem; }
.a-text img { max-width:100%; height:auto; border-radius:3px; margin:1.5rem 0; }
.a-text figure { margin:1.5rem 0; }
.a-text figcaption { font-size:.88rem; color:#666; margin-top:.5rem; }
.a-text hr { border:none; border-top:1px solid var(--grau-hell); margin:2.25rem 0; }
.a-text blockquote { margin:1.75rem 0; padding:.2rem 0 .2rem 1.4rem;
  border-left:3px solid var(--gruen); color:#555; font-size:1.06rem; line-height:1.7; }

/* Hinweis auf alten Inhalt. Steht bewusst oben: wer eine
   Vorverkaufsmeldung von 2018 oeffnet, soll es sofort wissen. */
.a-alt { max-width:68ch; background:#fff8e0; border-left:3px solid #d4a020;
  padding:.9rem 1.2rem; margin-bottom:2rem; font-size:.95rem;
  line-height:1.65; color:#5c4a00; border-radius:0 3px 3px 0; }
.a-alt strong { color:#3d3100; }

/* ── Weiter lesen ─────────────────────────────────────── */
.a-weiter { background:#fff; border-top:1px solid var(--grau-hell); padding:3rem 0 3.5rem; }
.a-weiter-liste { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:1.2rem; margin-top:1.8rem; }
.a-karte { display:block; background:var(--off-white); border:1px solid var(--grau-hell);
  border-radius:3px; padding:1.3rem 1.4rem; text-decoration:none;
  transition:border-color .2s, transform .2s; }
.a-karte:hover { border-color:var(--gruen); transform:translateY(-2px); }
.a-karte time { display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gruen-dunkel); margin-bottom:.4rem; }
.a-karte .k-titel { font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:1.14rem; line-height:1.2; text-transform:uppercase;
  color:var(--dark); margin-bottom:.4rem; }
.a-karte p { font-size:.92rem; line-height:1.6; color:#555; }
.a-zurueck { display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.9rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gruen-dunkel);
  text-decoration:none; margin-top:2rem; min-height:44px; }
.a-zurueck:hover { color:var(--rot); }

/* ── Archivübersicht ──────────────────────────────────── */
.arch-jahre { display:flex; flex-wrap:wrap; gap:.5rem; margin:2rem 0 2.5rem; }
.arch-jahre a { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.95rem;
  letter-spacing:.06em; padding:.6rem 1rem; min-height:44px; display:inline-flex;
  align-items:center; border:1px solid var(--grau-hell); border-radius:2px;
  background:#fff; color:var(--dark); text-decoration:none; transition:border-color .2s; }
.arch-jahre a:hover, .arch-jahre a[aria-current="page"] { border-color:var(--gruen); color:var(--gruen-dunkel); }
.arch-liste { list-style:none; max-width:900px; }
.arch-liste li { border-bottom:1px solid var(--grau-hell); }
.arch-liste a { display:flex; gap:1.2rem; padding:1rem .2rem; text-decoration:none;
  align-items:baseline; flex-wrap:wrap; }
.arch-liste a:hover .k-titel { color:var(--gruen-dunkel); }
.arch-liste time { flex-shrink:0; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.82rem; letter-spacing:.1em; color:#777; min-width:6.5rem; }
.arch-liste .k-titel { font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:1.1rem; line-height:1.3; color:var(--dark); }

@media (max-width:1000px) {
  .page-hero-inner, .a-spalte { padding:0 1.25rem; }
  .a-rumpf { padding:2.5rem 0 3rem; }
  .page-hero { padding:2.5rem 0 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .a-karte, .arch-jahre a { transition:none; }
}