/* =========================================================================
   app.leoflex.io — "Coming soon" / Warteliste
   Standalone launch page on the app subdomain. Uses the LeoFlex design
   tokens (styles.css) + design-system components (Logo/Button/Input).
   Bilingual (DE/EN, in-page toggle) + light/dark, shared with the site
   via localStorage (lf_theme).
   ========================================================================= */

/* Marketing-brand tokens (mirrored from the website's site.css so this page
   is self-contained — it only loads styles.css + app.css). */
:root {
  --mk-radius-lg: 10px;
  --mk-radius-pill: 999px;
  --mk-grad: linear-gradient(135deg, #f3a73c 0%, var(--lf-orange) 55%, var(--lf-orange-dark) 100%);
  --mk-ring: color-mix(in srgb, var(--lf-orange) 22%, transparent);
}

.app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: clip;                 /* decorative glow/mark never adds scroll */
  background: var(--lf-bg);
  color: var(--lf-text);
  font-family: var(--lf-font-sans);
}

/* ---- Branded backdrop ------------------------------------------------- */
/* Animated aurora: orange/grey blobs drift slowly behind the dot field. */
.app-shell::before {
  content: "";
  position: absolute; inset: -20%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 46% at 22% 26%, rgb(232 148 27 / 34%), transparent 66%),
    radial-gradient(42% 50% at 82% 20%, rgb(243 167 60 / 28%), transparent 68%),
    radial-gradient(48% 52% at 68% 88%, rgb(86 93 123 / 20%), transparent 70%),
    radial-gradient(40% 44% at 12% 84%, rgb(232 148 27 / 20%), transparent 68%);
  filter: blur(20px);
  animation: appAurora 26s ease-in-out infinite alternate;
}
:root.theme-dark .app-shell::before {
  background:
    radial-gradient(38% 46% at 22% 26%, rgb(239 151 35 / 30%), transparent 66%),
    radial-gradient(42% 50% at 82% 20%, rgb(243 167 60 / 24%), transparent 68%),
    radial-gradient(48% 52% at 68% 88%, rgb(190 197 231 / 16%), transparent 70%),
    radial-gradient(40% 44% at 12% 84%, rgb(239 151 35 / 18%), transparent 68%);
}
@keyframes appAurora {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.12); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .app-shell::before { animation: none; } }
.app-bg-mark {                      /* giant faint LeoFlex "X" watermark */
  position: absolute; right: -6vw; bottom: -10vh; z-index: 0;
  width: min(52vw, 620px); opacity: .05; color: var(--lf-grey-dark);
  pointer-events: none; user-select: none;
}
:root.theme-dark .app-bg-mark { opacity: .07; color: var(--lf-grey); }
.app-bg-canvas {                    /* live pointer-reactive dot field (site hero) */
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask: radial-gradient(92% 88% at 50% 34%, #000 55%, transparent 100%);
  mask: radial-gradient(92% 88% at 50% 34%, #000 55%, transparent 100%);
}

/* ---- Top bar ---------------------------------------------------------- */
.app-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--lf-space-3);
  padding: var(--lf-space-4) clamp(var(--lf-space-4), 5vw, var(--lf-space-7));
}
.app-bar__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--lf-grey-dark); }
:root.theme-dark .app-bar__brand { color: #fff; }
/* Inline wordmark used by the no-JS static fallback (letters take currentColor). */
.app-bar__logo { display: block; height: 26px; width: auto; }
.app-bar__sub {
  font: var(--lf-fw-regular) 12px var(--lf-font-mono);
  color: var(--lf-text-muted);
  padding: 3px 8px; border: 1px solid var(--lf-border); border-radius: var(--mk-radius-pill);
  background: color-mix(in srgb, var(--lf-surface) 60%, transparent);
}
@media (max-width: 560px) { .app-bar__sub { display: none; } }
.app-bar__actions { display: inline-flex; align-items: center; gap: var(--lf-space-2); }

.app-lang { display: inline-flex; align-items: center; gap: 2px; }
.app-lang__btn {
  background: none; border: none; cursor: pointer;
  color: var(--lf-text-muted); font: var(--lf-fw-medium) var(--lf-fs-xs) var(--lf-font-sans);
  padding: 6px 8px; border-radius: 6px;
  transition: color var(--lf-dur-fast) var(--lf-ease), background-color var(--lf-dur-fast) var(--lf-ease);
}
.app-lang__btn:hover { background: var(--lf-surface-2); }
.app-lang__btn.is-active { color: var(--lf-orange-ink); background: var(--lf-orange-soft); }
.app-lang__sep { color: var(--lf-border); }

/* Theme toggle — sun/moon pill with a sliding orange knob */
.app-theme {
  position: relative; display: inline-flex; align-items: center; gap: 0; padding: 3px;
  border: 1px solid var(--lf-border); border-radius: var(--mk-radius-pill);
  background: color-mix(in srgb, var(--lf-surface) 60%, transparent);
  backdrop-filter: blur(4px);
}
.app-theme__btn {
  position: relative; z-index: 1;
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border: none; background: none; cursor: pointer; border-radius: 50%;
  color: var(--lf-text-muted); transition: color var(--lf-dur-fast) var(--lf-ease);
}
.app-theme__btn.is-active { color: #fff; }
.app-theme__btn:not(.is-active):hover { color: var(--lf-text); }
.app-theme__knob {
  position: absolute; top: 3px; left: 3px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--mk-grad); box-shadow: 0 4px 12px -4px var(--mk-ring);
  transition: transform .28s var(--lf-ease);
}
:root.theme-dark .app-theme__knob { transform: translateX(30px); }

/* ---- Main ------------------------------------------------------------- */
.app-main {
  position: relative; z-index: 2;
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: clamp(var(--lf-space-5), 6vw, var(--lf-space-8)) clamp(var(--lf-space-4), 5vw, var(--lf-space-7));
}
.cs {
  width: 100%; max-width: 620px; text-align: center;
  animation: csRise .6s var(--lf-ease) both;
}
@media (prefers-reduced-motion: reduce) { .cs { animation: none; } }
@keyframes csRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.cs__status {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font: var(--lf-fw-medium) var(--lf-fs-xs) var(--lf-font-sans);
  color: var(--lf-orange-ink); background: var(--lf-orange-soft);
  border: 1px solid color-mix(in srgb, var(--lf-orange) 30%, transparent);
  padding: 6px 14px; border-radius: var(--mk-radius-pill);
  letter-spacing: .01em;
}
.cs__pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--lf-orange);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--lf-orange) 60%, transparent);
  animation: csPulse 2s var(--lf-ease) infinite;
}
@keyframes csPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lf-orange) 55%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .cs__pulse { animation: none; } }

.cs__title {
  margin: var(--lf-space-4) 0 var(--lf-space-3);
  font: var(--lf-fw-bold) var(--lf-fs-h1)/1.08 var(--lf-font-sans);
  letter-spacing: -0.025em; color: var(--lf-grey-dark);
  text-wrap: balance;
}
:root.theme-dark .cs__title { color: var(--lf-text); }
.cs__title .accent { color: var(--lf-orange-dark); }
.cs__sub {
  margin: 0 auto var(--lf-space-4); max-width: 52ch;
  font-size: var(--lf-fs-md); line-height: var(--lf-lh); color: var(--lf-text-muted);
  text-wrap: pretty;
}

/* ---- AI marketing ticker (typewriter) --------------------------------- */
.cs__ai {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 26px; margin: 0 auto var(--lf-space-5); padding: 8px 16px;
  border: 1px solid var(--lf-border); border-radius: 14px;
  background: color-mix(in srgb, var(--lf-surface) 70%, transparent);
  backdrop-filter: blur(4px);
  font: var(--lf-fw-regular) var(--lf-fs-xs) var(--lf-font-mono);
  color: var(--lf-text-muted); max-width: min(100%, 52ch);
}
.cs__ai-spark { color: var(--lf-orange-dark); flex: none; display: inline-flex; }
.cs__ai-txt { color: var(--lf-text); text-align: left; }
.cs__caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 1px;
  background: var(--lf-orange); vertical-align: -2px; animation: csCaret 1s steps(1) infinite;
}
@keyframes csCaret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cs__caret { animation: none; } }

/* ---- Waitlist form ---------------------------------------------------- */
.cs__panel {
  max-width: 520px; margin: 0 auto;
  background: color-mix(in srgb, var(--lf-surface) 75%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--lf-border); border-radius: 16px;
  box-shadow: var(--lf-shadow-card);
  padding: clamp(var(--lf-space-4), 4vw, var(--lf-space-6));
}
.cs__form { text-align: left; }
.cs__row { display: flex; flex-direction: column; gap: var(--lf-space-3); align-items: stretch; }
.cs__row .md-field { width: 100%; margin: 0; }
/* Button + input use the brand control radius (--lf-radius-md = 4px). */
.cs__row .lf-btn { width: 100%; }
.cs__consent { margin-top: var(--lf-space-3); }
.cs__consent .lf-check__label { font-size: var(--lf-fs-xs); color: var(--lf-text-muted); line-height: 1.5; }
.cs__consent a { color: var(--lf-orange-ink); text-decoration: underline; text-underline-offset: 2px; }
.cs__consent a:hover { color: var(--lf-orange-dark); }
.cs__err {
  display: flex; align-items: center; gap: 6px; margin-top: var(--lf-space-2);
  color: var(--lf-error); font-size: var(--lf-fs-xs);
}
:root.theme-dark .cs__err { color: #f0a49b; }

.cs__note {
  margin-top: var(--lf-space-5); font-size: var(--lf-fs-xs); color: var(--lf-text-muted);
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
}
.cs__note svg { color: var(--lf-orange-dark); flex: none; }

/* ---- Success ---------------------------------------------------------- */
.cs__ok {
  max-width: 520px; margin: 0 auto;
  background: color-mix(in srgb, var(--lf-surface) 75%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--lf-border);
  border-radius: 16px; padding: clamp(var(--lf-space-5), 4vw, var(--lf-space-6));
  box-shadow: var(--lf-shadow-card); text-align: center;
  animation: csRise .45s var(--lf-ease) both;
}
.cs__ok-ring {
  width: 56px; height: 56px; margin: 0 auto var(--lf-space-3);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--lf-success-soft); color: var(--lf-success);
}
:root.theme-dark .cs__ok-ring { color: #6fce84; }
.cs__ok h2 { margin: 0 0 var(--lf-space-2); font: var(--lf-fw-bold) var(--lf-fs-lg) var(--lf-font-sans); color: var(--lf-grey-dark); }
:root.theme-dark .cs__ok h2 { color: var(--lf-text); }
.cs__ok p { margin: 0; font-size: var(--lf-fs-sm); line-height: var(--lf-lh); color: var(--lf-text-muted); }
.cs__ok-mail { color: var(--lf-orange-ink); font-weight: var(--lf-fw-medium); }

/* ---- Footer ----------------------------------------------------------- */
.app-footer {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--lf-space-2) var(--lf-space-4);
  padding: var(--lf-space-4) clamp(var(--lf-space-4), 5vw, var(--lf-space-7));
  border-top: 1px solid var(--lf-border);
  font-size: var(--lf-fs-xs); color: var(--lf-text-muted);
}
.app-footer a { color: var(--lf-text-muted); text-decoration: none; }
.app-footer a:hover { color: var(--lf-orange-ink); text-decoration: underline; text-underline-offset: 2px; }
.app-footer__dot { color: var(--lf-border); }
.app-footer__home { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
@media (max-width: 560px) { .app-footer__home { margin-left: 0; } }

/* Global link fallback */
a { color: var(--lf-orange-ink); }
a:hover { color: var(--lf-orange-dark); }