/* ==================================================================
   Brain-Media.de · Gestaltung in der Linie des Praxislabors
   Gilt für alle Seiten außer Startseite, Bibliothek und Praxislabor
   (die bringen dieselben Regeln in ihrem eigenen <style> mit).
   Wird als letzte Datei im <head> geladen und überschreibt damit
   die älteren RAMS-Werte der einzelnen Seiten.
   Stand: Oktober 2026
   ================================================================== */

/* ---------- Farben, Radien, Schrift ---------- */
:root{
  --paper:#FAF8F4; --ink:#0F0F0D; --body:#E6E2D8; --line:#D6D1C5;
  --muted:#66625A; --text-2:#33312C; --signal:#F0B323; --signal-ink:#3A2A00;
  --ok:#3E8A5C; --fail:#C8462D;
  /* alte RAMS-Werte auf die Praxislabor-Palette gelegt */
  --white:#FAF8F4; --black:#0F0F0D;
  --gray-50:#EEEAE2; --gray-100:#DCD7CB; --gray-200:#C9C3B6;
  --gray-400:#77726A; --gray-600:#3E3B35; --gray-800:#2A2824;
  --r:8px; --rmd:16px;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
}
body{font-family:var(--sans);font-weight:400;background:var(--paper);color:var(--ink)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* ---------- Kopfzeile: auf allen Seiten gleich ---------- */
body > nav:not(.nav-drawer){height:68px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:sticky;top:0;background:#FAF8F4;border-bottom:1px solid #D6D1C5;z-index:200}
.nav-brand{font-family:'DM Mono',ui-monospace,Consolas,monospace;font-size:13px;font-weight:500;letter-spacing:-.02em;color:#0F0F0D;text-decoration:none;white-space:nowrap}
.nav-links{display:flex;gap:22px;list-style:none;align-items:center;margin:0;padding:0}
.nav-links li{margin:0;padding:0}
.nav-links a{font-family:'DM Sans',system-ui,sans-serif;font-size:14px;font-weight:400;color:#33312C;text-decoration:none;white-space:nowrap}
.nav-links a:hover,.nav-links a.hl,.nav-links a.active{color:#0F0F0D}
.nav-links a.hl,.nav-links a.active{font-weight:600}
.nav-links a.nav-cta{display:inline-block;background:#0F0F0D;color:#FAF8F4;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:500;border:0}
.nav-links a.nav-cta:hover{background:#2A2824;color:#FAF8F4}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px;color:#0F0F0D}
.nav-toggle span{display:block;width:20px;height:1.5px;background:currentColor;margin:4px 0;transition:all .2s}
.nav-drawer{display:none;position:fixed;top:68px;left:0;right:0;background:#FAF8F4;border-bottom:1px solid #D6D1C5;padding:16px 32px 24px;z-index:199;flex-direction:column;gap:12px;max-height:calc(100vh - 68px);overflow:auto}
.nav-drawer.open{display:flex}
.nav-drawer a{font-family:'DM Sans',system-ui,sans-serif;font-size:16px;color:#33312C;text-decoration:none;padding:8px 0;border-bottom:1px solid #D6D1C5}
.nav-drawer a.hl,.nav-drawer a.active{color:#0F0F0D;font-weight:600}
.nav-drawer-sep{font-family:'DM Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.03em;text-transform:none;color:#66625A;padding:16px 0 4px;border-bottom:0}
.nav-drawer a:last-child{border-bottom:none}
.nav-drawer a.nav-cta{display:inline-block;background:#0F0F0D;color:#FAF8F4;border-radius:999px;padding:10px 20px;text-align:center;margin-top:8px;border:none;font-weight:500}
@media(max-width:1180px){.nav-links{display:none}.nav-toggle{display:block}}
@media(max-width:600px){body > nav:not(.nav-drawer){padding:0 20px}.nav-drawer{padding:16px 20px 24px}}
.article-aside,.lex-aside{top:92px}

footer{border-top:1px solid var(--line)}
.footer-left,.footer-right a{color:var(--muted)}
.footer-right a:hover{color:var(--ink)}

.breadcrumb{flex-wrap:wrap;row-gap:2px;font-family:var(--sans);font-size:13.5px;letter-spacing:0;color:var(--muted)}
.breadcrumb a{white-space:nowrap;color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.breadcrumb a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.breadcrumb span{color:var(--gray-200)}

/* ---------- Überschriften: kräftig wie im Praxislabor ---------- */
h1,h2,h3,
.section-title,.article-title,.lex-term,.lex-hero-title,.book-title,.page-title,.hero-title,
.cta-title,.article-cta-title,.post-card-title,.research-title,.price-amount,.price-big,
.stat-val,.domain-stat-val,.how-title,.product-card-title,.launch-title,.not-found-title,
.related-title,.aside-card--v2 h3,.result-score-big,.sp-score,
.result-verdict,.result-title,.nl-title,.cert-title,.kaas-title,.lex-card-title{
  font-family:var(--sans);font-weight:700;letter-spacing:-.02em;line-height:1.12}
:is(h1,h2,h3,.cta-title,.section-title)[style*="font-weight:300"]{font-weight:700!important;letter-spacing:-.02em!important}
/* Zwischenüberschriften im Fließtext ebenfalls kräftig */
:is(main,article,section,.article-body,.lex-body,.lex-wrap,.book-section,.section-inner) :is(h2,h3){font-weight:700;letter-spacing:-.02em}
.post-featured-title{font-weight:700;letter-spacing:-.02em;line-height:1.15}
.feature-name{font-weight:600}
main h1,.article-title,.lex-term,h1.book-title,h1.section-title{font-size:clamp(34px,4.6vw,52px);line-height:1.08}
h2.section-title,.section-title{font-size:clamp(28px,3.4vw,40px)}
.lex-pronounce,.book-subtitle,.hero-sub{color:var(--text-2)}
.section-body,.hero-sub{color:var(--text-2)}
.def-box p{font-weight:400}

/* Dachzeilen: Mono, ohne Versalien, wie „Praxislabor“ über der H1 */
.section-eyebrow,.page-eyebrow,.article-eyebrow,.lex-eyebrow,.book-eyebrow,.hero-eyebrow,.eyebrow,
.section-label,.block-label,.nl-eyebrow,.press-eyebrow,.product-card-name,.price-name{
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--muted)}
.aside-eyebrow,.aside-card--v2 .aside-eyebrow,.card-eyebrow,.callout-label,.article-cta-label,.aside-head-label,
.audio-player-label,.audio-label,.recommendation-label,.note-label,.book-meta-label,.exec-item-label,
.bam-row-label,.bam-box-head-label,.cat-label,.nav-drawer-sep{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:none}
.section-label{border-bottom-color:var(--line)}

/* ---------- Schaltflächen: Pillen, Signalgelb für die Hauptaktion ---------- */
.btn{min-height:46px;padding:0 20px;justify-content:center;border-radius:999px;border:1.5px solid var(--ink);
  font-family:var(--sans);font-weight:500;background:transparent;color:var(--ink);line-height:1.15}
.btn:hover{background:var(--body);border-color:var(--ink)}
.btn-primary{background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}
.btn-primary:hover{background:var(--signal);border-color:var(--signal);filter:brightness(.96)}
.btn-white{background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}
.btn-white:hover{background:var(--signal);border-color:var(--signal);filter:brightness(.96)}
.btn-outline-white{background:transparent;border-color:var(--paper);color:var(--paper)}
.btn-outline-white:hover{background:rgba(255,255,255,.08);border-color:var(--paper)}
.btn-sm,.aside-card--v2 .btn,.aside-body .btn{min-height:40px;font-size:14px;padding:0 16px}
.btn-full{width:100%}

/* ---------- Abschnitte ---------- */
section{border-top-color:var(--line)}
section[style*="gray-50"],.section-alt,.page-section.alt{background:var(--body)!important;border-top:0}

/* ---------- Karten ---------- */
.card,.aside-card,.aside-card--v2,.post-card,.info-card,.price-box,.hero-cover,.provider-card,
.how-card,.price-card,.product-card,.audio-player,.ev-card,.fehler-item,.cross-box,.review-item,
.question-card,.result-card,.domain-card,.platform,.export-item,.check-card,.download-item.card{
  border-radius:18px;border-color:var(--line)}
.aside-card,.post-card,.info-card,.audio-player{overflow:hidden}
.aside-head,.info-card-header{background:var(--body);border-bottom-color:var(--line)}
.aside-link{border-bottom-color:var(--line)}
.aside-link::after{color:var(--muted)}
.aside-card--v2.dark,.aside-card.dark{background:var(--ink);border-color:var(--ink)}
.aside-card--v2.dark p,.aside-card.dark p{color:#CFCABF}
.aside-card--v2 .aside-eyebrow{color:var(--muted)}
.aside-card--v2.dark .aside-eyebrow{color:#9A9A92}

.highlight-item,.related-item,.teach-item{border-radius:14px}
.highlight-item{background:var(--paper);border:1px solid var(--line)}
.def-box,.exec-summary,.exsum,.note-box,.merk,.towel-note,.lex-notice,.explanation{border-radius:14px}
.callout{background:var(--body);border:0;border-radius:14px}
section[style*="gray-50"] .callout{background:var(--paper)}
.fig,.fig-cover{border-radius:14px}
.bam-box{border-radius:14px;overflow:hidden;border-color:var(--line)}
.bam-row{border-color:var(--line)}
.article-cta,.recommendation-box{border-radius:18px;padding:1.6rem 1.75rem}
.article-cta-title{color:var(--paper);font-size:20px}
.article-cta-sub,.recommendation-list li::before{color:#CFCABF}
.article-cta .btn-primary{background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}

/* Bilder */
.book-cover img,.book-cover,.related-img,.related-img img,.post-featured-visual,.cover-img{border-radius:8px}

/* ---------- Pillen und Etiketten ---------- */
.tag,.article-tag,.term-pill,.level-pill,.research-tag,.filter-btn,.product-card-tag,.badge,
.thumb-avail,.book-avail,.priority,.post-card-tag-pill{border-radius:999px}
.article-tag,.term-pill,.research-tag{background:var(--body);border-color:var(--line);color:var(--text-2);padding:3px 10px}
.level-pill{border-color:var(--line)}
.level-pill.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.post-card-foot .post-card-tag,.post-card-foot span[class*="soon"]{border-radius:999px}

/* ---------- Kennzahlen wie die Faktenleiste ---------- */
.book-meta-row,.article-meta{border-color:var(--line)}
.book-meta-row,.meta-row{border-top:2px solid var(--ink);padding-top:12px}
.book-meta-val{font-weight:500}
.article-meta-item{color:var(--muted)}

/* ---------- Tabellen ---------- */
table th,.bam-table th,.fw-table th,.compare th{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;
  text-transform:none;color:var(--muted);border-bottom:2px solid var(--ink)}
table td{border-bottom-color:var(--line)}

/* ---------- FAQ ---------- */
.faq-item{border-color:var(--line)}
.faq-list .faq-item:first-child{border-top:2px solid var(--ink)}
.faq-q{font-weight:600;font-size:17px}
.faq-a{color:var(--text-2)}

/* ---------- Fließtext im Artikel ---------- */
.article-body,.article-body li{color:var(--ink)}
.article-body p,.lex-body p{color:var(--text-2)}
.article-body h2{font-size:clamp(24px,2.6vw,30px);border-top-color:var(--line)}
.article-body h3{font-size:19px}
.article-body a,.lex-body a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--signal);text-decoration-thickness:2px;border-bottom:0}
.article-body a.btn,.lex-body a.btn{text-decoration:none}
.article-nav{border-top-color:var(--line)}

/* ---------- Abschlussband als dunkle Karte ---------- */
.cta-strip{background:transparent!important;padding:1rem 2rem 4rem}
.cta-inner{background:var(--ink);border-radius:22px;padding:44px}
.cta-title{color:var(--paper);font-size:clamp(24px,2.8vw,32px)}
.cta-sub{color:#CFCABF}


/* ---------- Beschriftungen ohne Versalien (wie im Praxislabor) ---------- */
.nav-drawer-sep,
.aside-head-label,
.article-cta-label,
.callout-label,
.bam-row-label,
.bam-box-head-label,
.lex-eyebrow,
.fw-table th,
th,
.section-eyebrow,
.page-eyebrow,
.card-eyebrow,
.article-eyebrow,
.aside-card--v2 .aside-eyebrow,
.section-label,
.book-meta-label,
.book-eyebrow,
.audio-label,
.fig figcaption b,
.recommendation-label,
.bam-table th,
.exec-summary-label,
.exec-item-label,
.article-body th,
.exsum-title,
.exsum dt,
.aside-eyebrow,
.note-box .note-label,
.meta-label,
.towel-note .towel-label,
.q-domain,
.note-audio .note-label,
.info-card-header p,
.explanation-label,
.cta-box-eyebrow,
.config-label,
.config-header p,
.thanks-mark,
.press-eyebrow,
.contact-label,
.block-label,
.vorgang-num,
.tl-label,
.stat-lbl,
.spec dt,
.sp-head-title,
.rp-verdict,
.rp-table th,
.rp-kicker,
.rp-field b,
.rp-fact dt,
.provider-card .provider-sub,
.post-featured-tag,
.post-card-tag,
.plan-tag,
.ph-label,
.offer-box .offer-label,
.note-update .note-label,
.not-found-label,
.nl-topic-label,
.nl-eyebrow,
.mapping-table th,
.lex-letter,
.lex-hero-eyebrow,
.launch-eyebrow,
.glance-key,
.gaps-title,
.gap-tag,
.gap-table th,
.gap-prio,
.form-row label,
.form-grid label,
.eyebrow,
.exp-field label,
.ev-card-label,
.dl-item span,
.compare-table th,
.comp-table th,
.cert-tag,
.cat-label,
.case-label,
.badge-status,
.badge,
.audio-player-label,
.article-tag{text-transform:none;letter-spacing:.03em}

/* ---------- Mobil: nichts ragt über den Rand ---------- */
footer,.footer-right{flex-wrap:wrap}
.article-wrap>*,.lex-wrap>*,.book-layout>*,.hero>*,.section-inner>*{min-width:0}
@media(max-width:700px){
  .lex-body table,.fw-table,.article-body table,.rp-table,table.meta-row,.compare-table,.comp-table,.gap-table,.mapping-table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .lex-body,.article-body,.lex-term,.article-title{overflow-wrap:break-word}
}
@media(max-width:700px){h1,h2,h3,.section-title,.article-title,.lex-term,.book-title{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}}

@media(max-width:900px){
  .cta-inner{padding:32px}
}
@media(max-width:600px){
  .cta-strip{padding:.5rem 1.25rem 3rem}
  .cta-inner{padding:24px;border-radius:18px}
  main h1,.article-title,.lex-term,h1.book-title,h1.section-title{font-size:clamp(30px,8vw,36px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}