/* Branchen-News: Karten im #boxcontent-System der Startseite (siehe
   style.css / content-refresh.css), gemeinsam genutzt von News-Test.html
   (Teaser, eine Meldung zur Zeit) und News-Alle.html (komplette Liste).
   Muss NACH content-refresh.css eingebunden werden. */

/* Karten ohne Themen-Icon links (kein passendes Icon pro Newsquelle) - daher
   die Einrueckung von h3/p zuruecksetzen. Volle Breite statt der
   Standard-Halbbreite von #boxcontent article: Praxisleitfaden ist als
   einzelne (weil ungerade) Karte in seiner Zeile ebenfalls volle Breite. */
#boxcontent .ib-news-card {
  width: 100%;
}
#boxcontent .ib-news-card h3,
#boxcontent .ib-news-card p { margin-left: 0; }

/* News-Überschrift heller/auffälliger als die dunklen Titel-Boxen der anderen
   Karten - weiss statt dunkelgrau, damit der News-Bereich staerker heraussticht.
   Eigene, spezifischere Regel statt #boxcontent article h3 a zu aendern (das
   wuerde auch Automatenstoerung/Praxisleitfaden betreffen). */
#boxcontent .ib-news-card h3 a {
  color: #1a1a1a;
  background-color: #ffffff;
  border: 1px solid #ddd6c3;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
#boxcontent .ib-news-card .ib-news-quelle {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #bf0000;
  margin: 0 0 8px;
}
/* Kleines "RSS"-Label: kennzeichnet Meldungen, die aus einem RSS-Feed
   stammen (im Gegensatz zu gescrapten Quellen). */
#boxcontent .ib-news-card .ib-news-rss {
  display: inline-block;
  margin: 0 0 8px 8px;
  padding: 1px 7px;
  border: 1px solid #bbb;
  border-radius: 100px;
  color: #767676;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: .06em;
  line-height: 1.5;
  vertical-align: top;
}
#boxcontent .ib-news-card .ib-news-datum {
  font-size: 12.5px;
  color: #888;
  margin: 0 0 10px;
  line-height: 1.4;
  font-family: 'Open Sans', sans-serif;
}
#boxcontent .ib-news-card p.ib-news-text { margin-top: 4px; }

.ib-news-empty, .ib-news-error {
  font-family: 'Open Sans', sans-serif;
  color: #767676;
  padding: 30px 20px;
  text-align: center;
  width: 100%;
}
.ib-news-error { color: #bf0000; }

/* ---------- Teaser: eine Meldung zur Zeit, per Ueberblendung im Wechsel ---------- */
#boxcontent .ib-news-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 28px;
  align-items: start;
  position: relative;
  /* ersetzt den sonst statischen roten Akzentstreifen (#boxcontent article) durch die
     laufende Fortschrittsanzeige unten - gleiche Farbe/Dicke, nur animiert. */
  border-top: none;
}

/* Laufeffekt der roten Designlinie: fuellt sich waehrend eine Meldung angezeigt wird von
   links nach rechts, exakt in deren Anzeigedauer (siehe dauerFuerItem()/zeige() in
   news-render.js). Kommt sie rechts an, blitzt "Alle News anzeigen" kurz auf (siehe unten). */
.ib-news-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: #bf0000;
}
.ib-news-progress.laeuft {
  animation-name: ib-news-lauf;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes ib-news-lauf {
  from { width: 0; }
  to { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ib-news-progress { display: none; }
}
/* Alle Folien liegen in derselben Grid-Zelle uebereinander: die Karte ist so
   immer so hoch wie die laengste Meldung, es gibt keine Hoehensprünge beim
   Wechsel. */
.ib-news-slides { display: grid; overflow: hidden; transition: height .4s ease; }
.ib-news-slide {
  grid-area: 1 / 1;
  align-self: start;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.ib-news-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .ib-news-slide, .ib-news-slide.is-active { transition: none; }
}

/* Link "Alle News anzeigen" rechts in der Karte - gleiche dunkle Pill-Optik
   wie die Titel-Links der anderen Karten. */
#boxcontent .ib-news-teaser a.ib-news-alle {
  display: inline-block;
  white-space: nowrap;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #EBE8DE;
  background-color: #333333;
  font-weight: bold;
  font-size: 13px;
  line-height: 1.35;
  padding: 8px 14px;
  border-radius: 10px 0 6px 0;
  transition: all .25s ease;
  /* auf Hoehe des Endes der zweiten Vorschauzeile statt mittig in der Karte */
  margin-top: 140px;
}
#boxcontent .ib-news-teaser a.ib-news-alle:hover { color: #bf0000; }

@media (max-width: 700px) {
  #boxcontent .ib-news-teaser { grid-template-columns: 1fr; row-gap: 14px; }
  #boxcontent .ib-news-teaser a.ib-news-alle { justify-self: end; margin-top: 0; }
}

/* ---------- Liste (Unterseite "Alle News"): Karten untereinander ---------- */
#boxcontent .ib-news-liste {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Der Praxisleitfaden hatte volle Breite nur deshalb, weil er die letzte
   (ungerade) Karte war (siehe content-refresh.css). Mit der News-Karte
   darunter ist er das nicht mehr - also die volle Breite fest zuweisen. */
#boxcontent article.is-new {
  width: 100%;
}

/* "NEWS"-Tag an derselben Stelle und im selben Stil wie das "NEU"-Tag des
   Praxisleitfadens (siehe content-refresh.css, article.is-new::after).
   Nur am Teaser, nicht an den Karten der Unterseite "Alle News". */
#boxcontent article.ib-news-teaser::after {
  content: "NEWS";
  position: absolute;
  top: -12px;
  right: 18px;
  background: #bf0000;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 100px;
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
/* Kurzes Aufblitzen des "NEWS"-Badges, sobald die laufende Designlinie oben rechts genau
   dort ankommt (siehe starteFortschritt()/animationend in news-render.js). */
#boxcontent article.ib-news-teaser.ib-news-blitz::after {
  animation: ib-news-badge-blitz .6s ease;
}
@keyframes ib-news-badge-blitz {
  0%, 100% { box-shadow: 0 3px 8px rgba(0,0,0,.25); transform: scale(1); }
  40% { box-shadow: 0 3px 8px rgba(0,0,0,.25), 0 0 16px 5px rgba(191,0,0,.75); transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  #boxcontent article.ib-news-teaser.ib-news-blitz::after { animation: none; }
}

/* Eigene Meldungen (aus dem Backend) leicht hervorheben - dezenter Hintergrundton, damit sie
   sich von den automatisch gesammelten Verbandsmeldungen abheben (kein Rahmen/Streifen, der
   bei eigenen Meldungen mit Bild unschoen ueberlagern wuerde). */
.ib-news-eigen {
  background: rgba(191, 0, 0, .045);
  border-radius: 4px;
}

/* Eigene Meldungen aus dem Backend: optionales Bild links, Zeilenumbrueche im Text bleiben erhalten */
#boxcontent .ib-news-card .ib-news-bild {
  float: left;
  max-width: 130px;
  max-height: 96px;
  width: auto;
  height: auto;
  margin: 0 18px 8px 0;
  border-radius: 4px;
}
.ib-news-slide, #boxcontent .ib-news-liste article.ib-news-card { display: flow-root; }
#boxcontent .ib-news-card p.ib-news-text { white-space: pre-line; }

/* Sehr lange Texte im Wechsler kuerzen (der volle Text steht unter "Alle News") */
.ib-news-teaser .ib-news-slide p.ib-news-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  margin-bottom: 0;
}
@media (max-width: 700px) {
  .ib-news-teaser .ib-news-slide p.ib-news-text { -webkit-line-clamp: 8; }
}
@media (prefers-reduced-motion: reduce) { .ib-news-slides { transition: none; } }