/* =========================================================
   Blog (EXT:news)

   Schriftgroessen stehen bewusst in em, nicht in px: das A-A-A-Widget
   der Website setzt die Groesse am body (efa_fontsize.js schreibt dort
   ein Prozent-Mass). Feste px-Werte wuerden davon nichts mitbekommen.

   Ergaenzt main.css / bfa.css / responsive.css um die Bausteine,
   die es auf der Website bisher nicht gibt. Alles Vorhandene wird
   wiederverwendet und steht bewusst NICHT hier drin:

     Bild-Overlay      .tr-bg-highlight / .tr-img        (bfa.css)
     Baum mit Linie    .tree-img-with-line               (main.css)
     Farbkaesten       .c-wrap + .bg-primary/.bg-secondary(main.css)
     Akkordeon (FAQ)   .accordion-*                      (bfa.css)
     Buttons           .btn                              (main.css)
     Breadcrumb        .breadcrumb-item                  (bfa.css)

   Grundsatz wie auf der Quellseite: keine Rundungen. Radien gibt es
   nur an .btn (5px) und .hamburger_button (50px), beide aus main.css.
   ========================================================= */

/* --- Platzhalter, wenn kein Bild gepflegt ist ------------- */
.img-wrap .img-placeholder {
  display: block;
  width: 100%;
  padding-top: 56.25%;
  background-color: #f6a633;
}

/* --- Kategorie-Filter ------------------------------------ */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid #c8d4dc;
}
.blog-pill {
  display: inline-block;
  padding: 8px 18px;
  background-color: #e5ecf3;
  color: #004489;
  font-size: 0.8em;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.blog-pill:hover { background-color: #fef4e5; color: #f39000; text-decoration: none; }
.blog-pill.active { background-color: #004489; color: #fff; }

/* --- Empfohlener Beitrag --------------------------------- */
.blog-featured { margin-bottom: 56px; }
.blog-featured .card-group-item { margin-bottom: 0; }
.blog-featured .img-wrap { flex: 1 1 55%; }
.blog-featured .c-wrap { flex: 1 1 45%; padding: 30px 80px; align-self: center; }
.blog-featured h2 { margin-bottom: 15px; }
.blog-featured h2 a { color: inherit; text-decoration: none; }
.blog-featured h2 a:hover { color: #f39000; text-decoration: none; }
.blog-featured .btn { margin-top: 10px; }

/* --- Abschnittstitel ------------------------------------- */
.blog-section-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 5px solid #f39000;
}
.blog-section-title h2 { margin: 0; color: #004489; font-weight: 900; }
.blog-section-title .count { font-size: 0.8em; color: #6c757d; text-transform: uppercase; }

/* --- Beitragsraster -------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}
.blog-card { display: flex; flex-direction: column; background-color: #fff; }
.blog-card-media { display: block; }
.blog-card-body { display: flex; flex-direction: column; flex: 1; padding-top: 20px; }
.blog-card-cat {
  font-size: 0.7em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #f39000;
  margin-bottom: 8px;
}
.blog-card h3 {
  font-size: 1.1em;
  font-weight: 700;
  color: #004489;
  line-height: 1.3;
  margin-bottom: 10px;
}
.blog-card h3 a { color: inherit; text-decoration: none; }
.blog-card h3 a:hover { color: #f39000; text-decoration: none; }
.blog-card p { font-size: 0.9em; margin-bottom: 14px; flex: 1; }
.blog-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5ecf3;
}
/* „> LESEN" — dieselben Werte wie „> jetzt entdecken" auf der Startseite
   (.img-card .img-wrap a.link in main.css), nur in Orange statt Weiss.
   Die Regel dort ist auf .img-card beschraenkt, greift hier also nicht. */
.blog-readmore {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: #f39000;
  text-decoration: none;
  white-space: nowrap;
}
.blog-readmore span {
  font-size: 48px;
  line-height: 1;
  vertical-align: middle;
  margin-right: 5px;
}
.blog-readmore:hover { color: #004489; text-decoration: none; }

/* --- Kategorie-Marke und Metazeile ----------------------- */
.blog-category {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 20px;
  background-color: #e5ecf3;
  color: #004489;
  font-size: 0.7em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.7em;
  color: #6c757d;
  text-transform: uppercase;
}

/* --- Blaetternavigation ---------------------------------- */
.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 40px 0 56px;
}
.blog-pagination a,
.blog-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  background-color: #e5ecf3;
  color: #004489;
  font-size: 0.9em;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.blog-pagination a:hover { background-color: #fef4e5; color: #f39000; text-decoration: none; }
.blog-pagination .active { background-color: #004489; color: #fff; }
.blog-pagination .disabled { opacity: .4; }
.blog-pagination .ellipsis { background-color: transparent; color: #6c757d; }

/* --- Artikel --------------------------------------------- */
.blog-article-head { max-width: 900px; margin: 0 auto 32px; }
.blog-article-head h1 { margin-bottom: 25px; }
/* Einleitung in Fliesstextgroesse: die Website kennt keinen eigenen
   Vorspann-Stil, groesser gesetzt fiel sie aus dem Rahmen. */
.blog-lead { font-size: 1em; line-height: 1.4; margin-bottom: 24px; }
/* Die Zeile steht jetzt ueber der Ueberschrift — ohne Rahmen, und die
   Kategorie-Marke richtet sich an Datum und Lesezeit aus. */
.blog-article-head .blog-meta {
  align-items: center;
  margin-bottom: 20px;
}
.blog-article-head .blog-category { margin-bottom: 0; }

.blog-hero { margin-bottom: 32px; }
.blog-hero-caption {
  max-width: 900px;
  margin: 8px auto 0;
  font-size: 0.8em;
  font-style: italic;
  color: #6c757d;
}

.blog-body { max-width: 900px; margin: 0 auto; }
.blog-body h2 { margin-top: 48px; }
.blog-body h3 { margin-top: 32px; }
.blog-body p { margin-bottom: 20px; }
.blog-body ul,
.blog-body ol { margin: 0 0 20px 28px; }
.blog-body li { margin-bottom: 10px; }
.blog-body strong { color: #004489; font-weight: 700; }
.blog-body table { width: 100%; border-collapse: collapse; margin: 20px 0 28px; font-size: 0.9em; }
.blog-body th,
.blog-body td { border: 1px solid #c8d4dc; padding: 12px 14px; text-align: left; vertical-align: top; }
.blog-body th {
  background-color: #004489;
  color: #fff;
  font-size: 0.888em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.blog-body tbody tr:nth-child(even) { background-color: #e5ecf3; }

.blog-downloads { max-width: 900px; margin: 40px auto; padding: 30px 80px; }
.blog-downloads h5 {
  color: #004489;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  display: inline-block;
}
.blog-downloads ul { list-style: none; margin: 0; padding: 0; }
.blog-downloads li { margin-bottom: 8px; }

/* --- Abschluss-Aufruf ------------------------------------ */
.blog-cta {
  background-color: #004489;
  color: #fff;
  padding: 48px 40px;
  margin: 56px 0;
  text-align: center;
}
.blog-cta h3 { color: #fff; font-weight: 900; margin-bottom: 15px; }
/* auto-Raender, damit der schmalere Absatz im zentrierten Kasten
   tatsaechlich mittig sitzt und nicht links klebt */
.blog-cta p { color: #c8d4dc; max-width: 720px; margin-left: auto; margin-right: auto; }
.blog-phone {
  color: #fff;
  font-size: 1.3em;
  font-weight: 700;
  margin: 24px 0;
}
.blog-phone span {
  display: block;
  font-size: 0.615em;
  font-weight: 400;
  text-transform: uppercase;
  color: #c8d4dc;
  margin-bottom: 2px;
}
.blog-cta .btn { background-color: transparent; border: 1px solid #fff; }
.blog-cta .btn:hover { background-color: #fff; color: #004489; }

/* --- Weitere Beitraege / zurueck ------------------------- */
.blog-related { margin: 56px 0 0; }
.blog-related h2 { color: #004489; font-weight: 900; margin-bottom: 25px; }
.blog-back { margin: 40px 0; }

.blog-empty { padding: 40px 0; color: #6c757d; }

/* =========================================================
   Responsive — dieselben Haltepunkte wie responsive.css
   ========================================================= */
@media (max-width: 1600px) {
  .blog-featured .c-wrap { padding: 30px 50px; }
  .blog-downloads { padding: 30px 50px; }
}

@media (max-width: 1199px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .blog-featured .img-wrap,
  .blog-featured .c-wrap { flex: 1 1 100%; }
  .blog-featured .c-wrap { padding: 25px 30px; }
  .blog-downloads { padding: 25px 30px; }
  .blog-card h3 { font-size: 1em; }
  .blog-card p { font-size: 0.8em; }
}

@media (max-width: 767px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-cta { padding: 32px 20px; }
  .blog-body table { display: block; width: 100%; overflow-x: auto; }
  .blog-card-foot { flex-wrap: wrap; }
}

@media (max-width: 575px) {
  .blog-featured .c-wrap,
  .blog-downloads { padding: 20px; }
}

/* =========================================================
   Suchband im Seitenkopf (liegt in der Banner-Spalte, colPos 1)
   Gestaltung nach dem Kopf von mockup-blog-overview.html.
   ========================================================= */
.blog-searchband {
  /* derselbe Blauton wie die Videogalerie der Startseite
     (.video-gallery-main-slider-wrap in main.css) */
  background-color: #7fa0c4;
  padding: 60px 0 40px;
  position: relative;
  overflow: hidden;
}
/* Auf dem dunkleren Grund steht der Text weiss — so haelt es die Website
   auch in der Videogalerie. „Ratgeber" bleibt orange als Akzent. */
.blog-searchband h1 { color: #fff; }
.blog-searchband p { color: #fff; }
.blog-searchband .news-search-form form { border-color: #fff; }
.blog-searchband-inner {
  max-width: 1350px;
  width: 90%;
  margin: 0 auto;
  padding: 0 15px;
  text-align: center;
}
.blog-searchband h1 { margin-bottom: 25px; }
.blog-searchband h1 span { color: #f39000; }
.blog-searchband p {
  max-width: 900px;
  margin: 0 auto 32px;
  font-size: 1.3em;
}

.news-search-form { max-width: 640px; margin: 0 auto; }
.news-search-form form { display: flex; border: 2px solid #004489; background-color: #fff; }
.news-search-form input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 12px 18px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 1em;
  color: #4d5c68;
}
.news-search-form input[type="text"]:focus { outline: none; }
.news-search-form input[type="submit"] {
  border: none;
  padding: 0 25px;
  background-color: #004489;
  color: #fff;
  font-family: inherit;
  font-size: 1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease-in-out;
}
.news-search-form input[type="submit"]:hover { background-color: #f39000; }
.news-search-form .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1600px) {
  .blog-searchband p { font-size: 1.2em; }
}
@media (max-width: 991px) {
  .blog-searchband { padding: 32px 0 28px; }
  .blog-searchband p { font-size: 1.1em; }
}
@media (max-width: 575px) {
  .news-search-form form { flex-direction: column; }
  .news-search-form input[type="submit"] { padding: 12px 25px; }
}

/* Kennzeichnung KI-generierter Bilder — Pflichtangabe, aber zurueckhaltend:
   kleine helle Schrift unten rechts im Bild, kein Farbkasten. Der Schatten
   haelt sie auch auf hellen Motiven lesbar. */
.img-wrap .img-ai-label {
  position: absolute;
  right: 8px;
  bottom: 6px;
  z-index: 10;
  color: #fff;
  font-size: 0.55em;
  line-height: 1.2;
  letter-spacing: .3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
  pointer-events: none;
}

/* =========================================================
   Artikel mit Inhaltsverzeichnis

   Zwei Spalten: links die h2-Ueberschriften des Beitrags, rechts der
   Text. Beim Scrollen wird markiert, was schon gelesen ist. Hat ein
   Beitrag keine h2-Ueberschriften, greift .blog-layout-single und der
   Text laeuft ueber die volle Breite.
   ========================================================= */
.blog-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: start;
  max-width: 1350px;
  margin: 0 auto;
}
.blog-layout-single { grid-template-columns: 1fr; }
.blog-layout .blog-body { max-width: 900px; margin: 0; }

.toc {
  position: sticky;
  top: 140px;
  background-color: #e5ecf3;
  padding: 25px 30px;
  font-size: 0.8em;
}
.toc h5 {
  color: #004489;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  margin-bottom: 14px;
  display: inline-block;
}
.toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; }
.toc li {
  counter-increment: toc;
  margin: 0;
  border-bottom: 1px solid #fff;
  line-height: 1.3;
}
.toc li:last-child { border-bottom: 0; }
.toc li a {
  display: block;
  padding: 8px 0;
  color: #4d5c68;
  text-decoration: none;
  transition: color .15s ease-in-out;
}
.toc li a::before {
  content: counter(toc) ". ";
  color: #f39000;
  font-weight: 700;
}
.toc li a:hover { color: #004489; text-decoration: none; }

/* gelesen: nur gedaempft, die Nummer bleibt stehen */
.toc li.is-read a { color: #7fa0c4; }
.toc li.is-read a::before { color: #7fa0c4; }

/* gerade sichtbarer Abschnitt */
.toc li.is-current a { color: #004489; font-weight: 700; }
.toc li.is-current a::before { color: #f39000; }

.reading-progress {
  margin-top: 16px;
  height: 5px;
  background-color: #fff;
  overflow: hidden;
}
.reading-progress span {
  display: block;
  height: 100%;
  width: 0;
  background-color: #f39000;
  transition: width .2s ease-out;
}
.progress-label {
  margin-top: 6px;
  font-size: 0.75em;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Sprungziel nicht unter den klebenden Kopf schieben */
.blog-body h2,
.blog-body h3 { scroll-margin-top: 150px; }

@media (max-width: 1199px) {
  .blog-layout { grid-template-columns: 260px 1fr; gap: 32px; }
}
@media (max-width: 991px) {
  /* minmax(0,…): sonst zieht die breiteste Tabelle den Grid-Track auf */
  .blog-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .toc { position: static; }
  .blog-body h2,
  .blog-body h3 { scroll-margin-top: 130px; }
}

/* =========================================================
   Einheitliche Bildflaechen

   Ohne feste Vorgabe laeuft jedes Bild in seinem eigenen Format —
   auf der Uebersicht standen dadurch 226px, 232px und 310px hohe
   Karten nebeneinander. Der Rahmen gibt das Verhaeltnis vor, das
   Bild fuellt ihn per object-fit aus.
   ========================================================= */
.blog-card .img-wrap,
.blog-related .img-wrap { aspect-ratio: 16 / 9; }

.img-wrap > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Der Platzhalter fuellt denselben Rahmen — kein padding-top noetig,
   sobald das Seitenverhaeltnis am Rahmen haengt. */
.blog-card .img-wrap .img-placeholder,
.blog-related .img-wrap .img-placeholder,
.blog-featured .img-wrap .img-placeholder,
.blog-hero .img-wrap .img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding-top: 0;
}

.blog-featured .img-wrap { aspect-ratio: 4 / 3; }
.blog-hero .img-wrap { aspect-ratio: 1350 / 709; }

@media (max-width: 991px) {
  .blog-featured .img-wrap { aspect-ratio: 16 / 9; }
}

/* Empfehlung: eigener Rahmen statt eines zweiten .img-wrap — sonst greift
   die Seitenverhaeltnis-Regel doppelt und das Bild steht im Orange. */
.blog-featured-media { display: block; align-self: stretch; }
.blog-featured-media > a { display: block; height: 100%; }
.blog-featured-media .img-wrap { height: 100%; }

/* Trefferzahl im Filter braucht Abstand — sonst steht da „HOW-TO GUIDE1". */
.blog-pill .count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  background-color: #fff;
  color: #004489;
  font-size: 0.75em;
  font-weight: 700;
}
.blog-pill.active .count { background-color: #f39000; color: #fff; }

/* Haeufige Fragen im Artikel — Akkordeon-Gestaltung kommt aus bfa.css,
   hier nur die Einbettung in den Beitrag. */
.blog-faq { max-width: 900px; margin: 56px auto 0; }
/* keine eigene h2-Regel: die Ueberschrift soll exakt wie auf der
   FAQ-Seite aussehen, also die Standard-h2 der Website. */
.blog-faq-more { margin-top: 24px; }

/* Auf der Detailseite steht der KI-Hinweis links: unten rechts sitzt dort
   der Baum mit der orangenen Linie, beides zusammen wuerde sich ins Gehege
   kommen. In den Karten der Uebersicht bleibt er rechts. */
.blog-hero .img-wrap .img-ai-label {
  left: 8px;
  right: auto;
}

/* =========================================================
   Akut-Hilfe und Seitenspalte
   ========================================================= */
.blog-emergency {
  background-color: #fef4e5;
  padding: var(--box-pad, 30px 40px);
  margin: 0 auto 40px;
  max-width: 900px;
}
.blog-emergency h4 { color: #004489; font-weight: 700; margin-bottom: 6px; }
.blog-emergency p { margin-bottom: 12px; }
.blog-emergency .phone-list { list-style: none; margin: 0; padding: 0; }
.blog-emergency .phone-list li {
  margin-bottom: 6px;
  font-weight: 700;
  color: #004489;
}
.blog-emergency .phone-list li span {
  display: block;
  font-size: 0.7em;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #6c757d;
}

/* schmale Fassung fuer die Seitenspalte */
.blog-emergency-kompakt {
  max-width: none;
  margin: 0 0 20px;
  padding: 25px 30px;
}

.blog-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
.blog-sidebar { position: sticky; top: 140px; }
.blog-sidebar-block { background-color: #e5ecf3; padding: 25px 30px; margin-bottom: 20px; }
.blog-sidebar-block h5 {
  color: #004489;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  margin-bottom: 12px;
  display: inline-block;
}
.blog-sidebar-block ul { list-style: none; margin: 0; padding: 0; }
.blog-sidebar-block li { padding: 8px 0; margin: 0; border-bottom: 1px solid #fff; }
.blog-sidebar-block li:last-child { border-bottom: 0; }
.blog-sidebar-block a { color: #4d5c68; font-size: 0.9em; text-decoration: none; }
.blog-sidebar-block a:hover { color: #f39000; }

/* Mit Seitenspalte bleibt fuer das Raster weniger Platz */
@media (min-width: 992px) {
  .blog-with-sidebar .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1199px) {
  .blog-with-sidebar { grid-template-columns: 1fr 280px; gap: 28px; }
}
@media (max-width: 991px) {
  .blog-with-sidebar { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
}

/* Im Artikel steht Ort und Nummer in einer Zeile; der Ort bekommt eine feste
   Mindestbreite, damit die Nummern untereinander fluchten. In der schmalen
   Seitenspalte bleibt es zweizeilig — dort waere nebeneinander zu eng. */
/* Alle drei Standorte nebeneinander in einer Reihe. Bricht auf schmalen
   Bildschirmen von selbst um, dann stehen sie wieder untereinander. */
.blog-emergency .phone-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
}
/* Nummer unter dem Standort: als schmale Spalten passen alle drei
   Standorte nebeneinander in eine Zeile. Nebeneinander gesetzt waren
   sie zusammen ~870px breit, verfuegbar sind 820px. */
.blog-emergency .phone-list li {
  display: block;
  margin-bottom: 0;
  white-space: nowrap;
}
.blog-emergency .phone-list li span {
  display: block;
  min-width: 0;
  margin-bottom: 2px;
}
.blog-emergency-kompakt .phone-list li { display: block; }
.blog-emergency-kompakt .phone-list li span { display: block; min-width: 0; }

@media (max-width: 575px) {
  .blog-emergency .phone-list li span { min-width: 0; }
}

/* Abschnittsüberschriften im Beitrag blau statt im Grau der Website (#706f6f).
   Betrifft nur den Blog — h3 der uebrigen Seiten bleibt unveraendert. */
/* Nur die Ueberschriften IM Fliesstext und in den FAQ. Nicht pauschal
   .blog-article h3 — darin liegt auch der blaue Abschluss-Kasten, dessen
   Ueberschrift weiss bleiben muss. */
.blog-body h3,
.blog-faq h3 { color: #004489; }

/* Nummern im Inhaltsverzeichnis grau statt orange. Der gerade sichtbare
   Abschnitt bleibt trotzdem erkennbar: sein Text steht blau und fett. */
.toc li a::before { color: #706f6f; }
.toc li.is-current a::before { color: #004489; }

/* Baum im Suchband ohne Scroll-Animation: die Klassen „animated" und die
   Linie stehen bis zum Ausloesen auf opacity 0, und ganz oben auf der Seite
   feuert der Ausloeser nicht — der Baum waere unsichtbar geblieben.
   Deshalb hier der Endzustand direkt. */
.blog-searchband .tree-statisch .line {
  width: 75%;
  opacity: 1;
}