/* ==========================================================================
   Blog — gleiche Formensprache wie das Portfolio (editorial, Papier).
   Wird nur auf der Blog-Uebersicht und in Einzelbeitraegen geladen.
   ========================================================================== */
:root{
  --canvas:#FAF7F0;
  --surface:#F1ECE0;
  --ink:#1A1712;
  --ink-2:#57503F;
  --ink-3:#8A8272;
  --rule:#DCD4C3;
  --rule-soft:#EAE4D7;
  --accent:#8A3324;
}
*{box-sizing:border-box}
body{
  background:var(--canvas);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:18px;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;margin:0;
}
/* Astra faerbt den body ueber .ast-plain-container ein; der Klassenselektor
   schlaegt das body{} oben. Mit den WP-Body-Klassen nachziehen. */
body.blog,body.single,body.single-post{background:var(--canvas)}
::selection{background:var(--ink);color:var(--canvas)}
a{color:inherit}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.eyebrow{font-family:"IBM Plex Sans",sans-serif;font-weight:500;font-size:13px;color:var(--ink-3)}
.eyebrow a{
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:transparent;
  transition:color .2s ease,text-decoration-color .2s ease;
}
.eyebrow a:hover{color:var(--ink);text-decoration-color:var(--rule)}
h1,h2,h3{overflow-wrap:break-word;text-wrap:balance}

/* Ueberschriftenfarbe gegen Astra absichern */
.blog-wrap h1,.blog-wrap h2,.blog-wrap h3,
article.post h1,article.post h2,article.post h3,
.post-body h2,.post-body h3{color:var(--ink)}

.blog-wrap{max-width:720px;margin:0 auto;padding:0 28px 110px}

/* Kopfzeile: zurueck zum Portfolio */
.blog-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:38px 0 0;margin-bottom:64px}
.blog-top .home{font-family:"Fraunces",serif;font-weight:500;font-size:20px;letter-spacing:-.015em;text-decoration:none}
.blog-top .back{
  font-family:"IBM Plex Sans",sans-serif;font-size:14px;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:transparent;
  transition:color .2s ease,text-decoration-color .2s ease;
}
.blog-top .back:hover{color:var(--ink);text-decoration-color:var(--rule)}

/* Uebersicht */
.blog-head{margin-bottom:52px;padding-bottom:8px}
.blog-head h1{
  font-family:"Fraunces",serif;font-weight:400;font-size:clamp(34px,5vw,52px);
  line-height:1.04;letter-spacing:-.025em;margin:14px 0 0;max-width:16ch;
}

.blog-head .cat-desc{color:var(--ink-2);font-size:16px;line-height:1.55;margin:16px 0 0;max-width:58ch}

/* Themen-Abschnitte auf der Blog-Startseite */
.topic-section{margin-top:64px}
.topic-section:first-of-type{margin-top:0}
.topic-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:14px;border-bottom:1px solid var(--rule);margin-bottom:6px;
}
.topic-head h2{
  font-family:"Fraunces",serif;font-weight:500;font-size:clamp(22px,3vw,28px);
  letter-spacing:-.02em;margin:0;
}
.topic-head h2 a{
  text-decoration:underline;text-underline-offset:5px;text-decoration-color:transparent;
  transition:text-decoration-color .2s ease;
}
.topic-head h2 a:hover{text-decoration-color:var(--rule)}
.topic-see-all{
  font-family:"IBM Plex Sans",sans-serif;font-size:14px;color:var(--ink-3);
  text-decoration:none;white-space:nowrap;transition:color .2s ease;
}
.topic-see-all:hover{color:var(--ink)}

/* Beitragsliste */
.post-list{display:flex;flex-direction:column}
.post-card{display:block;text-decoration:none;padding:28px 0 30px;border-top:1px solid var(--rule-soft)}
.post-card:first-child{border-top:1px solid var(--rule)}
.post-card time{
  font-family:"IBM Plex Sans",sans-serif;font-size:13px;font-weight:500;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.post-card h2{
  font-family:"Fraunces",serif;font-weight:500;font-size:27px;line-height:1.18;
  letter-spacing:-.015em;margin:9px 0 8px;
  text-decoration:underline;text-underline-offset:5px;text-decoration-color:transparent;
  transition:text-decoration-color .2s ease;
}
.post-card:hover h2{text-decoration-color:var(--rule)}
.post-card p{color:var(--ink-2);font-size:16px;line-height:1.55;margin:0;max-width:58ch}
.post-card .more{font-family:"IBM Plex Sans",sans-serif;font-size:14px;color:var(--ink-3);margin-top:12px;display:inline-block}

/* Blaetternavigation */
.pagination{
  display:flex;justify-content:space-between;gap:20px;margin-top:48px;padding-top:22px;
  border-top:1px solid var(--rule);font-family:"IBM Plex Sans",sans-serif;font-size:14px;
}
.pagination a{color:var(--ink-3);text-decoration:none;transition:color .2s ease}
.pagination a:hover{color:var(--ink)}

/* Einzelbeitrag */
article.post{max-width:680px;margin:0 auto;padding:0 28px 110px}
.post-head{margin:10px 0 44px}
.post-head h1{
  font-family:"Fraunces",serif;font-weight:400;font-size:clamp(30px,5vw,46px);
  line-height:1.06;letter-spacing:-.025em;margin:14px 0 0;
}
.post-head .meta{
  font-family:"IBM Plex Sans",sans-serif;font-size:14px;color:var(--ink-3);
  margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-soft);
}

.post-body{font-size:18px;color:var(--ink)}
.post-body p{margin:0 0 22px}
.post-body h2{font-family:"Fraunces",serif;font-weight:500;font-size:28px;line-height:1.2;margin:46px 0 14px;letter-spacing:-.015em}
.post-body h3{font-family:"Fraunces",serif;font-weight:500;font-size:22px;line-height:1.25;margin:34px 0 12px}
.post-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.post-body a:hover{text-decoration-color:var(--accent)}
.post-body blockquote{
  margin:32px 0;padding:2px 0 2px 26px;border-left:2px solid var(--accent);
  color:var(--ink-2);font-family:"Fraunces",serif;font-size:21px;line-height:1.45;font-style:italic;
}
.post-body ul,.post-body ol{padding-left:22px;margin:0 0 22px}
.post-body li{margin:6px 0}
.post-body img{max-width:100%;height:auto;margin:18px 0}
.post-body figcaption{font-size:14px;color:var(--ink-3);margin-top:-6px}
.post-body code{font-family:"IBM Plex Mono",monospace;font-size:.88em;background:var(--surface);padding:2px 6px}
.post-body pre{background:var(--surface);padding:18px;overflow:auto;margin:0 0 22px;border:1px solid var(--rule-soft)}
.post-body pre code{background:none;padding:0}
.post-body hr{border:none;border-top:1px solid var(--rule);margin:44px 0}

.post-nav{
  display:flex;justify-content:space-between;gap:24px;margin-top:64px;padding-top:22px;
  border-top:1px solid var(--rule);font-family:"IBM Plex Sans",sans-serif;font-size:14px;
}
.post-nav a{color:var(--ink-3);text-decoration:none;max-width:46%;transition:color .2s ease}
.post-nav a:hover{color:var(--ink)}

.blog-foot{
  margin-top:70px;padding-top:20px;border-top:1px solid var(--rule-soft);
  font-family:"IBM Plex Sans",sans-serif;font-size:13px;color:var(--ink-3);
}

@media (max-width:640px){
  body{font-size:17px}
  .blog-wrap,article.post{padding-left:22px;padding-right:22px}
  .post-card h2{font-size:24px}
  .post-body blockquote{font-size:19px;padding-left:20px}
}