/**
 * Blog fork layer (natuerliche-oele.de). Site-owned, loaded AFTER the inline
 * stylesheet scripts/build-blog.mjs emits (blog.config.mjs -> headAfter), so
 * these rules win at equal specificity. Tokens only, no colour literals except
 * the AI badge scrim (it sits on arbitrary photos, so it must not follow the
 * theme). Joachim meeting 05.11.2026, package E.
 */

/* ---- overview: short head, articles start high ---------------------------- */
.bwrap{padding-top:28px;padding-bottom:56px}
.bhead{max-width:720px;margin-bottom:20px}
.bhead h1{font-family:var(--font-heading);font-size:clamp(2.2rem,4.6vw,3.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 8px}
.bhead p{font-size:1rem;margin:0}
@media (max-width:640px){.bwrap{padding-top:18px}.bhead{margin-bottom:14px}}

/* ---- category tabs + sort (only rendered from 2 categories on) ------------- */
html:not(.js) .cat-toolbar{display:none}
.cat-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:0 0 22px;border-bottom:2px solid var(--line-soft)}
.cat-toolbar .cats{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 -2px}
.cat-toolbar .cats button{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 18px;border:1px solid transparent;border-bottom:3px solid transparent;border-radius:var(--radius-md) var(--radius-md) 0 0;background:transparent;color:var(--text-2);font:600 .95rem var(--font-heading),sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cat-toolbar .cats button:hover{background:var(--surface-2);color:var(--text)}
.cat-toolbar .cats button.on{background:var(--surface);color:var(--accent-text);border-color:var(--line-soft);border-bottom-color:var(--accent)}
.cat-toolbar .cats button:focus-visible,.cat-toolbar select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tab-n{display:inline-block;min-width:1.7em;padding:1px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-size:.78rem;font-weight:700;text-align:center}
.cat-toolbar .sort{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--text-2);font-size:.88rem}
.cat-toolbar select{min-height:44px;padding:8px 34px 8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:500 .92rem var(--font-body),sans-serif}

/* ---- featured card: longer lead text, button --------------------------------- */
.featured{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.featured .fimg{min-height:320px}
.featured .fbody{padding:30px 32px}
.featured h2{font-size:1.6rem}
.featured .fex{font-size:1rem;line-height:1.6}
@media (max-width:860px){.featured{grid-template-columns:1fr}.featured .fimg{min-height:0;aspect-ratio:16/9}.featured .fbody{padding:22px 20px}}

/* ---- "Beitrag lesen" as a real button (the whole card stays one link) --------- */
.read-btn{align-self:flex-start;margin-top:auto;min-height:44px;padding:10px 20px;font-size:.92rem}
.featured .read-btn{margin-top:6px}
.post:hover .read-btn,.featured:hover .read-btn{background:var(--accent-2)}
.post .body{gap:10px}

/* ---- AI badge: one small pill on the image, bottom left ------------------------ */
.ai-badge-media>.ai-badge{top:auto;right:auto;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 5px;border-radius:999px;background:rgba(10,14,20,.72);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:none;color:#fff;font-size:11.5px;font-weight:500;line-height:1.3;letter-spacing:.01em;white-space:nowrap}
.ai-badge-media>.ai-badge::before{content:"";flex:0 0 auto;width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg id='Calque_1' data-name='Calque 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 566.93 566.93'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 { fill: %23fff; fill-rule: evenodd; } .cls-2 { fill: %231d1d1b; } %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M272.03,100.72c100.92,0,182.74,81.82,182.74,182.75s-81.82,182.74-182.74,182.74-182.75-81.82-182.75-182.74,81.82-182.75,182.75-182.75'/%3E%3Cg%3E%3Cpath class='cls-2' d='M170.79,353.74c-1.08,0-2.05-.43-2.92-1.31-.88-.87-1.31-1.84-1.31-2.92,0-.67.07-1.27.2-1.81l47.34-129.32c.4-1.48,1.24-2.79,2.52-3.93,1.27-1.14,3.05-1.71,5.34-1.71h29.81c2.28,0,4.06.57,5.34,1.71,1.27,1.14,2.11,2.45,2.52,3.93l47.14,129.32c.27.54.4,1.14.4,1.81,0,1.08-.44,2.05-1.31,2.92s-1.91,1.31-3.12,1.31h-24.78c-2.01,0-3.52-.5-4.53-1.51-1.01-1.01-1.65-1.91-1.91-2.72l-7.86-20.55h-53.78l-7.65,20.55c-.27.81-.88,1.71-1.81,2.72-.94,1.01-2.55,1.51-4.83,1.51h-24.78ZM218.13,299.96h37.47l-18.93-53.18-18.53,53.18Z'/%3E%3Cpath class='cls-2' d='M328.11,353.74c-1.48,0-2.69-.47-3.63-1.41-.94-.94-1.41-2.15-1.41-3.63v-130.93c0-1.48.47-2.68,1.41-3.63s2.15-1.41,3.63-1.41h26.99c1.48,0,2.68.47,3.63,1.41.94.94,1.41,2.15,1.41,3.63v130.93c0,1.48-.47,2.69-1.41,3.63-.94.94-2.15,1.41-3.63,1.41h-26.99Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:640px){
  .ai-badge-media>.ai-badge{left:6px;bottom:6px;padding:2px 7px 2px 4px;font-size:10px}
  .ai-badge-media>.ai-badge::before{width:11px;height:11px}
}

/* ---- article: header + body in the reading column, sidebar on the left --------- */
.art-wrap.art-wrap--grid{max-width:var(--maxw);padding:36px 24px 64px}
.art-grid{display:block}
@media (min-width:1100px){
  .art-grid:not(.no-rail){display:grid;grid-template-columns:288px minmax(0,780px);gap:clamp(36px,4vw,64px);justify-content:center;align-items:stretch}
  .art-grid.no-rail article.article{max-width:820px;margin:0 auto}
  .art-grid:not(.no-rail) .toc-box{display:none}
}
.art-grid article.article{min-width:0}
.crumbs{font-size:.88rem}
article.article h1{font-family:var(--font-heading);font-weight:700}

.art-railwrap{min-width:0}
.art-rail{display:flex;flex-direction:column;gap:16px}
@media (min-width:1100px){
  .art-rail{position:sticky;top:96px;max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain;padding:2px 2px 8px}
}
@media (max-width:1099px){
  .art-grid{display:flex;flex-direction:column;gap:36px}
  .art-railwrap{order:2}
  .art-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px}
  .rail-toc{display:none}
}

.rail-toc .rl{margin:0 0 10px;color:var(--text-2);font:700 .78rem var(--font-heading),sans-serif;letter-spacing:.12em;text-transform:uppercase}
.rail-toc ol{margin:0;padding:0;list-style:none;border-left:2px solid var(--line-soft)}
.rail-toc li a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-left:-2px;padding:7px 0 7px 14px;border-left:2px solid transparent;color:var(--text-2);font-size:.92rem;font-weight:500;line-height:1.4;text-decoration:none;transition:color .2s,border-color .2s}
.rail-toc li a:hover{color:var(--text)}
.rail-toc li a.on,.rail-toc li a[aria-current="true"]{color:var(--accent-text);border-left-color:var(--accent);font-weight:600}
.rail-toc li a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---- promo slots --------------------------------------------------------------- */
.ad{padding:14px 16px 16px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.ad[hidden]{display:none}
.ad-label{margin:0 0 10px;color:var(--text-2);font:700 .72rem var(--font-heading),sans-serif;letter-spacing:.1em;text-transform:uppercase}
.ad-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-md);margin:0 0 12px}
.ad-title{margin:0 0 6px;font:700 1.12rem/1.3 var(--font-heading),sans-serif;color:var(--text)}
.ad-text{margin:0 0 14px;color:var(--text-2);font-size:.92rem;line-height:1.5}
.ad .ad-btn{min-height:44px;padding:10px 16px;font-size:.92rem;text-decoration:none;width:100%}
.ad-stage{position:relative}
.ad-item{display:grid;gap:3px;color:inherit;text-decoration:none}
.ad-item[hidden]{display:none}
.ad-item.is-active{animation:adIn .45s cubic-bezier(.16,1,.3,1)}
@keyframes adIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ad-media{position:relative;display:block;height:170px;margin:0 0 8px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--panel-a),var(--panel-b));overflow:hidden}
.ad-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px;box-sizing:border-box}
.ad-name{color:var(--text);font:700 1.05rem/1.3 var(--font-heading),sans-serif}
.ad-sub{color:var(--text-2);font-size:.82rem}
.ad-copy{margin:4px 0 10px;color:var(--text-2);font-size:.9rem;line-height:1.45}
.ad-item:hover .ad-btn{background:var(--accent-2)}
.ad-ctrl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 0}
.ad-pause{width:32px;height:32px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--text-2);font-size:.6rem;letter-spacing:-1px;cursor:pointer}
.ad-pause[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ad-dots{display:flex;gap:2px}
.ad-dot{position:relative;width:24px;height:24px;padding:0;border:0;background:transparent;cursor:pointer}
.ad-dot::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--line-strong);transition:background .2s,transform .2s}
.ad-dot.on::after{background:var(--accent);transform:scale(1.25)}
.ad-pause:focus-visible,.ad-dot:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* density steps set by blog-fork.js when the sticky sidebar is taller than the viewport */
.ad[data-density="compact"] .ad-img,.ad[data-density="compact"] .ad-copy,.ad[data-density="compact"] .ad-text{display:none}
.ad[data-density="compact"] .ad-media{height:84px;margin-bottom:6px}
.ad[data-density="link"] .ad-img,.ad[data-density="link"] .ad-copy,.ad[data-density="link"] .ad-text,.ad[data-density="link"] .ad-media,.ad[data-density="link"] .ad-sub{display:none}
.ad[data-density="link"]{padding:12px 14px}
@media (prefers-reduced-motion:reduce){.ad-item.is-active{animation:none}}

/* ---- article body details -------------------------------------------------------- */
.hero-fig{border-radius:var(--radius-lg)}
article.article figure{border-radius:var(--radius-md)}
article.article ul.mark-list{list-style:none;padding-left:0;max-width:none}
article.article ul.mark-list li{position:relative;padding-left:28px}
article.article ul.mark-list li::before{content:"";position:absolute;left:4px;top:.5em;width:7px;height:12px;border:solid var(--accent);border-width:0 2.5px 2.5px 0;transform:rotate(40deg)}
.bcta{border-radius:var(--radius-lg)}
.bcta .btn{margin-top:2px}

/* privacy facade for embedded videos (embeds.js swaps in the iframe after consent) */
.embed-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:26px 0;padding:22px 20px;border:1px solid var(--line-soft);border-radius:var(--radius-lg);background:var(--surface-2);text-align:center}
.embed-wrap.embed-consent{min-height:240px}
.embed-wrap .embed-title{margin:0;font:700 1.05rem var(--font-heading),sans-serif;color:var(--text)}
.embed-wrap .embed-text,.embed-wrap .embed-note{margin:0;max-width:52ch;color:var(--text-2);font-size:.88rem;line-height:1.5}
.embed-wrap .embed-consent-btn{min-height:44px;padding:10px 22px;border:0;border-radius:var(--radius-md);background:var(--accent);color:var(--on-accent);font:600 .95rem var(--font-body),sans-serif;cursor:pointer}
.embed-wrap .embed-consent-btn:hover{background:var(--accent-2)}
.embed-wrap .embed-consent-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.embed-wrap iframe{border-radius:var(--radius-lg)}

/* ---- overview: SEO text -------------------------------------------------------------- */
.seo-text{max-width:78ch;margin:48px 0 8px}
.seo-text h2{margin:0 0 14px;font:700 1.4rem/1.3 var(--font-heading),sans-serif;letter-spacing:-.01em}
.seo-text p{margin:0 0 14px;color:var(--text-2);line-height:1.7}
.seo-text a{color:var(--accent-text)}

/* ---- card without a title image: a designed tinted surface, no alt text ---------- */
.cover .k,.fimg .k{background:linear-gradient(135deg,var(--accent-soft),var(--panel-b));color:var(--accent-text);font:700 1rem var(--font-heading),sans-serif;letter-spacing:.14em}

/* ---- design audit 05.11.2026, package E ---------------------------------------------- */
/* one container edge with the other pages (1180), text and media on one column line */
.bwrap,.art-wrap.art-wrap--grid,.related{max-width:1180px}
@media (min-width:1100px){.art-grid:not(.no-rail){grid-template-columns:288px minmax(0,720px)}}
article.article>p,article.article>ul,article.article>ol{max-width:none}
/* label floor: caps labels 13px, everything else 14px */
.rail-toc .rl,.ad-label,.cat-pill,.draft-pill,.featured .ftag{font-size:.8125rem}
.post .meta,.featured .fmeta,.ad-sub,.crumbs,article.article figcaption,.author .role,.byline,.tab-n,.ai-disclosure{font-size:.875rem}
.author p{font-size:.95rem}
/* AI badge: one component size, 13px on every width */
.ai-badge-media>.ai-badge{font-size:13px}
.ai-badge-media>.ai-badge::before{width:14px;height:14px}
@media (max-width:640px){
  .ai-badge-media>.ai-badge{font-size:13px;padding:2px 8px 2px 5px}
  .ai-badge-media>.ai-badge::before{width:13px;height:13px}
}
/* FAQ rows read as expandable */
.faq summary{list-style:none;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;border:solid var(--accent);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open]{background:var(--surface-2)}
.faq summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
/* rotating promo controls: filled 40px pause button, visible dots */
.ad-pause{width:40px;height:40px;border:0;background:var(--accent);color:var(--on-accent);font-size:0;position:relative}
.ad-pause::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:14px;transform:translate(-50%,-50%);border-left:4px solid currentColor;border-right:4px solid currentColor;box-sizing:border-box}
.ad-pause[aria-pressed="true"]{background:var(--surface);border:2px solid var(--accent);color:var(--accent)}
.ad-pause[aria-pressed="true"]::before{width:0;height:0;border:solid transparent;border-width:7px 0 7px 12px;border-left-color:currentColor;border-right:0;transform:translate(-35%,-50%)}
.ad-dot::after{inset:6px;background:var(--line-strong);border:1px solid var(--text-3)}
.ad-dot.on::after{background:var(--accent);border-color:var(--accent);transform:none}