:root {
  --page-max: 1360px;
  --gutter: clamp(1.5rem, 8vw, 8rem);
  --side: max(var(--gutter), calc((100% - var(--page-max)) / 2),
              env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

nav {
  border-image: linear-gradient(90deg, transparent, rgba(116, 68, 208, 0.55) 50%, transparent) 1;
}
@media (min-width: 981px) {
  nav { padding-inline: var(--side) !important; }
}
footer,
main > section,
main .page-hero, main .partners-content, main .team-content, main .blog-content,
main .legal-content, main .controls, main .commands-area,
main .back-link-row, main .profile-wrap, main .profile-state-wrap {
  padding-inline: var(--side) !important;
}
main .divider { margin-inline: var(--side) !important; }

@media (min-width: 1800px) { html { font-size: 112.5%; } :root { --page-max: 1520px; } }
@media (min-width: 2400px) { html { font-size: 125%; }   :root { --page-max: 1760px; } }

@media (min-width: 1200px) {
  .hero-sub { max-width: 560px; font-size: 1.12rem; }
  .section-desc { max-width: 620px; }
  .dash-preview-wrap, .dash-cta { max-width: 1180px; margin-inline: auto; }
  .features-grid { gap: 1.5rem; }
}
@media (min-width: 1600px) {
  h1.hero-title { font-size: clamp(9.5rem, 9vw, 12rem); }
}

@media (min-width: 641px) and (max-width: 980px) {
  nav .nav-toggle { display: flex; }
  nav .nav-links {
    position: fixed; top: 64px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--nav-bg-2);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    max-height: 0; overflow-y: hidden; opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease;
  }
  nav .nav-links.open {
    max-height: calc(100vh - 64px); overflow-y: auto; opacity: 1;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  nav .nav-links li { width: 100%; }
  nav .nav-links a {
    display: block;
    padding: 1rem clamp(1.5rem, 5vw, 4rem);
    border-bottom: 1px solid var(--border);
  }
  nav .nav-links a.nav-cta,
  nav .nav-links a.nav-dashboard {
    display: inline-flex; justify-content: center; text-align: center;
    margin: 0.85rem clamp(1.5rem, 5vw, 4rem);
    padding: 0.85rem 1rem;
    width: calc(100% - 2 * clamp(1.5rem, 5vw, 4rem));
  }
  nav .nav-links a.nav-cta { border-bottom: none; }
}

html { scroll-padding-top: 84px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red-glow); outline-offset: 3px; border-radius: 4px; }

#home { min-height: 100svh; }

#home::before {
  content: '';
  position: absolute; inset: 8% 12%;
  background: radial-gradient(ellipse at center, rgba(116, 68, 208, 0.16), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}
[data-theme="light"] #home::before {
  background: radial-gradient(ellipse at center, rgba(110, 61, 179, 0.09), transparent 65%);
}

.section-label, .section-title, .section-desc,
.page-hero, .page-hero .page-meta, .page-hero .legal-meta {
  text-align: center;
}
.section-desc { margin-inline: auto; }

.dash-tabs { display: flex; width: fit-content; max-width: 100%; margin-inline: auto; }
.dash-preview-wrap, .dash-cta, .faq-list,
.partners-intro, .partners-grid, .blog-state, .legal-body {
  margin-inline: auto;
}
.faq-list { width: 100%; }
.lang-switch { width: fit-content; margin-inline: auto; }

footer {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  gap: 1.25rem !important;
}
footer .footer-links { justify-content: center; flex-wrap: wrap; gap: 0.4rem 1.75rem; }
footer .footer-copy { width: 100%; }

main .dash-tabs { display: flex; width: fit-content; max-width: 100%; margin-inline: auto; }
main .dash-preview-wrap, main .dash-cta, main .faq-list,
main .partners-intro, main .partners-grid, main .blog-state, main .legal-body {
  margin-inline: auto;
}
main .section-label, main .section-title, main .section-desc { text-align: center; }
main .section-desc { margin-inline: auto; }
main .lang-switch { width: fit-content; margin-inline: auto; }
main .page-hero, main .page-hero .page-meta, main .page-hero .legal-meta { text-align: center; }

main .section-label {
  display: flex; align-items: center; justify-content: center; gap: 0.9rem;
}
main .section-label::before,
main .section-label::after {
  content: ''; height: 1px; width: clamp(24px, 6vw, 64px);
  background: linear-gradient(90deg, transparent, var(--red-glow));
  opacity: 0.7;
}
main .section-label::after { transform: scaleX(-1); }

main > section:not(#home):not(.marquee-section) {
  background: linear-gradient(90deg, transparent, var(--border) 50%, transparent) top center / min(70%, 900px) 1px no-repeat;
}

main .btn-primary, main .btn-ghost, nav .nav-cta {
  position: relative; overflow: hidden; isolation: isolate;
}
main .btn-primary::after, nav .nav-cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}
@media (hover: hover) and (pointer: fine) {
  main .btn-primary:hover::after, nav .nav-cta:hover::after { transform: translateX(120%); }
  main .btn-primary:hover { box-shadow: 0 0 34px rgba(148, 104, 242, 0.5); transform: translateY(-2px); }
  main .btn-ghost:hover { border-color: var(--red-glow); box-shadow: 0 0 22px rgba(148, 104, 242, 0.18); transform: translateY(-2px); }

  main .feature-card:hover, main .partner-card:hover, main .team-card:hover,
  main .blog-card:hover, main .cmd-card:hover {
    border-color: rgba(148, 104, 242, 0.55);
    box-shadow: 0 14px 40px -14px rgba(116, 68, 208, 0.45);
  }
}

main .dash-preview-frame {
  box-shadow: 0 30px 80px -30px rgba(116, 68, 208, 0.45), 0 0 0 1px var(--border);
}
main .final-cta-card {
  box-shadow: 0 0 80px -20px rgba(116, 68, 208, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

main .faq-item[open] { border-color: rgba(148, 104, 242, 0.45); }

html { scrollbar-width: thin; scrollbar-color: var(--red) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

@media (hover: none) and (pointer: coarse) {
  main .btn-primary, main .btn-ghost, nav .nav-cta, nav .nav-dashboard,
  main .partner-btn, main .dash-tab, main .dash-cta-btn, .theme-switch {
    transition: transform 0.12s ease, box-shadow 0.2s, background 0.2s, border-color 0.2s;
  }
  main .btn-primary:active, main .btn-ghost:active, nav .nav-cta:active,
  nav .nav-dashboard:active, main .partner-btn:active, main .dash-cta-btn:active {
    transform: scale(0.96);
    box-shadow: 0 0 26px rgba(148, 104, 242, 0.45);
  }
  main .feature-card:active, main .partner-card:active, main .team-card:active,
  main .blog-card:active, main .cmd-card:active {
    transform: scale(0.985);
    border-color: rgba(148, 104, 242, 0.55);
    box-shadow: 0 10px 30px -12px rgba(116, 68, 208, 0.45);
    transition: transform 0.12s ease, border-color 0.2s, box-shadow 0.2s;
  }
  nav .nav-toggle { width: 44px; height: 44px; }
  .theme-switch.theme-switch { height: 32px; width: 62px; }
  main .faq-item summary, footer .footer-links a { min-height: 44px; display: flex; align-items: center; }
  footer .footer-links a { justify-content: center; }
}

@media (max-width: 640px) {
  nav .nav-links.open { box-shadow: 0 40px 60px 100vh rgba(0, 0, 0, 0.45); }
  nav .nav-links a { font-size: 0.95rem; letter-spacing: 0.12em; }

  main .hero-btns { width: 100%; max-width: 360px; gap: 0.8rem; }
  main .hero-btns .btn-primary, main .hero-btns .btn-ghost {
    width: 100%; padding: 0.95rem 1.5rem; font-size: 0.95rem; text-align: center; border-radius: 10px;
  }
  .hero-sub { font-size: 1.02rem; }
  #home { gap: 1.5rem; padding-top: 96px; }

  main > section { padding-block: 72px 56px; }
  #features { padding-top: 72px; }
  main .section-desc { margin-bottom: 2rem; }
  main .section-label::before, main .section-label::after { width: 22px; }

  main .feature-card { padding: 1.5rem 1.4rem 1.3rem; border-radius: 14px; }
  .features-grid { gap: 0.9rem; }

  main .dash-tabs { width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  main .dash-tabs::-webkit-scrollbar { display: none; }
  main .dash-tab { flex: 1 0 auto; white-space: nowrap; }

  main .dash-preview-frame { border-radius: 14px; }

  footer { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)) !important; }
  main .final-cta-card { border-radius: 18px; }
}

nav .nav-links.open { box-shadow: none !important; }
nav::before {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
@media (max-width: 980px) {
  nav:has(.nav-links.open)::before { opacity: 1; }
  nav .nav-links a { text-align: center; }
  nav .nav-links a.nav-cta, nav .nav-links a.nav-dashboard { text-align: center; }
  nav .nav-links li:last-child a { margin-bottom: 0.25rem; }
}

.theme-switch::after {
  content: ''; position: absolute;
  top: 50%; margin-top: -11px;
  left: calc(100% - 25px);
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(145deg, var(--red-glow), var(--red));
  box-shadow: 0 0 10px rgba(148, 104, 242, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: left 0.35s cubic-bezier(0.65, 0.05, 0.36, 1);
  pointer-events: none;
}
[data-theme="light"] .theme-switch::after { left: 3px; }
.theme-switch .ts-icon { z-index: 1; }
:root:not([data-theme="light"]) .theme-switch .ts-moon,
:root[data-theme="light"] .theme-switch .ts-sun { color: #fff; opacity: 1; }

/* LUCWORK: Logo-Varianten je nach Theme (dunkle Linien waeren auf dunklem Grund unsichtbar) */
.logo-light { display: none !important; }
[data-theme="light"] .logo-dark { display: none !important; }
[data-theme="light"] .logo-light { display: block !important; }
[data-theme="light"] .nav-logo img { filter: none; }

/* LUCWORK: Primaer-Buttons mit Lila->Blau-Verlauf wie im Logo */
:root { --indigo: #3d5bd9; }
[data-theme="light"] { --indigo: #2f4bc4; }
.btn-primary, nav .nav-cta, a.nav-cta {
  background: linear-gradient(135deg, var(--red-glow) 0%, var(--red) 55%, var(--indigo) 130%) !important;
}
.btn-primary:hover, nav .nav-cta:hover, a.nav-cta:hover {
  background: linear-gradient(135deg, var(--red-glow) 0%, var(--red-glow) 40%, var(--indigo) 120%) !important;
}