/* ============================================================
   lp.css — Landing Page Design System
   Orlamünder & Kunad · Arbeitsplatzanalyse
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --ok-red:        #fc0c18;
  --ok-red-dark:   #c80811;
  --ok-red-muted:  #fff0f1;
  --ok-ink:        #111318;
  --ok-ink-mid:    #2d3140;
  --ok-muted:      #6b7280;
  --ok-line:       #e2e4e9;
  --ok-surface:    #fafafa;
  --ok-white:      #ffffff;

  --ok-dark-bg:    #111318;
  --ok-dark-card:  #1c1f2a;
  --ok-dark-line:  #2d3140;
  --ok-dark-text:  #e8eaf0;

  --ok-accent-bg:  #fff8f8;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  --shadow-card:  0 2px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  --shadow-lift:  0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.07);

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;

  --max-w: 1160px;
  --section-pad: 96px 24px;
}

/* ─── BASE ───────────────────────────────────────────────── */
.lp-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ok-ink-mid);
  background: var(--ok-white);
  -webkit-font-smoothing: antialiased;
}
.lp-body *, .lp-body *::before, .lp-body *::after { box-sizing: border-box; }
.lp-body h1, .lp-body h2, .lp-body h3 { font-family: var(--font-display); color: var(--ok-ink); margin: 0 0 .5em; line-height: 1.18; }
.lp-body p { margin: 0 0 1em; }
.lp-body p:last-child { margin-bottom: 0; }
.lp-body ul { margin: .5em 0 0; padding-left: 1.2em; }
.lp-body li { margin-bottom: .35em; }
.lp-body a { color: var(--ok-red); text-decoration: none; }
.lp-body a:hover { text-decoration: underline; }
.lp-body button { font-family: var(--font-body); cursor: pointer; border: none; }

/* ─── TYPOGRAPHY HELPERS ─────────────────────────────────── */
.lp-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ok-ink);
  margin: 0 0 .6em;
}
.lp-h1 em { color: var(--ok-red); font-style: normal; }

.lp-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.8vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -.018em;
  color: inherit;
  margin: 0 0 .55em;
}

.lp-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ok-red);
  margin-bottom: .75rem;
}

.lp-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ok-red);
  margin-bottom: .6rem;
}

.lp-lead {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ok-muted);
  max-width: 580px;
  margin-bottom: 1.75rem;
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.lp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .78em 1.55em;
  background: var(--ok-red);
  color: #fff;
  font-size: .93rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  border: 2px solid var(--ok-red);
  transition: background .18s, transform .14s, box-shadow .18s;
  box-shadow: 0 2px 10px rgba(252,12,24,.25);
}
.lp-btn-primary:hover {
  background: var(--ok-red-dark);
  border-color: var(--ok-red-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(252,12,24,.35);
}

.lp-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .75em 1.5em;
  background: var(--ok-white);
  color: var(--ok-ink);
  font-size: .93rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 2px solid var(--ok-line);
  transition: border-color .18s, background .18s, transform .14s;
}
.lp-btn-secondary:hover {
  border-color: var(--ok-red);
  color: var(--ok-red);
  background: var(--ok-red-muted);
  transform: translateY(-1px);
}

.lp-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .72em 1.5em;
  background: transparent;
  color: #fff;
  font-size: .93rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  border: 2px solid rgba(255,255,255,.45);
  transition: border-color .18s, background .18s;
}
.lp-btn-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,.1);
}

.lp-btn-full { width: 100%; justify-content: center; }

/* ─── NAV ────────────────────────────────────────────────── */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ok-line);
}
.lp-nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.lp-nav-logo {
  height: 34px;
  width: auto;
}
.lp-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.lp-nav-links a {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ok-ink-mid);
  text-decoration: none;
  transition: color .15s;
}
.lp-nav-links a:hover { color: var(--ok-red); }
.lp-nav-cta {
  padding: .5em 1.1em;
  background: var(--ok-red) !important;
  color: #fff !important;
  border-radius: var(--radius-sm);
  font-weight: 700 !important;
  transition: background .15s !important;
}
.lp-nav-cta:hover { background: var(--ok-red-dark) !important; }

/* ─── HERO ───────────────────────────────────────────────── */
.lp-hero {
  background: linear-gradient(150deg, #fff8f8 0%, #ffffff 55%, #f9f9fb 100%);
  padding: 80px 24px 72px;
  border-bottom: 1px solid var(--ok-line);
}
.lp-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
}
.lp-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1.5rem;
}
.lp-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ok-muted);
}
.lp-proof-row span::before { content: ''; }

/* Hero Right Card */
.lp-hero-card {
  background: var(--ok-white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--ok-line);
  box-shadow: var(--shadow-lift);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lp-flow-preview {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.lp-flow-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
}
.lp-flow-step strong {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  color: var(--ok-ink);
}
.lp-flow-step span {
  font-size: .78rem;
  color: var(--ok-muted);
}
.lp-flow-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ok-surface);
  border: 2px solid var(--ok-line);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  color: var(--ok-muted);
}
.lp-flow-step--active .lp-flow-num {
  background: var(--ok-red);
  border-color: var(--ok-red);
  color: #fff;
}
.lp-flow-connector {
  width: 2px;
  height: 12px;
  background: var(--ok-line);
  margin-left: 14px;
}
.lp-hero-card-cta {
  border-top: 1px solid var(--ok-line);
  padding-top: 20px;
}
.lp-hero-card-cta p {
  margin-top: .65rem;
  font-size: .75rem;
  color: var(--ok-muted);
  text-align: center;
}

/* ─── SECTION SKELETON ───────────────────────────────────── */
.lp-section {
  padding: var(--section-pad);
}
.lp-section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.lp-section-header {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}
.lp-section-header p {
  font-size: 1.04rem;
  color: var(--ok-muted);
}

/* Variants */
.lp-section--light  { background: var(--ok-white); }
.lp-section--mid    { background: #f6f7f9; }
.lp-section--dark   { background: var(--ok-dark-bg); color: var(--ok-dark-text); }
.lp-section--dark .lp-h2, .lp-section--dark h2 { color: var(--ok-white); }
.lp-section--dark .lp-section-header p { color: #9199ad; }
.lp-section--dark .lp-label { color: #f87179; }
.lp-section--accent { background: var(--ok-accent-bg); }
.lp-section--funnel { background: #f2f3f6; }

/* ─── TRIGGER GRID (3-col situation cards) ───────────────── */
.lp-trigger-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.lp-trigger-card {
  background: var(--ok-dark-card);
  border: 1px solid var(--ok-dark-line);
  border-radius: var(--radius-lg);
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .2s, transform .2s;
}
.lp-trigger-card:hover { border-color: #fc0c1840; transform: translateY(-2px); }
.lp-trigger-icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 4px;
}
.lp-trigger-card strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ok-white);
}
.lp-trigger-card p {
  font-size: .84rem;
  color: #8b93a8;
  line-height: 1.6;
  margin: 0;
}
.lp-trigger-cta-line {
  margin-top: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: #f87179;
}

/* ─── WHAT YOU GET (Hero Card) ───────────────────────────── */
.lp-what-you-get {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-get-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.lp-get-icon {
  font-size: 1.35rem;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ok-red-muted);
  border-radius: var(--radius-sm);
}
.lp-get-item strong {
  display: block;
  font-weight: 700;
  font-size: .88rem;
  color: var(--ok-ink);
  margin-bottom: 2px;
}
.lp-get-item span {
  font-size: .78rem;
  color: var(--ok-muted);
  line-height: 1.5;
}

/* ─── PAIN GRID ──────────────────────────────────────────── */
.lp-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.lp-pain-card {
  background: var(--ok-dark-card);
  border: 1px solid var(--ok-dark-line);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  transition: transform .2s, border-color .2s;
}
.lp-pain-card:hover {
  transform: translateY(-3px);
  border-color: #fc0c1840;
}
.lp-pain-icon {
  font-size: 1.6rem;
  margin-bottom: 12px;
  line-height: 1;
}
.lp-pain-card strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .97rem;
  color: var(--ok-white);
  margin-bottom: .5em;
}
.lp-pain-card p {
  font-size: .85rem;
  color: #8b93a8;
  line-height: 1.6;
}
.lp-pain-cta { text-align: center; }

/* ─── STEPS (HOW) ────────────────────────────────────────── */
.lp-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  justify-content: center;
  margin-top: 16px;
}
.lp-step {
  flex: 1;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.lp-step-num {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ok-red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(252,12,24,.45);
}
.lp-step-body strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: .4em;
}
.lp-step-body p {
  font-size: .88rem;
  color: #a0a8bc;
  line-height: 1.6;
}
.lp-step-arrow {
  font-size: 1.6rem;
  color: rgba(255,255,255,.25);
  padding: 0 8px;
  margin-top: 16px;
  align-self: flex-start;
  line-height: 64px;
}

/* ─── BEFORE / AFTER ─────────────────────────────────────── */
.lp-ba-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}
.lp-ba-arrow {
  font-size: 2rem;
  color: var(--ok-red);
  font-weight: 700;
  text-align: center;
  padding: 0 8px;
}
.lp-ba-card {
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  border: 1px solid var(--ok-line);
}
.lp-ba-card--before {
  background: var(--ok-white);
  border-style: dashed;
}
.lp-ba-card--after {
  background: #f0fdf4;
  border-color: #86efac;
}
.lp-ba-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ok-muted);
  margin-bottom: .6em;
}
.lp-ba-card--after .lp-ba-label { color: #16a34a; }
.lp-ba-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ok-ink);
  margin: 0 0 .75em;
}
.lp-ba-card li {
  font-size: .88rem;
  color: var(--ok-muted);
  margin-bottom: .4em;
}
.lp-ba-card--after li { color: #374151; }

/* ─── ENTRY ROUTES ───────────────────────────────────────── */
.lp-routes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.lp-route-card {
  background: var(--ok-white);
  border: 2px solid var(--ok-line);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  box-shadow: var(--shadow-card);
}
.lp-route-card:hover {
  border-color: var(--ok-red);
  box-shadow: 0 8px 32px rgba(252,12,24,.15);
  transform: translateY(-3px);
}
.lp-route-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 4px;
}
.lp-route-card .lp-label { margin-bottom: 0; }
.lp-route-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ok-ink);
  margin: 4px 0;
}
.lp-route-card p {
  font-size: .88rem;
  color: var(--ok-muted);
  margin: 0;
}
.lp-route-card ul {
  font-size: .83rem;
  color: var(--ok-muted);
  margin-top: 4px;
}
.lp-route-cta {
  margin-top: 8px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--ok-red);
  font-family: var(--font-display);
}
.lp-route-business:hover .lp-route-cta,
.lp-route-employee:hover .lp-route-cta { text-decoration: underline; }

/* ─── FUNNEL SECTION ─────────────────────────────────────── */
.lp-funnel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.lp-funnel-header-copy .lp-h2 { color: var(--ok-ink); margin-bottom: .2em; }
.lp-funnel-header-copy p { font-size: .87rem; color: var(--ok-muted); margin: 0; }

.lp-route-chip {
  display: inline-block;
  padding: .3em .85em;
  background: var(--ok-red-muted);
  color: var(--ok-red);
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.lp-progress-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ok-muted);
  background: var(--ok-white);
  padding: .35em .9em;
  border-radius: 999px;
  border: 1px solid var(--ok-line);
}

.lp-funnel-card {
  background: var(--ok-white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--ok-line);
  box-shadow: var(--shadow-card);
  padding: 40px 36px;
  min-height: 320px;
}

/* Placeholder state */
.lp-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  min-height: 240px;
  gap: 12px;
}
.lp-placeholder-icon {
  font-size: 2rem;
  color: var(--ok-muted);
  animation: bounce .8s ease infinite alternate;
}
@keyframes bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}
.lp-placeholder h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ok-ink);
  margin: 4px 0;
}
.lp-placeholder p {
  font-size: .88rem;
  color: var(--ok-muted);
  max-width: 440px;
}
.lp-placeholder-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

/* ─── FOOTER ─────────────────────────────────────────────── */
.lp-footer {
  background: var(--ok-ink);
  color: #8b93a8;
  padding: 48px 24px;
  border-top: 1px solid #2d3140;
}
.lp-footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
  justify-content: space-between;
}
.lp-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-footer-logo {
  height: 34px;
  filter: brightness(0) invert(1);
  opacity: .9;
}
.lp-footer-brand p { font-size: .8rem; margin: 0; }
.lp-footer-links {
  display: flex;
  gap: 20px;
  align-items: center;
}
.lp-footer-links a {
  font-size: .85rem;
  color: #8b93a8;
  text-decoration: none;
  transition: color .15s;
}
.lp-footer-links a:hover { color: #fff; }
.lp-footer-note {
  width: 100%;
  font-size: .75rem;
  color: #555e72;
  padding-top: 16px;
  border-top: 1px solid #2d3140;
  margin: 0;
}

/* ─── MODAL ──────────────────────────────────────────────── */
.lp-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.lp-modal.is-open { display: flex; }

.lp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,12,18,.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  cursor: pointer;
}

.lp-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  background: var(--ok-white);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: auto 0;
  animation: modalIn .22s cubic-bezier(.16,1,.3,1) both;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.lp-modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: var(--ok-white);
  border-bottom: 1px solid var(--ok-line);
}
.lp-modal-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lp-modal-close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--ok-line);
  background: var(--ok-surface);
  font-size: 1rem;
  color: var(--ok-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1;
}
.lp-modal-close:hover {
  background: var(--ok-ink);
  color: var(--ok-white);
  border-color: var(--ok-ink);
}

.lp-modal-body {
  padding: 32px 36px 40px;
  overflow-y: auto;
}

/* ─── TRIGGER GRID ──────────────────────────────────────────── */
.lp-trigger-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.lp-trigger-card {
  background: var(--ok-white);
  border: 1px solid var(--ok-line);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s, box-shadow .2s;
}
.lp-trigger-card:hover {
  border-color: var(--ok-red);
  box-shadow: 0 4px 20px rgba(252,12,24,.1);
}
.lp-trigger-quote {
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 700;
  color: var(--ok-ink);
  line-height: 1.3;
  border-left: 3px solid var(--ok-red);
  padding-left: 10px;
}
.lp-trigger-card p {
  font-size: .85rem;
  color: var(--ok-muted);
  line-height: 1.6;
  margin: 0;
}
.lp-trigger-for {
  font-size: .76rem;
  font-weight: 700;
  color: var(--ok-red);
  margin-top: auto;
  padding-top: 6px;
}
.lp-trigger-cta {
  text-align: center;
}

/* Routes-note under entry paths */
.lp-routes-note {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 28px;
  font-size: .78rem;
  color: var(--ok-muted);
  text-align: center;
}

/* Hero badge */
.lp-hero-card-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--ok-red-muted);
  border-radius: var(--radius-md);
  border: 1px solid #fecacc;
  font-size: .76rem;
  font-weight: 600;
  color: var(--ok-red);
  margin-bottom: 4px;
}
.lp-hero-card-tag {
  color: var(--ok-muted);
  font-weight: 500;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1040px) {
  .lp-hero-inner { grid-template-columns: 1fr; max-width: 680px; }
  .lp-hero-card { display: none; }
  .lp-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .lp-trigger-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-steps { flex-wrap: wrap; gap: 16px; justify-content: flex-start; }
  .lp-step-arrow { display: none; }
  .lp-step { max-width: 200px; }
}

@media (max-width: 760px) {
  :root { --section-pad: 64px 20px; }
  .lp-nav-links a:not(.lp-nav-cta) { display: none; }
  .lp-hero { padding: 48px 20px 56px; }
  .lp-grid-4 { grid-template-columns: 1fr; gap: 12px; }
  .lp-trigger-grid { grid-template-columns: 1fr; }
  .lp-trigger-grid { grid-template-columns: 1fr; }
  .lp-ba-grid { grid-template-columns: 1fr; }
  .lp-ba-arrow { display: none; }
  .lp-routes { grid-template-columns: 1fr; }
  .lp-steps { justify-content: center; }
  .lp-step { max-width: 100%; }
  .lp-funnel-header { flex-direction: column; align-items: flex-start; }
  .lp-funnel-card { padding: 24px 18px; }
  .lp-footer-inner { flex-direction: column; gap: 20px; }
}

/* ─── Hero card title + legal note (Screenshot-Anpassung) ── */
.lp-hero-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  color: var(--ok-muted);
  background: var(--ok-red-muted);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  display: inline-block;
}
.lp-legal-note {
  margin-top: 32px;
  text-align: center;
  font-size: .78rem;
  color: var(--ok-muted);
  line-height: 1.6;
}

/* === DESIGN-REFRESH 07-05-2026 === */

/* HERO – ruhigeres Spacing, lesbarere Lead */
.lp-hero { padding: 88px 24px 80px; }
.lp-hero-inner { gap: 64px; align-items: start; }
.lp-h1 { letter-spacing: -.025em; }
.lp-lead { color: var(--ok-ink-mid); font-size: 1.1rem; line-height: 1.65; max-width: 620px; }
.lp-eyebrow { background: var(--ok-red-muted); padding: .35em .75em; border-radius: 999px; font-size: .72rem; }

/* HERO-CARD klarer */
.lp-hero-card { padding: 24px 22px; gap: 18px; border-radius: var(--radius-lg); }
.lp-hero-card-title { background: var(--ok-ink); color: #fff; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.lp-get-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--ok-red-muted); color: var(--ok-red); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.lp-get-item strong { font-size: .92rem; color: var(--ok-ink); }
.lp-get-item span { font-size: .82rem; line-height: 1.55; color: var(--ok-muted); }

/* PAIN-Karten – Kontrast-Fix (Cards bleiben auf dunklem Bg dunkel) */
.lp-section--dark .lp-trigger-card {
  background: #1a1d27;
  border: 1px solid #2d3140;
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s, transform .2s, background .2s;
}
.lp-section--dark .lp-trigger-card:hover {
  border-color: rgba(252,12,24,.45);
  background: #1f2330;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.lp-section--dark .lp-trigger-card strong {
  color: #ffffff !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -.005em;
}
.lp-section--dark .lp-trigger-card p {
  color: #c4c9d4 !important;
  font-size: .88rem;
  line-height: 1.6;
}
.lp-section--dark .lp-trigger-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(252,12,24,.12);
  color: #ff5662;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.lp-section--dark .lp-trigger-cta-line {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #262a36;
  color: #ff7a83;
  font-size: .82rem;
  font-weight: 600;
}

/* 4-SCHRITTE auf hellem Bg – Karten-Look mit lesbarem Text */
.lp-section--light .lp-steps,
#how .lp-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 24px;
}
.lp-section--light .lp-step,
#how .lp-step {
  background: #ffffff;
  border: 1px solid var(--ok-line);
  border-radius: var(--radius-lg);
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 14px;
  position: relative;
  max-width: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.lp-section--light .lp-step:hover,
#how .lp-step:hover {
  border-color: rgba(252,12,24,.4);
  box-shadow: 0 8px 24px rgba(252,12,24,.08);
  transform: translateY(-2px);
}
.lp-section--light .lp-step-num,
#how .lp-step-num {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--ok-red-muted);
  color: var(--ok-red);
  font-size: 1rem;
  font-weight: 800;
  box-shadow: none;
  border: 1px solid #fecacc;
}
.lp-section--light .lp-step-body strong,
#how .lp-step-body strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ok-ink) !important;
  margin-bottom: .35em;
  line-height: 1.3;
}
.lp-section--light .lp-step-body p,
#how .lp-step-body p {
  color: var(--ok-ink-mid) !important;
  font-size: .88rem;
  line-height: 1.6;
}
.lp-section--light .lp-step-arrow,
#how .lp-step-arrow { display: none; }

/* B/A-GRID polished */
.lp-ba-card { padding: 32px 28px; box-shadow: var(--shadow-card); }
.lp-ba-card--before { background: #fafbfc; border: 1px solid var(--ok-line); border-style: solid; }
.lp-ba-card--before .lp-ba-label { color: #94a3b8; }
.lp-ba-card--before h3 { color: var(--ok-ink-mid); }
.lp-ba-card--after  { background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%); border: 1px solid #86efac; }
.lp-ba-card h3 { font-size: 1.18rem; }
.lp-ba-card li { font-size: .9rem; line-height: 1.55; }
.lp-ba-arrow { font-size: 1.6rem; color: var(--ok-red); }

/* ROUTE-Cards – ruhigere Hierarchie */
.lp-route-card { padding: 32px 28px; border-radius: var(--radius-lg); border-width: 1px; }
.lp-route-card h3 { font-size: 1.2rem; line-height: 1.3; }
.lp-route-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--ok-red-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.lp-route-card ul { padding-left: 1em; }
.lp-route-card li { font-size: .87rem; }
.lp-route-cta { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--ok-line); }

/* SECTION-HEADER – mehr Atemraum */
.lp-section { padding: 88px 24px; }
.lp-section-header { margin-bottom: 48px; }
.lp-section-header p { font-size: 1rem; line-height: 1.65; }
.lp-section--dark .lp-section-header p { color: #c4c9d4; }

/* RESPONSIVE für 4-Schritte-Grid */
@media (max-width: 1040px) {
  .lp-section--light .lp-steps,
  #how .lp-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .lp-section--light .lp-steps,
  #how .lp-steps { grid-template-columns: 1fr; }
}

/* === ENTRY-SECTION (Ihr Einstieg) — Polish 07-05-2026 === */

/* Hintergrund-Hatch des Body-Patterns deckt die Section ab */
.lp-section--accent {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(252,12,24,.06), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(252,12,24,.05), transparent 55%),
    #ffffff;
  position: relative;
  isolation: isolate;
}
.lp-section--accent::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  z-index: -2;
}

/* Section-Header zentriert mit dezentem Trenner */
#entry-paths .lp-section-header { max-width: 720px; }
#entry-paths .lp-section-header h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }

/* Routes-Grid auf voller Breite, mehr Abstand */
.lp-routes {
  max-width: 1040px;
  gap: 24px;
  margin-top: 8px;
}

/* Karten: klare Hierarchie + farbiger Akzent oben */
.lp-route-card {
  background: var(--ok-white);
  border: 1px solid var(--ok-line);
  border-radius: var(--radius-xl);
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.lp-route-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ok-red);
  opacity: 0;
  transition: opacity .2s;
}
.lp-route-card:hover { border-color: var(--ok-red); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(252,12,24,.12); }
.lp-route-card:hover::before { opacity: 1; }
.lp-route-business::before { background: linear-gradient(90deg, var(--ok-red), #ff5662); }
.lp-route-employee::before { background: linear-gradient(90deg, #2d3140, #5b7494); }

.lp-route-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--ok-red-muted);
  border: 1px solid #fecacc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 4px;
}
.lp-route-employee .lp-route-icon { background: #eef1f6; border-color: #d8dde6; color: #2d3140; }

.lp-route-card .lp-label {
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--ok-muted);
  background: var(--ok-surface);
  padding: 4px 10px;
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 0;
}
.lp-route-business .lp-label { color: var(--ok-red); background: var(--ok-red-muted); }

.lp-route-card h3 {
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--ok-ink);
  line-height: 1.3;
  margin: 4px 0 2px;
}

.lp-route-card > p {
  font-size: .92rem;
  color: var(--ok-ink-mid);
  line-height: 1.6;
  margin: 0;
}

.lp-route-card ul {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-route-card li {
  font-size: .9rem;
  color: var(--ok-ink-mid);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.lp-route-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ok-red);
  font-weight: 800;
  font-size: .9rem;
}
.lp-route-employee li::before { color: #5b7494; }

.lp-route-cta {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--ok-line);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ok-red);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lp-route-employee .lp-route-cta { color: var(--ok-ink); }
.lp-route-card:hover .lp-route-cta { transform: translateX(2px); }

/* Legal-Note: ruhiger Box-Look statt freier Text */
.lp-body .lp-legal-note {
  margin: 36px auto 0;
  text-align: center;
  font-size: .82rem;
  color: var(--ok-muted);
  background: var(--ok-surface);
  border: 1px solid var(--ok-line);
  border-radius: var(--radius-md);
  padding: 14px 24px;
  max-width: 760px;
  line-height: 1.6;
  display: block;
}

@media (max-width: 760px) {
  .lp-route-card { padding: 28px 22px 22px; }
  .lp-route-card h3 { font-size: 1.1rem; }
}

/* === MODAL / PREVIEW — Abstaende Polish 07-05-2026 === */
.lp-body .workflow-simple {
  display: grid;
  gap: 28px;
}
.lp-body .workflow-simple .phase-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--ok-surface);
  border: 1px solid var(--ok-line);
  border-radius: var(--radius-md);
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ok-muted);
  margin: 0;
}
.lp-body .workflow-simple .phase-step {
  padding: 4px 10px;
  border-radius: 999px;
}
.lp-body .workflow-simple .phase-step.is-active {
  background: var(--ok-red-muted);
  color: var(--ok-red-dark);
  font-weight: 700;
}
.lp-body .workflow-simple .phase-step.is-done {
  color: var(--ok-ink-mid);
  font-weight: 600;
}
.lp-body .workflow-simple .phase-step.is-upcoming {
  color: var(--ok-muted);
}
.lp-body .workflow-simple .phase-sep {
  color: var(--ok-line);
  font-weight: 400;
}

.lp-body .workflow-simple-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ok-line);
  margin: 0;
}
.lp-body .workflow-simple-header > div {
  display: grid;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}
.lp-body .workflow-simple-header h3 {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ok-ink);
  margin: 0;
}
.lp-body .workflow-simple-header p {
  margin: 0;
  color: var(--ok-muted);
  font-size: .96rem;
  line-height: 1.6;
}
.lp-body .workflow-simple-header .stage-badge {
  align-self: flex-start;
  flex-shrink: 0;
}

.lp-body .workflow-simple .preview-v2 {
  margin: 0 auto;
  gap: 24px;
}
.lp-body .workflow-simple .wizard-actions {
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--ok-line);
}

/* === FAZIT-Card im Findings-Grid 07-05-2026 === */
.lp-body .preview-finding-card--fazit {
  background: var(--ok-ink);
  border-color: var(--ok-ink);
  color: var(--ok-white);
  display: grid;
  gap: 12px;
}
.lp-body .preview-finding-card--fazit h5 {
  color: var(--ok-white) !important;
}
.lp-body .preview-finding-card--fazit .preview-finding-summary {
  color: #c4c9d4 !important;
}
.lp-body .preview-finding-card--fazit .status-pill {
  background: var(--ok-red);
  color: var(--ok-white);
  border-color: transparent;
}
.lp-body .preview-fazit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: .88rem;
  line-height: 1.55;
  color: #d8dce5;
}
.lp-body .preview-fazit-list li {
  padding: 8px 12px;
  background: rgba(255,255,255,.06);
  border-radius: 8px;
}
.lp-body .preview-fazit-list strong {
  color: var(--ok-white);
  font-weight: 700;
}

/* === Consent-Row disabled state 07-05-2026 === */
.lp-body .consent-row.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}
.lp-body .consent-row.is-disabled input {
  cursor: not-allowed;
}
.lp-body .consent-row.is-disabled .consent-row-copy strong,
.lp-body .consent-row.is-disabled .consent-row-copy small {
  color: var(--ok-muted);
}

/* === Demo-Autofill-Button im Funnel 07-05-2026 === */
.lp-body .funnel-step-topbar {
  flex-wrap: wrap;
  gap: 12px;
}
.lp-body .demo-autofill-button {
  margin: 0 auto;
  padding: 8px 16px;
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--font-display, 'Sora', sans-serif);
  letter-spacing: .02em;
  background: #fff8e6;
  color: #8a5a0e;
  border: 1px dashed #d99a2b;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lp-body .demo-autofill-button:hover:not([disabled]) {
  background: #d99a2b;
  color: #fff;
  border-color: #d99a2b;
}
.lp-body .demo-autofill-button[disabled] {
  opacity: .6;
  cursor: progress;
}

/* === Dashboard-Restruktur 07-05-2026 === */
.dashboard-toolbar {
  background: var(--ok-white);
  border-bottom: 1px solid var(--ok-line);
  padding: 24px 32px;
  position: sticky;
  top: 0;
  z-index: 80;
  box-shadow: 0 1px 0 var(--ok-line);
}
.dashboard-toolbar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.dashboard-toolbar-title {
  display: grid;
  gap: 4px;
}
.dashboard-toolbar-title h1 {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ok-ink);
  margin: 0;
}
.dashboard-toolbar-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dashboard-toolbar-label {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ok-muted);
}
.dashboard-toolbar-form input {
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--ok-line);
  font-size: .92rem;
  min-width: 220px;
  background: var(--ok-surface);
}
.dashboard-toolbar-form input:focus {
  outline: 2px solid var(--ok-red);
  outline-offset: 1px;
  background: var(--ok-white);
}
.dashboard-toolbar-form .lp-btn-primary {
  height: 40px;
  padding: 0 20px;
  font-size: .9rem;
}
.dashboard-toolbar-message {
  max-width: var(--max-w);
  margin: 12px auto 0;
}
.dashboard-toolbar-message:empty {
  display: none;
}

.dashboard-section--compact {
  padding: 48px 24px !important;
}
.dashboard-section-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--ok-line);
}
.dashboard-section-bar > div {
  display: grid;
  gap: 4px;
}
.dashboard-section-bar h2 {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ok-ink);
  margin: 0;
}
.dashboard-section-bar .dashboard-anchor-link {
  font-size: .88rem;
  color: var(--ok-red-dark);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.dashboard-section-bar .dashboard-anchor-link:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .dashboard-toolbar { padding: 16px 20px; position: static; }
  .dashboard-toolbar-form input { min-width: 0; flex: 1 1 160px; }
  .dashboard-section--compact { padding: 32px 20px !important; }
}