/* static/blog.css - Styles fuer die Blog-Uebersichtsseite (/blog) und die
   einzelnen Blog-Artikel (/blog/<slug>), Nachtrag 17.08.2026 "Saubere URLs
   statt /static/*.html + Blog". Die Uebersichts-Regeln (.blog-overview-
   section, .blog-header, .blog-grid, .blog-card, .blog-category,
   .read-more) sind woertlich vom Nutzer als CSS-Vorlage geliefert worden
   und wurden unveraendert uebernommen. Die Artikel-Detailseiten-Regeln
   (.blog-artikel-*) wurden farblich an diese Vorlage angeglichen (Gold
   #b58100 / Dunkelgruen #0c3b2e statt der zuvor selbst gewaehlten
   Teal/Gold-Kombination), da fuer diesen Teil keine Vorlage vorlag. */

.blog-overview-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}
.blog-header {
  text-align: center;
  margin-bottom: 40px;
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.blog-header h1 { font-size: 2rem; color: #1c2541; margin: 0 0 12px 0; }
.blog-header p { color: #555; font-size: 1.05rem; line-height: 1.6; margin: 0; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.blog-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.blog-category {
  font-size: 0.8rem;
  font-weight: bold;
  color: #b58100;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.blog-card h2 { font-size: 1.05rem; color: #1c2541; margin: 0 0 8px 0; line-height: 1.35; }
.blog-card p { font-size: 0.9rem; color: #555; line-height: 1.5; margin: 0; }
.read-more {
  margin-top: 16px;
  font-weight: bold;
  color: #0c3b2e;
  text-decoration: none;
}
.read-more:hover { text-decoration: underline; }

/* Artikel-Detailseite (kein Vorlagen-CSS vorhanden, farblich an die
   Uebersichtsseite angeglichen). */
.blog-artikel-wrapper { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.blog-artikel-karte { max-width: 760px; margin: 40px auto 0; }
.blog-zurueck-link { display: inline-block; margin-bottom: 20px; color: #0c3b2e; text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.blog-zurueck-link:hover { text-decoration: underline; }
.blog-artikel-karte .blog-category { display: inline-block; margin-bottom: 16px; }
.blog-artikel-karte h1 { font-size: 1.8rem; color: #1c2541; margin: 0 0 24px 0; line-height: 1.3; }

.blog-artikel-inhalt h2 { font-size: 1.25rem; color: #1c2541; margin: 32px 0 12px 0; }
.blog-artikel-inhalt p { font-size: 1.02rem; line-height: 1.7; color: #333; margin: 0 0 16px 0; }
.blog-artikel-inhalt ul { margin: 0 0 16px 0; padding-left: 0; list-style: none; }
.blog-artikel-inhalt ul li { font-size: 1.02rem; line-height: 1.6; color: #333; padding: 10px 0 10px 28px; border-bottom: 1px solid #eee; position: relative; }
.blog-artikel-inhalt ul li:last-child { border-bottom: none; }
.blog-artikel-inhalt ul li::before { content: "→"; position: absolute; left: 0; top: 10px; color: #b58100; font-weight: 700; }

@media (max-width: 600px) {
  .blog-overview-section { padding: 40px 16px; }
}

/* Nachtrag: Vorschau-Komponenten (produkt-vorschau-karte, niveau-vorschau-grid)
   werden auch in Blogartikeln wiederverwendet. Ohne diese Overrides gewinnen
   die generischen .blog-artikel-inhalt p / .blog-artikel-inhalt ul li - Regeln
   oben (hoehere Spezifitaet durch zusaetzliches Element in .blog-artikel-inhalt
   ul li), wodurch der Vorschau-Hinweis zu gross/dunkel/nicht-zentriert wird und
   vor jedem Checklisten-Haekchen faelschlich ein "->"-Pfeil erscheint. */
.blog-artikel-inhalt .vorschau-hinweis {
  font-size: 0.8rem; color: #888; text-align: center; margin: 10px auto 0 auto;
  max-width: 400px; line-height: 1.5;
}
.blog-artikel-inhalt .vorschau-checkliste li {
  font-size: 0.87rem; color: #333; padding: 3px 0; border-bottom: none;
}
.blog-artikel-inhalt .vorschau-checkliste li::before { content: none; }
.blog-artikel-inhalt .niveau-vorschau-karte p {
  font-size: 0.85rem; line-height: 1.4; color: #333; margin: 0; padding: 0; border-bottom: none;
}
.blog-artikel-inhalt .niveau-vorschau-karte p::before { content: none; }