/* ═══════════════════════════════════════════════════════════
 * APEX fastlane - Landing Page
 *
 * Eigenes, schlankes CSS (KEIN Tailwind-CDN). Tokens spiegeln
 * das APEX-Design-System, sind aber von den App-Styles entkoppelt
 * - so kann die Landing später als eigenständiger Service ziehen.
 *
 * Aufbau:
 *   1. Design-Tokens (CSS Custom Properties)
 *   2. Reset + Base
 *   3. Utility-Klassen (Buttons, Badges)
 *   4. Layout-Bausteine: Banner, Nav, Hero, Footer, Modal
 * ═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
 * 1. TOKENS
 * ────────────────────────────────────────────── */
.apexlanding,
.apexlanding * {
  box-sizing: border-box;
}
.apexlanding {
  /* Brand */
  --lp-teal:        #0d9488;
  --lp-teal-dark:   #0b7d72;
  --lp-mint:        #5eead4;
  --lp-mint-soft:   #f0fdfa;
  --lp-amber:       #ba7517;
  --lp-red:         #a32d2d;
  --lp-red-soft:    #fee2e2;

  /* Neutrals */
  --lp-bg:          #ffffff;
  --lp-bg-soft:     #f8fffe;
  --lp-bg-page:     #f8fafc;
  --lp-text:        #0f172a;
  --lp-text-muted:  #64748b;
  --lp-text-light:  #94a3b8;
  --lp-border:      #e5e7eb;
  --lp-border-soft: #f1f5f9;

  /* Type */
  --lp-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Radii + Shadow */
  --lp-r-sm: 6px;
  --lp-r-md: 10px;
  --lp-r-lg: 16px;
  --lp-shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
  --lp-shadow-md: 0 8px 24px rgba(15,23,42,0.08);
  --lp-shadow-lg: 0 24px 60px rgba(15,23,42,0.12);

  /* Layout */
  --lp-max-width: 1200px;
  --lp-gutter: 24px;
  /* Einheitliches vertikales Section-Padding. Wird über die ganze Landing
     konsistent angewendet - keine ad-hoc Pixelwerte mehr pro Sektion.
     Mobile-Override unten. 64px ist der schlanke "modern landing"-Wert -
     gibt zwischen zwei Sektionen 128px Atem, ohne dass die Seite hampelig
     wird. Tight-Variante ist die Hälfte für Übergangs-Zonen. */
  --lp-section-y: 64px;
  --lp-section-y-tight: 32px;

  /* Type */
  font-family: var(--lp-font);
  color: var(--lp-text);
  background: var(--lp-bg);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ──────────────────────────────────────────────
 * 2. RESET + BASE
 * ────────────────────────────────────────────── */
.apexlanding body,
body.apexlanding {
  margin: 0;
  /* Safety: jedes absolut-positionierte Dekor-Element (Glows, Floats)
     ist zwar in seinem Container per overflow:hidden gefangen - aber
     wenn doch mal was uebersteht, soll die Seite keine horizontale
     Scrollbar bekommen, weil das auf Mobile sofort haesslich wird. */
  overflow-x: hidden;
  /* Background matched den Footer (--lp-bg-page) damit bisher weiss
     durchblitzende Mini-Spalten und der mobile padding-bottom-Bereich
     unter dem Footer optisch nahtlos sind. main bekommt unten weiss,
     damit die Content-Sections nicht ungewollt grau werden. */
  background: var(--lp-bg-page);
}
.apexlanding main { background: var(--lp-bg); }
.apexlanding main:focus { outline: none; } /* nur fuer programmatisches Skip-Link-Target */

/* Skip-Link fuer Tastatur-Nutzer: erstes Element auf der Seite, unsichtbar
   positioniert ueber dem oberen Rand. Sobald Tab fokussiert, schiebt es
   sich in den Viewport - WCAG 2.1 SC 2.4.1 Bypass Blocks. */
.apexlanding .lp-skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  padding: 12px 18px;
  background: var(--lp-teal);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--lp-r-md) 0;
  transform: translateY(-110%);
  transition: transform .15s ease;
}
.apexlanding .lp-skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--lp-mint);
  outline-offset: 2px;
}

/* Global Focus-Visible: einheitlicher Teal-Ring fuer Tastatur-Fokus.
   :focus-visible nur bei Keyboard-Navigation, NICHT bei Maus-Click -
   so leiden Maus-User nicht unter haesslichen Rings. */
.apexlanding a:focus-visible,
.apexlanding button:focus-visible,
.apexlanding [role="button"]:focus-visible,
.apexlanding input:focus-visible,
.apexlanding select:focus-visible,
.apexlanding textarea:focus-visible,
.apexlanding summary:focus-visible {
  outline: 2px solid var(--lp-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Globale prefers-reduced-motion Regel: alle Transitions/Animations auf
   minimal reduzieren. Sektion-spezifische @media-Blocks gibt es schon,
   aber dieser fangt Edge-Cases ab (Hover-Transforms, will-change, etc.). */
@media (prefers-reduced-motion: reduce) {
  .apexlanding *,
  .apexlanding *::before,
  .apexlanding *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.apexlanding h1,
.apexlanding h2,
.apexlanding h3,
.apexlanding h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.apexlanding p { margin: 0; }
.apexlanding a { color: var(--lp-teal); text-decoration: none; }
.apexlanding a:hover { color: var(--lp-teal-dark); }
.apexlanding img { max-width: 100%; height: auto; display: block; }
.apexlanding button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
}
.apexlanding ul { list-style: none; padding: 0; margin: 0; }
.apexlanding [data-lucide] { width: 18px; height: 18px; flex-shrink: 0; }

/* Skip-Link für Tastatur-Nutzer */
.apexlanding .lp-skip {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.apexlanding .lp-skip:focus {
  position: fixed; top: 8px; left: 8px;
  width: auto; height: auto;
  padding: 8px 12px; background: var(--lp-text); color: #fff;
  border-radius: var(--lp-r-sm); z-index: 9999;
}

/* ──────────────────────────────────────────────
 * 3. UTILITY-KLASSEN: Buttons, Badges, Container
 * ────────────────────────────────────────────── */
.apexlanding .lp-container {
  width: 100%;
  max-width: var(--lp-max-width);
  margin: 0 auto;
  padding: 0 var(--lp-gutter);
}

.apexlanding .lp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: var(--lp-r-md);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
  white-space: nowrap;
  min-height: 44px;          /* Touch-Target */
}
.apexlanding .lp-btn-lg {
  padding: 14px 24px;
  font-size: 16px;
  min-height: 52px;
}
.apexlanding .lp-btn-block { width: 100%; justify-content: center; }
/* ONB-2 Patch 8 (v9.48.9): hidden-Attribut auf .lp-btn richtig respektieren.
   Default-CSS oben hat `display: inline-flex`, was das HTML-hidden-Attribut
   ueberschreibt. Im Register-Wizard wollen wir Next-/Submit-Button per
   `hidden`-Attr toggeln — also explizit display:none erzwingen. */
.apexlanding .lp-btn[hidden] { display: none !important; }
.apexlanding .lp-btn-primary {
  background: var(--lp-teal);
  color: #fff;
  box-shadow: 0 4px 14px rgba(13,148,136,0.30);
}
.apexlanding .lp-btn-primary:hover {
  background: var(--lp-teal-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13,148,136,0.35);
}
.apexlanding .lp-btn-primary:active { transform: translateY(0); }
.apexlanding .lp-btn-ghost {
  background: transparent;
  color: var(--lp-text);
  border: 1.5px solid var(--lp-border);
}
.apexlanding .lp-btn-ghost:hover {
  background: var(--lp-bg-soft);
  border-color: var(--lp-teal);
  color: var(--lp-teal);
}

.apexlanding .lp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}
.apexlanding .lp-badge-teal {
  background: rgba(13,148,136,0.10);
  color: var(--lp-teal-dark);
}
.apexlanding .lp-badge-mint {
  background: rgba(94,234,212,0.18);
  color: #047857;
}
.apexlanding .lp-badge-red {
  background: rgba(163,45,45,0.10);
  color: var(--lp-red);
}
.apexlanding .lp-accent {
  background: linear-gradient(90deg, var(--lp-teal) 0%, var(--lp-mint) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ──────────────────────────────────────────────
 * 4. URGENCY-BANNER
 * ────────────────────────────────────────────── */
.apexlanding .lp-banner {
  background: var(--lp-text);
  color: #fff;
  font-size: 13px;
  text-align: center;
}
.apexlanding .lp-banner-inner {
  max-width: var(--lp-max-width);
  margin: 0 auto;
  padding: 9px var(--lp-gutter);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.apexlanding .lp-banner [data-lucide] { width: 14px; height: 14px; color: var(--lp-mint); }

/* Banner-Text-Varianten: Desktop = lange Version, Mobile = kurze Version.
   So bleibt der Banner auf engen Viewports einzeilig statt umzubrechen. */
.apexlanding .lp-banner-text-mobile { display: none; }
@media (max-width: 600px) {
  .apexlanding .lp-banner-text-desktop { display: none; }
  .apexlanding .lp-banner-text-mobile  { display: inline; }
}

/* ──────────────────────────────────────────────
 * 5. NAVIGATION (sticky)
 * ────────────────────────────────────────────── */
.apexlanding .lp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--lp-border);
}
.apexlanding .lp-nav-inner {
  max-width: var(--lp-max-width);
  margin: 0 auto;
  padding: 14px var(--lp-gutter);
  display: flex; align-items: center; gap: 24px;
}

/* Logo - entspricht dem Sidebar-Branding der App: Gradient-Square mit
   weißem Zap-Icon, daneben "APEX fastlane" mit Mint-Akzent auf "fastlane". */
.apexlanding .lp-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--lp-text);
  letter-spacing: -0.01em;
}
.apexlanding .lp-logo:hover { color: var(--lp-text); }
.apexlanding .lp-logo-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(13,148,136,0.25);
}
.apexlanding .lp-logo-mark [data-lucide] {
  width: 18px; height: 18px;
  color: #fff;
  stroke-width: 2.5;
}
.apexlanding .lp-logo-word { line-height: 1; white-space: nowrap; }
.apexlanding .lp-logo-accent { color: var(--lp-teal); }

.apexlanding .lp-nav-links {
  display: flex; align-items: center; gap: 24px;
  margin-left: 24px;
}
.apexlanding .lp-nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--lp-text-muted);
  padding: 6px 0;
  position: relative;
}
.apexlanding .lp-nav-link:hover { color: var(--lp-text); }
.apexlanding .lp-nav-link::after {
  content: '';
  position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: var(--lp-teal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.apexlanding .lp-nav-link:hover::after { transform: scaleX(1); }

.apexlanding .lp-nav-actions {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
}
.apexlanding .lp-nav-login {
  font-size: 14px;
  font-weight: 500;
  color: var(--lp-text-muted);
  padding: 8px 14px;
  border-radius: var(--lp-r-md);
  transition: color .15s ease, background-color .15s ease;
  min-height: 40px;
}
.apexlanding .lp-nav-login:hover {
  color: var(--lp-text);
  background: var(--lp-bg-soft);
}

.apexlanding .lp-nav-burger {
  display: none;
  /* 44x44 Touch-Target (WCAG/Apple HIG-Minimum). 40 war zu eng,
     vor allem mit Daumen-Tap. */
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  border-radius: var(--lp-r-sm);
}
.apexlanding .lp-nav-burger span {
  display: block; width: 22px; height: 2px;
  background: var(--lp-text); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.apexlanding .lp-nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.apexlanding .lp-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.apexlanding .lp-nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.apexlanding .lp-mobile-menu {
  display: none;
  flex-direction: column;
  padding: 12px var(--lp-gutter) 20px;
  border-top: 1px solid var(--lp-border);
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(15,23,42,0.10);
}
.apexlanding .lp-mobile-menu[hidden] { display: none; }

/* Backdrop hinter dem geoeffneten Mobile-Menue. body bekommt
   .is-menu-open vom JS gesetzt; das Pseudo-Element liegt fixed ueber
   der gesamten Seite (z-index unter der sticky Nav z=100), damit klar
   erkennbar ist, dass der Hintergrund "schlaeft" waehrend das Menue
   offen ist. Gleichzeitig wird der Body-Scroll gesperrt. */
body.apexlanding.is-menu-open { overflow: hidden; }
body.apexlanding.is-menu-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 90;
  pointer-events: none;
}
.apexlanding .lp-mobile-link {
  display: block;
  padding: 14px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--lp-text);
  text-align: left;
  border-bottom: 1px solid var(--lp-border-soft);
  width: 100%;
}
.apexlanding .lp-mobile-link-login { color: var(--lp-text-muted); }
.apexlanding .lp-mobile-cta { margin-top: 14px; justify-content: center; }

/* Sticky mobile CTA - am unteren Bildschirmrand auf Smartphones */
.apexlanding .lp-sticky-cta {
  display: none;
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 95;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(13,148,136,0.40);
}

@media (max-width: 880px) {
  .apexlanding .lp-nav-links,
  .apexlanding .lp-nav-login,
  .apexlanding .lp-nav-cta { display: none; }
  .apexlanding .lp-nav-burger { display: inline-flex; }
  .apexlanding .lp-mobile-menu:not([hidden]) { display: flex; }
  .apexlanding .lp-sticky-cta { display: inline-flex; }
  /* Atem-Raum fuer die Sticky-CTA uebernimmt der Footer ueber sein eigenes
     padding-bottom (siehe Footer-Block). body-padding-bottom wuerde sonst
     einen weissen Streifen unter dem Footer erzeugen (Body-Background
     ist die Wurzel des Problems). */
}

/* ──────────────────────────────────────────────
 * 6. HERO
 * ────────────────────────────────────────────── */
.apexlanding .lp-hero {
  position: relative;
  padding: 64px 0 var(--lp-section-y);
  background:
    radial-gradient(circle at 80% -10%, rgba(94,234,212,0.18) 0%, transparent 50%),
    radial-gradient(circle at 0% 30%, rgba(13,148,136,0.08) 0%, transparent 40%),
    linear-gradient(180deg, var(--lp-mint-soft) 0%, var(--lp-bg) 60%);
  overflow: hidden;
}
.apexlanding .lp-hero-inner {
  max-width: var(--lp-max-width);
  margin: 0 auto;
  padding: 0 var(--lp-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.apexlanding .lp-hero-headline {
  font-size: clamp(34px, 5.5vw, 60px);
  line-height: 1.1;
  margin-top: 18px;
  letter-spacing: -0.03em;
}
.apexlanding .lp-hero-subline {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--lp-text-muted);
  margin-top: 18px;
  max-width: 540px;
}
.apexlanding .lp-hero-ctas {
  display: flex; gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.apexlanding .lp-trust-row {
  display: flex; gap: 24px;
  margin-top: 26px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-trust-row li {
  display: inline-flex; align-items: center; gap: 6px;
}
.apexlanding .lp-trust-row [data-lucide] {
  width: 14px; height: 14px;
  color: var(--lp-teal);
  stroke-width: 3;
}

/* ── Pseudo-Screenshot Mockup ── */
.apexlanding .lp-hero-mockup {
  position: relative;
  perspective: 1400px;
}
.apexlanding .lp-mockup-frame {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--lp-border);
  box-shadow: var(--lp-shadow-lg);
  overflow: hidden;
  transform: rotate(0.4deg);
}
.apexlanding .lp-mockup-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #f1f5f9;
  border-bottom: 1px solid var(--lp-border);
}
.apexlanding .lp-mockup-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #cbd5e1;
}
.apexlanding .lp-mockup-dot:nth-child(1) { background: #f87171; }
.apexlanding .lp-mockup-dot:nth-child(2) { background: #fbbf24; }
.apexlanding .lp-mockup-dot:nth-child(3) { background: #34d399; }
.apexlanding .lp-mockup-url {
  margin-left: 12px;
  font-size: 12px;
  color: var(--lp-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.apexlanding .lp-mockup-body {
  padding: 18px 20px 22px;
  background: #fff;
}
.apexlanding .lp-mockup-product {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.apexlanding .lp-mockup-image {
  width: 56px; height: 56px;
  border-radius: 10px;
  background: var(--lp-bg-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--lp-teal);
}
.apexlanding .lp-mockup-image [data-lucide] { width: 28px; height: 28px; }
.apexlanding .lp-mockup-product-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--lp-text);
}
.apexlanding .lp-mockup-section {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-text-muted);
  padding: 4px 10px;
  background: var(--lp-bg-page);
  border-radius: 9999px;
  margin-bottom: 10px;
}
.apexlanding .lp-mockup-section [data-lucide] {
  width: 12px; height: 12px;
  color: var(--lp-teal);
  stroke-width: 2.5;
}

.apexlanding .lp-mockup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.apexlanding .lp-mockup-card {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
}
.apexlanding .lp-mockup-before { background: var(--lp-red-soft); border-color: rgba(163,45,45,0.20); }
.apexlanding .lp-mockup-after  { background: rgba(94,234,212,0.10); border-color: rgba(13,148,136,0.30); }
.apexlanding .lp-mockup-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
  gap: 6px;
}
.apexlanding .lp-mockup-card-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--lp-text-muted);
}
.apexlanding .lp-mockup-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 9999px;
  font-weight: 600;
}
.apexlanding .lp-mockup-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--lp-text);
}
.apexlanding .lp-mockup-before .lp-mockup-text { color: #6b1f1f; }

.apexlanding .lp-mockup-float {
  position: absolute;
  /* z-index ueber mockup-frame (z:1) und hero-image-backdrop (z:0),
     damit die schwebenden Trust-Badges immer ganz vorne sind. */
  z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border-radius: 9999px;
  box-shadow: var(--lp-shadow-md);
  font-size: 13px;
  font-weight: 600;
}
.apexlanding .lp-mockup-float [data-lucide] {
  width: 16px; height: 16px;
  color: var(--lp-teal);
}
.apexlanding .lp-mockup-float strong { color: var(--lp-teal-dark); }
.apexlanding .lp-mockup-float-time {
  top: -14px; right: -10px;
  transform: rotate(2deg);
}
.apexlanding .lp-mockup-float-cost {
  bottom: -16px; left: -10px;
  transform: rotate(-2deg);
}
.apexlanding .lp-mockup-float-cost s { color: var(--lp-text-light); margin: 0 2px; }

@media (max-width: 980px) {
  .apexlanding .lp-hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* display:contents loest den Text-Container im Grid auf, sodass alle
     Hero-Bausteine direkte Grid-Items werden und ueber `order` einzeln
     positionierbar sind - damit das Mockup zwischen Subline und CTAs
     rutschen kann, ohne die DOM-Reihenfolge zu aendern. */
  .apexlanding .lp-hero-text { display: contents; }
  .apexlanding .lp-hero-text > .lp-badge { order: 1; }
  .apexlanding .lp-hero-headline           { order: 2; }
  .apexlanding .lp-hero-subline            { order: 3; }
  .apexlanding .lp-hero-mockup {
    order: 4;
    max-width: 540px;
    margin: 0 auto 16px;
    width: 100%;
  }
  /* CTAs + Trust-Badges zentrieren, damit sie zur Mitte des Mockups passen
     und nicht visuell links abdriften. */
  .apexlanding .lp-hero-ctas {
    order: 5;
    margin-top: 20px;
    justify-content: center;
  }
  .apexlanding .lp-trust-row {
    order: 6;
    margin-top: 8px;
    justify-content: center;
  }
}
@media (max-width: 600px) {
  .apexlanding .lp-hero { padding: 40px 0 72px; }
  .apexlanding .lp-mockup-grid { grid-template-columns: 1fr; }
  .apexlanding .lp-mockup-float-time { right: -6px; top: -10px; font-size: 12px; padding: 6px 12px; }
  .apexlanding .lp-mockup-float-cost { left: -6px; bottom: -12px; font-size: 12px; padding: 6px 12px; }
  /* Trust-Badges enger zusammen, damit sie nicht so verloren auseinanderfallen.
     Kleinerer Vertikal-Gap fuer den Umbruch in die zweite Zeile. */
  .apexlanding .lp-trust-row { gap: 8px 16px; }
  /* Etwas mehr Luft zwischen Mockup und CTA - der Mockup hat unten Float-Badges
     die sonst zu nah am Button hängen. */
  .apexlanding .lp-hero-mockup { margin-bottom: 24px; }
}

/* Placeholder-Anker für kommende Sektionen - keine Höhe, kein Inhalt */
.apexlanding .lp-coming-soon { height: 0; }

/* ──────────────────────────────────────────────
 * Reveal-on-Scroll
 *
 * Karten und Schritte starten leicht versetzt und unsichtbar; sobald sie
 * ins Viewport scrollen, fadet/translated der IntersectionObserver sie
 * sanft ein. Cascade über CSS-Selektor-Index, damit das ohne JS-Magie
 * pro Element funktioniert.
 *
 * `prefers-reduced-motion` schaltet die Animation komplett aus -
 * Pflicht für Accessibility.
 * ────────────────────────────────────────────── */
.apexlanding .lp-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.apexlanding .lp-reveal.is-visible,
.apexlanding .lp-reveal-group.is-visible .lp-reveal {
  opacity: 1;
  transform: none;
}
/* Cascade-Delays für Karten innerhalb einer Gruppe */
.apexlanding .lp-reveal-group.is-visible .lp-reveal:nth-child(2) { transition-delay: .10s; }
.apexlanding .lp-reveal-group.is-visible .lp-reveal:nth-child(3) { transition-delay: .20s; }
.apexlanding .lp-reveal-group.is-visible .lp-reveal:nth-child(4) { transition-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
  .apexlanding .lp-reveal {
    opacity: 1; transform: none; transition: none;
  }
}

/* ──────────────────────────────────────────────
 * Section-Layout (geteilt von allen folgenden Sektionen)
 *
 * Konsistenz-Regel: JEDE Section hat symmetrisches Top/Bottom-Padding
 * (--lp-section-y). Keine `+`-Cancellation, keine ad-hoc Overrides.
 * Ausnahme: die Pain->How Übergangs-Zone bekommt halben Wert, weil dort
 * der Transition-Pfeil als visuelle Brücke wirkt und Dead-Space stört.
 * ────────────────────────────────────────────── */
.apexlanding .lp-section {
  padding: var(--lp-section-y) 0;
  position: relative;
}
/* Übergangs-Zone Pains -> How: beide Seiten haben halbe Section-Y */
.apexlanding .lp-section.lp-pains { padding-bottom: var(--lp-section-y-tight); }
.apexlanding .lp-section.lp-pains + .lp-section.lp-how { padding-top: var(--lp-section-y-tight); }
.apexlanding .lp-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.apexlanding .lp-section-head-compact { margin-bottom: 32px; }
.apexlanding .lp-section-title {
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: -0.025em;
}
.apexlanding .lp-section-title-sm {
  font-size: clamp(20px, 2.4vw, 26px);
}
/* Zwei-zeilige Headline mit garantiertem Linebreak zwischen Block-Spans.
   Verhindert hässliche Auto-Breaks wie "... Das | wissen wir." */
.apexlanding .lp-section-title.lp-title-stack { display: flex; flex-direction: column; gap: 4px; }
.apexlanding .lp-title-line { display: block; }
.apexlanding .lp-section-sub {
  margin-top: 12px;
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--lp-text-muted);
}
.apexlanding .lp-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-teal);
  margin-bottom: 12px;
}
@media (max-width: 720px) {
  /* Mobile: nochmal kompakter, ein einziger Override an der Variable. */
  .apexlanding { --lp-section-y: 48px; --lp-section-y-tight: 24px; }
  .apexlanding .lp-section-head { margin-bottom: 32px; }
}

/* ──────────────────────────────────────────────
 * Sektion 3: PAIN POINTS
 * ────────────────────────────────────────────── */
.apexlanding .lp-pains {
  background: linear-gradient(180deg, var(--lp-bg) 0%, #f7f8fa 100%);
}
.apexlanding .lp-pains .lp-section-title .lp-accent { display: inline; }
/* Pain-Grid: bewusst asymmetrisches Bento-Layout statt 3-Spalten-Template.
   Card 1 (Stunden) ist die zugaenglichste Pain - bekommt prominentere
   Platzierung links als "Hero-Pain" mit Math-Breakdown. Cards 2+3
   stapeln rechts kompakter. Auf Mobile kollabiert das zu 1-Spalten-Stack. */
.apexlanding .lp-pains-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}
.apexlanding .lp-pains-grid > :nth-child(1) {
  grid-row: 1 / 3;
  grid-column: 1;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
}
.apexlanding .lp-pains-grid > :nth-child(2) { grid-column: 2; grid-row: 1; }
.apexlanding .lp-pains-grid > :nth-child(3) { grid-column: 2; grid-row: 2; }
.apexlanding .lp-pains-grid > :nth-child(1) .lp-pain-stat-value { font-size: 32px; }
.apexlanding .lp-pains-grid > :nth-child(1) .lp-pain-title { font-size: 20px; }

/* Math-Breakdown: konkrete Aufschluesselung warum 100h zustande kommen.
   Visuelles Format wie ein kleiner Receipt - 3 Posten + Summe + Skalierung.
   Macht die "100h"-Zahl glaubhaft und fuellt den freien Platz in Card 1. */
.apexlanding .lp-pain-breakdown {
  margin-top: auto;
  padding: 16px 18px;
  background: var(--lp-bg-soft);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.apexlanding .lp-pain-breakdown-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-pain-breakdown-title [data-lucide] {
  width: 13px;
  height: 13px;
  color: var(--lp-teal);
}
.apexlanding .lp-pain-breakdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.apexlanding .lp-pain-breakdown-list li,
.apexlanding .lp-pain-breakdown-sum,
.apexlanding .lp-pain-breakdown-scale {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13.5px;
}
.apexlanding .lp-pain-breakdown-label { color: var(--lp-text-muted); }
.apexlanding .lp-pain-breakdown-value {
  font-weight: 700;
  color: var(--lp-text);
  font-variant-numeric: tabular-nums;
}
.apexlanding .lp-pain-breakdown-sum {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--lp-border);
}
.apexlanding .lp-pain-breakdown-value.is-sum {
  color: var(--lp-text);
  font-size: 14.5px;
}
.apexlanding .lp-pain-breakdown-scale {
  margin-top: 2px;
}
.apexlanding .lp-pain-breakdown-value.is-scale {
  color: var(--lp-red);
  font-size: 15px;
}
@media (max-width: 760px) {
  .apexlanding .lp-pain-breakdown { padding: 14px 14px; }
}
.apexlanding .lp-pain-card {
  position: relative;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-lg);
  box-shadow: var(--lp-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
/* Pain-Roter Top-Akzent: 4px-Strich oben in Brand-Rot, sofortiger Wiedererkennungswert */
.apexlanding .lp-pain-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--lp-red) 0%, #d97757 100%);
  border-radius: var(--lp-r-lg) var(--lp-r-lg) 0 0;
}
.apexlanding .lp-pain-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--lp-shadow-md);
  border-color: rgba(163,45,45,0.30);
}
.apexlanding .lp-pain-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}
.apexlanding .lp-pain-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--lp-red-soft);
  color: var(--lp-red);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  flex-shrink: 0;
}
/* Sanftes rotes Glühen, das den Icon ohne Visual-Lärm hervorhebt */
.apexlanding .lp-pain-icon::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 18px;
  background: radial-gradient(circle, rgba(163,45,45,0.10), transparent 70%);
  z-index: -1;
}
.apexlanding .lp-pain-icon [data-lucide] { width: 26px; height: 26px; stroke-width: 2; }

/* Stat-Eyecatcher: groß und rechtsbündig, beziffert den Schmerz */
.apexlanding .lp-pain-stat {
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right;
  line-height: 1.05;
}
.apexlanding .lp-pain-stat-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--lp-red);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.apexlanding .lp-pain-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp-text-muted);
  margin-top: 4px;
}

.apexlanding .lp-pain-title {
  font-size: 20px;
  margin-bottom: 10px;
}
.apexlanding .lp-pain-text {
  color: var(--lp-text-muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* Transition: prägnante Lösungs-Brücke zur How-Sektion.
   Layout: Text + großer animierter Pfeil untereinander, satter Bottom-Abstand
   wird durch die nächste Sektion gepuffert (nicht durch eigenes Padding). */
.apexlanding .lp-pains-transition {
  text-align: center;
  margin: 48px 0 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--lp-text);
}
.apexlanding .lp-pains-transition [data-lucide] {
  width: 28px; height: 28px;
  color: var(--lp-teal);
  stroke-width: 2.4;
  animation: lpBounceY 1.6s ease-in-out infinite;
}
@keyframes lpBounceY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* Section-Padding wird zentral oben gesetzt (var --lp-section-y-tight für die
   Pain->How Übergangs-Zone). Kein eigener Override mehr nötig. */

@media (max-width: 880px) {
  .apexlanding .lp-pains-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    max-width: 540px;
    margin: 0 auto;
  }
  .apexlanding .lp-pains-grid > :nth-child(1) {
    grid-row: auto; grid-column: auto;
    padding: 28px;
  }
  .apexlanding .lp-pains-grid > :nth-child(2),
  .apexlanding .lp-pains-grid > :nth-child(3) {
    grid-row: auto; grid-column: auto;
  }
  .apexlanding .lp-pains-grid > :nth-child(1) .lp-pain-stat-value { font-size: 28px; }
  .apexlanding .lp-pain-stat-value { font-size: 22px; }
}

/* ──────────────────────────────────────────────
 * Sektion 4: TRUST-BADGES
 * ────────────────────────────────────────────── */
.apexlanding .lp-trust-section {
  /* Heller, leicht angedeuteter Mint-Wash statt voller Mint-Hintergrund -
     so kommen die Gradient-Icons besser zur Geltung.
     Vertikales Padding kommt zentral aus --lp-section-y. */
  background:
    radial-gradient(circle at 50% 0%, rgba(94,234,212,0.14) 0%, transparent 60%),
    var(--lp-bg);
  border-top: 1px solid rgba(13,148,136,0.08);
  border-bottom: 1px solid rgba(13,148,136,0.08);
}

/* 2x2-Grid mit substantielleren Cards. Jede Card hat Kopf (Icon + Titel) und
   eine Proof-Liste darunter - keine Marketing-Floskeln mehr, sondern konkrete
   Belege, die der Leser scannen kann. */
/* Trust-Grid: echtes Bento statt 2x2-Template. Row 1: SP-API wider + DSGVO
   schmaler. Row 2: Hosting schmaler + ASIN-Booster wider. Wechsel im
   Verhaeltnis bricht das KI-typische "4 identische Boxen" Pattern. */
.apexlanding .lp-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
}
.apexlanding .lp-trust-grid > :nth-child(1) { grid-column: span 2; }
.apexlanding .lp-trust-grid > :nth-child(2) { grid-column: span 1; }
.apexlanding .lp-trust-grid > :nth-child(3) { grid-column: span 1; }
.apexlanding .lp-trust-grid > :nth-child(4) { grid-column: span 2; }

/* Card-Stil B (Accent): Mint-Soft-Background, kein harter Border,
   groesseres Border-Radius. Statt der "weisse Box mit duennem Border"
   Standard-Karte aus dem KI-Template. */
.apexlanding .lp-trust-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 32px 32px;
  background: var(--lp-bg);
  border: 1px solid rgba(13,148,136,0.18);
  border-radius: 20px;
  box-shadow: var(--lp-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* SP-API-Logo in der oberen rechten Ecke der SP-API-Card. Dezent,
   nicht aufdringlich - zeigt einfach dass wir offizielles Amazon-Tool sind. */
.apexlanding .lp-trust-card-logo {
  position: absolute;
  top: 18px;
  right: 18px;
  height: 24px;
  width: auto;
  opacity: 0.85;
}
.apexlanding .lp-trust-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lp-shadow-md);
  border-color: rgba(13,148,136,0.40);
}
.apexlanding .lp-trust-card-head {
  display: flex; gap: 16px; align-items: flex-start;
  margin-bottom: 18px;
}
.apexlanding .lp-trust-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(13,148,136,0.28);
  transition: transform .3s ease, box-shadow .3s ease;
}
.apexlanding .lp-trust-card:hover .lp-trust-icon {
  transform: scale(1.06) rotate(-4deg);
  box-shadow: 0 10px 22px rgba(13,148,136,0.45);
}
.apexlanding .lp-trust-icon [data-lucide] { width: 26px; height: 26px; stroke-width: 2.2; }
.apexlanding .lp-trust-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.apexlanding .lp-trust-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--lp-text);
  line-height: 1.25;
}
.apexlanding .lp-trust-sub {
  font-size: 13.5px;
  color: var(--lp-text-muted);
  line-height: 1.5;
}

/* Proof-Liste: konkrete Belege als Checkmark-Bullets */
.apexlanding .lp-trust-proofs {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0; padding: 18px 0 0;
  border-top: 1px solid var(--lp-border-soft);
}
.apexlanding .lp-trust-proofs li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px;
  color: var(--lp-text-muted);
  line-height: 1.55;
}
.apexlanding .lp-trust-proofs [data-lucide] {
  width: 16px; height: 16px;
  color: var(--lp-teal);
  stroke-width: 3;
  flex-shrink: 0;
  margin-top: 2px;
}

@media (max-width: 720px) {
  /* Mobile: Bento bricht auseinander, alle Cards spannen volle Breite. */
  .apexlanding .lp-trust-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 14px;
  }
  .apexlanding .lp-trust-grid > :nth-child(1),
  .apexlanding .lp-trust-grid > :nth-child(2),
  .apexlanding .lp-trust-grid > :nth-child(3),
  .apexlanding .lp-trust-grid > :nth-child(4) {
    grid-column: auto;
  }
  .apexlanding .lp-trust-card { padding: 22px 22px; }
  .apexlanding .lp-trust-card-head { gap: 14px; margin-bottom: 16px; }
  .apexlanding .lp-trust-icon { width: 44px; height: 44px; }
  .apexlanding .lp-trust-icon [data-lucide] { width: 22px; height: 22px; }
  /* SP-API-Logo: auf Desktop sitzt es absolute oben rechts - kollidiert
     auf Mobile mit der Headline. Hier rausnehmen aus absolute und als
     Block ueber den Karten-Header stellen (sichtbar, aber ohne Overlap). */
  .apexlanding .lp-trust-card-logo {
    position: static;
    display: block;
    height: 20px;
    margin: 0 0 14px;
    opacity: 0.9;
  }
}

/* ──────────────────────────────────────────────
 * Sektion 5: SO FUNKTIONIERT'S - als "ultimative Lösung" inszeniert
 *
 * Layout-Bausteine:
 *   - Lösungs-Eyebrow + Zwei-Zeilen-Headline mit Mint-Akzent
 *   - Total-Time-Badge unter der Headline (~5 Min.)
 *   - Drei Step-Cards mit nummerierten Gradient-Kreisen
 *   - Connector-Line zwischen den Kreisen (horizontal auf Desktop,
 *     vertikal auf Mobile)
 *   - Zeit-Badge pro Step
 * ────────────────────────────────────────────── */
.apexlanding .lp-section.lp-how {
  background:
    radial-gradient(circle at 50% 0%, rgba(13,148,136,0.06) 0%, transparent 60%),
    var(--lp-bg);
  /* Top-Padding wird zentral via Übergangs-Regel oben gesteuert. */
}
.apexlanding .lp-how .lp-section-head { margin-bottom: 40px; }
.apexlanding .lp-how .lp-eyebrow { color: var(--lp-teal); }

/* Total-Time-Badge: visualisiert das "~5 Minuten"-Versprechen prominent */
.apexlanding .lp-how-total-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(13,148,136,0.30);
}
.apexlanding .lp-how-total-badge [data-lucide] {
  width: 16px; height: 16px;
  stroke-width: 2.4;
}

/* Step-Grid: 3 Spalten + Connector-Line dazwischen */
.apexlanding .lp-how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
/* Connector-Line: horizontal, hinter den Step-Number-Kreisen.
   left/right zentriert auf die äußeren Number-Kreise (1/6 vom Grid). */
.apexlanding .lp-how-steps::before {
  content: '';
  position: absolute;
  top: 30px;            /* Höhe des Number-Kreises (50% × 60px) */
  left: 16.67%; right: 16.67%;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    rgba(13,148,136,0.35) 0 6px,
    transparent 6px 14px
  );
  z-index: 0;
}
@media (max-width: 880px) {
  /* Auf Mobile wird der Connector vertikal, von oben zwischen den Kreisen */
  .apexlanding .lp-how-steps::before {
    top: 30px; bottom: 30px;
    left: calc(30px - 1px); right: auto;
    width: 2px; height: auto;
    background: repeating-linear-gradient(
      to bottom,
      rgba(13,148,136,0.35) 0 6px,
      transparent 6px 14px
    );
  }
}

.apexlanding .lp-how-step {
  position: relative;
  z-index: 1;
  padding-top: 36px;          /* Platz für den Number-Kreis oben */
}

/* Number-Kreis: zentriert über der Card, größer und prominenter.
   z-index: 2 ist nötig, weil die Card selbst position: relative hat (für ihren
   eigenen Stacking-Kontext) - ohne expliziten z-index würde der Kreis dann
   hinter der Card landen, weil sie später im DOM kommt. */
.apexlanding .lp-how-step-number {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 22px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 22px rgba(13,148,136,0.35), 0 0 0 6px rgba(255,255,255,0.95);
  letter-spacing: -0.02em;
  z-index: 2;
}

.apexlanding .lp-how-step-card {
  position: relative;
  text-align: center;
  padding: 44px 24px 28px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-lg);
  box-shadow: var(--lp-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height: 100%;
}
.apexlanding .lp-how-step:hover .lp-how-step-card {
  transform: translateY(-4px);
  box-shadow: var(--lp-shadow-md);
  border-color: rgba(13,148,136,0.30);
}
.apexlanding .lp-how-step:hover .lp-how-step-icon { transform: scale(1.05) rotate(-3deg); }

.apexlanding .lp-how-step-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--lp-mint-soft);
  color: var(--lp-teal);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  transition: transform .25s ease;
}
.apexlanding .lp-how-step-icon [data-lucide] { width: 28px; height: 28px; stroke-width: 2; }

/* Zeit-Badge pro Step */
.apexlanding .lp-how-step-duration {
  display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 14px;
  padding: 4px 10px;
  background: rgba(13,148,136,0.10);
  color: var(--lp-teal-dark);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.apexlanding .lp-how-step-duration [data-lucide] { width: 11px; height: 11px; stroke-width: 2.4; }

.apexlanding .lp-how-step-title { font-size: 19px; margin-bottom: 10px; }
.apexlanding .lp-how-step-text {
  color: var(--lp-text-muted);
  font-size: 14.5px;
  line-height: 1.65;
}
/* KI-Logo-Leiste: kompakte "Powered by"-Reihe unter den 3 Schritten.
   Trust-Signal: zeigt welche Modelle genutzt werden, ohne in den Step-Texten
   technisch zu werden. Logos sind aktuell neutrale SVG-Platzhalter, spaeter
   durch echte Brand-SVGs ersetzbar. */
.apexlanding .lp-ai-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: max-content;
  margin: 36px auto 0;
  padding: 10px 20px;
  background: #ffffff;
  border: 1px solid var(--lp-border);
  border-radius: 9999px;
  box-shadow: var(--lp-shadow-sm);
}
.apexlanding .lp-ai-logos-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-ai-logos img {
  display: block;
  height: 28px;
  width: auto;
}
.apexlanding .lp-ai-logos-brands {
  display: flex;
  align-items: center;
  gap: 18px;
}
@media (max-width: 540px) {
  /* Auf Mobile vertikal stapeln: "POWERED BY" oben, beide Logos
     nebeneinander mittig darunter. Wirkt deutlich aufgeraeumter
     als der vorherige flex-wrap, der die Logos schief untereinander
     warf. */
  .apexlanding .lp-ai-logos {
    flex-direction: column;
    gap: 10px;
    padding: 14px 20px;
    width: auto;
    max-width: calc(100% - 32px);
    border-radius: 16px;
  }
  .apexlanding .lp-ai-logos-brands {
    gap: 22px;
    justify-content: center;
  }
}

.apexlanding .lp-how-footnote {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--lp-text-muted);
  text-align: center;
}
.apexlanding .lp-how-footnote [data-lucide] { width: 16px; height: 16px; color: var(--lp-teal); flex-shrink: 0; }

@media (max-width: 540px) {
  /* Auf Mobile in Spalten-Layout: Icon oben, Text zentriert darunter -
     so bleibt der mehrzeilige Text sauber zentriert statt am Icon
     "haengend" linksbuendig zu wirken. */
  .apexlanding .lp-how-footnote {
    flex-direction: column;
    gap: 6px;
    margin-top: 24px;
    padding: 0 16px;
  }
}

@media (max-width: 880px) {
  .apexlanding .lp-how-steps {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
    gap: 40px;
  }
  /* Number-Kreis links statt oben-mittig, damit Connector vertikal passt */
  .apexlanding .lp-how-step { padding: 0 0 0 80px; }
  .apexlanding .lp-how-step-number {
    top: 0; left: 0;
    transform: none;
    width: 60px; height: 60px;
    font-size: 22px;
  }
  .apexlanding .lp-how-step-card { padding: 22px 22px; text-align: left; min-height: 60px; }
  .apexlanding .lp-how-step-icon { margin: 0 0 12px; }
}

/* ──────────────────────────────────────────────
 * Sektion 6: KOSTENLOSES TOOLKIT
 *
 * Layout: Featured Hero-Card (KI-Listing-Generator) groß oben,
 * 3 kompakte Cards (Gebührenrechner, Ads-Analyse, Weitere Tools)
 * in einer Reihe darunter. Kommuniziert klar, dass der KI-Generator
 * das Schlüssel-Tool ist - die anderen sind Companions.
 * ────────────────────────────────────────────── */
/* Tools-Section bekommt jetzt das volle weisse Default-Background,
   damit Trust (Mint) → Tools (Weiss) → Pricing (Mint) sauber alternieren
   und nicht alles in Grau verschwimmt. */
.apexlanding .lp-tools { background: var(--lp-bg); }

/* ── Featured Hero-Card: KI-Listing-Generator ── */
.apexlanding .lp-tools-hero {
  position: relative;
  display: block;
  padding: 36px 40px 32px;
  margin-bottom: 24px;
  background:
    radial-gradient(circle at 15% 0%, rgba(94,234,212,0.30) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(13,148,136,0.15) 0%, transparent 55%),
    linear-gradient(135deg, #fff 0%, #f8fffe 100%);
  border: 1.5px solid rgba(13,148,136,0.25);
  border-radius: var(--lp-r-lg);
  box-shadow: 0 12px 32px rgba(13,148,136,0.10), var(--lp-shadow-sm);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.apexlanding .lp-tools-hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(13,148,136,0.18), var(--lp-shadow-md);
  border-color: rgba(13,148,136,0.45);
  color: inherit;
}
/* Sanfter Mint-Glow pulst leise im Hintergrund - macht die Card "atmen" */
.apexlanding .lp-tools-hero-glow {
  position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(94,234,212,0.40) 0%, transparent 70%);
  border-radius: 50%;
  animation: lpHeroGlow 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes lpHeroGlow {
  0%, 100% { transform: scale(1) translate(0,0); opacity: 0.7; }
  50%      { transform: scale(1.08) translate(-8px, 8px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .apexlanding .lp-tools-hero-glow { animation: none; }
}

.apexlanding .lp-tools-hero-head {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.apexlanding .lp-tools-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 14px;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-tools-hero-eyebrow [data-lucide] {
  width: 14px; height: 14px;
  stroke-width: 2.4;
  color: var(--lp-teal);
}
.apexlanding .lp-tools-hero-titlewrap {
  display: flex; align-items: center; gap: 18px;
}
.apexlanding .lp-tools-hero-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(13,148,136,0.40);
}
.apexlanding .lp-tools-hero-icon [data-lucide] { width: 32px; height: 32px; stroke-width: 2; }
.apexlanding .lp-tools-hero-title {
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.apexlanding .lp-tools-hero-badge {
  align-self: flex-start;
  font-size: 12px;
  padding: 6px 14px;
  box-shadow: 0 6px 16px rgba(13,148,136,0.30);
}
.apexlanding .lp-tools-hero-badge [data-lucide] { width: 13px; height: 13px; stroke-width: 2.4; }

.apexlanding .lp-tools-hero-lead {
  position: relative; z-index: 1;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--lp-text-muted);
  margin-bottom: 24px;
  max-width: 780px;
}

/* Feature-Liste: 2x2 Grid mit Icon + Titel + Beschreibung */
.apexlanding .lp-tools-hero-features {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.apexlanding .lp-tools-hero-features li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(13,148,136,0.12);
  border-radius: var(--lp-r-md);
  backdrop-filter: blur(6px);
}
.apexlanding .lp-tools-hero-feature-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--lp-mint-soft);
  color: var(--lp-teal);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.apexlanding .lp-tools-hero-feature-icon [data-lucide] { width: 18px; height: 18px; stroke-width: 2.2; }
.apexlanding .lp-tools-hero-feature-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apexlanding .lp-tools-hero-feature-body strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--lp-text);
  line-height: 1.3;
}
.apexlanding .lp-tools-hero-feature-body span {
  font-size: 13px;
  color: var(--lp-text-muted);
  line-height: 1.5;
}

.apexlanding .lp-tools-hero-foot {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid rgba(13,148,136,0.15);
}
.apexlanding .lp-tools-hero-comparison {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--lp-teal-dark);
  font-weight: 600;
}
.apexlanding .lp-tools-hero-comparison [data-lucide] {
  width: 16px; height: 16px;
  color: var(--lp-teal);
  stroke-width: 2.2;
}
.apexlanding .lp-tools-hero-cta {
  /* Cursor + Hover via äußeren Anchor; hier nur visuelles Button-Aussehen */
  pointer-events: none;
}
.apexlanding .lp-tools-hero:hover .lp-tools-hero-cta {
  transform: translateX(4px);
}
.apexlanding .lp-tools-hero-cta {
  transition: transform .25s ease;
}

@media (max-width: 880px) {
  .apexlanding .lp-tools-hero { padding: 28px 22px; }
  .apexlanding .lp-tools-hero-titlewrap { gap: 14px; }
  .apexlanding .lp-tools-hero-icon { width: 52px; height: 52px; border-radius: 12px; }
  .apexlanding .lp-tools-hero-icon [data-lucide] { width: 26px; height: 26px; }
  .apexlanding .lp-tools-hero-features { grid-template-columns: 1fr; }
  .apexlanding .lp-tools-hero-foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .apexlanding .lp-tools-hero-cta { justify-content: center; }
}

/* ── 3-Card-Reihe (Gebührenrechner / Ads / Weitere Tools) ── */
.apexlanding .lp-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}
.apexlanding .lp-tools-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px) {
  .apexlanding .lp-tools-grid-3 { grid-template-columns: 1fr; }
}

/* Coming-Soon Pipeline-Items - jedes Item bekommt eine pulsierende Status-LED,
   die signalisiert "wird gerade gebaut". Klein, aber lebendig. */
.apexlanding .lp-tool-coming-list {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 8px;
  margin: 14px 0 0; padding: 0;
  list-style: none;
  flex: 1;        /* hält die Card-Höhe konsistent mit den aktiven Tools */
}
.apexlanding .lp-tool-coming-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px;
  color: var(--lp-text);
  font-weight: 600;
  padding: 9px 12px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(13,148,136,0.15);
  border-radius: 8px;
  backdrop-filter: blur(4px);
  position: relative;
  padding-right: 28px;
}
.apexlanding .lp-tool-coming-list > li > [data-lucide] {
  width: 16px; height: 16px;
  color: var(--lp-teal);
  stroke-width: 2.4;
  flex-shrink: 0;
}
/* Status-LED rechts: pulsierender Mint-Punkt = "in Arbeit" */
.apexlanding .lp-tool-coming-list li::after {
  content: '';
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lp-teal);
  box-shadow: 0 0 0 0 rgba(13,148,136,0.55);
  animation: lpStatusPulse 2s ease-out infinite;
}
@keyframes lpStatusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(13,148,136,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(13,148,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(13,148,136,0); }
}
@media (prefers-reduced-motion: reduce) {
  .apexlanding .lp-tool-coming-list li::after { animation: none; }
}
/* Tool-Cards (Gebührenrechner, Ads, Weitere Tools) - visuell auf Hero-Niveau
   gebracht: subtler Mint-Gradient-Tint, Gradient-Icon mit Teal-Schatten,
   stärkerer Hover-Lift mit Mint-Glow. Konsistent mit der Hero-Card oben. */
.apexlanding .lp-tool-card {
  display: flex; flex-direction: column;
  padding: 30px 28px 26px;
  background: linear-gradient(135deg, #fff 0%, #f6fefc 100%);
  border: 1px solid rgba(13,148,136,0.18);
  border-radius: var(--lp-r-lg);
  box-shadow: 0 4px 14px rgba(13,148,136,0.06), var(--lp-shadow-sm);
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}
/* Sanfter Mint-Glow oben rechts - dezenter Echo des Hero-Glows */
.apexlanding .lp-tool-card::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(94,234,212,0.20) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
  opacity: 0.6;
}
.apexlanding a.lp-tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(13,148,136,0.16), var(--lp-shadow-md);
  border-color: rgba(13,148,136,0.45);
}
.apexlanding a.lp-tool-card:hover::before {
  transform: scale(1.4) translate(-10px, 10px);
  opacity: 1;
}
.apexlanding .lp-tool-card-coming {
  background: linear-gradient(135deg, #fafbfc 0%, #f0fdfa 100%);
  border-style: dashed;
  border-color: rgba(13,148,136,0.28);
}
.apexlanding .lp-tool-head {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  margin-bottom: 18px;
}
/* Gradient-Icon analog zur Hero-Card */
.apexlanding .lp-tool-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(13,148,136,0.28);
  transition: transform .3s ease, box-shadow .3s ease;
}
.apexlanding a.lp-tool-card:hover .lp-tool-icon {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 10px 22px rgba(13,148,136,0.42);
}
.apexlanding .lp-tool-card-coming .lp-tool-icon {
  background: var(--lp-mint-soft);
  color: var(--lp-teal);
  box-shadow: none;
  border: 1px dashed rgba(13,148,136,0.30);
}
.apexlanding .lp-tool-icon [data-lucide] { width: 24px; height: 24px; stroke-width: 2; }
.apexlanding .lp-tool-badge {
  font-size: 11px; font-weight: 700;
  padding: 5px 11px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.apexlanding .lp-tool-badge-mint  { background: rgba(94,234,212,0.30); color: #047857; box-shadow: 0 2px 8px rgba(13,148,136,0.10); }
.apexlanding .lp-tool-badge-teal  { background: var(--lp-teal); color: #fff; box-shadow: 0 4px 12px rgba(13,148,136,0.30); }
.apexlanding .lp-tool-badge-ghost { background: rgba(13,148,136,0.06); color: var(--lp-teal-dark); border: 1px dashed rgba(13,148,136,0.35); }
.apexlanding .lp-tool-title {
  position: relative; z-index: 1;
  font-size: 19px; margin-bottom: 8px;
}
.apexlanding .lp-tool-text {
  position: relative; z-index: 1;
  color: var(--lp-text-muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Feature-Liste auf den aktiven Tool-Cards: konsistenter Look zu den
   Pipeline-Items in "Weitere Tools", aber mit teal Check-Style statt
   pulsierender LED (= "verfügbar" statt "wird gebaut"). */
.apexlanding .lp-tool-features {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 0 18px; padding: 0;
  list-style: none;
  flex: 1;                       /* schiebt den "Mehr erfahren"-Link ans Ende */
}
.apexlanding .lp-tool-features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px;
  color: var(--lp-text);
  font-weight: 500;
  padding: 9px 12px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(13,148,136,0.18);
  border-radius: 8px;
  line-height: 1.4;
  backdrop-filter: blur(4px);
  transition: border-color .2s ease, background-color .2s ease;
}
.apexlanding a.lp-tool-card:hover .lp-tool-features li {
  border-color: rgba(13,148,136,0.35);
  background: rgba(255,255,255,0.95);
}
.apexlanding .lp-tool-features [data-lucide] {
  width: 16px; height: 16px;
  color: var(--lp-teal);
  stroke-width: 2.4;
  flex-shrink: 0;
  margin-top: 1px;
}

.apexlanding .lp-tool-arrow {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;              /* an den unteren Card-Rand kleben */
  align-self: flex-start;
  padding: 8px 14px;
  background: rgba(13,148,136,0.08);
  border-radius: 9999px;
  color: var(--lp-teal-dark);
  font-weight: 700;
  font-size: 13px;
  transition: transform .25s ease, gap .25s ease, background-color .25s ease;
}
.apexlanding a.lp-tool-card:hover .lp-tool-arrow {
  transform: translateX(2px);
  gap: 10px;
  background: rgba(13,148,136,0.18);
}
.apexlanding .lp-tool-arrow [data-lucide] { width: 16px; height: 16px; }
.apexlanding .lp-tools-cta { text-align: center; }

/* Sub-Section-Divider: visueller Bruch zwischen Tools-Block und Deep-Dive
   Block innerhalb derselben Sektion. Subtle Verlaufs-Linie + extra Margin,
   damit der User merkt 'jetzt gehts in die Tiefe' ohne dass es nach neuer
   Sektion aussieht. */
.apexlanding .lp-section-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lp-border) 18%, var(--lp-border) 82%, transparent);
  margin: 64px auto 56px;
  max-width: 600px;
}
/* Sub-Headline-Variante: gleicher Stil wie Section-Title aber eine
   Tick kleiner, damit die Hierarchie klar ist (H2 > H3-sub). */
.apexlanding .lp-section-title-sub { font-size: 28px; line-height: 1.2; }
@media (max-width: 720px) {
  .apexlanding .lp-section-divider { margin: 48px auto 40px; }
  .apexlanding .lp-section-title-sub { font-size: 22px; }
}

/* CTA-Zentrierung am Ende der Pricing-Sektion. */
.apexlanding .lp-pricing-cta {
  text-align: center;
  margin-top: 36px;
}

@media (max-width: 720px) {
  .apexlanding .lp-tools-grid { grid-template-columns: 1fr; }
  .apexlanding .lp-tool-card { padding: 24px 22px 22px; }
}

/* ──────────────────────────────────────────────
 * Sektion 7: DEEP-DIVE
 * ────────────────────────────────────────────── */
/* Output-Badges: zeigen, was der Generator als Output liefert.
   Etwas dezenter Gradient-Hintergrund, deutlicher Check-Vorab. */
.apexlanding .lp-output-badges {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  margin-bottom: 56px;
}
.apexlanding .lp-output-badges li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  background: linear-gradient(135deg, rgba(94,234,212,0.18) 0%, rgba(13,148,136,0.10) 100%);
  border: 1px solid rgba(13,148,136,0.28);
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lp-teal-dark);
  box-shadow: 0 2px 8px rgba(13,148,136,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.apexlanding .lp-output-badges li:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(13,148,136,0.18);
}
.apexlanding .lp-output-badges [data-lucide] {
  width: 14px; height: 14px;
  color: var(--lp-teal);
  stroke-width: 3;
}

.apexlanding .lp-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}
/* Feature-Cards in der Deep-Dive-Sektion - konsistent mit den Tool-Cards
   oben: Mint-Gradient-Tint, Gradient-Icon, dezenter Glow oben rechts,
   stärkerer Lift beim Hover. */
.apexlanding .lp-feature-card {
  position: relative;
  padding: 28px 26px;
  background: linear-gradient(135deg, #fff 0%, #f6fefc 100%);
  border: 1px solid rgba(13,148,136,0.16);
  border-radius: var(--lp-r-lg);
  box-shadow: 0 4px 14px rgba(13,148,136,0.05), var(--lp-shadow-sm);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.apexlanding .lp-feature-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(94,234,212,0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
  opacity: 0.55;
}
.apexlanding .lp-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(13,148,136,0.42);
  box-shadow: 0 12px 28px rgba(13,148,136,0.14), var(--lp-shadow-md);
}
.apexlanding .lp-feature-card:hover::before {
  transform: scale(1.4) translate(-8px, 8px);
  opacity: 1;
}
.apexlanding .lp-feature-icon {
  position: relative; z-index: 1;
  width: 48px; height: 48px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 5px 14px rgba(13,148,136,0.25);
  transition: transform .3s ease, box-shadow .3s ease;
}
.apexlanding .lp-feature-card:hover .lp-feature-icon {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 8px 18px rgba(13,148,136,0.38);
}
.apexlanding .lp-feature-icon [data-lucide] { width: 22px; height: 22px; stroke-width: 2; }
.apexlanding .lp-feature-title {
  position: relative; z-index: 1;
  font-size: 17px;
  margin-bottom: 8px;
}
.apexlanding .lp-feature-text {
  position: relative; z-index: 1;
  color: var(--lp-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 980px) { .apexlanding .lp-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .apexlanding .lp-features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* Horizontal-Layout: Icon links, Title+Text rechts. Halbiert die Hoehe
     gegenueber dem default Stack-Layout und macht die Sektion
     deutlich kompakter auf Mobile. */
  .apexlanding .lp-feature-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px 18px;
  }
  .apexlanding .lp-feature-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    grid-row: span 2;
  }
  .apexlanding .lp-feature-icon [data-lucide] { width: 18px; height: 18px; }
  .apexlanding .lp-feature-title {
    font-size: 15px;
    margin-bottom: 4px;
  }
  .apexlanding .lp-feature-text {
    font-size: 13px;
    line-height: 1.5;
  }
}

/* Pricing-Sektion (eigenstaendig, seit Round B aus dem Deep-Dive geloest).
   Mint-Soft-Background zur visuellen Abgrenzung von Tools (weiss) oben
   und Before/After (grau) darunter - sonst Mint-White-White-Grau-Folge. */
.apexlanding .lp-pricing { background: var(--lp-bg-soft); }

/* ── Pricing-Teaser: 2-Spalten-Split ──
   Links "Free Forever" mit Item-Liste, rechts "Pay-per-Use" mit Tier-Grid.
   Klar kommuniziert, was kostenlos ist und wofür man zahlt. */
.apexlanding .lp-pricing-teaser {
  margin: 0 auto;
  max-width: 1100px;
}
.apexlanding .lp-pricing-teaser-head {
  text-align: center;
  margin-bottom: 32px;
}
.apexlanding .lp-pricing-teaser-headline {
  font-size: clamp(22px, 2.4vw, 28px);
  margin-bottom: 12px;
}
.apexlanding .lp-pricing-teaser-lead {
  font-size: 15px;
  color: var(--lp-text-muted);
  max-width: 620px;
  margin: 0 auto;
}

.apexlanding .lp-pricing-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.apexlanding .lp-pricing-side {
  position: relative;
  padding: 32px 30px 28px;
  border-radius: var(--lp-r-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.apexlanding .lp-pricing-side-free {
  background:
    radial-gradient(circle at 100% 0%, rgba(94,234,212,0.25) 0%, transparent 55%),
    linear-gradient(135deg, #f0fdfa 0%, #fff 100%);
  border: 1.5px solid rgba(13,148,136,0.30);
  box-shadow: 0 10px 28px rgba(13,148,136,0.08);
}
.apexlanding .lp-pricing-side-paid {
  background:
    radial-gradient(circle at 0% 100%, rgba(13,148,136,0.12) 0%, transparent 55%),
    linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  border: 1.5px solid rgba(13,148,136,0.18);
  box-shadow: 0 10px 28px rgba(15,23,42,0.06);
}

.apexlanding .lp-pricing-side-head {
  margin-bottom: 22px;
  position: relative; z-index: 1;
}
.apexlanding .lp-pricing-side-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.apexlanding .lp-pricing-side-badge-free {
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  box-shadow: 0 4px 12px rgba(13,148,136,0.30);
}
.apexlanding .lp-pricing-side-badge-paid {
  background: rgba(13,148,136,0.10);
  color: var(--lp-teal-dark);
  border: 1px solid rgba(13,148,136,0.25);
}
.apexlanding .lp-pricing-side-badge [data-lucide] {
  width: 13px; height: 13px;
  stroke-width: 2.4;
}
.apexlanding .lp-pricing-side-title {
  font-size: 20px;
  margin-bottom: 6px;
  color: var(--lp-text);
}
.apexlanding .lp-pricing-side-sub {
  font-size: 13.5px;
  color: var(--lp-text-muted);
  line-height: 1.5;
}

/* Free-Liste: Check-Pills */
.apexlanding .lp-pricing-free-list {
  position: relative; z-index: 1;
  list-style: none; padding: 0;
  margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.apexlanding .lp-pricing-free-list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(13,148,136,0.20);
  border-radius: 8px;
  font-size: 14px;
  color: var(--lp-text);
  font-weight: 500;
  line-height: 1.4;
  backdrop-filter: blur(4px);
}
.apexlanding .lp-pricing-free-list [data-lucide] {
  width: 16px; height: 16px;
  color: var(--lp-teal);
  stroke-width: 3;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Paid-Tiers: 2x2 Grid */
.apexlanding .lp-pricing-tiers {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 18px;
  flex: 1;
}
.apexlanding .lp-pricing-tier {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px 12px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-md);
  transition: border-color .2s ease, transform .2s ease;
}
.apexlanding .lp-pricing-tier:hover {
  border-color: rgba(13,148,136,0.40);
  transform: translateY(-2px);
}
.apexlanding .lp-pricing-tier-range {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp-text-muted);
  font-weight: 700;
}
.apexlanding .lp-pricing-tier-price {
  font-size: 24px;
  font-weight: 800;
  color: var(--lp-teal);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.apexlanding .lp-pricing-tier-unit {
  font-size: 11px;
  color: var(--lp-text-muted);
}

.apexlanding .lp-pricing-side-footer {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: var(--lp-text-secondary, var(--lp-text-muted));
  padding-top: 16px;
  border-top: 1px dashed rgba(13,148,136,0.20);
  margin: 0;
}
.apexlanding .lp-pricing-side-footer [data-lucide] {
  width: 15px; height: 15px;
  color: var(--lp-teal);
  stroke-width: 2.2;
  flex-shrink: 0;
}

/* Info-Box: kommuniziert dass Credits später für andere Features eingesetzt
   werden - macht das Konzept zukunftssicher und etabliert es als Währung. */
.apexlanding .lp-pricing-info {
  position: relative; z-index: 1;
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(13,148,136,0.06) 0%, rgba(94,234,212,0.12) 100%);
  border: 1px dashed rgba(13,148,136,0.32);
  border-radius: var(--lp-r-md);
}
.apexlanding .lp-pricing-info-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(13,148,136,0.25);
}
.apexlanding .lp-pricing-info-icon [data-lucide] {
  width: 16px; height: 16px;
  stroke-width: 2.4;
}
.apexlanding .lp-pricing-info-body {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.apexlanding .lp-pricing-info-body strong {
  font-size: 13px;
  color: var(--lp-text);
  line-height: 1.3;
}
.apexlanding .lp-pricing-info-body span {
  font-size: 12.5px;
  color: var(--lp-text-muted);
  line-height: 1.55;
}

@media (max-width: 880px) {
  .apexlanding .lp-pricing-split { grid-template-columns: 1fr; }
  .apexlanding .lp-pricing-side { padding: 26px 22px 22px; }
}
@media (max-width: 480px) {
  /* Tiers bleiben 2x2 auch auf engen Mobile-Viewports - kompakter als
     vier untereinander. Padding und Schriften leicht runter, damit es
     auf 360-375px Breite nicht knapp wird. */
  .apexlanding .lp-pricing-tier { padding: 12px 8px; }
  .apexlanding .lp-pricing-tier-range { font-size: 10px; }
  .apexlanding .lp-pricing-tier-price { font-size: 20px; margin-top: 2px; }
  .apexlanding .lp-pricing-tier-unit { font-size: 10.5px; }
}

/* ──────────────────────────────────────────────
 * Sektion 8: VORHER / NACHHER (mit Tab-Switcher für 3 Beispiele)
 * ────────────────────────────────────────────── */
.apexlanding .lp-ba { background: var(--lp-bg-page); }

/* Mobile-only Vorher/Nachher Side-Toggle. Auf Desktop sieht der User
   beide Karten gleichzeitig - der Toggle wuerde nur stoeren. Auf Mobile
   wird nur eine Seite gezeigt; der Toggle ist die einzige Moeglichkeit,
   die andere Seite einzublenden. */
.apexlanding .lp-ba-side-toggle {
  display: none;
  margin: 0 auto 20px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 9999px;
  box-shadow: var(--lp-shadow-sm);
  width: max-content;
}
.apexlanding .lp-ba-side-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  background: transparent;
  border: none;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-text-muted);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.apexlanding .lp-ba-side-btn [data-lucide] {
  width: 14px; height: 14px;
}
.apexlanding .lp-ba-side-btn.is-active {
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-teal-dark));
  color: #fff;
  box-shadow: 0 3px 10px rgba(13,148,136,0.25);
}

/* Tab-Switcher: drei Pill-Buttons mit Icon + Produktname. Aktiver Tab
   bekommt den Gradient-Look der Landing, inaktive sind dezent neutral. */
.apexlanding .lp-ba-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-bottom: 32px;
}
.apexlanding .lp-ba-tab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: #fff;
  border: 1.5px solid var(--lp-border);
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lp-text-muted);
  cursor: pointer;
  transition: transform .2s ease, background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
  font-family: inherit;
}
.apexlanding .lp-ba-tab:hover {
  transform: translateY(-2px);
  border-color: rgba(13,148,136,0.40);
  color: var(--lp-text);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 12px rgba(13,148,136,0.08);
}
.apexlanding .lp-ba-tab.is-active {
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(13,148,136,0.35);
  transform: translateY(-2px);
}
.apexlanding .lp-ba-tab [data-lucide] {
  width: 18px; height: 18px;
  stroke-width: 2.2;
}
.apexlanding .lp-ba-tab.is-active [data-lucide] { color: #fff; }

/* Panel-Wrapper: sanftes Fade beim Switch. Auf prefers-reduced-motion aus. */
.apexlanding .lp-ba-panel { animation: lpBaPanelIn .25s ease; }
.apexlanding .lp-ba-panel[hidden] { display: none; }
@keyframes lpBaPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .apexlanding .lp-ba-panel { animation: none; }
}

@media (max-width: 720px) {
  /* Statt flex-wrap (das 2+1 ergab) ein 3-Spalten-Grid: alle drei
     Tabs gleich breit, eine Zeile, kein Umbruch. Wirkt aufgeraeumter
     und macht direkt klar dass es drei Produkte zum Durchschalten gibt. */
  .apexlanding .lp-ba-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 24px;
  }
  .apexlanding .lp-ba-tab {
    width: 100%;
    justify-content: center;
    padding: 10px 8px;
    font-size: 12.5px;
    gap: 6px;
    min-width: 0;
  }
  .apexlanding .lp-ba-tab > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .apexlanding .lp-ba-tab [data-lucide] { flex-shrink: 0; }
}

@media (max-width: 480px) {
  .apexlanding .lp-ba-tab {
    padding: 8px 6px;
    font-size: 11.5px;
    gap: 4px;
  }
  .apexlanding .lp-ba-tab [data-lucide] { width: 13px; height: 13px; }
}

.apexlanding .lp-ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ─── Listing-Mockup-Card ────────────────────────────────
   Visuelle Idee: die Karten sehen aus wie ein echtes Amazon-Listing
   (Bild oben, Titel + Bewertung + Bullets darunter). Vorher-Variante
   ist schwach (rote Counter, fehlendes Bild, leere KW), Nachher voll.
   Macht den Wow-Effekt ohne Textwand. */
.apexlanding .lp-listing-mockup {
  position: relative;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-lg);
  box-shadow: var(--lp-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.apexlanding .lp-listing-mockup.is-before {
  border-color: rgba(163,45,45,0.30);
}
.apexlanding .lp-listing-mockup.is-after {
  border-color: rgba(13,148,136,0.45);
  box-shadow: 0 8px 28px rgba(13,148,136,0.10), var(--lp-shadow-sm);
}

/* Badge oben am Listing - klar gelabelt VORHER / MIT APEX FASTLANE */
.apexlanding .lp-listing-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--lp-red-soft);
  color: var(--lp-red);
  border: 1px solid rgba(163,45,45,0.30);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.apexlanding .lp-listing-badge.is-success {
  background: var(--lp-teal);
  color: #fff;
  border-color: var(--lp-teal);
  box-shadow: 0 4px 12px rgba(13,148,136,0.25);
}
.apexlanding .lp-listing-badge [data-lucide] {
  width: 12px;
  height: 12px;
}

/* Bild-Slot: oben in der Karte, quadratisch. Im Vorher leer (image-off
   Icon), im Nachher data-placeholder fuer spaeteren Bild-Tausch. */
.apexlanding .lp-listing-image {
  position: relative;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 13px;
  font-style: italic;
}
.apexlanding .lp-listing-image.is-empty {
  background: var(--lp-bg-page);
  flex-direction: column;
  gap: 8px;
  color: var(--lp-text-light);
  font-style: normal;
}
.apexlanding .lp-listing-image.is-empty [data-lucide] {
  width: 40px;
  height: 40px;
  color: var(--lp-text-light);
  opacity: 0.5;
}
.apexlanding .lp-listing-image.is-empty span {
  font-size: 12px;
  font-weight: 600;
}
.apexlanding .lp-listing-image-hint {
  padding: 4px 12px;
  background: rgba(255,255,255,0.85);
  border-radius: 6px;
  font-size: 12px;
  color: var(--lp-text-muted);
}

.apexlanding .lp-listing-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.apexlanding .lp-listing-title {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--lp-text);
}
.apexlanding .lp-listing-mockup.is-before .lp-listing-title {
  font-weight: 500;
  color: var(--lp-text-muted);
}

/* Counter-Badge fuer Titel + Backend-KW - rot oder gruen. */
.apexlanding .lp-char-count {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  font-feature-settings: "tnum";
}
.apexlanding .lp-count-bad {
  background: var(--lp-red-soft);
  color: var(--lp-red);
}
.apexlanding .lp-count-good {
  background: rgba(94,234,212,0.20);
  color: var(--lp-teal-dark);
}

/* Sterne-Rating-Zeile - 5 Stars (gefuellt im Nachher) + Count-Text. */
.apexlanding .lp-listing-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-listing-stars {
  display: inline-flex;
  gap: 2px;
}
.apexlanding .lp-listing-stars [data-lucide] {
  width: 14px;
  height: 14px;
  color: #d1d5db;
  fill: transparent;
  stroke-width: 2;
}
.apexlanding .lp-listing-stars [data-lucide].is-filled,
.apexlanding .lp-listing-rating.is-good .lp-listing-stars [data-lucide] {
  color: #f59e0b;
  fill: #f59e0b;
}
.apexlanding .lp-listing-rating.is-good { color: var(--lp-text); font-weight: 600; }
.apexlanding .lp-listing-rating-count { white-space: nowrap; }

/* Bullets-Block. Vorher: alle bullets sichtbar in is-weak. Nachher:
   nur erstes Bullet sichtbar, Rest in <details> kollabiert. */
.apexlanding .lp-listing-bullets-head h5 {
  margin: 4px 0 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-listing-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apexlanding .lp-listing-bullets li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.5;
}
.apexlanding .lp-listing-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
}
.apexlanding .lp-listing-bullets.is-weak li {
  color: var(--lp-text-muted);
  font-style: italic;
}
.apexlanding .lp-listing-bullets.is-weak li::before { background: var(--lp-red); opacity: 0.5; }
.apexlanding .lp-listing-bullets.is-strong li { color: var(--lp-text); }
.apexlanding .lp-listing-bullets.is-strong li::before { background: var(--lp-teal); }

.apexlanding .lp-bullets-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
}
.apexlanding .lp-bullets-note.is-weak { color: var(--lp-red); }
.apexlanding .lp-bullets-note [data-lucide] { width: 14px; height: 14px; }

/* Bullets-Toggle (details/summary) - "+ 4 weitere Bullets". Native-A11y,
   kein JS. Chevron rotiert via [open]-Selektor. */
.apexlanding .lp-bullets-details summary {
  list-style: none;
  cursor: pointer;
}
.apexlanding .lp-bullets-details summary::-webkit-details-marker { display: none; }
.apexlanding .lp-bullets-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 12px;
  background: var(--lp-mint-soft);
  border: 1px solid rgba(13,148,136,0.25);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--lp-teal-dark);
  transition: background-color 0.18s ease;
}
.apexlanding .lp-bullets-summary:hover { background: rgba(94,234,212,0.30); }
.apexlanding .lp-bullets-summary [data-lucide] {
  width: 14px;
  height: 14px;
  transition: transform 0.22s ease;
}
.apexlanding .lp-bullets-details[open] .lp-bullets-summary [data-lucide] {
  transform: rotate(180deg);
}
.apexlanding .lp-bullets-details[open] .lp-listing-bullets {
  margin-top: 10px;
}

/* Keywords-Block: gleicher Header-Stil wie Bullets, einzeilige Anzeige. */
.apexlanding .lp-listing-keywords h5 {
  margin: 4px 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-listing-keywords-text {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--lp-text);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  word-break: break-word;
}
.apexlanding .lp-listing-keywords-text.is-empty {
  color: var(--lp-red);
  font-style: italic;
  font-family: inherit;
}

/* Preis-Badge unter dem Vergleich - Side-by-Side Vergleich gross
   "Agentur 89€  →  ab 1,99€" als visueller Conversion-Anker. */
.apexlanding .lp-ba-price-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 540px;
  margin: 32px auto 0;
  padding: 18px 24px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  box-shadow: var(--lp-shadow-md);
}
.apexlanding .lp-ba-price-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1 1 0;
}
.apexlanding .lp-ba-price-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-ba-price-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--lp-text);
}
.apexlanding .lp-ba-price-side.is-agency .lp-ba-price-value s {
  text-decoration-color: var(--lp-red);
  color: var(--lp-text-muted);
}
.apexlanding .lp-ba-price-side.is-apex .lp-ba-price-value { color: var(--lp-teal); }
.apexlanding .lp-ba-price-arrow {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--lp-teal);
}

/* Mobile: zwei Mockup-Karten untereinander statt nebeneinander.
   Bei <520px wird auch das Preis-Badge kompakter. */
@media (max-width: 880px) {
  .apexlanding .lp-ba-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Mobile-only: Side-Toggle einblenden und immer nur eine Karte anzeigen.
   data-ba-side am Section-Element steuert, welche Karten sichtbar sind.
   Default "after" - so sieht der User zuerst das fertige Profi-Listing
   inkl. Produktbild, statt durch eine leere Vorher-Karte scrollen zu
   muessen. display:flex (nicht inline-flex), damit margin:0 auto den
   Toggle horizontal zentriert. */
@media (max-width: 720px) {
  .apexlanding .lp-ba-side-toggle { display: flex; }
  .apexlanding .lp-ba[data-ba-side="after"]  .lp-listing-mockup.is-before { display: none; }
  .apexlanding .lp-ba[data-ba-side="before"] .lp-listing-mockup.is-after  { display: none; }
}
@media (max-width: 520px) {
  .apexlanding .lp-listing-body { padding: 16px 16px 18px; }
  .apexlanding .lp-listing-title { font-size: 14.5px; }
  .apexlanding .lp-ba-price-badge {
    flex-direction: column;
    gap: 6px;
    padding: 16px 20px;
  }
  .apexlanding .lp-ba-price-arrow { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .apexlanding .lp-bullets-summary [data-lucide] { transition: none; }
  .apexlanding .lp-bullets-summary { transition: none; }
}

/* ──────────────────────────────────────────────
 * Sektion 9: ROI-RECHNER
 *
 * Zwei Slider (Umsatz + Anzahl Produkte), drei Result-Karten.
 * Slider sind touch-freundlich (44px-Thumb), Werte werden live im JS
 * berechnet. Card hat denselben Hero-Look wie das KI-Listing-Hero
 * im Tools-Bereich, damit die "Wow"-Wirkung visuell konsistent ist.
 * ────────────────────────────────────────────── */
/* ROI bekommt jetzt weissen Hintergrund - der Roi-Card-Gradient (Mint)
   bekommt mehr 'Wow' Effekt gegen das clean-weisse Umfeld. */
.apexlanding .lp-roi { background: var(--lp-bg); }
.apexlanding .lp-roi-card {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 44px 32px;
  background:
    radial-gradient(circle at 15% 0%, rgba(94,234,212,0.28) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(13,148,136,0.14) 0%, transparent 55%),
    linear-gradient(135deg, #fff 0%, #f8fffe 100%);
  border: 1.5px solid rgba(13,148,136,0.30);
  border-radius: var(--lp-r-lg);
  box-shadow: 0 14px 36px rgba(13,148,136,0.12), var(--lp-shadow-sm);
  overflow: hidden;
}
.apexlanding .lp-roi-glow {
  position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(94,234,212,0.32) 0%, transparent 70%);
  border-radius: 50%;
  animation: lpHeroGlow 7s ease-in-out infinite;
  pointer-events: none;
}
.apexlanding .lp-roi-inputs {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 32px;
}
.apexlanding .lp-roi-slider-block { display: flex; flex-direction: column; gap: 12px; }
.apexlanding .lp-roi-slider-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}
.apexlanding .lp-roi-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lp-text-secondary, var(--lp-text-muted));
}
.apexlanding .lp-roi-label [data-lucide] {
  width: 14px; height: 14px;
  color: var(--lp-teal);
  stroke-width: 2.4;
}
.apexlanding .lp-roi-output-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--lp-teal-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
/* Slider: groß genug für Touch, mit teal-mint Gradient als Track-Fortschritt
   wäre fancy, aber für Browser-Kompatibilität halten wir's bei Akzent-Color. */
.apexlanding .lp-roi-slider {
  width: 100%;
  accent-color: var(--lp-teal);
  height: 6px;
  cursor: pointer;
}
.apexlanding .lp-roi-bounds {
  display: flex; justify-content: space-between;
  font-size: 11px;
  color: var(--lp-text-muted);
  font-weight: 600;
}

/* Erwartungs-Statement: visuelles Highlight zwischen Slidern und Ergebnissen.
   Macht die Verkaufs-Botschaft "+20%" zur Mittelachse der Sektion. */
.apexlanding .lp-roi-expected {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 18px;
  padding: 18px 24px;
  margin-bottom: 24px;
  background:
    linear-gradient(135deg, rgba(13,148,136,0.10) 0%, rgba(94,234,212,0.20) 100%);
  border: 1px solid rgba(13,148,136,0.28);
  border-radius: var(--lp-r-md);
}
.apexlanding .lp-roi-expected-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(13,148,136,0.30);
}
.apexlanding .lp-roi-expected-icon [data-lucide] {
  width: 24px; height: 24px;
  stroke-width: 2.4;
}
.apexlanding .lp-roi-expected-body {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 12px;
  flex: 1;
  min-width: 0;
}
.apexlanding .lp-roi-expected-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-teal-dark);
  width: 100%;
}
.apexlanding .lp-roi-expected-value {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  color: var(--lp-teal-dark);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.apexlanding .lp-roi-expected-note {
  font-size: 13.5px;
  color: var(--lp-text-secondary, var(--lp-text-muted));
  line-height: 1.5;
  width: 100%;
}
@media (max-width: 600px) {
  .apexlanding .lp-roi-expected { padding: 16px; gap: 14px; }
  .apexlanding .lp-roi-expected-icon { width: 40px; height: 40px; }
  .apexlanding .lp-roi-expected-icon [data-lucide] { width: 20px; height: 20px; }
}

.apexlanding .lp-roi-results {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 0;
}
.apexlanding .lp-roi-result {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 22px 16px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(13,148,136,0.18);
  border-radius: var(--lp-r-md);
  text-align: center;
  backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.apexlanding .lp-roi-result:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13,148,136,0.12);
}
.apexlanding .lp-roi-result-primary {
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(13,148,136,0.30);
}
.apexlanding .lp-roi-result-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-roi-result-primary .lp-roi-result-label { color: rgba(255,255,255,0.85); }
.apexlanding .lp-roi-result-value {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  color: var(--lp-teal-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin: 4px 0;
}
.apexlanding .lp-roi-result-primary .lp-roi-result-value { color: #fff; }
.apexlanding .lp-roi-result-note {
  font-size: 11.5px;
  color: var(--lp-text-muted);
  line-height: 1.4;
}
.apexlanding .lp-roi-result-primary .lp-roi-result-note { color: rgba(255,255,255,0.85); }

.apexlanding .lp-roi-disclaimer {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--lp-text-muted);
  font-style: italic;
}

.apexlanding .lp-roi-foot {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: 10px;
  padding-top: 18px;
  border-top: 1px dashed rgba(13,148,136,0.22);
  font-size: 12.5px;
  color: var(--lp-text-muted);
  line-height: 1.55;
}
.apexlanding .lp-roi-foot [data-lucide] {
  width: 16px; height: 16px;
  color: var(--lp-teal);
  flex-shrink: 0;
  margin-top: 2px;
}

@media (max-width: 880px) {
  .apexlanding .lp-roi-card { padding: 28px 22px; }
  .apexlanding .lp-roi-inputs { grid-template-columns: 1fr; gap: 22px; }
  .apexlanding .lp-roi-results { grid-template-columns: 1fr; gap: 10px; }
  .apexlanding .lp-roi-result-primary { order: -1; }
}

/* Mobile-kompakt: der Rechner ist sonst ~880px hoch (Slider, Erwartungs-Box,
   3 grosse Result-Karten alle untereinander) - User muss scrollen um den
   Effekt der Slider zu sehen. Layout:
     - Slider enger zusammen
     - Erwartungs-Box als kompakte Zeile (Icon + Stat + Hinweis)
     - Hauptergebnis (Jahresplus) als prominente Hero-Karte
     - Monatlich + ROI-Faktor als 2-Spalten-Grid darunter
   Halbiert die vertikale Hoehe ungefaehr. */
@media (max-width: 720px) {
  .apexlanding .lp-roi-card { padding: 22px 16px; }
  .apexlanding .lp-roi-inputs { gap: 14px; margin-bottom: 18px; }
  .apexlanding .lp-roi-slider-block { gap: 8px; }
  .apexlanding .lp-roi-label { font-size: 11.5px; letter-spacing: 0.03em; }
  .apexlanding .lp-roi-output-val { font-size: 18px; }
  .apexlanding .lp-roi-bounds { font-size: 10.5px; }

  .apexlanding .lp-roi-expected {
    padding: 12px 14px;
    gap: 12px;
    margin-bottom: 16px;
  }
  .apexlanding .lp-roi-expected-icon { width: 36px; height: 36px; border-radius: 10px; }
  .apexlanding .lp-roi-expected-icon [data-lucide] { width: 18px; height: 18px; }
  .apexlanding .lp-roi-expected-body { gap: 2px 8px; }
  .apexlanding .lp-roi-expected-label { font-size: 10px; }
  .apexlanding .lp-roi-expected-value { font-size: 18px; width: auto; }
  .apexlanding .lp-roi-expected-note {
    font-size: 12px;
    line-height: 1.4;
  }

  /* 2-Spalten-Grid: Primary-Karte (Jahresplus) spannt beide Spalten und
     wirkt als Hero-Stat. Monatlich + ROI-Faktor teilen sich die zweite
     Zeile. So sieht der User Slider + Hauptzahl ohne zu scrollen. */
  .apexlanding .lp-roi-results {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .apexlanding .lp-roi-result {
    padding: 12px 10px;
    gap: 2px;
  }
  .apexlanding .lp-roi-result-primary {
    grid-column: 1 / -1;
    padding: 18px 16px;
  }
  .apexlanding .lp-roi-result-label { font-size: 10px; }
  .apexlanding .lp-roi-result-value { font-size: 18px; margin: 2px 0; }
  .apexlanding .lp-roi-result-primary .lp-roi-result-value { font-size: 28px; }
  .apexlanding .lp-roi-result-note { font-size: 11px; line-height: 1.35; }

  .apexlanding .lp-roi-disclaimer { font-size: 11px; margin-top: 12px; }
}

/* ──────────────────────────────────────────────
 * Sektion 10: VERGLEICHSTABELLE
 *
 * Desktop: echte HTML-Tabelle, APEX-Spalte mit Mint-Wash hervorgehoben,
 * Mobile: gestapelte Cards, APEX-Card mit Gradient-Border highlighted.
 * ────────────────────────────────────────────── */
.apexlanding .lp-compare {
  /* Grauer Hintergrund - bricht die Folge ROI (Weiss) -> Compare (Weiss)
     -> Founder (Mint) auf und gibt der Tabelle gleichzeitig Kontrast. */
  background: var(--lp-bg-page);
}
.apexlanding .lp-compare-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-lg);
  box-shadow: var(--lp-shadow-sm);
}
.apexlanding .lp-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.apexlanding .lp-compare-table thead {
  background: var(--lp-bg-page);
}
.apexlanding .lp-compare-table th,
.apexlanding .lp-compare-table td {
  padding: 16px 18px;
  text-align: center;
  border-bottom: 1px solid var(--lp-border-soft);
}
.apexlanding .lp-compare-table tbody tr:last-child th,
.apexlanding .lp-compare-table tbody tr:last-child td { border-bottom: none; }
.apexlanding .lp-compare-table thead th {
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-text-muted);
  padding: 18px 14px;
}
.apexlanding .lp-compare-th-criterion {
  text-align: left !important;
  width: 28%;
}
.apexlanding .lp-compare-th-apex { background: rgba(94,234,212,0.14); }
.apexlanding .lp-compare-th-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(13,148,136,0.30);
}
.apexlanding .lp-compare-th-pill [data-lucide] {
  width: 13px; height: 13px;
  stroke-width: 2.4;
}
.apexlanding .lp-compare-criterion {
  display: flex; align-items: center; gap: 10px;
  text-align: left !important;
  font-weight: 600;
  color: var(--lp-text);
}
.apexlanding .lp-compare-criterion [data-lucide] {
  width: 16px; height: 16px;
  color: var(--lp-teal);
  flex-shrink: 0;
}
.apexlanding .lp-compare-table td.is-apex {
  background: rgba(94,234,212,0.08);
  color: var(--lp-teal-dark);
  font-weight: 700;
}
.apexlanding .lp-compare-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(16,185,129,0.16);
  color: #047857;
}
.apexlanding .lp-compare-cross {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(163,45,45,0.10);
  color: var(--lp-red);
}
.apexlanding .lp-compare-check [data-lucide],
.apexlanding .lp-compare-cross [data-lucide] {
  width: 16px; height: 16px;
  stroke-width: 3;
}
.apexlanding .lp-compare-table td.is-apex .lp-compare-check {
  background: var(--lp-teal);
  color: #fff;
  box-shadow: 0 2px 8px rgba(13,148,136,0.25);
}

/* Mobile: Tabelle ausblenden, Cards anzeigen */
.apexlanding .lp-compare-cards { display: none; }
@media (max-width: 880px) {
  .apexlanding .lp-compare-wrap { display: none; }
  .apexlanding .lp-compare-cards {
    display: grid; grid-template-columns: 1fr;
    gap: 14px;
  }
}
.apexlanding .lp-compare-card {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-lg);
  box-shadow: var(--lp-shadow-sm);
}
.apexlanding .lp-compare-card.is-highlighted {
  background: linear-gradient(135deg, rgba(13,148,136,0.04) 0%, rgba(94,234,212,0.12) 100%);
  border: 1.5px solid rgba(13,148,136,0.35);
  box-shadow: 0 10px 26px rgba(13,148,136,0.14);
}
.apexlanding .lp-compare-card-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lp-border-soft);
}
.apexlanding .lp-compare-card-head h3 { font-size: 17px; }
.apexlanding .lp-compare-card-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--lp-mint-soft);
  color: var(--lp-teal);
  display: flex; align-items: center; justify-content: center;
}
.apexlanding .lp-compare-card.is-highlighted .lp-compare-card-icon {
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  box-shadow: 0 4px 12px rgba(13,148,136,0.30);
}
.apexlanding .lp-compare-card-icon [data-lucide] { width: 20px; height: 20px; stroke-width: 2.2; }
.apexlanding .lp-compare-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.apexlanding .lp-compare-card-row-label {
  font-size: 13px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-compare-card-row-value {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lp-text);
}
.apexlanding .lp-compare-card-row-value [data-lucide] { width: 14px; height: 14px; stroke-width: 3; }
.apexlanding .lp-compare-card-row-value.is-yes { color: #047857; }
.apexlanding .lp-compare-card-row-value.is-no  { color: var(--lp-red); }
.apexlanding .lp-compare-card ul li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}

/* ──────────────────────────────────────────────
 * Sektion 15: FINAL CTA
 *
 * Full-Width Teal-Gradient-Banner mit großer Headline + prominenter
 * weißer CTA-Button. Letzter Conversion-Push am Seitenende. */
.apexlanding .lp-final-cta {
  margin-top: 80px;
  padding: var(--lp-section-y) var(--lp-gutter);
  background:
    radial-gradient(circle at 20% 0%, rgba(94,234,212,0.50) 0%, transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(13,148,136,0.80) 0%, transparent 60%),
    linear-gradient(135deg, var(--lp-teal) 0%, var(--lp-teal-dark) 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Eyebrow im Final-CTA: globaler Eyebrow nutzt var(--lp-teal) als Farbe,
   was auf dem teal-Gradient unlesbar ist. Hier ueberschreiben wir mit
   einem hellen Mint-Ton + leichter Pille als Hintergrund, damit's lesbar
   ist und gleichzeitig wie ein Status-Badge wirkt. */
.apexlanding .lp-final-cta .lp-eyebrow {
  color: var(--lp-mint, #a7f3d0);
  background: rgba(0,0,0,0.18);
  padding: 6px 14px;
  border-radius: 9999px;
  margin-bottom: 20px;
}
.apexlanding .lp-final-cta .lp-eyebrow [data-lucide] {
  color: var(--lp-mint, #a7f3d0);
}
/* Inner-Container ist flex-column, sodass jedes Kind-Element auf eigener
   Zeile zentriert sitzt - vorher schwammten Urgency-Pill und Button in
   einer text-align-center-Flow nebeneinander. */
.apexlanding .lp-final-cta-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Beta-Phase-Warnung: kombiniert die alten zwei Pills (Beta-Phase + Urgency)
   zu einer einzelnen Warn-Pille oben - mehr Klarheit, weniger Konkurrenz. */
.apexlanding .lp-final-cta-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(254,240,138,0.45);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 28px;
  backdrop-filter: blur(8px);
  color: #fff;
}
.apexlanding .lp-final-cta-badge [data-lucide] {
  width: 15px; height: 15px;
  stroke-width: 2.6;
  color: #fef08a;
}
.apexlanding .lp-final-cta-headline {
  font-size: clamp(30px, 4.8vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: #fff;
  max-width: 18ch;
}
.apexlanding .lp-final-cta-sub {
  font-size: clamp(15px, 1.5vw, 18px);
  color: rgba(255,255,255,0.92);
  margin: 0 0 36px;
  max-width: 42ch;
}
.apexlanding .lp-final-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 40px;
  background: #fff;
  color: var(--lp-teal-dark);
  border-radius: var(--lp-r-md);
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 16px 36px rgba(0,0,0,0.25);
  transition: transform .25s ease, box-shadow .25s ease, gap .25s ease;
  min-height: 56px;
}
.apexlanding .lp-final-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(0,0,0,0.32);
  color: var(--lp-teal-dark);
  gap: 14px;
}
.apexlanding .lp-final-cta-btn [data-lucide] { width: 20px; height: 20px; stroke-width: 2.4; }
.apexlanding .lp-final-cta-foot {
  margin: 24px 0 0;
  font-size: 13.5px;
  color: rgba(255,255,255,0.82);
}
.apexlanding .lp-final-cta-link {
  background: none; border: none;
  /* Padding macht den Tap-Bereich groesser ohne den Visual zu stoeren.
     Vertikales Padding hebt die Trefferflaeche von ~22px (nur Text)
     auf ~46px - wichtig fuer Daumen-Bedienung. */
  padding: 12px 6px;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  margin-left: 4px;
}
.apexlanding .lp-final-cta-link:hover { text-decoration-thickness: 2px; }

/* Final-CTA hat eigene Y-Achse (kein --lp-section-y über .lp-section,
   weil sie full-bleed mit Hintergrund ist und nicht .lp-section nutzt).
   Margin-top: 80 macht Abstand zur Vergleichstabelle.
   Footer kommt direkt darunter ohne weiteren Abstand (Footer hat eigenen
   margin-top im Footer-CSS - kompensiert über border-top). */
.apexlanding .lp-final-cta + .lp-footer { margin-top: 0; }

/* ──────────────────────────────────────────────
 * Sektion 12: FOUNDER-STORY
 *
 * Brief-Format: Quote als visueller Anker oben, dann ein Trenn-Strich
 * und die Signatur (Avatar + Byline + Link) wie unter einem Brief.
 * Chip-Reihe am Boden gibt schnellen Trust-Anchor ohne den Lesefluss
 * zu unterbrechen. Bewusst kein Glow-Effekt: die soften Mint-Toene der
 * Quote-Box und der weisse Card-Hintergrund auf Mint-Soft-Section
 * tragen die Atmosphaere alleine. */
.apexlanding .lp-founder { background: var(--lp-bg-soft); }
.apexlanding .lp-founder .lp-section-head { text-align: center; margin-bottom: 36px; }
.apexlanding .lp-founder .lp-eyebrow { color: var(--lp-teal); justify-content: center; }
.apexlanding .lp-founder .lp-section-title-accent { color: var(--lp-teal); }

.apexlanding .lp-founder-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 44px 36px;
  background: #ffffff;
  border: 1px solid var(--lp-border);
  border-radius: 24px;
  box-shadow: var(--lp-shadow-md);
}

/* Split-Variante: Content links, Bild rechts. Bricht das zentrierte
   Pattern - links die Markenbotschaft, rechts visueller Anker. */
.apexlanding .lp-founder-card-split {
  max-width: 1080px;
  padding: 0;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: stretch;
  overflow: hidden;
}
.apexlanding .lp-founder-content {
  padding: 40px 44px 36px;
  display: flex;
  flex-direction: column;
}
.apexlanding .lp-founder-visual {
  position: relative;
  background: var(--lp-mint-soft);
  min-height: 320px;
}

/* Generischer Bild-Platzhalter: graues Feld mit Icon + Bildbeschreibung
   + Pixel-Masse. Wird ueberall verwendet (Hero, Pain, CTA-BG, Team-Office).
   Spaeter durch echtes <img> ersetzen. */
.apexlanding .lp-image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  background:
    repeating-linear-gradient(45deg, rgba(13,148,136,0.05) 0 10px, transparent 10px 20px),
    linear-gradient(135deg, var(--lp-mint-soft) 0%, #d1e8e3 100%);
  color: var(--lp-text-muted);
  font-size: 13px;
  text-align: center;
}
.apexlanding .lp-image-placeholder [data-lucide] {
  width: 32px;
  height: 32px;
  color: var(--lp-teal);
  opacity: 0.6;
  margin-bottom: 4px;
}
.apexlanding .lp-image-placeholder-label {
  font-weight: 700;
  color: var(--lp-text);
}
.apexlanding .lp-image-placeholder-meta {
  font-size: 11px;
  color: var(--lp-text-light);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

@media (max-width: 840px) {
  /* Mobile: Split kollabiert zu 1-Spalte (Content oben, Bild unten). */
  .apexlanding .lp-founder-card-split {
    grid-template-columns: 1fr;
  }
  .apexlanding .lp-founder-content {
    padding: 28px 22px 26px;
  }
  .apexlanding .lp-founder-visual {
    min-height: 220px;
    border-top: 1px solid var(--lp-border);
  }
}

/* Quote-Marke: dekorative Anfuehrungszeichen oben links der Card,
   leicht verschoben damit der Text darunter Platz hat. */
.apexlanding .lp-founder-quote-mark {
  width: 36px;
  height: 36px;
  color: var(--lp-mint);
  stroke-width: 2.2;
  margin-bottom: 12px;
  display: block;
}

.apexlanding .lp-founder-quote {
  margin: 0;
  padding: 0;
  color: var(--lp-text);
  font-size: 17px;
  line-height: 1.72;
  font-weight: 500;
}
.apexlanding .lp-founder-quote p { margin: 0; }
.apexlanding .lp-founder-quote p + p { margin-top: 14px; }

/* Trenn-Strich zwischen Quote und Signatur - subtiler horizontaler
   Schatten-Strich, kein hartes 1px Border. */
.apexlanding .lp-founder-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lp-border) 18%, var(--lp-border) 82%, transparent);
  margin: 28px 0 22px;
}

/* Signatur-Reihe: Avatar - Byline - flex-spacer - Link. Auf Mobile
   wandert der Link unter Avatar/Byline (flex-wrap) und alignt links. */
.apexlanding .lp-founder-signature {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.apexlanding .lp-founder-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px rgba(13,148,136,0.22);
}
.apexlanding .lp-founder-avatar span { line-height: 1; }
.apexlanding .lp-founder-byline {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.apexlanding .lp-founder-byline-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--lp-text);
  line-height: 1.3;
}
.apexlanding .lp-founder-byline-sub {
  font-size: 13px;
  color: var(--lp-text-muted);
  margin-top: 2px;
}
.apexlanding .lp-founder-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lp-teal);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease;
}
.apexlanding .lp-founder-link:hover { border-bottom-color: var(--lp-teal); }
.apexlanding .lp-founder-link [data-lucide] {
  width: 16px;
  height: 16px;
  transition: transform 0.18s ease;
}
.apexlanding .lp-founder-link:hover [data-lucide] { transform: translateX(2px); }

/* Chip-Reihe: bleibt innerhalb der Card, sitzt direkt unter der
   Signatur als sekundaere Trust-Zeile. Auf Mobile wrappen sie in
   2 Reihen ohne extra Trick. */
.apexlanding .lp-founder-chips {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.apexlanding .lp-founder-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid var(--lp-border);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-text);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.apexlanding .lp-founder-chip:hover {
  border-color: var(--lp-teal);
  transform: translateY(-1px);
}
.apexlanding .lp-founder-chip [data-lucide] {
  width: 14px;
  height: 14px;
  color: var(--lp-teal);
  stroke-width: 2.4;
}

@media (max-width: 840px) {
  /* Auf Mobile kollabiert der Split zu 1-Spalte; das Bild war vorher
     mit 220px min-height noch ein eigener grosser Block. Etwas kuerzen. */
  .apexlanding .lp-founder-visual { min-height: 180px; }
}

@media (max-width: 640px) {
  /* Founder-Card war auf Mobile sehr luftig: 40px+ Padding, 28px Divider-
     Margin, breite Chips die in eigene Zeilen umbrechen, "Mehr ueber uns"
     auf eigener full-width-Zeile. Hier kompakt: kleinere Schriften,
     enger gestapelt, Link inline mit Byline-Zeile. */
  .apexlanding .lp-founder .lp-section-head { margin-bottom: 22px; }
  .apexlanding .lp-founder-card { padding: 22px 18px 22px; border-radius: 18px; }
  .apexlanding .lp-founder-content { padding: 22px 18px 22px; }

  .apexlanding .lp-founder-quote-mark { width: 26px; height: 26px; margin-bottom: 6px; }
  .apexlanding .lp-founder-quote { font-size: 14.5px; line-height: 1.55; }
  .apexlanding .lp-founder-quote p + p { margin-top: 8px; }
  .apexlanding .lp-founder-divider { margin: 16px 0 14px; }

  /* Signatur als kompaktes 2-Zeilen-Layout: Avatar links, Byline rechts
     (eine Zeile), Link darunter aber klein und linksbuendig direkt
     anschliessend - kein full-width-Block mehr. */
  .apexlanding .lp-founder-signature { gap: 10px; }
  .apexlanding .lp-founder-avatar { width: 40px; height: 40px; font-size: 15px; }
  .apexlanding .lp-founder-byline-name { font-size: 14.5px; }
  .apexlanding .lp-founder-byline-sub { font-size: 12px; margin-top: 1px; }
  .apexlanding .lp-founder-link {
    width: auto;
    margin-top: 6px;
    font-size: 13px;
  }

  /* Chips deutlich kompakter, in maximal 2 Zeilen */
  .apexlanding .lp-founder-chips { gap: 6px; margin-top: 14px; }
  .apexlanding .lp-founder-chip {
    font-size: 11.5px;
    padding: 5px 10px;
    gap: 6px;
  }
  .apexlanding .lp-founder-chip [data-lucide] { width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .apexlanding .lp-founder-chip,
  .apexlanding .lp-founder-link [data-lucide] { transition: none; }
}

/* ──────────────────────────────────────────────
 * Sektion 14: FAQ
 *
 * Native <details>/<summary> Accordion: bewusst kein JS, weil Browser
 * das semantisch und keyboard-zugaenglich von Haus aus loesen. Chevron
 * rotiert ueber [open]-Selektor; das Frage-Bar-Padding bleibt gleich,
 * Antwort fliesst darunter ein.
 *
 * Layout: zentrierte Spalte mit max-width 820px, da FAQ-Text gut lesbar
 * sein muss (kein 3-spalten-Layout). Items haben subtilen Border, im
 * geoeffneten Zustand ein Teal-Tint zur visuellen Bestaetigung. */
.apexlanding .lp-faq {
  /* Vorher Mint-Soft. Jetzt Weiss, damit FAQ visuell von Founder
     (Mint) und CTA (dunkel) abgegrenzt ist - kein Mint-Block am Stueck. */
  background: var(--lp-bg);
}
.apexlanding .lp-faq .lp-section-head { text-align: center; margin-bottom: 40px; }
.apexlanding .lp-faq .lp-eyebrow { color: var(--lp-teal); justify-content: center; }

.apexlanding .lp-faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.apexlanding .lp-faq-item {
  background: #ffffff;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-lg);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.apexlanding .lp-faq-item:hover { border-color: #cbd5e1; }
.apexlanding .lp-faq-item[open] {
  border-color: var(--lp-teal);
  box-shadow: 0 6px 18px rgba(13,148,136,0.08);
}

/* <summary> default-Marker abschalten (Pfeil, Disclosure-Triangle).
   Wir liefern unseren eigenen Chevron rechts ueber Lucide. */
.apexlanding .lp-faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 700;
  color: var(--lp-text);
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
.apexlanding .lp-faq-q::-webkit-details-marker { display: none; }
.apexlanding .lp-faq-q::marker { content: ""; }
.apexlanding .lp-faq-q:focus-visible {
  outline: 2px solid var(--lp-teal);
  outline-offset: -2px;
}
.apexlanding .lp-faq-q-text { flex: 1 1 auto; }

.apexlanding .lp-faq-chevron {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--lp-text-muted);
  transition: transform 0.22s ease, color 0.18s ease;
}
.apexlanding .lp-faq-item[open] .lp-faq-chevron {
  transform: rotate(180deg);
  color: var(--lp-teal);
}

.apexlanding .lp-faq-a {
  padding: 0 22px 20px;
  color: var(--lp-text-muted);
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 640px) {
  .apexlanding .lp-faq-q { padding: 16px 18px; font-size: 15px; gap: 12px; }
  .apexlanding .lp-faq-a { padding: 0 18px 18px; font-size: 14.5px; }
  .apexlanding .lp-faq-chevron { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .apexlanding .lp-faq-chevron { transition: none; }
  .apexlanding .lp-faq-item { transition: none; }
}

/* ──────────────────────────────────────────────
 * 7. FOOTER
 * ────────────────────────────────────────────── */
.apexlanding .lp-footer {
  background: var(--lp-bg-page);
  border-top: 1px solid var(--lp-border);
  padding: 64px 0 32px;
  /* Kein margin-top: das wuerde einen weissen Spalt erzeugen, weil
     der Footer nicht direct sibling der letzten Section ist (main
     dazwischen). Atem-Raum macht jetzt das Section-Padding der
     vorherigen Section. */
  margin-top: 0;
}

/* Padding-bottom auf Mobile wird unten im Footer-Mobile-Block gesetzt
   (90px), damit die Sticky-CTA den Footer-Bottom-Bereich nicht ueberdeckt. */
.apexlanding .lp-footer-inner {
  max-width: var(--lp-max-width);
  margin: 0 auto;
  padding: 0 var(--lp-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
  gap: 56px;
  align-items: start;
}
.apexlanding .lp-footer-brand .lp-logo { font-size: 18px; }
.apexlanding .lp-footer-tagline {
  font-size: 14px;
  line-height: 1.55;
  color: var(--lp-text-muted);
  margin-top: 14px;
  max-width: 340px;
}
.apexlanding .lp-footer-trust {
  display: flex; gap: 18px;
  margin-top: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--lp-text-muted);
  list-style: none;
  padding: 0;
}
.apexlanding .lp-footer-trust li {
  display: inline-flex; align-items: center; gap: 6px;
}
.apexlanding .lp-footer-trust [data-lucide] {
  width: 14px; height: 14px;
  color: var(--lp-teal);
}

/* Link-Spalten: nebeneinander auf Desktop, 2 Spalten auf Mobile, 1 Spalte
   bei sehr engen Viewports. Konsistente Gap-Werte fuer ruhige Optik. */
.apexlanding .lp-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.apexlanding .lp-footer-col { min-width: 0; }
.apexlanding .lp-footer-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-text);
  margin: 0 0 14px;
}
.apexlanding .lp-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.apexlanding .lp-footer-links li { margin-bottom: 8px; }
.apexlanding .lp-footer-links a {
  font-size: 14px;
  color: var(--lp-text-muted);
  text-decoration: none;
  transition: color .15s ease;
}
.apexlanding .lp-footer-links a:hover { color: var(--lp-teal); }

/* Newsletter-Signup-Block im Footer: Lead-Magnet zwischen Top-Grid
   und SEO-Block. Optisch eigener Container mit Mint-Soft-Hintergrund. */
.apexlanding .lp-footer-newsletter {
  max-width: var(--lp-max-width);
  margin: 40px auto 0;
  padding: 28px var(--lp-gutter);
  background: linear-gradient(135deg, var(--lp-mint-soft), #fff);
  border: 1px solid rgba(13,148,136,0.20);
  border-radius: 16px;
}
.apexlanding .lp-footer-newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  align-items: center;
  max-width: calc(var(--lp-max-width) - 2 * var(--lp-gutter));
  margin: 0 auto;
}
.apexlanding .lp-footer-newsletter-text h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--lp-text);
}
.apexlanding .lp-footer-newsletter-text p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lp-text-muted);
}
.apexlanding .lp-footer-newsletter-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
}
.apexlanding .lp-footer-newsletter-field { display: block; min-width: 0; }
.apexlanding .lp-footer-newsletter-field input {
  width: 100%;
  padding: 11px 14px;
  font-size: 14.5px;
  font-family: inherit;
  background: #fff;
  border: 1.5px solid var(--lp-border);
  border-radius: var(--lp-r-md);
  color: var(--lp-text);
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.apexlanding .lp-footer-newsletter-field input:focus {
  outline: none;
  border-color: var(--lp-teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,0.15);
}
.apexlanding .lp-footer-newsletter-form .lp-btn {
  padding: 11px 18px;
  font-size: 14.5px;
}
.apexlanding .lp-footer-newsletter-status {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 8px;
}
.apexlanding .lp-footer-newsletter-status.is-success {
  background: #ecfdf5;
  color: #047857;
}
.apexlanding .lp-footer-newsletter-status.is-error {
  background: #fef2f2;
  color: #991b1b;
}
.apexlanding .lp-footer-newsletter-hint {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-footer-newsletter-hint a {
  color: var(--lp-teal-dark);
  text-decoration: underline;
}

/* Screenreader-only Helper (fuer label-Texte die nicht sichtbar sind) */
.apexlanding .lp-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .apexlanding .lp-footer-newsletter { padding: 20px var(--lp-gutter); }
  .apexlanding .lp-footer-newsletter-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .apexlanding .lp-footer-newsletter-text h3 { font-size: 16.5px; }
  .apexlanding .lp-footer-newsletter-form {
    grid-template-columns: 1fr;
  }
  .apexlanding .lp-footer-newsletter-form .lp-btn {
    width: 100%;
    justify-content: center;
  }
}

/* SEO-Block: eigener visuell abgesetzter Container mit Border oben.
   Text-Spalten max-width damit Lesbarkeit auf breitem Desktop nicht
   leidet. Auf Mobile volle Breite. */
.apexlanding .lp-footer-seo {
  max-width: var(--lp-max-width);
  margin: 48px auto 0;
  padding: 32px var(--lp-gutter) 0;
  border-top: 1px solid var(--lp-border);
}
.apexlanding .lp-footer-seo-inner {
  max-width: 920px;
}
.apexlanding .lp-footer-seo-heading {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-text);
  margin: 0 0 12px;
}
.apexlanding .lp-footer-seo p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--lp-text-muted);
  margin: 0 0 10px;
}
.apexlanding .lp-footer-seo p:last-child { margin-bottom: 0; }

.apexlanding .lp-footer-bottom {
  max-width: var(--lp-max-width);
  margin: 32px auto 0;
  padding: 20px var(--lp-gutter) 0;
  border-top: 1px solid var(--lp-border);
  text-align: center;
}
.apexlanding .lp-footer-copy {
  font-size: 13px;
  color: var(--lp-text-muted);
  margin: 0;
}

@media (max-width: 880px) {
  /* Mobile-Hauptlayout: Brand-Block oben, Link-Spalten als 2-Spalten-Grid
     darunter. Cleaner Stack statt frueher chaotischer 2-Spalten-Mix. */
  .apexlanding .lp-footer { padding: 48px 0 28px; }
  .apexlanding .lp-footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .apexlanding .lp-footer-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 18px;
  }
  .apexlanding .lp-footer-tagline { max-width: none; }
}

@media (max-width: 768px) {
  .apexlanding .lp-footer { padding-bottom: 90px; }
}

@media (max-width: 480px) {
  .apexlanding .lp-footer-seo { margin-top: 36px; padding-top: 24px; }
  .apexlanding .lp-footer-seo-heading { font-size: 13px; }
  .apexlanding .lp-footer-seo p { font-size: 12.5px; line-height: 1.6; }
  .apexlanding .lp-footer-bottom { margin-top: 24px; padding-top: 18px; }
  .apexlanding .lp-footer-copy { font-size: 12px; }
}

@media (max-width: 360px) {
  .apexlanding .lp-footer-cols { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────
 * 8. LOGIN-MODAL
 * ────────────────────────────────────────────── */
.apexlanding .lp-modal {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  /* Wenn die Modal-Karte hoeher ist als der Viewport (z.B. Register-Modal
     mit vielen Feldern auf Mobile), erlauben wir Scrollen INNERHALB des
     Modal-Containers. Sonst war der Submit-Button unerreichbar. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.apexlanding .lp-modal[hidden] { display: none; }
.apexlanding .lp-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}
.apexlanding .lp-modal-card {
  position: relative;
  width: 100%; max-width: 420px;
  background: #fff;
  border-radius: var(--lp-r-lg);
  box-shadow: var(--lp-shadow-lg);
  padding: 32px 28px 28px;
  animation: lpModalIn .18s ease-out;
}
@keyframes lpModalIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.apexlanding .lp-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--lp-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.apexlanding .lp-modal-close:hover {
  background: var(--lp-bg-soft);
  color: var(--lp-text);
}
.apexlanding .lp-modal-head h2 {
  font-size: 22px;
  margin-bottom: 4px;
}
.apexlanding .lp-modal-head p {
  font-size: 14px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-modal-form {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 22px;
}
/* hidden-Attribut respektieren — der flex-display von oben wuerde es sonst
   ueberschreiben (Browser-Default [hidden] reicht nicht gegen expliziten
   display-Setter). Wichtig fuer 2FA-Step-Wechsel im Login-Modal. */
.apexlanding .lp-modal-form[hidden] { display: none; }

/* Login-Modal im 2FA-Step kompakter: Header („Bei APEX fastlane einloggen")
   ausblenden + weniger Margin. Wird per body-Klasse lp-mode-2fa getriggert. */
.apexlanding .lp-modal.is-2fa-step .lp-modal-head { display: none; }
.apexlanding .lp-modal.is-2fa-step #lp-login-step2 { margin-top: 8px; }

/* 2FA-Step im Login-Modal — kompakt, kein doppelter Header */
.apexlanding .lp-2fa-head {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; margin-bottom: 4px; text-align: center;
}
.apexlanding .lp-2fa-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--lp-teal), #14b8a6);
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.apexlanding .lp-2fa-title {
  margin: 0; font-size: 17px; font-weight: 700; color: var(--lp-text);
}
.apexlanding .lp-2fa-sub {
  margin: 0; font-size: 13px; color: var(--lp-text-muted); line-height: 1.45;
}
.apexlanding .lp-2fa-input {
  font-family: 'Menlo','Monaco',monospace;
  font-size: 22px; font-weight: 700; text-align: center; letter-spacing: 0.28em;
}
.apexlanding .lp-2fa-trust {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--lp-text-muted); cursor: pointer;
}
.apexlanding .lp-2fa-trust input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--lp-teal);
}
.apexlanding .lp-2fa-alt {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; color: var(--lp-text-muted);
  padding-top: 10px; border-top: 1px solid var(--lp-border);
}
.apexlanding .lp-2fa-alt a { color: var(--lp-teal); text-decoration: none; }
.apexlanding .lp-2fa-alt a:hover { text-decoration: underline; }
.apexlanding .lp-2fa-email-sent {
  display: none;
  font-size: 12px; color: var(--lp-teal);
  text-align: center; padding: 6px 8px;
  background: rgba(13,148,136,0.08); border-radius: 6px;
}
.apexlanding .lp-2fa-email-sent.is-visible { display: block; }
.apexlanding .lp-2fa-help {
  font-size: 12px; color: var(--lp-text-muted); text-align: center;
}
.apexlanding .lp-2fa-help a { color: var(--lp-teal); text-decoration: none; }
.apexlanding .lp-2fa-help a:hover { text-decoration: underline; }
.apexlanding .lp-field {
  display: flex; flex-direction: column; gap: 6px;
}
.apexlanding .lp-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--lp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.apexlanding .lp-field input {
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1.5px solid var(--lp-border);
  border-radius: var(--lp-r-md);
  background: #fff;
  color: var(--lp-text);
  transition: border-color .15s ease, box-shadow .15s ease;
  min-height: 48px;
}
.apexlanding .lp-field input:focus {
  outline: none;
  border-color: var(--lp-teal);
  box-shadow: 0 0 0 4px rgba(13,148,136,0.12);
}
/* Inline-Error im Login-Modal (statt redirect zur alten Login-Seite) */
.apexlanding .lp-modal-error {
  padding: 10px 12px;
  background: var(--lp-red-soft);
  color: #6b1f1f;
  border: 1px solid rgba(163,45,45,0.30);
  border-radius: var(--lp-r-md);
  font-size: 13px;
  line-height: 1.45;
}
.apexlanding .lp-modal-error[hidden] { display: none; }

.apexlanding .lp-modal-foot {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 8px;
  font-size: 13px;
  color: var(--lp-text-muted);
  margin-top: 8px;
}
.apexlanding .lp-modal-secondary,
.apexlanding .lp-modal-foot a { color: var(--lp-teal); font-weight: 500; }
.apexlanding .lp-modal-divider { color: var(--lp-text-light); }

/* Mobile-Anpassung */
@media (max-width: 640px) {
  /* Modal beginnt am oberen Rand statt zentriert - sonst landet bei
     einem langen Register-Form die Headline ausserhalb des Viewports
     und der Submit-Button ist nicht erreichbar. Plus genug vertikaler
     Innen-Abstand zum Backdrop fuer angenehmes Scroll-Feeling. */
  .apexlanding .lp-modal {
    align-items: flex-start;
    padding: 16px 12px 32px;
  }
  .apexlanding .lp-modal-card {
    margin: 8px 0;
  }
}
@media (max-width: 480px) {
  .apexlanding .lp-modal-card { padding: 28px 20px 22px; }
}

/* ──────────────────────────────────────────────
 * IMAGE SLOTS - alle 6 austauschbaren Bild-Platzhalter
 *
 * Jeder Slot ist ein <img>-Tag mit direkter src auf einen SVG-Platzhalter
 * unter /img/landing/<id>.svg. Zum Austausch: gleiche Datei ueberschreiben
 * ODER src-Attribut auf .jpg/.png aendern wenn anderes Format kommt.
 *
 * Slot-Liste:
 *   hero-seller          (Hero, Backdrop hinter Mockup)
 *   pain-chaos-desk      (Pain Section Background)
 *   process-illustration (3-Step ueber den Schritten)
 *   team-office          (Founder Split-Screen rechts)
 *   product-trinkflasche / -tshirt / -grill (Before/After Nachher-Karten)
 *   cta-success          (Final CTA Section Background)
 * ────────────────────────────────────────────── */

/* Hero-Seller-JPEG ist aus dem Hero entfernt (Foto kollidierte mit dem
   Mockup-Layout). Das Bild bleibt unter /img/landing/hero-seller.jpeg
   verfuegbar fuer spaeteren Einsatz (Founder, Sub-Page, etc.). Hier nichts
   mehr zu stylen - lp-hero-mockup laeuft wieder mit der Default-Regel
   weiter oben in der Datei. */

/* Pain: Hintergrundbild mit Container-overlay damit Text lesbar bleibt.
   Z-INDEX-Stack (wichtig - im ersten Wurf hatten beide z:0 und das Bild
   ueberschrieb den Overlay):
     z:0 -> Bild (lp-pain-bg)
     z:1 -> Weiss-Overlay (::before)
     z:2 -> Content (.lp-container)
   Bild bleibt nur als atmosphaerischer Hauch sichtbar, Text liegt
   garantiert ueber dem Weiss. */
.apexlanding .lp-pains {
  position: relative;
  overflow: hidden;
}
.apexlanding .lp-pain-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.45;
}
.apexlanding .lp-pains::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(247,248,250,0.79) 100%);
  z-index: 1;
  pointer-events: none;
}
.apexlanding .lp-pains > .lp-container { position: relative; z-index: 2; }

/* 3-Step: process-illustration sitzt zwischen Header und Steps als
   visueller Anker. Volle Breite mit Soft-Border. */
.apexlanding .lp-process-visual {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto 48px;
  border-radius: var(--lp-r-lg);
  border: 1px solid var(--lp-border);
  background: #fff;
}
@media (max-width: 720px) {
  .apexlanding .lp-process-visual { margin-bottom: 32px; }
}

/* Founder: team-office Bild fuellt die Visual-Spalte des Splits.
   object-fit:cover sorgt fuer sauberen Bildrand egal welches Format. */
.apexlanding .lp-founder-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
@media (max-width: 840px) {
  .apexlanding .lp-founder-image { min-height: 220px; }
}

/* Before/After: Produktbilder in den Nachher-Karten. img-Variante des
   .lp-listing-image - die div-Variante (is-empty fuer Vorher) bleibt
   wie sie ist mit grauem Hintergrund + image-off Icon. */
.apexlanding img.lp-listing-image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #e2e8f0;
}

/* Final CTA: cta-success als Backdrop, Teal-Gradient liegt als Overlay
   darueber. Das existierende Section-Background wird zur Overlay-Funktion
   ueber das Pseudo-Element gezogen, damit das Bild ueberhaupt sichtbar ist. */
.apexlanding .lp-final-cta {
  background: var(--lp-teal-dark);
}
.apexlanding .lp-cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.25;
}
.apexlanding .lp-final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(94,234,212,0.50) 0%, transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(13,148,136,0.85) 0%, transparent 60%),
    linear-gradient(135deg, rgba(13,148,136,0.85) 0%, rgba(11,125,114,0.92) 100%);
  pointer-events: none;
}
.apexlanding .lp-final-cta-inner { position: relative; z-index: 1; }

/* Coming-Soon Stub-Sektion: minimal styled, nutzt nur die Basis-Tokens. */
.apexlanding .lp-coming-soon {
  background: var(--lp-bg-soft);
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.apexlanding .lp-coming-soon .lp-eyebrow {
  color: var(--lp-teal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ──────────────────────────────────────────────
 * REGISTER-MODAL (Beta-Waitlist)
 *
 * Erweitert das bestehende lp-modal um eine breitere Variante und
 * einen Erfolgs-Zustand. Zwei .lp-register-state Container im Markup,
 * JS schaltet zwischen Form (default) und Success (nach Submit).
 * ────────────────────────────────────────────── */

/* Breitere Card-Variante: das Register-Form hat mehr Felder als das
   Login (5 Inputs + Checkbox + Erklaer-Block) und braucht mehr Platz. */
.apexlanding .lp-modal-wide .lp-modal-card { max-width: 560px; padding: 36px 36px 30px; }
@media (max-width: 640px) {
  .apexlanding .lp-modal-wide .lp-modal-card { padding: 28px 22px 24px; }
}

/* State-Switching: Form sichtbar by default, Success unsichtbar bis JS
   den hidden-Switch vornimmt. */
.apexlanding .lp-register-state[hidden] { display: none; }

/* Erklaer-Block ueber dem Formular - Mint-Tint, 3-Schritte-Liste mit
   Nummern-Badges. Macht die Waitlist-Mechanik VOR dem Ausfuellen klar. */
.apexlanding .lp-register-explain {
  margin: 18px 0 24px;
  padding: 16px 18px;
  background: var(--lp-mint-soft);
  border: 1px solid rgba(13,148,136,0.18);
  border-radius: var(--lp-r-md);
}
.apexlanding .lp-register-explain-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-register-explain-title [data-lucide] {
  width: 16px; height: 16px;
}
.apexlanding .lp-register-explain-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: step;
}
.apexlanding .lp-register-explain-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lp-text);
}
.apexlanding .lp-register-step-num {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lp-teal);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  margin-top: 1px;
}

/* Optional-Label rechts neben Field-Label */
.apexlanding .lp-field-optional {
  font-weight: 400;
  font-size: 12px;
  color: var(--lp-text-light);
  margin-left: 4px;
}
.apexlanding .lp-field-hint {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--lp-text-muted);
  line-height: 1.4;
}

/* Zwei Felder nebeneinander (Passwort + Passwort bestaetigen) */
.apexlanding .lp-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .apexlanding .lp-field-row { grid-template-columns: 1fr; }
}

/* AGB-Checkbox: Label und Box auf eigener Zeile, Text nimmt sich Platz */
.apexlanding .lp-field-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--lp-text-muted);
  cursor: pointer;
}
.apexlanding .lp-field-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 2px;
  accent-color: var(--lp-teal);
  cursor: pointer;
}
.apexlanding .lp-field-checkbox a {
  color: var(--lp-teal);
  text-decoration: underline;
}

/* ── Success-State ────────────────────────────────────────────────── */
.apexlanding .lp-register-success-state { text-align: left; }
.apexlanding .lp-register-success-icon {
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px rgba(13,148,136,0.28);
}
.apexlanding .lp-register-success-icon [data-lucide] {
  width: 36px; height: 36px;
  color: #fff;
  stroke-width: 3;
}
.apexlanding .lp-register-success-position {
  color: var(--lp-teal);
  font-size: 22px;
  font-weight: 800;
}

.apexlanding .lp-register-success-block {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: var(--lp-r-md);
  background: #fff;
  border: 1px solid var(--lp-border);
}
.apexlanding .lp-register-success-block h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--lp-text);
}
.apexlanding .lp-register-success-block h4 [data-lucide] {
  width: 16px; height: 16px;
  color: var(--lp-teal);
}
.apexlanding .lp-register-success-block p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lp-text-muted);
}
.apexlanding .lp-register-success-block p strong {
  color: var(--lp-text);
}

/* Mail-Block (top): Bestaetigung mit Email-Anzeige - Mint-Hintergrund */
.apexlanding .lp-register-success-mail {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--lp-mint-soft);
  border-color: rgba(13,148,136,0.30);
}
.apexlanding .lp-register-success-mail [data-lucide] {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  color: var(--lp-teal-dark);
  margin-top: 2px;
}
.apexlanding .lp-register-success-mail p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--lp-text);
}

/* Spam-Block: Warnstil mit gelb-orangenem Hauch */
.apexlanding .lp-register-success-spam {
  background: #fff8e6;
  border-color: rgba(186,117,23,0.30);
}
.apexlanding .lp-register-success-spam h4 { color: var(--lp-amber); }
.apexlanding .lp-register-success-spam h4 [data-lucide] { color: var(--lp-amber); }

.apexlanding .lp-register-success-support {
  margin: 20px 0 16px;
  font-size: 13px;
  text-align: center;
  color: var(--lp-text-muted);
}
.apexlanding .lp-register-success-support a {
  color: var(--lp-teal);
  font-weight: 700;
  text-decoration: underline;
}

/* ──────────────────────────────────────────────
 * BLOG
 * Index-Grid + Post-Typografie + Related-Posts
 * ────────────────────────────────────────────── */

/* ── Index ─────────────────────────────────────── */
.apexlanding .lp-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

/* ── Pagination ───────────────────────────────────
   Page-Navigation unter dem Grid. Pfeile + Zahlen + Ellipsis.
   Aktive Seite mit Gradient hervorgehoben. Mobile: kompakter. */
.apexlanding .lp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 40px auto 0;
  flex-wrap: wrap;
}
.apexlanding .lp-pagination-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.apexlanding .lp-pagination-page,
.apexlanding .lp-pagination-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-md);
  background: #fff;
  color: var(--lp-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.apexlanding .lp-pagination-page:hover,
.apexlanding .lp-pagination-arrow:hover {
  border-color: var(--lp-teal);
  color: var(--lp-teal-dark);
}
.apexlanding .lp-pagination-page.is-current {
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-teal-dark));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(13,148,136,0.28);
}
.apexlanding .lp-pagination-arrow [data-lucide] {
  width: 16px; height: 16px;
}
.apexlanding .lp-pagination-arrow.is-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}
.apexlanding .lp-pagination-ellipsis {
  padding: 0 4px;
  color: var(--lp-text-muted);
  font-weight: 600;
  user-select: none;
}

@media (max-width: 480px) {
  .apexlanding .lp-pagination { gap: 4px; margin-top: 28px; }
  .apexlanding .lp-pagination-page,
  .apexlanding .lp-pagination-arrow {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    font-size: 13px;
  }
}
.apexlanding .lp-blog-card {
  background: #ffffff;
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.apexlanding .lp-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--lp-shadow-md);
  border-color: rgba(13,148,136,0.30);
}
.apexlanding .lp-blog-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.apexlanding .lp-blog-card-cover {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  background-color: #e2e8f0;
}
.apexlanding .lp-blog-card-cover-placeholder {
  background: linear-gradient(135deg, var(--lp-mint-soft), #d1e8e3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.apexlanding .lp-blog-card-cover-placeholder [data-lucide] {
  width: 40px;
  height: 40px;
  color: var(--lp-teal);
  opacity: 0.5;
}
.apexlanding .lp-blog-card-body { padding: 20px 22px 22px; }
.apexlanding .lp-blog-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--lp-text-muted);
  margin-bottom: 10px;
}
.apexlanding .lp-blog-card-cat {
  display: inline-block;
  padding: 3px 9px;
  background: var(--lp-mint-soft);
  color: var(--lp-teal-dark);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.apexlanding .lp-blog-card-dot { color: var(--lp-text-light); }
.apexlanding .lp-blog-card-title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--lp-text);
}
.apexlanding .lp-blog-card-excerpt {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.apexlanding .lp-blog-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-blog-card-arrow {
  color: var(--lp-teal);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.apexlanding .lp-blog-card-arrow [data-lucide] {
  width: 14px;
  height: 14px;
  transition: transform 0.18s ease;
}
.apexlanding .lp-blog-card:hover .lp-blog-card-arrow [data-lucide] {
  transform: translateX(3px);
}

/* ── Post (Article-Page) ──────────────────────── */
.apexlanding .lp-breadcrumbs {
  margin: 0 0 24px;
  font-size: 13px;
}
.apexlanding .lp-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.apexlanding .lp-breadcrumbs li {
  color: var(--lp-text-muted);
}
.apexlanding .lp-breadcrumbs li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--lp-text-light);
}
.apexlanding .lp-breadcrumbs a {
  color: var(--lp-teal);
  text-decoration: none;
}
.apexlanding .lp-breadcrumbs a:hover { text-decoration: underline; }

/* Mobile-Zurueck-Link: Default versteckt (Desktop zeigt Breadcrumbs),
   wird auf ≤640px sichtbar gemacht. Kompakter Pfeil + Text statt
   3-stufiger Brotkrumen-Pfad. */
.apexlanding .lp-blog-post-back {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-teal-dark);
  text-decoration: none;
}
.apexlanding .lp-blog-post-back [data-lucide] {
  width: 16px; height: 16px;
}
.apexlanding .lp-blog-post-back:hover { text-decoration: underline; }

.apexlanding .lp-blog-post {
  background: #ffffff;
}
.apexlanding .lp-blog-post .lp-container {
  max-width: 760px;
}
.apexlanding .lp-blog-post-head { margin-bottom: 28px; }
.apexlanding .lp-blog-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--lp-text-muted);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.apexlanding .lp-blog-post-title {
  margin: 0 0 14px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--lp-text);
}
.apexlanding .lp-blog-post-lead {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--lp-text-muted);
}
.apexlanding .lp-blog-post-author {
  font-size: 14px;
  color: var(--lp-text-muted);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--lp-border-soft);
}
.apexlanding .lp-blog-post-author-link {
  color: var(--lp-teal-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.apexlanding .lp-blog-post-author-link:hover { border-bottom-color: var(--lp-teal-dark); }
.apexlanding .lp-blog-post-author-sub { color: var(--lp-text-light); }
.apexlanding .lp-blog-post-cover {
  width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 24px 0 32px;
}

/* Article-Body Typography. Markdown rendert in <h1-6>, <p>, <ul>, <ol>,
   <blockquote>, <pre>, <code>, <a>. Wir stylen die alle hier zentral. */
.apexlanding .lp-blog-post-content {
  font-size: 17px;
  line-height: 1.75;
  color: var(--lp-text);
}
.apexlanding .lp-blog-post-content > * + * { margin-top: 1.1em; }
.apexlanding .lp-blog-post-content h2 {
  margin: 2em 0 0.6em;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.apexlanding .lp-blog-post-content h3 {
  margin: 1.8em 0 0.5em;
  font-size: 20px;
  font-weight: 800;
}
.apexlanding .lp-blog-post-content p {
  color: var(--lp-text);
}
.apexlanding .lp-blog-post-content a {
  color: var(--lp-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.apexlanding .lp-blog-post-content a:hover { color: var(--lp-teal-dark); }
.apexlanding .lp-blog-post-content ul,
.apexlanding .lp-blog-post-content ol {
  padding-left: 24px;
}
.apexlanding .lp-blog-post-content ul li,
.apexlanding .lp-blog-post-content ol li {
  margin-bottom: 0.4em;
}
.apexlanding .lp-blog-post-content blockquote {
  margin: 1.4em 0;
  padding: 12px 20px;
  border-left: 3px solid var(--lp-teal);
  background: var(--lp-mint-soft);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--lp-text-muted);
}
.apexlanding .lp-blog-post-content code {
  padding: 2px 6px;
  background: var(--lp-bg-page);
  border-radius: 4px;
  font-size: 0.92em;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
.apexlanding .lp-blog-post-content pre {
  margin: 1.4em 0;
  padding: 16px 18px;
  background: #0f172a;
  color: #e6fbf6;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.55;
}
.apexlanding .lp-blog-post-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}
.apexlanding .lp-blog-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 1.2em 0;
}
.apexlanding .lp-blog-post-content strong { color: var(--lp-text); font-weight: 700; }

/* ── Tool-Cross-Card (zwischen Article-Body und CTA) ──
   Verlinkt vom Artikel zum thematisch passenden kostenlosen Tool.
   Internal-Linking-Strategie - haelt User auf der Site und staerkt
   die Tool-Page-Authority durch kontextuelle Backlinks. */
.apexlanding .lp-blog-tool-cross {
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 40px 0 0;
  padding: 22px 26px;
  background: linear-gradient(135deg, var(--lp-mint-soft), #fff);
  border: 1px solid rgba(13,148,136,0.28);
  border-radius: 16px;
}
.apexlanding .lp-blog-tool-cross-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(13,148,136,0.25);
}
.apexlanding .lp-blog-tool-cross-icon [data-lucide] { width: 22px; height: 22px; }
.apexlanding .lp-blog-tool-cross-body { flex: 1; min-width: 0; }
.apexlanding .lp-blog-tool-cross-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-teal-dark);
  margin-bottom: 4px;
}
.apexlanding .lp-blog-tool-cross-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
  color: var(--lp-text);
}
.apexlanding .lp-blog-tool-cross-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lp-text-muted);
}
.apexlanding .lp-blog-tool-cross-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  background: #fff;
  border: 1.5px solid var(--lp-teal);
  border-radius: 9999px;
  color: var(--lp-teal-dark);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.apexlanding .lp-blog-tool-cross-link:hover {
  background: var(--lp-teal);
  color: #fff;
}
.apexlanding .lp-blog-tool-cross-link [data-lucide] { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .apexlanding .lp-blog-tool-cross {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 18px 20px;
  }
  .apexlanding .lp-blog-tool-cross-icon { width: 40px; height: 40px; }
  .apexlanding .lp-blog-tool-cross-icon [data-lucide] { width: 18px; height: 18px; }
  .apexlanding .lp-blog-tool-cross-title { font-size: 15.5px; }
  .apexlanding .lp-blog-tool-cross-desc { font-size: 13px; }
  .apexlanding .lp-blog-tool-cross-link {
    align-self: stretch;
    justify-content: center;
  }
}

/* ── Post-Footer: CTA + Related ────────────────── */
.apexlanding .lp-blog-post-foot { margin-top: 48px; }
.apexlanding .lp-blog-post-cta {
  margin: 0 0 40px;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--lp-mint-soft), #e6fbf6);
  border: 1px solid rgba(13,148,136,0.30);
  border-radius: 16px;
  text-align: center;
}
.apexlanding .lp-blog-post-cta h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
}
.apexlanding .lp-blog-post-cta p {
  margin: 0 0 18px;
  font-size: 14.5px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-blog-related-heading {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 800;
  color: var(--lp-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.apexlanding .lp-blog-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.apexlanding .lp-blog-related-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  z-index: 1;
}
.apexlanding .lp-blog-related-card:hover {
  border-color: var(--lp-teal);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(13,148,136,0.14);
}
.apexlanding .lp-blog-related-cover {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--lp-mint-soft);
}
.apexlanding .lp-blog-related-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--lp-mint-soft), #e6fbf6);
}
.apexlanding .lp-blog-related-cover-placeholder [data-lucide] {
  width: 32px; height: 32px;
  color: var(--lp-teal);
  opacity: 0.6;
}
.apexlanding .lp-blog-related-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  flex: 1;
}
.apexlanding .lp-blog-related-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--lp-text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.apexlanding .lp-blog-related-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 12px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-blog-related-dot { color: var(--lp-text-light); }
.apexlanding .lp-blog-related-arrow {
  margin-left: auto;
  color: var(--lp-teal);
  display: inline-flex;
  transition: transform 0.2s ease;
}
.apexlanding .lp-blog-related-card:hover .lp-blog-related-arrow {
  transform: translateX(3px);
}
.apexlanding .lp-blog-related-arrow [data-lucide] {
  width: 14px; height: 14px;
}

@media (max-width: 880px) {
  .apexlanding .lp-blog-related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
@media (max-width: 520px) {
  .apexlanding .lp-blog-related-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .apexlanding .lp-blog-related-cover { aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
  /* Mobile: Breadcrumbs raus, kompakter Zurueck-Link rein.
     Texte deutlich kleiner - der Lesefluss wird auf engen Screens
     mit kleinerer Body-Schrift angenehmer (170-180px Lesezeilen-
     Breite ist auf 360px Viewport mit 17px font-size sonst zu viel
     Text pro Zeile, kein guter Lese-Rhythmus). */
  .apexlanding .lp-breadcrumbs { display: none; }
  .apexlanding .lp-blog-post-back { display: inline-flex; }

  .apexlanding .lp-blog-post-head { margin-bottom: 20px; }
  .apexlanding .lp-blog-post-meta { font-size: 12px; gap: 6px; margin-bottom: 10px; }
  .apexlanding .lp-blog-post-title {
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .apexlanding .lp-blog-post-lead {
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 14px;
  }
  .apexlanding .lp-blog-post-author {
    font-size: 13px;
    padding-bottom: 18px;
  }
  .apexlanding .lp-blog-post-cover {
    margin: 18px 0 24px;
    border-radius: 12px;
  }

  .apexlanding .lp-blog-post-content {
    font-size: 15px;
    line-height: 1.65;
  }
  .apexlanding .lp-blog-post-content h2 {
    font-size: 18.5px;
    margin: 1.6em 0 0.5em;
  }
  .apexlanding .lp-blog-post-content h3 {
    font-size: 16px;
    margin: 1.4em 0 0.4em;
  }
  .apexlanding .lp-blog-post-content blockquote {
    padding: 10px 14px;
    font-size: 14.5px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT / UEBER UNS (views/landing/pages/about.ejs)
   ═══════════════════════════════════════════════════════════════ */

.apexlanding .lp-container-narrow { max-width: 760px; margin: 0 auto; }

/* ════════════════════════════════════════════════════════════════
   ABOUT-PAGE LAYOUT-KONSISTENZ
   ════════════════════════════════════════════════════════════════
   Ziel: alle Sektionen haben EINE einheitliche outer-edge (920px),
   egal ob Text- oder Card-Section. Vorher Mix aus 760px (Text) und
   1200px (Cards) - sah wie zerklueftete Seite aus.

   Loesung: in JEDER .lp-about-* Sektion bekommt der .lp-container
   max-width 920px. Cards verteilen sich dann auf 920px statt 1200px,
   Text-Sektionen sind auch 920px breit aber durch CSS-typografische
   Eigenschaften (kein hartes max-width auf p) ueber natuerliche Zeilen-
   laenge gezaehmt. */
.apexlanding .lp-about-hero .lp-container,
.apexlanding .lp-about-story .lp-container,
.apexlanding .lp-about-brands .lp-container,
.apexlanding .lp-about-values .lp-container,
.apexlanding .lp-about-team .lp-container,
.apexlanding .lp-about-products .lp-container,
.apexlanding .lp-about-contact .lp-container {
  max-width: 920px;
}

/* Section-Paddings fuer die About-Page.
   .apexlanding .lp-section setzt global `padding: var(--lp-section-y) 0`,
   hier ueberschreiben wir per Sektion mit !important fuer kontrollierte
   Whitespace-Hierarchie zwischen Hero/Story (kompakt) und den
   eigenstaendigen Sektionen drunter (mit klarer Trennung). */
.apexlanding .lp-about-hero     { padding: 96px 0 24px !important; }
.apexlanding .lp-about-hero .lp-section-head { margin-bottom: 0; }
.apexlanding .lp-about-story    { padding: 24px 0 56px !important; }
.apexlanding .lp-about-brands   { padding: 56px 0 56px !important; }
.apexlanding .lp-about-values   { padding: 56px 0 56px !important; }
.apexlanding .lp-about-team     { padding: 56px 0 56px !important; }
.apexlanding .lp-about-products { padding: 56px 0 56px !important; }
.apexlanding .lp-about-contact  { padding: 56px 0 80px !important; }

.apexlanding .lp-about-prose {
  font-size: 17px;
  line-height: 1.75;
  color: var(--lp-text);
}
.apexlanding .lp-about-prose h2 {
  margin: 32px 0 16px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.apexlanding .lp-about-prose p { margin-bottom: 16px; }
.apexlanding .lp-about-prose p:last-child { margin-bottom: 0; }

.apexlanding .lp-about-values { padding-top: 72px; padding-bottom: 72px; }
.apexlanding .lp-about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.apexlanding .lp-about-value-card {
  padding: 28px 26px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.apexlanding .lp-about-value-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,148,136,0.12);
}
.apexlanding .lp-about-value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--lp-mint-soft);
  border-radius: 12px;
  color: var(--lp-teal-dark);
  margin-bottom: 16px;
}
.apexlanding .lp-about-value-icon [data-lucide] {
  width: 24px;
  height: 24px;
}
.apexlanding .lp-about-value-card h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--lp-text);
}
.apexlanding .lp-about-value-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-text-muted);
}

/* (padding wird oben im Sammel-Selektor gesetzt - hier nichts mehr) */
.apexlanding .lp-about-team-card {
  padding: 36px 32px;
  background: linear-gradient(135deg, var(--lp-mint-soft), #fff);
  border: 1px solid var(--lp-border);
  border-radius: 20px;
}
.apexlanding .lp-about-team-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}
.apexlanding .lp-about-team-logo {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  border-radius: 16px;
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 18px rgba(13,148,136,0.22);
}
.apexlanding .lp-about-team-name {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lp-text);
}
.apexlanding .lp-about-team-sub {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-about-team-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--lp-text);
}
.apexlanding .lp-about-team-body p { margin: 0 0 14px; }
.apexlanding .lp-about-team-body p:last-child { margin-bottom: 0; }
.apexlanding .lp-about-team-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
}
.apexlanding .lp-about-team-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lp-text);
}
.apexlanding .lp-about-team-chips [data-lucide] {
  width: 14px;
  height: 14px;
  color: var(--lp-teal-dark);
}

/* (padding wird oben im Sammel-Selektor gesetzt - hier nichts mehr) */
.apexlanding .lp-about-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.apexlanding .lp-about-contact-card {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.apexlanding .lp-about-contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,148,136,0.12);
}
.apexlanding .lp-about-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--lp-mint-soft);
  border-radius: 50%;
  color: var(--lp-teal-dark);
  margin-bottom: 16px;
}
.apexlanding .lp-about-contact-icon [data-lucide] {
  width: 26px;
  height: 26px;
}
.apexlanding .lp-about-contact-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--lp-text);
}
.apexlanding .lp-about-contact-card p {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--lp-text-muted);
  line-height: 1.5;
}
.apexlanding .lp-about-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lp-teal);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  word-break: break-all;
}
.apexlanding .lp-about-contact-link:hover { color: var(--lp-teal-dark); }
.apexlanding .lp-about-contact-link [data-lucide] { width: 14px; height: 14px; }
.apexlanding .lp-about-contact-foot {
  margin-top: 32px;
  text-align: center;
  font-size: 14px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-about-contact-foot a {
  color: var(--lp-teal);
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 720px) {
  .apexlanding .lp-about-values-grid { grid-template-columns: 1fr; }
  .apexlanding .lp-about-contact-grid { grid-template-columns: 1fr; }
  .apexlanding .lp-about-team-card { padding: 28px 22px; }
  .apexlanding .lp-about-team-head { flex-direction: column; align-items: flex-start; text-align: left; }
  .apexlanding .lp-about-prose h2 { font-size: 22px; }
  .apexlanding .lp-about-prose { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS (home.ejs Sektion 11b)
   ═══════════════════════════════════════════════════════════════ */

.apexlanding .lp-testimonials { padding-top: 60px; padding-bottom: 60px; background: var(--lp-bg-soft, #f8fafc); }
.apexlanding .lp-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.apexlanding .lp-testimonial-card {
  padding: 28px 26px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.apexlanding .lp-testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,148,136,0.10);
}
.apexlanding .lp-testimonial-stars {
  display: inline-flex;
  gap: 2px;
}
.apexlanding .lp-testimonial-stars [data-lucide] {
  width: 16px;
  height: 16px;
}
.apexlanding .lp-star-filled {
  color: #f59e0b;
  fill: #f59e0b;
}
.apexlanding .lp-star-empty {
  color: #cbd5e1;
}
.apexlanding .lp-testimonial-quote {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--lp-text);
  font-style: normal;
  position: relative;
}
.apexlanding .lp-testimonial-quote::before {
  content: '"';
  position: absolute;
  left: -8px;
  top: -12px;
  font-size: 36px;
  font-weight: 800;
  color: var(--lp-teal);
  opacity: 0.35;
  line-height: 1;
}
.apexlanding .lp-testimonial-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--lp-border);
}
.apexlanding .lp-testimonial-avatar {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.apexlanding .lp-testimonial-byline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.apexlanding .lp-testimonial-byline strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--lp-text);
  letter-spacing: -0.01em;
}
.apexlanding .lp-testimonial-byline span {
  font-size: 12px;
  color: var(--lp-text-muted);
}

@media (max-width: 980px) {
  .apexlanding .lp-testimonials-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   DEMO-SECTION (home.ejs Sektion 4b)
   ═══════════════════════════════════════════════════════════════ */

.apexlanding .lp-demo { padding-top: 60px; padding-bottom: 60px; }

.apexlanding .lp-demo-player {
  position: relative;
  margin: 40px auto 0;
  max-width: 920px;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(13,148,136,0.18);
}

/* Echtes Video-Element wenn vorhanden (User-Aktivierung) */
.apexlanding .lp-demo-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #0f172a;
}

/* Coming-Soon-Placeholder mit Play-Button-Aesthetic */
.apexlanding .lp-demo-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 30%, rgba(94,234,212,0.20) 0%, transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(13,148,136,0.30) 0%, transparent 55%),
    linear-gradient(135deg, #0f172a 0%, #134e4a 100%);
  text-decoration: none;
  position: relative;
  transition: filter .25s ease;
}
.apexlanding .lp-demo-placeholder:hover { filter: brightness(1.08); }
.apexlanding .lp-demo-placeholder:hover .lp-demo-play-button {
  transform: scale(1.06);
}

.apexlanding .lp-demo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px 24px;
  text-align: center;
  color: #fff;
}

.apexlanding .lp-demo-play-button {
  width: 96px;
  height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 28px rgba(0,0,0,0.30);
  transition: transform .25s ease;
}
.apexlanding .lp-demo-play-button [data-lucide] {
  width: 36px;
  height: 36px;
  color: var(--lp-teal);
  margin-left: 4px; /* optisch zentrieren - Play-Dreieck hat Massenmittelpunkt rechts */
  fill: var(--lp-teal);
}

.apexlanding .lp-demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.apexlanding .lp-demo-badge [data-lucide] {
  width: 12px;
  height: 12px;
}

.apexlanding .lp-demo-status {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  max-width: 460px;
  color: rgba(255,255,255,0.92);
}
.apexlanding .lp-demo-status-cta {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--lp-mint, #5eead4);
  font-weight: 600;
}

/* Time-marker-Liste unter dem Player */
.apexlanding .lp-demo-bullets {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 40px auto 0;
  padding: 0;
  max-width: 920px;
}
.apexlanding .lp-demo-bullets li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 14px;
}
.apexlanding .lp-demo-bullets [data-lucide] {
  width: 22px;
  height: 22px;
  color: var(--lp-teal-dark);
  margin-bottom: 4px;
}
.apexlanding .lp-demo-bullets strong {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-teal);
  letter-spacing: 0.04em;
}
.apexlanding .lp-demo-bullets span {
  font-size: 14px;
  color: var(--lp-text);
  line-height: 1.5;
}

@media (max-width: 720px) {
  /* Demo-Player: aspect-ratio 16:9 wird auf Mobile zu flach (~340px hoch
     bei 600px breit) - die Inhalte (Play-Button, Badge, 2-zeiliger Text,
     CTA) quetschen sich dann uebereinander. Auf Mobile lassen wir die
     Hoehe vom Inhalt bestimmen und geben grosszuegig Padding.
     Wichtig: min-height MUSS auch auf den .lp-demo-placeholder, weil
     dessen "height: 100%" sonst auf den nicht-fixed-height Parent
     kollabiert (Hintergrund-Gradient waere sonst nicht sichtbar). */
  .apexlanding .lp-demo-player {
    aspect-ratio: auto;
    min-height: 360px;
    margin-top: 28px;
    border-radius: 16px;
  }
  .apexlanding .lp-demo-placeholder {
    height: auto;
    min-height: 360px;
  }
  .apexlanding .lp-demo-overlay {
    position: relative;       /* statt absolute - bestimmt jetzt die Hoehe */
    gap: 14px;
    padding: 36px 22px;
    min-height: 360px;
  }
  .apexlanding .lp-demo-play-button { width: 64px; height: 64px; }
  .apexlanding .lp-demo-play-button [data-lucide] { width: 24px; height: 24px; }
  .apexlanding .lp-demo-badge { padding: 5px 12px; font-size: 11px; }
  .apexlanding .lp-demo-status { font-size: 14px; line-height: 1.5; }
  .apexlanding .lp-demo-status-cta { font-size: 13px; }

  /* Time-marker-Liste: vorher full-width Karten mit 20px Padding =
     drei riesen Bloecke. Jetzt kompakt: horizontale Zeile mit Icon
     links, Zeit + Text rechts. Halbiert die vertikale Hoehe. */
  .apexlanding .lp-demo-bullets {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 28px;
  }
  .apexlanding .lp-demo-bullets li {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
  }
  .apexlanding .lp-demo-bullets [data-lucide] {
    width: 18px;
    height: 18px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .apexlanding .lp-demo-bullets strong {
    font-size: 12px;
    flex-shrink: 0;
    min-width: 78px;
  }
  .apexlanding .lp-demo-bullets span {
    font-size: 13px;
    line-height: 1.4;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT - Eigene Brands (about.ejs Sektion 3)
   ═══════════════════════════════════════════════════════════════ */
/* (padding wird oben im Sammel-Selektor gesetzt - hier nichts mehr) */
.apexlanding .lp-about-brands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.apexlanding .lp-about-brand-card {
  padding: 28px 26px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.apexlanding .lp-about-brand-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,148,136,0.10);
}
.apexlanding .lp-about-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--lp-mint-soft);
  border-radius: 12px;
  color: var(--lp-teal-dark);
  margin-bottom: 16px;
}
.apexlanding .lp-about-brand-icon [data-lucide] { width: 22px; height: 22px; }
.apexlanding .lp-about-brand-card h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--lp-text);
}
.apexlanding .lp-about-brand-sub {
  margin: 0 0 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--lp-teal);
}
.apexlanding .lp-about-brand-card p:not(.lp-about-brand-sub) {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-text-muted);
}
.apexlanding .lp-about-brand-card a {
  color: var(--lp-teal);
  text-decoration: underline;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT - Cross-Sell Schwester-Produkte (about.ejs Sektion 5)
   ═══════════════════════════════════════════════════════════════ */
/* (padding wird oben im Sammel-Selektor gesetzt - hier nichts mehr) */
.apexlanding .lp-about-products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.apexlanding .lp-about-product-card {
  display: block;
  padding: 28px;
  background: linear-gradient(135deg, #fff, var(--lp-mint-soft));
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  text-decoration: none;
  color: var(--lp-text);
  transition: transform .2s ease, box-shadow .2s ease;
}
.apexlanding .lp-about-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(13,148,136,0.14);
}
.apexlanding .lp-about-product-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.apexlanding .lp-about-product-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--lp-text);
}
.apexlanding .lp-about-product-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--lp-mint-soft);
  color: var(--lp-teal-dark);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.apexlanding .lp-about-product-card p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-text);
}
.apexlanding .lp-about-product-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lp-teal);
  font-weight: 700;
  font-size: 14px;
}
.apexlanding .lp-about-product-link [data-lucide] { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════════════════
   ABOUT - Anschrift-Block (about.ejs Sektion 7)
   ═══════════════════════════════════════════════════════════════ */
.apexlanding .lp-about-contact-address {
  margin-top: 40px;
  padding: 24px;
  background: var(--lp-bg-soft, #f8fafc);
  border: 1px solid var(--lp-border);
  border-radius: 12px;
  text-align: center;
}
.apexlanding .lp-about-contact-address h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-about-contact-address address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-text);
}
.apexlanding .lp-about-contact-address address a {
  color: var(--lp-teal);
  font-weight: 600;
  text-decoration: none;
}
.apexlanding .lp-about-contact-address address a:hover { text-decoration: underline; }

@media (max-width: 880px) {
  .apexlanding .lp-about-brands-grid { grid-template-columns: 1fr; }
  .apexlanding .lp-about-products-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT - Hero-Visual (Einleitungs-Bild im Hero)
   ═══════════════════════════════════════════════════════════════ */
.apexlanding .lp-about-hero-visual {
  margin: 28px auto 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.apexlanding .lp-about-hero-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--lp-border);
  box-shadow: 0 16px 40px rgba(13,148,136,0.14);
  background: #fff;
}
.apexlanding .lp-about-hero-visual figcaption {
  font-size: 13px;
  color: var(--lp-text-muted);
  text-align: center;
  letter-spacing: 0.01em;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT - Brand-Card-Link (Mini-Footer-Link unten in der Brand-Karte)
   ═══════════════════════════════════════════════════════════════ */
.apexlanding .lp-about-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 14px;
  background: var(--lp-mint-soft);
  color: var(--lp-teal-dark);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.apexlanding .lp-about-brand-link:hover {
  background: var(--lp-mint, #5eead4);
  transform: translateY(-1px);
}
.apexlanding .lp-about-brand-link [data-lucide] {
  width: 14px;
  height: 14px;
}

@media (max-width: 720px) {
  .apexlanding .lp-about-hero-visual { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   COOKIE-CONSENT-BANNER
   Slide-Up von unten, fixed bottom, einmalig gezeigt (LocalStorage).
   Bewusst nicht modal-blocking - User kann die Seite weiter scrollen
   waehrend der Banner sichtbar ist (DSGVO erlaubt das, da wir keine
   Tracker setzen, die Consent brauchen).
   ═══════════════════════════════════════════════════════════════ */
.apexlanding .lp-cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  max-width: 920px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.apexlanding .lp-cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.apexlanding .lp-cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  flex-wrap: wrap;
}
.apexlanding .lp-cookie-banner-body { flex: 1 1 320px; min-width: 0; }
.apexlanding .lp-cookie-banner-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: var(--lp-text);
  letter-spacing: -0.01em;
}
.apexlanding .lp-cookie-banner-title [data-lucide] {
  width: 18px;
  height: 18px;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-cookie-banner-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--lp-text-muted);
}
.apexlanding .lp-cookie-banner-text a {
  color: var(--lp-teal);
  font-weight: 600;
  text-decoration: underline;
}
.apexlanding .lp-cookie-banner-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  align-items: center;
}
.apexlanding .lp-cookie-banner-actions .lp-btn {
  padding: 10px 22px;
  font-size: 14px;
  min-height: 40px;
}

@media (max-width: 640px) {
  .apexlanding .lp-cookie-banner { padding: 16px; }
  .apexlanding .lp-cookie-banner-actions { width: 100%; }
  .apexlanding .lp-cookie-banner-actions .lp-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   STICKY MOBILE CTA
   Fixed-bottom-Bar mit "5 Credits gratis · Starten"-CTA.
   Nur auf Mobile (≤768px) gerendert. JS toggelt Sichtbarkeit
   per IntersectionObserver auf Hero und Final-CTA.
   ═══════════════════════════════════════════════════════════════ */
.apexlanding .lp-sticky-cta {
  display: none;
}
@media (max-width: 768px) {
  .apexlanding .lp-sticky-cta {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 9998; /* unter Cookie-Banner (9999) damit Cookie-Banner darueber liegt */
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: 10px 12px 10px 14px;
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
  }
  .apexlanding .lp-sticky-cta.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}
.apexlanding .lp-sticky-cta-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.apexlanding .lp-sticky-cta-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.apexlanding .lp-sticky-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--lp-mint-soft);
  color: var(--lp-teal-dark);
  border-radius: 10px;
  flex-shrink: 0;
}
.apexlanding .lp-sticky-cta-icon [data-lucide] { width: 18px; height: 18px; }
.apexlanding .lp-sticky-cta-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.apexlanding .lp-sticky-cta-text strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--lp-text);
  letter-spacing: -0.01em;
}
.apexlanding .lp-sticky-cta-text span {
  font-size: 11px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-sticky-cta-btn {
  padding: 10px 16px !important;
  font-size: 13px !important;
  min-height: 40px !important;
  white-space: nowrap;
}

/* Cookie-Banner soll auf Mobile NICHT mit Sticky-CTA kollidieren.
   Wenn beide gleichzeitig sichtbar waeren, schiebt sich Cookie-Banner
   ueber den Sticky-CTA-Bereich. Sticky-CTA wird durch IntersectionObserver
   nach Hero erst sichtbar - in der Praxis kommt Cookie-Banner zuerst,
   User klickt weg, dann erst kommt Sticky-CTA in den Viewport. OK. */

/* ═══════════════════════════════════════════════════════════════
   TOOL-PAGES (Lead-Magnet Public Mini-Tools + Account-Required)
   Gemeinsames Layout fuer alle 5 /tools/* Pages.
   ═══════════════════════════════════════════════════════════════ */
.apexlanding .lp-tool-page { padding-top: 60px; padding-bottom: 80px; }

/* Mobile-only Zurueck-Link (analog zu .lp-blog-post-back). Desktop nutzt
   die Breadcrumb-Nav daneben; auf Mobile blenden wir die Breadcrumbs aus
   und zeigen stattdessen diesen kompakten Pfeil-Link. */
.apexlanding .lp-tool-back {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-teal-dark);
  text-decoration: none;
}
.apexlanding .lp-tool-back [data-lucide] { width: 16px; height: 16px; }
.apexlanding .lp-tool-back:hover { text-decoration: underline; }

/* Header - eigener Klassenname lp-tool-page-head (NICHT lp-tool-head,
   das wird schon von der Tools-Cards-Section auf der Home benutzt mit
   einem flex-Layout - Namenskonflikt vermeiden). */
.apexlanding .lp-tool-page-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 32px auto 48px;
}
.apexlanding .lp-tool-page-head .lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}
.apexlanding .lp-tool-page-head .lp-section-title {
  margin: 0 0 16px;
  font-size: 42px;
  line-height: 1.15;
}
.apexlanding .lp-tool-page-head .lp-section-sub {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--lp-text-muted);
  max-width: 600px;
}
@media (max-width: 720px) {
  .apexlanding .lp-tool-page-head .lp-section-title { font-size: 30px; }
  .apexlanding .lp-tool-page-head .lp-section-sub { font-size: 16px; }
}
@media (max-width: 640px) {
  /* Mobile: Tool-Page Padding stark runter, Breadcrumbs raus, Back-Link
     rein. Header kompakter. Tighter overall feel - User landet direkt
     beim Tool ohne mehrfaches Scrollen. */
  .apexlanding .lp-tool-page {
    padding-top: 28px;
    padding-bottom: 56px;
  }
  .apexlanding .lp-tool-page .lp-breadcrumbs { display: none; }
  .apexlanding .lp-tool-back { display: inline-flex; }
  .apexlanding .lp-tool-page-head {
    margin: 8px auto 28px;
  }
  .apexlanding .lp-tool-page-head .lp-eyebrow { margin-bottom: 12px; font-size: 11px; }
  .apexlanding .lp-tool-page-head .lp-section-title {
    font-size: 24px;
    margin-bottom: 10px;
    line-height: 1.2;
  }
  .apexlanding .lp-tool-page-head .lp-section-sub {
    font-size: 14.5px;
    line-height: 1.55;
  }
}

/* Tool-Widget (Eingabe + Output) */
.apexlanding .lp-tool-widget {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.apexlanding .lp-tool-label {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-tool-textarea,
.apexlanding .lp-tool-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--lp-border);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--lp-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  background: #fff;
  transition: border-color .15s ease;
  box-sizing: border-box;
}
.apexlanding .lp-tool-input-mono {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  letter-spacing: 0.05em;
}
.apexlanding .lp-tool-textarea:focus,
.apexlanding .lp-tool-input:focus {
  outline: none;
  border-color: var(--lp-teal);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}
.apexlanding .lp-tool-textarea { resize: vertical; min-height: 120px; }

/* Stats-Block (Output unter Input) */
.apexlanding .lp-tool-stats {
  margin-top: 24px;
  padding: 22px;
  border-radius: 12px;
  background: var(--lp-bg-soft, #f8fafc);
  transition: background .15s ease;
}
.apexlanding .lp-tool-stats[data-mode="ok"]    { background: #ecfdf5; }
.apexlanding .lp-tool-stats[data-mode="sweet"] { background: #d1fae5; }
.apexlanding .lp-tool-stats[data-mode="low"]   { background: #fef9c3; }
.apexlanding .lp-tool-stats[data-mode="over"]  { background: #fee2e2; }

.apexlanding .lp-tool-stat-primary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apexlanding .lp-tool-stat-primary .lp-tool-stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--lp-text);
  letter-spacing: -0.02em;
}
.apexlanding .lp-tool-stat-primary .lp-tool-stat-value strong {
  font-size: 36px;
  font-weight: 900;
  color: var(--lp-teal);
}
.apexlanding .lp-tool-stats[data-mode="over"] .lp-tool-stat-primary .lp-tool-stat-value strong { color: #dc2626; }
.apexlanding .lp-tool-stats[data-mode="sweet"] .lp-tool-stat-primary .lp-tool-stat-value strong { color: #059669; }
.apexlanding .lp-tool-stat-primary .lp-tool-stat-label {
  font-size: 14px;
  color: var(--lp-text-muted);
}

.apexlanding .lp-tool-progress {
  margin-top: 12px;
  height: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 9999px;
  overflow: hidden;
}
.apexlanding .lp-tool-progress-bar {
  height: 100%;
  background: var(--lp-teal);
  transition: width .25s ease, background .15s ease;
}
.apexlanding .lp-tool-stats[data-mode="over"] .lp-tool-progress-bar { background: #dc2626; }
.apexlanding .lp-tool-stats[data-mode="sweet"] .lp-tool-progress-bar { background: #059669; }
.apexlanding .lp-tool-stats[data-mode="low"] .lp-tool-progress-bar { background: #ca8a04; }

/* Sekundaer-Stats-Grid */
.apexlanding .lp-tool-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.apexlanding .lp-tool-stat-grid .lp-tool-stat {
  text-align: center;
}
.apexlanding .lp-tool-stat-grid .lp-tool-stat-value {
  font-size: 14px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-tool-stat-grid .lp-tool-stat-value strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--lp-text);
  margin-bottom: 2px;
}
.apexlanding .lp-tool-stat-grid .lp-tool-stat-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-text-muted);
}

/* Title-Validator: Previews */
.apexlanding .lp-tool-previews {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--lp-border);
}
.apexlanding .lp-tool-previews h3 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-tool-preview {
  margin-bottom: 12px;
  padding: 14px 16px;
  background: var(--lp-bg-soft, #f8fafc);
  border: 1px solid var(--lp-border);
  border-radius: 10px;
}
.apexlanding .lp-tool-preview:last-child { margin-bottom: 0; }
.apexlanding .lp-tool-preview-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--lp-text-muted);
  margin-bottom: 6px;
}
.apexlanding .lp-tool-preview-label [data-lucide] { width: 14px; height: 14px; }
.apexlanding .lp-tool-preview-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--lp-text);
  font-weight: 500;
}

/* Title-Validator: Issues */
.apexlanding .lp-tool-issues {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--lp-border);
}
.apexlanding .lp-tool-issues h3 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-tool-issues ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apexlanding .lp-tool-issue {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}
.apexlanding .lp-tool-issue [data-lucide] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.apexlanding .lp-tool-issue-high    { background: #fee2e2; color: #991b1b; }
.apexlanding .lp-tool-issue-medium  { background: #fef3c7; color: #92400e; }
.apexlanding .lp-tool-issue-info    { background: #e0f2fe; color: #075985; }
.apexlanding .lp-tool-issue-success { background: #d1fae5; color: #065f46; }

/* EAN-Checker: Result-Box */
.apexlanding .lp-tool-result {
  margin-top: 24px;
  padding: 22px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 2px solid var(--lp-border);
  background: var(--lp-bg-soft, #f8fafc);
}
.apexlanding .lp-tool-result[data-state="valid"] {
  background: #d1fae5;
  border-color: #6ee7b7;
}
.apexlanding .lp-tool-result[data-state="invalid"] {
  background: #fee2e2;
  border-color: #fca5a5;
}
.apexlanding .lp-tool-result-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.apexlanding .lp-tool-result-icon [data-lucide] { width: 32px; height: 32px; }
.apexlanding .lp-tool-result[data-state="valid"] .lp-tool-result-icon [data-lucide] { color: #059669; }
.apexlanding .lp-tool-result[data-state="invalid"] .lp-tool-result-icon [data-lucide] { color: #dc2626; }
.apexlanding .lp-tool-result-body h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
}
.apexlanding .lp-tool-result-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lp-text);
}

/* Explainer-Section (gemeinsam fuer alle Tools) */
.apexlanding .lp-tool-explainer {
  max-width: 920px;
  margin: 56px auto 0;
}
.apexlanding .lp-tool-explainer h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 32px;
  color: var(--lp-text);
}
.apexlanding .lp-tool-explainer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.apexlanding .lp-tool-explainer-grid > div {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
}
.apexlanding .lp-tool-explainer-grid h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--lp-text);
}
.apexlanding .lp-tool-explainer-grid h3 [data-lucide] {
  width: 18px;
  height: 18px;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-tool-explainer-grid p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-text-muted);
}
.apexlanding .lp-tool-explainer-grid strong { color: var(--lp-text); }

/* CTA-Card am Ende jedes Tools */
.apexlanding .lp-tool-cta-card {
  max-width: 920px;
  margin: 56px auto 0;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--lp-mint-soft), #fff);
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.apexlanding .lp-tool-cta-card-icon {
  width: 56px;
  height: 56px;
  background: var(--lp-teal);
  color: #fff;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.apexlanding .lp-tool-cta-card-icon [data-lucide] { width: 28px; height: 28px; }
.apexlanding .lp-tool-cta-card-body {
  flex: 1 1 280px;
  min-width: 0;
}
.apexlanding .lp-tool-cta-card-body h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--lp-text);
}
.apexlanding .lp-tool-cta-card-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-text);
}
.apexlanding .lp-tool-cta-card .lp-btn { flex-shrink: 0; white-space: nowrap; }

/* Account-Required-Page */
.apexlanding .lp-tool-account-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 36px;
  background: linear-gradient(135deg, #fff, var(--lp-mint-soft));
  border: 1px solid var(--lp-border);
  border-radius: 20px;
  text-align: center;
}
.apexlanding .lp-tool-account-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: var(--lp-teal);
  color: #fff;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.apexlanding .lp-tool-account-icon [data-lucide] { width: 32px; height: 32px; }
.apexlanding .lp-tool-account-card h2 {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lp-text);
}
.apexlanding .lp-tool-account-card > p {
  margin: 0 auto 28px;
  max-width: 540px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--lp-text);
}
.apexlanding .lp-tool-account-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 32px;
  max-width: 460px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.apexlanding .lp-tool-account-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--lp-text);
}
.apexlanding .lp-tool-account-list [data-lucide] {
  width: 18px;
  height: 18px;
  color: var(--lp-teal);
  flex-shrink: 0;
  margin-top: 2px;
}
.apexlanding .lp-tool-account-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.apexlanding .lp-tool-account-login {
  font-size: 14px;
  color: var(--lp-text-muted);
  text-decoration: none;
}
.apexlanding .lp-tool-account-login:hover {
  color: var(--lp-teal);
  text-decoration: underline;
}

/* About-Page Team-Card CTA fuer Author-Page-Link */
.apexlanding .lp-about-team-cta {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--lp-border-soft);
}

/* ─────────────────────────────────────────────
   Team-Page (/team/denis-klug) - Author-Profil
   ───────────────────────────────────────────── */
.apexlanding .lp-team-page { padding: 48px 0 72px; }
.apexlanding .lp-team-page .lp-container { max-width: 760px; }
.apexlanding .lp-team-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 24px 0 36px;
}
.apexlanding .lp-team-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 10px 28px rgba(13,148,136,0.28);
}
.apexlanding .lp-team-head-body { min-width: 0; }
.apexlanding .lp-team-head .lp-section-title {
  margin: 8px 0 6px;
  font-size: clamp(28px, 4vw, 38px);
}
.apexlanding .lp-team-role {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-team-tagline {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--lp-text-muted);
}
.apexlanding .lp-team-bio {
  max-width: 720px;
}
.apexlanding .lp-team-bio h2 {
  margin: 32px 0 10px;
  font-size: 19px;
  font-weight: 800;
  color: var(--lp-text);
}
.apexlanding .lp-team-bio p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--lp-text);
}
.apexlanding .lp-team-bio a {
  color: var(--lp-teal-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.apexlanding .lp-team-projects {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.apexlanding .lp-team-projects li {
  padding: 14px 16px;
  background: var(--lp-bg-soft);
  border: 1px solid var(--lp-border);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lp-text);
}
.apexlanding .lp-team-projects strong { font-weight: 700; color: var(--lp-text); }
.apexlanding .lp-team-projects a {
  display: inline-block;
  margin-left: 8px;
  font-size: 13px;
}
.apexlanding .lp-team-back-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
@media (max-width: 640px) {
  .apexlanding .lp-team-page { padding: 28px 0 56px; }
  .apexlanding .lp-team-page .lp-breadcrumbs { display: none; }
  .apexlanding .lp-team-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin: 12px 0 24px;
  }
  .apexlanding .lp-team-avatar { width: 64px; height: 64px; font-size: 22px; }
  .apexlanding .lp-team-bio h2 { font-size: 17px; margin-top: 24px; }
  .apexlanding .lp-team-bio p { font-size: 14.5px; line-height: 1.6; }
  .apexlanding .lp-team-projects li { padding: 12px 14px; font-size: 13.5px; }
  .apexlanding .lp-team-projects a { display: block; margin-left: 0; margin-top: 4px; }
  .apexlanding .lp-team-back-row .lp-btn { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────
   Funktionen-Hub + Funktions-Detail-Pages
   ───────────────────────────────────────────── */
.apexlanding .lp-funktionen-hub { padding: 48px 0 72px; }
.apexlanding .lp-funktionen-hub .lp-container { max-width: 1080px; }

.apexlanding .lp-funktionen-hub-intro {
  margin: 0 0 36px;
  padding: 22px 26px;
  background: var(--lp-bg-soft);
  border: 1px solid var(--lp-border);
  border-radius: 14px;
}
.apexlanding .lp-funktionen-hub-intro h2 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-funktionen-hub-intro p {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--lp-text);
}
.apexlanding .lp-funktionen-hub-intro p:last-child { margin-bottom: 0; }
.apexlanding .lp-funktionen-hub-intro a { color: var(--lp-teal-dark); text-decoration: underline; }
.apexlanding .lp-funktionen-hub-intro strong { font-weight: 700; color: var(--lp-teal-dark); }

.apexlanding .lp-funktionen-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 48px;
}
.apexlanding .lp-funktionen-hub-card {
  display: flex;
  gap: 18px;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.apexlanding .lp-funktionen-hub-card:hover {
  border-color: var(--lp-teal);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(13,148,136,0.12);
}
.apexlanding .lp-funktionen-hub-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(13,148,136,0.25);
}
.apexlanding .lp-funktionen-hub-icon [data-lucide] { width: 24px; height: 24px; }
.apexlanding .lp-funktionen-hub-body { flex: 1; min-width: 0; }
.apexlanding .lp-funktionen-hub-body h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
  color: var(--lp-text);
}
.apexlanding .lp-funktionen-hub-tag {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-funktionen-hub-summary {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lp-text-muted);
}
.apexlanding .lp-funktionen-hub-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-funktionen-hub-cta [data-lucide] {
  width: 14px; height: 14px;
  transition: transform .15s ease;
}
.apexlanding .lp-funktionen-hub-card:hover .lp-funktionen-hub-cta [data-lucide] {
  transform: translateX(3px);
}

/* Coming-Soon-Variante der Hub-Card (Image Studio aktuell) */
.apexlanding .lp-funktionen-hub-card.is-coming {
  opacity: 0.85;
  border-style: dashed;
}
.apexlanding .lp-funktionen-hub-card.is-coming:hover { opacity: 1; }
.apexlanding .lp-funktionen-hub-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  background: var(--lp-amber, #ba7517);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Eyebrow-Variante "Bald verfügbar" */
.apexlanding .lp-eyebrow-coming {
  color: var(--lp-amber, #ba7517) !important;
}
.apexlanding .lp-eyebrow-coming [data-lucide] {
  color: var(--lp-amber, #ba7517);
}

/* Image-Studio Status-Banner */
.apexlanding .lp-image-studio-status {
  display: flex;
  gap: 20px;
  margin: 32px 0;
  padding: 26px 28px;
  background: linear-gradient(135deg, #fff7ed, #fff);
  border: 1px solid rgba(186, 117, 23, 0.30);
  border-radius: 16px;
  align-items: flex-start;
}
.apexlanding .lp-image-studio-status-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--lp-amber, #ba7517), #e8a14b);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(186, 117, 23, 0.25);
}
.apexlanding .lp-image-studio-status-icon [data-lucide] { width: 26px; height: 26px; }
.apexlanding .lp-image-studio-status-body { flex: 1; min-width: 0; }
.apexlanding .lp-image-studio-status-body h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
}
.apexlanding .lp-image-studio-status-body p {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--lp-text);
}
.apexlanding .lp-image-studio-status-body .lp-btn { display: inline-flex; gap: 8px; }

@media (max-width: 640px) {
  .apexlanding .lp-image-studio-status {
    flex-direction: column;
    gap: 14px;
    padding: 20px 18px;
  }
  .apexlanding .lp-image-studio-status-icon { width: 44px; height: 44px; }
  .apexlanding .lp-image-studio-status-icon [data-lucide] { width: 22px; height: 22px; }
  .apexlanding .lp-image-studio-status-body h2 { font-size: 16px; }
  .apexlanding .lp-image-studio-status-body p { font-size: 13.5px; }
  .apexlanding .lp-funktionen-hub-badge { font-size: 9.5px; padding: 2px 7px; }
}

.apexlanding .lp-funktionen-hub-cross { margin-top: 48px; }
.apexlanding .lp-funktionen-hub-cross h2 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 800;
}
.apexlanding .lp-funktionen-hub-cross-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.apexlanding .lp-funktionen-hub-cross-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--lp-text);
  transition: border-color .15s ease, transform .12s ease;
}
.apexlanding .lp-funktionen-hub-cross-card:hover {
  border-color: var(--lp-teal);
  transform: translateY(-1px);
}
.apexlanding .lp-funktionen-hub-cross-card [data-lucide] {
  width: 22px; height: 22px;
  color: var(--lp-teal);
  flex-shrink: 0;
}
.apexlanding .lp-funktionen-hub-cross-card strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--lp-text);
}
.apexlanding .lp-funktionen-hub-cross-card span {
  display: block;
  font-size: 12.5px;
  color: var(--lp-text-muted);
  line-height: 1.45;
}

/* Feature-Detail-Page-Layout */
.apexlanding .lp-feature-page { padding: 48px 0 72px; }
.apexlanding .lp-feature-page .lp-container { max-width: 900px; }

/* Feature-Steps (12-Step-Pipeline, Quality-Loop, Flatfile-Workflow, Walkthrough) */
.apexlanding .lp-feature-steps { margin: 48px 0; }
.apexlanding .lp-feature-steps-head { margin-bottom: 22px; }
.apexlanding .lp-feature-steps-head h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
}
.apexlanding .lp-feature-steps-head p {
  margin: 0;
  font-size: 14.5px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-feature-step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  counter-reset: feature-step;
}
.apexlanding .lp-feature-step {
  display: flex;
  gap: 18px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
}
.apexlanding .lp-feature-step-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-teal-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.apexlanding .lp-feature-step-body {
  flex: 1;
  min-width: 0;
}
.apexlanding .lp-feature-step-body h3 {
  margin: 6px 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--lp-text);
}
.apexlanding .lp-feature-step-body p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-text);
}
.apexlanding .lp-feature-step-body p:last-child { margin-bottom: 0; }
.apexlanding .lp-feature-step-body code {
  background: var(--lp-bg-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
}
.apexlanding .lp-feature-step-time {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  background: var(--lp-mint-soft);
  color: var(--lp-teal-dark);
  font-size: 11px;
  font-weight: 700;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.apexlanding .lp-feature-step-tip {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--lp-mint-soft);
  border-left: 3px solid var(--lp-teal);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.5;
}
.apexlanding .lp-feature-step-tip strong { color: var(--lp-teal-dark); }
.apexlanding .lp-feature-step-tip a { color: var(--lp-teal-dark); text-decoration: underline; }

/* Inputs/Outputs-Karten */
.apexlanding .lp-feature-io { margin: 48px 0; }
.apexlanding .lp-feature-io h2 {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 800;
}
.apexlanding .lp-feature-io-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.apexlanding .lp-feature-io-card {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 14px;
}
.apexlanding .lp-feature-io-card-out {
  background: linear-gradient(135deg, #fff, var(--lp-mint-soft));
  border-color: rgba(13,148,136,0.30);
}
.apexlanding .lp-feature-io-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
}
.apexlanding .lp-feature-io-card h3 [data-lucide] {
  width: 18px; height: 18px;
  color: var(--lp-teal);
}
.apexlanding .lp-feature-io-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apexlanding .lp-feature-io-card li {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lp-text);
  padding-left: 16px;
  position: relative;
}
.apexlanding .lp-feature-io-card li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--lp-teal);
  font-weight: 700;
}
.apexlanding .lp-feature-io-card strong { color: var(--lp-teal-dark); }

/* Problem-Grid (Single-Shot-KI-Probleme erklären) */
.apexlanding .lp-feature-problem {
  margin: 48px 0;
  padding: 28px 30px;
  background: var(--lp-bg-soft);
  border: 1px solid var(--lp-border);
  border-radius: 16px;
}
.apexlanding .lp-feature-problem h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 800;
}
.apexlanding .lp-feature-problem > p {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--lp-text-muted);
}
.apexlanding .lp-feature-problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.apexlanding .lp-feature-problem-card {
  position: relative;
  padding: 22px 22px 20px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
.apexlanding .lp-feature-problem-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--lp-teal) 0%, var(--lp-mint) 100%);
  opacity: 0;
  transition: opacity .2s ease;
}
.apexlanding .lp-feature-problem-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(13, 148, 136, 0.10);
  border-color: var(--lp-teal);
}
.apexlanding .lp-feature-problem-card:hover::before { opacity: 1; }
.apexlanding .lp-feature-problem-card > svg:first-child,
.apexlanding .lp-feature-problem-card > [data-lucide]:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 10px;
  margin-bottom: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--lp-teal) 0%, var(--lp-mint) 100%);
  border-radius: 11px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.18);
}
.apexlanding .lp-feature-problem-card > svg:first-child { stroke-width: 2; overflow: visible; }
.apexlanding .lp-feature-problem-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--lp-text);
  line-height: 1.35;
}
.apexlanding .lp-feature-problem-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lp-text-muted);
}

@media (max-width: 720px) {
  .apexlanding .lp-funktionen-hub-grid { grid-template-columns: 1fr; gap: 12px; }
  .apexlanding .lp-funktionen-hub-cross-grid { grid-template-columns: 1fr; }
  .apexlanding .lp-feature-io-grid { grid-template-columns: 1fr; }
  .apexlanding .lp-feature-problem-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .apexlanding .lp-funktionen-hub { padding: 28px 0 56px; }
  .apexlanding .lp-funktionen-hub .lp-breadcrumbs,
  .apexlanding .lp-feature-page .lp-breadcrumbs { display: none; }
  .apexlanding .lp-funktionen-hub-intro { padding: 16px 18px; }
  .apexlanding .lp-funktionen-hub-intro p { font-size: 13.5px; }
  .apexlanding .lp-funktionen-hub-card { padding: 18px 18px; gap: 14px; }
  .apexlanding .lp-funktionen-hub-icon { width: 42px; height: 42px; }
  .apexlanding .lp-funktionen-hub-icon [data-lucide] { width: 20px; height: 20px; }
  .apexlanding .lp-funktionen-hub-body h3 { font-size: 15.5px; }
  .apexlanding .lp-funktionen-hub-tag { font-size: 11.5px; margin-bottom: 6px; }
  .apexlanding .lp-funktionen-hub-summary { font-size: 13px; margin-bottom: 8px; }
  .apexlanding .lp-feature-page { padding: 28px 0 56px; }
  .apexlanding .lp-feature-steps-head h2,
  .apexlanding .lp-feature-io h2,
  .apexlanding .lp-feature-problem h2 { font-size: 18px; }
  .apexlanding .lp-feature-step { padding: 14px 16px; gap: 14px; }
  .apexlanding .lp-feature-step-num { width: 36px; height: 36px; font-size: 13px; border-radius: 9px; }
  .apexlanding .lp-feature-step-body h3 { font-size: 15px; }
  .apexlanding .lp-feature-step-body p { font-size: 13.5px; line-height: 1.55; }
  .apexlanding .lp-feature-step-tip { font-size: 12.5px; padding: 8px 12px; }
  .apexlanding .lp-feature-io-card { padding: 16px 18px; }
  .apexlanding .lp-feature-io-card li { font-size: 13px; }
  .apexlanding .lp-feature-problem { padding: 20px 18px; }
  .apexlanding .lp-feature-problem-card { padding: 14px 16px; }
}

/* ─────────────────────────────────────────────
   Listing-Generator-Seite: Visual-Auflockerung
   (Hero-Flow, Stats-Strip, Output-Mockup)
   ───────────────────────────────────────────── */

/* Hero-Flow: 3 Schritte mit Pfeilen dazwischen */
.apexlanding .lp-lgen-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 14px;
  margin: 36px 0 32px;
}
.apexlanding .lp-lgen-flow-step {
  position: relative;
  padding: 22px 20px 20px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.apexlanding .lp-lgen-flow-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(13, 148, 136, 0.10);
  border-color: var(--lp-teal);
}
.apexlanding .lp-lgen-flow-step-mid {
  background: linear-gradient(180deg, rgba(13, 148, 136, 0.04) 0%, #fff 100%);
  border-color: rgba(13, 148, 136, 0.25);
}
.apexlanding .lp-lgen-flow-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lp-teal) 0%, var(--lp-mint) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.apexlanding .lp-lgen-flow-icon [data-lucide] {
  width: 22px;
  height: 22px;
}
.apexlanding .lp-lgen-flow-step h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--lp-text);
}
.apexlanding .lp-lgen-flow-step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lp-text-muted);
  flex-grow: 1;
}
.apexlanding .lp-lgen-flow-meta {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--lp-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--lp-teal-dark);
  letter-spacing: 0.02em;
}
.apexlanding .lp-lgen-flow-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lp-teal);
  opacity: 0.55;
}
.apexlanding .lp-lgen-flow-arrow [data-lucide] {
  width: 22px;
  height: 22px;
}

/* Stats-Strip: 3 grosse Kennzahlen */
.apexlanding .lp-lgen-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 0 40px;
}
.apexlanding .lp-lgen-stat {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  text-align: center;
  transition: transform .2s ease;
}
.apexlanding .lp-lgen-stat:hover { transform: translateY(-2px); }
.apexlanding .lp-lgen-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--lp-teal-dark);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.apexlanding .lp-lgen-stat-value span {
  font-size: 16px;
  font-weight: 600;
  color: var(--lp-text-muted);
  margin-left: 2px;
}
.apexlanding .lp-lgen-stat-label {
  margin-top: 6px;
  font-size: 13px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-lgen-stat-strikethrough .lp-lgen-stat-value {
  color: var(--lp-text-muted);
  opacity: 0.7;
}
.apexlanding .lp-lgen-stat-strikethrough .lp-lgen-stat-value s { text-decoration-thickness: 2px; }
.apexlanding .lp-lgen-stat-highlight {
  background: linear-gradient(135deg, var(--lp-teal) 0%, var(--lp-teal-dark) 100%);
  border-color: var(--lp-teal-dark);
  color: #fff;
}
.apexlanding .lp-lgen-stat-highlight .lp-lgen-stat-value,
.apexlanding .lp-lgen-stat-highlight .lp-lgen-stat-value span,
.apexlanding .lp-lgen-stat-highlight .lp-lgen-stat-label { color: #fff; }
.apexlanding .lp-lgen-stat-highlight .lp-lgen-stat-value span { opacity: 0.9; }

/* Output-Section mit Mockup */
.apexlanding .lp-lgen-output { margin: 0 0 48px; }
.apexlanding .lp-lgen-output-head { margin-bottom: 20px; }
.apexlanding .lp-lgen-output-head h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--lp-text);
}
.apexlanding .lp-lgen-output-head p {
  margin: 0;
  font-size: 14.5px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-lgen-output-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 18px;
  align-items: stretch;
}

/* Input-Karte (links) */
.apexlanding .lp-lgen-output-input {
  padding: 22px 22px 20px;
  background: var(--lp-bg-soft);
  border: 1px solid var(--lp-border);
  border-radius: 14px;
}
.apexlanding .lp-lgen-output-input-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-lgen-output-input-head [data-lucide] {
  width: 16px;
  height: 16px;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-lgen-output-input ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apexlanding .lp-lgen-output-input li {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lp-text);
  padding-left: 18px;
  position: relative;
}
.apexlanding .lp-lgen-output-input li::before {
  content: "›";
  position: absolute;
  left: 4px;
  top: -1px;
  color: var(--lp-teal);
  font-weight: 700;
}
.apexlanding .lp-lgen-output-input strong { color: var(--lp-teal-dark); }
.apexlanding .lp-lgen-output-opt {
  display: inline-block;
  margin-right: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lp-text-muted);
  letter-spacing: 0.04em;
}

/* Mockup-Karte (rechts) - Browser-Fenster-Optik */
.apexlanding .lp-lgen-output-mockup {
  padding: 0;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.06);
}
.apexlanding .lp-lgen-output-mockup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--lp-border);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-lgen-output-mockup-head [data-lucide] {
  width: 16px;
  height: 16px;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-lgen-output-badge {
  margin-left: auto;
  padding: 3px 10px;
  background: rgba(13, 148, 136, 0.1);
  border: 1px solid rgba(13, 148, 136, 0.2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--lp-teal-dark);
  text-transform: none;
  letter-spacing: 0;
}

/* Listing-Felder im Mockup */
.apexlanding .lp-lgen-output-field {
  padding: 14px 18px;
  border-bottom: 1px solid var(--lp-border);
}
.apexlanding .lp-lgen-output-field:last-of-type { border-bottom: none; }
.apexlanding .lp-lgen-output-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-lgen-output-counter {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--lp-bg-soft);
  color: var(--lp-text-muted);
  letter-spacing: 0;
  text-transform: none;
}
.apexlanding .lp-lgen-output-counter.is-good {
  background: rgba(94, 234, 212, 0.18);
  color: var(--lp-teal-dark);
}
.apexlanding .lp-lgen-output-field-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lp-text);
}
.apexlanding .lp-lgen-output-field-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--lp-text-muted);
  word-break: break-all;
}

/* Footer-Extras im Mockup */
.apexlanding .lp-lgen-output-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 12px 18px;
  background: var(--lp-bg-soft);
  border-top: 1px solid var(--lp-border);
}
.apexlanding .lp-lgen-output-extras span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-lgen-output-extras [data-lucide] {
  width: 14px;
  height: 14px;
}

/* Responsive: Tablet */
@media (max-width: 900px) {
  .apexlanding .lp-lgen-flow {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .apexlanding .lp-lgen-flow-arrow {
    transform: rotate(90deg);
    padding: 2px 0;
  }
  .apexlanding .lp-lgen-output-grid { grid-template-columns: 1fr; }
}

/* Responsive: Mobil */
@media (max-width: 640px) {
  .apexlanding .lp-lgen-flow { margin: 24px 0 28px; }
  .apexlanding .lp-lgen-flow-step { padding: 18px 16px 16px; }
  .apexlanding .lp-lgen-flow-icon { width: 40px; height: 40px; }
  .apexlanding .lp-lgen-flow-icon [data-lucide] { width: 20px; height: 20px; }
  .apexlanding .lp-lgen-flow-step h3 { font-size: 14.5px; }
  .apexlanding .lp-lgen-flow-step p { font-size: 13px; }

  .apexlanding .lp-lgen-stats {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 28px;
  }
  .apexlanding .lp-lgen-stat { padding: 16px 18px; }
  .apexlanding .lp-lgen-stat-value { font-size: 24px; }

  .apexlanding .lp-lgen-output { margin-bottom: 36px; }
  .apexlanding .lp-lgen-output-head h2 { font-size: 18px; }
  .apexlanding .lp-lgen-output-head p { font-size: 13.5px; }
  .apexlanding .lp-lgen-output-input { padding: 18px 16px 16px; }
  .apexlanding .lp-lgen-output-mockup-head {
    padding: 10px 14px;
    flex-wrap: wrap;
    font-size: 12px;
  }
  .apexlanding .lp-lgen-output-badge { font-size: 10.5px; padding: 2px 8px; }
  .apexlanding .lp-lgen-output-field { padding: 12px 14px; }
  .apexlanding .lp-lgen-output-field-text { font-size: 13px; }
  .apexlanding .lp-lgen-output-field-mono { font-size: 11.5px; }
  .apexlanding .lp-lgen-output-extras { padding: 10px 14px; gap: 6px 10px; }
  .apexlanding .lp-lgen-output-extras span { font-size: 12px; }
}

/* Bar-Chart-Visualisierung: APEX vs Manuell-Zeit */
.apexlanding .lp-lgen-bars {
  margin: 0 0 48px;
  padding: 28px 28px 24px;
  background: var(--lp-bg-soft);
  border: 1px solid var(--lp-border);
  border-radius: 16px;
}
.apexlanding .lp-lgen-bars-head { margin-bottom: 22px; }
.apexlanding .lp-lgen-bars-head h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--lp-text);
}
.apexlanding .lp-lgen-bars-head p {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-lgen-bars-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.apexlanding .lp-lgen-bars-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lp-text-muted);
}
.apexlanding .lp-lgen-bars-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.apexlanding .lp-lgen-bars-legend-apex .lp-lgen-bars-legend-dot {
  background: linear-gradient(90deg, var(--lp-teal) 0%, var(--lp-mint) 100%);
}
.apexlanding .lp-lgen-bars-legend-manual .lp-lgen-bars-legend-dot {
  background: #cbd5e1;
}

.apexlanding .lp-lgen-bars-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.apexlanding .lp-lgen-bar-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: center;
}
.apexlanding .lp-lgen-bar-task {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lp-text);
  line-height: 1.4;
}
.apexlanding .lp-lgen-bar-tracks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apexlanding .lp-lgen-bar-track {
  height: 24px;
  background: rgba(15, 23, 42, 0.04);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.apexlanding .lp-lgen-bar-fill {
  display: flex;
  align-items: center;
  height: 100%;
  width: var(--bar-pct, 0%);
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  transition: width .8s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  min-width: 32px;
}
.apexlanding .lp-lgen-bar-fill-apex {
  background: linear-gradient(90deg, var(--lp-teal) 0%, var(--lp-teal-dark) 100%);
}
.apexlanding .lp-lgen-bar-fill-manual {
  background: linear-gradient(90deg, #94a3b8 0%, #64748b 100%);
}
.apexlanding .lp-lgen-bar-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* Wenn Balken zu schmal: Label rechts daneben anzeigen */
.apexlanding .lp-lgen-bar-fill[style*="--bar-pct: 2"] .lp-lgen-bar-label,
.apexlanding .lp-lgen-bar-fill[style*="--bar-pct: 3"] .lp-lgen-bar-label,
.apexlanding .lp-lgen-bar-fill[style*="--bar-pct: 4"] .lp-lgen-bar-label,
.apexlanding .lp-lgen-bar-fill[style*="--bar-pct: 5"] .lp-lgen-bar-label,
.apexlanding .lp-lgen-bar-fill[style*="--bar-pct: 6"] .lp-lgen-bar-label,
.apexlanding .lp-lgen-bar-fill[style*="--bar-pct: 7"] .lp-lgen-bar-label,
.apexlanding .lp-lgen-bar-fill[style*="--bar-pct: 8"] .lp-lgen-bar-label,
.apexlanding .lp-lgen-bar-fill[style*="--bar-pct: 9"] .lp-lgen-bar-label,
.apexlanding .lp-lgen-bar-fill[style*="--bar-pct: 10"] .lp-lgen-bar-label,
.apexlanding .lp-lgen-bar-fill[style*="--bar-pct: 11"] .lp-lgen-bar-label,
.apexlanding .lp-lgen-bar-fill[style*="--bar-pct: 12"] .lp-lgen-bar-label,
.apexlanding .lp-lgen-bar-fill[style*="--bar-pct: 13"] .lp-lgen-bar-label,
.apexlanding .lp-lgen-bar-fill[style*="--bar-pct: 14"] .lp-lgen-bar-label,
.apexlanding .lp-lgen-bar-fill[style*="--bar-pct: 15"] .lp-lgen-bar-label {
  position: absolute;
  left: calc(var(--bar-pct, 0%) + 8px);
  color: var(--lp-text);
  white-space: nowrap;
}

.apexlanding .lp-lgen-bar-row-total {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 2px dashed var(--lp-border);
}
.apexlanding .lp-lgen-bar-row-total .lp-lgen-bar-task strong {
  color: var(--lp-teal-dark);
  font-size: 14.5px;
}
.apexlanding .lp-lgen-bar-row-total .lp-lgen-bar-track { height: 28px; }
.apexlanding .lp-lgen-bar-row-total .lp-lgen-bar-fill { font-size: 12.5px; }

.apexlanding .lp-lgen-bars-footnote {
  margin: 18px 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--lp-text-muted);
  line-height: 1.5;
}

@media (max-width: 720px) {
  .apexlanding .lp-lgen-bars { padding: 22px 18px 18px; }
  .apexlanding .lp-lgen-bar-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .apexlanding .lp-lgen-bar-task { font-size: 13px; }
  .apexlanding .lp-lgen-bar-track { height: 22px; }
  .apexlanding .lp-lgen-bar-label { font-size: 11px; }
  .apexlanding .lp-lgen-bars-head h2 { font-size: 18px; }
}

/* Calculator-Mockup-Zeilen (Gebuehrenrechner) */
.apexlanding .lp-calc-rows {
  padding: 6px 0;
}
.apexlanding .lp-calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 22px;
  border-bottom: 1px dashed var(--lp-border);
  font-size: 14px;
  color: var(--lp-text);
}
.apexlanding .lp-calc-row:last-child { border-bottom: none; }
.apexlanding .lp-calc-row-label { color: var(--lp-text); }
.apexlanding .lp-calc-row-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.apexlanding .lp-calc-row-minus {
  color: var(--lp-text-muted);
}
.apexlanding .lp-calc-row-minus .lp-calc-row-value {
  color: #c2410c;
}
.apexlanding .lp-calc-row-total {
  margin-top: 2px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 2px solid var(--lp-border);
  background: linear-gradient(180deg, rgba(94, 234, 212, 0.10) 0%, rgba(13, 148, 136, 0.06) 100%);
  font-size: 15.5px;
}
.apexlanding .lp-calc-row-total strong { color: var(--lp-teal-dark); }
.apexlanding .lp-calc-row-total .lp-calc-row-value strong { font-size: 17px; }

.apexlanding .lp-calc-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 14px 18px;
  background: var(--lp-bg-soft);
  border-top: 1px solid var(--lp-border);
}
.apexlanding .lp-calc-kpi {
  text-align: center;
  border-right: 1px solid var(--lp-border);
  padding: 4px 8px;
}
.apexlanding .lp-calc-kpi:last-child { border-right: none; }
.apexlanding .lp-calc-kpi-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp-text-muted);
  margin-bottom: 2px;
}
.apexlanding .lp-calc-kpi-value {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--lp-teal-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

@media (max-width: 640px) {
  .apexlanding .lp-calc-row {
    padding: 10px 16px;
    font-size: 13px;
  }
  .apexlanding .lp-calc-row-total { font-size: 14.5px; }
  .apexlanding .lp-calc-row-total .lp-calc-row-value strong { font-size: 16px; }
  .apexlanding .lp-calc-kpis { padding: 12px 14px; }
  .apexlanding .lp-calc-kpi-value { font-size: 15.5px; }
  .apexlanding .lp-calc-kpi-label { font-size: 10px; }
}

/* PPC-Audit Sortier-Buckets */
.apexlanding .lp-ppc-buckets { margin: 0 0 48px; }
.apexlanding .lp-ppc-bucket-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.apexlanding .lp-ppc-bucket {
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.apexlanding .lp-ppc-bucket:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.apexlanding .lp-ppc-bucket-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--lp-border);
}
.apexlanding .lp-ppc-bucket-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  color: #fff;
  flex-shrink: 0;
}
.apexlanding .lp-ppc-bucket-icon [data-lucide],
.apexlanding .lp-ppc-bucket-icon svg {
  width: 22px;
  height: 22px;
}
.apexlanding .lp-ppc-bucket-head h3 {
  margin: 0 0 2px;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--lp-text);
  line-height: 1.3;
}
.apexlanding .lp-ppc-bucket-action {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lp-text-muted);
}

/* Farb-Varianten pro Bucket */
.apexlanding .lp-ppc-bucket-good .lp-ppc-bucket-icon {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
}
.apexlanding .lp-ppc-bucket-good .lp-ppc-bucket-action { color: #15803d; }
.apexlanding .lp-ppc-bucket-bad .lp-ppc-bucket-icon {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}
.apexlanding .lp-ppc-bucket-bad .lp-ppc-bucket-action { color: #b91c1c; }
.apexlanding .lp-ppc-bucket-warn .lp-ppc-bucket-icon {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}
.apexlanding .lp-ppc-bucket-warn .lp-ppc-bucket-action { color: #b45309; }
.apexlanding .lp-ppc-bucket-info .lp-ppc-bucket-icon {
  background: linear-gradient(135deg, var(--lp-teal) 0%, var(--lp-mint) 100%);
}
.apexlanding .lp-ppc-bucket-info .lp-ppc-bucket-action { color: var(--lp-teal-dark); }

.apexlanding .lp-ppc-bucket-example {
  padding: 14px 20px 18px;
  background: var(--lp-bg-soft);
}
.apexlanding .lp-ppc-bucket-kw {
  display: block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-text);
  margin-bottom: 10px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 6px;
}
.apexlanding .lp-ppc-bucket-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-ppc-bucket-stats strong {
  color: var(--lp-text);
  font-weight: 700;
  margin-right: 4px;
}

@media (max-width: 720px) {
  .apexlanding .lp-ppc-bucket-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .apexlanding .lp-ppc-bucket-head { padding: 14px 16px; gap: 12px; }
  .apexlanding .lp-ppc-bucket-icon { width: 38px; height: 38px; }
  .apexlanding .lp-ppc-bucket-head h3 { font-size: 14.5px; }
  .apexlanding .lp-ppc-bucket-action { font-size: 11px; }
  .apexlanding .lp-ppc-bucket-example { padding: 12px 16px 14px; }
  .apexlanding .lp-ppc-bucket-stats { font-size: 11.5px; gap: 4px 12px; }
}

/* Walkthrough Zeit-Tracker (Wie-es-funktioniert) */
.apexlanding .lp-walkthrough-tracker {
  margin: 0 0 48px;
  padding: 28px 28px 24px;
  background: var(--lp-bg-soft);
  border: 1px solid var(--lp-border);
  border-radius: 16px;
}
.apexlanding .lp-walkthrough-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.apexlanding .lp-walkthrough-bar {
  display: flex;
  align-items: center;
  gap: 14px;
}
.apexlanding .lp-walkthrough-bar-num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--lp-border);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--lp-teal-dark);
  font-variant-numeric: tabular-nums;
}
.apexlanding .lp-walkthrough-bar-body { flex: 1; min-width: 0; }
.apexlanding .lp-walkthrough-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.apexlanding .lp-walkthrough-bar-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lp-text);
}
.apexlanding .lp-walkthrough-bar-time {
  font-size: 12px;
  color: var(--lp-text-muted);
  font-variant-numeric: tabular-nums;
}
.apexlanding .lp-walkthrough-bar-track {
  height: 12px;
  background: rgba(15, 23, 42, 0.05);
  border-radius: 6px;
  overflow: hidden;
}
.apexlanding .lp-walkthrough-bar-fill {
  display: block;
  height: 100%;
  width: var(--bar-pct, 0%);
  border-radius: 6px;
  background: linear-gradient(90deg, var(--lp-teal) 0%, var(--lp-teal-dark) 100%);
  transition: width .8s cubic-bezier(0.22, 1, 0.36, 1);
}
.apexlanding .lp-walkthrough-bar-fill-ki {
  background: linear-gradient(90deg, var(--lp-mint) 0%, var(--lp-teal) 100%);
  position: relative;
  overflow: hidden;
}
.apexlanding .lp-walkthrough-bar-fill-ki::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  animation: lp-walkthrough-shimmer 2.5s ease-in-out infinite;
}
@keyframes lp-walkthrough-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (max-width: 640px) {
  .apexlanding .lp-walkthrough-tracker { padding: 22px 18px 18px; }
  .apexlanding .lp-walkthrough-bar-num { width: 32px; height: 32px; font-size: 11.5px; }
  .apexlanding .lp-walkthrough-bar-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    margin-bottom: 4px;
  }
  .apexlanding .lp-walkthrough-bar-label { font-size: 13px; }
  .apexlanding .lp-walkthrough-bar-time { font-size: 11.5px; }
  .apexlanding .lp-walkthrough-bar-track { height: 10px; }
}

/* ─────────────────────────────────────────────
   VS-Hub (/vs) - Uebersicht aller Vergleichsseiten
   ───────────────────────────────────────────── */
.apexlanding .lp-vs-hub { padding: 48px 0 72px; }
.apexlanding .lp-vs-hub .lp-container { max-width: 1080px; }

.apexlanding .lp-vs-hub-intro {
  margin: 0 0 36px;
  padding: 22px 26px;
  background: var(--lp-bg-soft);
  border: 1px solid var(--lp-border);
  border-radius: 14px;
}
.apexlanding .lp-vs-hub-intro h2 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-vs-hub-intro p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--lp-text);
}
.apexlanding .lp-vs-hub-intro p:last-child { margin-bottom: 0; }
.apexlanding .lp-vs-hub-intro strong { color: var(--lp-teal-dark); display: inline-block; margin: 0 6px; }

.apexlanding .lp-vs-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 48px;
}
.apexlanding .lp-vs-hub-card {
  display: flex;
  gap: 18px;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.apexlanding .lp-vs-hub-card:hover {
  border-color: var(--lp-teal);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(13,148,136,0.12);
}
.apexlanding .lp-vs-hub-card-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(13,148,136,0.25);
}
.apexlanding .lp-vs-hub-card-icon [data-lucide] { width: 24px; height: 24px; }
.apexlanding .lp-vs-hub-card-body { flex: 1; min-width: 0; }
.apexlanding .lp-vs-hub-card-body h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
  color: var(--lp-text);
}
.apexlanding .lp-vs-hub-tagline {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-vs-hub-summary {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lp-text-muted);
}
.apexlanding .lp-vs-hub-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-vs-hub-cta [data-lucide] {
  width: 14px; height: 14px;
  transition: transform .15s ease;
}
.apexlanding .lp-vs-hub-card:hover .lp-vs-hub-cta [data-lucide] {
  transform: translateX(3px);
}

.apexlanding .lp-vs-hub-method {
  margin: 48px 0;
  padding: 28px 30px;
  background: linear-gradient(135deg, var(--lp-mint-soft), #fff);
  border: 1px solid rgba(13,148,136,0.25);
  border-radius: 16px;
}
.apexlanding .lp-vs-hub-method h2 {
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: 800;
}
.apexlanding .lp-vs-hub-method ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.apexlanding .lp-vs-hub-method li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-text);
  padding-left: 22px;
  position: relative;
}
.apexlanding .lp-vs-hub-method li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--lp-teal);
  font-weight: 700;
}
.apexlanding .lp-vs-hub-method strong { color: var(--lp-teal-dark); }

@media (max-width: 720px) {
  .apexlanding .lp-vs-hub-grid { grid-template-columns: 1fr; gap: 12px; }
  .apexlanding .lp-vs-hub-card { padding: 18px 18px; gap: 14px; }
  .apexlanding .lp-vs-hub-card-icon { width: 42px; height: 42px; }
  .apexlanding .lp-vs-hub-card-icon [data-lucide] { width: 20px; height: 20px; }
  .apexlanding .lp-vs-hub-card-body h3 { font-size: 15.5px; }
  .apexlanding .lp-vs-hub-tagline { font-size: 11.5px; margin-bottom: 6px; }
  .apexlanding .lp-vs-hub-summary { font-size: 13px; margin-bottom: 8px; }
}
@media (max-width: 640px) {
  .apexlanding .lp-vs-hub { padding: 28px 0 56px; }
  .apexlanding .lp-vs-hub .lp-breadcrumbs { display: none; }
  .apexlanding .lp-vs-hub-intro { padding: 16px 18px; margin-bottom: 24px; }
  .apexlanding .lp-vs-hub-intro h2 { font-size: 13px; }
  .apexlanding .lp-vs-hub-intro p { font-size: 13.5px; line-height: 1.55; }
  .apexlanding .lp-vs-hub-method { padding: 20px 18px; }
  .apexlanding .lp-vs-hub-method h2 { font-size: 16px; }
  .apexlanding .lp-vs-hub-method li { font-size: 13px; }
}

/* Vergleichs-Karten-Strip auf der Home: alle 6 VS-Pages direkt unter
   der Compare-Tabelle als klickbare Mini-Cards. Ohne diesen Strip waren
   die VS-Pages faktisch versteckt - nur Nav-Dropdown und Footer hatten
   Links. So sieht jeder Home-Besucher die Vergleiche sofort. */
.apexlanding .lp-compare-vs-strip {
  margin: 36px 0 0;
  padding: 28px 28px 24px;
  background: linear-gradient(135deg, var(--lp-mint-soft), #fff);
  border: 1px solid rgba(13,148,136,0.22);
  border-radius: 16px;
}
.apexlanding .lp-compare-vs-strip-heading {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-text-muted);
  text-align: center;
}
.apexlanding .lp-compare-vs-strip-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.apexlanding .lp-compare-vs-strip-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--lp-text);
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
  text-align: center;
}
.apexlanding .lp-compare-vs-strip-card:hover {
  border-color: var(--lp-teal);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13,148,136,0.14);
}
.apexlanding .lp-compare-vs-strip-card [data-lucide] {
  width: 22px; height: 22px;
  color: var(--lp-teal);
  margin-bottom: 2px;
}
.apexlanding .lp-compare-vs-strip-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-text);
  line-height: 1.2;
}
.apexlanding .lp-compare-vs-strip-tagline {
  font-size: 11px;
  color: var(--lp-text-muted);
  line-height: 1.3;
}

@media (max-width: 960px) {
  .apexlanding .lp-compare-vs-strip-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .apexlanding .lp-compare-vs-strip { padding: 20px 18px 18px; }
  .apexlanding .lp-compare-vs-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .apexlanding .lp-compare-vs-strip-card { padding: 12px 6px; }
  .apexlanding .lp-compare-vs-strip-name { font-size: 12.5px; }
  .apexlanding .lp-compare-vs-strip-tagline { font-size: 10.5px; }
}

/* Detail-Vergleich-Link unter der Compare-Tabelle/Karten auf Home.
   Fuehrt User zur vollen /vs/chatgpt-Page mit Feature-Matrix. */
.apexlanding .lp-compare-detail-link {
  margin: 28px 0 0;
  text-align: center;
}
.apexlanding .lp-compare-detail-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #fff;
  border: 1.5px solid var(--lp-teal);
  border-radius: 9999px;
  color: var(--lp-teal-dark);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.apexlanding .lp-compare-detail-link a:hover {
  background: var(--lp-teal);
  color: #fff;
  transform: translateY(-2px);
}
.apexlanding .lp-compare-detail-link a [data-lucide] {
  width: 16px; height: 16px;
}

/* ─────────────────────────────────────────────
   Vergleichsseite (/vs/chatgpt) - Feature-Matrix
   ───────────────────────────────────────────── */
.apexlanding .lp-vs-page { padding: 48px 0 72px; }
.apexlanding .lp-vs-page .lp-container { max-width: 920px; }

.apexlanding .lp-vs-tldr {
  margin: 0 0 40px;
  padding: 22px 26px;
  background: linear-gradient(135deg, var(--lp-mint-soft), #fff);
  border: 1px solid rgba(13,148,136,0.28);
  border-radius: 14px;
}
.apexlanding .lp-vs-tldr h2 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-vs-tldr ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apexlanding .lp-vs-tldr li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--lp-text);
}

.apexlanding .lp-vs-matrix { margin: 40px 0; }
.apexlanding .lp-vs-matrix h2 {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 800;
}
.apexlanding .lp-vs-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
}
.apexlanding .lp-vs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.apexlanding .lp-vs-table th,
.apexlanding .lp-vs-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--lp-border-soft);
  text-align: left;
  vertical-align: top;
}
.apexlanding .lp-vs-table thead th {
  background: var(--lp-bg-soft);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lp-text);
}
.apexlanding .lp-vs-table .lp-vs-col-apex {
  background: rgba(13,148,136,0.05);
  font-weight: 600;
}
.apexlanding .lp-vs-table thead .lp-vs-col-apex {
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-teal-dark));
  color: #fff;
}
.apexlanding .lp-vs-table td [data-lucide] {
  width: 16px; height: 16px;
  vertical-align: -3px;
  margin-right: 4px;
}
.apexlanding .lp-vs-table td:first-child {
  font-weight: 600;
  color: var(--lp-text);
  min-width: 200px;
}

.apexlanding .lp-vs-when { margin: 48px 0; }
.apexlanding .lp-vs-when h2 {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 800;
}
.apexlanding .lp-vs-when-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.apexlanding .lp-vs-when-card {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 14px;
}
.apexlanding .lp-vs-when-card-primary {
  background: linear-gradient(135deg, var(--lp-mint-soft), #fff);
  border-color: rgba(13,148,136,0.35);
}
.apexlanding .lp-vs-when-card h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
}
.apexlanding .lp-vs-when-card h3 [data-lucide] {
  width: 18px; height: 18px;
  color: var(--lp-teal);
}
.apexlanding .lp-vs-when-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apexlanding .lp-vs-when-card li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--lp-text);
  padding-left: 18px;
  position: relative;
}
.apexlanding .lp-vs-when-card li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--lp-teal);
  font-weight: 700;
}

.apexlanding .lp-vs-honest {
  margin: 40px 0;
  padding: 22px 26px;
  background: var(--lp-bg-soft);
  border-left: 4px solid var(--lp-amber, #ba7517);
  border-radius: 0 12px 12px 0;
}
.apexlanding .lp-vs-honest h2 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 800;
}
.apexlanding .lp-vs-honest ul {
  margin: 0;
  padding-left: 22px;
}
.apexlanding .lp-vs-honest li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-text);
  margin-bottom: 6px;
}
.apexlanding .lp-vs-honest p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-text);
}
.apexlanding .lp-vs-honest p:last-child { margin-bottom: 0; }
/* Variante "kein Tool noetig" - dezenter Stil, abgesetzt vom regulaeren Honest-Block */
.apexlanding .lp-vs-honest-no-tool {
  background: #fff;
  border-left-color: var(--lp-text-light);
}

/* Stand-Datum unter dem Header - dezent in muted */
.apexlanding .lp-vs-stand {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--lp-text-light);
  font-style: italic;
}

/* ── Side-by-Side Output-Vergleich ── */
.apexlanding .lp-vs-output {
  margin: 48px 0;
}
.apexlanding .lp-vs-output-head { margin-bottom: 22px; }
.apexlanding .lp-vs-output-head h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
}
.apexlanding .lp-vs-output-sub {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--lp-text-muted);
}
.apexlanding .lp-vs-output-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.apexlanding .lp-vs-output-card {
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 14px;
}
.apexlanding .lp-vs-output-card.is-apex {
  background: linear-gradient(135deg, #fff, var(--lp-mint-soft));
  border-color: rgba(13,148,136,0.32);
}
.apexlanding .lp-vs-output-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lp-border-soft);
  font-size: 15px;
  font-weight: 700;
}
.apexlanding .lp-vs-output-card-head [data-lucide] { width: 18px; height: 18px; color: var(--lp-teal); }
.apexlanding .lp-vs-output-badge {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.apexlanding .lp-vs-badge-warn { background: #fef3c7; color: #92400e; }
.apexlanding .lp-vs-badge-good { background: #d1fae5; color: #047857; }
.apexlanding .lp-vs-output-fields { margin: 0; }
.apexlanding .lp-vs-output-fields dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-text-muted);
  margin: 12px 0 4px;
}
.apexlanding .lp-vs-output-fields dt:first-child { margin-top: 0; }
.apexlanding .lp-vs-output-fields dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lp-text);
}
.apexlanding .lp-vs-output-meta {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-style: italic;
}
.apexlanding .lp-vs-meta-bad  { color: #b91c1c; }
.apexlanding .lp-vs-meta-good { color: #047857; }
.apexlanding .lp-vs-output-fields dd [data-lucide] {
  width: 14px; height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--lp-teal);
}
.apexlanding .lp-vs-output-card.is-chatgpt .lp-vs-output-fields dd [data-lucide] { color: #b91c1c; }
.apexlanding .lp-vs-output-note {
  margin: 16px 0 0;
  font-size: 12.5px;
  font-style: italic;
  color: var(--lp-text-muted);
  line-height: 1.55;
}

/* ── Kosten-/Zeit-Rechnung ── */
.apexlanding .lp-vs-cost {
  margin: 48px 0;
  padding: 28px 28px 24px;
  background: var(--lp-bg-soft);
  border: 1px solid var(--lp-border);
  border-radius: 16px;
}
.apexlanding .lp-vs-cost-head { margin-bottom: 22px; }
.apexlanding .lp-vs-cost-head h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
}
.apexlanding .lp-vs-cost-head p {
  margin: 0;
  font-size: 14px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-vs-cost-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.apexlanding .lp-vs-cost-card {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
}
.apexlanding .lp-vs-cost-card-highlight {
  border-color: var(--lp-teal);
  box-shadow: 0 6px 18px rgba(13,148,136,0.15);
}
.apexlanding .lp-vs-cost-card h3 {
  margin: 0 0 14px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--lp-text);
}
.apexlanding .lp-vs-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--lp-border-soft);
  font-size: 13px;
}
.apexlanding .lp-vs-cost-row:last-of-type { border-bottom: none; }
.apexlanding .lp-vs-cost-label { color: var(--lp-text-muted); }
.apexlanding .lp-vs-cost-val { color: var(--lp-text); font-variant-numeric: tabular-nums; }
.apexlanding .lp-vs-cost-row-apex .lp-vs-cost-val strong { color: var(--lp-teal-dark); }
.apexlanding .lp-vs-cost-verdict {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(13,148,136,0.30);
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-vs-cost-fine {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--lp-text-muted);
  line-height: 1.55;
}
.apexlanding .lp-vs-cost-fine a { color: var(--lp-teal-dark); text-decoration: underline; }

/* ── Migration-Guide ── */
.apexlanding .lp-vs-migration {
  margin: 48px 0;
}
.apexlanding .lp-vs-migration-head { margin-bottom: 22px; }
.apexlanding .lp-vs-migration-head h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
}
.apexlanding .lp-vs-migration-head p {
  margin: 0;
  font-size: 14.5px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-vs-migration-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.apexlanding .lp-vs-migration-steps > li {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
}
.apexlanding .lp-vs-migration-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-teal-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 15px;
}
.apexlanding .lp-vs-migration-steps h3 {
  margin: 4px 0 6px;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--lp-text);
}
.apexlanding .lp-vs-migration-steps p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--lp-text-muted);
}
.apexlanding .lp-vs-migration-tip {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--lp-mint-soft);
  border: 1px solid rgba(13,148,136,0.25);
  border-radius: 12px;
  align-items: flex-start;
}
.apexlanding .lp-vs-migration-tip [data-lucide] {
  width: 20px; height: 20px;
  color: var(--lp-teal-dark);
  flex-shrink: 0;
  margin-top: 2px;
}
.apexlanding .lp-vs-migration-tip p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lp-text);
}

/* ── Related-Vergleiche-Block am Ende jeder VS-Page ──
   Verlinkt die anderen 5 VS-Pages plus den Hub. Wichtig fuer interne
   SEO-Verlinkung (Crawler entdecken alle VS-Pages aus jeder einzelnen)
   und fuer User-Conversion (wer abwaegt vergleicht oft mehrere). */
.apexlanding .lp-vs-related {
  margin: 48px 0 0;
  padding: 28px 30px 26px;
  background: var(--lp-bg-soft);
  border: 1px solid var(--lp-border);
  border-radius: 16px;
}
.apexlanding .lp-vs-related-head { margin-bottom: 18px; }
.apexlanding .lp-vs-related-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
}
.apexlanding .lp-vs-related-head p {
  margin: 0;
  font-size: 13.5px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-vs-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.apexlanding .lp-vs-related-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--lp-text);
  transition: border-color .15s ease, transform .12s ease;
}
.apexlanding .lp-vs-related-card:hover {
  border-color: var(--lp-teal);
  transform: translateY(-1px);
}
.apexlanding .lp-vs-related-card-hub {
  background: linear-gradient(135deg, var(--lp-mint-soft), #fff);
  border-color: rgba(13,148,136,0.25);
}
.apexlanding .lp-vs-related-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.apexlanding .lp-vs-related-icon [data-lucide] { width: 18px; height: 18px; }
.apexlanding .lp-vs-related-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.apexlanding .lp-vs-related-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--lp-text);
  line-height: 1.3;
}
.apexlanding .lp-vs-related-tag {
  font-size: 11.5px;
  color: var(--lp-text-muted);
  margin-top: 1px;
}
.apexlanding .lp-vs-related-arrow {
  width: 16px; height: 16px;
  color: var(--lp-teal);
  flex-shrink: 0;
  transition: transform .15s ease;
}
.apexlanding .lp-vs-related-card:hover .lp-vs-related-arrow {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .apexlanding .lp-vs-related { padding: 20px 18px 18px; }
  .apexlanding .lp-vs-related-head h2 { font-size: 16px; }
  .apexlanding .lp-vs-related-grid { grid-template-columns: 1fr; gap: 8px; }
  .apexlanding .lp-vs-related-card { padding: 10px 12px; gap: 12px; }
  .apexlanding .lp-vs-related-icon { width: 32px; height: 32px; }
  .apexlanding .lp-vs-related-name { font-size: 13.5px; }
  .apexlanding .lp-vs-related-tag { font-size: 11px; }
}

/* ── Testimonial-Quote ── */
.apexlanding .lp-vs-quote {
  position: relative;
  margin: 48px 0;
  padding: 28px 32px 24px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 14px;
}
.apexlanding .lp-vs-quote-mark {
  width: 32px; height: 32px;
  color: var(--lp-mint);
  margin-bottom: 8px;
}
.apexlanding .lp-vs-quote blockquote {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--lp-text);
  font-weight: 500;
}
.apexlanding .lp-vs-quote footer {
  font-size: 13px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-vs-quote footer strong { color: var(--lp-text); }

@media (max-width: 720px) {
  .apexlanding .lp-vs-output-grid { grid-template-columns: 1fr; }
  .apexlanding .lp-vs-cost-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .apexlanding .lp-vs-output-head h2,
  .apexlanding .lp-vs-cost-head h2,
  .apexlanding .lp-vs-migration-head h2 { font-size: 18px; }
  .apexlanding .lp-vs-output-card { padding: 16px 18px; }
  .apexlanding .lp-vs-output-fields dd { font-size: 13px; }
  .apexlanding .lp-vs-cost { padding: 18px 18px 18px; }
  .apexlanding .lp-vs-cost-card { padding: 14px 16px; }
  .apexlanding .lp-vs-migration-steps > li { padding: 14px 16px; gap: 12px; }
  .apexlanding .lp-vs-migration-num { width: 30px; height: 30px; font-size: 13px; }
  .apexlanding .lp-vs-quote { padding: 22px 22px 20px; }
  .apexlanding .lp-vs-quote blockquote { font-size: 14.5px; }
}

.apexlanding .lp-vs-cta {
  margin-top: 40px;
  padding: 32px 28px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-teal-dark));
  color: #fff;
  border-radius: 16px;
  text-align: center;
}
.apexlanding .lp-vs-cta h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}
.apexlanding .lp-vs-cta p {
  margin: 0 0 20px;
  font-size: 15px;
  color: rgba(255,255,255,0.92);
}
.apexlanding .lp-vs-cta .lp-btn {
  background: #fff;
  color: var(--lp-teal-dark);
}

@media (max-width: 640px) {
  .apexlanding .lp-vs-page { padding: 28px 0 56px; }
  .apexlanding .lp-vs-page .lp-breadcrumbs { display: none; }
  .apexlanding .lp-vs-tldr { padding: 16px 18px; margin-bottom: 28px; }
  .apexlanding .lp-vs-tldr li { font-size: 13.5px; }
  .apexlanding .lp-vs-table { font-size: 13px; }
  .apexlanding .lp-vs-table th,
  .apexlanding .lp-vs-table td { padding: 10px 10px; }
  .apexlanding .lp-vs-table td:first-child { min-width: 140px; }
  .apexlanding .lp-vs-when-grid { grid-template-columns: 1fr; gap: 12px; }
  .apexlanding .lp-vs-when-card { padding: 16px 18px; }
  .apexlanding .lp-vs-honest { padding: 16px 18px; }
  .apexlanding .lp-vs-cta { padding: 24px 18px; }
  .apexlanding .lp-vs-cta h2 { font-size: 18px; }
  .apexlanding .lp-vs-cta p { font-size: 13.5px; }
}

/* ─────────────────────────────────────────────
   Glossar-Page (/glossar) - DefinedTerm-Liste
   ───────────────────────────────────────────── */
.apexlanding .lp-glossar { padding: 48px 0 72px; }
.apexlanding .lp-glossar .lp-container { max-width: 880px; }

.apexlanding .lp-glossar-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 40px;
  padding: 16px 20px;
  background: var(--lp-bg-soft);
  border: 1px solid var(--lp-border);
  border-radius: 12px;
}
.apexlanding .lp-glossar-toc a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-teal-dark);
  text-decoration: none;
  transition: border-color .15s ease;
}
.apexlanding .lp-glossar-toc a:hover {
  border-color: var(--lp-teal);
}

.apexlanding .lp-glossar-group {
  margin-bottom: 40px;
  scroll-margin-top: 80px;
}
.apexlanding .lp-glossar-group h2 {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 800;
  color: var(--lp-text);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--lp-mint-soft);
}
.apexlanding .lp-glossar-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apexlanding .lp-glossar-item {
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
}
.apexlanding .lp-glossar-item dt {
  font-size: 16px;
  font-weight: 800;
  color: var(--lp-teal-dark);
  margin: 0 0 6px;
}
.apexlanding .lp-glossar-item dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--lp-text);
}
.apexlanding .lp-glossar-related {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-teal);
  text-decoration: none;
}
.apexlanding .lp-glossar-related:hover { text-decoration: underline; }
.apexlanding .lp-glossar-related [data-lucide] { width: 13px; height: 13px; }

.apexlanding .lp-glossar-foot {
  margin-top: 56px;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--lp-mint-soft), #fff);
  border: 1px solid rgba(13,148,136,0.28);
  border-radius: 16px;
}
.apexlanding .lp-glossar-foot h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
}
.apexlanding .lp-glossar-foot p {
  margin: 0 0 18px;
  font-size: 14.5px;
  color: var(--lp-text-muted);
  line-height: 1.55;
}
/* Underline nur auf Inline-Text-Links (im <p>), NICHT auf Buttons in
   der CTA-Row darunter. Buttons haben eigenes Styling. */
.apexlanding .lp-glossar-foot p a {
  color: var(--lp-teal-dark);
  text-decoration: underline;
}
.apexlanding .lp-glossar-foot .lp-btn { text-decoration: none; }

@media (max-width: 640px) {
  .apexlanding .lp-glossar { padding: 28px 0 56px; }
  .apexlanding .lp-glossar .lp-breadcrumbs { display: none; }
  .apexlanding .lp-glossar-toc { padding: 12px 14px; gap: 6px; margin-bottom: 28px; }
  .apexlanding .lp-glossar-toc a { padding: 5px 10px; font-size: 12px; }
  .apexlanding .lp-glossar-group { margin-bottom: 28px; }
  .apexlanding .lp-glossar-group h2 { font-size: 18px; }
  .apexlanding .lp-glossar-item { padding: 14px 16px; }
  .apexlanding .lp-glossar-item dt { font-size: 15px; }
  .apexlanding .lp-glossar-item dd { font-size: 13.5px; line-height: 1.55; }
  .apexlanding .lp-glossar-foot { padding: 20px 18px; }
  .apexlanding .lp-glossar-foot p { font-size: 13.5px; }
}

/* Tool → Blog Cross-Linking-Block. Kompakte Liste mit thematisch
   passenden Blog-Artikeln. Vor der FAQ platziert, damit der User
   beim Stoebern eine Vertiefungs-Option bekommt statt direkt
   die FAQ-Antworten zu scannen. */
.apexlanding .lp-tool-blog-cross {
  max-width: 760px;
  margin: 36px auto 0;
  padding: 24px 28px;
  background: var(--lp-bg-soft, #f8fafc);
  border: 1px solid var(--lp-border);
  border-radius: 14px;
}
.apexlanding .lp-tool-blog-cross h2 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-tool-blog-cross ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.apexlanding .lp-tool-blog-cross a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .15s ease, transform .1s ease;
}
.apexlanding .lp-tool-blog-cross a:hover {
  border-color: var(--lp-teal);
  transform: translateY(-1px);
}
.apexlanding .lp-tool-blog-cross strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-tool-blog-cross span {
  font-size: 13px;
  color: var(--lp-text-muted);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .apexlanding .lp-tool-blog-cross { padding: 18px 18px; }
  .apexlanding .lp-tool-blog-cross h2 { font-size: 12.5px; margin-bottom: 10px; }
  .apexlanding .lp-tool-blog-cross a { padding: 10px 12px; }
  .apexlanding .lp-tool-blog-cross strong { font-size: 13.5px; }
  .apexlanding .lp-tool-blog-cross span { font-size: 12.5px; }
}

/* Related-Tools-Block am Ende */
.apexlanding .lp-tool-related {
  max-width: 760px;
  margin: 48px auto 0;
  padding: 28px 32px;
  background: var(--lp-bg-soft, #f8fafc);
  border-radius: 14px;
}
.apexlanding .lp-tool-related h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: var(--lp-text);
}
.apexlanding .lp-tool-related > p {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-tool-related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.apexlanding .lp-tool-related a {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 10px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.apexlanding .lp-tool-related a:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(13, 148, 136, 0.08);
  border-color: var(--lp-teal);
}
.apexlanding .lp-tool-related strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--lp-teal);
  margin-bottom: 4px;
}
.apexlanding .lp-tool-related span {
  font-size: 13px;
  color: var(--lp-text-muted);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 720px) {
  .apexlanding .lp-tool-widget { padding: 22px; }
  .apexlanding .lp-tool-explainer-grid { grid-template-columns: 1fr; }
  .apexlanding .lp-tool-cta-card { padding: 22px; gap: 18px; }
  .apexlanding .lp-tool-cta-card .lp-btn { width: 100%; justify-content: center; }
  .apexlanding .lp-tool-account-card { padding: 32px 22px; }
  .apexlanding .lp-tool-stat-primary .lp-tool-stat-value strong { font-size: 28px; }
}

/* Account-Required-Page Mobile-Feinarbeit: Karte kompakter, Liste enger,
   Buttons full-width, Related-Block tighter. */
@media (max-width: 640px) {
  .apexlanding .lp-tool-account-card { padding: 24px 18px; border-radius: 16px; }
  .apexlanding .lp-tool-account-icon { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 12px; }
  .apexlanding .lp-tool-account-icon [data-lucide] { width: 24px; height: 24px; }
  .apexlanding .lp-tool-account-card h2 { font-size: 20px; margin-bottom: 10px; }
  .apexlanding .lp-tool-account-card > p { font-size: 14px; line-height: 1.55; margin-bottom: 20px; }
  .apexlanding .lp-tool-account-list { gap: 8px; margin-bottom: 22px; }
  .apexlanding .lp-tool-account-list li { font-size: 13.5px; line-height: 1.45; }
  .apexlanding .lp-tool-account-list [data-lucide] { width: 16px; height: 16px; }
  .apexlanding .lp-tool-account-cta .lp-btn {
    width: 100%;
    justify-content: center;
  }
  .apexlanding .lp-tool-account-login { font-size: 13px; }

  .apexlanding .lp-tool-related {
    margin-top: 32px;
    padding: 20px 18px;
    border-radius: 12px;
  }
  .apexlanding .lp-tool-related h3 { font-size: 15px; margin-bottom: 6px; }
  .apexlanding .lp-tool-related > p { font-size: 13px; margin-bottom: 14px; }
  .apexlanding .lp-tool-related ul { gap: 8px; }
  .apexlanding .lp-tool-related a { padding: 12px 14px; }
  .apexlanding .lp-tool-related strong { font-size: 14px; }
  .apexlanding .lp-tool-related span { font-size: 12.5px; line-height: 1.45; }
}

/* ═══════════════════════════════════════════════════════════════
   TOOL-PAGES - ERWEITERTER SEO-CONTENT (Counter mit Dropdown,
   Limit-Tabelle, HowTo-Steps, Vergleich-Box, FAQ-Details).
   ═══════════════════════════════════════════════════════════════ */

/* Field-Selector (Dropdown) im Universal-Counter */
.apexlanding .lp-tool-field-select { margin-bottom: 22px; }
.apexlanding .lp-tool-label-spaced { margin-top: 0; }
.apexlanding .lp-tool-select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--lp-border);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--lp-text);
  background: #fff;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  box-sizing: border-box;
  transition: border-color .15s ease;
  /* Eigener Pfeil */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 44px;
}
.apexlanding .lp-tool-select:focus {
  outline: none;
  border-color: var(--lp-teal);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

/* Mobile-Cut-Marker auf der Progress-Bar */
.apexlanding .lp-tool-progress {
  position: relative;
  overflow: visible;
}
.apexlanding .lp-tool-progress-marker {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: rgba(15, 23, 42, 0.55);
  pointer-events: none;
}
.apexlanding .lp-tool-progress-marker::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -3px;
  width: 8px;
  height: 8px;
  background: rgba(15, 23, 42, 0.85);
  border-radius: 50%;
}
.apexlanding .lp-tool-progress-marker-label {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(15, 23, 42, 0.7);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.92);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, 0.15);
}

/* Mobile-Preview innerhalb der Stats-Box */
.apexlanding .lp-tool-mobile-preview {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Explainer-Intro-Absatz (vor der Grid) */
.apexlanding .lp-tool-explainer-intro {
  max-width: 720px;
  margin: 0 auto 32px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--lp-text-muted);
  text-align: center;
}

/* Limits-Tabelle (im Universal-Counter) */
.apexlanding .lp-tool-limits-table {
  margin: 32px auto;
  max-width: 760px;
  overflow-x: auto;
}
.apexlanding .lp-tool-limits-table table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--lp-border);
}
.apexlanding .lp-tool-limits-table th,
.apexlanding .lp-tool-limits-table td {
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--lp-border);
}
.apexlanding .lp-tool-limits-table th {
  background: var(--lp-bg-soft, #f8fafc);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp-text-muted);
}
.apexlanding .lp-tool-limits-table tbody tr:last-child td { border-bottom: none; }
.apexlanding .lp-tool-limits-table strong { color: var(--lp-text); }

/* Use-Cases-Block (lange Beschreibungen) */
.apexlanding .lp-tool-usecases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.apexlanding .lp-tool-usecase {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
}
.apexlanding .lp-tool-usecase h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--lp-text);
}
.apexlanding .lp-tool-usecase p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--lp-text-muted);
}

/* Vergleich gut/schlecht (Titel-Validator) */
.apexlanding .lp-tool-compare-titles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.apexlanding .lp-tool-compare-bad,
.apexlanding .lp-tool-compare-good {
  padding: 24px;
  border-radius: 12px;
  border: 2px solid;
}
.apexlanding .lp-tool-compare-bad {
  background: #fef2f2;
  border-color: #fecaca;
}
.apexlanding .lp-tool-compare-good {
  background: #f0fdf4;
  border-color: #86efac;
}
.apexlanding .lp-tool-compare-bad h3,
.apexlanding .lp-tool-compare-good h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
}
.apexlanding .lp-tool-compare-bad h3 { color: #991b1b; }
.apexlanding .lp-tool-compare-good h3 { color: #166534; }
.apexlanding .lp-tool-example-title {
  margin: 0 0 14px;
  padding: 14px;
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--lp-text);
  border: 1px solid rgba(0,0,0,0.06);
}
.apexlanding .lp-tool-compare-bad ul,
.apexlanding .lp-tool-compare-good ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
}
.apexlanding .lp-tool-compare-bad li,
.apexlanding .lp-tool-compare-good li { margin-bottom: 4px; }

/* HowTo-Steps */
.apexlanding .lp-tool-howto {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.apexlanding .lp-tool-howto-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
}
.apexlanding .lp-tool-howto-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-mint));
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.apexlanding .lp-tool-howto-step > div h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--lp-text);
}
.apexlanding .lp-tool-howto-step > div p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--lp-text-muted);
}
.apexlanding .lp-tool-howto-step code {
  background: var(--lp-bg-soft, #f8fafc);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 12px;
  color: var(--lp-teal-dark);
}

/* FAQ-Details-Block */
.apexlanding .lp-tool-faq {
  max-width: 760px;
  margin: 56px auto 0;
}
.apexlanding .lp-tool-faq h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 24px;
  color: var(--lp-text);
}
.apexlanding .lp-tool-faq details {
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.apexlanding .lp-tool-faq details[open] {
  border-color: var(--lp-teal);
  background: var(--lp-mint-soft);
}
.apexlanding .lp-tool-faq summary {
  padding: 14px 18px;
  font-weight: 700;
  font-size: 15px;
  color: var(--lp-text);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 40px;
}
.apexlanding .lp-tool-faq summary::-webkit-details-marker { display: none; }
.apexlanding .lp-tool-faq summary::after {
  content: '+';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 600;
  color: var(--lp-teal);
  transition: transform .15s ease;
}
.apexlanding .lp-tool-faq details[open] summary::after {
  content: '−';
}
.apexlanding .lp-tool-faq details p {
  margin: 0;
  padding: 0 18px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--lp-text);
}
.apexlanding .lp-tool-faq strong { color: var(--lp-text); }
.apexlanding .lp-tool-faq code {
  background: rgba(0,0,0,0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}

/* Responsive */
@media (max-width: 720px) {
  .apexlanding .lp-tool-usecases { grid-template-columns: 1fr; }
  .apexlanding .lp-tool-compare-titles { grid-template-columns: 1fr; }
  .apexlanding .lp-tool-howto-step { padding: 16px; gap: 14px; }
  .apexlanding .lp-tool-howto-num { width: 32px; height: 32px; font-size: 14px; }
  .apexlanding .lp-tool-limits-table th,
  .apexlanding .lp-tool-limits-table td { padding: 8px 10px; font-size: 13px; }
}

/* Limits-Tabelle als Card-Stack auf engen Viewports. Eine HTML-Tabelle
   mit 4 Spalten + 6 Zeilen waere auf 360-400px Breite gequetscht. Hier
   loesen wir das table-Layout auf und stylen jede Zeile als eigene
   Mini-Card mit klarer Hierarchie: Feld (gross) - Limit/Einheit (Teal)
   - Hinweis (muted). */
@media (max-width: 640px) {
  .apexlanding .lp-tool-limits-table table { display: block; }
  .apexlanding .lp-tool-limits-table thead { display: none; }
  .apexlanding .lp-tool-limits-table tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .apexlanding .lp-tool-limits-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 10px;
  }
  .apexlanding .lp-tool-limits-table td {
    display: block;
    padding: 0;
    border: 0;
  }
  /* Spalte 1: Feld (Titel/Bullet/...) - groesser, links oben */
  .apexlanding .lp-tool-limits-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--lp-text);
  }
  /* Spalte 2+3: Limit + Einheit zusammen rechts oben */
  .apexlanding .lp-tool-limits-table td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--lp-teal-dark);
    text-align: right;
  }
  .apexlanding .lp-tool-limits-table td:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    font-size: 11.5px;
    color: var(--lp-text-muted);
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  /* Spalte 4: Hinweis-Text spannt unten ueber beide Spalten */
  .apexlanding .lp-tool-limits-table td:nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0,0,0,0.08);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--lp-text-muted);
  }
}

/* Tool-Widget + Stats Mobile-Anpassung: Kompakter, mit gleicher visueller
   Hierarchie. Stats-Grid behaelt 3 Spalten aber mit reduzierter Schrift. */
@media (max-width: 640px) {
  .apexlanding .lp-tool-widget {
    padding: 18px 16px;
    border-radius: 14px;
  }
  .apexlanding .lp-tool-stat-primary .lp-tool-stat-value strong { font-size: 28px; }
  .apexlanding .lp-tool-stat-grid {
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
  }
  .apexlanding .lp-tool-stat-grid .lp-tool-stat-value strong { font-size: 17px; }
  .apexlanding .lp-tool-stat-grid .lp-tool-stat-label { font-size: 10px; }

  .apexlanding .lp-tool-explainer h2 { font-size: 20px; }
  .apexlanding .lp-tool-explainer-grid > div { padding: 14px 16px; }
  .apexlanding .lp-tool-explainer-grid h3 { font-size: 14.5px; }
  .apexlanding .lp-tool-explainer-grid p { font-size: 13px; }
  .apexlanding .lp-tool-faq summary { padding: 12px 14px; font-size: 14px; }
  .apexlanding .lp-tool-faq details > p { padding: 0 14px 12px; font-size: 13px; }

  /* Title-Validator Preview-Boxen + Issues kompakter */
  .apexlanding .lp-tool-previews { margin-top: 18px; padding-top: 18px; }
  .apexlanding .lp-tool-previews h3 { font-size: 12px; margin-bottom: 10px; }
  .apexlanding .lp-tool-preview { padding: 12px 14px; margin-bottom: 10px; }
  .apexlanding .lp-tool-preview-label { font-size: 11px; }
  .apexlanding .lp-tool-preview-text { font-size: 14px; line-height: 1.45; }
  .apexlanding .lp-tool-issues { margin-top: 18px; padding-top: 18px; }
  .apexlanding .lp-tool-issues h3 { font-size: 12px; margin-bottom: 10px; }

  /* EAN-Checker HowTo noch enger + Produkt-Card stacken */
  .apexlanding .lp-tool-howto-step { padding: 12px; gap: 12px; }
  .apexlanding .lp-tool-howto-num { width: 28px; height: 28px; font-size: 13px; }
  .apexlanding .lp-tool-howto-step > div h3 { font-size: 14.5px; }
  .apexlanding .lp-tool-howto-step > div p { font-size: 13px; line-height: 1.5; }

  .apexlanding .lp-ean-product-card {
    flex-direction: column;
    gap: 12px;
    padding: 14px;
  }
  .apexlanding .lp-ean-product-image {
    width: 100%;
    height: 180px;
    max-width: none;
  }
  .apexlanding .lp-ean-product-info h4 { font-size: 15px; }
  .apexlanding .lp-ean-product-meta { font-size: 12px; gap: 4px 10px; }
  .apexlanding .lp-ean-product-desc { font-size: 12.5px; line-height: 1.5; }
}

/* ═══════════════════════════════════════════════════════════════
   EAN-CHECKER - ERWEITERUNG: Land + Produkt-Lookup
   ═══════════════════════════════════════════════════════════════ */

/* Land-Anzeige direkt unter Result-Body */
.apexlanding .lp-ean-country {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--lp-text);
}
.apexlanding .lp-ean-country [data-lucide] {
  width: 16px;
  height: 16px;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-ean-country strong { font-weight: 700; }

/* Lookup-Button + Hint */
.apexlanding .lp-ean-lookup-action {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.apexlanding .lp-ean-lookup-action .cf-turnstile {
  min-height: 65px;
}
.apexlanding .lp-ean-lookup-action .lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.apexlanding .lp-ean-lookup-hint {
  font-size: 12px;
  color: var(--lp-text-muted);
  line-height: 1.4;
}

/* Secondary-Button-Variante falls noch nicht definiert */
.apexlanding .lp-btn-secondary {
  background: var(--lp-mint-soft);
  color: var(--lp-teal-dark);
  border: 1px solid rgba(13, 148, 136, 0.25);
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.apexlanding .lp-btn-secondary:hover:not(:disabled) {
  background: var(--lp-mint, #5eead4);
  transform: translateY(-1px);
}
.apexlanding .lp-btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Produkt-Lookup-Ergebnis-Card */
.apexlanding .lp-ean-product-result {
  margin-top: 20px;
}
.apexlanding .lp-ean-product-card {
  display: flex;
  gap: 18px;
  padding: 20px;
  background: linear-gradient(135deg, var(--lp-mint-soft), #fff);
  border: 1px solid var(--lp-border);
  border-radius: 12px;
  align-items: flex-start;
}
.apexlanding .lp-ean-product-card.lp-ean-product-error,
.apexlanding .lp-ean-product-card.lp-ean-product-notfound {
  background: var(--lp-bg-soft, #f8fafc);
  align-items: center;
}
.apexlanding .lp-ean-product-error [data-lucide],
.apexlanding .lp-ean-product-notfound [data-lucide] {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--lp-text-muted);
}
.apexlanding .lp-ean-product-error { background: #fef2f2; }
.apexlanding .lp-ean-product-error [data-lucide] { color: #dc2626; }

.apexlanding .lp-ean-product-image {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--lp-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.apexlanding .lp-ean-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.apexlanding .lp-ean-product-info {
  flex: 1;
  min-width: 0;
}
.apexlanding .lp-ean-product-info h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--lp-text);
  line-height: 1.35;
}
.apexlanding .lp-ean-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--lp-text-muted);
}
.apexlanding .lp-ean-product-meta strong {
  font-weight: 700;
  color: var(--lp-text);
}
.apexlanding .lp-ean-product-desc {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--lp-text);
}
.apexlanding .lp-ean-product-source {
  margin: 0;
  font-size: 11px;
  color: var(--lp-text-muted);
  font-style: italic;
}

@media (max-width: 600px) {
  .apexlanding .lp-ean-product-card { flex-direction: column; align-items: stretch; }
  .apexlanding .lp-ean-product-image { width: 100%; height: 200px; }
}

/* ═══════════════════════════════════════════════════════════════
   NAV-DROPDOWN (Hover-Menu unter "Kostenlose Tools")
   ═══════════════════════════════════════════════════════════════ */
.apexlanding .lp-nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.apexlanding .lp-nav-link-has-children {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.apexlanding .lp-nav-link-has-children [data-lucide] {
  width: 14px;
  height: 14px;
  transition: transform .2s ease;
}
.apexlanding .lp-nav-dropdown:hover .lp-nav-link-has-children [data-lucide],
.apexlanding .lp-nav-dropdown:focus-within .lp-nav-link-has-children [data-lucide] {
  transform: rotate(180deg);
}

/* Dropdown-Panel */
.apexlanding .lp-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  padding: 10px;
  min-width: 340px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 200;
}
.apexlanding .lp-nav-dropdown:hover .lp-nav-dropdown-menu,
.apexlanding .lp-nav-dropdown:focus-within .lp-nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

/* Hover-Bruecke: damit Maus vom Parent-Link zum Panel kommt ohne dass das
   Menue sich zwischendurch schliesst */
.apexlanding .lp-nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 12px;
  pointer-events: none;
}
.apexlanding .lp-nav-dropdown:hover::after,
.apexlanding .lp-nav-dropdown:focus-within::after {
  pointer-events: auto;
}

.apexlanding .lp-nav-dropdown-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Einzelner Eintrag im Dropdown */
.apexlanding .lp-nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--lp-text);
  text-decoration: none;
  font-size: 14px;
  transition: background .12s ease;
}
.apexlanding .lp-nav-dropdown-item:hover,
.apexlanding .lp-nav-dropdown-item:focus {
  background: var(--lp-mint-soft);
  outline: none;
}

.apexlanding .lp-nav-dropdown-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--lp-mint-soft), #fff);
  border: 1px solid var(--lp-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.apexlanding .lp-nav-dropdown-icon [data-lucide] {
  width: 18px;
  height: 18px;
  color: var(--lp-teal-dark);
}
.apexlanding .lp-nav-dropdown-item:hover .lp-nav-dropdown-icon {
  background: #fff;
  border-color: var(--lp-teal);
}

.apexlanding .lp-nav-dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.apexlanding .lp-nav-dropdown-text strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--lp-text);
  letter-spacing: -0.01em;
}
.apexlanding .lp-nav-dropdown-text span {
  font-size: 12px;
  color: var(--lp-text-muted);
}

.apexlanding .lp-nav-dropdown-badge {
  flex-shrink: 0;
  padding: 3px 8px;
  background: var(--lp-mint-soft);
  color: var(--lp-teal-dark);
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Mobile: Dropdown wird auf Mobile NICHT angezeigt, stattdessen die
   .lp-mobile-sublinks-Variante. */
@media (max-width: 980px) {
  .apexlanding .lp-nav-dropdown-menu { display: none; }
}

/* Mobile-Sublinks (im Burger-Menue) */
.apexlanding .lp-mobile-sublinks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 8px 16px;
  padding-left: 12px;
  border-left: 2px solid var(--lp-border);
}
.apexlanding .lp-mobile-sublink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--lp-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.apexlanding .lp-mobile-sublink:hover,
.apexlanding .lp-mobile-sublink:focus {
  background: var(--lp-mint-soft);
}
.apexlanding .lp-mobile-sublink [data-lucide] {
  width: 16px;
  height: 16px;
  color: var(--lp-teal-dark);
  flex-shrink: 0;
}
.apexlanding .lp-mobile-sublink span:not(.lp-mobile-sublink-badge) {
  flex: 1;
}
.apexlanding .lp-mobile-sublink-badge {
  padding: 2px 8px;
  background: var(--lp-mint-soft);
  color: var(--lp-teal-dark);
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════
   TITLE-VALIDATOR: Highlight-Marker im Preview-Text
   ═══════════════════════════════════════════════════════════════ */
.apexlanding .lp-tv-hl {
  padding: 0 3px;
  border-radius: 4px;
  font-weight: 700;
  background: transparent;
}
.apexlanding .lp-tv-hl-high {
  background: #fecaca;
  color: #991b1b;
  text-decoration: underline wavy #dc2626 1.5px;
}
.apexlanding .lp-tv-hl-medium {
  background: #fef3c7;
  color: #92400e;
  text-decoration: underline wavy #d97706 1.5px;
}
.apexlanding .lp-tv-hl-info {
  background: #e0f2fe;
  color: #075985;
}

/* ════════════════════════════════════════════════════════════════════
   Register-Modal: Account-Type-Tiles (seit v8.0.0, Multi-Tenancy)
   ──────────────────────────────────────────────────────────────────
   Zwei grosse Tile-Buttons (Owner / Mitarbeiter). User-Klick setzt
   das Radio + JS toggled die Conditional-Fields (companyName /
   joinCode) basierend auf der Wahl.
   ════════════════════════════════════════════════════════════════════ */

.apexlanding .lp-register-account-type {
  border: none;
  padding: 0;
  margin: 0 0 18px;
}
.apexlanding .lp-register-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.apexlanding .lp-register-tile {
  position: relative;
  display: block;
  cursor: pointer;
}
.apexlanding .lp-register-tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.apexlanding .lp-register-tile-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  min-height: 110px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.1s, background 0.18s;
}
.apexlanding .lp-register-tile-inner i {
  width: 24px;
  height: 24px;
  color: var(--apex-teal, #0d9488);
  margin-bottom: 2px;
}
.apexlanding .lp-register-tile-inner strong {
  font-size: 14px;
  color: #0f172a;
  font-weight: 600;
  line-height: 1.2;
}
.apexlanding .lp-register-tile-inner span {
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}
.apexlanding .lp-register-tile:hover .lp-register-tile-inner {
  border-color: rgba(13, 148, 136, 0.45);
  transform: translateY(-1px);
}
.apexlanding .lp-register-tile input:checked + .lp-register-tile-inner {
  border-color: var(--apex-teal, #0d9488);
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.07) 0%, rgba(94, 234, 212, 0.04) 100%);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14);
}
/* Haken-Indikator im selected-State (rechts oben) */
.apexlanding .lp-register-tile input:checked + .lp-register-tile-inner::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--apex-teal, #0d9488);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.35);
}

/* Join-Code-Eingabe: monospace, große Schrift, mittig, mit dezenten Box-Glow.
   Visualisiert klar dass das ein "Token-Feld" ist, nicht ein normaler Text. */
.apexlanding .lp-register-field-member input[name="joinCode"] {
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: center;
  padding: 14px 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.apexlanding .lp-register-field-member input[name="joinCode"]:focus {
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.15);
  border-color: var(--apex-teal, #0d9488);
}
.apexlanding .lp-register-field-member input[name="joinCode"]:valid {
  background: linear-gradient(180deg, rgba(13, 148, 136, 0.05) 0%, rgba(13, 148, 136, 0.02) 100%);
  border-color: var(--apex-teal, #0d9488);
  color: var(--apex-teal-dark, #0f766e);
}

@media (max-width: 480px) {
  .apexlanding .lp-register-tiles { grid-template-columns: 1fr; }
  .apexlanding .lp-register-tile-inner { min-height: 0; }
  .apexlanding .lp-register-field-member input[name="joinCode"] {
    font-size: 18px;
    letter-spacing: 0.2em;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   Welle R-7 (2026-05-27): Register-Modal-Wizard + Mobile-Polish
   ═════════════════════════════════════════════════════════════════════ */

/* Modal-Card mit fixiertem Header + Footer (sticky), scrollendem Body — auf
   Mobile entscheidet das gegen den frueheren Scroll-im-Backdrop-Bug. */
.apexlanding .lp-modal-card-r7 {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
}
.apexlanding .lp-modal-card-r7 .lp-modal-card-head {
  padding: 24px 28px 12px;
  border-bottom: 1px solid var(--lp-border, #e2e8f0);
  flex-shrink: 0;
}
.apexlanding .lp-modal-card-r7 .lp-modal-card-body {
  padding: 20px 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.apexlanding .lp-modal-card-r7 .lp-modal-card-foot {
  padding: 14px 28px;
  border-top: 1px solid var(--lp-border, #e2e8f0);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  background: #fff;
}

/* Step-Progress-Bar oben */
.apexlanding .lp-register-stepbar {
  list-style: none;
  display: flex;
  gap: 12px;
  padding: 0;
  margin: 14px 0 0;
}
.apexlanding .lp-register-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--lp-text-muted, #64748b);
}
.apexlanding .lp-register-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--lp-bg-soft, #f1f5f9);
  font-weight: 700;
  font-size: 12px;
}
.apexlanding .lp-register-step.is-active { color: var(--lp-text, #0f172a); }
.apexlanding .lp-register-step.is-active span {
  background: var(--apex-teal, #0d9488);
  color: #fff;
}
.apexlanding .lp-register-step.is-done span {
  background: rgba(13, 148, 136, 0.15);
  color: var(--apex-teal, #0d9488);
}

.apexlanding .lp-register-title { font-size: 22px; margin: 4px 0 0; }

/* Step-Pane: einer sichtbar, andere hidden */
.apexlanding .lp-register-step-pane { display: flex; flex-direction: column; gap: 14px; }
.apexlanding .lp-register-step-pane[hidden] { display: none; }

/* Join-Code-Live-Feedback */
.apexlanding .lp-register-joincode-feedback {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.apexlanding .lp-register-joincode-feedback.is-success {
  background: rgba(13, 148, 136, 0.08);
  color: var(--apex-teal-dark, #0f766e);
}
.apexlanding .lp-register-joincode-feedback.is-error {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

/* Passwort-Strength-Bar */
.apexlanding .lp-register-pw-strength {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--lp-text-muted, #64748b);
}
.apexlanding .lp-register-pw-strength-bar {
  flex: 1;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
}
.apexlanding .lp-register-pw-strength-bar span {
  display: block;
  height: 100%;
  width: 0;
  transition: width .2s ease, background-color .2s ease;
  background: #dc2626;
}

/* Passwort-Match */
.apexlanding .lp-register-pw-match {
  margin-top: 4px;
  font-size: 12px;
}

/* Footer: Submit nimmt vollen Platz neben Back-Button */
.apexlanding .lp-modal-card-foot .lp-register-next,
.apexlanding .lp-modal-card-foot .lp-register-submit { flex: 1; }
.apexlanding .lp-modal-card-foot .lp-register-back { flex: 0 0 auto; }

/* Email-Domain-Hint */
.apexlanding .lp-register-email-domain-hint {
  margin-top: 6px;
  font-size: 12.5px;
}

/* Mobile-Anpassungen */
@media (max-width: 600px) {
  .apexlanding .lp-modal-card-r7 {
    max-height: calc(100vh - 8px);
    border-radius: 12px 12px 0 0;
    align-self: flex-end;
    margin-bottom: 0;
  }
  .apexlanding .lp-modal { padding: 0; align-items: flex-end; }
  .apexlanding .lp-modal-card-r7 .lp-modal-card-head { padding: 18px 18px 8px; }
  .apexlanding .lp-modal-card-r7 .lp-modal-card-body { padding: 14px 18px; gap: 12px; }
  .apexlanding .lp-modal-card-r7 .lp-modal-card-foot { padding: 12px 18px; }
  .apexlanding .lp-register-stepbar { gap: 8px; }
  .apexlanding .lp-register-step { font-size: 12px; }
  .apexlanding .lp-register-step span { width: 20px; height: 20px; font-size: 11px; }
  .apexlanding .lp-register-tiles { grid-template-columns: 1fr; gap: 10px; }
  .apexlanding .lp-register-tile-inner { padding: 14px; min-height: 0; }
  .apexlanding .lp-register-title { font-size: 18px; }
}

/* Login-Modal Mobile-Polish — kompaktere Vertikal-Spacings */
@media (max-width: 600px) {
  .apexlanding #lp-login-modal .lp-modal-card { padding: 24px 18px 18px; max-height: calc(100vh - 16px); overflow-y: auto; }
  .apexlanding #lp-login-modal .lp-modal-head h2 { font-size: 19px; }
  .apexlanding #lp-login-modal .lp-modal-head p { font-size: 13px; }
  .apexlanding #lp-login-modal .lp-modal-form { gap: 11px; margin-top: 14px; }
}

/* ═════════════════════════════════════════════════════════════════════
   Welle R-7 Polish (2026-05-27): Bug-Fixes + Visual-Polish
   ═════════════════════════════════════════════════════════════════════ */

/* BUG: .lp-field hat display:flex und ueberschreibt den Browser-Default
   [hidden]: display:none. Explicit Override damit Owner-Block beim
   Member-Klick wirklich verschwindet. */
.apexlanding .lp-register-field-owner[hidden],
.apexlanding .lp-register-field-member[hidden] {
  display: none !important;
}

/* Modal-Header kompakter: weniger margin um die Pill, Title naeher dran */
.apexlanding .lp-modal-card-r7 .lp-badge {
  margin-bottom: 6px !important;
  font-size: 11.5px;
  padding: 4px 10px;
  white-space: nowrap;        /* verhindert Umbruch in der Pill */
  max-width: max-content;
}
.apexlanding .lp-modal-card-r7 .lp-register-title {
  font-size: 20px;
  margin: 2px 0 0;
}
.apexlanding .lp-modal-card-r7 .lp-modal-card-head {
  padding: 22px 28px 12px;
}
.apexlanding .lp-modal-card-r7 .lp-register-stepbar {
  margin-top: 12px;
  margin-bottom: 0;
}

/* Step-Pane: weniger gap zwischen Feldern */
.apexlanding .lp-register-step-pane { gap: 12px; }
.apexlanding .lp-register-step-pane .lp-field { gap: 4px; }
.apexlanding .lp-register-step-pane .lp-field-hint { font-size: 12px; line-height: 1.4; }

/* Account-Type-Fieldset: weniger margin */
.apexlanding .lp-register-account-type {
  margin: 0 0 4px;
  border: 0; padding: 0;
}
.apexlanding .lp-register-account-type legend.lp-field-label { padding: 0 0 8px; }

/* Mobile Polish: noch enger */
@media (max-width: 600px) {
  .apexlanding .lp-modal-card-r7 .lp-register-title { font-size: 18px; }
  .apexlanding .lp-modal-card-r7 .lp-modal-card-head { padding: 18px 18px 10px; }
}