/* SuiteUltimate Web DS Preview — MARKANT anders als Live (Vergleichstest) */
/* Live = technischer Cyber-Glow · Preview = ruhiges Premium (Personio-nah) */

:root {
  --su-bg: #F4F6F9;
  --su-surface: #FFFFFF;
  --su-surface-2: #EEF1F6;
  --su-line: #E3E8EF;
  --su-text: #0B1220;
  --su-text-secondary: #5B6575;
  --su-radius-md: 12px;
  --su-radius-lg: 18px;
  --su-radius-xl: 24px;
  --su-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px -6px rgba(15,23,42,.08);
  --su-shadow-md: 0 8px 28px -10px rgba(15,23,42,.12);
  --su-shadow-lg: 0 20px 48px -16px rgba(15,23,42,.14);
  --su-shadow-hover: 0 12px 32px -10px rgba(15,23,42,.14);
  --su-gradient-text: linear-gradient(115deg, #0F3D8C 0%, #5B4BC9 100%);
  --su-gradient-cta: linear-gradient(135deg, #165DCC 0%, #3B5BDB 100%);
  --theme-bg: #F4F6F9;
  --theme-surface: #FFFFFF;
  --theme-border: #E3E8EF;
  --theme-header: rgba(244,246,249,.92);
  --theme-menu: #FFFFFF;
  --theme-grid: transparent;
  --theme-aurora-cyan: transparent;
  --theme-aurora-violet: transparent;
  --theme-visual: #FFFFFF;
  --theme-visual-shadow: var(--su-shadow-lg);
  --theme-hover-shadow: var(--su-shadow-hover);
  --theme-button-shadow: 0 6px 20px -6px rgba(22,93,204,.35);
  --theme-button-hover: 0 10px 28px -6px rgba(22,93,204,.4);
  --theme-closing: #EEF2F7;
  --qoon-cyan: #165DCC;
  --qoon-violet: #5B4BC9;
  --qoon-cyan-glow: rgba(22,93,204,.08);
  --qoon-text-primary: #0B1220;
  --qoon-text-secondary: #5B6575;
  --qoon-icon-glow: none;
  --theme-shadow-text: none;
}

:root[data-theme="dark"] {
  --su-bg: #0A0E17;
  --su-surface: #141A24;
  --su-surface-2: #1C2433;
  --su-line: rgba(255,255,255,.08);
  --su-text: #F1F5F9;
  --su-text-secondary: #9AA3B2;
  --su-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --su-shadow-md: 0 8px 28px -10px rgba(0,0,0,.45);
  --su-shadow-lg: 0 20px 48px -16px rgba(0,0,0,.55);
  --su-shadow-hover: 0 12px 32px -10px rgba(0,0,0,.5);
  --su-gradient-text: linear-gradient(115deg, #6BA3FF 0%, #A78BFA 100%);
  --su-gradient-cta: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
  --theme-bg: #0A0E17;
  --theme-surface: #141A24;
  --theme-border: rgba(255,255,255,.08);
  --theme-header: rgba(10,14,23,.9);
  --theme-menu: #141A24;
  --theme-aurora-cyan: transparent;
  --theme-aurora-violet: transparent;
  --theme-visual: #141A24;
  --theme-visual-shadow: var(--su-shadow-lg);
  --theme-hover-shadow: var(--su-shadow-hover);
  --theme-button-shadow: 0 6px 20px -6px rgba(59,130,246,.4);
  --theme-button-hover: 0 10px 28px -6px rgba(59,130,246,.5);
  --theme-closing: #121826;
  --qoon-cyan: #6BA3FF;
  --qoon-violet: #A78BFA;
  --qoon-cyan-glow: rgba(59,130,246,.12);
  --qoon-text-primary: #F1F5F9;
  --qoon-text-secondary: #9AA3B2;
  --qoon-icon-glow: none;
  --theme-shadow-text: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --su-bg: #0A0E17;
    --su-surface: #141A24;
    --su-surface-2: #1C2433;
    --su-line: rgba(255,255,255,.08);
    --su-text: #F1F5F9;
    --su-text-secondary: #9AA3B2;
    --theme-bg: #0A0E17;
    --theme-surface: #141A24;
    --theme-border: rgba(255,255,255,.08);
    --theme-header: rgba(10,14,23,.9);
    --theme-menu: #141A24;
    --theme-aurora-cyan: transparent;
    --theme-aurora-violet: transparent;
    --theme-visual: #141A24;
    --theme-closing: #121826;
    --qoon-cyan: #6BA3FF;
    --qoon-violet: #A78BFA;
    --qoon-cyan-glow: rgba(59,130,246,.12);
    --qoon-text-primary: #F1F5F9;
    --qoon-text-secondary: #9AA3B2;
    --qoon-icon-glow: none;
    --theme-shadow-text: none;
  }
}

/* —— Global surface —— */
body {
  background: var(--theme-bg) !important;
  color: var(--qoon-text-primary) !important;
}

/* Kill cyber grid / aurora feel */
.lp-page::before,
.lp-hero::before,
body::before {
  opacity: 0 !important;
  background: none !important;
}

/* Header: flat, solid */
.lp-header {
  background: var(--theme-header) !important;
  border-bottom: 1px solid var(--theme-border) !important;
  backdrop-filter: blur(10px) !important;
}

/* —— Hero: calmer type —— */
.lp-hero h1 {
  letter-spacing: -0.04em !important;
  font-weight: 750 !important;
}
.lp-gradient-text,
.lp-hero h1 span[class*="grad"] {
  background: var(--su-gradient-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.lp-eyebrow {
  color: var(--qoon-cyan) !important;
  background: var(--qoon-cyan-glow) !important;
  border: 1px solid color-mix(in srgb, var(--qoon-cyan) 25%, transparent) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  letter-spacing: 0.12em !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
}
.lp-eyebrow:before {
  box-shadow: none !important;
  background: var(--qoon-cyan) !important;
}

/* —— Buttons: solid blue, no neon cyan —— */
.lp-button-primary {
  background: var(--su-gradient-cta) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  border-radius: 12px !important;
  box-shadow: var(--theme-button-shadow) !important;
  border: none !important;
}
.lp-button-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: var(--theme-button-hover) !important;
}
.lp-button-ghost {
  border-radius: 12px !important;
  border-color: var(--theme-border) !important;
  background: transparent !important;
}

/* —— Cards: flat white, soft shadow, no gradient border —— */
.lp-card {
  background: var(--su-surface) !important;
  border: 1px solid var(--su-line) !important;
  border-radius: var(--su-radius-lg) !important;
  box-shadow: var(--su-shadow-sm) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 28px 24px 30px !important;
}
.lp-card:before {
  display: none !important;
  opacity: 0 !important;
}
.lp-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--su-shadow-hover) !important;
  border-color: #D0D7E2 !important;
}
:root[data-theme="dark"] .lp-card:hover {
  border-color: rgba(255,255,255,.14) !important;
}

.lp-card-icon {
  background: var(--qoon-cyan-glow) !important;
  border: 1px solid color-mix(in srgb, var(--qoon-cyan) 20%, transparent) !important;
  border-radius: 12px !important;
  filter: none !important;
}
.lp-card-icon svg {
  filter: none !important;
}

/* —— Visual / mini panels —— */
.lp-visual,
.lp-mini {
  background: var(--su-surface) !important;
  border: 1px solid var(--su-line) !important;
  border-radius: var(--su-radius-xl) !important;
  box-shadow: var(--su-shadow-md) !important;
  backdrop-filter: none !important;
}

/* —— Sections: more air —— */
.lp-section {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}
.lp-section-head h2 {
  letter-spacing: -0.03em !important;
  font-weight: 750 !important;
}

/* —— Closing: flat, no loud gradient —— */
.lp-closing {
  background: var(--theme-closing) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--su-radius-xl) !important;
  box-shadow: none !important;
}

/* —— Marquee quieter —— */
.qhf-logo-img {
  opacity: 0.55 !important;
  filter: grayscale(0.15) !important;
}
.qhf-logo-img:hover {
  opacity: 0.9 !important;
  filter: none !important;
}

/* —— Footer —— */
.lp-footer {
  border-top: 1px solid var(--theme-border) !important;
}

/* —— Preview banner (always visible difference) —— */
.ds-preview-banner {
  position: sticky;
  top: 0;
  z-index: 300;
  background: linear-gradient(90deg, #0F3D8C, #5B4BC9);
  color: #F8FAFC;
  font: 650 13px/1.4 "Plus Jakarta Sans", system-ui, sans-serif;
  padding: 12px 16px;
  text-align: center;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 20px rgba(15,61,140,.25);
}
.ds-preview-banner a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: 0 6px;
  font-weight: 700;
}
.ds-preview-banner strong {
  color: #fff;
}

/* Mega panel: cleaner white */
.lp-mega-inner {
  border-radius: 18px !important;
  box-shadow: var(--su-shadow-lg) !important;
  border-color: var(--su-line) !important;
}
.lp-mega-highlight {
  background: linear-gradient(165deg, #0F1B33 0%, #1A2540 100%) !important;
}