/* Beide Online-Farbwelten nutzen dieselben neutralen Bildgrafiken. */
body[data-mode="online"] {
  --landing-accent: #0d6ec9;
  --landing-accent-hover: #2889df;
  --landing-accent-light: #81ccff;
  --landing-border: #2a4865;
  --landing-muted: #b1c7d9;
  --landing-text: #eef7ff;
  --landing-lead: #c7d8e8;
  --landing-surface: #102b45;
  --landing-raised: #173958;
  --landing-bg-1: #102c4d;
  --landing-bg-2: #0b2038;
  --landing-bg-3: #071727;
  --landing-art-filter: sepia(1) saturate(4.5) hue-rotate(175deg);
  background: radial-gradient(ellipse at 73% 42%, var(--landing-bg-1) 0, var(--landing-bg-2) 48%, var(--landing-bg-3) 100%);
  color: var(--landing-text);
}
html[data-theme="copper"] body[data-mode="online"] {
  --landing-accent: #a84e2b;
  --landing-accent-hover: #c36c42;
  --landing-accent-light: #e9a77f;
  --landing-border: #5c4035;
  --landing-muted: #c9afa0;
  --landing-text: #fbf2eb;
  --landing-lead: #dfcfbf;
  --landing-surface: #28211e;
  --landing-raised: #3b2921;
  --landing-bg-1: #2b211e;
  --landing-bg-2: #1c1a19;
  --landing-bg-3: #151617;
  --landing-art-filter: sepia(1) saturate(4) hue-rotate(-15deg);
}
html[data-theme="green"] body[data-mode="online"] {
  --landing-accent: #16815f;
  --landing-accent-hover: #219b73;
  --landing-accent-light: #83dfb6;
  --landing-border: #315c50;
  --landing-muted: #b4d0c3;
  --landing-text: #effbf4;
  --landing-lead: #d0e5d9;
  --landing-surface: #17342b;
  --landing-raised: #204739;
  --landing-bg-1: #173c30;
  --landing-bg-2: #102b24;
  --landing-bg-3: #0a1d19;
  --landing-art-filter: sepia(1) saturate(4) hue-rotate(75deg);
}
html[data-theme="pink"] body[data-mode="online"] {
  --landing-accent: #a8427c;
  --landing-accent-hover: #c05b96;
  --landing-accent-light: #f2a8d2;
  --landing-border: #68425b;
  --landing-muted: #d7b5c9;
  --landing-text: #fff1f8;
  --landing-lead: #ebd0df;
  --landing-surface: #382333;
  --landing-raised: #4a2d42;
  --landing-bg-1: #42283a;
  --landing-bg-2: #2c1c2a;
  --landing-bg-3: #1c1520;
  --landing-art-filter: sepia(1) saturate(4) hue-rotate(295deg);
}
html[data-theme="violet"] body[data-mode="online"] {
  --landing-accent: #7655ba;
  --landing-accent-hover: #9271d1;
  --landing-accent-light: #c5adfb;
  --landing-border: #53466e;
  --landing-muted: #c6bbda;
  --landing-text: #f6f1ff;
  --landing-lead: #ddd3ed;
  --landing-surface: #2b2540;
  --landing-raised: #3b3156;
  --landing-bg-1: #332b50;
  --landing-bg-2: #221e37;
  --landing-bg-3: #171626;
  --landing-art-filter: sepia(1) saturate(4) hue-rotate(235deg);
}
html[data-theme="gray"] body[data-mode="online"] {
  --landing-accent: #586c79;
  --landing-accent-hover: #6d8290;
  --landing-accent-light: #c5d3dc;
  --landing-border: #49565d;
  --landing-muted: #bac5ca;
  --landing-text: #f3f6f7;
  --landing-lead: #d4dcdf;
  --landing-surface: #263139;
  --landing-raised: #34434c;
  --landing-bg-1: #303c43;
  --landing-bg-2: #202b32;
  --landing-bg-3: #151d22;
  --landing-art-filter: grayscale(1);
}

body[data-mode="online"]:not(.session-active) .shell {
  max-width: 1680px;
  padding: 0 clamp(24px, 5.7vw, 104px) 42px;
}

body[data-mode="online"]:not(.session-active) .masthead,
body[data-mode="online"]:not(.session-active) footer { display: none; }
body[data-mode="online"] .masthead .eyebrow { color: var(--landing-accent-light); }
body[data-mode="online"] .masthead p { color: var(--landing-lead); }
body[data-mode="online"] .masthead { position: relative; }
.mastheadStyle { position: absolute; top: 0; right: 0; z-index: 3; }

.themeSwitch {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
  margin: 0;
  color: var(--landing-muted);
  font-size: .8rem;
}
.themeSwitch details { position: relative; }
.themeSwitch summary { display: block; list-style: none; cursor: pointer; }
.themeSwitch summary::-webkit-details-marker { display: none; }
.themePreview {
  position: relative;
  display: flex;
  align-items: center;
  width: 150px;
  height: 48px;
  overflow: hidden;
  border: 1px solid var(--landing-border);
  border-radius: 8px;
  background: var(--landing-bg-2);
}
.themePreview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.themeChevron {
  position: absolute;
  right: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 100%;
  background: var(--landing-surface);
  color: var(--landing-text);
  font-size: 1.2rem;
}
.themeMenu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  width: 150px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--landing-border);
  border-radius: 8px;
  background: var(--landing-surface);
  box-shadow: 0 14px 28px #0008;
}
.themeMenu button { display: block; width: 100%; height: 42px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 5px; background: var(--landing-bg-2); cursor: pointer; }
.themeMenu button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.themeMenu button:hover,
.themeMenu button[aria-pressed="true"] { border-color: var(--landing-accent-light); }
.themeSwitch details[open] .themeChevron { transform: rotate(180deg); }
.themeSwitch:hover .themePreview { border-color: var(--landing-accent-light); }
.themeSwitch summary:focus-visible .themePreview { outline: 2px solid var(--landing-accent-light); outline-offset: 3px; }
.themeMenu button:focus-visible { outline: 2px solid var(--landing-accent-light); outline-offset: 2px; }
body[data-mode="online"] button:focus-visible,
body[data-mode="online"] input:focus,
body[data-mode="online"] textarea:focus,
body[data-mode="online"] select:focus { outline-color: var(--landing-accent-light); }

.landingHero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 5vw, 100px);
  align-items: center;
  min-height: 0;
  padding: 42px 0 20px;
}
.landingStyle { position: absolute; top: 42px; right: 0; z-index: 3; }
.brandLockup { display: inline-flex; align-items: center; gap: .22em; white-space: nowrap; font-family: Arial, Helvetica, sans-serif; font-weight: 800; letter-spacing: -.065em; line-height: 1; }
.brandWord { color: var(--landing-text); }
.brandWord span { color: var(--landing-accent-light); }
.brandMark { width: 1.25em; height: .76em; flex: none; }
.brandSource { fill: var(--landing-text); }
.brandHighlight { fill: var(--landing-accent-light); opacity: .62; }
.brandArrow { fill: none; stroke: var(--landing-accent-light); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.brandTarget { fill: var(--landing-accent-light); }
.brandTargetLine { fill: var(--landing-bg-3); }
.landingBrand { margin-bottom: 25px; font-size: clamp(1.9rem, 3vw, 2.8rem); }
.landingEyebrow {
  margin: 0;
  color: var(--landing-accent-light);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .19em;
}
.landingIntro h2 {
  margin: 28px 0 30px;
  font: 600 clamp(3.5rem, 5.1vw, 6.1rem)/1.02 Outfit, Arial, sans-serif;
  letter-spacing: -.035em;
  text-shadow: 0 5px 18px rgba(0, 0, 0, .34);
}
.landingIntro h2 em { color: var(--landing-accent-light); font-style: normal; }
.landingLead {
  max-width: 610px;
  color: var(--landing-lead);
  font-size: clamp(1.14rem, 1.7vw, 1.48rem);
  line-height: 1.52;
}
.landingButton {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 350px;
  gap: 35px;
  margin: 25px 0 0;
  padding: 19px 27px;
  background: var(--landing-accent);
  color: #fff;
  box-shadow: 0 12px 34px #0005;
  transition: background .15s, transform .15s;
}
.landingButton:hover:not(:disabled) { background: var(--landing-accent-hover); transform: translateY(-2px); }
.landingButton span { font-size: 1.4rem; font-weight: 400; }

.landingProcess { border-top: 1px solid var(--landing-border); padding-top: 12px; }
.landingSteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.landingSteps li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 10px;
  align-items: center;
  text-align: center;
  padding-top: 5px;
}
.landingSteps b { font: 600 1.65rem Outfit, Arial, sans-serif; color: var(--landing-accent-light); }
.landingSteps svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--landing-accent-light);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.landingSteps span { flex-basis: 100%; font-size: .9rem; }

.landingIllustration { margin: 0; min-width: 0; }
.graphicCanvas { position: relative; min-width: 0; overflow: hidden; }
.landingIllustration img {
  display: block;
  width: 100%;
  height: auto;
  margin-block: -5%;
  opacity: .82;
  filter: var(--landing-art-filter);
}
.landingProcessGraphic {
  margin: 0;
}
.landingProcessGraphic img {
  display: block;
  width: 100%;
  height: auto;
  margin-block: -4%;
  opacity: .84;
  filter: var(--landing-art-filter);
}
.landingProcessGraphic figcaption {
  color: var(--landing-muted);
  font-size: .82rem;
  margin: 5px 0 0;
  text-align: center;
}
.landingPrivacy { color: var(--landing-muted); font-size: .83rem; line-height: 1.5; margin: 14px 0 0; }

/* Das gewählte Farbschema gilt auch während der Online-Sitzung. */
body[data-mode="online"] #workspace {
  background: var(--landing-surface);
  border-color: var(--landing-border);
  color: var(--landing-text);
  box-shadow: 0 18px 50px #0003;
}
body[data-mode="online"] .projectBarActions { display: flex; align-items: center; gap: 15px; }
body[data-mode="online"] #workspace .projectBar,
body[data-mode="online"] #workspace .reviewPanel,
body[data-mode="online"] #workspace .resultPanel { border-color: var(--landing-border); }
body[data-mode="online"] #workspace .eyebrow,
body[data-mode="online"] #workspace .kind { color: var(--landing-accent-light); }
body[data-mode="online"] #workspace label,
body[data-mode="online"] #workspace summary { color: var(--landing-text); }
body[data-mode="online"] #workspace .hint,
body[data-mode="online"] #workspace .sectionHead p,
body[data-mode="online"] #workspace .projectBar small,
body[data-mode="online"] #workspace .count,
body[data-mode="online"] #workspace .candidateSources,
body[data-mode="online"] #workspace .empty { color: var(--landing-muted); }
body[data-mode="online"] #workspace input:not([type="checkbox"]):not([type="file"]),
body[data-mode="online"] #workspace textarea,
body[data-mode="online"] #workspace select {
  background: var(--landing-bg-3);
  border-color: var(--landing-border);
  color: var(--landing-text);
}
body[data-mode="online"] #workspace .step,
body[data-mode="online"] #workspace .known {
  background: var(--landing-raised);
  color: var(--landing-accent-light);
}
body[data-mode="online"] #workspace .candidate,
body[data-mode="online"] #workspace .fileList li,
body[data-mode="online"] #workspace .preview { border-color: var(--landing-border); }
body[data-mode="online"] #workspace .preview summary { background: var(--landing-raised); }
body[data-mode="online"] #workspace .primary { background: var(--landing-accent); color: #fff; }
body[data-mode="online"] #workspace .primary:hover:not(:disabled) { background: var(--landing-accent-hover); }
body[data-mode="online"] #workspace .secondary { background: var(--landing-raised); color: var(--landing-accent-light); }
body[data-mode="online"] #workspace .secondary:hover:not(:disabled) { background: var(--landing-border); }
body[data-mode="online"] #workspace .textButton { color: var(--landing-accent-light); }
body[data-mode="online"] .message { background: var(--landing-raised); color: var(--landing-text); }
body[data-mode="online"] .message.error { background: #4b2525; color: #ffcec7; }
body[data-mode="online"] footer { color: var(--landing-muted); }

/* Digitalregen liegt nur in den Verbindungen zwischen den Bildmotiven. */
.matrixLane {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  color: var(--landing-accent-light);
  opacity: .55;
  mix-blend-mode: screen;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.matrixLaneHero { left: 35%; top: 12%; width: 30%; height: 75%; }
.matrixLaneProcess { top: 25%; width: 12%; height: 53%; }
.matrixLaneFirst { left: 25%; }
.matrixLaneSecond { left: 63%; }
.matrixLane span {
  position: absolute;
  top: -95%;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font: 700 clamp(9px, 1vw, 14px)/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-shadow: 0 0 8px var(--landing-accent-light);
  animation: matrixFall 4.6s linear infinite;
}
.matrixLane span:nth-child(1) { left: 5%; animation-delay: -2.1s; }
.matrixLane span:nth-child(2) { left: 18%; animation-delay: -3.7s; animation-duration: 5.2s; }
.matrixLane span:nth-child(3) { left: 31%; animation-delay: -1.3s; }
.matrixLane span:nth-child(4) { left: 44%; animation-delay: -4.4s; animation-duration: 5.5s; }
.matrixLane span:nth-child(5) { left: 57%; animation-delay: -2.8s; }
.matrixLane span:nth-child(6) { left: 70%; animation-delay: -1.8s; animation-duration: 5.1s; }
.matrixLane span:nth-child(7) { left: 83%; animation-delay: -3.9s; }
.matrixLane span:nth-child(8) { left: 94%; animation-delay: -1s; animation-duration: 5.3s; }
.matrixLaneProcess span:nth-child(1) { left: 8%; }
.matrixLaneProcess span:nth-child(2) { left: 28%; }
.matrixLaneProcess span:nth-child(3) { left: 48%; }
.matrixLaneProcess span:nth-child(4) { left: 68%; }
.matrixLaneProcess span:nth-child(5) { left: 88%; }
@keyframes matrixFall { to { top: 105%; } }
@media (prefers-reduced-motion: reduce) {
  .matrixLane span { animation: none; top: 35%; }
  .matrixLane { opacity: .14; }
  .landingButton { transition: none; }
}

@media (max-width: 1050px) {
  .landingHero { grid-template-columns: 1fr; min-height: 0; gap: 20px; padding: 36px 0 20px; }
  .landingStyle { top: 36px; }
  .landingIntro h2 { font-size: clamp(3.3rem, 8vw, 5rem); }
  .landingButton { margin-bottom: 0; }
  .landingIllustration { max-width: 850px; width: 100%; }
}

@media (max-width: 620px) {
  body[data-mode="online"]:not(.session-active) .shell { padding: 0 18px 30px; }
  .landingHero { padding: 25px 0 20px; }
  .landingStyle { position: relative; top: auto; right: auto; justify-self: end; }
  .landingStyle .themePreview, .landingStyle .themeMenu { width: 120px; }
  .landingStyle { font-size: .72rem; }
  .landingBrand { font-size: clamp(1.65rem, 7vw, 2.1rem); }
  .landingIntro h2 { font-size: clamp(2.7rem, 10vw, 4.2rem); }
  .landingButton { width: 100%; min-width: 0; }
  .landingProcess { overflow-x: auto; }
  .landingSteps, .landingProcessGraphic { min-width: 760px; }
  .landingSteps svg { width: 22px; height: 22px; }
  .landingSteps span { font-size: .74rem; }
  body[data-mode="online"] .projectBar,
  body[data-mode="online"] .projectBarActions { flex-wrap: wrap; }
}
@media (max-width: 850px) {
  .mastheadStyle { position: static; justify-content: flex-end; margin-top: 16px; }
}