/* =====================================================================
   Aktuelles — Meldungen und Übersicht.

   Eigene Datei wie beim Handbuch: Die Seiten unter /aktuelles/ erzeugt
   tools/aktuelles-bauen.mjs, am Rechner soll dafür niemand schrauben
   müssen. Alle Farben und Schriften kommen aus den Token von app.css,
   Hell- und Dunkelmodus laufen deshalb ohne Zusatzarbeit mit.

   app.css MUSS vor dieser Datei eingebunden werden.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Kopf eines Beitrags. Titel sind ganze Sätze, keine Schlagworte —
   deshalb kleiner als die Seitentitel der Rechner und ohne Versalien,
   sonst füllt eine Meldung auf dem Handy den ganzen ersten Bildschirm.
   --------------------------------------------------------------------- */

.hero--beitrag .hero__text { max-width: 46rem; }
.hero--beitrag .hero__title {
  font-size: clamp(1.75rem, 1.25rem + 2.3vw, 2.9rem);
  line-height: 1.12;
  text-transform: none;
  letter-spacing: -0.01em;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
}

.akt__spur,
.akt__meta {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--auf-gruen, var(--tx-2));
}
.akt__spur { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; margin: 0 0 0.5rem; }
.akt__spur a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--amber-flaeche);
  text-underline-offset: 4px;
  padding: 0.95rem 0;           /* Tippfläche: mit Zeilenhöhe 44px */
}
.akt__spur a:hover { color: var(--amber-flaeche); }
.akt__spur span {
  border: 1px solid currentColor;
  border-radius: var(--r-pille);
  padding: 0.12rem 0.6rem;
  opacity: 0.85;
}
.akt__meta { margin: 1.3rem 0 0; opacity: 0.85; }

/* ---------------------------------------------------------------------
   Lesespalte
   --------------------------------------------------------------------- */

.akt { padding: clamp(2.5rem, 7vh, 4.5rem) 0 clamp(3rem, 8vh, 5rem); }
/* Linksbündig an der Kante von Logo und Titel, wie die übrigen Seiten —
   eine mittige Spalte stünde neben dem linksbündigen Kopf schief. */
.akt__spalte > * { max-width: 46rem; }

.akt__kurz {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sage);
  border-radius: var(--r-s);
  padding: 1.2rem 1.4rem 1.3rem;
  margin: 0 0 2.4rem;
  box-shadow: var(--schatten);
}
.akt__kurz h2 {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 0.7rem;
}
.akt__kurz ul { margin: 0; padding-left: 1.15rem; }
.akt__kurz li { margin: 0.45rem 0; color: var(--tx); line-height: 1.55; }
.akt__kurz li::marker { color: var(--sage); }

.akt__text { color: var(--tx-2); font-size: 1.04rem; line-height: 1.72; }
.akt__text > :first-child { margin-top: 0; }
.akt__text p { margin: 0 0 1.15rem; }
.akt__text h2 {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--tx);
  margin: 2.4rem 0 0.8rem;
  text-wrap: balance;
  scroll-margin-top: 6rem;
}
.akt__text h3 {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tx);
  margin: 1.8rem 0 0.5rem;
}
.akt__text strong { color: var(--tx); font-weight: 600; }
.akt__text ul, .akt__text ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.akt__text li { margin: 0.4rem 0; }
.akt__text li::marker { color: var(--sage); }
.akt__text a,
.akt__ki a,
.akt__kurz a {
  color: var(--tx);
  text-decoration: underline;
  text-decoration-color: var(--amber-dim);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.akt__text a:hover,
.akt__ki a:hover,
.akt__kurz a:hover { color: var(--amber); }
.akt__text blockquote {
  margin: 1.6rem 0;
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 3px solid var(--amber-flaeche);
  color: var(--tx);
  font-style: italic;
}
.akt__text blockquote p { margin: 0; }

/* Der KI-Hinweis steht bewusst im Lesefluss und nicht im Fuß: Er gehört
   zur Meldung (Art. 50 Abs. 4 KI-Verordnung), nicht zur Website. */
.akt__ki {
  margin: 2.6rem 0 0;
  padding: 0.9rem 1.1rem;
  background: var(--feld);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  color: var(--tx-3);
  font-size: 0.84rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------
   Meldungsliste — Übersicht, „Weitere Meldungen" und der Anriss auf der
   Alimentationsseite benutzen dieselbe Karte.
   --------------------------------------------------------------------- */

.akt-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.akt-liste--gross { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }

.akt-karte {
  position: relative;
  height: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.2rem, 2vw, 1.6rem);
  box-shadow: var(--schatten);
  transition: transform 0.25s var(--e-expo), box-shadow 0.25s var(--e-smooth),
              border-color 0.25s var(--e-smooth);
}
.akt-karte:hover,
.akt-karte:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--schatten-hoch);
  border-color: var(--sage);
}
.akt-karte__meta {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin: 0 0 0.6rem;
}
.akt-karte__meta span { color: var(--sage); }
.akt-karte__titel {
  font-family: var(--f-display);
  font-size: 1.12rem;
  line-height: 1.25;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tx);
  margin: 0 0 0.5rem;
  padding: 0;
  border: 0;
  text-wrap: balance;
}
/* Der Strich vor jeder h2 (app.css) gehört zu Abschnittstiteln, nicht in Karten. */
.akt-karte__titel::before, .akt-weiter__titel::before, .akt__kurz h2::before { content: none; display: none; }
.akt-liste--gross .akt-karte__titel { font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.5rem); }
.akt-karte__titel a { color: inherit; text-decoration: none; }
/* Die ganze Karte ist klickbar, der Link bleibt trotzdem ein echter Link. */
.akt-karte__titel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.akt-karte__titel a:focus-visible { outline: none; }
.akt-karte:focus-within { outline: 2px solid var(--amber-flaeche); outline-offset: 2px; }
.akt-karte:hover .akt-karte__titel { color: var(--sage-tief); }
:root[data-theme="dark"] .akt-karte:hover .akt-karte__titel { color: var(--amber); }
.akt-karte__text { color: var(--tx-2); font-size: 0.92rem; line-height: 1.55; margin: 0; }

/* Knopf unter dem Kartentext: app.css nimmt Absätzen in .recht__cols den
   Abstand, der Knopf ragte deshalb in die letzte Textzeile. */
.recht__cols p + p:has(> .btn) { margin-top: 1.1rem; }
.recht__cols .btn { min-height: 44px; display: inline-flex; align-items: center; }
.akt-weiter .recht__cols { margin-bottom: 3rem; }

.akt-weiter__titel {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tx);
  margin: 0.4rem 0 1.1rem;
}
.akt-weiter__alle { margin: 1.4rem 0 0; }
.akt-weiter__alle a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--tx);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--amber-dim);
  text-underline-offset: 4px;
}
.akt-weiter__alle a::after { content: "→"; margin-left: 0.45rem; transition: transform 0.25s var(--e-expo); }
.akt-weiter__alle a:hover { color: var(--amber); }
.akt-weiter__alle a:hover::after { transform: translateX(4px); }

.akt--uebersicht .akt__ki { max-width: 52rem; }

@media (prefers-reduced-motion: reduce) {
  .akt-karte, .akt-weiter__alle a::after { transition: none; }
  .akt-karte:hover, .akt-karte:focus-within { transform: none; }
  .akt-weiter__alle a:hover::after { transform: none; }
}

@media print {
  .akt-weiter, .akt-anriss { display: none !important; }
  .akt__text a { text-decoration: none; }
}