/* ==========================================================================
   Light/dark theme toggle
   Loaded after app.css and analyse.css on every page, so every rule here
   wins on specificity via the [data-theme="light"] attribute selector,
   regardless of file order.

   Scope of the invert: the page canvas — backgrounds, body text, hairline
   borders, header/footer/nav/forms — swaps ink <-> paper wholesale, matching
   what was asked ("everything currently dark becomes the page's light tone
   and vice versa").

   Deliberately NOT inverted: the four module cards, the five process cards,
   the hero explainer's card backdrop, and the questionnaire's calendar/score
   cards. These are self-contained signal-blue gradient "accent" components,
   not page chrome — flipping them to a light gradient fading to near-white
   would erase the contrast that makes them read as cards at all. They keep
   their current dark-card look in both themes, the same way a logo doesn't
   redraw itself for light mode.
   ========================================================================== */

/* --- Toggle button --------------------------------------------------------
   Same circular icon-button language as .nav-toggle / .back-to-top. */

.theme-toggle {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(247, 244, 236, .18);
  border-radius: 50%;
  background: rgba(247, 244, 236, .04);
  color: var(--paper-100);
  cursor: pointer;
  transition: border-color 160ms var(--ease-standard), background 160ms var(--ease-standard);
}

/* Each icon sets its own display (not a shared ".theme-toggle svg" rule) —
   that shared rule previously had higher specificity than the single-class
   ".theme-toggle__moon { display: none }", so the moon never actually hid
   and both icons rendered stacked on top of each other. */
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle__sun { display: block; }
.theme-toggle__moon { display: none; }

/* Desktop: .nav already has margin-left:auto and groups everything after it
   (this toggle, then the hidden burger) against the right edge for free.
   Mobile: .nav is display:none, so nothing upstream claims that free space
   any more — the toggle needs its own auto margin to still land next to the
   burger instead of immediately after the logo. */
@media (max-width: 759px) {
  .theme-toggle { margin-left: auto; }
}

@media (hover: hover) {
  .theme-toggle:hover { border-color: rgba(247, 244, 236, .34); background: rgba(247, 244, 236, .08); }
}

[data-theme="light"] .theme-toggle {
  border-color: rgba(17, 19, 16, .16);
  background: rgba(17, 19, 16, .04);
  color: var(--ink-950);
}

@media (hover: hover) {
  [data-theme="light"] .theme-toggle:hover { border-color: rgba(17, 19, 16, .28); background: rgba(17, 19, 16, .07); }
}

[data-theme="light"] .theme-toggle__sun { display: none; }
[data-theme="light"] .theme-toggle__moon { display: block; }

/* ==========================================================================
   Homepage + shared chrome (header, mobile nav, footer)
   ========================================================================== */

[data-theme="light"] body { background: var(--paper-0); color: var(--ink-950); }

[data-theme="light"] { --border-inverse-soft: rgba(17, 19, 16, .10); }

[data-theme="light"] .header { background: rgba(251, 249, 243, .82); }
[data-theme="light"] .logo { color: var(--ink-950); }

[data-theme="light"] .nav__link { color: var(--ink-600); }
@media (hover: hover) {
  [data-theme="light"] .nav__link:hover { color: var(--ink-950); }
}

[data-theme="light"] .nav-toggle { color: var(--ink-950); }

[data-theme="light"] .mobile-nav { background: rgba(251, 249, 243, .97); }
[data-theme="light"] .mobile-nav__links { border-top-color: rgba(17, 19, 16, .12); }
[data-theme="light"] .mobile-nav__link { color: var(--ink-950); border-bottom-color: rgba(17, 19, 16, .12); }

/* .btn--pill / .btn--closing are "light chip on dark backdrop" — on an
   inverted (now light) backdrop the chip has to go dark to keep popping. */
[data-theme="light"] .btn--pill,
[data-theme="light"] .btn--closing {
  background: var(--ink-950);
  color: var(--paper-100);
}
@media (hover: hover) {
  [data-theme="light"] .btn--pill:hover,
  [data-theme="light"] .btn--closing:hover { background: var(--ink-800); }
}
/* Dark-on-light shine sweep for these now-dark chips */
[data-theme="light"] .btn--pill::after, [data-theme="light"] .btn--closing::after {
  background-image: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%);
}
[data-theme="light"] .btn--pill::before, [data-theme="light"] .btn--closing::before {
  background-image: linear-gradient(104deg, transparent 42%, rgba(255, 255, 255, .45) 50%, transparent 58%);
}

/* .btn--ghost is light-text-on-transparent, tuned for a dark backdrop */
[data-theme="light"] .btn--ghost { color: var(--ink-950); border-color: rgba(17, 19, 16, .20); }
@media (hover: hover) {
  [data-theme="light"] .btn--ghost:hover { background: rgba(17, 19, 16, .05); border-color: rgba(17, 19, 16, .34); }
}
[data-theme="light"] .btn--ghost::after {
  background-image: linear-gradient(104deg, transparent 38%, rgba(17, 19, 16, .12) 50%, transparent 62%);
}
[data-theme="light"] .btn--ghost::before {
  background-image: linear-gradient(104deg, transparent 42%, rgba(17, 19, 16, .4) 50%, transparent 58%);
}

[data-theme="light"] .footer__word { color: var(--ink-500); }
[data-theme="light"] .footer__link { color: var(--ink-500); }
@media (hover: hover) {
  [data-theme="light"] .footer__link:hover { color: var(--ink-950); }
}
[data-theme="light"] .footer__brand svg path { fill: var(--ink-400); }
/* Same relative quietness as the original: ink-600 on ink-950 sits close to
   the dark canvas on purpose; ink-400 on paper-0 sits equally close to the
   light one. */
[data-theme="light"] .footer__copy { color: var(--ink-400); }

[data-theme="light"] .back-to-top {
  border-color: rgba(17, 19, 16, .16);
  background: rgba(251, 249, 243, .82);
  color: var(--ink-950);
}
@media (hover: hover) {
  [data-theme="light"] .back-to-top:hover { background: rgba(251, 249, 243, .95); border-color: rgba(17, 19, 16, .3); }
}

/* --- Hero (page canvas; the explainer's own card stays untouched) -------- */

[data-theme="light"] .hero__pill {
  color: var(--signal-600);
  border-color: rgba(51, 74, 143, .28);
}
[data-theme="light"] .hero__sub { color: var(--ink-600); }
/* .hero__note stays ink-500 — a mid-tone already proven to read on both
   paper and ink canvases via .eyebrow elsewhere in the current design. */

/* --- Die vier Module (dark-canvas intro copy; the cards themselves are the
   established theme-invariant accent components, untouched) -------------- */

[data-theme="light"] .modules__lead { color: var(--ink-600); }

/* --- Der goldene Käfig / Warum Owner OS (dark-canvas .rows lists) -------- */

[data-theme="light"] .split__body { color: var(--ink-600); }
[data-theme="light"] .rows { border-top-color: rgba(17, 19, 16, .12); }
[data-theme="light"] .row { border-bottom-color: rgba(17, 19, 16, .12); color: var(--ink-950); }

/* --- "Light breather" sections invert to dark ---------------------------- */

[data-theme="light"] .section--light { background: var(--ink-950); color: var(--paper-100); }

/* Die Lösung / Vertrauen body copy that was tuned for a light canvas */
[data-theme="light"] .section--light .solution__body { color: var(--ink-300); }
[data-theme="light"] .section--light .split__body { color: var(--ink-300); }

[data-theme="light"] .section--light .paths__lead { color: var(--ink-300); }

/* Zwei Wege path cards: plain white "raised surface" cards, not a brand
   accent — they invert the same direction as the section they sit on. */
[data-theme="light"] .section--light .path-card {
  background: var(--ink-900);
  border-color: var(--ink-700);
}
[data-theme="light"] .section--light .path-card__eyebrow { color: var(--signal-300); }
[data-theme="light"] .section--light .path-card__body { color: var(--ink-300); }

/* Vertrauen + FAQ */
[data-theme="light"] .section--light .faq,
[data-theme="light"] .section--light .faq__item { border-color: var(--ink-700); }
[data-theme="light"] .section--light .faq__icon::before,
[data-theme="light"] .section--light .faq__icon::after { background: var(--ink-400); }
[data-theme="light"] .section--light .faq__answer { color: var(--ink-300); }

/* --- Closing CTA ----------------------------------------------------------- */

[data-theme="light"] .closing__body { color: var(--ink-600); }
/* .closing__note stays ink-500 for the same reason as .hero__note above. */

/* ==========================================================================
   Owner-Analyse questionnaire (page canvas only — calendar-card and
   score-module stay the established dark accent cards in both themes)
   ========================================================================== */

[data-theme="light"] .analyse-header__back { color: var(--ink-600); }
@media (hover: hover) {
  [data-theme="light"] .analyse-header__back:hover { color: var(--ink-950); }
}

[data-theme="light"] .analyse-progress { background: rgba(17, 19, 16, .10); }
[data-theme="light"] .analyse-step__body { color: var(--ink-600); }

[data-theme="light"] .scale__option,
[data-theme="light"] .choice__option {
  border-color: rgba(17, 19, 16, .20);
  background: rgba(17, 19, 16, .025);
  color: var(--ink-950);
}
@media (hover: hover) {
  [data-theme="light"] .scale__option:hover,
  [data-theme="light"] .choice__option:hover {
    border-color: rgba(17, 19, 16, .34);
    background: rgba(17, 19, 16, .04);
  }
}
[data-theme="light"] .scale__option__index {
  border-color: rgba(17, 19, 16, .3);
  background: rgba(17, 19, 16, .03);
}
/* Selected state keeps its signal-blue tint in both themes — unchanged */

[data-theme="light"] .analyse-nav { background: rgba(251, 249, 243, .9); }
[data-theme="light"] .analyse-nav__back { color: var(--ink-600); }
@media (hover: hover) {
  [data-theme="light"] .analyse-nav__back:hover { color: var(--ink-950); }
}

/* Score screen sits directly on the page canvas, unlike the recommendation
   card below it (.score-module, left as the established dark accent card) */
[data-theme="light"] .score-hero__value { color: var(--ink-950); }
[data-theme="light"] .score-bar__head { color: var(--ink-600); }
[data-theme="light"] .score-bar__track { background: rgba(17, 19, 16, .08); }

[data-theme="light"] .calendar-note {
  color: var(--signal-600);
  border-color: rgba(51, 74, 143, .28);
}

/* .calendar-slots sits outside .calendar-card (the theme-invariant card is
   only the month grid above it) — this genuinely is page canvas. */
[data-theme="light"] .calendar-slot {
  border-color: rgba(17, 19, 16, .20);
  background: rgba(17, 19, 16, .025);
  color: var(--ink-950);
}
@media (hover: hover) {
  [data-theme="light"] .calendar-slot:hover { border-color: rgba(17, 19, 16, .34); }
}
/* Selected state keeps its signal-blue fill in both themes — unchanged */

[data-theme="light"] .field__label { color: var(--ink-600); }
[data-theme="light"] .field__input {
  border-color: rgba(17, 19, 16, .18);
  background: rgba(17, 19, 16, .03);
  color: var(--ink-950);
}
[data-theme="light"] .field__input::placeholder { color: var(--ink-400); }

[data-theme="light"] .consent { color: var(--ink-600); }
[data-theme="light"] .consent a { color: var(--ink-950); }

[data-theme="light"] .confirm-summary { border-color: rgba(17, 19, 16, .16); color: var(--ink-600); }
[data-theme="light"] .confirm-summary strong { color: var(--ink-950); }
[data-theme="light"] .confirm-restart { color: var(--ink-600); }
@media (hover: hover) {
  [data-theme="light"] .confirm-restart:hover { color: var(--ink-950); }
}

/* Legal placeholder pages (impressum.html, datenschutz.html) need no rules
   of their own: .split__title/.split__body there have no explicit color and
   inherit straight from body, which already inverts above. */