/* ============================================================
   LEISTUNGSSEITEN v25 „Fachblatt auf Papier“ (05.10.2026)
   Gilt für ki-chatbot, whatsapp-bot, telefon-ki, webdesign-wiesbaden.
   Ladefolge: base.css → seo-geo.css → premium.css → diese Datei.
   Hell = Papier (Verlauf + Korn + Höhenlinien), nie flächiges Weiß.
   Dunkel = Navy-Band mit Clip, Tafel (Schriftfeld) mit Zeichenblatt-Raster.
   Schrift: Fraunces für Überschriften, Zahlen, Knöpfe; Inter (400) für Text.
   Kein Dauer-Uppercase, kein Mono. Grundzustand ohne JS = lesbar;
   Reveals und Grafiken setzen motion.js und leistung-motion.js additiv.
   ============================================================ */

:root{
  --lp-papier:#FAF8F3;--lp-papier-2:#F4F0E8;--lp-karte:#FFFDF9;--lp-linie:#E4DDCC;
  --lp-gold-ink:#6B4F12;          /* Goldtext auf Papier, im schlechtesten Pixel 4,9:1 */
  --lp-text:#2B3240;--lp-muted:#4C5667;
  --lp-sh:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(15,35,66,.06),0 12px 28px -14px rgba(15,35,66,.22);
  --lp-sh-hover:inset 0 1px 0 rgba(255,255,255,.8),0 2px 4px rgba(15,35,66,.07),0 22px 40px -16px rgba(15,35,66,.32);
  --lp-korn:var(--papier-korn);
  --lp-korn-hell:var(--korn-hell);
}

html,body{background:var(--lp-papier)}

/* ---------- Papier: ein Muster überall gleich ---------- */
.lp-papier,.lp-papier-2{position:relative;isolation:isolate}
.lp-papier{background:
  linear-gradient(180deg,rgba(196,154,59,.2) 0,rgba(196,154,59,0) 2px),
  radial-gradient(110% 80% at 8% -10%,rgba(255,255,255,.62),rgba(255,255,255,0) 58%),
  linear-gradient(180deg,#FAF8F3 0%,#F5F1E7 100%)}
.lp-papier-2{background:
  linear-gradient(180deg,rgba(196,154,59,.2) 0,rgba(196,154,59,0) 2px),
  radial-gradient(110% 80% at 92% -10%,rgba(255,255,255,.5),rgba(255,255,255,0) 58%),
  linear-gradient(180deg,#F0EADC 0%,#E9E2D1 100%)}
.lp-papier::before,.lp-papier-2::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--papier-textur)}

/* ---------- Grundtypografie ---------- */
main.lp{font-family:var(--font-body);color:var(--ink)}
.lp h1,.lp h2,.lp h3{font-family:var(--font-display);font-weight:600;color:var(--navy);margin:0;text-wrap:balance}
.lp h1{font-size:clamp(2rem,1.2rem + 2.6vw,3.25rem);line-height:1.07;letter-spacing:-.5px;max-width:21ch;font-weight:560;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0}
.lp h2{font-size:clamp(1.55rem,1.2rem + 1.5vw,2.3rem);line-height:1.12;letter-spacing:-.2px;font-variation-settings:"opsz" 96,"SOFT" 0}
.lp h3{font-size:clamp(1.15rem,1.08rem + .5vw,1.4rem);line-height:1.25}
.lp [hidden]{display:none !important} /* Klassen mit display:flex dürfen [hidden] nicht aushebeln */
.lp .line-mask{overflow:hidden}       /* Masken-Zeilen aus motion.js (H1, CTA) */
.no-js [data-chat-open]{display:none} /* Demo-Knopf braucht site-widgets.js */
.lp .btn{font-family:var(--font-display);font-weight:600}

/* ---------- Kopf: Brotkrumen, Kurzantwort, Schriftfeld ---------- */
.lp-kopf{position:relative;isolation:isolate;padding-block:clamp(20px,2.6vw,30px) clamp(52px,6.4vw,92px);border-bottom:1px solid var(--lp-linie);
  background:
    url(img/lp-hoehenlinien.svg) right -40px top -30px/min(1400px,150%) auto no-repeat,
    radial-gradient(880px 440px at 94% -6%,rgba(196,154,59,.13),transparent 62%),
    linear-gradient(180deg,rgba(196,154,59,.2) 0,rgba(196,154,59,0) 2px),
    radial-gradient(110% 80% at 8% -10%,rgba(255,255,255,.62),rgba(255,255,255,0) 58%),
    linear-gradient(180deg,#FAF8F3 0%,#F5F1E7 100%)}
/* Bild-Ebene hell: Höhenlinien (eigene Grafik, im Hintergrund-Stapel oben), Papier-Textur (Fasern und Korn aus premium.css) darüber */
.lp-kopf::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--papier-textur)}
.lp-krumen ol{display:flex;flex-wrap:wrap;align-items:center;font-size:.9rem;line-height:1.4;color:var(--lp-muted)}
.lp-krumen li{display:inline-flex;align-items:center}
.lp-krumen li + li::before{content:"";flex:none;width:6px;height:6px;margin:0 11px 0 7px;border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold);transform:rotate(45deg)}
.lp-krumen a{display:inline-block;padding-block:4px;color:var(--lp-muted);text-decoration:underline;text-decoration-color:rgba(196,154,59,.55);text-underline-offset:.22em}
.lp-krumen a:hover,.lp-krumen a:focus-visible{color:var(--navy)}
.lp-krumen span{color:var(--navy)}

.lp-kopf-raster{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,.92fr);gap:clamp(32px,5vw,76px);align-items:start;margin-top:clamp(26px,3.6vw,48px)}
.lp-kurz{margin-top:22px;max-width:62ch;font-size:clamp(1.0625rem,1.05rem + .3vw,1.2rem);line-height:1.68;color:var(--ink)}
.lp-kopf-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.lp-textlink{display:inline-block;padding-block:4px;font-family:var(--font-display);font-weight:600;color:var(--navy);border-bottom:1px solid var(--gold);transition:color var(--t-hover) var(--ease-premium)}
.lp-textlink:hover,.lp-textlink:focus-visible{color:var(--lp-gold-ink)}

/* Schriftfeld: die Preistafel. Navy, Gold-Haarlinien, Raster nur hier (Zeichenblatt als Funktion) */
.lp-schriftfeld{position:relative;margin:0;overflow:hidden;color:#E8EEF9;background:var(--navy-2);border-radius:2px;
  box-shadow:0 0 0 1px rgba(196,154,59,.28),0 30px 60px -30px rgba(2,8,18,.7)}
.lp-schriftfeld::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(196,154,59,.085) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(90deg,rgba(196,154,59,.085) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(0deg,rgba(196,154,59,.03) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,rgba(196,154,59,.03) 0 1px,transparent 1px 24px)}
.lp-schriftfeld::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--lp-korn-hell) 0 0/240px 240px;opacity:.09}
.lp h2.sf-titel{position:relative;z-index:1;margin:0;padding:15px 22px;border-bottom:1px solid rgba(196,154,59,.38);font-family:var(--font-display);font-size:1.18rem;font-weight:600;line-height:1.3;letter-spacing:0;color:#fff;font-variation-settings:"opsz" 36}
/* Zellenlinien per Innenschatten rechts/unten; 1 px Überstand schluckt die letzte rechte Linie */
.sf-raster{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:calc(100% + 1px);margin:0}
.sf-zelle{min-width:0;padding:16px 22px 18px;box-shadow:inset -1px 0 rgba(196,154,59,.24),inset 0 -1px rgba(196,154,59,.24)}
.sf-breit{grid-column:1 / -1}
.sf-zelle dt{margin-bottom:6px;font-size:.9rem;line-height:1.4;color:#C7D3E6}
.sf-zelle dd{margin:0;font-size:.97rem;line-height:1.45;color:#E8EEF9}
.sf-zelle .sf-zahl{font-family:var(--font-display);font-size:clamp(1.45rem,1.1rem + 1vw,1.95rem);font-weight:600;line-height:1.12;color:#fff;font-variant-numeric:tabular-nums lining-nums}
.sf-zelle .sf-klein{margin-top:4px;font-size:.9rem;color:#C7D3E6}
.sf-fuss{position:relative;z-index:1;margin:0;padding:13px 22px 15px;font-size:.88rem;line-height:1.5;color:#C7D3E6}
.sf-fuss a{display:inline-block;margin-left:4px;padding-block:3px;color:var(--gold-bright);text-decoration:underline;text-underline-offset:.2em}
.sf-fuss a:hover,.sf-fuss a:focus-visible{color:#fff}

/* ---------- Abschnitte (Papier) ---------- */
.lp-abschnitt + .lp-abschnitt{border-top:1px solid var(--lp-linie)}
/* Randüberschrift: die H2 steht im Rand und bleibt beim Lesen stehen */
.lp-rand{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(24px,5vw,84px);align-items:start}
.lp-rand > h2{position:sticky;top:104px}
.lp-kopfzeile{max-width:68ch;margin-bottom:clamp(24px,3vw,38px)}
.lp-kopfzeile-fuss{max-width:70ch;margin-top:clamp(20px,2.6vw,30px);font-size:1.0625rem;line-height:1.7;color:var(--lp-text)}
.lp-text{max-width:66ch}
.lp-text > :first-child{margin-top:0}
.lp-text > p{margin-top:1.05em;font-size:1.0625rem;line-height:1.72;color:var(--lp-text)}
.lp-text a,.lp-kopfzeile-fuss a{color:var(--lp-gold-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;padding-block:2px}
.lp-text a:hover,.lp-kopfzeile-fuss a:hover{color:var(--navy)}
.lp-punkte{display:flex;flex-direction:column;gap:.5em;margin-top:1em}
.lp-punkte li{position:relative;padding-left:22px;font-size:1.0625rem;line-height:1.62;color:var(--lp-text)}
.lp-punkte li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border:1.5px solid var(--gold);transform:rotate(45deg)}

/* Beispielfragen als Zitate (Karten auf Papier) */
.lp-fragen{display:flex;flex-direction:column;gap:12px;margin-block:1.2em}
.lp-fragen li{padding:14px 18px 14px 20px;background:var(--lp-karte);border:1px solid var(--lp-linie);border-left:3px solid var(--gold);border-radius:2px;box-shadow:var(--lp-sh);font-family:var(--font-display);font-size:1.08rem;line-height:1.45;color:var(--navy)}
.lp-fragen--raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin:0}
.lp-fragen--wa li{border-left:1px solid var(--lp-linie);border-radius:16px 16px 16px 4px;font-family:var(--font-body);font-size:1.0625rem;color:#1F2A3A}

/* Checkliste: was der Betrieb vorbereitet */
.lp-check{display:flex;flex-direction:column;gap:12px;margin-top:1.2em}
.lp-check li{position:relative;padding-left:30px;font-size:1.0625rem;line-height:1.6;color:var(--lp-text)}
.lp-check li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:1px;background:var(--gold);transform:rotate(45deg)}
.lp-check--karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:0}
.lp-check--karten li{padding:20px 22px 20px 52px;background:var(--lp-karte);border:1px solid var(--lp-linie);border-radius:2px;box-shadow:var(--lp-sh);font-size:1rem}
.lp-check--karten li::before{left:26px;top:29px}
.lp-check--karten li:last-child:nth-child(odd){grid-column:1 / -1}
.lp-check--karten strong{display:block;margin-bottom:4px;font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--navy)}
.lp-hinweis{margin-top:20px;max-width:66ch;font-size:1rem;line-height:1.66;color:var(--lp-text)}
.lp-links{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:22px}
.lp-links a{display:inline-block;padding-block:4px;font-family:var(--font-display);font-weight:600;color:var(--navy);border-bottom:1px solid var(--gold);text-decoration:none;transition:color var(--t-hover) var(--ease-premium)}
.lp-links a:hover,.lp-links a:focus-visible{color:var(--lp-gold-ink)}

/* Zwei Wege nebeneinander (Webdesign: neu bauen oder überarbeiten) */
.lp-wege{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.lp-weg{min-width:0;padding:20px 22px 22px;background:var(--lp-karte);border:1px solid var(--lp-linie);border-top:3px solid var(--navy);border-radius:2px;box-shadow:var(--lp-sh)}
.lp-weg + .lp-weg{border-top-color:var(--gold)}
.lp-weg .lp-punkte{margin-top:.7em}
.lp-weg .lp-punkte li{font-size:1rem}

/* ---------- Dunkles Band (Clip über .videoszene aus base.css, Korn oben drauf) ---------- */
.lp-band{background:var(--navy);color:#E8EEF9}
.lp-band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--lp-korn-hell) 0 0/240px 240px;opacity:.07}
.lp-band h2,.lp-band h3{color:#fff}
.lp-band .lp-text > p{color:#E8EEF9}
.lp-band .lp-text a{color:var(--gold-bright)}
.lp-band .lp-text a:hover{color:#fff}
.lp-band-raster{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,84px);align-items:center}
.lp-band .lp-text{max-width:60ch}
.lp-detail{min-width:0}
.lp-detail .lp-demo-knopf{margin-top:18px}

/* Icon-Zeilen im Band */
.lp-zeilen{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.lp-zeile{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:center;font-size:1.0625rem;line-height:1.5;color:#E8EEF9}
.lp-zeile-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(227,192,106,.45);color:var(--gold-bright)}
.lp-zeile-icon svg{width:18px;height:18px}
.lp-band .lp-text > .lp-satz{margin-top:22px;font-family:var(--font-display);font-size:clamp(1.15rem,1.05rem + .5vw,1.3rem);line-height:1.5;color:#fff}
.lp-marke,.lp .lp-text > p.lp-marke{margin:20px 0 0;font-size:.9rem;line-height:1.5;letter-spacing:.005em;color:#C7D3E6}
.lp .lp-text > p.lp-nachweis{margin-top:22px;font-size:.9rem;line-height:1.55;color:#C7D3E6}
.lp-band .lp-punkte{margin-top:12px}
.lp-band .lp-punkte li{color:#E8EEF9}
.lp-band .lp-punkte li::before{border-color:var(--gold-bright)}
.lp-band .lp-punkte strong{color:#fff;font-weight:400;font-family:var(--font-display)}
.lp-kurz a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:.2em}

/* ---------- Lebendes Detail: Chatverlauf (ki-chatbot) ---------- */
.lp-chat{margin:0;overflow:hidden;background:rgba(6,11,20,.82);border:1px solid rgba(196,154,59,.32);border-radius:14px;box-shadow:0 30px 70px -40px rgba(0,0,0,.7)}
.lp-chat-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.lp-chat-name{margin:0;font-size:.9rem;color:#E8EEF9}
.lp-chat-hinweis{margin:0;padding:3px 9px;font-size:.8125rem;line-height:1.4;color:var(--gold-bright);border:1px solid rgba(227,192,106,.45);border-radius:4px}
.lp-chat-verlauf{display:flex;flex-direction:column;gap:12px;min-height:200px;padding:20px 16px 22px}
.lp-blase{max-width:86%;margin:0;padding:11px 14px;border-radius:14px;font-size:.97rem;line-height:1.48}
.lp-blase--kunde{align-self:flex-end;background:#EAF0FA;color:var(--navy);border-bottom-right-radius:4px}
.lp-blase--bot{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#E8EEF9;border-bottom-left-radius:4px}
.lp-blase-zeit{display:block;margin-top:5px;font-size:.8125rem;text-align:right;color:var(--lp-muted);font-variant-numeric:tabular-nums}
.lp-tippt{align-self:flex-start;display:inline-flex;gap:5px;margin:0;padding:15px 16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:14px;border-bottom-left-radius:4px}
.lp-tippt i{width:6px;height:6px;border-radius:50%;background:#9AA8BF;animation:lpTipp 1.1s ease-in-out infinite}
.lp-tippt i:nth-child(2){animation-delay:.15s}
.lp-tippt i:nth-child(3){animation-delay:.3s}
@keyframes lpTipp{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.lp-chat figcaption{padding:12px 16px 14px;border-top:1px solid rgba(255,255,255,.08);font-size:.875rem;line-height:1.5;color:#C7D3E6}

/* ---------- Lebendes Detail: Wartezeit (whatsapp-bot) ---------- */
.lp-nachricht{margin-top:0;padding:18px 20px;background:rgba(6,11,20,.82);border:1px solid rgba(196,154,59,.32);border-radius:14px}
.lp-nachricht-kopf{margin:0 0 10px;font-size:.875rem;line-height:1.4;color:#C7D3E6}
.lp-nachricht-blase{display:inline-block;max-width:84%;margin:0;padding:10px 14px;background:#EAF0FA;border-radius:14px 14px 4px 14px;font-size:1rem;line-height:1.45;color:var(--navy)}
.lp-warte{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);font-size:1rem;line-height:1.6;color:#E8EEF9}
.lp-warte strong{color:var(--gold-bright);font-family:var(--font-display);font-size:1.22em;font-weight:600;font-variant-numeric:tabular-nums}
.lp-warte-annahme{margin-top:8px;font-size:.875rem;line-height:1.5;color:#C7D3E6}

/* ---------- Lebendes Detail: Freizeichen (telefon-ki) ---------- */
.lp-freiz{display:flex;gap:16px;align-items:flex-start;max-width:640px;padding:16px 18px;background:rgba(6,11,20,.82);border:1px solid rgba(196,154,59,.32);border-radius:12px}
.lp-freiz-icon{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(227,192,106,.5);color:var(--gold-bright)}
.lp-freiz-icon svg{width:20px;height:20px}
.lp-freiz-icon.klingelt{animation:lpKling 1s ease-out}
@keyframes lpKling{0%{box-shadow:0 0 0 0 rgba(227,192,106,.5)}100%{box-shadow:0 0 0 14px rgba(227,192,106,0)}}
.lp-freiz p{margin:0;font-size:1rem;line-height:1.55;color:#E8EEF9}
.lp-freiz p + p{margin-top:6px}
.lp-freiz strong{color:var(--gold-bright);font-family:var(--font-display);font-size:1.22em;font-weight:600;font-variant-numeric:tabular-nums}
.lp-freiz .lp-freiz-quelle{font-size:.8125rem;color:#9AA8BF}

/* ---------- Lebendes Detail: Fenster im Kleinen + Live-Prüfung (webdesign-wiesbaden) ---------- */
.lp-fenster{margin:0;padding:clamp(18px,2.4vw,26px);background:rgba(6,11,20,.82);border:1px solid rgba(196,154,59,.32);border-radius:14px}
.lp-fenster-buehne{display:flex;align-items:center;justify-content:center;min-height:180px}
.lp-fenster-fest{display:flex;align-items:flex-end;gap:22px}
.lp-rahmen{position:relative;display:flex;gap:6px;padding:17px 8px 8px;background:rgba(255,255,255,.03);border:1.5px solid rgba(234,240,250,.55);border-radius:8px}
.lp-rahmen::before{content:"";position:absolute;top:6px;left:8px;right:8px;height:4px;border-radius:2px;background:rgba(234,240,250,.22)}
.lp-rahmen span{flex:1;min-width:0;min-height:8px;border-radius:3px;background:rgba(227,192,106,.42)}
.lp-rahmen span:first-child{background:rgba(227,192,106,.72)}
.lp-rahmen.ist-schmal{flex-direction:column}
.lp-rahmen--handy{width:62px;height:118px}
.lp-rahmen--rechner{width:176px;height:112px}
.lp-fenster figcaption{margin-top:16px}
.lp-fenster figcaption p{margin:0;font-size:.97rem;line-height:1.55;color:#E8EEF9}
.lp-fenster figcaption p + p{margin-top:6px}
.lp-fenster figcaption .lp-fenster-masse{font-family:var(--font-display);font-size:.95rem;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.lp .lp-text > p.lp-pruefung{margin-top:20px;padding:12px 16px;background:rgba(6,11,20,.82);border-left:3px solid var(--gold-bright);border-radius:0 8px 8px 0;font-size:.97rem;line-height:1.55;color:#E8EEF9}
.lp-pruefung strong{color:var(--gold-bright);font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums}

/* ============================================================
   GRAFIK 1: Karteikasten „Woher die Antwort kommt“ (ki-chatbot)
   Die vier Karten sind die Textfassung (immer lesbar). Antwort-Panel
   und Gold-Faden baut leistung-motion.js, Reiter sind Schaltflächen.
   ============================================================ */
.lp-def{font-family:var(--font-display);font-size:clamp(1.12rem,1.05rem + .4vw,1.3rem) !important;line-height:1.55 !important;color:var(--navy) !important;font-variation-settings:"opsz" 24}
.lp-kasten{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(26px,3vw,40px)}
.lp-karten{display:flex;flex-direction:column;gap:46px;padding-top:30px;margin:0;counter-reset:karte}
.lp-karte{position:relative;padding:22px 24px 20px;background:var(--lp-karte);border:1px solid var(--lp-linie);border-radius:2px;box-shadow:var(--lp-sh);font-size:1.0625rem;line-height:1.55;color:var(--lp-text);transition:transform .45s var(--ease-premium),box-shadow .45s var(--ease-premium),border-color .3s}
.lp-karte::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--lp-korn) 0 0/240px 240px;opacity:.5}
.lp-karte:nth-child(odd){transform:rotate(-.35deg)}
.lp-karte:nth-child(even){transform:rotate(.3deg)}
.lp-karte.ist-aktiv{transform:translateX(12px);border-color:rgba(196,154,59,.7);box-shadow:var(--lp-sh-hover)}
.lp-karte.ist-aktiv::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--gold)}
.lp-reiter{position:absolute;left:calc(16px + var(--i,0) * 58px);white-space:nowrap;top:-31px;height:31px;padding:0 16px;display:flex;align-items:center;background:var(--lp-karte);border:1px solid var(--lp-linie);border-bottom:0;border-radius:2px 2px 0 0;font-family:var(--font-display);font-size:.97rem;font-weight:600;line-height:1;color:var(--navy);cursor:pointer;transition:background .3s,border-color .3s}
.lp-reiter:hover{background:#F6EBCF}
.lp-karte.ist-aktiv .lp-reiter{background:#F3E4BC;border-color:rgba(196,154,59,.7)}
.lp-karte-text{display:block}
.lp-kasten-buehne{position:relative;min-height:300px}
.lp-kasten-chat{position:sticky;top:110px;overflow:hidden;background:var(--navy-2);border-radius:14px;box-shadow:0 0 0 1px rgba(196,154,59,.28),0 30px 60px -30px rgba(2,8,18,.7)}
.lp-kasten-chat::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--lp-korn-hell) 0 0/240px 240px;opacity:.08}
.lp-kasten-kopf{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.lp-kasten-kopf i{width:9px;height:9px;border-radius:50%;background:#9AA8BF;opacity:.55}
.lp-kasten-kopf i:first-child{background:var(--gold-bright);opacity:1}
.lp-kasten-verlauf{position:relative;display:flex;flex-direction:column;gap:12px;min-height:236px;padding:20px 16px 18px}
.lp-kasten-fuss{position:relative;padding:11px 16px 14px;border-top:1px solid rgba(255,255,255,.08);font-size:.875rem;line-height:1.5;color:#C7D3E6}
.lp-faden{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.lp-faden path{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round}
.lp-faden circle{fill:var(--gold-bright)}

/* ============================================================
   GRAFIK 2/3: Zeitstrahl (whatsapp-bot) und Wellenform (telefon-ki)
   Beide im dunklen Band, volle Breite unter den zwei Spalten.
   ============================================================ */
.lp-zeitstrahl,.lp-welle{grid-column:1 / -1;margin:clamp(8px,1.4vw,18px) 0 0;padding:clamp(16px,2.4vw,26px);background:rgba(6,11,20,.82);border:1px solid rgba(196,154,59,.28);border-radius:4px}
.lp-zeitstrahl svg{display:block;width:100%;height:auto;overflow:visible}
.zs-text{font-family:var(--font-body);font-size:14px;fill:#E8EEF9}
.zs-klein{font-family:var(--font-body);font-size:13px;fill:#C7D3E6}
.zs-gold{font-family:var(--font-body);font-size:13px;fill:#E3C06A}
.zs-zahl{font-family:var(--font-display);font-size:15px;fill:#E3C06A;font-variant-numeric:tabular-nums}
.zs-balken{stroke:#9AA8BF;stroke-width:2;stroke-dasharray:6 5;stroke-linecap:butt}
.zs-achse{stroke:rgba(154,168,191,.35);stroke-width:1}
.zs-puls{transform-box:fill-box;transform-origin:center;animation:zsPuls 2.4s ease-in-out infinite}
@keyframes zsPuls{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.lp-welle canvas{display:block;width:100%;height:180px}
.lp-welle-legende{display:flex;flex-wrap:wrap;gap:6px 22px;margin:12px 0 0;font-size:.875rem;line-height:1.4;color:#C7D3E6}
.lp-welle-legende span{display:inline-flex;align-items:center;gap:8px}
.lp-welle-legende i{width:10px;height:10px;border-radius:50%;background:#E8EEF9}
.lp-welle-legende .ki i{background:var(--gold-bright)}
.lp-welle-legende .fz i{background:#9AA8BF}

/* ============================================================
   GRAFIK 4: Vorher/Nachher-Rahmen (webdesign-wiesbaden)
   motion.js und site-widgets.js bedienen #vergleich und #vergleichRange
   über die Variable --schnitt (Ziehen, Tastatur, Attract-Schwenk).
   ============================================================ */
.vn{margin:0}
.vn-flaeche{position:relative;--schnitt:50%;aspect-ratio:16 / 9;overflow:hidden;background:var(--lp-papier-2);border:1.5px solid rgba(15,35,66,.6);border-radius:6px;box-shadow:var(--lp-sh-hover);touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.vn-ebene{position:absolute;inset:0;display:block;width:100%;height:100%}
.vn-nachher{clip-path:inset(0 0 0 var(--schnitt))}
.vn-schnitt{position:absolute;top:0;bottom:0;left:var(--schnitt);width:2px;margin-left:-1px;background:var(--gold-bright);pointer-events:none;box-shadow:0 0 0 1px rgba(15,35,66,.25)}
.vn-griff{position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;display:grid;place-items:center;background:var(--navy);border:2px solid var(--gold-bright);border-radius:50%;color:var(--gold-bright)}
.vn-griff svg{width:20px;height:20px}
.vn-chip{position:absolute;top:42px;padding:4px 11px;background:var(--gold-bright);color:var(--navy);font-size:.8125rem;line-height:1.3;border-radius:2px;pointer-events:none}
.vn-chip--v{left:14px;background:#C7D3E6}
.vn-chip--n{right:14px}
.vn-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.vn-flaeche:focus-within{outline:3px solid var(--fokus);outline-offset:3px}
.vn-linie{stroke-dasharray:1 1;stroke-dashoffset:0}
.vn figcaption{margin-top:12px;font-size:.9rem;line-height:1.5;color:var(--lp-text)}

/* ---------- Webdesign: Neu oder Redesign (Text + Vorher/Nachher) ---------- */
.lp-neu{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);grid-template-areas:"kopf fig" "wege fig";gap:clamp(20px,3vw,32px) clamp(28px,5vw,64px);align-items:start}
.lp-neu .lp-kopfzeile{grid-area:kopf;margin:0}
.lp-neu .lp-wege{grid-area:wege}
.lp-neu .vn{grid-area:fig;position:sticky;top:110px}

/* ---------- FAQ (Muster aus seo-geo.css, hier auf Papier) ---------- */
.lp .faq-sektion{background:
  linear-gradient(180deg,rgba(196,154,59,.2) 0,rgba(196,154,59,0) 2px),
  radial-gradient(110% 80% at 92% -10%,rgba(255,255,255,.5),rgba(255,255,255,0) 58%),
  linear-gradient(180deg,#F0EADC 0%,#E9E2D1 100%);border-top:0}
.lp .faq-sektion::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--papier-textur)}
.lp .faq-sektion{position:relative;isolation:isolate}
.lp .faq-item{background:transparent;border-radius:0;border-color:rgba(196,154,59,.4);box-shadow:none}
.lp .faq-item[open]{background:linear-gradient(90deg,rgba(196,154,59,.09),rgba(196,154,59,0) 75%);border-color:rgba(196,154,59,.7)}
.lp .faq-item summary{font-weight:600}
.lp .faq-answer{color:var(--lp-muted)}
.lp .faq-kopf h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem)}

/* ---------- Abschluss-CTA (Choreografie macht motion.js über .cta-linie) ---------- */
.lp .cta-band{position:relative;isolation:isolate;background:radial-gradient(720px 340px at 50% -12%,rgba(196,154,59,.16),transparent 62%),var(--navy);color:#fff;text-align:center;padding-block:clamp(56px,8vw,100px)}
.lp .cta-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--lp-korn-hell) 0 0/240px 240px;opacity:.07}
.lp .cta-linie{display:block;max-width:560px;height:1px;margin:0 auto 34px;background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold-bright) 50%,var(--gold) 82%,transparent)}
.lp .cta-band h2{max-width:22ch;margin:0 auto 16px;color:#fff}
.lp .cta-band p{max-width:58ch;margin:0 auto 30px;font-size:clamp(1.0625rem,1.05rem + .25vw,1.15rem);line-height:1.65;color:#C7D3E6}
.lp .cta-band ::selection{background:rgba(230,199,126,.3);color:#fff}
.sf-klein,.lp .cta-band h2,.lp .cta-band p{-webkit-hyphens:manual;hyphens:manual}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .lp-kopf-raster,.lp-rand,.lp-band-raster,.lp-kasten{grid-template-columns:minmax(0,1fr)}
  .lp-rand > h2{position:static}
  .lp-schriftfeld{max-width:560px}
  .lp-band .lp-text{max-width:66ch}
  .lp-kasten-chat{position:static}
  .lp-neu{grid-template-columns:minmax(0,1fr);grid-template-areas:"kopf" "fig" "wege"}
  .lp-neu .vn{position:static}
  .lp-faden{display:none}
}
@media (max-width:720px){
  .lp-check--karten{grid-template-columns:minmax(0,1fr)}
  .lp-check--karten li:last-child:nth-child(odd){grid-column:auto}
  .lp-fragen--raster{grid-template-columns:minmax(0,1fr)}
  .lp-karte.ist-aktiv{transform:none}
  .vn-flaeche{aspect-ratio:4 / 3}
}
@media (max-width:560px){
  .lp h1{font-size:clamp(1.8rem,8.2vw,2.15rem)}
  .lp-kopf-cta{flex-direction:column;align-items:stretch}
  .lp-kopf-cta .btn{width:100%}
  .lp-kopf-cta .lp-textlink{align-self:flex-start}
  .sf-zelle{padding:13px 16px 15px}
  .lp h2.sf-titel,.sf-fuss{padding-inline:16px}
  .lp-check--karten li{padding:18px 18px 18px 48px}
  .lp-check--karten li::before{left:22px;top:27px}
  .lp-rahmen--rechner{width:150px;height:96px}
  .lp-reiter{left:calc(12px + var(--i,0) * 40px)}
  /* Der Chat-Knopf (62 px, fest unten rechts) soll keine Zahl verdecken: eine Spalte, rechts eine freie Spur */
  .sf-raster{grid-template-columns:minmax(0,1fr)}
  .sf-zelle,.lp .sf-fuss{padding-right:76px}
  .lp-welle canvas{height:140px}
}
@media (prefers-reduced-motion:reduce){
  .lp-tippt i,.zs-puls{animation:none}
  .lp-karte{transition:none}
}

/* ===== v26.2: Variation zwischen den Fachseiten (gleiches System, anderes Raster) ===== */
/* Nur am Rechner (ab 981 px, passend zur Einspalten-Regel bei max-width:980px; Fehler #126/#350: zwei Klassen schlagen sonst die Handy-Regel) */
@media (min-width:981px){
  .lp--telefon-ki .lp-kopf-raster,.lp--email-bot .lp-kopf-raster{grid-template-columns:minmax(0,.92fr) minmax(0,1.38fr)}
  .lp--telefon-ki .lp-kopf-text,.lp--email-bot .lp-kopf-text{order:2}
  .lp--webdesign .lp-band-raster{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .lp--webdesign .lp-band-raster .lp-text{order:2}
}

/* ===== v26.2: E-Mail-Bot – Schaubild Posteingang → Freigaben → Antwort/Weiterleitung ===== */
.lp-triage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.lp-triage .lp-kopfzeile{margin-bottom:0;max-width:none}
.lp-triage-schritte{margin:22px 0 0;padding:0;list-style:none;counter-reset:triage;display:grid;gap:14px}
.lp-triage-schritte li{position:relative;padding-left:40px;font-size:1.0625rem;line-height:1.6;color:var(--lp-text)}
.lp-triage-schritte li::before{counter-increment:triage;content:counter(triage);position:absolute;left:0;top:.05em;width:26px;height:26px;border-radius:50%;border:1px solid var(--gold);color:var(--lp-gold-ink);font-family:var(--font-display);font-size:.95rem;display:grid;place-items:center}
.lp-triage-schritte strong{color:var(--navy)}
.lp-triage-grafik{margin:0;padding:clamp(16px,2.4vw,28px);background:rgba(255,253,249,.72);border:1px solid rgba(196,154,59,.32);border-radius:3px;box-shadow:0 18px 40px -28px rgba(15,35,66,.35)}
.lp-triage-grafik svg{display:block;width:100%;height:auto;font-family:var(--font-body)}
.lp-triage-grafik figcaption{margin-top:12px;font-size:.88rem;color:var(--lp-muted)}
/* Briefe: ohne Bewegung sitzen sie an Eingang, Prüfung und Ausgang */
.t-mail--1{transform:translate(62px,120px)}
.t-mail--2{transform:translate(260px,120px);opacity:0}
.t-mail--3{transform:translate(398px,64px)}
@media (prefers-reduced-motion:no-preference){
  html.premium-ok .t-mail{animation:t-lauf 9s cubic-bezier(.19,1,.22,1) infinite both}
  html.premium-ok .t-mail--1{animation-delay:0s}
  html.premium-ok .t-mail--2{animation-delay:3s;opacity:1}
  html.premium-ok .t-mail--3{animation-delay:6s;animation-name:t-lauf-weiter}
  @keyframes t-lauf{0%{transform:translate(62px,120px);opacity:0}8%{opacity:1}34%{transform:translate(196px,120px);opacity:1}40%{transform:translate(226px,120px);opacity:0}54%{transform:translate(336px,64px);opacity:0}60%{transform:translate(356px,64px);opacity:1}80%{transform:translate(398px,64px);opacity:1}92%{opacity:0}100%{transform:translate(398px,64px);opacity:0}}
  @keyframes t-lauf-weiter{0%{transform:translate(62px,120px);opacity:0}8%{opacity:1}34%{transform:translate(196px,120px);opacity:1}40%{transform:translate(226px,120px);opacity:0}54%{transform:translate(336px,176px);opacity:0}60%{transform:translate(356px,176px);opacity:1}80%{transform:translate(398px,176px);opacity:1}92%{opacity:0}100%{transform:translate(398px,176px);opacity:0}}
}
@media (max-width:900px){
  .lp-triage{grid-template-columns:minmax(0,1fr)}
}

/* ===== v26.4: E-Mail-Bot – anklickbares Schaubild (lebendes Detail) ===== */
.lp-triage-probe-kopf{margin:22px 0 10px;font-family:var(--font-display);font-weight:600;color:var(--navy)}
.lp-triage-probe{display:flex;flex-wrap:wrap;gap:8px}
.probe-btn{appearance:none;border:1px solid rgba(196,154,59,.55);background:rgba(255,253,249,.82);color:var(--navy);border-radius:999px;padding:8px 14px;font:inherit;font-size:.95rem;line-height:1.3;cursor:pointer;transition:border-color .25s var(--ease-premium),background .25s var(--ease-premium),color .25s var(--ease-premium)}
.probe-btn:hover,.probe-btn:focus-visible{border-color:var(--gold);background:#fff}
.probe-btn[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.lp-triage-ergebnis{min-height:1.7em;margin:12px 0 0;font-size:1rem;line-height:1.55;color:var(--lp-text)}
.lp-triage-ergebnis strong{color:var(--navy)}
.t-probe{opacity:0;transform:translate(62px,120px)}
.t-aus rect{transition:stroke .3s var(--ease-premium),stroke-width .3s var(--ease-premium)}
svg.probe-ok .t-aus--ok rect,svg.probe-weiter .t-aus--weiter rect{stroke:#C49A3B;stroke-opacity:1;stroke-width:2}
@media (prefers-reduced-motion:no-preference){
  svg.probe-aktiv .t-mails .t-mail{animation:none;opacity:0}
  svg.probe-ok .t-probe{animation:t-probe-ok 2.4s cubic-bezier(.19,1,.22,1) forwards}
  svg.probe-weiter .t-probe{animation:t-probe-weiter 2.4s cubic-bezier(.19,1,.22,1) forwards}
  @keyframes t-probe-ok{0%{transform:translate(62px,120px);opacity:0}10%{opacity:1}40%{transform:translate(196px,120px);opacity:1}48%{transform:translate(226px,120px);opacity:0}62%{transform:translate(336px,64px);opacity:0}70%{transform:translate(356px,64px);opacity:1}100%{transform:translate(398px,64px);opacity:1}}
  @keyframes t-probe-weiter{0%{transform:translate(62px,120px);opacity:0}10%{opacity:1}40%{transform:translate(196px,120px);opacity:1}48%{transform:translate(226px,120px);opacity:0}62%{transform:translate(336px,176px);opacity:0}70%{transform:translate(356px,176px);opacity:1}100%{transform:translate(398px,176px);opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  svg.probe-ok .t-probe{opacity:1;transform:translate(398px,64px)}
  svg.probe-weiter .t-probe{opacity:1;transform:translate(398px,176px)}
}
/* Handy: Schaubild in Lesegroesse, seitlich scrollbar statt winzig */
@media (max-width:560px){
  .lp-triage-grafik{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(196,154,59,.6) transparent}
  .lp-triage-grafik svg{min-width:520px}
  .lp-triage-grafik figcaption{position:sticky;left:0;margin-top:8px}
  .lp-triage-grafik figcaption::after{content:" Nach rechts wischen."}
  .lp-triage-grafik::after{content:"";position:sticky;left:calc(100% - 44px);top:0;display:block;width:44px;height:0;pointer-events:none}
}
/* v26.5: ohne JS tun die Probe-Knoepfe nichts, also weg damit (Schaubild bleibt) */
.no-js .lp-triage-probe-kopf,.no-js .lp-triage-probe,.no-js .lp-triage-ergebnis{display:none}

/* ===== v27: Vorher/Nachher ===== */
/* Schieber mit zwei HTML/CSS-Attrappen in der Sektion „Neu bauen oder Redesign?“ (webdesign-wiesbaden).
   Nachher liegt links vom Griff und wird beim Fahren nach rechts aufgedeckt, Vorher rechts davon.
   Maße in cqw (Breite von .vs): die Attrappen skalieren mit. Die Attrappentexte stehen als CSS-Inhalt (content:),
   nicht im DOM: Zierde statt Seiteninhalt, sie zählen nicht im Wortbudget. Ohne JS (html.no-js): beide untereinander, kein Griff.
   Steuerung: assets/vorher-nachher.js. Die alten .vn-*-Regeln oben (Grafik 4) greifen hier nicht mehr. */
.vs{--schnitt:55%;--vs-ar:16 / 10;container-type:inline-size;display:grid;gap:14px}
.vs-buehne{display:grid;gap:14px}
.vs-ebene{position:relative;display:flex;flex-direction:column;aspect-ratio:var(--vs-ar);overflow:hidden;border:1.5px solid rgba(15,35,66,.6);border-radius:6px;box-shadow:var(--lp-sh-hover);background:#fff}
.vs-schnitt{display:none}
.js .vs{display:block;position:relative;overflow:hidden;border:1.5px solid rgba(15,35,66,.6);border-radius:6px;box-shadow:var(--lp-sh-hover)}
.js .vs-buehne{display:block;position:relative;aspect-ratio:var(--vs-ar);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.js .vs-ebene{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
.js .vs-nachher{clip-path:inset(0 calc(100% - var(--schnitt)) 0 0)}
.js .vs-schnitt{display:block;position:absolute;top:0;bottom:0;left:var(--schnitt);width:0;z-index:3;pointer-events:none}
.vs-schnitt::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--gold-bright);box-shadow:0 0 0 1px rgba(15,35,66,.25)}
.vs-schnitt::after{content:"";position:absolute;top:0;bottom:0;left:-26px;width:52px;pointer-events:auto;cursor:ew-resize;touch-action:none}
.vs-griff{position:absolute;z-index:1;top:50%;left:0;width:40px;height:40px;margin:-20px 0 0 -20px;display:grid;place-items:center;background:var(--navy);border:2px solid var(--gold-bright);border-radius:50%;color:var(--gold-bright);box-shadow:0 4px 14px rgba(8,22,40,.45);pointer-events:auto;cursor:ew-resize;touch-action:none}
.vs-griff svg{width:20px;height:20px}
.vs-griff:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:50%}
.vs-chip{display:inline-block;padding:3px 10px;font-family:var(--font-body);font-size:.75rem;line-height:1.3;color:var(--navy);background:var(--gold-bright);border-radius:2px}
.vs-chrome{flex:none;display:flex;align-items:center;gap:max(4px,.9cqw);height:4.6cqw;min-height:15px;padding:0 1.8cqw;background:#E6E2D8;border-bottom:1px solid #CFC9BB}
.vs-chrome i{width:max(4px,1cqw);height:max(4px,1cqw);border-radius:50%;background:#B8B1A0}
.vs-chrome b{flex:0 1 36cqw;height:2.3cqw;min-height:8px;margin-left:1.4cqw;border-radius:1.2cqw;background:#F7F4EC}
.vs-n-fuss,.vs-v-fuss{flex:none;display:flex;align-items:center;min-height:max(6.6cqw,2.1rem);padding:0 2.4cqw}

/* Nachher: Navy-Kopf mit Wortmarke, Serifen-Überschrift, Goldakzent, Bildfläche als Verlauf, ein Knopf, Chat-Blase */
.vs-nachher{background:#FAF8F3}
.vs-n-seite{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:radial-gradient(70cqw 40cqw at 100% 0,rgba(196,154,59,.1),transparent 60%),linear-gradient(180deg,#FAF8F3,#F2ECDF)}
.vs-n-kopf{flex:none;display:flex;align-items:center;gap:6cqw;height:7.8cqw;padding:0 4.4cqw;background:#0F2342;box-shadow:0 max(1px,.25cqw) 0 var(--gold)}
.vs-n-logo{display:flex;align-items:center;gap:1cqw}
.vs-n-logo em{width:2.1cqw;height:2.1cqw;border-radius:.45cqw;background:linear-gradient(135deg,var(--gold-bright),var(--gold) 70%)}
.vs-n-logo span::before{content:"Ihr Betrieb";font-family:var(--font-display);font-weight:600;font-size:2.5cqw;line-height:1;letter-spacing:.01em;color:#F4EFE3;white-space:nowrap;font-variation-settings:"opsz" 72}
.vs-n-nav{display:flex;gap:2.8cqw}
.vs-n-nav i{font-style:normal;font-family:var(--font-body);font-size:1.5cqw;line-height:1;color:#C7D3E6;white-space:nowrap;padding-bottom:.5cqw;border-bottom:max(1px,.2cqw) solid transparent}
.vs-n-nav i:first-child{color:#fff;border-bottom-color:var(--gold)}
.vs-n-nav i:nth-child(1)::before{content:"Leistungen"}
.vs-n-nav i:nth-child(2)::before{content:"Referenzen"}
.vs-n-nav i:nth-child(3)::before{content:"Kontakt"}
.vs-n-hero{position:relative;flex:1;min-height:0;display:flex;align-items:flex-start;padding:3.4cqw 4.4cqw 0;overflow:hidden;background:linear-gradient(180deg,#1B3862 0%,#2A4C7B 62%,#456A8F 100%)}
.vs-n-text{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:1.4cqw}
.vs-n-strich{width:3.6cqw;height:max(2px,.34cqw);background:var(--gold)}
.vs-n-titel{font-family:var(--font-display);font-weight:560;font-size:5.2cqw;line-height:1.06;letter-spacing:-.01em;color:#FFFDF9;font-variation-settings:"opsz" 144,"SOFT" 0}
.vs-n-titel::before{content:"Einer ist";display:block}
.vs-n-titel::after{content:"zuständig.";display:block;color:var(--gold-bright)}
.vs-n-zeilen{display:grid;gap:.9cqw;width:100%}
.vs-n-zeilen i{display:block;height:max(3px,.8cqw);border-radius:1cqw;background:rgba(199,211,230,.55)}
.vs-n-zeilen i:nth-child(1){width:88%}
.vs-n-zeilen i:nth-child(2){width:62%}
.vs-n-knopf{display:inline-block;margin-top:.8cqw;padding:1.1cqw 2.3cqw;border-radius:.45cqw;background:linear-gradient(180deg,var(--gold-bright),var(--gold));box-shadow:0 .7cqw 1.4cqw -.6cqw rgba(15,35,66,.45);font-family:var(--font-display);font-weight:600;font-size:1.75cqw;line-height:1;color:#0F2342;white-space:nowrap}
.vs-n-knopf::before{content:"Termin anfragen"}
.vs-n-bild{position:absolute;inset:0;background:radial-gradient(40% 62% at 44% 100%,rgba(244,214,140,.85),rgba(227,192,106,.24) 55%,rgba(227,192,106,0) 100%)}
.vs-n-bild::before,.vs-n-bild::after{content:"";position:absolute;left:0;right:0;bottom:0}
.vs-n-bild::before{height:46%;background:linear-gradient(180deg,#16335C,#0A1A33);clip-path:polygon(0 52%,16% 36%,34% 50%,56% 22%,78% 44%,100% 30%,100% 100%,0 100%)}
.vs-n-bild::after{height:30%;background:#081628;clip-path:polygon(0 60%,22% 40%,46% 58%,70% 34%,100% 56%,100% 100%,0 100%)}
.vs-n-karten{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2cqw;padding:3cqw 4.4cqw 0}
.vs-n-karten > span{display:flex;flex-direction:column;gap:.9cqw;height:9.6cqw;padding:1.5cqw 1.7cqw;background:#FFFDF9;border:1px solid var(--lp-linie);border-top:max(2px,.3cqw) solid var(--gold);border-radius:.4cqw;box-shadow:0 .5cqw 1.2cqw -.8cqw rgba(15,35,66,.25)}
.vs-n-karten i{display:block;height:max(3px,.75cqw);border-radius:1cqw;background:#C3CAD6}
.vs-n-karten i:first-child{height:max(4px,1.15cqw);width:52%;background:#0F2342}
.vs-n-karten i:nth-child(3){width:70%}
.vs-n-chat{position:absolute;right:2.4cqw;bottom:1.2cqw;display:grid;place-items:center;width:max(26px,5.6cqw);height:max(26px,5.6cqw);border-radius:50%;background:linear-gradient(160deg,var(--gold-bright),var(--gold));color:#0F2342;box-shadow:0 .8cqw 1.8cqw -.6cqw rgba(15,35,66,.55)}
.vs-n-chat svg{width:52%;height:52%}
.vs-n-sprech{position:absolute;right:3.2cqw;bottom:max(38px,7.8cqw);display:flex;align-items:center;gap:.5cqw;padding:1.1cqw 1.5cqw;background:#fff;border:1px solid var(--lp-linie);border-radius:.9cqw .9cqw .2cqw .9cqw;box-shadow:0 .6cqw 1.4cqw -.8cqw rgba(15,35,66,.4)}
.vs-n-sprech i{width:max(3px,.6cqw);height:max(3px,.6cqw);border-radius:50%;background:var(--gold)}

/* Vorher: Standardschrift, grau, gedrängt, Banner und Randwerbung; erkennbar schwächer, nicht albern */
.vs-vorher{background:#C9D0DB}
.vs-v-seite{flex:1;min-height:0;display:flex;flex-direction:column;background:#C9D0DB;font-family:"Times New Roman",Times,serif}
.vs-v-kopf{flex:none;display:flex;align-items:center;justify-content:space-between;height:7.4cqw;padding:0 2.2cqw;background:#A9B6CC;border-bottom:max(1px,.25cqw) solid #6F7F9C}
.vs-v-logo::before{content:"Ihr Betrieb";font-weight:700;font-size:2.9cqw;line-height:1;color:#24304A}
.vs-v-nav{display:flex}
.vs-v-nav i{font-style:normal;font-size:1.55cqw;line-height:1;color:#23408F;text-decoration:underline;padding:0 1.3cqw;border-left:1px solid #7F8FAD}
.vs-v-nav i:first-child{border-left:0}
.vs-v-nav i:nth-child(1)::before{content:"Start"}
.vs-v-nav i:nth-child(2)::before{content:"Leistungen"}
.vs-v-nav i:nth-child(3)::before{content:"Kontakt"}
.vs-v-werbung{flex:none;display:flex;justify-content:flex-end;padding:1.2cqw 2.2cqw;background:#BCC5D3}
.vs-v-banner{display:grid;place-items:center;width:58cqw;height:5.4cqw;border:max(1px,.2cqw) dashed #8A5A12;background:repeating-linear-gradient(135deg,#F2D06A 0 1.4cqw,#E9B947 1.4cqw 2.8cqw)}
.vs-v-banner::before{content:"Aktion!";padding:.2cqw 1cqw;background:#F8E9AE;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:2.1cqw;line-height:1.2;color:#A02A1E}
.vs-v-inhalt{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 17cqw;gap:1.6cqw;padding:1.6cqw 2.2cqw 0;overflow:hidden}
.vs-v-text{display:flex;flex-direction:column;gap:1.1cqw;min-width:0}
.vs-v-titel::before{content:"Willkommen";font-weight:700;font-size:3cqw;line-height:1;color:#2B3650}
.vs-v-zeilen{display:block;height:7.6cqw;background:repeating-linear-gradient(180deg,#7C8AA3 0 .5cqw,transparent .5cqw 1.1cqw)}
.vs-v-zeilen--kurz{height:4.4cqw;width:70%}
.vs-v-bilder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1cqw}
.vs-v-bilder i{display:block;height:7.4cqw;border:1px solid #7C8AA3;background:linear-gradient(to top right,transparent calc(50% - .5px),#7C8AA3 50%,transparent calc(50% + .5px)),linear-gradient(to bottom right,transparent calc(50% - .5px),#7C8AA3 50%,transparent calc(50% + .5px)),#B6C0D0}
.vs-v-rand{display:flex;flex-direction:column;gap:1.2cqw}
.vs-v-hochhaus{display:block;height:20cqw;border:max(1px,.2cqw) solid #8A93A6;background:repeating-linear-gradient(45deg,#D8DDE6 0 1.2cqw,#C3CBD8 1.2cqw 2.4cqw)}
.vs-v-kasten{display:block;height:7cqw;border:1px solid #7C8AA3;background:#B3BDCD}
.vs-v-fuss{justify-content:flex-end;background:#A9B6CC;border-top:1px solid #6F7F9C}
.vs-v-fuss .vs-chip{background:#DCE3EE}

/* Rechner: Bildfläche etwas breiter; nur ab 981 px, damit die Einspalten-Regel bei max-width:980px nicht übertönt wird (Fehler #126/#350) */
@media (min-width:981px){
  .lp--webdesign .lp-neu{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .no-js .lp--webdesign .lp-neu{grid-template-rows:auto 1fr}
}
.no-js .lp-neu .vn{position:static}
@media (max-width:720px){
  .vs{--vs-ar:4 / 3.3}
  .vs-n-kopf{gap:4cqw;height:9cqw}
  .vs-n-logo span::before{font-size:3.3cqw}
  .vs-n-logo em{width:2.8cqw;height:2.8cqw}
  .vs-n-nav{gap:2.4cqw}
  .vs-n-nav i{font-size:2cqw}
  .vs-n-titel{font-size:6.2cqw}
  .vs-n-knopf{font-size:2.3cqw;padding:1.5cqw 3cqw}
  .vs-v-logo::before{font-size:3.8cqw}
  .vs-v-nav i{font-size:2.1cqw}
  .vs-v-banner::before{font-size:2.8cqw}
  .vs-v-titel::before{font-size:4cqw}
}