/**
 * News-Liste (View-Mode bk_news_row).
 *
 * Eigene Datei mit eigener Library - news_overview.css wird vom Bestandsdesign
 * auf allen Seiten geladen, eine Regel dort wirkt ueberall mit (§ 3.2 DW).
 *
 * Alle Selektoren haengen an .bk-news-list oder .bk-news-row und sind bewusst
 * als direkte Kinder geschrieben, wo nur eine Ebene gemeint ist (§ 5.4 DW).
 */

/* Seitenueberschrift (h1). Groesse kommt aus .semi-h1 in basic.css. */
.bk-news-overview__title {
  margin-top: 68px;
  margin-bottom: 48px;
}

/* Das a im Aufmacher liegt seit der Korrektur der Verschachtelung INNERHALB von
   .first-news und umschliesst zwei gefloatete Spalten. Als Inline-Element haette
   es keine Hoehe - deshalb Block plus Clearfix. */
.bk-news-overview .first-news > a {
  display: block;
}

.bk-news-overview .first-news > a::after {
  content: "";
  display: table;
  clear: both;
}

/* Optisch versteckt, im DOM und fuer Screenreader vorhanden. Weder das Theme
   noch eine hier geladene Core-Library bringt eine solche Klasse mit - deshalb
   eine eigene statt einer Abhaengigkeit auf core/components/visually-hidden.
   Kein display:none und kein visibility:hidden: beides nimmt den Text auch
   Screenreadern weg. */
.bk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Aufmacher-Headline ist seit dem h1-Umbau ein h3 mit .semi-h1.
   css/news.css:56 stylt ".first-news a h1.main-news.title" - die Regel greift
   damit nicht mehr. Hier nachgezogen statt dort geaendert: news.css ist ein
   geteiltes Asset und wirkt auf allen Seiten mit (§ 3.2 DW).
   Vorher: Farbe und Transition kamen aus news.css am h1-Tag. */
.first-news a h3.main-news.title {
  color: #07262d;
  transition: all .25s ease-in-out;
}

/* Abstand unter dem Aufmacher halbiert: 136px -> 68px.
   Die Vorgabe steht in css/news_overview.css:25 (padding: 68px 0 136px 0) und
   gilt fuer beide Designs. Ueberschrieben wird sie hier ueber die Wurzelklasse
   .bk-news-overview, die nur das neue Design traegt - so bleibt der
   Bestandsweg unveraendert (§ 3.2 DW). Die Klasse hebt die Spezifitaet ueber
   die der Originalregel. */
.bk-news-overview.node--type--news-overview .first-news {
  padding-bottom: 68px;
}

/* Ueberschrift ueber den Kacheln. Eigene Regel, weil sie ausserhalb von
   .bk-news-list liegt - die Regeln dort treffen sie nicht.
   Kein margin-top: nach oben ist durch den Aufmacher genug Platz. */
.bk-news-highlights__title {
  margin-bottom: 48px;
}

/* margin-bottom am Container, nicht padding an der letzten Zeile: Sonst
   rutschte deren Trennlinie nach unten weg und die Liste haette unten einen
   anderen Abschluss als zwischen den Zeilen. */
.bk-news-list {
  margin-top: 64px;
  margin-bottom: 96px;
}

.bk-news-list__title {
  margin-bottom: 48px;
}

.bk-news-list__row {
  border-bottom: 1px solid #E3E7EB;
}

.bk-news-list__row:first-of-type {
  border-top: 1px solid #E3E7EB;
}

/* Die Zeile selbst ist der Link. */
.bk-news-list a.bk-news-row {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px 0;
  text-decoration: none;
}

.bk-news-row__image {
  flex: 0 0 240px;
  max-width: 240px;
}

.bk-news-row__image > picture > img,
.bk-news-row__image img {
  display: block;
  width: 100%;
  height: auto;
}

.bk-news-row__content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Kategorie-Badge. Farbe und Hintergrund setzt das Template inline aus der
   Taxonomie ci_farben (§ 3 BG); die Werte hier sind nur der Rueckfall, wenn kein
   Term gesetzt ist. Wer die Farbe aendern will, aendert den Term - nicht das CSS. */
.bk-news-row__type {
  display: inline-block;
  padding: 2px 8px;
  margin-bottom: 8px;
  background-color: #EBF5FF;
  color: #07262D;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bk-news-row__headline {
  margin: 0;
  color: #07262D;
  transition: color .25s ease-in-out;
}

/* ---------------------------------------------------------------------------
   Hover. Die ganze Zeile ist der Link - ohne Rueckmeldung sieht sie aus wie
   Text. Bewusst zurueckhaltend: Das Bild zoomt leicht, der Pfeil wandert, der
   Hintergrund wird minimal getoent. Die Titelfarbe kommt NICHT von hier,
   sondern aus dem node-eigenen <style> im Template - sie ist die CI-Farbe der
   jeweiligen News und kann pro Beitrag verschieden sein.
   --------------------------------------------------------------------------- */

.bk-news-row__image {
  overflow: hidden;
}

.bk-news-row__image img {
  transition: transform .35s ease-in-out;
}

.bk-news-list a.bk-news-row:hover .bk-news-row__image img {
  transform: scale(1.06);
}

.bk-news-row__chevron {
  transition: transform .25s ease-in-out, color .25s ease-in-out;
}

.bk-news-list a.bk-news-row:hover .bk-news-row__chevron {
  transform: rotate(45deg) translate(3px, -3px);
}

.bk-news-list__row {
  transition: background-color .25s ease-in-out;
}

.bk-news-list__row:hover {
  background-color: #F7FAFC;
}

/* Tastaturbedienung: derselbe Zustand wie beim Hover, sonst sieht man beim
   Durchtabben nicht, wo man ist. */
.bk-news-list a.bk-news-row:focus-visible .bk-news-row__chevron {
  transform: rotate(45deg) translate(3px, -3px);
}

/* Grossschreibung gehoert hierher und nicht ins Datumsmuster: bk_news_date ist
   uebersetzbare Config, ein grossgeschriebenes Muster waere in jeder Sprache
   falsch. */
.bk-news-row__date {
  flex: 0 0 auto;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 0.875rem;
  color: #6B7785;
}

/* Pfeil ohne Bilddatei - so reist die Library ohne Asset mit. */
.bk-news-row__chevron {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

@media (max-width: 767px) {
  .bk-news-list a.bk-news-row {
    gap: 16px;
    flex-wrap: wrap;
  }

  .bk-news-row__image {
    flex: 0 0 96px;
    max-width: 96px;
  }

  .bk-news-row__date {
    flex: 1 1 100%;
    order: 3;
  }

  .bk-news-row__chevron {
    display: none;
  }
}