/* Landingpage Wix Studio Two Agentur (/leistungen/wix-studio-two-agentur/), 03.11.2026
   Baut auf den Scroll-Magazin-Bausteinen aus wix-studio-2.css auf (body.ws2).
   Eigene Bausteine: dunkler Kopf mit drei Schichten (KI-Idee, Design, React-Code), geteilte Abschnitte,
   Zustands-Bühne, Funktionsliste, Leistungszeilen, Anwendungsfall-Reiter, Prozesslinie, Anfrage-Funnel.
   Bewegung nur über html.ws2-js und nie bei prefers-reduced-motion. */

.lp-s2 { --lp-dunkel: #0c2033; --lp-dunkel-2: #0f2740; --lp-linie: #22415c; }
.lp-s2 .ws2-kapitel { scroll-margin-top: calc(var(--nav-h, 72px) + 8px); }

/* ---------- Kopf: Kinobild über die volle Breite, Text gleitet darüber (User 03.11. abends) ---------- */
.lp-held { position: relative; display: block; min-height: 0; padding: 0; background: var(--lp-dunkel); color: #fff; }
.lp-held-buehne { position: sticky; top: var(--nav-h, 72px); z-index: 0; height: min(calc(100vh - var(--nav-h, 72px)), 56.25vw); min-height: 240px; overflow: hidden; background: #08182a; }
.lp-held-medien { position: absolute; inset: 0; transform: scale(var(--hz, 1)); transform-origin: 50% 40%; will-change: transform; }
.lp-held-bild, .lp-held-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.lp-held-video { opacity: 0; transition: opacity 1.2s ease; }
.lp-held-video.laeuft { opacity: 1; }
.lp-held-buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 22, 36, .75) 0%, rgba(8, 22, 36, 0) 34%), rgba(8, 22, 36, var(--hd, 0)); pointer-events: none; }
.lp-held-schiffe { position: absolute; left: var(--ws2-rand); bottom: clamp(56px, 7vw, 96px); z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-held-schiffe li { display: flex; align-items: baseline; gap: 10px; padding: 8px 15px; border-radius: 999px; background: rgba(8, 22, 36, .6); border: 1px solid rgba(240, 195, 124, .35); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: .35; transform: translateY(6px); transition: opacity .8s, transform .8s var(--ws2-ease), border-color .8s, background .8s; }
.lp-held-schiffe li em { font-style: italic; font-family: var(--display, Fraunces, Georgia, serif); font-weight: 450; color: var(--ws2-messing-hell); }
.lp-held-schiffe li.an { opacity: 1; transform: none; border-color: var(--ws2-messing); background: rgba(8, 22, 36, .8); }
.lp-held-schiffe li.an:last-child { background: rgba(216, 166, 87, .22); }
.lp-held-pause { position: absolute; right: var(--ws2-rand); top: 20px; z-index: 2; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(8, 22, 36, .55); color: #fff; font: 600 13px Inter, system-ui, sans-serif; cursor: pointer; }
.lp-held-pause:focus-visible { outline: 2px solid var(--ws2-messing); outline-offset: 3px; }
.lp-held .ws2-runter { position: absolute; right: var(--ws2-rand); bottom: clamp(56px, 7vw, 96px); left: auto; z-index: 1; }
.lp-held-text { position: relative; z-index: 2; margin-top: -40px; padding: clamp(40px, 5vw, 72px) var(--ws2-rand) clamp(64px, 8vw, 104px); background: var(--lp-dunkel); border-radius: 32px 32px 0 0; box-shadow: 0 -30px 60px rgba(0, 0, 0, .35); }
.lp-held-text-raster { display: grid; gap: clamp(24px, 4vw, 72px); max-width: 1240px; }
@media (min-width: 1000px) { .lp-held-text-raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; } }
.lp-h1 { margin: 0; max-width: 17ch; font-size: clamp(38px, 5vw, 76px); line-height: 1.02; }
.lp-h1 .ws2-zeile:first-child { color: var(--ws2-messing-hell); }
.lp-h1 .ws2-zeile { margin-top: 0 !important; font-size: 1em !important; line-height: 1.04 !important; }
.lp-lead { max-width: 560px; margin: 0; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.7; color: #dbe5ee; }
.lp-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.lp-link-hell { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--ws2-messing); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lp-link-hell:hover { color: var(--ws2-messing-hell); }
.lp-vertrauen-kurz { margin: 16px 0 0; font-size: 13.5px; color: var(--ws2-hell); }
.lp-belege { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 24px 0 0; border-top: 1px solid var(--lp-linie); display: flex; flex-wrap: wrap; gap: 14px 40px; max-width: 1240px; }
.lp-belege li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ws2-hell); line-height: 1.35; }
.lp-belege b { display: block; color: #fff; font-size: 14.5px; }
.lp-stern { color: var(--ws2-messing-hell); font-size: 22px; line-height: 1; }
.k { color: #f0c37c; } .t { color: #8fb4ff; } .s { color: #b9d7a8; }
@media (max-width: 760px) {
  /* Handy: hohes Kinobild statt schmalem Streifen, Ausschnitt auf Leuchtturm und Lichtstrahl */
  .lp-held-buehne { height: min(64vh, 560px); height: min(64svh, 560px); min-height: 380px; }
  .lp-held-bild, .lp-held-video { object-position: 12% 50%; }
  .lp-held-schiffe { bottom: 46px; gap: 4px; flex-wrap: nowrap; }
  .lp-held-schiffe li { font-size: 11px; padding: 4px 9px; }
  .lp-held-schiffe li em { display: none; }
  .lp-held-pause { top: 10px; font-size: 12px; padding: 6px 10px; }
  .lp-held .ws2-runter { display: none; }
  .lp-held-text { margin-top: -28px; border-radius: 24px 24px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .lp-held-video { display: none; } .lp-held-schiffe li { opacity: 1; transform: none; } .lp-held-medien { transform: none; } }

/* ---------- Abschnittsnavigation (ersetzt Punktleiste und Kapitelzeile) ---------- */
.lp-s2 .ws2-schiene, .lp-s2 .ws2-kapzeile { display: none !important; }
.lp-lokal { position: sticky; top: var(--nav-h, 72px); z-index: 50; background: rgba(252, 250, 246, .94); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid #e7dfcf; }
.lp-lokal-innen { display: flex; align-items: center; gap: 20px; padding: 0 var(--ws2-rand); height: 58px; }
.lp-lokal-titel { flex: none; margin: 0; font-family: var(--display, Fraunces, Georgia, serif); font-size: 17px; font-weight: 620; color: var(--ws2-navy); }
.lp-lokal ol { flex: 1 1 auto; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); padding-inline: 12px; }
.lp-lokal ol::-webkit-scrollbar { display: none; }
.lp-lokal a.lp-lokal-link { position: relative; display: block; padding: 18px 12px; font-size: 14px; font-weight: 550; color: var(--ws2-grau); text-decoration: none; white-space: nowrap; transition: color .25s; }
.lp-lokal a.lp-lokal-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--ws2-messing); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ws2-ease); }
.lp-lokal a.lp-lokal-link:hover { color: var(--ws2-navy); }
.lp-lokal a.lp-lokal-link[aria-current="true"] { color: var(--ws2-navy); }
.lp-lokal a.lp-lokal-link[aria-current="true"]::after { transform: scaleX(1); }
.lp-lokal .btn { flex: none; padding: 10px 18px; font-size: 14px; }
.lp-lokal-fort { position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--fort, 0) * 100%); background: var(--ws2-navy); }
@media (max-width: 1100px) { .lp-lokal-titel { display: none; } }
@media (max-width: 640px) { .lp-lokal .btn { display: none; } .lp-lokal-innen { height: 50px; padding-right: 0; } .lp-lokal a.lp-lokal-link { padding: 15px 10px; font-size: 13.5px; } }
.lp-s2 .ws2-kapitel { scroll-margin-top: calc(var(--nav-h, 72px) + 58px); }

/* ---------- Grundbausteine ---------- */
.lp-inhalt { display: block; }
.lp-dunkel { background: var(--lp-dunkel); color: #fff; }
.lp-dunkel p, .lp-dunkel li { color: #dbe5ee; }
.lp-dunkel .ws2-h2 { color: #fff; }
.lp-dunkel .ws2-kicker { color: var(--ws2-messing-hell) !important; }
.lp-dunkel a:not(.btn) { color: #fff; text-decoration-color: var(--ws2-messing); }
.lp-sand { background: var(--ws2-sand); }
.lp-s2 .ws2-kapitel + .ws2-kapitel { border-top: 0; }
.lp-gross { font-family: var(--display, Fraunces, Georgia, serif); font-size: clamp(21px, 2.1vw, 28px) !important; line-height: 1.45 !important; color: var(--ws2-navy) !important; margin: 0 0 22px !important; }
.lp-gross--hell { color: #fff !important; }
.lp-gross strong { color: var(--ws2-messing-text); }
.lp-gross--hell strong { color: var(--ws2-messing-hell) !important; }
.lp-s2 .ws2-kapitel p { font-size: 17.5px; line-height: 1.7; }
.lp-klein, .lp-klein-hell { font-size: 14px !important; color: var(--ws2-grau) !important; }
.lp-klein-hell { color: var(--ws2-hell) !important; max-width: 820px; margin: 40px 0 0 !important; text-align: left; }
.lp-mitte { text-align: left; margin-top: 48px !important; }
.lp-h3-mitte { text-align: left; margin: clamp(64px, 8vw, 104px) 0 32px !important; font-family: var(--display, Fraunces, Georgia, serif); font-size: clamp(26px, 2.6vw, 34px); color: inherit; }
.lp-dunkel .lp-h3-mitte { color: #fff; }

/* geteilter Abschnitt: links steht, rechts läuft */
.lp-geteilt { display: grid; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (min-width: 900px) { .lp-geteilt { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .lp-geteilt-links { position: sticky; top: calc(var(--nav-h, 72px) + 48px); } }
.lp-geteilt > * { min-width: 0; }

/* Probleme */
.lp-probleme { list-style: none; counter-reset: pb; margin: 0; padding: 0; }
.lp-probleme li { counter-increment: pb; position: relative; padding: 22px 0 22px 64px; border-top: 1px solid #e7dfcf; }
.lp-probleme li:last-child { border-bottom: 1px solid #e7dfcf; }
.lp-probleme li::before { content: counter(pb, decimal-leading-zero); position: absolute; left: 0; top: 20px; font-family: var(--display, Fraunces, Georgia, serif); font-size: 30px; font-weight: 650; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--ws2-messing); }
.lp-probleme b { display: block; margin-bottom: 4px; font-size: 19px; color: var(--ws2-navy); }
.lp-probleme span { font-size: 16.5px; line-height: 1.6; color: var(--ws2-tinte); }

/* Zustands-Bühne */
.lp-buehne .ws2-schritt h3 { color: #fff; }
.lp-buehne .ws2-schritt p:last-child { color: #dbe5ee; }
.ws2-js .lp-buehne[data-aktiv] .ws2-schritt:not(.ist-aktiv) h3, .ws2-js .lp-buehne[data-aktiv] .ws2-schritt:not(.ist-aktiv) p { color: #8fa3b5 !important; }
.lp-buehne .ws2-schritt-k { color: var(--ws2-messing-hell) !important; }
.lp-zustand { margin: 0; width: 100%; }
.lp-zustand-flaeche { position: relative; aspect-ratio: 1 / .78; border-radius: 22px; background: #0a1828; border: 1px solid var(--lp-linie); overflow: hidden; background-image: radial-gradient(circle at 1px 1px, rgba(168, 188, 205, .12) 1px, transparent 1.3px); background-size: 22px 22px; }
.lp-zustand figcaption { margin-top: 12px; font-size: 13.5px; color: var(--ws2-hell); }
.lp-z { position: absolute; inset: 9% 8%; border-radius: 16px; transition: opacity .7s, transform .9s var(--ws2-ease), clip-path .9s var(--ws2-ease); }
.lp-z--ki { display: grid; align-content: start; gap: 12px; padding: 24px; border: 1.5px dashed #5b7c9a; }
.lp-z--ki i { display: block; height: 14px; width: var(--w); border: 1.5px dashed #5b7c9a; border-radius: 5px; }
.lp-z--ki b { display: block; height: 32%; border: 1.5px dashed #5b7c9a; border-radius: 10px; }
.lp-z--ki span { font-size: 15px; font-style: italic; color: #e9dcc2; }
.lp-z--design { background: #fcfaf6; padding: 22px; display: grid; grid-template-rows: 1fr auto auto auto auto; gap: 10px; }
.lp-z-foto { border-radius: 10px; background: url(/assets/img/logbuch/wix-studio-2/werft-960.webp) center / cover; min-height: 0; }
.lp-z-titel { height: 22px; width: 70%; border-radius: 5px; background: var(--ws2-navy); }
.lp-z-zeile { height: 11px; width: 92%; border-radius: 4px; background: #dfe5ea; }
.lp-z-zeile.kurz { width: 64%; }
.lp-z-knopf { justify-self: start; width: 34%; height: 34px; padding: 0; border-radius: 8px; background: var(--ws2-messing); color: var(--ws2-navy); font-size: 13px; font-weight: 650; }
.lp-z--code { background: #08182a; border: 1px solid var(--lp-linie); padding: 24px; display: flex; align-items: center; }
.lp-z--code pre { margin: 0; font: clamp(12px, 1.2vw, 15px)/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; color: #cfd9e3; white-space: pre; overflow: hidden; }
.lp-z { opacity: 0; transform: scale(.94) translateY(16px); }
.lp-buehne:not([data-aktiv]) .lp-z--design, .lp-buehne[data-aktiv="0"] .lp-z--ki, .lp-buehne[data-aktiv="1"] .lp-z--design, .lp-buehne[data-aktiv="2"] .lp-z--code { opacity: 1; transform: none; }
.lp-buehne[data-aktiv="1"] .lp-z--ki { opacity: .25; transform: scale(1.06); }
.lp-buehne[data-aktiv="2"] .lp-z--design { opacity: .22; transform: scale(.9) translate(-6%, -6%); }

/* Funktionen */
.lp-funktionen { list-style: none; margin: 0; padding: 0; max-width: 1180px; display: grid; gap: 0; border-top: 1px solid var(--lp-linie); }
@media (min-width: 760px) { .lp-funktionen { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
@media (min-width: 1100px) { .lp-funktionen { grid-template-columns: repeat(3, 1fr); } }
.lp-funktionen li { padding: 24px 0; border-bottom: 1px solid var(--lp-linie); }
.lp-funktionen h3 { margin: 10px 0 6px; font-family: var(--display, Fraunces, Georgia, serif); font-size: 22px; color: #fff; }
.lp-funktionen p { margin: 0; font-size: 15.5px !important; line-height: 1.6 !important; }

/* Leistungen */
.lp-leistungen { list-style: none; margin: 0; padding: 0; max-width: 1180px; }
.lp-leistungen li { display: grid; grid-template-columns: 72px 1fr; gap: 6px 24px; padding: 30px 0; border-top: 1px solid #e7dfcf; transition: background .3s; }
.lp-leistungen li:last-child { border-bottom: 1px solid #e7dfcf; }
@media (min-width: 900px) { .lp-leistungen li { grid-template-columns: 96px minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.lp-leistungen li:hover { background: linear-gradient(90deg, transparent, rgba(216, 166, 87, .07), transparent); }
.lp-l-nr { font-family: var(--display, Fraunces, Georgia, serif); font-size: 44px; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--ws2-messing); }
.lp-leistungen h3 { margin: 0 0 8px; font-family: var(--display, Fraunces, Georgia, serif); font-size: clamp(22px, 2.2vw, 28px); color: var(--ws2-navy); }
.lp-l-nutzen { margin: 0 !important; font-size: 17px !important; color: var(--ws2-tinte); font-weight: 500; }
.lp-l-was { margin: 0 !important; font-size: 15.5px !important; color: var(--ws2-grau) !important; grid-column: 2; }
@media (min-width: 900px) { .lp-l-was { grid-column: 3; } }

/* Anwendungsfälle */
.lp-faelle { max-width: 1180px; margin: 0; }
.lp-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 18px; scrollbar-width: thin; }
.lp-tabs button { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; padding: 12px 18px; border-radius: 999px; border: 1px solid #d9cdb4; background: #fff; color: var(--ws2-navy); font: 600 15px Inter, system-ui, sans-serif; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.lp-tabs button span { font-family: var(--display, Fraunces, Georgia, serif); color: var(--ws2-messing-text); }
.lp-tabs button[aria-selected="true"] { background: var(--ws2-navy); color: #fff; border-color: var(--ws2-navy); }
.lp-tabs button[aria-selected="true"] span { color: var(--ws2-messing-hell); }
.lp-tabs button:focus-visible { outline: 2px solid var(--ws2-messing); outline-offset: 3px; }
.lp-fall { display: grid; gap: clamp(28px, 4vw, 56px); padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: #fff; border: 1px solid #e7dfcf; box-shadow: 0 24px 60px rgba(12, 32, 51, .06); }
@media (min-width: 900px) { .lp-fall { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; } }
.lp-fall:not([hidden]) { animation: lp-fall-auf .6s var(--ws2-ease); }
@keyframes lp-fall-auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lp-fall h3 { margin: 0 0 10px; font-family: var(--display, Fraunces, Georgia, serif); font-size: clamp(26px, 2.6vw, 34px); color: var(--ws2-navy); }
.lp-fall-nutzen { font-size: 18px !important; color: var(--ws2-tinte); }
.lp-fall-spalten { display: grid; gap: 18px; margin: 18px 0; }
@media (min-width: 640px) { .lp-fall-spalten { grid-template-columns: 1fr 1fr; } }
.lp-fall-spalten ul { margin: 0; padding-left: 18px; }
.lp-fall-spalten li { font-size: 15.5px; line-height: 1.55; margin-bottom: 6px; }
.lp-fall-spalten p { font-size: 15.5px !important; margin: 0; }
.lp-fall-k { margin: 0 0 8px !important; font-size: 12px !important; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ws2-messing-text) !important; }
.lp-fall-pruef { padding: 14px 18px; border-radius: 12px; background: #f6ecd7; font-size: 15px !important; margin: 0 0 18px !important; }
.lp-fall-ansicht { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; background: var(--ws2-navy); padding: 14px; overflow: hidden; }
.lp-fa-kopf { display: flex; gap: 6px; margin-bottom: 12px; }
.lp-fa-kopf i { width: 9px; height: 9px; border-radius: 50%; background: var(--lp-linie); }
.lp-fa-inhalt { position: absolute; inset: 40px 14px 40px; border-radius: 10px; background: #fcfaf6; }
.lp-fa-k { position: absolute; left: 14px; bottom: 10px; margin: 0 !important; font-size: 11px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--ws2-hell) !important; }
.lp-fa-inhalt::before, .lp-fa-inhalt::after { content: ""; position: absolute; border-radius: 6px; }
[data-art="unternehmen"] .lp-fa-inhalt::before { left: 6%; top: 10%; width: 52%; height: 14%; background: var(--ws2-navy); }
[data-art="unternehmen"] .lp-fa-inhalt::after { left: 6%; right: 6%; bottom: 8%; height: 44%; background: repeating-linear-gradient(90deg, #e7dfcf 0 30%, transparent 30% 35%); }
[data-art="landingpage"] .lp-fa-inhalt { background: linear-gradient(180deg, #123049 0 55%, #fcfaf6 55%); }
[data-art="landingpage"] .lp-fa-inhalt::before { left: 10%; top: 16%; width: 60%; height: 12%; background: #fcfaf6; }
[data-art="landingpage"] .lp-fa-inhalt::after { left: 10%; top: 36%; width: 26%; height: 9%; background: var(--ws2-messing); }
[data-art="shop"] .lp-fa-inhalt::before { left: 6%; right: 6%; top: 10%; height: 80%; background: repeating-linear-gradient(90deg, #e7dfcf 0 22%, transparent 22% 26%), repeating-linear-gradient(180deg, transparent 0 46%, #fcfaf6 46% 54%); }
[data-art="portale"] .lp-fa-inhalt::before { left: 6%; top: 10%; width: 26%; height: 80%; background: #dfe5ea; }
[data-art="portale"] .lp-fa-inhalt::after { left: 36%; right: 6%; top: 10%; height: 80%; background: repeating-linear-gradient(180deg, #e7dfcf 0 16%, transparent 16% 21%); }
[data-art="kundenportal"] .lp-fa-inhalt::before { left: 0; top: 0; bottom: 0; width: 22%; background: var(--ws2-navy); border-radius: 10px 0 0 10px; }
[data-art="kundenportal"] .lp-fa-inhalt::after { left: 28%; right: 6%; top: 12%; height: 76%; background: repeating-linear-gradient(90deg, #e7dfcf 0 47%, transparent 47% 53%); }
[data-art="webapp"] .lp-fa-inhalt::before { left: 6%; top: 10%; width: 40%; height: 80%; background: #123049; }
[data-art="webapp"] .lp-fa-inhalt::after { left: 52%; right: 6%; top: 10%; height: 80%; background: linear-gradient(180deg, #d8a657 0 18%, transparent 18% 26%, #dfe5ea 26% 40%, transparent 40% 48%, #dfe5ea 48% 62%, transparent 62% 70%, #e7dfcf 70%); }

/* Vergleich */
.lp-tabelle { max-width: 1180px; }
.lp-tabelle table { min-width: 860px; }
.lp-tabelle tbody td:nth-child(3) { background: #fbf8f1; }
.lp-tabelle tbody td:last-child { background: #fff; }
.lp-s2 .lp-tabelle thead th:nth-child(3) { color: var(--ws2-messing-hell); }
.lp-s2 .lp-tabelle thead th:last-child { color: #fff; }
@media (max-width: 640px) { .lp-tabelle table { min-width: 0; } }

/* Warum */
.lp-zahlen { border-color: var(--lp-linie) !important; margin: 0 0 clamp(56px, 7vw, 88px) !important; }
.lp-zahlen > div + div { border-color: var(--lp-linie) !important; }
.lp-zahlen .ws2-zahl { color: #fff !important; }
.lp-zahlen p:last-child { color: var(--ws2-hell) !important; }
.lp-ehrlich { padding: 16px 20px; border-radius: 14px; background: rgba(216, 166, 87, .12); font-size: 15.5px !important; }
.lp-referenzen { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
@media (min-width: 640px) { .lp-referenzen { grid-template-columns: 1fr 1fr; } }
.lp-referenzen a { display: block; text-decoration: none !important; color: #fff; }
.lp-ref-bild { display: block; overflow: hidden; border-radius: 16px; aspect-ratio: 16 / 10; background: var(--lp-linie); }
.lp-ref-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1s var(--ws2-ease); }
.lp-referenzen a:hover img { transform: scale(1.05); }
.lp-ref-text { display: grid; gap: 2px; padding: 12px 2px 0; }
.lp-ref-text b { font-family: var(--display, Fraunces, Georgia, serif); font-size: 21px; }
.lp-ref-text span { font-size: 14px; color: var(--ws2-hell); }
.lp-ref-text em { font-style: normal; font-size: 13.5px; color: var(--ws2-messing-hell); }
.ws2-js .lp-referenzen li[data-r] .lp-ref-bild { clip-path: inset(0 0 100% 0 round 16px); transition: clip-path 1.2s var(--ws2-ease); }
.ws2-js .lp-referenzen li[data-r].ist-da .lp-ref-bild { clip-path: inset(0 0 0 0 round 16px); }
.lp-geteilt--hell .lp-geteilt-links p { color: #dbe5ee; }

/* Prozess */
.lp-prozess { position: relative; max-width: 900px; margin: 0; padding-left: 64px; }
.lp-prozess-linie { position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: #e7dfcf; border-radius: 2px; overflow: hidden; }
.lp-prozess-linie i { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--fort, 1) * 100%); background: var(--ws2-messing); }
.lp-prozess ol { list-style: none; margin: 0; padding: 0; }
.lp-prozess li { position: relative; padding: 0 0 clamp(36px, 5vw, 56px); }
.lp-p-nr { position: absolute; left: -64px; top: -4px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ws2-papier); border: 2px solid var(--ws2-messing); font-family: var(--display, Fraunces, Georgia, serif); font-weight: 650; color: var(--ws2-navy); transition: background .4s, color .4s; }
.lp-prozess li.erreicht .lp-p-nr { background: var(--ws2-navy); color: #fff; border-color: var(--ws2-navy); }
.lp-prozess h3 { margin: 0 0 8px; font-family: var(--display, Fraunces, Georgia, serif); font-size: clamp(23px, 2.3vw, 30px); color: var(--ws2-navy); }
.lp-prozess p { margin: 0; }

/* SEO, Preise */
.lp-haken { list-style: none; margin: 0 0 22px; padding: 0; }
.lp-haken li { position: relative; padding: 8px 0 8px 30px; font-size: 16.5px; border-bottom: 1px solid #efe8da; }
.lp-haken li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 13px; height: 7px; border-left: 2px solid var(--ws2-messing); border-bottom: 2px solid var(--ws2-messing); transform: rotate(-45deg); }
.lp-preis-hinweis { margin: 0 0 26px; padding: 18px 22px; border-radius: 14px; background: #fff; border: 1px solid #e7dfcf; }
.lp-preis-hinweis p:last-child { margin: 0 !important; font-size: 15.5px !important; }
.lp-faktoren { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lp-faktoren li { padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid #e7dfcf; font-size: 15px; color: var(--ws2-navy); font-weight: 550; }
.lp-quellen { margin-top: 40px; padding: 20px 24px; border-radius: 14px; background: #fff; border: 1px solid #e7dfcf; }
.lp-quellen ol { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.6; }

/* ---------- Anfrage ---------- */
.lp-anfrage { display: grid; gap: clamp(36px, 5vw, 72px); max-width: 1240px; margin: 0; }
@media (min-width: 1000px) { .lp-anfrage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; } .lp-anfrage-text { position: sticky; top: calc(var(--nav-h, 72px) + 40px); } }
.lp-wege { list-style: none; margin: 0 0 18px; padding: 0; }
.lp-wege li { padding: 12px 0; border-top: 1px solid var(--lp-linie); font-size: 15.5px; line-height: 1.55; }
.lp-wege b { color: #fff; }
.lp-direkt a { color: var(--ws2-messing-hell) !important; font-weight: 600; }
.lp-funnel-rahmen { padding: clamp(22px, 3vw, 38px); border-radius: 24px; background: #fcfaf6; color: var(--ws2-tinte); box-shadow: 0 40px 90px rgba(0, 0, 0, .35); }
.lp-funnel p, .lp-funnel li, .lp-funnel label, .lp-funnel legend { color: var(--ws2-tinte); }
.lp-fortschritt { height: 6px; border-radius: 6px; background: #e7dfcf; overflow: hidden; }
.lp-fortschritt i { display: block; height: 100%; width: calc(var(--schritt, 1) / 5 * 100%); background: var(--ws2-messing); transition: width .5s var(--ws2-ease); }
.lp-schritt-anzeige { margin: 10px 0 18px !important; font-size: 13px !important; font-weight: 600; color: var(--ws2-grau) !important; }
.lp-schritt { border: 0; margin: 0 0 22px; padding: 0; }
.lp-schritt legend { padding: 0; margin-bottom: 16px; font-family: var(--display, Fraunces, Georgia, serif); font-size: clamp(22px, 2.2vw, 28px); color: var(--ws2-navy) !important; }
.lp-schritt legend small { display: block; margin-top: 4px; font-family: Inter, system-ui, sans-serif; font-size: 13px; color: var(--ws2-grau); }
.lp-opts { display: grid; gap: 10px; }
@media (min-width: 560px) { .lp-opts { grid-template-columns: 1fr 1fr; } }
.lp-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid #dfe5ea; background: #fff; cursor: pointer; font-size: 15.5px; font-weight: 550; transition: border-color .2s, background .2s, transform .2s; }
.lp-opt:hover { border-color: var(--ws2-navy); transform: translateY(-1px); }
.lp-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--ws2-navy); flex: none; }
.lp-opt:has(input:checked) { border-color: var(--ws2-navy); background: #edf3f9; }
.lp-opt:has(input:focus-visible) { outline: 2px solid var(--ws2-messing); outline-offset: 2px; }
.lp-feld-hinweis { margin: 12px 0 0 !important; font-size: 13.5px !important; color: var(--ws2-grau) !important; }
.lp-felder { display: grid; gap: 14px; }
@media (min-width: 560px) { .lp-felder { grid-template-columns: 1fr 1fr; } .lp-feld--voll { grid-column: 1 / -1; } }
.lp-feld label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.lp-feld input, .lp-feld textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #dfe5ea; background: #fff; font: inherit; font-size: 16px; color: var(--ws2-tinte); }
.lp-feld input:focus, .lp-feld textarea:focus { outline: 2px solid var(--ws2-messing); outline-offset: 1px; border-color: var(--ws2-navy); }
.lp-feld input[aria-invalid="true"] { border-color: #c0485e; }
.lp-check { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 12px; font-size: 14px; line-height: 1.5; }
.lp-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ws2-navy); flex: none; }
.lp-check a { color: var(--ws2-navy) !important; }
.lp-fehler { margin: 0 0 14px !important; padding: 12px 16px; border-radius: 12px; background: #fbe9ec; color: #8f1d33 !important; font-size: 14.5px !important; font-weight: 550; }
.lp-funnel-knoepfe { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lp-zurueck { padding: 14px 20px; border-radius: 10px; border: 1.5px solid #dfe5ea; background: #fff; color: var(--ws2-navy); font: 600 15px Inter, system-ui, sans-serif; cursor: pointer; }
.lp-weiter, .lp-senden { margin-left: auto; }
.lp-funnel-notiz { margin: 14px 0 0 !important; font-size: 13px !important; color: var(--ws2-grau) !important; }
.lp-funnel .kf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* mit Skript: ein Schritt zur Zeit; ohne Skript stehen alle Schritte untereinander */
.lp-funnel-js .lp-schritt { display: none; }
.lp-funnel-js .lp-schritt.aktiv { display: block; animation: lp-fall-auf .45s var(--ws2-ease); }
.lp-funnel:not(.lp-funnel-js) .lp-weiter, .lp-funnel:not(.lp-funnel-js) .lp-schritt-anzeige, .lp-funnel:not(.lp-funnel-js) .lp-fortschritt { display: none; }
.lp-funnel:not(.lp-funnel-js) .lp-senden { display: inline-flex !important; }

@media (prefers-reduced-motion: reduce) {
  .lp-schicht { transition: none; }
  .lp-fall:not([hidden]), .lp-funnel-js .lp-schritt.aktiv { animation: none; }
}
/* hidden muss gegen display von .btn und .lp-fall gewinnen */
.lp-s2 .lp-funnel [hidden], .lp-s2 .lp-fall[hidden] { display: none !important; }
.lp-h1 .ws2-zeile { margin-top: 0 !important; font-size: 1em !important; line-height: 1.04 !important; }


/* Namensschilder lesbar (User 03.11.): oben links im Video, damit die Textfläche sie beim Scrollen nicht abschneidet;
   kräftiger Hintergrund, auch nicht hervorgehobene Schilder gut lesbar */
.lp-held-schiffe { top: clamp(16px, 2.2vw, 28px); bottom: auto; }
.lp-held-schiffe li { opacity: 1; color: #dbe5ee; background: rgba(8, 22, 36, .82); border-color: rgba(168, 188, 205, .35); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.lp-held-schiffe li.an { color: #fff; background: rgba(8, 22, 36, .9); border-color: var(--ws2-messing); box-shadow: 0 0 0 1px rgba(216, 166, 87, .35), 0 8px 24px rgba(0, 0, 0, .35); }
.lp-held-schiffe li.an:last-child { background: rgba(60, 42, 14, .88); }
.lp-held .ws2-runter { bottom: clamp(72px, 8vw, 112px); }
@media (max-width: 760px) { .lp-held-schiffe { top: 10px; } .lp-held-pause { top: auto; bottom: 40px; } }
.lp-held-schiffe li { transform: none; }

/* ---------- Bilder und Bänder (03.11. abends) ---------- */
/* laufendes Themenband */
.lp-band { overflow: hidden; background: var(--ws2-sand); border-block: 1px solid #e7dfcf; padding: 18px 0; }
.lp-band-spur { display: flex; width: max-content; animation: lp-band 48s linear infinite; }
.lp-band-spur span { padding-right: 2em; font-family: var(--display, Fraunces, Georgia, serif); font-style: italic; font-size: clamp(22px, 2.4vw, 32px); color: var(--ws2-navy); white-space: nowrap; }
@keyframes lp-band { to { transform: translateX(-50%); } }
/* großes Aussage-Band */
.lp-aussage { padding: clamp(80px, 11vw, 160px) var(--ws2-rand); background: var(--ws2-papier); }
.lp-aussage .ws2-leucht { margin: 0; max-width: 1100px; }
.lp-aussage .ws2-leucht p { font-size: clamp(34px, 5vw, 72px) !important; line-height: 1.12 !important; letter-spacing: -.02em; }
/* Leistungen in der Textspalte neben dem Bild */
.lp-leistungen--spalte li { grid-template-columns: 56px 1fr !important; padding: 22px 0; }
.lp-leistungen--spalte .lp-l-nr { font-size: 34px; }
.lp-leistungen--spalte .lp-l-was { grid-column: auto !important; margin-top: 6px !important; }
/* Anwendungsfälle mit Foto */
.lp-fall-bild { margin: 0; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #e7dfcf; }
.lp-fall-bild img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--ws2-ease); }
.lp-fall:not([hidden]) .lp-fall-bild img { transform: scale(1); }
/* Breitbild */
.lp-breitbild { margin: 0 0 40px; }
.lp-breitbild .ws2-bild-rahmen { aspect-ratio: 21 / 8; border-radius: 22px; }
.lp-breitbild .ws2-bild-rahmen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0)) scale(var(--s, 1)); }
.lp-breitbild figcaption { margin-top: 10px; font-size: 13.5px; color: var(--ws2-grau); }
@media (max-width: 640px) { .lp-breitbild .ws2-bild-rahmen { aspect-ratio: 16 / 10; } }
/* Kundenstimmen */
.lp-stimmen { display: grid; gap: 24px; margin-top: clamp(56px, 7vw, 88px); max-width: 1240px; }
@media (min-width: 900px) { .lp-stimmen { grid-template-columns: 1fr 1fr; } .lp-stimmen-k, .lp-stimmen-mehr { grid-column: 1 / -1; } }
.lp-stimmen-k { color: var(--ws2-messing-hell) !important; }
.lp-stimme { margin: 0; padding: clamp(24px, 3vw, 36px); border-radius: 20px; background: rgba(255, 255, 255, .04); border: 1px solid var(--lp-linie); }
.lp-stimme blockquote { margin: 0 0 16px; padding: 0; border: 0; }
.lp-stimme blockquote p { margin: 0; font-family: var(--display, Fraunces, Georgia, serif); font-style: italic; font-size: clamp(19px, 1.8vw, 23px) !important; line-height: 1.5 !important; color: #fff !important; }
.lp-stimme blockquote p::before { content: "„"; color: var(--ws2-messing-hell); }
.lp-stimme figcaption { font-size: 14px; color: var(--ws2-hell); }
.lp-stimmen-mehr { margin: 0 !important; }
/* Prozess mit wechselndem Bild */
.lp-prozess-buehne { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) {
  .lp-prozess-buehne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-prozess-buehne .lp-prozess { margin: 0; }
  .lp-prozess-buehne .lp-prozess li { min-height: 38vh; }
  .lp-prozess-bilder { align-self: stretch; }
  .lp-prozess-sticky { position: sticky; top: calc(var(--nav-h, 72px) + 90px); aspect-ratio: 3 / 2; border-radius: 22px; overflow: hidden; background: #e7dfcf; box-shadow: 0 30px 70px rgba(12, 32, 51, .14); }
  .lp-pb { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity .9s ease, transform 1.4s var(--ws2-ease); }
  .lp-pb img { width: 100%; height: 100%; object-fit: cover; }
  .lp-prozess-buehne[data-ps-aktiv="0"] [data-pb="0"], .lp-prozess-buehne[data-ps-aktiv="1"] [data-pb="1"], .lp-prozess-buehne[data-ps-aktiv="2"] [data-pb="2"], .lp-prozess-buehne[data-ps-aktiv="3"] [data-pb="3"], .lp-prozess-buehne[data-ps-aktiv="4"] [data-pb="4"], .lp-prozess-buehne:not([data-ps-aktiv]) [data-pb="0"] { opacity: 1; transform: none; }
}
@media (max-width: 899px) {
  .lp-prozess-bilder { order: -1; }
  .lp-prozess-sticky { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .lp-pb { scroll-snap-align: start; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; }
  .lp-pb img { width: 100%; height: 100%; object-fit: cover; }
}
.lp-p-schritt { transition: opacity .5s; }
.lp-prozess-buehne[data-ps-aktiv] .lp-p-schritt:not(.aktiv) h3 { color: var(--ws2-grau); }
/* Abschluss mit Hafenbild */
.lp-abschluss { overflow: hidden; isolation: isolate; }
.lp-abschluss-bild { position: absolute; inset: 0; z-index: -1; }
.lp-abschluss-bild img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.lp-abschluss::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 32, 51, .96) 0%, rgba(12, 32, 51, .78) 50%, rgba(12, 32, 51, .55) 100%); }
@media (prefers-reduced-motion: reduce) { .lp-band-spur { animation: none; } }
.lp-l-nr { color: var(--ws2-messing-text) !important; -webkit-text-stroke: 0 !important; }