/* ============================================================
   gunBOX — dark theme.  Toggled via html[data-theme="dark"].
   Strategy: --paper stays LIGHT (it doubles as the light text/colour on the
   steel chrome, which is already dark in both modes). We invert the paper
   SURFACES, lighten body text, and keep the steel chrome + the two dark bands
   (callout, info-warn) dark. Loaded last so it overrides the base sheets.
   ============================================================ */

:root { color-scheme: light; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink:      #EDEFF2;   /* body text → light  */
  --graphite: #F0F2F5;   /* headlines/values → light */
  --paper-2:  #18263B;   /* tinted sections → dark navy */
  --paper-3:  #223247;
  --white:    #1C2C42;   /* card/input fill → dark navy */
  --rule:     #2C3D52;
  --rule-ink: #3A4D64;
  --muted:    #9AA3AD;
  /* Vorschau band/notices: warm neutral → warm dark grey (stays off the navy hues) */
  --notice-bg:   #23262B;
  --notice-line: #3A3E45;
  --notice-ink:  #E4E1DA;
  --notice-soft: #C9C6BE;
  /* --paper intentionally NOT changed (stays the light colour on steel chrome) */
}

/* ---- page + card surfaces (these used --paper as a *light* surface) ---- */
html[data-theme="dark"] body { background: #0D1A2B; }
html[data-theme="dark"] .pillar,
html[data-theme="dark"] .law-item,
html[data-theme="dark"] .spec .law-items::after,
html[data-theme="dark"] .svc-teaser .it,
html[data-theme="dark"] .contact-card { background: var(--paper-2); }

/* the two dark bands used --graphite as background (now light) → keep dark */
html[data-theme="dark"] .callout,
html[data-theme="dark"] .info-warn { background: #091420; }
html[data-theme="dark"] .callout .neg { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }

/* ---- body text greys → light ---- */
html[data-theme="dark"] :is(
  .page-head .lede, .marg p, .cta-strip p, .pillar p, .svc-row p, .faq-a-inner .body,
  .cta p, .clause .body p.sub, .topic .ref-box, .svc-teaser .it p, .contact-card p,
  .info-block p, .callout p) { color: #B7BDC5; }
html[data-theme="dark"] :is(
  .clause .body p, .clause .body ul li, .topic .body p, .topic ul li, .kontakt-main .lead) { color: #D6DCE3; }
html[data-theme="dark"] :is(.page-head h1 em, .law-item .sub, .topic .body em, .ptable-note, .spec-foot) { color: #9AA3AD; }
html[data-theme="dark"] :is(
  .crumbs, .crumbs a, .page-head .num b, .s-head .num b, .marg, .pillar .ref, .svc-row .meta,
  .svc-row .price small, .ptable-row .pos small, .price-stack .ppl, .doc-toc .meta, .clause .body .note,
  .divider-text, .doc-toc ol li a .n) { color: #8893A0; }

/* ---- steel-deep mono labels → lighter steel (steel-deep is too dark on dark) ---- */
html[data-theme="dark"] :is(
  .s-head .num, .page-head .num, .cta .num, .cta-strip .num, .law-item .k, .pillar .h .n,
  .svc-row .tag-cell, .faq-head .n, .faq-ref, .ptable-group .gh .qual, .contact-card h3,
  .info-block h3, .doc-toc h2, .topic .id, .topic .ref-box b, .svc-teaser .it .pr) { color: #8FA8CC; }

/* links / accents that were steel-deep on light → lighten */
html[data-theme="dark"] :is(.clause .body a, .topic .body a,
  .doc-toc ol li a:hover, .crumbs a:hover) { color: #8FA8CC; }

/* ---- borders that were steel-deep / graphite (now light) → subtle on dark ---- */
html[data-theme="dark"] :is(
  .s-head .num, .s-head h2, .page-head .num, .page-head h1, .cta .num, .cta-strip .num,
  .topic h2, .topic .id) { border-top-color: var(--steel-mid); }
html[data-theme="dark"] :is(.svc-list, .faq-list) { border-top-color: var(--rule-ink); }
html[data-theme="dark"] .svc-list .svc-row:last-child { border-bottom-color: var(--rule-ink); }
html[data-theme="dark"] .doc-toc h2 { border-bottom-color: var(--rule-ink); }
html[data-theme="dark"] .ptable-group .gh { border-top-color: var(--steel-mid); }

/* ---- buttons ---- */
/* default solid primary (bg = graphite, now light) needs a dark label */
html[data-theme="dark"] .btn-primary { color: #0D1A2B; }
/* on the steel chrome the primary stays light-bg / steel-text (paper is still light) — reassert */
html[data-theme="dark"] :is(section.s.steel .btn-primary, nav.main .btn, .hero-ctas .btn-primary,
  .nav-actions .btn) { color: var(--steel-deep); }
/* steel-filled CTAs keep a light label on the steel-deep fill */
html[data-theme="dark"] :is(.btn-steel, .cta .ctas .btn-primary, .cta-strip .ctas .btn-primary) { color: var(--paper); }
/* ghost buttons on (now dark) paper sections: light outline, dark label on hover */
html[data-theme="dark"] :is(.cta .ctas .btn-ghost, .cta-strip .ctas .btn-ghost) { color: var(--graphite); border-color: var(--graphite); }
html[data-theme="dark"] :is(.cta .ctas .btn-ghost:hover, .cta-strip .ctas .btn-ghost:hover) { background: var(--graphite); color: #0D1A2B; }
html[data-theme="dark"] .btn-ghost:hover { color: #0D1A2B; }

/* chip / tag fills */
html[data-theme="dark"] .chip { background: var(--white); }

/* the Vorschau tag inverts on the dark band (a graphite chip would vanish on it) */
html[data-theme="dark"] .preview-tag { background: #D8D4C9; color: #1A1D22; }

/* language dropdown: --paper-2 hover/cur is invisible against the --white (dark navy)
   menu surface → lift to a clearly lighter steel so the active/hover row reads */
html[data-theme="dark"] .lang-menu a:hover { background: var(--rule-ink); }
html[data-theme="dark"] .lang-menu a.cur { background: var(--paper-3); }
html[data-theme="dark"] .lang-menu a.cur:hover { background: var(--rule-ink); }

/* ─── Price calculator ─── */
html[data-theme="dark"] .price-calc { border-bottom-color: var(--rule-ink); }
html[data-theme="dark"] :is(.calc-weapon, .calc-period, .calc-w-typesel, .calc-w-sizesel, .calc-w-remove) { border-color: var(--rule-ink); }
html[data-theme="dark"] .calc-add { border-color: var(--rule-ink); }
html[data-theme="dark"] .calc-period button { background: var(--paper-2); color: var(--graphite); border-right-color: var(--rule-ink); }
html[data-theme="dark"] .calc-period button[aria-pressed="true"] { background: var(--steel-mid); color: var(--paper); }
html[data-theme="dark"] .calc-result { border-top-color: var(--steel-mid); }
html[data-theme="dark"] .preise-switch { background: #0D1A2B; border-bottom-color: var(--rule-ink); }
html[data-theme="dark"] .preise-switch-inner a { background: var(--paper-2); color: var(--graphite); border-color: var(--rule-ink); }
html[data-theme="dark"] .preise-switch-inner a.cur, html[data-theme="dark"] .preise-switch-inner a.cur:hover { background: var(--steel-mid); color: var(--paper); border-color: var(--steel-mid); }

/* ─── Onepager ─── */