/* Content pages use the same visual language as the Klartext homepage.
   Shared by static rendering and History API navigation. Tool workspaces and
   academy own their layout, using the same typography and palette. */
@media screen {
  :root {
    --paper: var(--klartext-paper);
    --ink: var(--klartext-ink);
    --muted: var(--klartext-muted);
    --rule: var(--klartext-line);
    --border: var(--klartext-line);
    --accent: var(--klartext-accent);
    --accent-dark: #94241f;
    --stream-red: var(--accent);
    --font-headline: var(--klartext-font);
    --font-body: var(--klartext-font);
    --font-mono: var(--klartext-font);
    --mag-sans: var(--klartext-font);
    --max-width: 1472px;
    --control-radius: 3px;
    --panel-radius: 3px;
  }
  body { background: var(--paper); color: var(--ink); font-family: var(--klartext-font); -webkit-font-smoothing: antialiased; }
  button, input, textarea, select, summary { font-family: var(--klartext-font); }
  :is(pre,code,kbd,samp) { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
  :is(a,button,input,textarea,select,summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
  .stream-header {
    height: 86px; padding-inline: max(24px, calc((100vw - 1360px)/2));
    gap: 26px; background: #fffffff7; border-color: var(--rule); backdrop-filter: none;
  }
  .stream-header .stream-brand { gap: 10px; font: 750 17px/1.03 var(--klartext-font); letter-spacing: -.65px; }
  .stream-brand-logo { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
  .stream-header .main-tabs { gap: 28px; }
  .stream-header .main-tab { font: 600 12px/1.5 var(--klartext-font); text-transform: none; letter-spacing: 0; }
  .stream-header .mag-newsletter-link { background: var(--ink); color: #fff; padding: 13px 17px; border-radius: 3px; border-color: var(--ink); }
  .stream-header .mag-newsletter-link:hover { background: #394044; color: #fff; }
  .stream-header-actions { gap: 6px; }
  .stream-search-button,.stream-list-button { min-height: 44px; min-width: 44px; justify-content: center; }
  .stream-list-button .mag-list-label { display: none; }
  .mag-list-icon { display: block; width: 20px; height: 20px; }
  .layout.blog-layout { max-width: 1472px; padding: 64px 56px 80px; }
  .main-content { min-width: 0; }
  .main-content .stream-section-hero { padding: 0 0 42px; margin-bottom: 40px; }
  .main-content .stream-section-hero h1 { font-size: clamp(36px,4.8vw,68px); font-weight: 550; line-height: 1.08; letter-spacing: -.045em; }
  .main-content .stream-section-hero :is(.projekte-eyebrow,.atlas-eyebrow,.artikel-showcase-kicker,.mag-rubric),
  .atlas-eyebrow,.projekte-eyebrow,.mag-rubric,.artikel-showcase-kicker {
    font: 550 12px/1.6 var(--klartext-font); color: var(--muted); text-transform: none; letter-spacing: 0;
  }
  .main-content :is(.tool-card,.publication-card,.model-map-card,.atlas-project-card,.library-card,.artikel-teaser-card,.theme-model-card,.block-card) {
    background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; box-shadow: none;
  }
  .main-content :is(.tool-card,.publication-card,.model-map-card,.atlas-project-card,.library-card):hover { border-color: #8da5b0; transform: none; box-shadow: none; }
  .main-content :is(.denk-kern-level,.denk-kern-level-card,.denk-kern-definition,.denk-kern-home-intro,.library-controls,.theme-substack-note,.material-license-note) {
    background: var(--klartext-blue); border-color: var(--rule);
  }
  .main-content :is(.artikel-post-content,.modell-detail-content,.legal-content,.lexikon-term-content,.tldr-body) {
    font-family: var(--klartext-font); font-size: 17px; line-height: 1.85;
  }
  .main-content :is(.artikel-post-content,.modell-detail-content,.legal-content) > p { max-width: 75ch; }
  .main-content :is(input[type=search],select) { background: #fff; border: 1px solid var(--rule); border-radius: 3px; min-height: 46px; }
  .main-content :is(.dl-subtab,.dl-item-badge,.legal-updated) { color: var(--muted); }
  .main-content .dl-subtab.active { color: #fff; background: var(--accent); }
  .main-content .dl-item { background: #fff; border-color: var(--rule); }
  .library-filter { border-radius: 3px; font-family: var(--klartext-font); }
  .library-folder { border-radius: 3px; background: #fff; }
  .kie-info-card h3 { font: 550 26px/1.25 var(--klartext-font); letter-spacing: -.7px; }
  .kie-info-text { font: 17px/1.8 var(--klartext-font); }
  .kie-card :is(h2,h3) { font-family: var(--klartext-font); }
  .kie-info-card img { background: var(--klartext-surface); }
  .stream-dialog { --ink: #202124; --muted: #5c676d; background: #fff; border: 1px solid var(--rule); border-radius: 5px; }
  .stream-dialog :is(h2,input,.stream-search-result) { font-family: var(--klartext-font); }
  .stream-dialog .stream-search-result { border-radius: 3px; background: #fff; }
  .mag-next-steps { max-width: 1360px; margin: 0 auto; padding: 42px 0; border-top: 1px solid var(--rule); }
  .mag-next-steps > p { font: 550 12px/1.6 var(--klartext-font); letter-spacing: 0; text-transform: none; color: var(--muted); }
  .mag-next-steps strong { font: 500 24px/1.25 var(--klartext-font); letter-spacing: -.6px; }
  .footer { background: var(--klartext-surface); border-color: var(--rule); color: var(--ink); padding: 46px 24px 30px; }
  .footer :is(a,button,p) { font-family: var(--klartext-font); color: var(--muted); }
  .footer-social { gap: 24px; }
  .statistics-consent { background: #fff; color: var(--ink); border: 1px solid var(--rule); border-radius: 5px; box-shadow: 0 12px 40px #20262920; }
  .statistics-consent h2 { font-family: var(--klartext-font); font-weight: 550; }
  .statistics-consent__button { border-radius: 3px; }
  .statistics-consent__button--allow { background: var(--accent); }
}
@media screen and (max-width: 1100px) {
  .stream-header { gap: 18px; }
  .stream-header .main-tabs { gap: 16px; }
  .layout.blog-layout { padding-inline: 32px; }
  .mag-next-steps { margin-inline: 32px; }
}
@media screen and (max-width: 780px) {
  .stream-header { height: 74px; padding-inline: 20px; gap: 12px; }
  .stream-header .stream-brand { font-size: 15px; }
  .stream-brand-logo { width: 38px; height: 38px; }
  .stream-header .main-tabs { background: #fff; border-color: var(--rule); }
  .stream-header .main-tabs .main-tab { font-size: 15px; min-height: 44px; }
  .stream-header .main-tabs .mag-newsletter-link { padding-inline: 17px; }
  .layout.blog-layout { padding: 36px 20px 48px; }
  .main-content .stream-section-hero { padding-bottom: 28px; margin-bottom: 28px; }
  .mag-next-steps { margin-inline: 20px; }
  .kie-info-card h3 { font-size: 24px; }
  .main-content :is(.artikel-post-content,.modell-detail-content,.legal-content,.lexikon-term-content,.tldr-body) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}