/* ================================================================
  KLARO SECTION LIGHTING
  One state machine owns dark-mode illumination on every page.
  The section remains structurally visible; only its visual contrast changes.
  ================================================================ */

html[data-theme="dark"]{
  --dark-page:#0f100e;
  --dark-section:#141512;
  --dark-surface:#1b1c18;
  --dark-surface-raised:#22231f;
  --dark-text:#f4f1e8;
  --dark-copy:#c8c3b7;
  --dark-muted:#a39f94;
  --dark-line:rgba(244,241,232,.20);
  --dark-line-strong:rgba(244,241,232,.36);
  --klaro-yellow:#ffd42a;
  --klaro-yellow-soft:#ffe784;
  --klaro-ink:#11120f;
  /* Paper islands only do not override --paper (page/section fill). */
  --paper-bg:#eee8da;
  --paper-copy:#605c52;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .page-wrapper,
html[data-theme="dark"] main{
  background:var(--dark-page);
  color:var(--dark-text);
}

html[data-theme="dark"].js-section-lighting [data-light-section]{
  --section-light:0;
  --heading-color:#4e5049;
  --copy-color:#454740;
  --muted-color:#3d3f39;
  --accent-color:#6e601b;
  --section-line:rgba(244,241,232,.07);
  --light-x:55%;
  --light-y:34%;
  position:relative;
  isolation:isolate;
  color:var(--copy-color);
  border-color:var(--section-line);
  transition:color .52s ease,border-color .52s ease,background-color .65s ease;
}

html[data-theme="dark"].js-section-lighting [data-light-section].is-active{
  --section-light:1;
  --heading-color:var(--dark-text);
  --copy-color:var(--dark-copy);
  --muted-color:var(--dark-muted);
  --accent-color:var(--klaro-yellow);
  --section-line:var(--dark-line);
}

/* A soft household-bulb pool, never a triangular spotlight. */
html[data-theme="dark"].js-section-lighting [data-light-section]::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:var(--section-light);
  background:
  radial-gradient(ellipse 52% 44% at var(--light-x) var(--light-y),
  rgba(255,212,42,.14) 0,
  rgba(255,212,42,.065) 34%,
  rgba(255,212,42,.018) 58%,
  transparent 76%);
  transition:opacity .7s ease;
}

/* Home hero: quieter warm pool less glare on first viewport. */
html[data-theme="dark"].js-section-lighting section.hero::before{
  background:
  radial-gradient(ellipse 46% 40% at var(--light-x) var(--light-y),
  rgba(255,212,42,.07) 0,
  rgba(255,212,42,.03) 40%,
  transparent 72%);
}

/* Core text hierarchy. Important is deliberate: the source contains many
  older per-component dark rules and this final stylesheet is authoritative. */
html[data-theme="dark"].js-section-lighting [data-light-section] :is(h1,h2,h3,h4,h5,h6){
  color:var(--heading-color) !important;
  transition:color .45s ease;
}
html[data-theme="dark"].js-section-lighting [data-light-section] :is(p,li,dd,dt,figcaption,label){
  color:var(--copy-color) !important;
  transition:color .55s ease;
}
html[data-theme="dark"].js-section-lighting [data-light-section] :is(small,.muted,.section-subtitle,.lead){
  color:var(--muted-color) !important;
  transition:color .55s ease;
}
html[data-theme="dark"].js-section-lighting [data-light-section] a:not(.primary):not(.nav-cta):not(.yk-cta):not(.precheck__cta):not(.prep-gear__dossier-cta):not(.brand-connection__cta):not(.digital-blueprint__cta):not(.project-launch__cta):not(.girex-monitor__screen):not(.girex-credit):not(.girex-float__cta){
  color:var(--heading-color);
}

/* Klaro labels and functional numbering stay yellow rather than grey.
  Exception: .yk-num / .process-number sit on yellow discs dark ink only. */
html[data-theme="dark"].js-section-lighting [data-light-section] :is(
  .section-label,.eyebrow,[class*="__eyebrow"],[class*="__label"],
  .hd-num,.prom-num,.archive__num,
  .portrait-wall__index,.portrait-wall__ph-num,.detail-sections article>span,
  .step>span,.why-item>span,.service-card>span,.doc-map__num,
  .service-brief__num,.steuer-status__num,.visa-dir__num,
  .visa-dir__cat-num,.ready-file__group-num,.tax-file__cat-num,
  .time-file__stage-num,.time-file__factor-num,.precheck__count,
  [data-step-number]
){
  color:var(--accent-color) !important;
  opacity:1 !important;
  transition:color .52s ease;
}

/* Yellow process discs: always dark ink so 01–04 stay readable. */
html[data-theme="dark"] :is(.yk-num,.process-number),
html[data-theme="dark"].js-section-lighting [data-light-section] :is(.yk-num,.process-number){
  background:var(--klaro-yellow) !important;
  color:var(--klaro-ink) !important;
  border-color:var(--klaro-ink) !important;
  opacity:1 !important;
}

html[data-theme="dark"].js-section-lighting [data-light-section] :is(
  .prom-bg-num,.portrait-wall__bio-num,.archive__bio-num
){
  color:var(--klaro-yellow) !important;
  opacity:calc(.07 + var(--section-light) * .09) !important;
}

/* Interactive controls remain discoverable even before a section activates. */
html[data-theme="dark"] :is(.primary,.nav-cta,.yk-cta,.precheck__cta,.btn-primary,.btn--primary,.brand-connection__cta,.digital-blueprint__cta,.project-launch__cta,.girex-float__cta){
  background:var(--klaro-yellow) !important;
  border-color:var(--klaro-ink) !important;
  color:var(--klaro-ink) !important;
}
html[data-theme="dark"] :is(.primary,.nav-cta,.yk-cta,.precheck__cta,.btn-primary,.btn--primary,.brand-connection__cta,.digital-blueprint__cta,.project-launch__cta,.girex-float__cta):hover{
  background:var(--klaro-yellow-soft) !important;
  color:var(--klaro-ink) !important;
}

/* Yellow surfaces always use dark ink. */
html[data-theme="dark"] :is(
  .cta,.yellow-panel,.accent-panel,[data-surface="accent"],.steuer-band--yellow,
  .detail-symbol,.service-brief__receive,.precheck__done
){
  background-color:var(--klaro-yellow) !important;
  color:var(--klaro-ink) !important;
}
html[data-theme="dark"] :is(
  .cta,.yellow-panel,.accent-panel,[data-surface="accent"],.steuer-band--yellow,
  .detail-symbol,.service-brief__receive,.precheck__done
) :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,b,small,label,a){
  color:var(--klaro-ink) !important;
}

/* True paper islands: black/dark text on cream. They dim with an overlay,
  never by turning their text white or grey. */
html[data-theme="dark"] :is(
  .surface-paper,.service-brief,.doc-map__sheet,.hero-doc,.weg-doc,
  .akten-sheet,.akten-panel-paper,.akten-foldout,.steuer-band--cream,
  .precheck__paper,.tax-file__sheet,.tax-file__panel,.tax-file__sheet--panel,
  .time-file__display,.ready-file__sheet,.prep-gear__dossier,.yk-you
){
  background-color:var(--paper-bg) !important;
  color:var(--klaro-ink) !important;
}
html[data-theme="dark"] :is(
  .surface-paper,.service-brief,.doc-map__sheet,.hero-doc,.weg-doc,
  .akten-sheet,.akten-panel-paper,.akten-foldout,.steuer-band--cream,
  .precheck__paper,.tax-file__sheet,.tax-file__panel,.tax-file__sheet--panel,
  .time-file__display,.ready-file__sheet,.prep-gear__dossier,.yk-you
) :is(h1,h2,h3,h4,h5,h6,strong,b,dt){
  color:var(--klaro-ink) !important;
}
html[data-theme="dark"] :is(
  .surface-paper,.service-brief,.doc-map__sheet,.hero-doc,.weg-doc,
  .akten-sheet,.akten-panel-paper,.akten-foldout,.steuer-band--cream,
  .precheck__paper,.tax-file__sheet,.tax-file__panel,.tax-file__sheet--panel,
  .time-file__display,.ready-file__sheet,.prep-gear__dossier,.yk-you
) :is(p,li,small,figcaption,span,label,dd){
  color:var(--paper-copy) !important;
}

html[data-theme="dark"].js-section-lighting [data-light-section] :is(
  .surface-paper,.service-brief,.doc-map__sheet,.hero-doc,.weg-doc,
  .akten-sheet,.akten-panel-paper,.akten-foldout,.steuer-band--cream,
  .precheck__paper,.tax-file__sheet,.tax-file__panel,.tax-file__sheet--panel,
  .time-file__display,.ready-file__sheet,.prep-gear__dossier,.yk-you
){
  position:relative;
}
html[data-theme="dark"].js-section-lighting [data-light-section] :is(
  .surface-paper,.service-brief,.doc-map__sheet,.hero-doc,.weg-doc,
  .akten-sheet,.akten-panel-paper,.akten-foldout,.steuer-band--cream,
  .precheck__paper,.tax-file__sheet,.tax-file__panel,.tax-file__sheet--panel,
  .time-file__display,.ready-file__sheet,.prep-gear__dossier,.yk-you
)::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:8;
  border-radius:inherit;
  background:rgba(15,16,14,calc(.52 * (1 - var(--section-light))));
  pointer-events:none;
  transition:background .6s ease;
}

/* Surfaces that are not paper remain dark surfaces. */
html[data-theme="dark"] :is(
  .service-card,.review-card,.faq-item,.hd-item,.tax-file__desk,
  .visa-dir__desk,.precheck__desk,.ready-file__desk
){
  background-color:var(--dark-surface) !important;
  border-color:var(--dark-line) !important;
}

/* Gateway reveal is cream, so its copy must use paper ink. */
html[data-theme="dark"] .gateway{
  --gw-cream:var(--paper-bg);
  --gw-ink:var(--klaro-ink);
  --gw-muted:var(--paper-copy);
  --gw-yellow:var(--klaro-yellow);
}
html[data-theme="dark"] .gateway :is(.gateway__title,.gateway__title span,.gateway__close){
  color:var(--klaro-ink) !important;
}
html[data-theme="dark"] .gateway .gateway__lead{color:var(--paper-copy) !important}
html[data-theme="dark"] .gateway .gateway__label{color:#896a00 !important}

/* The moving lamp contributes a broad radial pool. */
html[data-theme="dark"] .klaro-guide-glow{
  background:radial-gradient(ellipse at center,
  rgba(255,212,42,.22) 0,
  rgba(255,212,42,.10) 31%,
  rgba(255,212,42,.035) 57%,
  transparent 76%) !important;
  filter:blur(18px);
}

/* One guide lamp: local decorative bulb glows are disabled in dark mode.
  Their line-art can remain part of the illustration, but they do not act as
  competing light sources. */
html[data-theme="dark"].js-section-lighting :is(
  .hero-bulb-aura,.weg-bulb-glow,.ask-bulb-glow,.mobile-result-bulb .bulb-glow
){opacity:0 !important}

html[data-theme="dark"] :is(input,textarea,select){
  background:var(--dark-surface-raised);
  color:var(--dark-text);
  border-color:var(--dark-line-strong);
}
html[data-theme="dark"] :is(input,textarea,select)::placeholder{
  color:var(--dark-muted);
  opacity:1;
}
html[data-theme="dark"] :is(a,button,input,textarea,select):focus-visible{
  outline:2px solid var(--klaro-yellow);
  outline-offset:3px;
}

/* Fallback and light mode are always fully readable. */
html[data-theme="dark"]:not(.js-section-lighting) [data-light-section],
html.lighting-fallback [data-light-section]{
  --section-light:1;
  --heading-color:var(--dark-text);
  --copy-color:var(--dark-copy);
  --muted-color:var(--dark-muted);
  --accent-color:var(--klaro-yellow);
}

@media(max-width:900px){
  html[data-theme="dark"].js-section-lighting [data-light-section]::before{
  background:radial-gradient(ellipse 88% 38% at var(--light-x) var(--light-y),
  rgba(255,212,42,.15),rgba(255,212,42,.055) 42%,transparent 74%);
  }
  html[data-theme="dark"] .klaro-guide-glow{filter:blur(14px)}
}

@media(prefers-reduced-motion:reduce){
  html[data-theme="dark"].js-section-lighting [data-light-section],
  html[data-theme="dark"].js-section-lighting [data-light-section]::before,
  html[data-theme="dark"].js-section-lighting [data-light-section] *{
  transition-duration:.01ms !important;
  }
}

/* Specificity guard: these semantic surfaces must beat the generic section
  hierarchy above, regardless of the component's older source rules. */
html[data-theme="dark"].js-section-lighting [data-light-section] :is(
  .cta,.yellow-panel,.accent-panel,[data-surface="accent"],.steuer-band--yellow,
  .detail-symbol,.service-brief__receive,.precheck__done
) :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,b,small,label,a){
  color:var(--klaro-ink) !important;
}
html[data-theme="dark"].js-section-lighting [data-light-section] :is(
  .surface-paper,.service-brief,.doc-map__sheet,.hero-doc,.weg-doc,
  .akten-sheet,.akten-panel-paper,.akten-foldout,.steuer-band--cream,
  .precheck__paper,.tax-file__sheet,.tax-file__panel,.tax-file__sheet--panel,
  .time-file__display,.ready-file__sheet,.prep-gear__dossier,.yk-you
) :is(h1,h2,h3,h4,h5,h6,strong,b,dt){
  color:var(--klaro-ink) !important;
}
html[data-theme="dark"].js-section-lighting [data-light-section] :is(
  .surface-paper,.service-brief,.doc-map__sheet,.hero-doc,.weg-doc,
  .akten-sheet,.akten-panel-paper,.akten-foldout,.steuer-band--cream,
  .precheck__paper,.tax-file__sheet,.tax-file__panel,.tax-file__sheet--panel,
  .time-file__display,.ready-file__sheet,.prep-gear__dossier,.yk-you
) :is(p,li,small,figcaption,span,label,dd){
  color:var(--paper-copy) !important;
}

/* Prep dossier: keep numbering, price and CTA crisp on cream paper. */
html[data-theme="dark"].js-section-lighting [data-light-section] .prep-gear__dossier :is(
  .prep-gear__dossier-num,.prep-gear__dossier-title,.prep-gear__dossier-price b
){
  color:var(--klaro-ink) !important;
}
html[data-theme="dark"].js-section-lighting [data-light-section] .prep-gear__dossier-eyebrow{
  color:#8a6b00 !important;
}
html[data-theme="dark"].js-section-lighting [data-light-section] .prep-gear__dossier-cta{
  background:#11110f !important;
  color:#fff !important;
  border-color:#11110f !important;
}
html[data-theme="dark"].js-section-lighting [data-light-section] .prep-gear__dossier-cta:hover{
  background:var(--klaro-yellow) !important;
  color:#11110f !important;
}

/* Girex monitor screenshot must keep native brightness. */
html[data-theme="dark"] .girex-monitor__image,
html[data-theme="dark"].js-section-lighting [data-light-section] .girex-monitor__image{
  opacity:1 !important;
  filter:none !important;
  color:initial !important;
}

/* You/Klaro process: cream "You" keeps dark ink; Klaro column + result stay light. */
html[data-theme="dark"].js-section-lighting [data-light-section] .yk-you :is(p,span,.yk-side){
  color:var(--klaro-ink) !important;
}
html[data-theme="dark"].js-section-lighting [data-light-section] .yk-you .yk-side{
  color:rgba(17,17,15,.55) !important;
}
html[data-theme="dark"].js-section-lighting [data-light-section] .yk-klaro :is(p,span){
  color:var(--dark-text) !important;
}
html[data-theme="dark"].js-section-lighting [data-light-section] .yk-klaro .yk-side{
  color:var(--klaro-yellow) !important;
}
html[data-theme="dark"].js-section-lighting [data-light-section] .yk-foot{
  background:transparent !important;
  color:inherit !important;
}
html[data-theme="dark"].js-section-lighting [data-light-section] .yk-result{
  color:var(--dark-text) !important;
}