/* Light surfaces for the project pages. Original app/game images retain their
   colors; only surrounding UI and decorative scenery respond to the theme. */
html[data-theme='light'] .projects-page {
  /* The smallest background rendering is about 810px tall: finish the fade
     before its lower edge so it never leaves a horizontal light seam. */
  background:
    linear-gradient(180deg, #f3f8fccc 0, #f3f8fc30 155px, var(--bg) 800px),
    url('assets/light-space-earth.webp') center top / max(100%, 1440px) auto no-repeat,
    var(--bg);
}
html[data-theme='light'] .projects-page .projects-heading p,
html[data-theme='light'] .projects-page .project-description { color: var(--body); }
html[data-theme='light'] .projects-page .back-link,
html[data-theme='light'] .projects-page .premium-note { color: var(--muted); }
html[data-theme='light'] .projects-page .back-link:hover { color: var(--accent); }
html[data-theme='light'] .projects-page .project-card {
  border-color: var(--line);
  background: #ffffff;
  box-shadow: 0 12px 36px #184b6912;
}
html[data-theme='light'] .projects-page .project-card:target {
  outline-color: var(--accent);
}
html[data-theme='light'] .projects-page .feature-project::before {
  content: '';
  background:
    linear-gradient(90deg, #f8fcffff 0%, #f8fcfff2 34%, #f8fcff73 58%, #f8fcff0d 100%),
    url('assets/light-park-day.webp') center 60% / cover no-repeat;
}
html[data-theme='light'] .projects-page .feature-art {
  border: 0;
  background: transparent;
}
html[data-theme='light'] .projects-page .feature-device-stage::before { content: none; }
html[data-theme='light'] .projects-page .keyfall-project {
  background:
    linear-gradient(90deg, #fffffffa 5%, #ffffffd9 43%, #ffffff40),
    url('assets/light-space-earth.webp') 73% center / cover no-repeat;
}
html[data-theme='light'] .projects-page .keyfall-project::before { content: none; }
html[data-theme='light'] .projects-page .wristdesk-project {
  background: radial-gradient(ellipse at 80% 74%, #c7e9f5, transparent 66%), #ffffff;
}
html[data-theme='light'] .projects-page .wristdesk-project::before { content: none; }
html[data-theme='light'] .projects-page .dev-art {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme='light'] .projects-page .wristdesk-media {
  background: transparent;
}

/* Freizeitpark Wartezeiten: a daylight surround for the unchanged app captures. */
html[data-theme='light'] .wt-page { background: var(--bg); }
html[data-theme='light'] .wt-page .wt-backdrop {
  display: block;
  height: clamp(760px, 69vw, 1000px);
  background: url('assets/light-park-day.webp') center 64% / cover no-repeat;
}
html[data-theme='light'] .wt-page .wt-backdrop img { visibility: hidden; }
html[data-theme='light'] .wt-page .wt-backdrop::after {
  background:
    linear-gradient(0deg, var(--bg) 0%, #f3f8fcd9 8%, #f3f8fc00 36%),
    linear-gradient(90deg, #f3f8fcf5 0%, #f3f8fcda 33%, #f3f8fc45 68%, #f3f8fc18),
    linear-gradient(180deg, #f3f8fc99, #f3f8fc00 24%);
}
html[data-theme='light'] .wt-page .wt-top { background: transparent; }
/* Daylight scenery fills the page width; the original devices sit above it
   without the former separate dark, bordered picture panel. */
html[data-theme='light'] .wt-page .wt-hero-devices { isolation: isolate; }
html[data-theme='light'] .wt-page .wt-hero-devices::before {
  content: none;
}
html[data-theme='light'] .wt-page .wt-phone { box-shadow: 0 0 0 2px #070b0e, 10px 14px 26px #143c5529, inset 0 0 0 2px #060b10; }
html[data-theme='light'] .wt-page .wt-benefit,
html[data-theme='light'] .wt-page .wt-stat,
html[data-theme='light'] .wt-page .wt-bordered { border-color: var(--line); }
html[data-theme='light'] .wt-page .wt-benefit:hover { background: #dceff866; }
html[data-theme='light'] .wt-page .wt-benefit-icon {
  border-color: #a6cbdc;
  background: #eef8fc;
}
html[data-theme='light'] .wt-page .wt-insight {
  background: radial-gradient(ellipse at 69% 50%, #e6f4fa, transparent 60%), #ffffff;
}
html[data-theme='light'] .wt-page .wt-tabs {
  border-color: #a6cbdc;
  background: #edf5f9;
}
html[data-theme='light'] .wt-page .wt-tabs button { color: var(--body); }
html[data-theme='light'] .wt-page .wt-tabs button:hover {
  color: var(--text);
  background: #dceef6;
}
html[data-theme='light'] .wt-page .wt-tabs button[aria-selected='true'] {
  color: #ffffff;
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 2px 8px #007f9c1a;
}
html[data-theme='light'] .wt-page .wt-statistics { background: #f7fbfd; }
html[data-theme='light'] .wt-page .wt-cta {
  background: url('assets/light-park-day.webp') center 62% / cover no-repeat;
}
html[data-theme='light'] .wt-page .wt-cta-background { visibility: hidden; }
html[data-theme='light'] .wt-page .wt-cta::before {
  background: linear-gradient(180deg, #f3f8fcf2, #f3f8fcc9 50%, #f3f8fcf2);
}
html[data-theme='light'] .wt-page .wt-cta h2 { color: var(--text); }
html[data-theme='light'] .wt-page .wt-footer { background: var(--bg); }

/* KEYFALL: the interface is light while gameplay and game artwork remain dark. */
html[data-theme='light'] .kf-page { background: var(--bg); --kf-line: var(--line); }
html[data-theme='light'] .kf-page .kf-top::before {
  height: clamp(830px, 71vw, 1060px);
  background:
    linear-gradient(180deg, #f3f8fccc 0, #f3f8fc00 155px, #f3f8fc00 45%, var(--bg) 96%),
    linear-gradient(90deg, #f3f8fc66, #f3f8fc00 65%),
    url('assets/light-space-earth.webp') center top / cover no-repeat;
  opacity: 1;
}
html[data-theme='light'] .kf-page .kf-wordmark { color: var(--text); }
html[data-theme='light'] .kf-page .kf-lead,
html[data-theme='light'] .kf-page .kf-description,
html[data-theme='light'] .kf-page .kf-step p,
html[data-theme='light'] .kf-page .kf-feature p,
html[data-theme='light'] .kf-page .kf-compatibility { color: var(--body); }
html[data-theme='light'] .kf-page .kf-status {
  color: var(--body);
  border-color: var(--line);
  background: #ffffff;
}
html[data-theme='light'] .kf-page .kf-follow:hover { color: #005a75; }
html[data-theme='light'] .kf-page .kf-device-preview::before {
  background: radial-gradient(ellipse, #63c6e044, transparent 66%);
}
html[data-theme='light'] .kf-page .kf-gameplay-shot {
  outline-color: #7f9baa;
  box-shadow: 0 18px 44px #15384e2e;
}
html[data-theme='light'] .kf-page figcaption,
html[data-theme='light'] .kf-page .kf-skip-demo,
html[data-theme='light'] .kf-page .kf-caption,
html[data-theme='light'] .kf-page .kf-schema-label,
html[data-theme='light'] .kf-page .kf-reset,
html[data-theme='light'] .kf-page .kf-demo-status,
html[data-theme='light'] .kf-page .kf-comparison-disclaimer { color: var(--muted); }
html[data-theme='light'] .kf-page .kf-demo-focus.is-active {
  border-color: #78b6cb;
  background: #e6f4fa80;
}
html[data-theme='light'] .kf-page .kf-demo-focus.is-error {
  border-color: #b93434;
  box-shadow: 0 0 0 1px #b93434;
}
html[data-theme='light'] .kf-page .kf-word {
  color: #f3fbff;
  background: #052333;
  border-color: #08b6dc;
  box-shadow: 0 0 16px #008cad26;
}
html[data-theme='light'] .kf-page .kf-word .is-entered { color: #58ddf3; }
html[data-theme='light'] .kf-page .kf-keys kbd {
  color: #edf8fc;
  border-color: #477082;
  background: #092434;
}
html[data-theme='light'] .kf-page .kf-keys .is-entered {
  color: #042632;
  border-color: #007f9c;
  background: #3dd4ee;
}
html[data-theme='light'] .kf-page .kf-button {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
}
html[data-theme='light'] .kf-page .kf-button:hover:not(:disabled) {
  color: #ffffff;
  background: #00647e;
  border-color: #00647e;
}
html[data-theme='light'] .kf-page .kf-button-subtle {
  color: var(--accent);
  background: #eaf6fb;
  border-color: #93bfd1;
}
html[data-theme='light'] .kf-page .kf-button-subtle:hover:not(:disabled) {
  color: #005a75;
  background: #d5edf6;
  border-color: var(--accent);
}
html[data-theme='light'] .kf-page .kf-display {
  background: radial-gradient(ellipse at 72% 50%, #e3f3fa, transparent 56%), #ffffff;
}
html[data-theme='light'] .kf-page .kf-tabs { background: #eaf4f9; border-color: #9dc4d6; }
html[data-theme='light'] .kf-page .kf-tabs button { color: var(--body); }
html[data-theme='light'] .kf-page .kf-tabs button:hover { background: #d7edf6; }
html[data-theme='light'] .kf-page .kf-tabs button[aria-selected='true'] {
  color: #ffffff;
  background: var(--accent);
}
html[data-theme='light'] .kf-page .kf-step { border-color: var(--line); }
html[data-theme='light'] .kf-page .kf-steps { scrollbar-color: #80b0c4 #eaf4f9; }
html[data-theme='light'] .kf-page .kf-feature {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 6px 22px #1749650c;
}
html[data-theme='light'] .kf-page .kf-feature:hover { border-color: var(--accent); }
html[data-theme='light'] .kf-page .kf-feature--text { background: linear-gradient(160deg, #e9f6fb, #ffffff 70%); }
html[data-theme='light'] .kf-page .kf-feature .kf-feature-stage { color: var(--accent); }
html[data-theme='light'] .kf-page .kf-updates {
  background:
    linear-gradient(90deg, #edf7fbf0, #edf7fbc9),
    url('assets/light-space-earth.webp') center 53% / cover no-repeat,
    #ecf6fb;
}
html[data-theme='light'] .kf-page .kf-updates-copy { color: var(--body); }
html[data-theme='light'] .kf-page .kf-footer { background: var(--bg); }

@media (max-width: 800px) {
  html[data-theme='light'] .projects-page .feature-project::before {
    background:
      linear-gradient(180deg, #f8fcff 0%, #f8fcfff2 34%, #f8fcff52 70%, #f8fcff1a),
      url('assets/light-park-day.webp') 66% bottom / auto 76% no-repeat;
  }
}
@media (max-width: 900px) {
  html[data-theme='light'] .wt-page .wt-backdrop {
    height: 1160px;
    background-position: 66% bottom;
  }
  html[data-theme='light'] .wt-page .wt-backdrop::after {
    background: linear-gradient(180deg, #f3f8fcf5 0%, #f3f8fcda 29%, #f3f8fc22 62%, var(--bg) 95%);
  }
  html[data-theme='light'] .kf-page .kf-top::before {
    height: 1240px;
    background-position: 66% top;
  }
}