/* =============================================================================
   HOME4MOTION Kids - Blog module: public stylesheet
   File: assets/blog.css

   Scoping
   -------
   Every rule lives under .blog-page (overview) or .blog-artikel-page (detail),
   following the .danke-page pattern already used in this project. Nothing here
   touches the global header, footer or button styles - those come from
   assets/style.php / styles.css and must stay the single source of truth.

   Design tokens
   -------------
   The colour, font and radius variables (--green-*, --gold-*, --cream-*,
   --radius-btn, --header-h, --max) are inherited from the site stylesheet.
   Only the blog category colours are defined here, because they have no
   equivalent in the existing design system.

   NOTE FOR BACKEND COLLEAGUE: if brand colours become admin-editable through
   assets/style.php, move the --cat-* block there as well and delete it here.
   ============================================================================= */

:root {
  /* Category colours, aligned with the therapy-area palette of the Kids site */
  --cat-praxis: #91ABDA;
  --cat-intensiv: #C47A3A;
  --cat-team: #958FB7;
  --cat-news: #EBC35F;
  --cat-artikel: #F3A69C;
}

/* =============================================================================
   1. SHARED BLOG COMPONENTS
   ============================================================================= */

.blog-page .cat-badge,
.blog-artikel-page .cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 0;
}
.blog-page .cat-badge .dot,
.blog-artikel-page .cat-badge .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Tag chips double as links, so they need the reset for <a> */
.blog-page .tag-chip,
.blog-artikel-page .tag-chip {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--gold-light);
  color: var(--gold-deeptext);
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.blog-page .tag-chip:hover,
.blog-artikel-page .tag-chip:hover { border-color: var(--gold-dark); }
.blog-page .tag-chip.active {
  background: var(--gold-main);
  color: var(--green-deepest);
}
/* The active chip removes itself from the filter, so show that affordance */
.blog-page .tag-chip.active::after { content: " \00d7"; font-weight: 700; }

/* Article cards - used on the overview, in "related" and in search results */
.blog-page .article-card,
.blog-artikel-page .article-card {
  position: relative;
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--cream-border);
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.blog-page .article-card:hover,
.blog-artikel-page .article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(42, 58, 26, .12);
}
/* The whole card is clickable via a stretched link, so keyboard focus must show
   on the card, not on an invisible 1px anchor. */
.blog-page .article-card:focus-within,
.blog-artikel-page .article-card:focus-within {
  outline: 3px solid var(--green-main);
  outline-offset: 2px;
}
.blog-page .card-link,
.blog-artikel-page .card-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* Empty link that covers the card. The accessible name comes from the title
     via aria-labelledby, so screen readers do not announce an empty link. */
}
.blog-page .card-link:focus-visible,
.blog-artikel-page .card-link:focus-visible { outline: none; }

.blog-page .article-card.card-lg { flex-direction: row; }
@media (max-width: 640px) { .blog-page .article-card.card-lg { flex-direction: column; } }

.blog-page .card-img,
.blog-artikel-page .card-img {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--green-mid);
  overflow: hidden;
}
.blog-page .article-card.card-lg .card-img { width: 46%; aspect-ratio: auto; }
@media (max-width: 640px) {
  .blog-page .article-card.card-lg .card-img { width: 100%; aspect-ratio: 16 / 10; }
}
.blog-page .card-img img,
.blog-artikel-page .card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-page .card-img .img-placeholder,
.blog-artikel-page .card-img .img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  background: var(--green-light);
}

.blog-page .card-body,
.blog-artikel-page .card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.blog-page .article-card.card-lg .card-body { padding: 26px 30px; }
.blog-page .card-title,
.blog-artikel-page .card-title { font-size: 19px; }
.blog-page .article-card.card-lg .card-title { font-size: 25px; }
.blog-page .card-title a,
.blog-artikel-page .card-title a { color: inherit; }
.blog-page .card-excerpt,
.blog-artikel-page .card-excerpt {
  color: var(--text-mid);
  font-size: 13.8px;
  line-height: 1.55;
  flex: 1;
}
.blog-page .card-meta,
.blog-artikel-page .card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--cream-border);
}
.blog-page .avatar,
.blog-artikel-page .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--green-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  overflow: hidden;
}
.blog-page .avatar img,
.blog-artikel-page .avatar img { width: 100%; height: 100%; object-fit: cover; }
.blog-page .meta-text,
.blog-artikel-page .meta-text { font-size: 12.3px; color: var(--text-muted); line-height: 1.4; }
.blog-page .meta-text b,
.blog-artikel-page .meta-text b { color: var(--text-mid); font-weight: 600; }
.blog-page .meta-sep, .blog-artikel-page .meta-sep { opacity: .5; }
.blog-page .read-time,
.blog-artikel-page .read-time {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  font-size: 11.5px;
  color: var(--green-main);
  font-weight: 700;
  background: var(--green-light);
  padding: 4px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

/* =============================================================================
   2. OVERVIEW PAGE
   ============================================================================= */

.blog-page .blog-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--green-light) 0%, var(--cream-bg) 100%);
  padding: 56px 0 40px;
}
.blog-page .blog-hero .label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--green-main);
  margin-bottom: 10px;
}
.blog-page .blog-hero p.lead {
  /* Auf Wunsch der Kundin 1200 Pixel statt 620 — der Kopfbereich wirkte sonst
     schmal gegenueber den Artikelkarten darunter, die die volle Breite nutzen. */
  max-width: 1200px;
  color: var(--text-mid);
  margin-top: 14px;
  font-size: 16px;
}

/* Decorative animal layer - part of the Kids identity, positioned per page */
.blog-page .deko-tier {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: .85;
}
@media (prefers-reduced-motion: no-preference) {
  .blog-page .deko-tier { transition: transform .4s ease; }
}
@media (max-width: 720px) { .blog-page .deko-tier { display: none; } }

/* Search */
.blog-page .search-box { position: relative; max-width: 480px; margin-top: 26px; }
.blog-page .search-box input {
  width: 100%;
  padding: 15px 46px 15px 48px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--cream-border);
  background: var(--white);
  font-size: 14.5px;
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(42, 58, 26, .06);
}
.blog-page .search-box input:focus { outline: none; border-color: var(--green-main); }
.blog-page .search-box .search-ico {
  position: absolute; left: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 15px; opacity: .5;
  pointer-events: none;
}
/* Reset button, only visible while a query is present */
.blog-page .search-box .search-clear {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border: none; background: transparent;
  border-radius: 50%;
  font-size: 16px; line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.blog-page .search-box .search-clear:hover { background: var(--cream-bg); color: var(--text-primary); }

/* Category tabs */
.blog-page .cat-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.blog-page .cat-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius-btn);
  font-size: 13.5px; font-weight: 600;
  background: var(--white);
  border: 1px solid var(--cream-border);
  color: var(--text-mid);
  cursor: pointer;
  transition: all .18s;
}
.blog-page .cat-tab .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.blog-page .cat-tab:hover { border-color: var(--green-main); color: var(--green-deepest); }
.blog-page .cat-tab.active {
  background: var(--green-deepest);
  border-color: var(--green-deepest);
  color: var(--white);
}
.blog-page .cat-tab.active .dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.blog-page .cat-tab .cat-count { font-weight: 400; opacity: .6; font-size: 12px; }

.blog-page .tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.blog-page .tag-row .tag-more {
  background: transparent;
  border: 1px dashed var(--cream-border);
  color: var(--text-muted);
}

/* Active filter summary + reset */
.blog-page .filter-status {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-mid);
}
.blog-page .filter-reset {
  font-weight: 700;
  color: var(--green-main);
  text-decoration: underline;
}

/* Pinned section */
.blog-page .pinned-section { padding: 44px 0 8px; }
.blog-page .pinned-section h2,
.blog-page .grid-head h2 { font-size: 20px; letter-spacing: .02em; }
.blog-page .pinned-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 22px;
  margin-top: 20px;
}
@media (max-width: 860px) { .blog-page .pinned-grid { grid-template-columns: 1fr; } }
.blog-page .pin-badge {
  position: absolute; top: 16px; left: 16px;
  display: flex; align-items: center; gap: 5px;
  background: var(--gold-main);
  color: var(--green-deepest);
  font-size: 11.5px; font-weight: 700;
  padding: 5px 11px;
  border-radius: 12px;
  z-index: 4;
  letter-spacing: .02em;
}

/* Grid */
.blog-page .blog-grid-section { padding: 36px 0 60px; }
.blog-page .grid-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 22px; flex-wrap: wrap; gap: 10px;
}
.blog-page .result-count { font-size: 13.5px; color: var(--text-muted); }
.blog-page .article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px) { .blog-page .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-page .article-grid { grid-template-columns: 1fr; } }

/* Empty state - a search with no hits must offer a way out, not a dead end */
.blog-page .leer-hinweis {
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: 20px;
  padding: 44px 32px;
  text-align: center;
}
.blog-page .leer-hinweis .ico { font-size: 38px; display: block; margin-bottom: 12px; }
.blog-page .leer-hinweis p { color: var(--text-mid); margin: 8px auto 0; max-width: 460px; }

.blog-page mark {
  background: var(--gold-mid);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}

/* Pagination */
.blog-page .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 44px; flex-wrap: wrap; }
.blog-page .page-btn {
  min-width: 40px; height: 40px;
  padding: 0 12px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13.5px;
  border: 1px solid var(--cream-border);
  background: var(--white);
  color: var(--text-mid);
}
.blog-page .page-btn:hover { border-color: var(--green-main); color: var(--green-deepest); }
.blog-page .page-btn.active {
  background: var(--green-deepest);
  color: var(--gold-main);
  border-color: var(--green-deepest);
}
.blog-page .page-btn.leer { border: none; background: transparent; pointer-events: none; }

/* =============================================================================
   3. NEWSLETTER BANNER
   ============================================================================= */

/* **Der Text stand in einer schmalen Spalte, rechts daneben blieb es leer.**
   Grund war die zweispaltige Anordnung: links Text, rechts Formular. Bricht das
   Formular in die naechste Zeile um — und das tut es auf jedem gewoehnlichen
   Bildschirm —, bleibt der Text in seiner halben Breite stehen und die andere
   Haelfte des dunklen Kastens ist leer.

   Jetzt untereinander: Text ueber die volle Breite, Formular darunter. Das
   nutzt den Platz und liest sich besser, weil die Zeilen nicht mitten im
   Kasten enden. */
/* **Zwei Spalten, aber richtig aufgeteilt.**
   Der erste Anlauf war zweispaltig und liess rechts eine Luecke, weil das
   Formular umbrach und der Text trotzdem schmal blieb. Der zweite stellte alles
   untereinander — dann war der Text breit, aber rechts blieb erst recht Platz
   frei, weil eine Textzeile nicht laenger als etwa siebzig Zeichen sein darf.

   Jetzt ein Raster mit festen Anteilen: links der Text, rechts das Formular als
   eigene helle Karte. Der Platz ist gefuellt, ohne dass eine Zeile zu lang wird,
   und das Anmeldefeld steht dort, wo das Auge nach dem Lesen hinwandert. */
.blog-page .newsletter-banner,
.blog-artikel-page .newsletter-banner {
  background: var(--green-deepest);
  border-radius: 26px;
  padding: 44px 48px;
  display: grid;
  /* Der Text bekommt mehr, die Karte weniger: sie braucht nur die Breite eines
     Eingabefeldes samt Knopf. Vorher war es umgekehrt — links standen zwei
     kurze Zeilen, rechts viel Luft in der Karte. */
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, 1fr);
  gap: 44px;
  /* Mittig: der Text steht sonst oben und darunter bleibt eine Lücke, weil die
     Karte höher ist. */
  align-items: center;
  position: relative; overflow: hidden;
}

/* Ein grosser, sehr blasser Kreis im Hintergrund — er fuellt die Flaeche hinter
   der Karte und nimmt dem dunklen Rechteck die Strenge. Rein schmueckend,
   deshalb ohne eigenen Platz im Fluss. */
.blog-page .newsletter-banner::before,
.blog-artikel-page .newsletter-banner::before {
  content: "";
  position: absolute;
  right: -90px; top: -110px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: rgba(235, 195, 95, .09);
  pointer-events: none;
}

@media (max-width: 900px) {
  /* Untereinander, sobald die Karte nicht mehr sinnvoll neben den Text passt. */
  .blog-page .newsletter-banner,
  .blog-artikel-page .newsletter-banner {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}
@media (max-width: 640px) {
  .blog-page .newsletter-banner,
  .blog-artikel-page .newsletter-banner { padding: 32px 24px; border-radius: 20px; }
}
/* Ohne die alte Grenze von 400 Pixeln: sie stammte aus der zweispaltigen
   Anordnung und schnitt die Ueberschrift jetzt grundlos ab. */
.blog-page .newsletter-banner h3,
.blog-artikel-page .newsletter-banner h3 {
  color: var(--white);
  /* Grösser: die Überschrift trägt den Kasten, und links ist jetzt Platz dafür. */
  font-size: 30px;
  line-height: 1.22;
  max-width: none;
  margin-bottom: 12px;
}
.blog-page .newsletter-banner p,
.blog-artikel-page .newsletter-banner p {
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
  margin-top: 8px;
  /* Nicht ueber die ganze Breite: eine Zeile von 1200 Pixeln laesst das Auge
     beim Zuruecklaufen die Zeile verlieren. 70 Zeichen sind die Grenze, ab der
     Lesen muehsam wird — das entspricht hier gut 800 Pixeln. */
  /* Innerhalb der linken Spalte ohne eigene Grenze — die Spalte selbst ist
     schon schmal genug für angenehme Zeilen. */
  max-width: none;
  line-height: 1.6;
}

/* Das Formular als helle Karte rechts. Auf dunklem Grund ist ein heller Block
   die einfachste Art zu sagen „hier wird etwas eingetragen". */
.blog-page .newsletter-karte,
.blog-artikel-page .newsletter-karte {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  padding: 22px 22px 18px;
  position: relative;
}
.blog-page .newsletter-karte .newsletter-form,
.blog-artikel-page .newsletter-karte .newsletter-form { margin-top: 0; }

/* **Feld und Knopf gehören in eine Zeile.**
   Vorher rutschte der Knopf darunter, sobald die Karte schmaler wurde — das
   sieht aus, als sei etwas verrutscht. Das Feld darf schrumpfen, der Knopf
   nicht: seine Beschriftung soll nicht umbrechen. */
.blog-page .newsletter-karte .newsletter-form,
.blog-artikel-page .newsletter-karte .newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.blog-page .newsletter-karte .newsletter-form input[type="email"],
.blog-artikel-page .newsletter-karte .newsletter-form input[type="email"] {
  min-width: 0;
  width: 100%;
}
.blog-page .newsletter-karte .newsletter-form .btn,
.blog-artikel-page .newsletter-karte .newsletter-form .btn { white-space: nowrap; }

/* Alles unter der Zeile läuft über die volle Breite der Karte. */
.blog-page .newsletter-karte .nl-consent,
.blog-artikel-page .newsletter-karte .nl-consent,
.blog-page .newsletter-karte .nl-status,
.blog-artikel-page .newsletter-karte .nl-status,
.blog-page .newsletter-karte .nl-fineprint,
.blog-artikel-page .newsletter-karte .nl-fineprint,
.blog-page .newsletter-karte .nl-hp,
.blog-artikel-page .newsletter-karte .nl-hp { grid-column: 1 / -1; }

.blog-page .newsletter-karte .nl-fineprint,
.blog-artikel-page .newsletter-karte .nl-fineprint {
  margin-top: 4px;
  font-size: 12.5px;
  opacity: .62;
}
.blog-page .newsletter-form,
.blog-artikel-page .newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.blog-page .newsletter-form input[type="email"],
.blog-artikel-page .newsletter-form input[type="email"] {
  padding: 14px 18px;
  border-radius: var(--radius-btn);
  border: none;
  font-family: inherit;
  font-size: 14px;
  /* Fixed width like the approved prototype. flex:1 stretched the field across
     the whole banner and pushed the button to the far edge. */
  width: 260px;
  max-width: 100%;
}
.blog-page .newsletter-form input[type="email"]:focus,
.blog-artikel-page .newsletter-form input[type="email"]:focus { outline: 2px solid var(--gold-main); }
/* Honeypot: must be reachable for a bot but invisible and skipped by screen
   readers. display:none is avoided because some bots skip hidden inputs. */
.blog-page .nl-hp, .blog-artikel-page .nl-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
.blog-page .nl-consent,
.blog-artikel-page .nl-consent {
  display: flex; align-items: flex-start; gap: 9px;
  width: 100%;
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
  line-height: 1.5;
}
.blog-page .nl-consent input,
.blog-artikel-page .nl-consent input { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; }
.blog-page .nl-consent a,
.blog-artikel-page .nl-consent a { color: var(--gold-main); text-decoration: underline; }
.blog-page .nl-fineprint,
.blog-artikel-page .nl-fineprint {
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
  margin-top: 10px;
  width: 100%;
}
.blog-page .nl-status,
.blog-artikel-page .nl-status {
  width: 100%;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 12px;
  padding: 0;
  color: var(--gold-main);
}
.blog-page .nl-status.hat-inhalt,
.blog-artikel-page .nl-status.hat-inhalt { padding: 11px 14px; background: rgba(255, 255, 255, .08); }
.blog-page .nl-status.fehler,
.blog-artikel-page .nl-status.fehler { color: #FFD2CB; }
.blog-page .nl-consent.has-error,
.blog-artikel-page .nl-consent.has-error { color: #FFD2CB; }
.blog-page .newsletter-form input.has-error,
.blog-artikel-page .newsletter-form input.has-error { outline: 2px solid #E8776A; }

/* =============================================================================
   4. ARTICLE DETAIL PAGE
   ============================================================================= */

.blog-artikel-page .breadcrumb {
  font-size: 12.8px; color: var(--text-muted);
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-bottom: 18px;
}
.blog-artikel-page .breadcrumb a:hover { color: var(--green-main); }
.blog-artikel-page .article-header { padding: 38px 0 0; }
.blog-artikel-page .article-meta-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding-bottom: 26px;
  border-bottom: 1px solid var(--cream-border);
}
.blog-artikel-page .author-block { display: flex; align-items: center; gap: 10px; }
.blog-artikel-page .avatar-lg {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--green-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; overflow: hidden; flex-shrink: 0;
}
.blog-artikel-page .avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.blog-artikel-page .author-name { font-size: 13.8px; font-weight: 700; color: var(--text-primary); }
.blog-artikel-page .author-role { font-size: 12px; color: var(--text-muted); }
.blog-artikel-page .meta-pill {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-muted);
  background: var(--cream-bg);
  border: 1px solid var(--cream-border);
  padding: 6px 12px; border-radius: 14px;
}
.blog-artikel-page .meta-pill.fresh {
  color: var(--gold-deeptext);
  background: var(--gold-light);
  border-color: transparent;
}

.blog-artikel-page .article-cover {
  margin-top: 28px;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--peach-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 52px;
}
.blog-artikel-page .article-cover img { width: 100%; height: 100%; object-fit: cover; }

.blog-artikel-page .article-body-wrap {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 50px;
  padding: 44px 0 60px;
}
@media (max-width: 980px) { .blog-artikel-page .article-body-wrap { grid-template-columns: 1fr; } }
.blog-artikel-page .toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.blog-artikel-page .toc-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.blog-artikel-page .toc a {
  display: block; font-size: 13px; color: var(--text-mid);
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--cream-border);
  transition: all .15s;
}
.blog-artikel-page .toc a.ebene-3 { padding-left: 22px; font-size: 12.5px; }
.blog-artikel-page .toc a:hover,
.blog-artikel-page .toc a.active {
  color: var(--green-main);
  border-color: var(--green-main);
  font-weight: 700;
}
@media (max-width: 980px) { .blog-artikel-page .toc { display: none; } }

/* Article body: styles target the sanitiser's allow-list, so anything the
   editor can produce is covered. */
.blog-artikel-page .article-content { max-width: 720px; }
.blog-artikel-page .article-content p { margin-bottom: 18px; font-size: 15.5px; color: var(--text-primary); }
.blog-artikel-page .article-content h2 { margin-top: 38px; margin-bottom: 14px; scroll-margin-top: calc(var(--header-h) + 20px); }
.blog-artikel-page .article-content h3 { margin-top: 28px; margin-bottom: 10px; scroll-margin-top: calc(var(--header-h) + 20px); }
.blog-artikel-page .article-content h4 { margin-top: 22px; margin-bottom: 8px; font-size: 16.5px; }
.blog-artikel-page .article-content ul,
.blog-artikel-page .article-content ol { margin: 0 0 18px 22px; }
.blog-artikel-page .article-content li { margin-bottom: 6px; font-size: 15.5px; }
.blog-artikel-page .article-content a { color: var(--green-main); text-decoration: underline; }
.blog-artikel-page .article-content a:hover { color: var(--green-dark); }
.blog-artikel-page .article-content hr {
  border: none; border-top: 1px solid var(--cream-border); margin: 32px 0;
}
.blog-artikel-page .article-content figure { margin: 26px 0; }
.blog-artikel-page .article-content figure img { border-radius: 16px; width: 100%; }
.blog-artikel-page .article-content figcaption {
  font-size: 12.5px; color: var(--text-muted); margin-top: 8px; text-align: center;
}
.blog-artikel-page .article-content img { border-radius: 16px; }
.blog-artikel-page .article-content blockquote {
  background: var(--gold-light);
  border-left: 4px solid var(--gold-main);
  border-radius: 0 14px 14px 0;
  padding: 24px 28px;
  margin: 28px 0;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-style: italic;
  color: var(--green-deepest);
}
.blog-artikel-page .article-content table {
  width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14.5px;
}
.blog-artikel-page .article-content th,
.blog-artikel-page .article-content td {
  border: 1px solid var(--cream-border); padding: 10px 12px; text-align: left;
}
.blog-artikel-page .article-content th { background: var(--green-light); font-weight: 700; }

/* Click-to-load video. No request reaches YouTube/Vimeo before the click, so
   no additional cookie consent is required for the blog. */
.blog-artikel-page .video-embed {
  margin: 28px 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--green-deepest);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  cursor: pointer;
}
.blog-artikel-page .video-embed .play-btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  border: 2px solid rgba(255, 255, 255, .5);
  color: rgba(255, 255, 255, .9);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  cursor: pointer;
}
.blog-artikel-page .video-embed .play-btn:hover { background: rgba(255, 255, 255, .28); }
.blog-artikel-page .video-embed iframe,
.blog-artikel-page .video-embed video { width: 100%; height: 100%; border: 0; }
.blog-artikel-page .video-embed .video-hinweis {
  position: absolute; bottom: 12px; left: 0; right: 0;
  text-align: center;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .65);
  padding: 0 16px;
}

.blog-artikel-page .tags-end { display: flex; gap: 8px; flex-wrap: wrap; margin: 36px 0 28px; }
.blog-artikel-page .share-row {
  display: flex; align-items: center; gap: 10px;
  padding: 22px 0;
  border-top: 1px solid var(--cream-border);
  border-bottom: 1px solid var(--cream-border);
  margin-bottom: 36px;
}
.blog-artikel-page .share-row .share-label {
  font-size: 12.5px; color: var(--text-muted); font-weight: 700; margin-right: 6px;
}
.blog-artikel-page .share-ico {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cream-bg);
  border: 1px solid var(--cream-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-mid);
}
.blog-artikel-page .share-ico:hover { background: var(--green-light); }

.blog-artikel-page .author-card {
  display: flex; gap: 18px;
  background: var(--cream-bg);
  border-radius: 20px;
  padding: 26px;
  margin-bottom: 44px;
  align-items: flex-start;
}
.blog-artikel-page .author-card .avatar-lg { width: 60px; height: 60px; font-size: 24px; }
.blog-artikel-page .author-card p { font-size: 13.5px; color: var(--text-mid); line-height: 1.6; }
.blog-artikel-page .related-section h3 { margin-bottom: 20px; }
.blog-artikel-page .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .blog-artikel-page .related-grid { grid-template-columns: 1fr; } }

/* Reading progress bar */
.blog-artikel-page .lese-fortschritt {
  position: fixed;
  top: var(--header-h);
  left: 0;
  height: 3px;
  width: 0;
  background: var(--gold-main);
  z-index: 150;
  transition: width .1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .blog-artikel-page .lese-fortschritt { transition: none; }
}

/* Screen-reader-only helper, used for filter and status announcements */
.blog-page .sr-only,
.blog-artikel-page .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;
}

/* Print: drop navigation chrome, keep the article readable */
@media print {
  .blog-artikel-page .toc,
  .blog-artikel-page .share-row,
  .blog-artikel-page .newsletter-banner,
  .blog-artikel-page .related-section,
  .blog-artikel-page .lese-fortschritt { display: none; }
  .blog-artikel-page .article-body-wrap { grid-template-columns: 1fr; padding: 0; }
}

/* =============================================================================
   5. IN-TEXT LINK BUTTON

   Inserted by editors from a closed list of brand variants. The colours live
   here, never in the article HTML - that way a later brand change reaches every
   existing article instead of leaving hundreds of hard-coded values behind.
   ============================================================================= */

.blog-artikel-page .article-content .blog-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 28px;
  margin: 6px 8px 6px 0;
  border-radius: var(--radius-btn);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.blog-artikel-page .article-content .blog-knopf::after {
  content: "→";
  font-weight: 700;
}
.blog-artikel-page .article-content .blog-knopf:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

/* Standard variant: yellow with green text, as on the rest of the site */
.blog-artikel-page .article-content .blog-knopf--gold {
  background: var(--gold-main);
  color: var(--green-deepest);
}
.blog-artikel-page .article-content .blog-knopf--gold:hover {
  background: var(--gold-dark);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(196, 154, 40, .35);
}

.blog-artikel-page .article-content .blog-knopf--gruen {
  background: var(--green-main);
  color: var(--white);
}
.blog-artikel-page .article-content .blog-knopf--gruen:hover {
  background: var(--green-dark);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(58, 90, 34, .35);
}

.blog-artikel-page .article-content .blog-knopf--gruen-dunkel {
  background: var(--green-deepest);
  color: var(--white);
}
.blog-artikel-page .article-content .blog-knopf--gruen-dunkel:hover {
  background: var(--green-dark);
  box-shadow: 0 8px 20px rgba(42, 58, 26, .35);
}

.blog-artikel-page .article-content .blog-knopf--umriss {
  background: var(--white);
  color: var(--green-main);
  border: 2px solid var(--green-main);
  padding: 11px 26px;
}
.blog-artikel-page .article-content .blog-knopf--umriss:hover {
  background: var(--green-light);
  color: var(--green-dark);
}

/* A button on its own line gets air; two next to each other stay in one row. */
.blog-artikel-page .article-content p:has(> .blog-knopf:only-child) {
  margin: 26px 0;
}

/* =============================================================================
   6. SHARE BUTTONS

   Real links with an icon and a title, no third-party widget: an official share
   button would load foreign JavaScript on every article view and would need
   cookie consent. A link needs neither.
   ============================================================================= */

.blog-artikel-page .share-row .share-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream-bg);
  border: 1px solid var(--cream-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mid);
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.blog-artikel-page .share-row .share-ico:hover {
  background: var(--green-light);
  border-color: var(--green-main);
  color: var(--green-dark);
  transform: translateY(-2px);
}
.blog-artikel-page .share-row .share-ico svg { display: block; }
.blog-artikel-page .share-row .share-ico.kopiert {
  background: var(--green-main);
  border-color: var(--green-main);
  color: var(--white);
}
@media (prefers-reduced-motion: reduce) {
  .blog-artikel-page .share-row .share-ico:hover,
  .blog-artikel-page .article-content .blog-knopf:hover { transform: none; }
}

/* Self-hosted video: the poster frame stays visible until playback starts. */
.blog-artikel-page .video-embed[data-video-anbieter="datei"] {
  background: var(--green-deepest) center / cover no-repeat;
}

/* Bildgroessen im Artikel - dieselben Klassen wie im Editor. */
.article-content figure{margin:22px 0}
.article-content figure img,
.article-content figure video{max-width:100%; height:auto; display:block; border-radius:12px}
.article-content figure.bild-klein{max-width:33%}
.article-content figure.bild-mittel{max-width:66%}
.article-content figure.bild-gross{max-width:100%}
.article-content figure.bild-voll{max-width:none; width:100%}
@media(max-width:700px){
  .article-content figure.bild-klein,
  .article-content figure.bild-mittel{max-width:100%}
}

/* Bilder nebeneinander - dieselben Klassen wie im Editor. */
.article-content .bild-reihe{display:flex; gap:14px; align-items:flex-start; margin:22px 0}
.article-content .bild-reihe figure{margin:0; flex:1 1 0; min-width:0; max-width:none}
.article-content .bild-reihe figure img{width:100%}
@media(max-width:700px){
  /* Auf dem Telefon untereinander: drei Bilder nebeneinander waeren dort
     briefmarkengross. */
  .article-content .bild-reihe{flex-direction:column}
  .article-content figure[style]{width:100% !important}
}

/* Lage und gleiche Hoehe — dieselben Klassen wie im Editor. */
.article-content figure.bild-links{margin-left:0; margin-right:auto}
.article-content figure.bild-zentriert{margin-left:auto; margin-right:auto}
.article-content figure.bild-rechts{margin-left:auto; margin-right:0}
.article-content .bild-reihe.reihe-gleich-hoch figure img,
.article-content .bild-reihe.reihe-gleich-hoch figure video{height:240px; object-fit:cover}
.article-content figcaption{font-size:14px; color:var(--text-muted,#6b6b6b); margin-top:8px}
@media(max-width:700px){
  .article-content .bild-reihe.reihe-gleich-hoch figure img{height:200px}
}

/* Umfluss — dieselben Klassen wie im Editor. */
.article-content figure.umflossen-links{float:left; margin:6px 26px 16px 0}
.article-content figure.umflossen-rechts{float:right; margin:6px 0 16px 26px}
.article-content h2, .article-content h3,
.article-content .bild-reihe, .article-content blockquote{clear:both}
.article-content::after{content:""; display:table; clear:both}
@media(max-width:700px){
  /* Auf dem Telefon kein Umfluss: neben einem Bild bliebe eine Spalte von drei
     Woertern Breite, und die liest sich nicht. */
  .article-content figure.umflossen-links,
  .article-content figure.umflossen-rechts{float:none; margin:22px 0; max-width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   Mobil: Artikeltext aus der Wix-Übernahme
   ══════════════════════════════════════════════════════════════════════════

   Zwei Dinge kommen aus den übernommenen Beiträgen und sprengen auf dem
   Telefon die Seitenbreite. Beides ist am 17.09.2026 beim Durchsehen der
   Mobilansicht aufgefallen.

   1. TABELLEN. Vier Beiträge enthalten eine Tabelle (Vergleich ambulant/
      stationär, Therapiepläne). Eine Tabelle bricht nicht um: ist sie breiter
      als der Bildschirm, schiebt sie die GANZE Seite zur Seite, und der Leser
      scrollt fortan quer. Deshalb rollt sie in ihrem eigenen Kasten.

   2. SEHR LANGE WÖRTER. In sechs Beiträgen steht eine Adresse als Verweistext
      („…-on-recovering-from-a-stroke-i-did-f…", 60 Zeichen am Stück). Ohne
      Umbruchregel steht sie in einer Zeile und schiebt ebenfalls quer.
      `anywhere` bricht sie an beliebiger Stelle — nur dort, wo es sonst gar
      nicht ginge; normale Wörter bleiben unberührt. */

.blog-artikel-page .article-content table {
  display: block;          /* nur so rollt der Inhalt, nicht die Seite */
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.blog-artikel-page .article-content {
  overflow-wrap: break-word;
}
.blog-artikel-page .article-content a {
  overflow-wrap: anywhere;
}

/* Die Aufrufzahl steht neben der Lesezeit im Kartenfuss — gleiche Form, etwas
   zurückgenommen, damit sie die Lesezeit nicht überstrahlt. 30.09.2026 */
.view-count{margin-left:8px; opacity:.85}