/* Creatorfy-Palette: vom Betreiber vorgegeben. Beide Modi teilen die Bewegung. */
:root {
  color-scheme: dark;
  --bg: #0A0B0E;
  --surface: #15171B;
  --surface-secondary: #202329;
  --text: #FFFFFF;
  --text-secondary: #A1A1AA;
  --border: #303238;
  --accent: #C7FF5B;
  --ink: var(--text);
  --muted: var(--text-secondary);
  --line: var(--border);
  --navy: var(--accent);
  --button-text: #0A0B0E;
  --world-base: linear-gradient(145deg, #0A0B0E 5%, #111813 54%, #0E1318 100%);
  --world-idea: linear-gradient(150deg, #101410, #1B2414 48%, #0D1615);
  --world-build: linear-gradient(155deg, #0B1218, #11201E 48%, #101710);
  --world-launch: linear-gradient(145deg, #0D1913, #162211 58%, #101615);
  --world-grow: linear-gradient(145deg, #101614, #1C2815 56%, #141A0F);
  --glow-a: #C7FF5B;
  --glow-b: #5CB89B;
  --grid-color: #C7FF5B0A;
  --particle: #C7FF5B7A;
  --tint-green: #25311E;
  --tint-teal: #19312C;
  --tint-olive: #2B301C;
  --tag-green: #D0F697;
  --tag-teal: #9CDBCB;
  --tag-olive: #DBDF9A;
  --shadow: 0 20px 60px #00000038;
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #F8F9F6;
  --surface: #FFFFFF;
  --surface-secondary: #EEF0EA;
  --text: #101114;
  --text-secondary: #62666B;
  --border: #DDE1D8;
  --accent: #A4DF36;
  --world-base: linear-gradient(145deg, #F8F9F6 5%, #EDF4DF 54%, #EAF3EE 100%);
  --world-idea: linear-gradient(150deg, #F8F9F6, #F1F5DE 48%, #E7F1E5);
  --world-build: linear-gradient(155deg, #F5F8F5, #E3F1E9 48%, #ECF2DE);
  --world-launch: linear-gradient(145deg, #EFF7EB, #E6F2D4 58%, #F7F8F0);
  --world-grow: linear-gradient(145deg, #F5F8EF, #EDF3D5 56%, #E3F0E6);
  --glow-a: #B8E85D;
  --glow-b: #9CCDB0;
  --grid-color: #70984512;
  --particle: #688D3A66;
  --tint-green: #E6F1D5;
  --tint-teal: #E1F0E8;
  --tint-olive: #EEF0D8;
  --tag-green: #385C13;
  --tag-teal: #245F4F;
  --tag-olive: #5B621D;
  --shadow: 0 18px 50px #20331C10;
}
body { background: var(--bg); color: var(--text); }
::selection { background: var(--accent); color: var(--button-text); }
body .world, body[data-world] .world { background: var(--world-base); }
.world-layer-idea { background: var(--world-idea); }
.world-layer-build { background: var(--world-build); }
.world-layer-launch { background: var(--world-launch); }
.world-layer-grow { background: var(--world-grow); }
body .world .aurora-a, body[data-world] .world .aurora-a { background: radial-gradient(ellipse, var(--glow-a), transparent 70%); opacity: .14; }
body .world .aurora-b, body[data-world] .world .aurora-b { background: radial-gradient(ellipse, var(--glow-b), transparent 70%); opacity: .13; }
[data-theme="light"] body .world .aurora { opacity: .28; }
.world-sun { background: radial-gradient(ellipse, color-mix(in srgb, var(--glow-a) 25%, transparent), transparent 64%); }
.world-grid { background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); }
.starfield { display: none; }
.brand-particle {
  position: absolute;
  top: 110%; left: var(--particle-x);
  width: var(--particle-size); height: var(--particle-size);
  background: var(--accent);
  mask: url('/assets/creatorfy-c.svg') center / contain no-repeat;
  -webkit-mask: url('/assets/creatorfy-c.svg') center / contain no-repeat;
  pointer-events: none;
  opacity: 0;
  animation: brand-drift var(--particle-time) var(--particle-delay) linear infinite;
}
[data-theme='light'] .brand-particle { background: #638B2A; }
body.motion-paused .brand-particle {
  animation: brand-drift var(--particle-time) var(--particle-delay) linear infinite !important;
  animation-play-state: paused !important;
}
.page-hidden .brand-particle { animation-play-state: paused; }
@keyframes brand-drift {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-18deg); }
  12%, 82% { opacity: var(--particle-opacity); }
  100% { opacity: 0; transform: translate3d(var(--particle-drift), -135vh, 0) rotate(32deg); }
}
@media(max-width:760px) { .brand-particle:nth-of-type(even) { display: none; } }
@media(prefers-reduced-motion:reduce) {
  .brand-particle, body.motion-paused .brand-particle {
    animation: none !important;
    top: var(--particle-rest-y);
    opacity: .12;
    transform: rotate(-12deg);
  }
}
.nav, body.scrolled .nav { background: color-mix(in srgb, var(--surface) 88%, transparent); border-color: var(--border); box-shadow: 0 5px 20px #00000014; }
.brand, .window-brand, .service-cell b { color: var(--text); }
.muted { color: var(--text-secondary); }
.eyebrow, .idea-form, .preview-window, .demo-frame, .contact-form { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.eyebrow { box-shadow: none; }
.typing-box { background: var(--surface-secondary); border-color: var(--border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 5%, transparent); }
.idea-form input, .contact-form input, .contact-form textarea, .contact-form select { background: var(--surface); color: var(--text); border-color: var(--border); }
input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: 1; }
.button { background: var(--accent); color: var(--button-text); }
.button:hover { background: color-mix(in srgb, var(--accent) 85%, #FFFFFF); color: var(--button-text); }
.theme-toggle { color: var(--text); background: var(--surface-secondary); border: 1px solid var(--border); border-radius: 22px; padding: 8px 12px; font-size: 11px; line-height: 1.3; white-space: nowrap; }
.theme-toggle:hover { border-color: var(--accent); }
select.theme-toggle { cursor: pointer; padding-inline: 9px 5px; }
.theme-toggle option { color: var(--text); background: var(--surface); }
.motion-toggle, .scene-note, .service-cell span, .visual-caption, .footer .preview-notice, .service-index { color: var(--text-secondary); }
.text-button, .nav-links a[aria-current="page"], .form-status { color: var(--text); }
.nav-actions { gap: 16px; }
.menu-toggle { color: var(--text); background: var(--surface-secondary); border-color: var(--border); }
.skip { color: var(--text); background: var(--surface); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline-color: var(--accent); }
.selected-chip, .shop-checks span { color: var(--text-secondary); background: var(--surface-secondary); border-color: var(--border); }
.purple, .lilac, .pink { background: var(--tint-green); color: var(--tag-green); }
.blue, .mint { background: var(--tint-teal); color: var(--tag-teal); }
.amber { background: var(--tint-olive); color: var(--tag-olive); }
.service-cell { border: 1px solid var(--border); }
.tiny-dot.purple, .tiny-dot.amber { background: var(--accent); }
.tiny-dot.blue, .tiny-dot.mint { background: var(--glow-b); }
.status-dot { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); animation-name: theme-pulse; }
.caret { border-color: var(--accent); }
.check { background: var(--tint-green); color: var(--tag-green); }
.launch-status { color: var(--text); background: var(--tint-teal); }
.inline-status { background: var(--tint-green); color: var(--tag-green); }
.tracking-progress, .shop-loader { background: var(--surface-secondary); }
.tracking-progress span, .shop-loader span { background: var(--accent); }
.scene-dots button:after { background: var(--border); }
.scene-dots button[aria-pressed="true"]:after { background: var(--accent); }
.step-progress i { background: var(--border); }
.chapter .step-progress i.done { background: var(--accent); }
.steps { border-color: var(--border); }
.step:before { background: var(--accent); box-shadow: 0 0 0 5px var(--bg); }
.timeline-fill { background: var(--accent); }
.js-scroll .chapter-number { -webkit-text-stroke-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.shipping-flow:before { background: var(--border); }
.flow-point { background: var(--accent); border-color: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.faq summary:after { color: var(--text-secondary); }
.footer .preview-notice { color: var(--text-secondary); }
@keyframes theme-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 3%, transparent); opacity: .7; } }
@media(max-width:760px) {
  .nav-links { background: var(--surface); border-color: var(--border); }
  .nav-actions { gap: 6px; }
  .theme-toggle { font-size: 10px; padding: 7px 9px; white-space: normal; max-width: 64px; }
  .motion-toggle { font-size: 9px; max-width: 65px; padding-inline: 4px; }
  .brand { font-size: 16px; gap: 6px; }
  .brand img { width: 25px; height: 25px; }
  .nav, body.scrolled .nav { padding-inline: 12px; gap: 6px; }
  .menu-toggle { padding: 7px 9px; font-size: 11px; }
}
@media(max-width:360px) {
  .nav, body.scrolled .nav { padding-inline: 8px; }
  .brand { font-size: 15px; gap: 5px; }
  .nav-actions { gap: 4px; }
  .display, .hero .display, .contact .display, .faq .display { font-size: 40px; }
  .business-teaser { grid-template-columns: minmax(0, 1fr); }
  .business-teaser .display { font-size: 38px; }
  .chapter-heading .display { font-size: 30px; }
  .chapter-heading { gap: 18px; }
  .chapter-number { font-size: 120px; min-width: 66px; }
}
.footer > div { flex-wrap: wrap; min-width: 0; max-width: 100%; }