/* =====================================================================
   Blog — Artikel-Vorlage im Gestaltungssystem
   Angelegt 25.09.2026 (Arbeitsplan Schritt 03).

   Eine Datei fuer alle Blogseiten (Artikel + Uebersicht /blog). Die
   Seiten setzen vor dem Header-require:
       $use_system = true;
       $extra_css  = '/assets/css/blog.css';
   und tragen <main class="x-page">. Das Markup der Artikel bleibt
   unveraendert (blog-*-Klassen) — Adressen, Titel, H1 und Text auch.

   Regeln wie in system.css: nur Variablen, kein !important, alles
   unter .x-page. style.css wird auf diesen Seiten nicht geladen.
   ===================================================================== */

.x-page *, .x-page *::before, .x-page *::after { box-sizing: border-box; }
.x-page .container { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }

/* ── Kopf des Artikels ────────────────────────────────────────────── */
.x-page .blog-hero {
  padding: var(--gap-xl) 0 var(--gap-lg);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--gap-lg);
  background:
    radial-gradient(60rem 20rem at 10% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    var(--surface-base);
}
.x-page .blog-hero .container { max-width: 1100px; }
.x-page .blog-hero h1,
.x-page .blog-hero-title {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--step-4));
  font-weight: 800;
  letter-spacing: -.02em;
  max-width: 24ch;
  margin: var(--gap-sm) 0;
}
.x-page .blog-hero h1 span { color: var(--accent-text); }
.x-page .blog-hero-subtitle {
  color: var(--text-muted);
  font-size: var(--step-1);
  max-width: 62ch;
  margin: 0;
}

.x-page .blog-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
  align-items: center;
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: var(--gap-md);
}
.x-page .blog-breadcrumb a { color: var(--text-muted); }
.x-page .blog-breadcrumb .separator { color: var(--text-muted); }

.x-page .blog-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
  align-items: center;
  color: var(--text-muted);
  font-size: .88rem;
}
/* wie .x-badge--accent. Schrift dunkler/heller gemischt: reines
   --accent-text erreicht auf der getoenten Flaeche im hellen Modus nur
   3,4:1 (gemessen 25.09.). */
.x-page .blog-hero-category,
.x-page .blog-card-category {
  display: inline-block;
  padding: .3rem .8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
  color: color-mix(in srgb, var(--accent-text) 70%, var(--text-strong));
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Artikel und Inhaltsverzeichnis ───────────────────────────────── */
.x-page .blog-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--gap-xl);
  max-width: 1100px;
  margin-inline: auto;
}
.x-page .blog-article-content { min-width: 0; max-width: 72ch; font-size: 1.06rem; }
.x-page .blog-intro { font-size: var(--step-1); color: var(--text-strong); }

.x-page .blog-article-content h2 {
  font-size: var(--step-2);
  font-weight: 800;
  margin: var(--gap-lg) 0 var(--gap-sm);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.x-page .blog-article-content h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.x-page .blog-article-content h3 {
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--accent-text);
  margin: var(--gap-md) 0 var(--gap-xs);
}
.x-page .blog-article-content p,
.x-page .blog-article-content ul,
.x-page .blog-article-content ol { margin: 0 0 var(--gap-sm); }
.x-page .blog-article-content ul,
.x-page .blog-article-content ol { padding-left: 1.4rem; }
.x-page .blog-article-content li { margin-bottom: .4rem; }
.x-page .blog-article-content li::marker { color: var(--accent-text); }
.x-page .blog-article-content strong { color: var(--text-strong); }
.x-page .blog-article-content img { max-width: 100%; height: auto; }

.x-page .blog-sidebar { position: relative; }
.x-page .blog-toc {
  position: sticky;
  top: 90px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap-md);
}
.x-page .blog-toc-title {
  color: var(--accent-text);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--gap-xs);
}
.x-page .blog-toc ul { list-style: none; margin: 0; padding: 0; }
.x-page .blog-toc a { display: block; padding: .3rem 0; font-size: .88rem; color: var(--text-muted); }
.x-page .blog-toc a:hover { color: var(--accent-text); }

/* ── Kästen im Text (wie .x-highlight) ───────────────────────────── */
.x-page .blog-info-box,
.x-page .blog-warning-box {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--gap-md);
  margin: var(--gap-md) 0;
}
.x-page .blog-warning-box {
  background: color-mix(in srgb, #ef4444 8%, transparent);
  border-color: color-mix(in srgb, #ef4444 30%, transparent);
  border-left-color: #ef4444;
}
.x-page .blog-info-box p:last-child,
.x-page .blog-warning-box p:last-child { margin-bottom: 0; }
.x-page .blog-info-box-title { font-weight: 700; margin-bottom: .3rem; }
/* Auf der getoenten Kastenflaeche braucht Bernstein-Schrift mehr Tiefe
   (hell: 4,0:1 → ueber 4,5:1). */
.x-page .blog-info-box-title,
.x-page .blog-info-box a:not(.btn),
.x-page .blog-warning-box a:not(.btn) { color: color-mix(in srgb, var(--accent-text) 70%, var(--text-strong)); }

.x-page .blog-checklist { list-style: none; padding-left: 0; }
.x-page .blog-checklist li { position: relative; padding-left: 1.8rem; }
.x-page .blog-checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--good); font-weight: 700; }

/* ── Tabellen ─────────────────────────────────────────────────────── */
.x-page .blog-comparison-table { overflow-x: auto; margin: var(--gap-md) 0; }
.x-page .blog-comparison-table table,
.x-page .blog-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.x-page .blog-comparison-table th,
.x-page .blog-table th {
  text-align: left;
  padding: .7rem .9rem;
  background: var(--surface-sunken);
  color: var(--text-strong);
  border-bottom: 2px solid var(--accent);
  font-size: .82rem;
  letter-spacing: .04em;
}
.x-page .blog-comparison-table td,
.x-page .blog-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }

/* ── FAQ ─────────────────────────────────────────────────────────────
   Antworten sind immer sichtbar (so war es schon vorher, es gab nie ein
   Skript). blog.js macht daraus Aufklapper, falls es geladen ist — ohne
   Skript bleibt alles lesbar. */
.x-page .blog-faq-section,
.x-page .blog-faq { margin-top: var(--gap-sm); }
.x-page .blog-faq-item {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--gap-xs);
  overflow: hidden;
}
.x-page .blog-faq-question,
.x-page .blog-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-sm);
  width: 100%;
  padding: 1rem 1.2rem;
  background: none;
  border: 0;
  color: var(--text-strong);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  list-style: none;
}
.x-page .blog-faq-item summary::-webkit-details-marker { display: none; }
.x-page .blog-faq-icon { color: var(--accent-text); font-size: 1.2rem; font-weight: 700; flex-shrink: 0; }
.x-page .blog-faq-answer,
.x-page .blog-faq-item .faq-answer { padding: 0 1.2rem 1rem; }
.x-page .blog-faq-answer p:last-child { margin-bottom: 0; }
.x-page .blog-faq-item.is-closed .blog-faq-answer { display: none; }

/* ── Autor, Handlungsaufforderung ─────────────────────────────────── */
.x-page .blog-author-box {
  max-width: 1100px;
  margin: var(--gap-lg) auto;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--gap-md);
}
.x-page .blog-author-info strong { color: var(--text-strong); display: block; margin-bottom: .2rem; }
.x-page .blog-author-info p { margin: 0; color: var(--text-muted); }

.x-page .blog-cta-block,
.x-page .blog-cta-box {
  background:
    radial-gradient(40rem 12rem at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--surface-raised);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--gap-lg);
  text-align: center;
  margin: var(--gap-lg) 0;
}
.x-page .blog-cta-block h3 { color: var(--text-strong); font-size: var(--step-2); margin-top: 0; }
.x-page .blog-cta-block p { color: var(--text-muted); max-width: 52ch; margin-inline: auto; }
.x-page .blog-cta-buttons { display: flex; flex-wrap: wrap; gap: var(--gap-sm); justify-content: center; }

/* Alte Knopfklassen im Artikeltext → Aussehen von .x-btn.
   a.btn statt .btn: gleiche Spezifitaet wie die Linkregel in system.css
   (.x-page a:not(...)), blog.css kommt spaeter und gewinnt. */
.x-page a.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: .8rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  color: var(--text-strong);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--ease), background var(--ease), border-color var(--ease);
}
.x-page a.btn:hover { transform: translateY(-1px); text-decoration: none; border-color: var(--accent); color: var(--accent-text); }
.x-page a.btn.btn-primary,
.x-page a.btn.btn-indigo { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.x-page a.btn.btn-primary:hover,
.x-page a.btn.btn-indigo:hover { background: var(--accent-bright); color: var(--on-accent); }

/* ── Karten: weitere Artikel + Uebersicht /blog (wie .x-tile) ─────── */
.x-page .related-articles-grid,
.x-page .blog-grid {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.x-page .blog-listing-section { padding: 0 0 var(--gap-xl); }
.x-page .blog-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  color: var(--text-body);
  text-decoration: none;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.x-page a.blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lifted); border-color: var(--line-strong); color: var(--text-body); text-decoration: none; }
.x-page .blog-card-image {
  position: relative;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: radial-gradient(20rem 8rem at 30% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), var(--surface-sunken);
  border-bottom: 1px solid var(--line);
}
.x-page .blog-card-category { position: absolute; top: .9rem; left: .9rem; }
.x-page .blog-card-body { flex: 1; display: flex; flex-direction: column; padding: var(--gap-md); }
.x-page .blog-card-meta { display: flex; flex-wrap: wrap; gap: var(--gap-sm); color: var(--text-muted); font-size: .8rem; margin-bottom: .5rem; }
.x-page .blog-card-title { color: var(--text-strong); font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin-bottom: .5rem; }
.x-page .blog-card-excerpt { color: var(--text-body); font-size: .92rem; flex: 1; margin-bottom: var(--gap-sm); }
.x-page .blog-card-tags { display: flex; flex-wrap: wrap; gap: var(--gap-xs); }
.x-page .blog-card-tags .feature-tag { padding: .22rem .65rem; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--text-muted); font-size: .76rem; }

/* ── Schmale Bildschirme ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .x-page .blog-article-layout { grid-template-columns: minmax(0, 1fr); gap: var(--gap-md); }
  .x-page .blog-sidebar { order: -1; }
  .x-page .blog-toc { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .x-page .blog-card, .x-page a.btn { transition: none; }
  .x-page a.blog-card:hover, .x-page a.btn:hover { transform: none; }
}