/* Gemeinsames Stylesheet der Leistungsseiten (leistungen.html und die fuenf
   Detailseiten). Basis wie news.html: Token, Reset, Nav, Menue, Footer,
   Instagram-Streifen. Darunter die Bausteine der Leistungsseiten (lp-*).
   Eigene Datei statt Inline-Style, weil sechs Seiten dieselben Regeln teilen
   und der Browser sie dann nur einmal laedt. */
:root {
  --navy-0:#05080F; --navy-1:#0A0F1C; --navy-2:#0D1B2E; --navy-3:#162540; --navy-4:#1E3458;
  --accent:#1D4ED8; --accent-light:#3B82F6; --accent-glow:#60A5FA;
  --paper:#F2EFE6; --silver:#B8C5D6;
  --line: rgba(96,165,250,0.12);
  --btn-radius: 10px;
  --paper-dim: rgba(242,239,230,0.7);
  --paper-faint: rgba(242,239,230,0.55);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease: cubic-bezier(0.65,0,0.35,1);
}
*,*::before,*::after { box-sizing: border-box; }
html, body {
  background: var(--navy-1); color: var(--paper);
  font-family: 'Inter Tight', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; overflow-x: clip; max-width: 100%;   /* clip blockiert position: sticky nicht */
}
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
::selection { background: var(--accent); color: var(--paper); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-glow); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  padding: 12px 18px; border-radius: 0 0 10px 10px;
  background: var(--accent); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: top 0.25s var(--ease-out);
}
.skip-link:focus { top: 0; }

/* Mindestmass 44px fuer Tipp-Flaechen auf Touch und schmalen Viewports */
@media (hover: none), (max-width: 768px) {
  .nav-link, .footer-link { padding-top: 14px; padding-bottom: 14px; }
  .menu-link { padding-top: 22px; padding-bottom: 22px; }
  .nav-burger { width: 46px; height: 46px; }
  .nav-logo { padding: 12px 0; }
}

.display-lg { font-family: Arial, sans-serif; font-weight: 400; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; }
.display-md { font-family: Arial, sans-serif; font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.025em; }
/* Scroll-interaktiver Headline-Glow wie auf der Startseite; --gl (0..1) setzt leistung.js */
.gl { --gl: 0; text-shadow: 0 0 calc(var(--gl) * 13px) rgba(96, 165, 250, calc(var(--gl) * 0.3)); opacity: calc(0.8 + var(--gl) * 0.2); }
@media (prefers-reduced-motion: reduce) { .gl { opacity: 1; text-shadow: none; } }
.italic-accent { font-family: inherit; font-style: normal; color: var(--accent-glow); font-weight: inherit; }
/* Eyebrow wie auf der Startseite (.hero-eyebrow): kraeftige Grossbuchstaben, kein Strich davor */
.eyebrow { font-family: 'Inter Tight', system-ui, sans-serif; font-size: clamp(0.8rem, 1.2vw, 0.95rem); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #C7D8EE; display: inline-flex; align-items: center; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px,4vw,56px); }
.section { padding: clamp(56px,9vh,120px) 0; position: relative; }

/* ─── NAV ─── */
.nav-shell { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 60; background: linear-gradient(180deg, rgba(7,11,20,0.74) 0%, rgba(7,11,20,0.40) 100%); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid rgba(96,165,250,0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease; }
.nav-shell.scrolled { background: rgba(7,11,20,0.88); border-bottom-color: rgba(96,165,250,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 20px 44px -30px rgba(0,0,0,0.85); }
.nav-inner { max-width: none; margin: 0; padding: 15px clamp(20px, 2.6vw, 44px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(18px, 2vw, 34px); transition: padding 0.4s ease; }
.nav-shell.scrolled .nav-inner { padding-top: 11px; padding-bottom: 11px; }
.nav-right { justify-self: end; display: inline-flex; align-items: center; gap: 14px; }
.nav-logo { font-family: Arial, sans-serif; font-size: clamp(1.75rem, 2.1vw, 2.15rem); font-weight: 700; letter-spacing: -0.025em; color: var(--paper); white-space: nowrap; display: inline-flex; align-items: center; line-height: 1; justify-self: start; }
.nav-mid { display: flex; align-items: center; gap: 2px; justify-self: end; }
body .nav-cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; font-family: 'Inter Tight', system-ui, sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; text-transform: none; border-radius: 0; line-height: 1; white-space: nowrap; transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.15s ease; }
.nav-link { position: relative; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-dim); padding: 10px 16px; line-height: 1; transition: color 0.4s ease; display: inline-flex; align-items: center; }
.nav-link::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 1.5px; background: linear-gradient(90deg, var(--accent-glow), var(--accent)); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform 0.4s cubic-bezier(0.4,0,0.1,1); }
.nav-link:hover { color: var(--paper); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--paper); }
.nav-link.is-active::after { transform: scaleX(1); }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); background: var(--gbtn-fill); border: 1px solid transparent; border-image: var(--gbtn-border) 1; border-radius: 0; -webkit-backdrop-filter: var(--gbtn-blur); backdrop-filter: var(--gbtn-blur); line-height: 1; box-shadow: var(--gbtn-shadow); transition: background-color 0.3s ease, box-shadow 0.3s ease; white-space: nowrap; }
.nav-cta:hover { background: var(--gbtn-fill-hover); border-image: var(--gbtn-border-hover) 1; box-shadow: var(--gbtn-shadow-hover); }
.nav-cta .cta-dot { display: none; }
.nav-cta > span:not(.cta-dot), .menu-cta > span { background: var(--gbtn-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (max-width: 1024px) {
  .nav-inner { grid-template-columns: 1fr auto; padding-top: 12px; padding-bottom: 12px; }
  .nav-mid { display: none; }
  .nav-logo { font-size: 1.3rem; }
  .nav-cta { padding: 11px 17px; font-size: 0.74rem; }
}
@media (max-width: 640px) { body .nav-cta { display: none; } }

/* ─── Hamburger + Menue-Overlay ─── */
.nav-burger { display: none; width: 42px; height: 42px; border-radius: 50%; background: rgba(96,165,250,0.06); border: 1px solid rgba(96,165,250,0.18); align-items: center; justify-content: center; cursor: pointer; transition: background 0.35s ease, border-color 0.35s ease, transform 0.4s var(--ease); flex-shrink: 0; }
.nav-burger:hover { background: rgba(96,165,250,0.14); border-color: rgba(96,165,250,0.4); }
.nav-burger-icon { width: 18px; height: 12px; position: relative; }
.nav-burger-icon span { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--paper); border-radius: 2px; transition: transform 0.5s var(--ease), opacity 0.3s ease, top 0.4s var(--ease); }
.nav-burger-icon span:nth-child(1) { top: 0; }
.nav-burger-icon span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-burger-icon span:nth-child(3) { top: 100%; transform: translateY(-100%); }
.nav-burger.is-open .nav-burger-icon span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-burger.is-open .nav-burger-icon span:nth-child(2) { opacity: 0; transform: translateY(-50%) scaleX(0); }
.nav-burger.is-open .nav-burger-icon span:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }
@media (max-width: 1024px) { .nav-burger { display: inline-flex; } }
.menu-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(5,8,15,0.92); opacity: 0; visibility: hidden; transition: opacity 0.65s var(--ease-out), visibility 0s linear 0.65s; overflow: hidden; display: flex; flex-direction: column; }
.menu-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 0.65s var(--ease-out), visibility 0s linear 0s; }
.menu-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; }
.menu-brand { font-family: Arial, sans-serif; font-weight: 500; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--paper); }
.menu-close { width: 42px; height: 42px; border-radius: 50%; background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.22); color: var(--paper); display: flex; align-items: center; justify-content: center; transition: all 0.4s var(--ease); cursor: pointer; }
.menu-close:hover { background: rgba(96,165,250,0.18); transform: rotate(90deg); }
.menu-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 32px 64px; position: relative; z-index: 2; }
.menu-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.menu-link { position: relative; display: flex; align-items: baseline; justify-content: space-between; padding: 18px 0; font-family: Arial, sans-serif; font-size: clamp(2.2rem, 8vw, 3.2rem); font-weight: 400; line-height: 1; letter-spacing: -0.025em; color: var(--paper); border-bottom: 1px solid rgba(96,165,250,0.08); opacity: 0; transform: translateY(28px); transition: color 0.4s ease; }
.menu-link:last-child { border-bottom: none; }
.menu-link-arrow { width: 22px; height: 22px; color: var(--paper-faint); transition: transform 0.5s var(--ease), color 0.4s ease; }
.menu-link:hover, .menu-link:active { color: var(--accent-glow); }
.menu-link:hover .menu-link-arrow, .menu-link:active .menu-link-arrow { color: var(--accent-glow); transform: translateX(8px); }
.menu-foot { position: relative; z-index: 2; padding: 22px 32px calc(56px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(96,165,250,0.08); display: flex; flex-direction: column; gap: 14px; opacity: 0; transform: translateY(20px); }
@supports (height: 100dvh) { .menu-overlay { height: 100dvh; } }
.menu-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 24px; background: var(--gbtn-fill); color: var(--paper); border: 1px solid transparent; border-image: var(--gbtn-border) 1; border-radius: 0; font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: var(--gbtn-shadow); transition: transform 0.25s var(--ease), background-color 0.25s ease, box-shadow 0.25s ease; }
.menu-cta svg { display: none; }
.menu-cta:hover { background: var(--gbtn-fill-hover); border-image: var(--gbtn-border-hover) 1; box-shadow: var(--gbtn-shadow-hover); }
.menu-contact { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.12em; color: var(--paper-faint); text-align: center; }
.menu-contact a { color: var(--accent-glow); }
body.menu-open { overflow: hidden; }
.nav-back { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-dim); display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 0; transition: color 0.3s ease; }
.nav-back:hover { color: var(--paper); }
.nav-back svg { transition: transform 0.4s var(--ease); }
.nav-back:hover svg { transform: translateX(-4px); }

/* ─── Kopf der Leistungsseite ─── */
.lp-hero { position: relative; padding-top: clamp(112px, 15vh, 150px); padding-bottom: clamp(36px, 5vh, 64px); overflow: hidden; }
.lp-hero::before { content: ''; position: absolute; top: -140px; right: -120px; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(96,165,250,0.16), transparent 62%); pointer-events: none; }
@media (max-width: 900px) { .lp-hero::before { display: none; } }
.lp-hero .eyebrow { margin: 18px 0 20px; }
.lp-hero h1 { max-width: 20ch; margin: 0 0 22px; text-wrap: balance; }
.lp-sub { max-width: 58ch; color: var(--paper-dim); font-size: clamp(1.06rem, 1.45vw, 1.25rem); line-height: 1.6; margin: 0 0 30px; }
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.lp-btn-ghost { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 13px 22px; border: 1px solid rgba(96,165,250,0.34); color: var(--paper); font-weight: 600; font-size: 0.98rem; transition: border-color 0.3s ease, background-color 0.3s ease; }
.lp-btn-ghost:hover { border-color: rgba(96,165,250,0.7); background: rgba(96,165,250,0.08); }
.lp-btn-ghost svg { width: 16px; height: 16px; }

/* ─── Textblock ─── */
.lp-intro { max-width: 68ch; }
.lp-intro p { color: var(--paper-dim); font-size: clamp(1.02rem, 1.3vw, 1.14rem); line-height: 1.7; margin: 0 0 18px; }
.lp-intro p strong, .lp-card p strong, .lp-case-result strong { color: var(--paper); font-weight: 600; }
.lp-intro a, .lp-card a, .lp-faq a { color: var(--accent-glow); text-decoration: underline; text-underline-offset: 3px; }

/* ─── Sektionskopf ─── */
.lp-head { margin-bottom: clamp(28px, 4vw, 48px); }
.lp-head h2 { margin: 14px 0 0; max-width: 22ch; text-wrap: balance; }

/* ─── Nutzen-Karten ─── */
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.lp-card { padding: clamp(22px, 2.6vw, 32px); border-radius: 18px; border: 1px solid rgba(96,165,250,0.16); background: linear-gradient(180deg, rgba(13,27,46,0.62), rgba(13,27,46,0.34)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.lp-card h3 { font-family: Arial, sans-serif; font-weight: 600; font-size: 1.18rem; letter-spacing: -0.015em; margin: 0 0 10px; color: var(--paper); }
.lp-card p { margin: 0; color: var(--paper-dim); line-height: 1.62; font-size: 0.98rem; }
.lp-card-num { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.2em; color: var(--accent-glow); margin-bottom: 14px; }

/* ─── Beweise: Referenzkarten ─── */
.lp-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.lp-case { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.6vw, 30px); border-radius: 18px; border: 1px solid rgba(96,165,250,0.2); background: rgba(13,27,46,0.5); transition: border-color 0.35s ease, transform 0.5s var(--ease-out); }
.lp-case:hover { border-color: rgba(96,165,250,0.5); transform: translateY(-4px); }
.lp-case-top { display: flex; align-items: center; gap: 14px; }
.lp-case-logo { width: 54px; height: 54px; flex: none; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 8px; }
.lp-case-logo--dark { background: #122238; }
.lp-case-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lp-case-name { font-family: Arial, sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--paper); }
.lp-case-branche { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-faint); margin-top: 4px; }
.lp-case-result { margin: 0; color: var(--paper-dim); line-height: 1.6; font-size: 0.98rem; flex: 1; }
.lp-case-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--accent-glow); font-weight: 600; font-size: 0.92rem; }
.lp-case-link svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.lp-case:hover .lp-case-link svg { transform: translateX(4px); }

/* ─── Ablauf ─── */
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 2vw, 26px); counter-reset: schritt; }
.lp-step { position: relative; padding: 26px 24px 24px; border-left: 2px solid rgba(96,165,250,0.35); }
.lp-step::before { counter-increment: schritt; content: '0' counter(schritt); display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.22em; color: var(--accent-glow); margin-bottom: 14px; }
.lp-step h3 { font-family: Arial, sans-serif; font-weight: 600; font-size: 1.12rem; margin: 0 0 8px; color: var(--paper); }
.lp-step p { margin: 0; color: var(--paper-dim); line-height: 1.6; font-size: 0.96rem; }

/* ─── FAQ (natives details, ohne Skript bedienbar) ─── */
.lp-faq { max-width: 820px; }
.lp-faq details { border-top: 1px solid rgba(96,165,250,0.16); }
.lp-faq details:last-child { border-bottom: 1px solid rgba(96,165,250,0.16); }
.lp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 4px; font-family: Arial, sans-serif; font-weight: 600; font-size: 1.08rem; color: var(--paper); min-height: 44px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(96,165,250,0.35); display: inline-flex; align-items: center; justify-content: center; color: var(--accent-glow); font-weight: 400; transition: transform 0.3s var(--ease); }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq details p { margin: 0 0 22px; padding-right: 48px; color: var(--paper-dim); line-height: 1.68; font-size: 1rem; }

/* ─── Abschluss-CTA ─── */
.lp-cta { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(36px, 5vw, 64px); border: 1px solid rgba(96,165,250,0.24); background: radial-gradient(120% 140% at 0% 0%, rgba(29,78,216,0.28), rgba(13,27,46,0.55) 60%); text-align: center; }
.lp-cta h2 { margin: 0 auto 14px; max-width: 22ch; text-wrap: balance; }
.lp-cta p { margin: 0 auto 28px; max-width: 52ch; color: var(--paper-dim); font-size: clamp(1rem, 1.35vw, 1.14rem); line-height: 1.6; }
.lp-cta .lp-cta-row { justify-content: center; }
.lp-cta-note { display: block; margin-top: 18px; font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-faint); }

/* ─── Reveals: nur mit Skript ausblenden, ohne Skript ist alles sichtbar ─── */
.js [data-reveal] { opacity: 0; transform: translateY(36px); }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ─── Footer ─── */
.footer-brand { font-family: Arial, sans-serif; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; color: var(--paper); }
.footer-link { transition: color 0.3s ease; }
.footer-link:hover { color: var(--paper); }
.site-footer { background: var(--navy-0); border-top: 1px solid rgba(255,255,255,0.06); padding: 56px 0; }
.site-footer-brand { text-align: center; margin-bottom: 34px; }
.site-footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(242,239,230,0.55); }
.site-footer-row div { display: flex; gap: 28px; flex-wrap: wrap; }

/* ─── Instagram-Streifen ─── */
.insta-band { position: relative; overflow: hidden; background: var(--navy-0); border-top: 1px solid rgba(255,255,255,0.06); padding: clamp(52px, 9svh, 96px) 0; }
.insta-band::before { content: ''; position: absolute; z-index: 0; pointer-events: none; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(620px, 90%); height: 340px; border-radius: 50%; background: radial-gradient(closest-side, rgba(214,41,118,0.16), transparent 72%), radial-gradient(closest-side, rgba(79,91,213,0.13), transparent 74%); }
.insta-band-inner { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; padding: 0 22px; text-align: center; }
.insta-eyebrow { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 12px; }
.insta-titel { font-family: Arial, sans-serif; font-weight: 500; letter-spacing: -0.015em; font-size: clamp(1.6rem, 3.2vw, 2.35rem); line-height: 1.12; color: var(--paper); margin: 0 0 12px; text-wrap: balance; }
.insta-sub { font-family: 'Inter Tight', system-ui, sans-serif; font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.5; color: var(--paper-dim); margin: 0 auto clamp(24px, 3vw, 32px); max-width: 46ch; }
.insta-btn { display: inline-flex; align-items: center; gap: 11px; padding: 15px 30px; border-radius: 14px; font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 600; font-size: 1rem; color: #fff; text-decoration: none; white-space: nowrap; background: linear-gradient(45deg, #feda75 0%, #fa7e1e 24%, #d62976 52%, #962fbf 76%, #4f5bd5 100%); box-shadow: 0 16px 42px -14px rgba(214,41,118,0.6); transition: transform 0.25s var(--ease), box-shadow 0.25s ease, filter 0.25s ease; }
.insta-btn svg { width: 20px; height: 20px; flex: none; }
@media (hover: hover) { .insta-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 54px -14px rgba(214,41,118,0.78); filter: brightness(1.06); } }
.insta-btn:active { transform: translateY(0); }
.insta-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ─── Leistungsuebersicht (leistungen.html) ───
   Kompakter Kopf, damit die Kacheln schon im ersten Bildschirm beginnen.
   Kacheln als ganze Links: groessere Trefferflaeche, ein Klick fuehrt weiter. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.cta-dot-blue { display: none; }

.ls-hero { position: relative; padding: calc(74px + clamp(30px, 6vh, 64px)) 0 clamp(26px, 4vh, 44px); overflow: hidden; }
.ls-hero::before { content: ''; position: absolute; top: -180px; right: -140px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(96,165,250,0.14), transparent 62%); pointer-events: none; }
.ls-hero .eyebrow { margin: 0 0 18px; }
.ls-titel { font-family: Arial, sans-serif; font-weight: 400; font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 18px; max-width: 26ch; text-wrap: balance; }
.ls-sub { max-width: 56ch; margin: 0; color: var(--paper-dim); font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.6; }

.ls-leistungen { position: relative; padding: 0 0 clamp(64px, 10vh, 120px); }
/* derselbe weiche Lichtschein hinter den Kacheln wie auf der Startseite */
.ls-leistungen::before { content: ''; position: absolute; top: -60px; left: 50%; width: min(900px, 100%); height: 480px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(96,165,250,0.16), transparent 62%); pointer-events: none; }
.ls-leistungen .wrap { position: relative; }

/* Kacheln 1:1 wie #leistungen auf der Startseite (index.html, .lst-*):
   acht Kacheln, vier je Reihe, darunter zwei Spalten, ganz schmal eine. */
.lst-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }
@media (max-width: 1180px) { .lst-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .lst-raster { grid-template-columns: 1fr; } }
.lst-karte {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.5;
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: 20px;
  background: rgba(13,27,46,0.42);
  border: 1px solid rgba(96,165,250,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 40px -30px rgba(0,0,0,0.8);
  transition: transform 0.5s var(--ease-out), background 0.4s ease, border-color 0.4s ease, box-shadow 0.5s var(--ease-out);
}
/* Weichzeichner nur am Desktop: auf iOS zeichnen Filter-Ebenen sonst erst beim Scrollen */
@media (hover: hover) and (min-width: 1025px) {
  .lst-karte { backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
}
.lst-karte::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(133deg, rgba(96,165,250,0.20) 0%, rgba(96,165,250,0.05) 20%, transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 16%);
}
@media (hover: hover) {
  .lst-karte:hover {
    transform: translateY(-4px);
    background: rgba(18,34,58,0.5);
    border-color: rgba(96,165,250,0.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 50px -30px rgba(0,0,0,0.9), 0 0 26px -8px rgba(96,165,250,0.28);
  }
}
.lst-ico {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 22px; flex: none;
  border-radius: 16px;
  color: var(--accent-glow);
  background: linear-gradient(158deg, rgba(96,165,250,0.24) 0%, rgba(96,165,250,0.05) 100%);
  border: 1px solid rgba(96,165,250,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 22px -12px rgba(96,165,250,0.55);
  transition: transform 0.5s var(--ease-out), box-shadow 0.4s ease, color 0.4s ease;
}
.lst-ico svg { position: relative; z-index: 1; width: 30px; height: 30px; }
@media (hover: hover) {
  .lst-karte:hover .lst-ico {
    transform: translateY(-3px); color: #A9CDFB;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 28px -10px rgba(96,165,250,0.75);
  }
}
.lst-titel { font-family: Arial, sans-serif; font-weight: 400; font-size: clamp(1.08rem, 1.35vw, 1.24rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--paper); margin: 0 0 10px; }
.lst-text { color: var(--paper-dim); font-size: 0.95rem; line-height: 1.55; margin: 0 0 22px; flex: 1; }
.lst-anfrage { align-self: flex-start; margin-top: auto; }
/* Glas-Illustration als ruhiges Motiv oben rechts in der Kachel: halb
   durchsichtig, nach rechts oben ausblendend, hinter dem Text */
.lst-karte:has(.lst-ico--bild) { padding-top: clamp(104px, 8.4vw, 124px); overflow: hidden; }
.lst-ico.lst-ico--bild { position: absolute; z-index: -1; top: -4px; right: 12%; margin: 0;
  width: clamp(140px, 11vw, 176px); height: auto; aspect-ratio: 1 / 1;
  background: none; border: 0; border-radius: 0; box-shadow: none; pointer-events: none;
  -webkit-mask-image: linear-gradient(20deg, transparent 18%, rgba(0,0,0,0.5) 45%, #000 72%);
          mask-image: linear-gradient(20deg, transparent 18%, rgba(0,0,0,0.5) 45%, #000 72%); }
.lst-ico--bild img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0.72;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease; }
@media (hover: hover) {
  .lst-karte:hover .lst-ico.lst-ico--bild { box-shadow: none; transform: none; }
  .lst-karte:hover .lst-ico--bild img { transform: translate(-4px, 4px) scale(1.04); opacity: 0.9; }
}
@media (max-width: 768px) { body .lst-anfrage { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .lst-karte, .lst-ico { transition: none; }
  .lst-karte:hover, .lst-karte:hover .lst-ico { transform: none; }
}

.ls-seo { padding: 0 0 clamp(56px, 9vh, 100px); }
.ls-seo-inner { max-width: 820px; padding-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--line); }
.ls-seo h2 { margin: 0 0 20px; max-width: 30ch; text-wrap: balance; }
.ls-seo p { margin: 0; color: var(--paper-dim); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.75; }
.ls-seo a { color: var(--paper); text-decoration: underline; text-decoration-color: rgba(96,165,250,0.5); text-underline-offset: 4px; transition: text-decoration-color 0.3s ease; }
.ls-seo a:hover { text-decoration-color: var(--accent-glow); }

.ls-abschluss { padding: 0 0 clamp(64px, 10vh, 120px); }
.ls-abschluss .lp-cta h2 { margin-bottom: 28px; }
.lp-cta .ls-anruf { margin: 22px auto 0; font-size: 0.95rem; color: var(--paper-faint); }
.ls-anruf a { color: var(--paper); font-weight: 600; display: inline-block; padding: 12px 4px; }

@media (max-width: 900px) { .ls-hero::before { display: none; } }

/* ═══════════ Leistungs-Unterseiten: Vorlage (lx-*) ═══════════
   Gleiche Struktur fuer jede Leistung: Hero mit Visual, Nutzen, Problem und
   Loesung, Ablauf, Bausteine, Ergebnis, SEO-Text, Abschluss. Fliesstext steht
   bewusst erst unten, oben fuehren Ueberschriften und kurze Karten. */
.lx-sektion { position: relative; padding: 0 0 clamp(80px, 12vh, 140px); }
.lx-kopf { max-width: 760px; margin: 0 0 clamp(30px, 5vh, 52px); }
.lx-h2 { font-family: Arial, sans-serif; font-weight: 400; font-size: clamp(2rem, 3.9vw, 3.2rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.lx-label { display: inline-block; font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: #C7D8EE; }

/* Hero: Text links, Visual rechts (rund 44 Prozent) */
.lx-hero { position: relative; padding: calc(74px + 14px) 0 clamp(64px, 10vh, 120px); overflow: hidden; }
.lx-hero::before { content: ''; position: absolute; top: -200px; right: -160px; width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(circle, rgba(96,165,250,0.13), transparent 62%); pointer-events: none; }
.lx-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.27fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 84px); align-items: start; }
/* Text oben am Titel, mit etwas Luft, statt mittig zum hohen Bild zu schwimmen */
.lx-hero-text { padding-top: clamp(20px, 4vh, 48px); }
@media (max-width: 900px) { .lx-hero-text { padding-top: 0; } }
.lx-zurueck { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 10px; font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-dim); transition: color 0.3s ease; }
.lx-zurueck svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease-out); }
.lx-zurueck:hover { color: var(--paper); }
.lx-zurueck:hover svg { transform: translateX(-4px); }
/* Seitentitel (H1) wie auf der News-Seite: der Name der Leistung, gross.
   Darunter die Headline als zweite Stufe. */
/* Kopfzeile oben am Seitenrand, buendig mit dem EPM-Logo: zwei Boxen fuer den
   Rueckweg, darunter der Name der Leistung im Eyebrow-Stil, gross und mit Glanz */
.lx-oben { padding: 0 clamp(20px, 2.6vw, 44px); margin: 0 0 clamp(8px, 1.6vh, 18px); }
.lx-seitentitel { display: block; margin: 0 0 14px; font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.25; letter-spacing: 0.14em; text-transform: uppercase; color: #C7D8EE; }
.lx-schimmer {
  background: linear-gradient(100deg, #C7D8EE 0%, #C7D8EE 38%, #ffffff 46%, #93C5FD 52%, #C7D8EE 60%, #C7D8EE 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: lx-schimmer 6.5s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(96,165,250,0.35));
}
@keyframes lx-schimmer { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .lx-schimmer { animation: none; background-position: 50% 0; } }
.lx-titel { font-family: Arial, sans-serif; font-weight: 400; font-size: clamp(2.2rem, 3.9vw, 3.6rem); line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 22px; color: var(--paper); text-wrap: balance; }
.lx-sub { max-width: 56ch; margin: 0 0 32px; color: var(--paper-dim); font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6; }
.lx-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Platz fuer das spaetere Hero-Bild. Bis dahin ein ruhiges Glas-Visual mit
   dem Symbol der Leistung. Das Bild kommt als <picture> mit AVIF/WebP in
   .lx-visual und liegt dann per object-fit ueber allem. */
.lx-visual { position: relative; aspect-ratio: 1 / 1; border-radius: 28px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(96,165,250,0.22);
  background: radial-gradient(75% 60% at 68% 32%, rgba(59,130,246,0.30), transparent 70%), linear-gradient(160deg, #10203b 0%, #0a1222 55%, #070b14 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 40px 80px -44px rgba(0,0,0,0.95), 0 0 70px -28px rgba(59,130,246,0.45); }
.lx-visual::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(96,165,250,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(96,165,250,0.08) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 65% at 50% 45%, #000 20%, transparent 100%); mask-image: radial-gradient(70% 65% at 50% 45%, #000 20%, transparent 100%); }
.lx-visual picture, .lx-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.lx-visual-ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px solid rgba(96,165,250,0.18); transform: translate(-50%, -50%); }
.lx-visual-ring--1 { width: 46%; aspect-ratio: 1; }
.lx-visual-ring--2 { width: 72%; aspect-ratio: 1; border-color: rgba(96,165,250,0.10); }
.lx-visual-kern { position: absolute; top: 50%; left: 50%; width: 132px; height: 132px; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; border-radius: 34px; color: var(--accent-glow);
  background: linear-gradient(158deg, rgba(96,165,250,0.26) 0%, rgba(96,165,250,0.06) 100%);
  border: 1px solid rgba(96,165,250,0.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 60px -10px rgba(59,130,246,0.6); }
.lx-visual-kern svg { width: 64px; height: 64px; }

/* Nutzen: drei knappe Karten direkt unter dem Hero */
.lx-nutzen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.lx-nutzen-karte { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 6px 18px; align-items: start;
  padding: clamp(22px, 2.2vw, 30px); border-radius: 20px;
  background: rgba(13,27,46,0.42); border: 1px solid rgba(96,165,250,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 18px 40px -30px rgba(0,0,0,0.8); }
.lx-nutzen-karte::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(133deg, rgba(96,165,250,0.16) 0%, rgba(96,165,250,0.04) 22%, transparent 45%); }
.lx-ico { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; color: var(--accent-glow);
  background: linear-gradient(158deg, rgba(96,165,250,0.24) 0%, rgba(96,165,250,0.05) 100%); border: 1px solid rgba(96,165,250,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 22px -12px rgba(96,165,250,0.55); }
.lx-ico svg { width: 22px; height: 22px; }
.lx-nutzen-karte h3 { margin: 2px 0 0; font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; color: var(--paper); }
.lx-nutzen-karte p { margin: 0; color: var(--paper-dim); font-size: 0.97rem; line-height: 1.55; }

/* Titel im Vergleich Ohne/Mit (Name stammt vom frueheren Problem-Loesung-Block) */
.lx-pl-titel { margin: 14px 0 26px; font-family: Arial, sans-serif; font-weight: 400; font-size: clamp(1.6rem, 2.5vw, 2.2rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--paper); text-wrap: balance; }
.lx-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lx-liste li { display: flex; align-items: center; gap: 14px; font-size: 1.02rem; line-height: 1.4; color: var(--paper); }
.lx-punkt { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; }
.lx-punkt svg { width: 12px; height: 12px; }

/* Ablauf in vier Schritten: am Desktop waagerecht mit Verbindungslinie */
.lx-schritte { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); }
.lx-schritte::before { content: ''; position: absolute; top: 28px; left: 28px; right: 12%; height: 1px; background: linear-gradient(90deg, rgba(96,165,250,0.55), rgba(96,165,250,0.12)); }
.lx-schritt { position: relative; }
.lx-schritt-nr { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 22px; border-radius: 16px;
  font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; color: var(--accent-glow);
  background: linear-gradient(158deg, #152a4a 0%, #0c1628 100%); border: 1px solid rgba(96,165,250,0.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 24px -12px rgba(96,165,250,0.6); }
.lx-schritt:last-child .lx-schritt-nr { color: #fff; background: linear-gradient(158deg, #2563EB 0%, #1D4ED8 100%); border-color: rgba(191,219,254,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 30px -6px rgba(59,130,246,0.8); }
.lx-schritt h3 { margin: 0 0 8px; font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 600; font-size: 1.22rem; color: var(--paper); }
.lx-schritt p { margin: 0; max-width: 28ch; color: var(--paper-dim); font-size: 0.97rem; line-height: 1.55; }

/* Bausteine: kleine, ruhige Karten */
.lx-bausteine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.lx-baustein { padding: 22px 24px; border-radius: 16px; border: 1px solid rgba(96,165,250,0.14); background: rgba(13,27,46,0.34); transition: border-color 0.35s ease, background 0.35s ease; }
.lx-baustein h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 600; font-size: 1.06rem; color: var(--paper); }
.lx-baustein h3::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--accent-glow); box-shadow: 0 0 10px rgba(96,165,250,0.8); }
.lx-baustein p { margin: 0; color: var(--paper-dim); font-size: 0.94rem; line-height: 1.55; }
.lx-baustein a { color: inherit; text-decoration: underline; text-decoration-color: rgba(96,165,250,0.5); text-underline-offset: 3px; }
@media (hover: hover) { .lx-baustein:hover { border-color: rgba(96,165,250,0.34); background: rgba(18,34,58,0.45); } }

/* Ergebnis: ein grosser Beleg, daneben weitere echte Referenzen */
.lx-proof-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 22px); align-items: stretch; }
.lx-proof-haupt { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3.6vw, 52px); border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(96,165,250,0.32);
  background: radial-gradient(110% 100% at 0% 0%, rgba(29,78,216,0.28), transparent 60%), rgba(13,27,46,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 70px -30px rgba(59,130,246,0.6); transition: border-color 0.35s ease, transform 0.45s var(--ease-out); }
a.lx-proof-haupt:hover { border-color: rgba(96,165,250,0.55); transform: translateY(-3px); }
.lx-proof-kunde { display: flex; align-items: center; gap: 14px; }
.lx-proof-kunde .lp-case-logo { width: 52px; height: 52px; }
.lx-zahl { display: block; margin: clamp(26px, 4vh, 44px) 0 6px; font-family: Arial, sans-serif; font-weight: 400; font-size: clamp(3rem, 6.4vw, 5.4rem); line-height: 0.95; letter-spacing: -0.045em; color: #fff; text-shadow: 0 0 34px rgba(96,165,250,0.45); }
.lx-zahl-zusatz { display: block; font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--accent-glow); }
.lx-proof-text { margin: 18px 0 22px; max-width: 46ch; color: var(--paper-dim); font-size: 1rem; line-height: 1.6; }
.lx-proof-haupt .lp-case-link { margin-top: auto; }
.lx-proof-weitere { display: grid; gap: clamp(12px, 1.4vw, 18px); align-content: start; }
.lx-proof-weitere .lp-case { padding: 20px 22px; gap: 10px; }
.lx-beispiel-label { display: inline-flex; align-self: flex-start; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(96,165,250,0.35); font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #C7D8EE; }
.lx-beispiel-liste { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lx-beispiel-liste li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(96,165,250,0.18); color: var(--paper); font-size: 0.97rem; }
.lx-beispiel-liste .lx-punkt { width: 22px; height: 22px; background: var(--accent); color: #fff; box-shadow: 0 0 10px rgba(59,130,246,0.6); }

/* SEO-Text: bewusst zurueckhaltend, schmale Spalte, kleinere Schrift */
.lx-seo-inner { max-width: 780px; padding-top: clamp(44px, 7vh, 72px); border-top: 1px solid var(--line); }
.lx-seo h2 { margin: 0 0 8px; font-family: Arial, sans-serif; font-weight: 400; font-size: clamp(1.45rem, 2.3vw, 1.9rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--paper); text-wrap: balance; }
.lx-seo h3 { margin: 28px 0 8px; font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--paper); }
.lx-seo p { margin: 0; color: var(--paper-dim); font-size: 0.98rem; line-height: 1.75; }
.lx-seo p a { color: var(--paper); text-decoration: underline; text-decoration-color: rgba(96,165,250,0.5); text-underline-offset: 4px; }
.lx-seo p a:hover { text-decoration-color: var(--accent-glow); }
.lx-seo p strong { color: var(--paper); font-weight: 600; }
.lx-seo .lx-faq-kopf { margin: clamp(48px, 7vh, 72px) 0 14px; }
.lx-seo .lp-faq { max-width: none; }

/* Abschluss */
.lx-cta-hinweis { display: block; margin-top: 20px; font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-faint); }
.lp-cta .lx-anruf { margin: 14px auto 0; font-size: 0.95rem; color: var(--paper-faint); }
.lx-anruf a { color: var(--paper); font-weight: 600; display: inline-block; padding: 12px 4px; }

@media (max-width: 1024px) {
  .lx-bausteine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .lx-schritte::before { display: none; }
  .lx-nutzen-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .lx-hero::before { display: none; }
  .lx-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .lx-visual { aspect-ratio: 16 / 11; border-radius: 22px; }
  .lx-visual-kern { width: 104px; height: 104px; border-radius: 28px; }
  .lx-visual-kern svg { width: 50px; height: 50px; }
  .lx-proof-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lx-sektion { padding-bottom: clamp(64px, 10vh, 96px); }
  .lx-bausteine-grid { grid-template-columns: 1fr; }
  .lx-baustein { padding: 18px 20px; }
  /* Ablauf untereinander mit senkrechter Linie links */
  .lx-schritte { grid-template-columns: 1fr; row-gap: 0; }
  .lx-schritte::before { display: block; top: 26px; bottom: 26px; left: 25px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, rgba(96,165,250,0.55), rgba(96,165,250,0.12)); }
  .lx-schritt { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; padding-bottom: 26px; }
  .lx-schritt:last-child { padding-bottom: 0; }
  .lx-schritt-nr { grid-row: 1 / span 2; width: 52px; height: 52px; margin: 0; border-radius: 14px; }
  .lx-schritt h3 { margin-top: 4px; font-size: 1.12rem; }
  .lx-beispiel-liste { grid-template-columns: 1fr; }
  .lx-nutzen-karte { grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; padding: 20px; }
  .lx-ico { width: 42px; height: 42px; }
  .lx-cta-row .cta-magnetic { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-proof-haupt, .lx-baustein { transition: none; }
  a.lx-proof-haupt:hover { transform: none; }
}
.lx-proof-grid--einzeln { grid-template-columns: 1fr; }
.lx-proof-grid--einzeln .lx-proof-haupt { max-width: 880px; }
/* Hero-Visual als Video: fuellt den Rahmen, weicher Randverlauf laesst es im Glas aufgehen */
.lx-visual-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.lx-visual--video::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 95% at 50% 50%, transparent 55%, rgba(7,11,20,0.55) 100%); }
@media (max-width: 900px) { .lx-visual--video { aspect-ratio: 1 / 1; } }
/* Pfad ueber dem Titel: zurueck zur Startseite, Alle Leistungen als zweite Option */
.lx-pfad .lx-zurueck { margin: 0; }
.lx-pfad-alle { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(96,165,250,0.3); background: rgba(13,27,46,0.35);
  font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: #C7D8EE; transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease; }
.lx-pfad-alle:hover { border-color: rgba(96,165,250,0.6); background: rgba(29,78,216,0.18); color: var(--paper); }
@media (max-width: 768px) { .lx-pfad-alle { min-height: 44px; } }
@media (max-width: 480px) {
  .lx-pfad { gap: 6px; }
  .lx-pfad-box { padding: 0 11px; gap: 7px; font-size: 0.7rem; letter-spacing: 0.1em; }
}
/* Hero mit den drei Nutzen-Karten im ersten Bildschirm: oben Text und Visual,
   darunter die Karten ueber die volle Breite. Das Visual richtet seine Hoehe
   nach dem Bildschirm, damit die Karten auch auf niedrigen Laptops sichtbar sind. */
.lx-hero { padding-bottom: clamp(56px, 9vh, 110px); }
.lx-hero-grid { grid-template-areas: "text visual" "nutzen nutzen"; align-items: center; row-gap: clamp(22px, 3.5vh, 36px); }
.lx-hero-text { grid-area: text; padding-top: 0; }
.lx-hero-grid > .lx-visual { grid-area: visual; aspect-ratio: auto; height: clamp(260px, calc(100svh - 400px), 470px); }
.lx-nutzen { grid-area: nutzen; }
@media (max-width: 900px) {
  /* Handy: das Seitenvideo steht ueber der Headline (erster Blickfang), etwas
     flacher als quadratisch, damit die Headline noch frueh ins Bild kommt */
  .lx-hero-grid { grid-template-areas: "visual" "text" "nutzen"; row-gap: 24px; }
  .lx-hero-grid > .lx-visual { height: auto; aspect-ratio: 16 / 11; }
  .lx-hero-grid > .lx-visual--video { aspect-ratio: 5 / 4; }
  /* Handy: Nutzen als knappe Zeilen, nur Symbol und Titel */
  .lx-nutzen .lx-nutzen-grid { gap: 8px; }
  .lx-nutzen .lx-nutzen-karte { grid-template-columns: 36px minmax(0, 1fr); align-items: center; padding: 12px 14px; border-radius: 14px; }
  .lx-nutzen .lx-ico { grid-row: auto; width: 36px; height: 36px; border-radius: 10px; }
  .lx-nutzen .lx-ico svg { width: 18px; height: 18px; }
  .lx-nutzen .lx-nutzen-karte h3 { margin: 0; font-size: 1rem; }
  .lx-nutzen .lx-nutzen-karte p { display: none; }
}
@media (min-width: 901px) and (max-width: 1024px) {
  .lx-nutzen .lx-nutzen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lx-nutzen .lx-nutzen-karte { grid-template-columns: 1fr; padding: 18px; }
  .lx-nutzen .lx-ico { grid-row: auto; }
}
/* Anfrage zwischendurch: ruhige Zeile mit Knopf, mittig unter einem Abschnitt */
.lx-zwischen-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px;
  margin: clamp(32px, 5vh, 48px) auto 0; padding: 20px clamp(20px, 3vw, 32px); max-width: 860px; border-radius: 18px;
  border: 1px solid rgba(96,165,250,0.18); background: radial-gradient(120% 160% at 50% 0%, rgba(29,78,216,0.16), rgba(13,27,46,0.35) 70%); text-align: center; }
.lx-zwischen-cta p { margin: 0; color: rgba(242,239,230,0.82); font-size: 1.02rem; line-height: 1.5; }
@media (max-width: 640px) { .lx-zwischen-cta .cta-magnetic { width: 100%; justify-content: center; } }

/* Pfad oben im Hero: eine Brotkrumen-Leiste buendig mit der Inhaltsspalte.
   Startseite und Leistungen sind Links, die aktuelle Seite steht als Text am
   Ende (am Handy ausgeblendet, dort steht der Name direkt darunter). */
.lx-pfad { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 0 clamp(20px, 3.4vh, 34px); padding: 0 6px;
  border: 1px solid rgba(96,165,250,0.22); border-radius: 12px; background: rgba(13,27,46,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.lx-pfad-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 8px;
  font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 600; font-size: 0.9rem; color: #C7D8EE;
  transition: color 0.3s ease, background 0.3s ease; }
.lx-pfad-link svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease-out); }
.lx-pfad-link:focus-visible { outline: 2px solid var(--accent-glow); outline-offset: 2px; }
@media (hover: hover) {
  .lx-pfad-link:hover { color: var(--paper); background: rgba(96,165,250,0.12); }
  .lx-pfad-link:hover svg { transform: translateX(-3px); }
}
.lx-pfad-trenner { flex: none; width: 14px; height: 14px; color: rgba(199,216,238,0.45); }
.lx-pfad-ende { display: inline-flex; align-items: center; gap: 2px; }
.lx-pfad-aktuell { padding: 0 10px 0 8px; font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--paper); }
@media (max-width: 520px) { .lx-pfad-ende { display: none; } }

/* Ablauf ohne Nummern: leuchtende Knoten auf der Linie, der letzte gefuellt.
   Die Reihenfolge traegt die <ol>. Spaltenzahl folgt der Zahl der Schritte. */
.lx-schritte { --lx-luecke: clamp(18px, 2vw, 32px); gap: var(--lx-luecke); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
/* Linie je Schritt vom eigenen Knoten bis zum naechsten, endet am letzten Knoten */
.lx-schritte::before { display: none; }
.lx-schritt:not(:last-child)::after { content: ''; position: absolute; top: 8px; left: 24px; right: calc(-1 * var(--lx-luecke) + 6px); height: 1px;
  background: linear-gradient(90deg, rgba(96,165,250,0.55), rgba(96,165,250,0.25)); }
.lx-schritt-knoten { position: relative; display: block; width: 17px; height: 17px; margin-bottom: 26px; border-radius: 50%;
  background: #0c1628; border: 2px solid var(--accent-glow); box-shadow: 0 0 14px -2px rgba(96,165,250,0.75); }
.lx-schritt:last-child .lx-schritt-knoten { background: var(--accent-glow); border-color: #DBEAFE; box-shadow: 0 0 0 5px rgba(96,165,250,0.16), 0 0 22px rgba(96,165,250,0.9); }
@media (max-width: 1100px) {
  .lx-schritte { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-schritt::after { display: none; }
  .lx-schritte--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lx-schritte--drei .lx-schritt:not(:last-child)::after { display: block; }
}
@media (max-width: 640px) {
  .lx-schritte, .lx-schritte--drei { grid-template-columns: 1fr; }
  .lx-schritte::before, .lx-schritte--drei::before { display: none; }
  .lx-schritte { row-gap: 0; }
  .lx-schritt { padding-bottom: 26px; }
  .lx-schritt:last-child { padding-bottom: 0; }
  .lx-schritte .lx-schritt:not(:last-child)::after, .lx-schritte--drei .lx-schritt:not(:last-child)::after { display: block; top: 26px; bottom: -3px; left: 8px; right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, rgba(96,165,250,0.55), rgba(96,165,250,0.25)); }
  .lx-schritt { grid-template-columns: 17px minmax(0, 1fr); column-gap: 20px; }
  .lx-schritt-knoten { grid-row: 1 / span 2; margin: 5px 0 0; }
}

/* Vergleich Ohne/Mit EPM: eine Karte, jede Zeile stellt Problem und Loesung
   direkt gegenueber. Die rechte Haelfte leuchtet blau. */
.lx-vg { position: relative; border-radius: 24px; border: 1px solid rgba(242,239,230,0.09); background: rgba(10,15,28,0.55); overflow: hidden; }
.lx-vg::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: calc(50% - 28px); pointer-events: none;
  border-left: 1px solid rgba(96,165,250,0.3);
  background: radial-gradient(120% 90% at 100% 0%, rgba(29,78,216,0.26), transparent 62%), rgba(13,27,46,0.55); }
.lx-vg-kopf, .lx-vg-zeilen li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; }
.lx-vg-seite { padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3.2vw, 48px) clamp(16px, 2vw, 24px); }
.lx-vg-seite--mit { grid-column: 3; }
.lx-vg-seite--ohne .lx-label { color: rgba(242,239,230,0.66); }
.lx-vg .lx-pl-titel { margin-bottom: 0; }
.lx-vg-zeilen { list-style: none; margin: 0; padding: 0 0 clamp(14px, 2vw, 24px); }
.lx-vg-zeilen li { border-top: 1px solid rgba(242,239,230,0.07); }
.lx-vg-ohne, .lx-vg-mit { display: flex; align-items: center; gap: 14px; padding: 20px clamp(24px, 3.2vw, 48px); font-size: 1.05rem; line-height: 1.4; }
.lx-vg-ohne { color: var(--paper-dim); }
.lx-vg-mit { color: var(--paper); font-weight: 500; }
.lx-vg-ohne .lx-punkt { border: 1px solid rgba(242,239,230,0.22); color: rgba(242,239,230,0.7); }
.lx-vg-mit .lx-punkt { background: var(--accent); color: #fff; box-shadow: 0 0 12px rgba(59,130,246,0.6); }
.lx-vg-pfeil { justify-self: center; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: #0d1b2e; border: 1px solid rgba(96,165,250,0.4); color: var(--accent-glow); box-shadow: 0 0 18px -4px rgba(59,130,246,0.6); }
.lx-vg-pfeil svg { width: 14px; height: 14px; }
/* Schmal: Kopf untereinander, jede Zeile als kleines Paar (Problem, darunter Loesung) */
@media (max-width: 860px) {
  .lx-vg::before { display: none; }
  .lx-vg-kopf { grid-template-columns: 1fr; }
  .lx-vg-seite--mit { grid-column: auto; padding-top: 0; }
  .lx-vg-seite--mit .lx-pl-titel { color: var(--accent-glow); }
  .lx-vg-zeilen { padding: 8px 16px 16px; display: grid; gap: 10px; }
  .lx-vg-zeilen li { grid-template-columns: 1fr; border: 1px solid rgba(96,165,250,0.16); border-radius: 16px; overflow: hidden; background: rgba(13,27,46,0.4); }
  .lx-vg-pfeil { display: none; }
  .lx-vg-ohne { padding: 14px 18px 10px; font-size: 0.97rem; }
  .lx-vg-mit { padding: 12px 18px 14px; font-size: 1rem; border-top: 1px solid rgba(96,165,250,0.18);
    background: radial-gradient(120% 140% at 100% 0%, rgba(29,78,216,0.22), transparent 65%); }
}

/* Leuchtweg im Vergleich: sobald die Karte im Bild ist (.an, per leistung.js),
   laeuft je Zeile ein Lichtstrahl vom Problem durch den Pfeil zur Loesung.
   Dort zuendet der Haken und die Loesung wird hell, das Problem tritt zurueck.
   Die Zeilen folgen versetzt (--i). Ohne JS und bei reduzierter Bewegung steht
   alles direkt im Endzustand. */
.lx-vg-zeilen li { --i: 0; }
.lx-vg-zeilen li::after { content: ''; position: absolute; top: 50%; left: 0; z-index: 1; width: 26%; height: 2px; margin-top: -1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(147,197,253,0.95) 70%, #fff);
  border-radius: 2px; filter: drop-shadow(0 0 6px rgba(96,165,250,0.9)); opacity: 0; transform: translateX(-100%); }
.lx-vg.bereit .lx-vg-mit { opacity: 0.45; }
.lx-vg.an .lx-vg-mit { opacity: 1; transition: opacity 0.45s ease calc(var(--i) * 0.14s + 0.4s); }
.lx-vg.an .lx-vg-ohne { opacity: 0.72; transition: opacity 0.45s ease calc(var(--i) * 0.14s + 0.2s); }
.lx-vg-pfeil, .lx-vg-mit .lx-punkt { position: relative; z-index: 2; }
.lx-vg.an .lx-vg-zeilen li::after { animation: lx-vg-strahl 0.8s cubic-bezier(0.45, 0, 0.2, 1) calc(var(--i) * 0.14s) both; }
.lx-vg.an .lx-vg-pfeil { animation: lx-vg-puls 0.7s ease-out calc(var(--i) * 0.14s + 0.2s) both; }
.lx-vg.an .lx-vg-mit .lx-punkt { animation: lx-vg-zuenden 0.9s ease-out calc(var(--i) * 0.14s + 0.4s) both; }
@keyframes lx-vg-strahl {
  0% { opacity: 0; transform: translateX(-100%); }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(118%); }
}
@keyframes lx-vg-puls {
  0% { box-shadow: 0 0 18px -4px rgba(59,130,246,0.6); }
  40% { box-shadow: 0 0 0 6px rgba(96,165,250,0.18), 0 0 26px 2px rgba(96,165,250,0.9); color: #fff; }
  100% { box-shadow: 0 0 18px -4px rgba(59,130,246,0.6); }
}
@keyframes lx-vg-zuenden {
  0% { box-shadow: 0 0 12px rgba(59,130,246,0.6); transform: scale(1); }
  35% { box-shadow: 0 0 0 7px rgba(96,165,250,0.22), 0 0 28px 4px rgba(96,165,250,0.95); transform: scale(1.12); }
  100% { box-shadow: 0 0 12px rgba(59,130,246,0.6); transform: scale(1); }
}
/* Schmal stehen Problem und Loesung untereinander: der Strahl laeuft dort
   quer ueber die Problemzeile und blendet in die Loesung darunter. */
@media (max-width: 860px) {
  .lx-vg-zeilen li::after { top: calc(50% - 1px); width: 40%; }
  @keyframes lx-vg-strahl {
    0% { opacity: 0; transform: translateX(-100%); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translateX(250%); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .lx-vg.bereit .lx-vg-mit, .lx-vg.bereit .lx-vg-ohne { opacity: 1; transition: none; }
  .lx-vg.an .lx-vg-zeilen li::after, .lx-vg.an .lx-vg-pfeil, .lx-vg.an .lx-vg-mit .lx-punkt { animation: none; }
}

/* Nutzenkarten als Glaskacheln, gleiche Glasrahmen-Grafik wie die Ergebnis-
   Kacheln der Startseite (9-Slice: Ecken unverzerrt, Kanten dehnen sich).
   Innen ein kuehler Glasschimmer, aussen ein weicher blauer Schein. Das
   Symbol sitzt in einem kleinen Glaswuerfel mit Lichtkante. */
.lx-nutzen-karte {
  background: linear-gradient(160deg, rgba(150,190,255,0.11) 0%, rgba(96,165,250,0.04) 55%, rgba(96,165,250,0.08) 100%);
  border: 1px solid transparent;
  border-image: url("assets/images/ergebnis-kachel-v3.webp") 68 fill / 24px stretch;
  box-shadow: 0 0 24px -4px rgba(96,165,250,0.34), 0 18px 40px -26px rgba(0,0,0,0.8);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.lx-nutzen-karte::before { background: linear-gradient(133deg, rgba(190,220,255,0.14) 0%, rgba(96,165,250,0.03) 26%, transparent 48%); }
@media (hover: hover) {
  .lx-nutzen-karte:hover { transform: translateY(-3px); box-shadow: 0 0 34px -2px rgba(96,165,250,0.5), 0 22px 44px -26px rgba(0,0,0,0.85); }
}
.lx-ico {
  color: #DBEAFE;
  background: radial-gradient(90% 90% at 30% 20%, rgba(191,219,254,0.34), rgba(59,130,246,0.14) 55%, rgba(29,78,216,0.22) 100%);
  border: 1px solid rgba(191,219,254,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -8px 14px -8px rgba(29,78,216,0.6), 0 0 18px -2px rgba(96,165,250,0.7);
}
.lx-ico svg { filter: drop-shadow(0 0 5px rgba(147,197,253,0.85)); }
@media (prefers-reduced-motion: reduce) { .lx-nutzen-karte { transition: none; } }

/* Anfrage am Seitenende (#anfrage): links Nutzen und Telefon, rechts das
   Formular als Glaskachel (gleicher Glasrahmen wie die Bewertungskarten). */
.lx-anfrage { scroll-margin-top: 84px; }
.lx-anfrage-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.lx-anfrage-text .lx-h2 { margin: 0 0 16px; max-width: 16ch; }
.lx-anfrage-lead { margin: 0 0 26px; max-width: 42ch; color: var(--paper-dim); font-size: clamp(1.02rem, 1.3vw, 1.14rem); line-height: 1.6; }
.lx-anfrage-punkte { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.lx-anfrage-punkte li { display: flex; align-items: center; gap: 12px; color: var(--paper); font-size: 1rem; }
.lx-anfrage-punkte .lx-punkt { width: 24px; height: 24px; background: var(--accent); color: #fff; box-shadow: 0 0 12px rgba(59,130,246,0.6); }
.lx-anfrage-text .lx-anruf { margin: 0; font-size: 0.95rem; color: var(--paper-faint); }
.lx-form-karte { position: relative; padding: clamp(24px, 3vw, 40px); border-radius: 22px;
  background: linear-gradient(160deg, rgba(150,190,255,0.10) 0%, rgba(13,27,46,0.55) 45%, rgba(96,165,250,0.07) 100%);
  border: 1px solid transparent; border-image: url("assets/images/bewertung-kachel-v1.webp") 70 fill / 22px stretch;
  box-shadow: 0 0 40px -10px rgba(96,165,250,0.42), 0 40px 80px -40px rgba(0,0,0,0.7); }
.lx-form .lx-label { display: block; }
.lx-form-titel { margin: 10px 0 20px; font-family: Arial, sans-serif; font-weight: 500; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--paper); }
.lx-form-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lx-feld-reihe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.lx-feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.lx-feld label { font-family: 'Inter Tight', system-ui, sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #9DB4D0; }
.lx-feld input, .lx-feld select, .lx-feld textarea { width: 100%; min-width: 0; min-height: 48px; padding: 12px 16px; border-radius: 12px;
  background: rgba(242,239,230,0.04); border: 1px solid rgba(242,239,230,0.14); color: var(--paper);
  font-family: 'Inter Tight', system-ui, sans-serif; font-size: 1rem; outline: none; transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; }
.lx-feld input::placeholder, .lx-feld textarea::placeholder { color: rgba(242,239,230,0.4); }
.lx-feld input:focus, .lx-feld select:focus, .lx-feld textarea:focus { border-color: rgba(96,165,250,0.75); background: rgba(96,165,250,0.06); box-shadow: 0 0 0 3px rgba(96,165,250,0.16); }
.lx-feld textarea { min-height: 96px; resize: vertical; }
.lx-feld select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2360A5FA' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; }
.lx-feld select option { background: #0d1b2e; color: var(--paper); }
.lx-form-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; font-size: 0.86rem; line-height: 1.45; color: var(--paper-dim); }
.lx-form-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.lx-form-check a { color: var(--accent-glow); text-decoration: underline; text-underline-offset: 2px; }
.lx-form-senden { width: 100%; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 20px;
  border-radius: 10px; border: 1px solid rgba(147,197,253,0.55); color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #2D5BE0 0%, #1B47C4 100%);
  font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 700; font-size: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 32px -8px rgba(66,132,255,0.8);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; }
.lx-form-senden svg { transition: transform 0.35s var(--ease-out); }
@media (hover: hover) {
  .lx-form-senden:hover { transform: translateY(-1px); background: linear-gradient(180deg, #3D6FF0 0%, #2350D2 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 44px -6px rgba(96,165,250,0.95); }
  .lx-form-senden:hover svg { transform: translateX(3px); }
}
.lx-form-senden:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lx-form-senden:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.lx-form-hinweis { margin: 10px 0 0; text-align: center; font-size: 0.8rem; color: var(--paper-faint); }
.lx-form-fehler { margin-top: 14px; padding: 12px 15px; border-radius: 12px; background: rgba(220,60,60,0.08); border: 1px solid rgba(220,60,60,0.35); color: #F4B4B4; font-size: 0.88rem; line-height: 1.5; }
.lx-form-fehler[hidden], .lx-form-erfolg[hidden], .lx-form[hidden] { display: none; }
.lx-form-erfolg { padding: clamp(28px, 5vw, 56px) 8px; text-align: center; outline: none; }
.lx-form-erfolg-ico { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 18px; border-radius: 50%;
  background: var(--accent); color: #fff; box-shadow: 0 0 0 8px rgba(96,165,250,0.14), 0 0 30px rgba(96,165,250,0.8); }
.lx-form-erfolg-ico svg { width: 26px; height: 26px; }
.lx-form-erfolg h3 { margin: 0 0 8px; font-family: Arial, sans-serif; font-weight: 500; font-size: 1.6rem; color: var(--paper); }
.lx-form-erfolg p { margin: 0; color: var(--paper-dim); }
.lx-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: lx-drehen 0.7s linear infinite; }
@keyframes lx-drehen { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .lx-anfrage-grid { grid-template-columns: 1fr; }
  .lx-anfrage-text .lx-h2 { max-width: none; }
}
@media (max-width: 560px) {
  .lx-feld-reihe { grid-template-columns: 1fr; }
  .lx-form-karte { padding: 22px 18px; border-image-width: 18px; }
}
@media (prefers-reduced-motion: reduce) { .lx-spinner { animation-duration: 1.6s; } }

/* Leistungsseiten ohne Eyebrows (nur der Seitentitel oben bleibt): Ueberschriften
   stehen ohne Vorlauf. Das Anfrageformular steht frei, ohne Glaskachel. */
.lx-vg .lx-pl-titel { margin-top: 0; }
.lx-form-titel { margin-top: 0; }
/* Formular in der Neon-Glaskachel (formular-kachel-v2.webp, 9-Slice). Der Rahmen
   ist bewusst schmaler gezogen als im Original, das Innere bleibt ruhig. */
.lx-form-karte { padding: clamp(34px, 3.4vw, 46px); border-radius: 26px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(59,130,246,0.10), transparent 60%), rgba(8,13,26,0.55);
  border: 1px solid transparent; border-image: url("assets/images/formular-kachel-v2.webp") 70 fill / 34px / 9px stretch;
  box-shadow: 0 0 60px -22px rgba(59,130,246,0.55); }
@media (max-width: 560px) { .lx-form-karte { padding: 30px 26px; border-image-width: 30px; } }

/* Ablauf: ein Glow-Punkt laeuft die Linie einmal von Knoten zu Knoten ab (Start
   und Ziel misst leistung.js als --x0/--y0 und --x1/--y1, am Handy senkrecht),
   jeder Knoten blitzt beim Erreichen (--verz). Der letzte Knoten ist erst aus
   und geht an, wenn der Punkt ankommt (.erreicht), dann bleibt er mit Glow an.
   leistung.js startet den Lauf beim ersten Sichtkontakt und spaeter ab und zu
   erneut (.lauf). Ohne JS oder bei reduzierter Bewegung ist der letzte Knoten an. */
.lx-schritte { --lauf: 2.8s; }
.lx-schritte.lauf::before { content: ''; display: block; position: absolute; left: 0; top: 0; right: auto; bottom: auto; z-index: 3;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; pointer-events: none;
  background: #fff; box-shadow: 0 0 0 3px rgba(147,197,253,0.35), 0 0 16px 5px rgba(96,165,250,0.95);
  animation: lx-lauf var(--lauf) linear 1 both; }
@keyframes lx-lauf {
  0% { transform: translate(var(--x0), var(--y0)); opacity: 0; }
  6% { opacity: 1; }
  90% { transform: translate(var(--x1), var(--y1)); opacity: 1; }
  100% { transform: translate(var(--x1), var(--y1)); opacity: 0; }
}
.lx-schritt-knoten::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px rgba(191,219,254,0.6), 0 0 22px 6px rgba(96,165,250,0.95); }
.lx-schritte.lauf .lx-schritt-knoten::after { animation: lx-knoten-blitz 0.9s ease-out var(--verz, 0s) 1; }
@keyframes lx-knoten-blitz {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}
/* Letzter Knoten: mit JS erst aus, beim Ankommen an und dauerhaft leuchtend */
.lx-schritte.bereit .lx-schritt:last-child .lx-schritt-knoten { background: #0c1628; border-color: var(--accent-glow); box-shadow: 0 0 14px -2px rgba(96,165,250,0.75);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.5s ease; }
.lx-schritte.bereit.erreicht .lx-schritt:last-child .lx-schritt-knoten { background: var(--accent-glow); border-color: #DBEAFE;
  box-shadow: 0 0 0 5px rgba(96,165,250,0.18), 0 0 24px 4px rgba(96,165,250,0.85); animation: lx-knoten-an 3.2s ease-in-out 0.5s infinite; }
@keyframes lx-knoten-an {
  0%, 100% { box-shadow: 0 0 0 5px rgba(96,165,250,0.18), 0 0 24px 4px rgba(96,165,250,0.85); }
  50% { box-shadow: 0 0 0 7px rgba(96,165,250,0.12), 0 0 32px 8px rgba(96,165,250,0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .lx-schritte.lauf::before { display: none; }
  .lx-schritte.lauf .lx-schritt-knoten::after, .lx-schritte.bereit.erreicht .lx-schritt:last-child .lx-schritt-knoten { animation: none; }
}

/* Leistungskacheln im Neon-Glasrahmen (formular-kachel-v2.webp, 9-Slice), gleicher
   Rahmen wie um die Formulare. Kanten bleiben schmal, Ecken unverzerrt. */
.lst-karte { border: 1px solid transparent; border-image: url("assets/images/formular-kachel-v2.webp") 70 fill / 34px / 9px stretch;
  box-shadow: 0 0 40px -18px rgba(59,130,246,0.5), 0 18px 40px -30px rgba(0,0,0,0.8); }
@media (hover: hover) {
  .lst-karte:hover { box-shadow: 0 0 50px -12px rgba(96,165,250,0.7), 0 24px 50px -30px rgba(0,0,0,0.9); }
}

/* Vergleichstabelle im Neon-Rahmen (tabelle-kachel-v1.webp, 9-Slice), auch am Handy.
   Die blaue Loesungshaelfte sitzt innerhalb der Linien, sonst deckt sie den Rahmen. */
.lx-vg { border: 1px solid transparent; border-image: url("assets/images/tabelle-kachel-v1.webp") 70 fill / 34px / 9px stretch;
  background: rgba(8,13,26,0.55); box-shadow: 0 0 60px -24px rgba(124,58,237,0.35), 0 0 50px -20px rgba(59,130,246,0.45); overflow: visible; }
.lx-vg::before { top: 9px; bottom: 9px; right: 9px; border-radius: 0 16px 16px 0; }
@media (max-width: 560px) { .lx-vg { border-image-width: 30px; } }

/* Bausteine als Glaskacheln, gleicher Glasrahmen wie die Nutzenkarten im Hero
   (ergebnis-kachel-v3.webp, 9-Slice), damit die Seite einheitlich wirkt. */
.lx-baustein { position: relative; border: 1px solid transparent;
  border-image: url("assets/images/ergebnis-kachel-v3.webp") 68 fill / 24px stretch;
  background: linear-gradient(160deg, rgba(150,190,255,0.10) 0%, rgba(96,165,250,0.03) 55%, rgba(96,165,250,0.07) 100%);
  box-shadow: 0 0 22px -6px rgba(96,165,250,0.3), 0 18px 40px -28px rgba(0,0,0,0.8);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); }
@media (hover: hover) {
  .lx-baustein:hover { transform: translateY(-3px); background: linear-gradient(160deg, rgba(150,190,255,0.13) 0%, rgba(96,165,250,0.05) 55%, rgba(96,165,250,0.09) 100%);
    box-shadow: 0 0 32px -4px rgba(96,165,250,0.48), 0 22px 44px -26px rgba(0,0,0,0.85); }
}
@media (prefers-reduced-motion: reduce) { .lx-baustein { transition: none; } }

/* Vergleich am Handy als ruhige Liste statt Kaesten im Rahmen: oben die Problem-
   Ueberschrift klein und gedimmt, die Loesung gross in Blau. Je Zeile steht das
   Problem klein und durchgestrichen ueber der hellen Loesung, getrennt nur durch
   feine Linien. So liest man von oben nach unten nur noch die Ergebnisse. */
@media (max-width: 860px) {
  .lx-vg-kopf { padding: 30px 24px 8px; }
  .lx-vg-seite, .lx-vg-seite--mit { padding: 0; }
  .lx-vg-seite--ohne .lx-pl-titel { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.3; color: var(--paper-dim); }
  .lx-vg-seite--mit .lx-pl-titel { font-size: 1.5rem; line-height: 1.15; color: var(--accent-glow); }
  .lx-vg-zeilen { display: block; padding: 10px 24px 26px; }
  .lx-vg-zeilen li { display: block; padding: 15px 0; border: 0; border-top: 1px solid rgba(242,239,230,0.08); border-radius: 0; background: none; overflow: visible; }
  .lx-vg-zeilen li:first-child { border-top: 0; }
  .lx-vg-ohne { padding: 0 0 7px; gap: 10px; font-size: 0.9rem; line-height: 1.4; color: rgba(242,239,230,0.55);
    text-decoration: line-through; text-decoration-color: rgba(242,239,230,0.35); }
  .lx-vg-mit { padding: 0; gap: 10px; border: 0; background: none; font-size: 1.04rem; line-height: 1.4; }
  .lx-vg-ohne .lx-punkt, .lx-vg-mit .lx-punkt { width: 22px; height: 22px; }
  .lx-vg-ohne .lx-punkt svg, .lx-vg-mit .lx-punkt svg { width: 11px; height: 11px; }
  .lx-vg-zeilen li::after { display: none; }
}

/* Bausteine nummeriert statt Punkt (Stef, 30.09.2026): sechs Kacheln mit
   gleichem Punkt wirkten am Handy wie eine unuebersichtliche Liste. Die Zahl
   kommt per CSS-Zaehler, damit alle Leistungsseiten ohne HTML-Aenderung folgen. */
.lx-bausteine-grid { counter-reset: lx-baustein; }
.lx-baustein { counter-increment: lx-baustein; }
.lx-baustein h3 { gap: 12px; }
.lx-baustein h3::before { content: counter(lx-baustein); width: auto; height: auto; min-width: 0.9em;
  border-radius: 0; background: none; box-shadow: none;
  font-family: 'Inter Tight', system-ui, sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; color: #BFDBFE;
  text-shadow: 0 0 8px rgba(96,165,250,0.95), 0 0 20px rgba(96,165,250,0.6), 0 0 36px rgba(96,165,250,0.35); }

/* Nutzenkarten am Handy als Siegel (Stef, 30.09.2026): zwei nebeneinander, die
   dritte mittig darunter, Symbol ueber dem Titel. Untereinander wirkten sie wie
   eine Liste statt wie Vertrauenspunkte. body davor, damit es die Regeln oben schlaegt. */
@media (max-width: 900px) {
  body .lx-nutzen .lx-nutzen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body .lx-nutzen .lx-nutzen-karte { grid-template-columns: 1fr; justify-items: center; align-content: start;
    row-gap: 10px; padding: 16px 12px 15px; text-align: center; }
  body .lx-nutzen .lx-nutzen-karte:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
  body .lx-nutzen .lx-nutzen-karte h3 { font-size: 0.95rem; line-height: 1.25; }
}

/* Handy (Stef, 30.09.2026, Vorbild Cuberto): Bausteine stapeln sich beim Scrollen,
   jede bleibt oben stehen und die naechste schiebt sich darueber. Deckender Grund. */
@media (max-width: 640px) {
  body .lx-baustein { position: sticky; top: calc(76px + var(--stapel, 0) * 9px); background-color: #0A1426;
    box-shadow: 0 -12px 30px -8px rgba(0,0,0,0.6), 0 16px 36px -24px rgba(0,0,0,0.8); }
  body .lx-baustein:nth-child(1) { --stapel: 0; } body .lx-baustein:nth-child(2) { --stapel: 1; }
  body .lx-baustein:nth-child(3) { --stapel: 2; } body .lx-baustein:nth-child(4) { --stapel: 3; }
  body .lx-baustein:nth-child(5) { --stapel: 4; } body .lx-baustein:nth-child(6) { --stapel: 5; }
}