/* AgentFranz — Blog (agentfranz.ai/blog/).
 * Nur Blog-Seiten laden diese Datei, nach site.css (inc/blog.php). Farben,
 * Schriften und Abstaende kommen aus den Tokens dort; hier steht nur, was es
 * fuer Karten, Leseansicht und Inhaltsverzeichnis zusaetzlich braucht.
 * Hell und dunkel kommen ueber die Tokens, nicht ueber eigene Farben.
 */

/* ---- Kopfbereich der Uebersichten ---- */
.blog-hero{padding-block:64px 8px}
.blog-hero .h1{margin-bottom:16px}
.blog-lead{max-width:62ch}
.blog-hero .lead{margin-bottom:0}
.blog-lead p+p{margin-top:12px}
.blog-krumen{font-family:var(--font-sans);font-size:14px;color:var(--muted);margin-bottom:18px;display:flex;flex-wrap:wrap;gap:8px}
.blog-krumen a{color:var(--muted);text-decoration:none}
.blog-krumen a:hover{color:var(--fg-strong);text-decoration:underline}
.blog-liste{padding-block:36px 84px}

/* ---- Filterleiste ---- */
.blog-filter{margin-bottom:34px}
.blog-chip{font-family:var(--font-sans);display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg-section);font-size:14px;color:var(--fg);text-decoration:none}
.blog-chip:hover{border-color:var(--border-2);color:var(--fg-strong)}
.blog-chip--an{background:var(--primary);border-color:var(--primary);color:var(--primary-fg);font-weight:600}
.blog-chip--an:hover{color:var(--primary-fg);background:var(--primary-h)}

/* ---- Kartenraster ---- */
.blog-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.blog-karte{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden;transition:border-color .15s,transform .15s}
.blog-karte:hover,.blog-karte:focus-within{border-color:var(--border-2);transform:translateY(-2px)}
.blog-karte__rahmen{aspect-ratio:16/9;background:var(--bg-section);border-bottom:1px solid var(--border);overflow:hidden}
.blog-karte__bild{display:block;width:100%;height:100%;object-fit:cover}
.blog-karte__bild--leer{display:flex;align-items:center;justify-content:center;color:var(--muted-2)}
.blog-karte__bild--leer svg{width:40px;height:40px}
.blog-karte__text{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}
.blog-karte__titel{font-family:var(--font-display);font-size:21px;line-height:1.2;font-weight:700;letter-spacing:-.012em;color:var(--fg-strong);text-wrap:balance}
.blog-karte__titel a{color:inherit;text-decoration:none}
.blog-karte__titel a::after{content:"";position:absolute;inset:0}
.blog-karte__titel a:focus-visible{outline:none}
.blog-karte:focus-within{outline:2px solid var(--primary);outline-offset:2px}
.blog-karte__anreisser{font-family:var(--font-serif);font-size:15.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.blog-karte__meta{font-family:var(--font-sans);font-size:13px;color:var(--muted-2);margin-top:auto;padding-top:6px}
.blog-leer{padding-block:40px}

/* ---- Blaettern ---- */
.blog-blaettern{margin-top:44px}
.blog-blaettern ul{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.blog-blaettern .page-numbers{font-family:var(--font-sans);display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--fg);text-decoration:none;font-size:15px}
.blog-blaettern a.page-numbers:hover{border-color:var(--border-2);color:var(--fg-strong)}
.blog-blaettern .current{background:var(--primary);border-color:var(--primary);color:var(--primary-fg);font-weight:600}
.blog-blaettern .dots{border-color:transparent}

/* ---- Artikel: Kopf ---- */
.blog-kopf{padding-top:56px}
.blog-kopf .h1{max-width:24ch;margin-bottom:18px}
.blog-kopf .blog-lead{margin-bottom:22px}
.blog-meta{font-family:var(--font-sans);font-size:14.5px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.blog-meta time{color:inherit}

/* ---- Artikel: Leseansicht ----
 * DOM-Reihenfolge: Seitenleiste (Verzeichnis, Teilen), dann Text. Auf dem
 * Telefon steht sie damit oben, auf dem Desktop daneben (Raster). */
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-top:40px;padding-bottom:12px}
@media (min-width:1001px){
  .blog-layout{grid-template-columns:minmax(0,44rem) 17rem;grid-template-areas:"text seite";justify-content:space-between;gap:56px}
  .blog-text{grid-area:text}
  .blog-seite{grid-area:seite;position:sticky;top:94px;align-self:start}
}
.blog-text{font-family:var(--font-serif);font-size:18px;line-height:1.7;color:var(--fg);overflow-wrap:break-word}
.blog-text>*+*{margin-top:1.15em}
.blog-text h2{font-family:var(--font-display);font-size:clamp(25px,3vw,31px);line-height:1.18;font-weight:700;letter-spacing:-.016em;color:var(--fg-strong);margin-top:2.1em;scroll-margin-top:90px;text-wrap:balance}
.blog-text h3{font-family:var(--font-sans);font-size:20px;line-height:1.3;font-weight:600;color:var(--fg-strong);margin-top:1.8em;scroll-margin-top:90px}
.blog-text h2+*,.blog-text h3+*{margin-top:.7em}
.blog-text a{color:var(--fg-strong);text-decoration:underline;text-decoration-color:var(--border-2);text-underline-offset:3px}
.blog-text a:hover{text-decoration-color:currentColor}
.blog-text ul,.blog-text ol{padding-left:1.4em}
.blog-text ul{list-style:disc}
.blog-text ol{list-style:decimal}
.blog-text li{margin-top:.4em}
.blog-text li::marker{color:var(--muted-2)}
.blog-text blockquote{margin-left:0;padding:2px 0 2px 20px;border-left:3px solid var(--accent);color:var(--muted)}
.blog-text blockquote p+p{margin-top:.8em}
.blog-text blockquote cite{display:block;font-family:var(--font-sans);font-style:normal;font-size:14px;margin-top:8px}
.blog-text img{max-width:100%;height:auto;border-radius:var(--radius-sm)}
.blog-text figure{margin-inline:0}
.blog-text figcaption{font-family:var(--font-sans);font-size:13.5px;color:var(--muted-2);margin-top:8px}
.blog-text hr{border:0;border-top:1px solid var(--border);margin-block:2.2em}
.blog-text code{font-size:.9em;background:var(--bg-section);border:1px solid var(--border);border-radius:5px;padding:1px 6px}
.blog-text pre{background:var(--bg-section);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;overflow-x:auto;font-size:14.5px;line-height:1.55}
.blog-text pre code{background:none;border:0;padding:0}
.blog-text table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-family:var(--font-sans);font-size:15px;line-height:1.45}
.blog-text th,.blog-text td{padding:10px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.blog-text th{font-weight:600;color:var(--fg-strong);background:var(--bg-section)}
.blog-text .wp-block-table{overflow-x:auto}
.blog-text .wp-block-table table{display:table;min-width:100%}

/* ---- Inhaltsverzeichnis und Teilen ---- */
.blog-seite{font-family:var(--font-sans)}
.blog-toc{margin-bottom:22px}
.blog-toc__t{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);cursor:pointer;padding:6px 0;list-style:none}
.blog-toc__t::-webkit-details-marker{display:none}
.blog-toc__t::after{content:"▾";margin-left:8px}
.blog-toc__d:not([open]) .blog-toc__t::after{content:"▸"}
.blog-toc ol{margin-top:8px;border-left:1px solid var(--border);display:flex;flex-direction:column}
.blog-toc a{display:block;font-size:14.5px;line-height:1.35;color:var(--muted);text-decoration:none;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent}
.blog-toc a:hover{color:var(--fg-strong)}
.blog-toc__e--3 a{padding-left:28px;font-size:14px}
.blog-toc a[aria-current="true"]{color:var(--fg-strong);font-weight:600;border-left-color:var(--accent)}
.blog-teilen{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.blog-teilen__t{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);width:100%}
.blog-teilen__ok{font-size:13px;color:var(--muted);min-height:1em;width:100%}
.blog-teilen button[hidden]{display:none}
/* Zweite Teilen-Reihe am Textende: nur dort, wo die Seitenleiste oben steht. */
.blog-fuss .blog-teilen{margin-top:26px}
@media (min-width:1001px){.blog-fuss .blog-teilen{display:none}}

/* ---- Autorenkasten ---- */
.blog-fuss{padding-top:40px}
.blog-autor{display:flex;gap:20px;align-items:flex-start;max-width:44rem;padding:22px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.blog-autor__foto{flex:0 0 auto;width:72px;height:72px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}
.blog-autor__name{font-family:var(--font-sans);font-size:17px;font-weight:600;color:var(--fg-strong)}
.blog-autor__name a{color:inherit;text-decoration:none}.blog-autor__name a:hover{text-decoration:underline}
.blog-autor__rolle{font-family:var(--font-serif);font-size:15.5px;line-height:1.55;color:var(--muted);margin:4px 0 10px}

/* ---- Kasten am Ende ---- */
.blog-cta{max-width:var(--maxw-wide);margin:56px auto 0;padding:32px 36px;display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between;background:var(--bg-section);border:1px solid var(--border);border-radius:var(--radius)}
.blog-cta .h2{font-size:clamp(21px,2.4vw,26px);max-width:30ch;margin-bottom:8px}
.blog-cta .body{max-width:56ch}
@media (min-width:1001px){.blog-cta{margin-inline:auto;width:min(calc(var(--maxw-wide) - 48px),calc(100% - 48px))}}
@media (max-width:1000px){.blog-cta{margin-inline:24px}}
.blog-weitere{margin-top:64px}

/* ---- Schmal ---- */
@media (max-width:1000px){
  .blog-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-hero{padding-block:48px 4px}
  .blog-kopf{padding-top:40px}
}
@media (max-width:640px){
  .blog-raster{grid-template-columns:minmax(0,1fr)}
  .blog-text{font-size:17px}
  .blog-autor{flex-direction:column;gap:14px}
  .blog-cta{padding:24px}
}
@media (prefers-reduced-motion:reduce){.blog-karte{transition:none}.blog-karte:hover{transform:none}}