/* Geteiltes Stylesheet für die einzeln aufrufbaren Blog-Artikel-Seiten
   (/blog/{lang}/{slug}/) - siehe scripts/generate-blog-pages.js.
   Farbvariablen (--accent, --surface usw.) kommen aus /css/style.css,
   das vor dieser Datei eingebunden ist. */
/* WICHTIG: /css/style.css ist für die Karten-App gebaut und setzt dort
   vermutlich overflow:hidden auf html/body (volle Bildschirmhöhe, kein
   Scrollen der Seite selbst, nur einzelner Panels). Ohne diese Korrektur
   hier lässt sich eine lange Blog-Artikel-Seite nicht bis ans Ende
   scrollen (Bug gemeldet 22.08.2026: "Permalink lässt sich nicht weiter
   runterscrollen"). blog/index.html hat dieselbe Korrektur bereits inline. */
html,body{overflow:auto;height:auto;}
.blog-wrap{max-width:760px;margin:0 auto;padding:1.5rem 1.25rem 4rem;}
.blog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.75rem;}
.blog-article-brand{font-size:1.375rem;color:var(--accent);}
.blog-header a{color:var(--text-secondary);font-size:0.875rem;text-decoration:none;}
.blog-article-langs{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1.25rem;font-size:0.8125rem;}
.blog-article-langs a,.blog-article-lang-current{padding:0.25rem 0.5rem;border-radius:0.5rem;text-decoration:none;color:var(--text-secondary);background:var(--surface-light);}
.blog-article-lang-current{color:var(--accent);font-weight:700;}
article{background:var(--surface);border-radius:1rem;padding:1.5rem;margin-bottom:1.5rem;border:1px solid var(--surface-light);}
article h1{font-size:1.375rem;margin-bottom:0.75rem;color:var(--text);}
.blog-article-date{font-size:0.8125rem;color:var(--text-secondary);opacity:0.8;margin:-0.25rem 0 0.875rem;}
.blog-article-sources{font-size:0.8125rem;color:var(--text-secondary);opacity:0.75;margin-top:1rem;padding-top:0.75rem;border-top:1px solid var(--surface-light);}
article p{margin-bottom:0.875rem;line-height:1.65;color:var(--text-secondary);font-size:0.9375rem;}
article ul{margin:0 0 0.875rem 1.25rem;color:var(--text-secondary);font-size:0.9375rem;line-height:1.6;}
article li{margin-bottom:0.375rem;}
/* Tabellen (z.B. Preisvergleiche, Steckertypen) hatten bisher gar kein
   Styling - auf schmalen Handy-Bildschirmen quetschten sich mehrspaltige
   Tabellen unlesbar zusammen oder liefen über den Artikel-Rand hinaus
   (Aufgabe: Tabellen-Mobilansicht prüfen/optimieren, 07.09.2026). Fix:
   sichtbare Zellen/Header + auf schmalen Screens horizontal scrollbar
   statt gequetscht/umgebrochen. */
article table{width:100%;border-collapse:collapse;margin-bottom:1.25rem;font-size:0.875rem;}
article th,article td{padding:0.5rem 0.625rem;text-align:left;border-bottom:1px solid var(--surface-light);vertical-align:top;}
article th{color:var(--text);font-weight:700;background:var(--surface-light);}
article td{color:var(--text-secondary);}
@media (max-width:600px){
  article table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  article th,article td{white-space:nowrap;}
}
.blog-cta-link{text-align:center;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;text-decoration:none;font-weight:700;font-size:0.875rem;padding:0.75rem;border-radius:0.75rem;margin-bottom:1.25rem;}
.blog-article-back{text-align:center;margin-bottom:1rem;}
.blog-article-back a{color:var(--text-secondary);text-decoration:none;font-size:0.875rem;}
.blog-footer{text-align:center;color:var(--text-secondary);font-size:0.8125rem;margin-top:2rem;}
.blog-footer a{color:var(--accent);}