/* ============================================================================
   sp-blog-fixes.css · BEWUSSTE Reparaturen kaputter Live-Stellen (Auftrag Samuel:
   „kaputte Stellen im Code fixen, Texte nicht anpassen").
   Lädt auf Posts NACH der Live-Kaskade. Jede Regel hier ist eine dokumentierte
   Abweichung vom Live-Stand → qa/diff-ledger.md.
   ============================================================================ */

/* FIX 2 · Blog-Embeds (Auftrag Samuel 28.07.): In-Text-Videos hatten falsche Größe
   (Core-Embed-Sizing fehlte nach Klassen-Strip) → sauberes 16:9. Videos + Bilder
   laufen auf Desktop bewusst BREITER als die Textspalte (Breakout), nie breiter
   als der Viewport. */
.sp-blog-content iframe[src*="youtube"],
.sp-blog-content iframe[src*="youtube-nocookie"],
.sp-blog-content iframe[src*="vimeo"],
.sp-blog-content iframe[src*="wistia"] {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
  display: block;
  border-radius: 12px;
}
.sp-blog-content :is(figure, p) > img {
  max-width: 100%;
  height: auto;
}
@media (min-width: 900px) {
  /* Alle Layout-Props explizit + !important: die Live-Kaskade führt u. a. Full-Bleed-
     Regeln (margin: calc(50% - 50vw)), die den Breakout sonst an den Viewport-Rand kippen. */
  .sp-blog-content > .sp-blog-yt-wrap,
  .sp-blog-content > figure,
  .sp-blog-content > img,
  .sp-blog-content > p:has(> img:only-child),
  .sp-blog-content > p:has(> iframe),
  .sp-blog-content > div:has(> iframe) {
    width: min(880px, calc(100% + 150px)) !important;
    max-width: none !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%);
  }
  .sp-blog-content > figure img,
  .sp-blog-content > p:has(> img:only-child) img {
    width: 100%;
  }
}

/* FIX 4 · Klassenlose Tabellen im alten Table-Container: helle Basis-Generation ohne
   Dark-Override → weiße Zellen mit hellgrauem Text = unlesbar (live identisch kaputt).
   Fix: Zellen ins Dark-Design holen (Kriterien-/Header-Spalten bleiben wie sie sind). */
/* comparison-table kommt in ZWEI Markup-Varianten: Klasse am <table> selbst ODER
   an einem DIV-Wrapper (dann setzt die Kaskade `.sp-blog-comparison-table table`
   weiß) — beide abdecken. */
.sp-blog-content .sp-blog-table-container table,
.sp-blog-content table.sp-blog-comparison-table,
.sp-blog-content .sp-blog-comparison-table table {
  background: transparent !important;
}
.sp-blog-content :is(.sp-blog-table-container, .sp-blog-comparison-table) td {
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(243, 243, 243, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
/* Kriterien-Spalte (td:first-child): helle Generation setzt weiß + dunkle Schrift
   inkl. `td:first-child * { color:#0f172a !important }` auf alle Kinder — die
   <strong>-Labels blieben dadurch dunkel auf dunkel. Spalte betont hell, Kinder
   erben (Element-Selektoren in :is() heben die Spezifität über die *-Regel). */
.sp-blog-content :is(.sp-blog-table-container, .sp-blog-comparison-table) td:first-child {
  background: rgba(255, 255, 255, 0.02) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
.sp-blog-content :is(.sp-blog-table-container, .sp-blog-comparison-table) :is(td, th) :is(strong, b, em, i, u, span, p, a, li, ul, ol, small, code, div) {
  color: inherit !important;
}

/* FIX 1 · Alte Content-Generation: hell inline-gestylte Boxen (#f8f9fa, #eef2f5, …)
   erben im Dark-Theme weiße Textfarbe → Text unsichtbar (weiß auf hell).
   Fix: dunkle Textfarbe in genau diesen Boxen. Kind-Elemente mit eigener
   Inline-Farbe behalten sie (Inline schlägt Vererbung). Box-Optik bleibt hell
   wie live — nur der Text wird lesbar (ursprünglich intendierter Zustand).
   WICHTIG: Nur KLASSENLOSE Boxen — Elemente mit sp-blog-Komponenten-Klasse
   (Summary/Myth/Pros/Cons/Quote/Case-Study …) werden von der Kaskade per
   !important DUNKEL gerendert; dort wäre dunkle Schrift unlesbar. */
.sp-blog-content :is(
  [style*="#f8f9fa"], [style*="#eef2f5"], [style*="#fffbea"], [style*="#d4edda"],
  [style*="#f9f9f9"], [style*="#f0f7ff"], [style*="#fff5f5"], [style*="#f0fff4"],
  [style*="#f0fdf4"], [style*="#fef2f2"], [style*="#f2f2f2"],
  [style*="background-color: #fff"], [style*="background:#fff"]
):not([class*="sp-blog-"]) {
  color: #1f2937 !important;
}

/* Nachfahren explizit (Kaskaden-Regeln wie `.sp-blog-content li { color: … }` schlagen
   sonst die Vererbung). Elemente mit eigener Inline-Farbe bleiben unangetastet. */
.sp-blog-content :is(
  [style*="#f8f9fa"], [style*="#eef2f5"], [style*="#fffbea"], [style*="#d4edda"],
  [style*="#f9f9f9"], [style*="#f0f7ff"], [style*="#fff5f5"], [style*="#f0fff4"],
  [style*="#f0fdf4"], [style*="#fef2f2"], [style*="#f2f2f2"],
  [style*="background-color: #fff"], [style*="background:#fff"]
):not([class*="sp-blog-"]) :is(p, li, ul, ol, strong, em, b, h1, h2, h3, h4, h5, h6, td, th):not([style*="color"]):not([class*="sp-blog-"]) {
  color: #1f2937 !important;
}

/* Links in den hellen F1-Boxen: die Dark-Theme-Linkfarbe (helles Blau) ist auf
   hellem Grund kontrastschwach → lesbares dunkles Blau, Unterstreichung bleibt. */
.sp-blog-content :is(
  [style*="#f8f9fa"], [style*="#eef2f5"], [style*="#fffbea"], [style*="#d4edda"],
  [style*="#f9f9f9"], [style*="#f0f7ff"], [style*="#fff5f5"], [style*="#f0fff4"],
  [style*="#f0fdf4"], [style*="#fef2f2"], [style*="#f2f2f2"],
  [style*="background-color: #fff"], [style*="background:#fff"]
):not([class*="sp-blog-"]) a:not([style*="color"]) {
  color: #1d4ed8 !important;
}

/* FIX 5b · Blog-FAQ als DS-Akkordeon (Auftrag Samuel 28.07., „aufklappbar is besser"):
   sp-blogpost.js baut .sp-blog-faq-card ins sp-faq-Pattern (DS §12.5) um —
   hier nur Content-Kontext-Overrides. FIX 5 unten bleibt als No-JS-Fallback. */
.sp-blog-content .sp-blog-faq { margin: 28px 0; max-width: none; }
.sp-blog-content .sp-faq-summary { font-family: inherit; }
.sp-blog-content .sp-faq-answer p { text-align: left; }
.sp-blog-content .sp-faq-item.is-open .sp-faq-answer { max-height: 1600px; }

/* FIX 5 · Question-Boxen in Posts im Startseiten-FAQ-Style (Auftrag Samuel 28.07.):
   gleiche Karten-Optik wie .sp-faq-item der Homepage (DS-Token). No-JS-Fallback. */
.sp-blog-content .sp-blog-faq-card {
  background: var(--sp-card-bg) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: var(--sp-radius-md) !important;
  padding: 24px 28px !important;
  margin: 24px 0 !important;
  box-shadow: none !important;
}
.sp-blog-content .sp-blog-faq-card p { text-align: left; }
.sp-blog-content .sp-blog-faq-card > p:first-child,
.sp-blog-content .sp-blog-faq-card > :is(h3, h4):first-child {
  color: #fff !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  margin: 0 0 12px !important;
  position: relative !important;
}
.sp-blog-content .sp-blog-faq-card > p:first-child strong {
  color: #fff !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 40px;
  padding-left: 52px !important; /* Platz fürs absolute Q-Badge (::before) */
  position: relative !important;
}
.sp-blog-content .sp-blog-faq-card > p:not(:first-child) {
  color: var(--sp-text-muted) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin: 0 0 12px !important;
}
.sp-blog-content .sp-blog-faq-card > p:last-child { margin-bottom: 0 !important; }
.sp-blog-content .sp-blog-faq-card > p:not(:first-child) strong { color: #fff !important; }