/* ============================================================================
   pages/aktuelles.css — Layer 3 · Page 5 (/aktuelles/)
   Scope:   body#s-5  (Seite trägt zusätzlich .is-relaunch)
   Prefix:  ak-
   Zweck:   News-Seite an den LIVE-Relaunch-Look angleichen
            (Inter · Grün-Grau · weiße Cards) — NICHT die Doku-CI-v5.
   v5-ready: Lokale Tokens als Fallback-Kette (--forest → --green-800,
            --cream → #f5f5f7 …). Sobald das CI-v5-Fundament live ist,
            greifen die neuen Werte automatisch, ohne diese Datei zu ändern.
   Erstellt: 2026-07-28
   ============================================================================ */

body#s-5 {
  --ak-primary:     var(--forest,       var(--green-800));   /* #1B3C34 */
  --ak-primary-mid: var(--forest-mid,   var(--green-700));
  --ak-surface:     var(--white,        #ffffff);
  --ak-border:      var(--cream-3,      var(--gray-200));    /* #E5E7EB */
  --ak-ink:         var(--ink,          var(--gray-950));    /* #0A0A0B */
  --ak-body:        var(--muted,        var(--gray-600));    /* #4B5563 */
  --ak-meta:        var(--muted-light,  var(--gray-400));
  --ak-accent:      var(--accent-warm,  var(--accent));      /* Coral heute → Copper später */
  --ak-radius:      var(--radius-lg,    16px);
  --ak-cta-bg:      var(--forest,       #1C3829);            /* = Footer-Grün, damit beide Dunkelflächen matchen */
  --ak-measure:     900px;                                   /* Lesebreite der News-Karten */
}

/* Seiten-BG kommt aus .is-relaunch body (#f5f5f7). Graue Theme-Bänder auflösen. */
body#s-5 section.bc-grey { background: transparent; }

/* Container-Rhythmus zwischen den Bändern vereinheitlichen */
body#s-5 section[class*="frame-space"] { padding-top: 22px; padding-bottom: 22px; }

/* =========================================================================
   1) INTRO  — erste Section (H3 + Lead + Bild, 2-spaltig)
   ========================================================================= */
/* Nav-Freiraum: Theme setzt margin-top:170px — auf sinnvolles Maß reduzieren
   (Nav ist 90px fixed). Eigenes padding-top raus, sonst addiert es sich. */
body#s-5 section.frame-space-after-large:first-of-type { margin-top: 140px; padding-top: 0; }

body#s-5 section.frame-space-after-large:first-of-type h3 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ak-ink);
  margin: 0 0 18px;
}
body#s-5 section.frame-space-after-large:first-of-type p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ak-body);
}

/* Bilder (Intro + Newsletter) — NUR in Content-Sections, sonst trifft die Regel
   die Footer-Partnerlogos (footer .col img) und verzerrt sie (Radius/Shadow). */
body#s-5 section .col img {
  border-radius: var(--ak-radius);
  box-shadow: var(--shadow-md);
  height: auto;
  display: block;
}

/* =========================================================================
   2) NEWS-KATEGORIE-KARTEN  — bc-grey Bänder OHNE Button
      (Allgemeine News · Balingen · Frommern · Geislingen)
   ========================================================================= */
/* Karten-Container schmaler → bessere Lesebreite, zentriert */
body#s-5 section.bc-grey:not(:has(.contentbutton)) .con { max-width: var(--ak-measure); }

body#s-5 section.bc-grey:not(:has(.contentbutton)) .col {
  background: var(--ak-surface);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(24px, 4vw, 40px);
}

/* Kategorie-Überschrift (h4) — prominenter, dunkel, Sentence-Case */
body#s-5 section.bc-grey:not(:has(.contentbutton)) h4 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ak-border);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ak-ink);
}
body#s-5 section.bc-grey:not(:has(.contentbutton)) h4::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--ak-accent);
}

/* Fließtext in den Karten */
body#s-5 section.bc-grey:not(:has(.contentbutton)) p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ak-body);
  margin: 0 0 10px;
}
body#s-5 section.bc-grey:not(:has(.contentbutton)) p.ta-justify { text-align: left; }

/* Post-Titel: Absatz, dessen einziger Inhalt ein <strong> ist */
body#s-5 section.bc-grey:not(:has(.contentbutton)) p:has(> strong:only-child) {
  margin-top: 28px;
  margin-bottom: 6px;
}
body#s-5 section.bc-grey:not(:has(.contentbutton)) h4 + p:has(> strong:only-child) {
  margin-top: 0;
}
body#s-5 section.bc-grey:not(:has(.contentbutton)) p > strong:only-child {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ak-ink);
}

/* Inline-Bold im Fließtext bleibt dezent (kein Titel-Look) */
body#s-5 section.bc-grey:not(:has(.contentbutton)) p > strong:not(:only-child) {
  font-weight: 600;
  color: var(--ak-ink);
}

/* =========================================================================
   3) NEWSLETTER-BAND  — bc-grey Section MIT Button → grünes CTA-Band
   ========================================================================= */
body#s-5 section.bc-grey:has(.contentbutton) {
  background: var(--ak-cta-bg);        /* = Footer-Grün → einheitliche Dunkelfläche */
  border-radius: var(--ak-radius);
  margin-bottom: 56px;                 /* Abstand zum Footer */
}
body#s-5 section.bc-grey:has(.contentbutton) .con {
  padding-top: 44px;
  padding-bottom: 44px;
}
body#s-5 section.bc-grey:has(.contentbutton) h3 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 14px;
}
body#s-5 section.bc-grey:has(.contentbutton) p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  line-height: 1.6;
}
body#s-5 section.bc-grey:has(.contentbutton) .buttonblock { margin-top: 8px; }
body#s-5 section.bc-grey:has(.contentbutton) .contentbutton {
  float: none;
  display: inline-block;
  min-width: 0;
  margin: 8px 0 0;
  padding: 14px 32px;
  border-radius: 999px;
  background: #fff;
  color: var(--ak-primary);
  border: 2px solid #fff;
}
body#s-5 section.bc-grey:has(.contentbutton) .contentbutton:hover {
  background: rgba(255, 255, 255, 0.88);
  color: var(--ak-primary);
  border-color: rgba(255, 255, 255, 0.88);
  transform: translateY(-2px);
}

/* =========================================================================
   4) Trailing: leere Schluss-Section einklappen
   ========================================================================= */
body#s-5 section.frame-space-after-large:last-of-type:not(:has(img)):not(:has(h3)):not(:has(h4)) {
  display: none;
}

/* =========================================================================
   5) Responsive
   ========================================================================= */
@media (max-width: 767px) {
  body#s-5 section.frame-space-after-large:first-of-type { margin-top: 104px; }
  body#s-5 .row + .row { margin-top: 20px; }
  body#s-5 section.bc-grey:not(:has(.contentbutton)) .col { padding: 22px; }
}