/* Blog - gemeinsames CSS aller Blogübersicht + 4 Beiträge.
   Bis 07.08.2026 stand das hier als Inline-<style> in blog-layout.php und wanderte damit
   bei JEDEM Seitenaufruf neu ueber die Leitung: das HTML traegt
   "Cache-Control: no-store" (PHP-Session), war also nie cachebar.
   Reihenfolge in der Kaskade bleibt unveraendert: style.css -> diese Datei
   -> $page_styles (weiterhin inline, seitenspezifisch). */

body{padding-bottom:70px}

/*  has-fade: weicher Verlauf fuer Bild-Sektionen  */
.has-fade,.has-fade-top,.has-fade-bottom{position:relative}
.has-fade::before,.has-fade-top::before{content:"";position:absolute;top:0;left:0;right:0;height:160px;background:linear-gradient(to bottom,#191e28 0%,transparent 100%);pointer-events:none;z-index:1}
.has-fade::after,.has-fade-bottom::after{content:"";position:absolute;bottom:0;left:0;right:0;height:160px;background:linear-gradient(to top,#191e28 0%,transparent 100%);pointer-events:none;z-index:1}
.has-fade>.section-inner,.has-fade-top>.section-inner,.has-fade-bottom>.section-inner{position:relative;z-index:2}
/* post-body braucht dieselbe Anhebung wie section-inner, sonst liegt der Text UNTER dem
   Verlauf und wird ausgeblendet. Vertikale Polsterung wie .section-inner (7rem). */
.has-fade>.post-body,.has-fade-top>.post-body,.has-fade-bottom>.post-body{position:relative;z-index:2;padding-top:7rem;padding-bottom:7rem}

/*  Breadcrumb (wie Service-Seiten)  */
.bc-list{max-width:1200px;margin:0 auto;padding:.7rem 4vw;display:flex;align-items:center;gap:.5rem;list-style:none;font-family:var(--font-head);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);flex-wrap:wrap}
.bc-list a{color:var(--text-dim);transition:color .2s;text-decoration:none}.bc-list a:hover{color:var(--accent)}
.bc-sep{opacity:.4;padding:0 .1rem}

/*  Beitrags-Kopf  */
.post-hero{position:relative;padding:7rem 4vw 3.5rem;text-align:center;background-position:center;background-size:cover}
.post-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(25,30,40,.72) 0%,#191e28 100%);z-index:0}
.post-hero>*{position:relative;z-index:2}
.post-cat{display:inline-block;font-family:var(--font-head);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(197,199,196,.35);border-radius:var(--radius-brand);padding:.445rem .78rem .195rem .85rem;margin-bottom:1.1rem}
.post-title{font-family:var(--font-head);font-size:clamp(1.9rem,4.4vw,3.1rem);font-weight:700;line-height:1.12;color:var(--white);max-width:940px;margin:0 auto;text-transform:none;letter-spacing:.01em}
.post-lead{max-width:720px;margin:1.4rem auto 0;font-size:1.02rem;line-height:1.85;color:var(--text-dim)}
.post-meta{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;margin-top:1.8rem;font-family:var(--font-head);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.post-meta img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid var(--accent)}
.post-meta .pm-sep{opacity:.4}

/*  Artikel-Fliesstext  */
.post-body{max-width:1200px;margin:0 auto;padding:0 4vw}
.post-body h2{font-family:var(--font-head);font-size:clamp(1.35rem,2.6vw,1.75rem);font-weight:700;color:var(--white);line-height:1.25;margin:3.2rem 0 1rem;scroll-margin-top:100px;text-transform:none;letter-spacing:.01em}
.post-body h3{font-family:var(--font-head);font-size:1.02rem;font-weight:700;color:var(--white);margin:2.2rem 0 .7rem;scroll-margin-top:100px;text-transform:uppercase;letter-spacing:.05em}
.post-body p{color:var(--text-dim);line-height:1.9;margin-bottom:1.15rem;font-size:1rem}
.post-body a:not(.btn){color:var(--white);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(197,199,196,.5);transition:text-decoration-color .25s}
.post-body a:not(.btn):hover{text-decoration-color:var(--white)}
.post-body strong{color:var(--white);font-weight:600}
.post-body ul,.post-body ol{margin:0 0 1.4rem 0;padding-left:1.2rem;color:var(--text-dim)}
.post-body li{line-height:1.85;margin-bottom:.55rem}
.post-body ul li::marker{color:var(--accent)}
.post-body ol li::marker{color:var(--accent);font-family:var(--font-head);font-weight:700}
.post-body figure{margin:2.2rem 0}
.post-body img{width:100%;height:auto;border-radius:var(--radius-brand);display:block}
.post-body figcaption{margin-top:.7rem;font-size:.85rem;color:var(--text-dim);text-align:center;font-style:italic}
.post-body hr{border:none;border-top:1px solid rgba(197,199,196,.2);margin:3rem 0}

/*  Das Wichtigste in Kuerze (Antwort-Box, auch fuer KI-Systeme gut extrahierbar)  */
.tldr{background:#191e28ab;border:1px solid rgba(197,199,196,.25);border-left:2px solid var(--accent);border-radius:var(--radius-brand);padding:1.75rem 2rem;margin:2.5rem 0}
.tldr-title{font-family:var(--font-head);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.tldr ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.7rem}
.tldr li{display:flex;align-items:flex-start;gap:.7rem;color:var(--text-dim);line-height:1.75;font-size:.97rem;margin:0}
.tldr li i{color:var(--accent);flex-shrink:0;margin-top:.35rem;font-size:.7rem}

/*  Inhaltsverzeichnis  */
.toc{background:#191e28ab;border:1px solid rgba(197,199,196,.25);border-radius:var(--radius-brand);padding:1.6rem 2rem;margin:2.5rem 0}
.toc-title{font-family:var(--font-head);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:toc}
.toc li{counter-increment:toc;margin-bottom:.5rem;line-height:1.6}
.toc li::before{content:counter(toc) ".";color:var(--accent);font-family:var(--font-head);font-weight:700;margin-right:.6rem}
.toc a{color:var(--text-dim);text-decoration:none;transition:color .2s;font-size:.95rem}
.toc a:hover{color:var(--white)}

/*  ===== Bausteine fuer abwechslungsreiche Beitraege =====================
    Nicht jeder Beitrag nutzt alle. Ziel: gleiche Designsprache, andere Anmutung.  */

/*  Kurzantwort (Alternative zur .tldr-Box): grosse Aussage + Fakten-Reihe  */
.answer{margin:2.5rem 0}
.answer-lead{font-family:var(--font-head);font-size:clamp(1.1rem,2.2vw,1.45rem);font-weight:700;line-height:1.45;color:var(--white);border-left:2px solid var(--accent);padding-left:1.5rem;margin-bottom:1.75rem}
.answer-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:rgba(197,199,196,.2);border:1px solid rgba(197,199,196,.2);border-radius:var(--radius-brand);overflow:hidden}
.answer-fact{background:#191e28;padding:1.15rem 1.25rem}
.answer-fact b{display:block;font-family:var(--font-head);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.45rem;font-weight:700}
.answer-fact span{color:var(--text-dim);font-size:.9rem;line-height:1.65}

/*  Inhaltsverzeichnis als Chips (flach statt Kasten)  */
.toc-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 2.5rem;padding:0;list-style:none;counter-reset:tcc}
.toc-chips li{counter-increment:tcc}
.toc-chips a{display:inline-block;font-family:var(--font-head);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);border:1px solid rgba(197,199,196,.28);border-radius:var(--radius-brand);padding:.45rem .95rem;text-decoration:none;transition:border-color .3s,color .3s}
.toc-chips a::before{content:counter(tcc);color:var(--accent);margin-right:.5rem;font-weight:700}
.toc-chips a:hover{border-color:#fff;color:var(--white);text-decoration:none}

/*  Grosses Zitat / Kernaussage einer Quelle  */
.post-quote{margin:3rem 0;text-align:center;padding:0 1rem}
.post-quote blockquote{margin:0;font-family:var(--font-head);font-size:clamp(1.15rem,2.6vw,1.65rem);font-weight:700;line-height:1.5;color:var(--white)}
.post-quote blockquote::before{content:"„";display:block;font-size:3rem;line-height:.5;color:var(--accent);margin-bottom:1rem}
.post-quote cite{display:block;margin-top:1.25rem;font-family:var(--font-head);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-style:normal}

/*  Mythos / Fakt  */
.myth{display:flex;flex-direction:column;gap:1rem;margin:2.5rem 0}
.myth-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.myth-card{border:1px solid rgba(197,199,196,.25);border-radius:var(--radius-brand);padding:1.35rem 1.5rem;background:#191e28ab}
.myth-card--m{border-color:rgba(248,113,113,.4)}
.myth-card--f{border-color:rgba(74,222,128,.4)}
.myth-lbl{display:flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.7rem}
.myth-card--m .myth-lbl{color:#f87171}
.myth-card--f .myth-lbl{color:#4ade80}
.myth-card p{margin:0;color:var(--text-dim);font-size:.94rem;line-height:1.75}
.myth-card--f p strong{color:var(--white)}

/*  Crawler-Matrix mit Status-Pillen  */
.pill{display:inline-block;font-family:var(--font-head);font-size:.57rem;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:.35rem .64rem .15rem .7rem;white-space:nowrap}
.pill--yes{color:#4ade80;border:1px solid rgba(74,222,128,.4)}
.pill--opt{color:var(--text-dim);border:1px solid rgba(197,199,196,.3)}
.pill--no{color:#f87171;border:1px solid rgba(248,113,113,.4)}
.post-table td code{white-space:nowrap}

/*  Selbsttest zum Abhaken (Kaestchen statt Haken/Nummern)  */
.decide{background:#191e28ab;border:1px solid rgba(197,199,196,.25);border-radius:var(--radius-brand);padding:1.75rem 2rem;margin:2.5rem 0}
.decide-title{font-family:var(--font-head);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem}
.decide ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.85rem}
.decide li{display:flex;align-items:flex-start;gap:.85rem;color:var(--text-dim);line-height:1.7;font-size:.96rem;margin:0}
.decide li::before{content:"";flex-shrink:0;width:17px;height:17px;margin-top:.22rem;border:1px solid var(--accent);border-radius:3px}
.decide-result{margin:1.4rem 0 0;padding-top:1.2rem;border-top:1px solid rgba(197,199,196,.2);color:var(--white);font-size:.96rem;line-height:1.75}

/*  Skala: wo etwas viel, wenig oder gar nichts taugt  */
.scale{margin:2.5rem 0}
.scale-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin-bottom:1.25rem}
.scale-bar span{flex:1}
.scale-bar .s1{background:#4ade80}
.scale-bar .s2{background:var(--accent);opacity:.65}
.scale-bar .s3{background:#f87171}
.scale-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.scale-col{background:#191e28ab;border:1px solid rgba(197,199,196,.22);border-radius:var(--radius-brand);padding:1.25rem 1.4rem}
.scale-col h3{margin:0 0 .3rem;font-family:var(--font-head);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.scale-col--yes h3{color:#4ade80}
.scale-col--mid h3{color:var(--accent)}
.scale-col--no h3{color:#f87171}
.scale-sub{font-size:.82rem;color:var(--text-dim);margin:0 0 .9rem;font-style:italic}
.scale-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.scale-col li{color:var(--text-dim);font-size:.9rem;line-height:1.6;padding-left:.9rem;position:relative;margin:0}
.scale-col li::before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}

/*  Nummerierte Schrittleiste mit Verbindungslinie  */
.steps{list-style:none;padding:0;margin:2.25rem 0;position:relative}
.steps li{position:relative;padding:0 0 1.6rem 3.25rem;color:var(--text-dim);line-height:1.8}
.steps li:last-child{padding-bottom:0}
.steps li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:-.15rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--accent);border-radius:50%;color:var(--accent);font-family:var(--font-head);font-size:.8rem;font-weight:700;background:#191e28}
.steps li::after{content:"";position:absolute;left:15px;top:32px;bottom:0;width:1px;background:rgba(197,199,196,.25)}
.steps li:last-child::after{display:none}
.steps{counter-reset:st}
.steps b{display:block;color:var(--white);font-family:var(--font-head);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.3rem}

@media(max-width:768px){
  .myth-row{grid-template-columns:1fr}
  .answer-lead{padding-left:1rem}
  .post-quote{padding:0}
  .scale-cols{grid-template-columns:1fr}
  .scale-bar{display:none}
}

/*  Merksatz / Zitat-Block  */
.post-note{background:#191e28ab;border:1px solid rgba(197,199,196,.25);border-radius:var(--radius-brand);padding:1.5rem 1.9rem;margin:2rem 0}
.post-note p{margin:0;color:var(--text);font-size:.98rem;line-height:1.8}
.post-note p+p{margin-top:.8rem}

/*  Definitions-/Fakten-Tabelle  */
.post-table-wrap{overflow-x:auto;margin:2rem 0}
.post-table{width:100%;border-collapse:collapse;font-size:.94rem}
.post-table th{font-family:var(--font-head);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-align:left;padding:.85rem 1rem;border-bottom:1px solid rgba(197,199,196,.3);white-space:nowrap}
.post-table td{color:var(--text-dim);padding:.9rem 1rem;border-bottom:1px solid rgba(197,199,196,.15);line-height:1.7;vertical-align:top}
.post-table tr:last-child td{border-bottom:none}

/*  Eigene Grafiken (Inline-SVG, keine externen Dateien -> CSP-konform + schnell)  */
.post-fig{margin:2.75rem 0;background:#191e28ab;border:1px solid rgba(197,199,196,.25);border-radius:var(--radius-brand);padding:2rem 2rem 1.5rem}
.post-fig svg{width:100%;height:auto;display:block;max-width:820px;margin:0 auto}
.post-fig figcaption{margin-top:1.1rem;font-size:.85rem;color:var(--text-dim);text-align:center;font-style:italic}

/*  Code-Block (z.B. robots.txt-Beispiele)  */
.post-code{background:#0e1219;border:1px solid rgba(197,199,196,.25);border-radius:var(--radius-brand);padding:1.25rem 1.4rem;margin:1.75rem 0;overflow-x:auto}
.post-code pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;line-height:1.75;color:var(--text-dim);white-space:pre}
.post-code .c-key{color:var(--white)}
.post-code .c-com{color:rgba(197,199,196,.55)}
.post-code-cap{font-size:.82rem;color:var(--text-dim);margin:.6rem 0 0;font-style:italic}
.post-body code,.tldr code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:rgba(197,199,196,.12);border-radius:4px;padding:.1em .38em;color:var(--white)}

/*  Quellen-Fussnote im Fliesstext  */
.ref{font-size:.72em;vertical-align:super;line-height:0;margin-left:.12em}
.post-body a.ref{text-decoration:none;color:var(--accent)}
.post-body a.ref:hover{color:var(--white)}

/*  Quellenverzeichnis  */
.sources{margin-top:1.5rem;counter-reset:src}
.sources li{counter-increment:src;position:relative;list-style:none;padding-left:2.1rem;margin-bottom:1rem;line-height:1.7;color:var(--text-dim);font-size:.93rem;scroll-margin-top:100px}
.sources li::before{content:"[" counter(src) "]";position:absolute;left:0;top:0;color:var(--accent);font-family:var(--font-head);font-size:.78rem;font-weight:700}
.sources .src-org{color:var(--white)}
.sources .src-note{display:block;margin-top:.15rem;font-size:.86rem;opacity:.85}

/*  FAQ (wie Service-Seiten)  */
.faq-list{margin-top:2.5rem}
.faq-item{border-bottom:1px solid rgba(197,199,196,.25)}
.faq-item:first-child{border-top:1px solid rgba(197,199,196,.25)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--font-head);font-size:.9rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--white);padding:1.3rem 1.5rem;cursor:pointer;list-style:none;transition:color .25s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary::after{content:'+';flex-shrink:0;color:var(--accent);font-size:1.4rem;font-weight:300;transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{color:var(--text-dim);line-height:1.85;padding:0 1.5rem 1.4rem}

/*  Autoren-Box (wie Service-Seiten)  */
.author-wrap{max-width:none}
.author-box{display:flex;align-items:flex-start;gap:2rem;background:#191e28ab;border:1px solid rgba(197,199,196,.25);border-radius:var(--radius-brand);padding:2rem 2.5rem;transition:border-color .4s}
.author-box:hover{border-color:#fff}
.author-img{width:88px;height:88px;border-radius:50%;object-fit:cover;border:2px solid var(--accent);flex-shrink:0}
.author-name{font-family:var(--font-head);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--white);margin-bottom:.2rem}
.author-role{font-family:var(--font-head);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.85rem}
.author-bio{color:var(--text-dim);line-height:1.8;font-size:.9rem}

/*  Beitrags-Karten (Uebersicht + "Weitere Beitraege")  */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;margin-top:3rem}
.post-card{display:flex;flex-direction:column;background:#191e28ab;border:1px solid rgba(197,199,196,.25);border-radius:var(--radius-brand);overflow:hidden;text-decoration:none;transition:border-color .4s}
.post-card:hover{border-color:#fff;text-decoration:none}
.post-card__img{aspect-ratio:16/9;width:100%;object-fit:cover;display:block}
.post-card__body{padding:1.5rem 1.75rem 1.75rem;display:flex;flex-direction:column;flex:1}
.post-card__cat{font-family:var(--font-head);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}
.post-card__title{font-family:var(--font-head);font-size:1.02rem;font-weight:700;color:var(--white);line-height:1.35;margin-bottom:.7rem}
.post-card__teaser{color:var(--text-dim);font-size:.92rem;line-height:1.75;flex:1}
.post-card__meta{margin-top:1.2rem;font-family:var(--font-head);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}

/*  CTA am Beitragsende  */
.post-cta{background:#191e28ab;border:1px solid rgba(197,199,196,.25);border-radius:var(--radius-brand);padding:2.25rem 2.5rem;margin:3rem 0 0;text-align:center;transition:border-color .4s}
.post-cta:hover{border-color:#fff}
.post-cta__title{font-family:var(--font-head);font-size:1.35rem;font-weight:700;color:var(--white);line-height:1.3;margin:0 0 .8rem}
.post-cta p{margin:0 auto 1.6rem;max-width:560px}

/*  Grafiken als HTML statt SVG - skalieren mit der Schriftgroesse und brechen mobil sauber um  */
.gfx{display:flex;gap:1rem;align-items:stretch}
.gfx-card{flex:1;display:flex;gap:.9rem;align-items:flex-start;background:rgba(197,199,196,.06);border:1px solid rgba(197,199,196,.3);border-radius:var(--radius-brand);padding:1.1rem 1.25rem}
.gfx-card i{color:var(--accent);font-size:1.05rem;flex-shrink:0;margin-top:.2rem}
.gfx-t{font-family:var(--font-head);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--white);margin-bottom:.3rem}
.gfx-s{font-size:.86rem;line-height:1.6;color:var(--text-dim)}
/* Suchergebnis-Grafik (Kartenbereich ueber den klassischen Treffern) */
.gfx-serp{max-width:560px;margin:0 auto}
.gfx-search{display:flex;align-items:center;gap:.6rem;border:1px solid rgba(197,199,196,.35);border-radius:999px;padding:.6rem 1rem;color:var(--text-dim);font-size:.88rem}
.gfx-search i{color:var(--accent);font-size:.85rem}
.gfx-map{margin-top:1rem;border:1.5px solid var(--accent);border-radius:var(--radius-brand);background:rgba(197,199,196,.07);padding:1rem 1.1rem}
.gfx-lbl{font-family:var(--font-head);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.75rem}
.gfx-hit{display:flex;align-items:center;gap:.7rem;padding:.45rem 0}
.gfx-hit+.gfx-hit{border-top:1px solid rgba(197,199,196,.15)}
.gfx-num{flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:1px solid var(--accent);border-radius:5px;color:var(--accent);font-family:var(--font-head);font-size:.7rem;font-weight:700}
.gfx-hit-name{color:var(--white);font-size:.9rem;font-weight:600}
.gfx-hit-rate{margin-left:auto;color:var(--text-dim);font-size:.8rem;white-space:nowrap}
.gfx-hit-rate i{color:var(--accent);font-size:.7rem}
.gfx-rest{margin-top:1.25rem}
.gfx-rest .gfx-lbl{color:rgba(212,214,211,.6)}
.gfx-bar{height:8px;border-radius:4px;background:rgba(197,199,196,.2);margin-bottom:.55rem}
.gfx-bar--s{height:6px;background:rgba(197,199,196,.13)}
@media(max-width:520px){
  .gfx-hit{flex-wrap:wrap}
  .gfx-hit-rate{margin-left:2rem;width:100%}
}

/* Ablauf-Grafik (Profil -> Website -> Anfrage) */
.gfx-flow{display:flex;align-items:center;gap:.75rem;flex-wrap:nowrap}
.gfx-step{flex:1;text-align:center;background:rgba(197,199,196,.06);border:1px solid rgba(197,199,196,.3);border-radius:var(--radius-brand);padding:1.25rem 1rem}
.gfx-step--end{background:rgba(255,255,255,.1);border-color:#fff}
.gfx-arrow{flex-shrink:0;color:var(--accent);font-size:.9rem;line-height:1}
.gfx-note{text-align:center;color:var(--text-dim);font-size:.88rem;margin-top:1.1rem}

@media(max-width:900px){
  .author-box{flex-direction:column;align-items:flex-start;text-align:left}
  .post-hero{padding:5.5rem 4vw 3rem}
  .tldr,.toc,.post-note{padding:1.4rem 1.5rem}
  .post-cta{padding:1.9rem 1.6rem}
}

/*  Mobil: gleicher Seitenabstand wie der Rest der Seite (7vw) + kompaktere Abstaende  */
@media(max-width:768px){
  .post-body{padding:0 7vw}
  .has-fade>.post-body,.has-fade-top>.post-body,.has-fade-bottom>.post-body{padding-top:3rem;padding-bottom:3rem}
  .post-body h2{margin:2.2rem 0 .8rem}
  .post-body h3{margin:1.6rem 0 .6rem}
  .tldr,.toc,.post-fig,.post-cta{margin:1.75rem 0}
  .post-note{margin:1.5rem 0}
  .post-fig{padding:1.25rem 1rem 1rem}
  /* Grafiken untereinander statt nebeneinander */
  .gfx{flex-direction:column;gap:.75rem}
  .gfx-flow{flex-direction:column;gap:.6rem}
  .gfx-arrow{transform:rotate(90deg)}
  .gfx-step{width:100%}
}