/**
 * Kilo Kratom — Editorialer Satzspiegel
 * Gemeinsame Styles fuer Labortests-Seite und Wissensartikel.
 * Geladen via wp_enqueue_style nur auf Templates die es brauchen.
 */

/* GP-Container transparent — Sand-BG scheint durch */
body.kk-editorial-body,
body.kk-editorial-body .site,
body.kk-editorial-body .site-content,
body.kk-editorial-body .content-area,
body.kk-editorial-body .entry-content,
body.kk-editorial-body article.page,
body.kk-editorial-body .inside-article{background:#f0ede4!important}

/* Aeusserer Wrapper */
.kk-editorial-page{background:#f0ede4;font-family:'DM Sans',-apple-system,system-ui,sans-serif;color:#0e180b;padding-top:48px}

/* Hero */
.kk-editorial-hero{max-width:1280px;margin:0 auto;padding:72px clamp(24px,6vw,80px) 56px}
.kk-editorial-eyebrow{font-family:'DM Mono',ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.20em;color:#2a5c14;text-transform:uppercase;margin-bottom:28px}
.kk-editorial-h1{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(40px,7vw,72px);line-height:1.02;letter-spacing:-.02em;color:#162e0f;margin:0 0 28px;word-break:normal;overflow-wrap:break-word;hyphens:none;-webkit-hyphens:none}
.kk-editorial-subhead{font-family:'Fraunces',Georgia,serif;font-weight:500;font-style:italic;font-size:clamp(20px,3vw,30px);line-height:1.25;color:#162e0f;margin:0 0 56px}
.kk-editorial-lead{font-size:17px;line-height:1.7;font-weight:300;margin:0 0 48px;max-width:620px}
.kk-editorial-quick-anchor{font-family:'DM Mono',ui-monospace,monospace;font-size:12px;font-weight:500;letter-spacing:.18em;color:#2a5c14;text-decoration:none;text-transform:uppercase;border-bottom:1px solid #2a5c14;padding-bottom:4px;display:inline-block;transition:color .2s ease;margin-bottom:88px}
.kk-editorial-quick-anchor:hover{color:#3a7020;border-bottom-color:#3a7020}

/* Satzspiegel */
.kk-editorial-section{max-width:720px;margin:0 auto;padding:0 32px}
.kk-editorial-rule{height:1px;background:rgba(14,24,11,.12);margin:56px auto;max-width:1280px;padding:0 clamp(24px,6vw,80px)}

/* Typografie */
.kk-editorial-h2{font-family:'Syne',sans-serif;font-weight:800;font-size:28px;line-height:1.15;color:#162e0f;margin:0 0 40px;word-break:normal;overflow-wrap:break-word;hyphens:none;-webkit-hyphens:none}
.kk-editorial-body-text{font-size:16px;line-height:1.7;font-weight:300;margin:0 0 16px}
.kk-editorial-pullquote{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;font-size:18px;line-height:1.6;color:#162e0f;margin:32px 0 16px;padding:0 0 0 20px;border-left:2px solid #2a5c14}
.kk-editorial-bullets{list-style:none;padding:0;margin:24px 0 32px}
.kk-editorial-bullets li{font-size:16px;line-height:1.7;font-weight:300;padding-left:24px;position:relative;margin-bottom:12px}
.kk-editorial-bullets li::before{content:'\2014';position:absolute;left:0;color:#2a5c14;font-weight:500}

/* Outro */
.kk-editorial-outro{max-width:720px;margin:0 auto;padding:56px 32px 96px}

/* ── Editor-Content-Styling (fuer page-wissen.php) ──
   Standard-WordPress-Block-Tags innerhalb des Wissen-Containers
   werden automatisch im Brand-Stil gerendert. Marlene schreibt
   einfach im Editor — keine Klassen noetig. */
.kk-editorial-content p{font-size:16px;line-height:1.7;font-weight:300;margin:0 0 26px}
.kk-editorial-content h2{font-family:'Syne',sans-serif;font-weight:800;font-size:34px;line-height:1.2;color:#162e0f;margin:72px 0 28px;word-break:normal;overflow-wrap:break-word;hyphens:none;-webkit-hyphens:none}
.kk-editorial-content h2:first-child{margin-top:0}
.kk-editorial-content h3{font-family:'Syne',sans-serif;font-weight:800;font-size:20px;line-height:1.2;color:#162e0f;margin:40px 0 16px}
.kk-editorial-content ul,.kk-editorial-content ol{list-style:none;padding:0;margin:24px 0 32px}
.kk-editorial-content ul li,.kk-editorial-content ol li{font-size:16px;line-height:1.7;font-weight:300;padding-left:24px;position:relative;margin-bottom:12px}
.kk-editorial-content ul li::before{content:'\2014';position:absolute;left:0;color:#2a5c14;font-weight:500}
.kk-editorial-content ol{counter-reset:ed-ol}
.kk-editorial-content ol li{counter-increment:ed-ol}
.kk-editorial-content ol li::before{content:counter(ed-ol) '.';position:absolute;left:0;color:#2a5c14;font-weight:500;font-family:'DM Mono',ui-monospace,monospace;font-size:14px}
.kk-editorial-content blockquote{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;font-size:18px;line-height:1.6;color:#162e0f;margin:32px 0 16px;padding:0 0 0 20px;border-left:2px solid #2a5c14}
.kk-editorial-content blockquote p{font-family:inherit;font-style:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;margin:0}
.kk-editorial-content a{color:#2a5c14;text-decoration:underline;text-underline-offset:3px;transition:color .2s ease}
.kk-editorial-content a:hover{color:#3a7020}
.kk-editorial-content strong{font-weight:500}
.kk-editorial-content hr{height:1px;background:rgba(14,24,11,.12);border:none;margin:56px 0}

/* Artikelgrafiken (SVG via Shortcode) */
.kk-artikelgrafik{margin:2.5rem 0}
.kk-artikelgrafik svg{display:block;width:100%;height:auto}

/* Responsive */
@media(max-width:767px){
.kk-editorial-h1{font-size:32px}
.kk-editorial-h2{font-size:24px}
.kk-editorial-content h2{font-size:24px;margin:48px 0 20px}
.kk-editorial-section,.kk-editorial-outro{padding-left:24px;padding-right:24px}
.kk-editorial-quick-anchor{margin-bottom:48px}
}

/* Artikel-Grafik: Desktop/Mobile-Umschaltung */
.kk-grafik-mobile{display:none}
.kk-grafik-mobile svg{display:block;width:100%;height:auto;max-width:400px;margin:0 auto}
@media(max-width:560px){
.kk-grafik-desktop{display:none}
.kk-grafik-mobile{display:block}
}