/* Landingpages /finanzberater und /privatkunden: Bausteine zusätzlich zu start.css (Farben, Kopf, Knöpfe, Fenster) */

/* Held mit Produktbild */
.lp-held { padding-bottom: 0; }
.lp-held .held-innen { grid-template-columns: minmax(0, 1fr); }
.lp-held h1 { font-size: clamp(34px, 5vw, 58px); max-width: 900px; }
.lp-held-zwei { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }
.lp-knopf-info { display: block; font-size: 13px; font-weight: 500; opacity: 0.85; }
.lp-hinweis-hell { margin-top: 18px; font-size: 14px; color: var(--hell-text); }
.lp-hinweis-hell a { color: #fff; font-weight: 600; }

/* Markierungen auf Bildschirmfotos: Ziffern im Bild, Legende daneben oder darunter */
.lp-markiert { position: relative; }
.lp-marke { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--gold); color: var(--navy); font: 800 14px/28px Inter, sans-serif; text-align: center; box-shadow: 0 0 0 4px rgba(242, 193, 78, 0.35), 0 4px 12px rgba(15, 42, 68, 0.35); }
.lp-legende { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 24px; font-size: 15px; color: var(--ink); }
.lp-legende li { display: flex; gap: 10px; align-items: flex-start; }
.lp-legende b { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--navy); font-size: 13px; line-height: 24px; text-align: center; }
/* Positionen in Prozent der Bildfläche (berater-uebersicht, 1440 × 731), jeweils in Leerraum neben dem Element */
.m-b1 { left: 16.7%; top: 17%; }
.m-b2 { left: 19.6%; top: 21.9%; }
.m-b3 { left: 36.5%; top: 50.9%; }
.m-b4 { left: 56%; top: 50.9%; }
.m-b5 { left: 90.3%; top: 82.6%; }
.m-b6 { left: 9.4%; top: 27.9%; }

/* Bildumschaltung Desktop/Smartphone ohne doppeltes Laden: <picture> mit media; Rahmen passt sich an */
.lp-handy { max-width: 360px; margin: 0 auto; border-radius: 28px; border: 8px solid #0a1f33; overflow: hidden; box-shadow: var(--schatten); background: #fff; }

/* Vorher / Nachher */
.lp-hook { font-size: clamp(22px, 2.8vw, 32px); font-weight: 800; color: var(--navy); line-height: 1.25; letter-spacing: -0.02em; max-width: 900px; }
.lp-hook span { color: var(--teal); }
.lp-vergleich { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px; margin-top: 40px; align-items: stretch; }
.lp-vorher, .lp-nachher { border-radius: 16px; padding: 28px; }
.lp-vorher { background: #fff; border: 1px dashed #c3ccd6; }
.lp-nachher { background: var(--navy); color: var(--hell-text); }
.lp-vorher h3, .lp-nachher h3 { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
.lp-vorher h3 { color: var(--mut); }
.lp-nachher h3 { color: var(--gold); }
.lp-zettel { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.lp-zettel li { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 14.5px; color: var(--ink); box-shadow: 0 2px 6px rgba(15, 42, 68, 0.06); }
.lp-zettel li:nth-child(odd) { transform: rotate(-1.2deg); }
.lp-zettel li:nth-child(3n) { transform: rotate(1.4deg); }
.lp-typ { flex: none; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; border-radius: 5px; padding: 3px 6px; color: #fff; }
.lp-typ.mail { background: #5b6675; }
.lp-typ.pdf { background: #b3261e; }
.lp-typ.xls { background: #1d6f42; }
.lp-typ.bild { background: #8a6200; }
.lp-typ.frage { background: var(--amber); color: var(--navy); }
.lp-vorher-fazit { margin-top: 22px; color: var(--mut); font-size: 15px; }
.lp-nachher-satz { margin-top: 12px; font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; color: #fff; line-height: 1.3; }
.lp-nachher .fenster { margin-top: 20px; border-color: rgba(255, 255, 255, 0.2); }
.lp-pfeil { display: none; }

/* Demo-Video */
.lp-demo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr); gap: 40px; align-items: center; margin-top: 36px; }
.lp-video { position: relative; border-radius: 14px; overflow: hidden; background: var(--navy); box-shadow: var(--schatten); aspect-ratio: 16 / 9; }
.lp-video.hoch { aspect-ratio: 9 / 16; max-width: 380px; margin: 0 auto; }
.lp-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--navy); }
.lp-start { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; padding: 0; cursor: pointer; background: radial-gradient(ellipse at center, rgba(15, 42, 68, 0.62) 0%, rgba(15, 42, 68, 0.35) 55%, rgba(15, 42, 68, 0.2) 100%); color: #fff; font: 700 17px Inter, sans-serif; }
/* Beschriftung lesbar auf hellem Bildschirmfoto: eigene dunkle Fläche und Schatten (V06) */
.lp-start span:not(.kreis) { background: rgba(15, 42, 68, 0.82); padding: 8px 16px; border-radius: 999px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.lp-start span.kreis { width: 72px; height: 72px; border-radius: 50%; background: var(--gold); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: transform 0.15s; }
.lp-start span.kreis::before { content: ""; margin-left: 6px; border-left: 22px solid var(--navy); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.lp-start:hover span.kreis { transform: scale(1.06); }
.lp-start[hidden] { display: none; }
.lp-ablauf { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 12px; }
.lp-ablauf li { counter-increment: s; display: flex; gap: 12px; align-items: baseline; color: var(--ink); font-size: 15.5px; }
.lp-ablauf li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--teal-l); color: var(--teal); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.lp-ablauf-titel { font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.lp-nach-demo { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lp-nach-demo .klein-text { flex-basis: 100%; }

/* Funktionen mit Bildern (Aufbau wie .funktion der Startseite) */
.lp-funktionen .funktion:first-of-type { margin-top: 44px; }
.lp-funktion-text p { color: var(--mut); margin-top: 12px; font-size: 16.5px; }

/* Neue Funktionen (Mehrwert): Grenzen der Berechnung, Zusatzkarten */
.lp-funktion-text p.lp-grenze { font-size: 14px; border-left: 3px solid var(--teal); padding-left: 12px; }
.lp-mehrwert .lead { max-width: 760px; }
.lp-held-neu { font-size: 16px; margin-top: 14px; }
.lp-held-neu b { color: var(--gold); }
.lp-mehrwert-unter { margin-top: 72px; font-size: 22px; color: var(--navy); }
.lp-mehrwert-karten { margin-top: 20px; }
.lp-mehrwert-lead { max-width: 760px; margin-top: 10px; }
.lp-mehrwert-karten .karte h3 { font-size: 17px; }

/* Beispielfall (Privatkunden): Eckdaten der Demo-Akte */
.lp-fall { background: #fff; color: var(--ink); border-radius: 18px; padding: 26px 28px; box-shadow: var(--schatten); }
.lp-fall-titel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 700; color: var(--navy); }
.lp-fall-titel small { font-weight: 500; color: var(--mut); font-size: 13px; }
.lp-fall ul { list-style: none; margin: 14px 0 0; padding: 0; }
.lp-fall li { display: grid; gap: 2px; padding: 11px 0; border-top: 1px solid var(--line); }
.lp-fall li b { font-size: 18px; color: var(--navy); font-variant-numeric: tabular-nums; }
.lp-fall li span { font-size: 14.5px; color: var(--mut); line-height: 1.45; }
.lp-fall-fuss { margin-top: 6px; background: var(--teal-l); color: var(--navy); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; font-weight: 600; }

/* Dokument im Hero: Seite der Vermögensaufstellung, Ziffern in % der Bildfläche */
.lp-dokument img { background: #fff; }
/* privat-aufstellung 1200 × 1075: im Seitenrand bzw. über der Tabellenspalte, damit kein Text verdeckt wird */
.m-p1 { left: 46.5%; top: 5.4%; }
.m-p2 { left: 3.5%; top: 19.3%; }
.m-p3 { left: 37.7%; top: 29.2%; }
.m-p4 { left: 87.75%; top: 29.2%; }
.nur-schmal { display: none; }

/* Listen im Vergleich (Privatkunden) */
.lp-liste { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.lp-liste li { position: relative; padding-left: 26px; font-size: 16px; color: var(--ink); }
.lp-liste li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: #c3ccd6; }
.lp-liste.hell li { color: #fff; font-weight: 600; }
.lp-liste.hell li::before { background: var(--gold); }
.lp-info { margin-top: 32px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; padding: 20px 24px; max-width: 900px; }
.lp-info h3 { font-size: 17px; color: var(--navy); }
.lp-info p { margin-top: 8px; color: var(--mut); font-size: 15.5px; }

.schritte.lp-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.schritte.lp-drei li:nth-child(3) { border-color: var(--gold); }

/* Abschluss-Band mit CTA */
.lp-band { background: linear-gradient(160deg, var(--navy) 0%, var(--navy2) 70%, var(--petrol) 100%); color: var(--hell-text); }
.lp-band h2 { color: #fff; }
.lp-band .lead { color: var(--hell-text); }
.lp-band .held-knoepfe { margin-top: 26px; }
.lp-band :focus-visible { outline-color: var(--gold); }
.lp-band .klein-text { color: #b9cbdd; margin-top: 18px; }

.lp-quelle { margin-top: 16px; font-size: 13.5px; color: var(--mut); }
.held .lp-quelle { color: #b9cbdd; }

/* Vertrauen */
.lp-vertrauen .karte h3 { font-size: 17px; }
.lp-links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; }
.lp-links a { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .lp-start span.kreis { transition: none; }
}

/* Tablet */
@media (max-width: 960px) {
  .lp-held-zwei, .lp-vergleich, .lp-demo { grid-template-columns: 1fr; }
  .lp-fall { max-width: 560px; }
  .schritte.lp-drei { grid-template-columns: 1fr; }
}

/* Smartphone */
@media (max-width: 640px) {
  .nur-breit { display: none !important; }
  .schritte.lp-drei { grid-template-columns: 1fr; }
  .lp-vorher, .lp-nachher { padding: 22px 18px; }
  .lp-zettel li { font-size: 13.5px; padding: 8px 11px; }
  .lp-legende { grid-template-columns: 1fr; font-size: 14.5px; }
  .lp-nach-demo .knopf { width: 100%; }
  .lp-fall { padding: 20px; }
  /* Held-PDF auf dem Handy: Ausschnitt volle Breite, 68 % der Höhe; Ziffern kleiner und passend versetzt */
  .lp-dokument .lp-marke { width: 18px; height: 18px; margin: -9px 0 0 -9px; font-size: 11px; line-height: 18px; box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.4), 0 2px 6px rgba(15, 42, 68, 0.35); }
  .m-p1 { left: 46%; top: 7.9%; }
  .m-p2 { left: 3.4%; top: 28.4%; }
  .m-p3 { left: 37.7%; top: 41.3%; }
  .m-p4 { left: 87.75%; top: 41.3%; }
  .nur-schmal { display: inline; }
}
/* Hinweis bei reduzierter Videoqualität (landing.js) */
.lp-qualitaet { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 10px 8px 14px; border-radius: 10px; background: rgba(15, 42, 68, 0.88); color: #fff; font-size: 13px; line-height: 1.35; z-index: 2; }
.lp-qualitaet[hidden] { display: none; }
.lp-qualitaet button { border: 0; border-radius: 8px; padding: 6px 12px; background: var(--gold); color: var(--navy); font: 700 13px Inter, sans-serif; cursor: pointer; }
.lp-qualitaet button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Bereichsleiste im Kopf: zurück zur Startseite und Wechsel Privatkunden/Finanzberater, auf allen Geräten sichtbar */
.lp-bereiche { background: rgba(255, 255, 255, 0.06); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.lp-bereiche-innen { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.lp-bereiche a { text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.lp-bereich-start { color: var(--hell-text); display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.lp-bereich-start:hover { color: #fff; }
.lp-bereich-wahl { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.lp-bereich-wahl a { color: var(--hell-text); padding: 6px 14px; border-radius: 999px; display: inline-block; line-height: 20px; }
.lp-bereich-wahl a:hover { color: #fff; }
.lp-bereich-wahl a[aria-current="page"] { background: var(--gold); color: var(--navy); }
/* Lange Wörter im Held (z. B. „Vermögensaufstellung.“) dürfen auf schmalen Geräten nicht über den Rand ragen */
.lp-held h1 { hyphens: auto; overflow-wrap: break-word; }
.lp-held-zwei > * { min-width: 0; }
/* Kopf ist durch die Leiste höher: Sprungziele nicht darunter verstecken */
body[data-seite] [id] { scroll-margin-top: 116px; }

@media (max-width: 640px) {
  .lp-bereiche-innen { gap: 8px; min-height: 42px; }
  .lp-bereiche a { font-size: 13px; }
  .lp-bereich-wahl a { padding: 6px 10px; }
}
@media (max-width: 480px) {
  .lp-bereiche .lp-lang { display: none; }
}
@media (max-width: 340px) {
  .lp-bereich-wahl a { padding: 6px 8px; font-size: 12.5px; }
}

/* Abschnittsleiste der Landingpages: direkt unter der Bereichsleiste, auf dem Handy waagerecht scrollbar */
.lp-abschnitte { background: var(--navy); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.lp-abschnitte-innen { display: flex; gap: 6px; align-items: center; min-height: 44px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lp-abschnitte-innen::-webkit-scrollbar { display: none; }
.lp-abschnitte a { flex: none; color: var(--hell-text); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; padding: 6px 12px; border-radius: 999px; }
.lp-abschnitte a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.lp-abschnitte a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.lp-abschnitte + .held { padding-top: 48px; }
/* Zwei Bildschirmfotos untereinander neben einem Funktionstext */
.lp-stapel { display: grid; gap: 18px; min-width: 0; align-content: center; }
/* Bilder mit Handy-Fassung (<picture>) verhalten sich wie das Bild selbst */
.fenster picture, .lp-nachher picture { display: block; }
@media (max-width: 640px) {
  .lp-abschnitte-innen { gap: 2px; min-height: 40px; padding-right: 24px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .lp-abschnitte a { font-size: 13px; padding: 6px 10px; }
  .lp-abschnitte + .held { padding-top: 32px; }
}

/* Verkaufsreife 19.10.2026: Berater-Ablauf in vier Schritten, § 18-Abschnitt, Pilotliste, Beispiel Privatkunden */
.lp-schritte { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.lp-schritte > li { display: flex; flex-direction: column; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.lp-schritt-text .nr { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; margin-bottom: 10px; }
.lp-schritt-text p { color: var(--mut); margin-top: 6px; font-size: 15.5px; }
.lp-schritt-bild { margin: 0; box-shadow: 0 10px 28px rgba(15, 42, 68, 0.12); }
.lp-merksatz { margin-top: 32px; }
.lp-kwg .raster2 { align-items: start; }
.lp-kwg .lead { margin-bottom: 14px; color: var(--ink); }
.lp-kwg-hinweis { margin-top: 14px; }
.lp-band .haken li { color: var(--hell-text); }
.lp-band .haken li::before { border-color: var(--gold); }
.lp-pilot-liste { max-width: 760px; }
.lp-preis-quelle { margin-top: 14px; }
/* Beispiel Thomas und Anna (Privatkunden) */
.lp-beispiel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 32px; }
.lp-beispiel-karte { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; position: relative; }
.lp-beispiel-marke { position: absolute; top: -12px; left: 20px; background: var(--amber-l); color: var(--amber-text); border: 1px solid #f0d98c; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.lp-beispiel-tabelle { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.lp-beispiel-tabelle th, .lp-beispiel-tabelle td { padding: 10px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.lp-beispiel-tabelle td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-beispiel-tabelle th small { display: block; font-weight: 400; color: var(--mut); font-size: 13.5px; }
.lp-beispiel-tabelle tr.summe th, .lp-beispiel-tabelle tr.summe td { font-weight: 800; color: var(--navy); border-bottom: 0; }
.lp-beispiel-tabelle tr.neu th, .lp-beispiel-tabelle tr.neu td { color: var(--teal); font-weight: 700; }
.lp-beispiel-text .lead { color: var(--ink); margin-top: 0; margin-bottom: 14px; }
@media (max-width: 960px) {
  .lp-schritte, .lp-beispiel { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lp-schritte > li { padding: 18px; }
  .lp-beispiel-tabelle { font-size: 14.5px; }
}
.lp-so-zugang { margin-top: 28px; color: var(--mut); }