/* DLP-Funnel — Verkäufer-Lead-Formular (v3)
 *
 * Gestaltung nach dem Typeform-Vorbild: Ein Screen trägt eine Frage und sonst
 * fast nichts. Viel Leere ist hier kein verschenkter Platz, sondern das
 * Mittel, das die Hürde niedrig hält.
 *
 * Aufbau eines Screens (von oben):
 *   Fortschritt (Haarlinie an der Oberkante) · Logo · Schrittnummer ·
 *   Frage · erklärender Zusatz · Antworten/Felder · unten: Zurück + CTA
 *
 * Farbe: Zwei Rollen, beide aus der CI abgeleitet — Fläche und CTA. Im
 * Marken-Modus ist die CI-Farbe die Fläche und die hinterlegte Textfarbe
 * (textfarbe_auf_ci_farbe_1) wird zum CTA; im hellen Modus ist es umgekehrt.
 * So stimmt der Kontrast bei jedem Kunden, ohne dass jemand Werte pflegt.
 *
 * Schrift: geerbt. Das Formular soll nach der Makler-Seite aussehen.
 */

.dlp-funnel {
  --dlpf-ground: #ffffff;
  --dlpf-ink: #14171f;
  --dlpf-ink-soft: #616873;
  --dlpf-line: #e2e5ea;
  --dlpf-cta: #0d5bd7;
  --dlpf-on-cta: #ffffff;
  --dlpf-danger: #b42318;
  --dlpf-radius: 12px;
  /* Klick-Quittung: Der gewählte Button bleibt kurz stehen, damit die Wahl
     sichtbar ankommt, bevor der Schritt wechselt. */
  --dlpf-hold: 300ms;
  --dlpf-leave: 220ms;
  --dlpf-enter: 300ms;

  box-sizing: border-box;
  /* Volle Breite: Das Formular ist der Bildschirm, nicht eine Karte darauf.
     Die lesbare Spalte entsteht weiter innen (siehe Inhaltsspalte). */
  max-width: none;
  margin: 0;
  color: var(--dlpf-ink);
  /* KEINE Fläche auf dem Wurzel-Element: Die Karte ist abgerundet, das
     Wurzel-Element nicht — im Marken-Modus schaute die CI-Farbe sonst als
     spitzes Rechteck hinter den Ecken hervor. Im hellen Modus fiel es nur
     deshalb nicht auf, weil Weiß auf Weiß lag. Die Fläche trägt die Karte. */
  background: transparent;
  font-family: inherit;
  font-size: 16px; /* < 16px löst auf iOS den Auto-Zoom bei Focus aus */
  /* Als Variable, weil sich die Schrittnummer daran misst: Ihre Höhe soll die
     Versalhöhe der Frage sein, und die hängt an dieser Größe. */
  --dlpf-question-size: clamp(23px, 6.4vw, 31px);
  /* Höhe des vorweggenommenen Streifens auf die helle Karte. Eine Quelle:
     Die Karte hält unten so viel Polsterung frei, die Blende sitzt darauf,
     und das Skript misst den Platzhalter selbst — ein zweiter Wert irgendwo
     würde beim Umschalten einen Sprung erzeugen. */
  --dlpf-teaser: 5dvh;
  line-height: 1.5;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.dlp-funnel *,
.dlp-funnel *::before,
.dlp-funnel *::after { box-sizing: inherit; }

/* Erste Zeile der hellen Karte. Sie ist das Einzige, was man von diesem
   Bereich sieht, bevor man scrollt — deshalb sitzt sie genau in der Höhe des
   Streifens und trägt einen Hinweis nach unten. */
.dlp-trust__peek {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--dlpf-teaser, 5dvh);
  min-height: 34px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 620;
  letter-spacing: .01em;
  text-align: center;
}
/* Zwei Wege, ein Ziel: In der echten Karte steht die Zeile unter .dlp-trust,
   im Platzhalter unter .dlp-funnel — und dort gibt ihr die Theme-Abwehr
   (.dlp-funnel :where(…) { color: inherit }) die weiße Textfarbe des
   Formulars. Auf weißem Grund ist sie damit unsichtbar. Beide Selektoren
   haben eine Klasse mehr und gewinnen deshalb. */
.dlp-trust .dlp-trust__peek,
.dlp-funnel .dlp-trust__peek { color: var(--dlpf-brandcolor, #14171f); }
.dlp-trust__peek::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .5;
}

/* --- Vorweggenommene Vertrauens-Karte -----------------------------------
 * Die Seite bleibt EIN Scroll-Container. Damit der Streifen der hellen Karte
 * trotzdem von Anfang an zu sehen ist, steht hier ein fester Platzhalter in
 * ihrer Geometrie — der Inhalt zieht darunter durch. Sobald die echte Karte
 * an derselben Stelle ankommt, verschwindet er; weil beide dann deckungs-
 * gleich sind, gibt es keinen Sprung.
 * ---------------------------------------------------------------------- */
.dlp-funnel__teaser {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dlpf-teaser);
  width: calc(100% - 32px);
  max-width: 940px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 18px 18px 0 0;
  /* Anklickbar: Der Streifen sieht aus wie der Rand einer Karte, die man
     aufziehen kann — dann muss er sich auch aufziehen lassen. */
  cursor: pointer;
  /* Ein Hauch Schatten nach oben: Er hebt die Karte vom Formular ab und macht
     aus dem Streifen eine Kante, die vor dem Inhalt liegt. Nur nach oben, denn
     unten schließt sie mit dem Bildschirmrand ab. */
  box-shadow: 0 -10px 28px rgba(0, 0, 0, .16);
  z-index: 2;
  transition: transform 300ms cubic-bezier(.22, .68, .28, 1);
}
/* Ab Frage 2 nach unten aus dem Bild — und beim Zurückgehen wieder herauf. */
.dlp-funnel__teaser.is-eingefahren,
.dlp-funnel__blende.is-eingefahren { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) {
  .dlp-funnel__teaser, .dlp-funnel__blende { transition: none; }
}
/* Weiche Kante darüber, damit der Inhalt nicht abgeschnitten wirkt, sondern
   sichtbar weiterläuft. */
.dlp-funnel__blende {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--dlpf-teaser);
  height: 52px;
  background: linear-gradient(to top, var(--dlpf-ground), transparent);
  pointer-events: none;
  z-index: 2;
  transition: transform 300ms cubic-bezier(.22, .68, .28, 1);
}
.dlp-funnel__teaser[hidden], .dlp-funnel__blende[hidden] { display: none; }

/* --- Gerüst bis das Skript läuft ----------------------------------------
 * Es hält exakt die Höhe, die das Formular gleich einnimmt, und zeigt dessen
 * Form. Ohne das rutscht der helle Vertrauens-Bereich an den Seitenanfang und
 * blitzt als weiße Karte auf. Das Skript ersetzt es beim Aufbau.
 * ---------------------------------------------------------------------- */
.dlp-funnel__skeleton {
  display: flex;
  flex-direction: column;
  min-height: 90dvh;
  padding: 14px 20px 0;
  gap: 14px;
}
.dlp-funnel__skeleton > * { display: block; border-radius: 999px; background: currentColor; opacity: .16; }
.dlp-funnel__skeleton-progress { height: 4px; }
.dlp-funnel__skeleton-identity { height: 38px; width: 62%; border-radius: 12px !important; }
.dlp-funnel__skeleton-line--headline { height: 26px; width: 88%; margin-top: 14px; border-radius: 8px !important; }
.dlp-funnel__skeleton-line--sub { height: 14px; width: 66%; }
.dlp-funnel__skeleton-option { height: 52px; margin-top: 4px; opacity: .1; }
@media (prefers-reduced-motion: no-preference) {
  .dlp-funnel__skeleton > * { animation: dlpf-skeleton 1.4s ease-in-out infinite; }
  @keyframes dlpf-skeleton { 0%, 100% { opacity: .10; } 50% { opacity: .20; } }
}

/* Doppel-Tippen vergrößert nicht: touch-action erbt nicht, deshalb auf jedem
   Bedienelement. Kneif-Zoom bleibt möglich — manipulation nimmt nur den
   Doppel-Tipp-Zoom, nicht die Bedienungshilfe. */
.dlp-funnel,
.dlp-funnel button,
.dlp-funnel input,
.dlp-funnel a,
.dlp-funnel label,
.dlp-funnel__teaser,
.dlp-trust,
.dlp-trust a,
.dlp-trust summary { touch-action: manipulation; }

/* --- Abwehr gegen Theme-Regeln -------------------------------------------
 * Das Widget läuft in einer fremden WordPress-Installation. Astra bringt u. a.
 * mit:  button { border-radius: 4px; box-shadow: 0 1px 2px … }
 *       input:focus { border-style: dotted; border-width: thin }
 * Beides trifft unsere Bedienelemente. Deshalb einmal sauber zurücksetzen —
 * mit zwei Klassen, damit auch Theme-Regeln mit Klassenselektor verlieren.
 * ------------------------------------------------------------------------ */
/* Typografie: Astra setzt h1…h6 eine EIGENE Farbe. Eine direkt gesetzte Farbe
   schlägt immer die geerbte — unsere Überschriften nahmen deshalb die
   Theme-Farbe an, obwohl der Container auf die Textfarbe der CI steht. Deshalb
   alle Textelemente ausdrücklich auf "erben" stellen. Die gedämpften Varianten
   (Subline, Hinweise) setzen ihre Farbe per Klasse und gewinnen weiterhin. */
/* :where() zählt NICHT zur Spezifität. Ohne das hatte diese Regel (0,1,1) und
   schlug damit jede Komponenten-Regel mit einer Klasse (0,1,0) — Schrittnummer,
   Subline, Hinweise, Feldfehler und die Rolle des Ansprechpartners verloren
   dadurch still ihre eigene Farbe. Mit :where() steht sie bei (0,1,0) und
   verliert gegen die später notierten Komponenten, schlägt aber weiterhin
   Astras h1…h6 (0,0,1). */
.dlp-funnel :where(h1, h2, h3, p, span, label, li, strong, em, summary, figcaption, legend) {
  color: inherit;
}

.dlp-funnel button,
.dlp-funnel input {
  margin: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  min-width: 0;
  max-width: none;
  outline-offset: 0;
}
.dlp-funnel button { padding: 0; border-radius: 0; line-height: normal; }
.dlp-funnel input:focus,
.dlp-funnel input:focus-visible {
  border-style: solid;
  box-shadow: none;
}

/* --- Bühne --------------------------------------------------------------- */

.dlp-funnel__card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* dvh statt vh: Auf iOS ändert sich die sichtbare Höhe mit der
     Browser-Leiste — mit vh rutschen die letzten Antworten darunter.
     Bildschirmhoch von Anfang an: Der frühere Wechsel von Karte zu Vollbild
     ab der ersten Antwort kostete einen sichtbaren Sprung. */
  /* 90 statt 100: Die zehn Prozent darunter zeigen den hellen
     Vertrauens-Bereich an und sagen ohne ein Wort, dass die Seite weitergeht.
     Ohne diesen Streifen wirkt das Formular wie eine Sackgasse.

     Mindesthöhe, kein eigener Scrollbereich: Die Seite ist der einzige
     Scroll-Container. Den Streifen auf den Vertrauens-Bereich übernimmt ein
     fest stehender Platzhalter (siehe __teaser), bis die echte Karte an
     seiner Stelle ankommt — dadurch ist er von Anfang an zu sehen, ohne dass
     der Inhalt in einen zweiten Scrollbereich gezwungen wird. */
  /* Genau so hoch, dass die helle Karte an der Streifenkante beginnt. Vorher
     standen hier 90dvh plus Polsterung plus 24px Außenabstand der Karte —
     ihre Oberkante lag damit unterhalb des sichtbaren Bereichs, und man sah
     eine leere weiße Fläche statt der ersten Zeile. */
  min-height: calc(100dvh - var(--dlpf-teaser));
  /* Luft zur hellen Karte. Die Polsterung zählt zur Mindesthöhe, verschiebt
     die Kartenkante also nicht — sie hält nur den Inhalt davon weg. */
  padding-bottom: 50px;
  background: var(--dlpf-ground);
  border: 0;
  border-radius: 0;
  padding: 0;
}
.dlp-funnel--brand .dlp-funnel__card { border-color: transparent; }
/* Ohne eigene Stufe wäre gedämpfter Text auf der Markenfläche exakt so
   kräftig wie die Frage — die Hierarchie ginge verloren. */
.dlp-funnel--brand { --dlpf-ink-soft: rgba(255, 255, 255, .72); }
@supports (color: color-mix(in srgb, red, blue)) {
  .dlp-funnel--brand { --dlpf-ink-soft: color-mix(in srgb, var(--dlpf-ink) 74%, transparent); }
}

/* Fortschritt: eingeblendete Leiste, nicht die Kante des Formulars — sie
   gehört zum Inhalt, nicht zum Rahmen. Erscheint erst ab Schritt 2: Auf dem
   ersten Screen wäre sie nur ein Hinweis darauf, dass noch etwas kommt.
   Sie rückt vor, sobald eine Antwort gewählt ist — nicht erst beim
   Schrittwechsel; das quittiert die Eingabe. */
.dlp-funnel__progress {
  position: relative;
  height: 4px;
  margin: 14px 20px 0;
  border-radius: 999px;
  background: var(--dlpf-line);
  flex: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.dlp-funnel__progress.is-visible { opacity: 1; transform: none; }
.dlp-funnel--brand .dlp-funnel__progress { background: rgba(255, 255, 255, .18); }
.dlp-funnel__progress-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--dlpf-cta);
  transition: width 320ms cubic-bezier(.4, 0, .2, 1);
}
.dlp-funnel__progress[hidden] { display: none; }

/* --- Kopf ---------------------------------------------------------------- */

/* Kopfzeile: links wer anruft, rechts wessen Haus es ist. Beide auf einer
   Grundlinie, beide in derselben Höhe — sonst wirkt die Zeile schief. */
.dlp-funnel__identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px 0;
  flex: none;
}
/* Gesicht und Marke führen zur hellen Karte — als Knopf, nicht als Bild mit
   Klick-Handler: So erreicht sie auch, wer mit der Tastatur navigiert. */
.dlp-funnel .dlp-funnel__identity-person,
.dlp-funnel .dlp-funnel__logo-knopf {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.dlp-funnel .dlp-funnel__identity-person:focus-visible,
.dlp-funnel .dlp-funnel__logo-knopf:focus-visible,
.dlp-funnel__teaser:focus-visible { outline: 2px solid var(--dlpf-ink); outline-offset: 3px; }
.dlp-funnel__identity-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dlp-funnel__logo-knopf { display: flex; align-items: center; flex: none; }
/* Der Rahmen hält die Größe, das Bild darin darf größer sein: 33 % näher
   heran, verankert oben mittig. Porträts sind auf Augen und Stirn komponiert,
   nicht auf die Bildmitte — ein zentrierter Zuschnitt schneidet regelmäßig den
   Kopf an und lässt Schulter stehen. */
.dlp-funnel__identity-photo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  display: block;
}
.dlp-funnel__identity-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transform: scale(1.33);
  transform-origin: 50% 0;
  display: block;
}
/* Gleicher Zuschnitt für die große Personenkarte, falls ein Schritt sie zeigt. */
.dlp-funnel__person-photo { object-position: 50% 0; }
.dlp-funnel__identity-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.dlp-funnel__identity-name { font-size: 14.5px; font-weight: 620; color: var(--dlpf-ink); }
.dlp-funnel__identity-role { font-size: 12.5px; color: var(--dlpf-ink-soft); }
.dlp-funnel__logo { max-height: 38px; max-width: 130px; width: auto; height: auto; flex: none; }
.dlp-funnel--brand .dlp-funnel__logo { filter: brightness(0) invert(1); }

.dlp-funnel__intro { padding: 10px 20px 0; flex: none; text-align: center; }

/* Die Gebietszeile: immer eine eigene Zeile unter der Aussage, im normalen
   Gewicht. !important, weil Astra in h2 verschachtelte Elemente mit eigenem
   Gewicht versieht — die Zeile soll unter der fetten Aussage zurücktreten. */
.dlp-funnel .dlp-funnel__headline-region {
  display: block;
  font-weight: 400 !important;
}

/* Kopfbild: kompakt, nicht bildfüllend. Die erste Frage muss auf einem
   normalen Smartphone im ersten Viewport bleiben — ein Bild, das sie unter
   die Kante schiebt, kostet mehr als es trägt. Rundum abgerundet, damit es
   ein eigenes Element ist und nicht die angeschnittene Oberkante der Karte. */
.dlp-funnel__intro-media {
  margin: 0 0 16px;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}
.dlp-funnel__intro-media img {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
}
@media (min-width: 600px) {
  .dlp-funnel__intro-media img { height: 190px; }
}
/* Auf niedrigen Schirmen weicht das Bild ganz — dort entscheidet sich, ob die
   erste Antwort noch sichtbar ist. */
@media (max-height: 640px) and (max-width: 767px) {
  .dlp-funnel__intro-media { display: none; }
}
.dlp-funnel__headline {
  color: var(--dlpf-ink);
  margin: 0 0 8px;
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 660;
  text-wrap: balance;
}
.dlp-funnel__subline { margin: 0; color: var(--dlpf-ink-soft); font-size: 14.5px; }
.dlp-funnel__intro[hidden] { display: none; }

/* --- Schritt ------------------------------------------------------------- */

.dlp-funnel__stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 14px 20px 0;
  /* min-height: 0 ist die Bedingung dafür, dass ein Flex-Kind überhaupt
     kleiner werden darf als sein Inhalt — ohne sie liefe die Karte weiter
     über. overflow gehört hierher und nicht auf die Karte: Fortschritt,
     Kopfzeile und der Weiter-Knopf sollen stehen bleiben. */
  min-height: 0;
}



/* Ein Schritt ohne Knöpfe soll auch keinen Platz dafür beanspruchen — sonst
   endet die Antwortliste weit über der Kartenkante und darunter steht Leere. */
.dlp-funnel__nav:empty,
.dlp-funnel__nav.is-leer { display: none; }

.dlp-funnel__step { min-width: 0; flex: 1 1 auto; }

/* Schrittnummer links NEBEN der Frage, nicht darüber: So läuft auch die
   zweite Zeile der Frage nicht unter das Badge. */
/* Badge über der Frage. */
.dlp-funnel__head { display: block; margin-bottom: 8px; }
.dlp-funnel__head .dlp-funnel__question { margin: 0; }
.dlp-funnel__head .dlp-funnel__step-number { margin-bottom: 14px; }

/* Schrittnummer: verortet den Besucher, ohne einen Satz dafür zu brauchen. */
.dlp-funnel__step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 30px;            /* etwas höher als breit — steht ruhiger */
  padding: 0 7px;
  /* Gegenläufige Ecken: oben links und unten rechts voll, die beiden anderen
     halb. Gibt dem Badge eine Richtung, statt es als Quadrat wirken zu lassen. */
  border-radius: 8px 4px 8px 4px;
  /* Fläche zurückgenommen, Zahl dafür etwas kräftiger: Das Badge verortet,
     es soll nicht mit der Frage konkurrieren. */
  background: color-mix(in srgb, var(--dlpf-ink) 50%, transparent);
  color: var(--dlpf-brandcolor, var(--dlpf-ground));
  font-size: 14.3px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .dlp-funnel__step-number { opacity: .5; }
}

.dlp-funnel__question {
  color: var(--dlpf-ink);
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: var(--dlpf-question-size);
  line-height: 1.2;
  letter-spacing: -.022em;
  font-weight: 620;
  text-wrap: balance;
}
.dlp-funnel__hint {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(14.5px, 3.9vw, 16.5px);
  color: var(--dlpf-ink-soft);
}

/* Bewegung: Der alte Schritt zieht nach oben ab, der neue kommt von unten
   nach. Das liest sich als Vorwärtskommen statt als Neuladen. */
/* Vorwärts zieht der alte Schritt nach oben ab und der neue kommt von unten
   nach. Rückwärts muss sich das umkehren — sonst fühlt sich "Zurück" an wie
   ein weiterer Schritt vorwärts. */
@keyframes dlpf-enter { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes dlpf-leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-26px); } }
@keyframes dlpf-enter-back { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes dlpf-leave-back { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(26px); } }

.dlp-funnel__step,
.dlp-funnel__welcome { animation: dlpf-enter var(--dlpf-enter) cubic-bezier(.2, .7, .3, 1) both; }
.dlp-funnel__step.is-back,
.dlp-funnel__welcome.is-back { animation-name: dlpf-enter-back; }
.dlp-funnel__step.is-leaving,
.dlp-funnel__welcome.is-leaving { animation: dlpf-leave var(--dlpf-leave) cubic-bezier(.4, 0, 1, 1) both; }
.dlp-funnel__step.is-leaving.is-back,
.dlp-funnel__welcome.is-leaving.is-back { animation-name: dlpf-leave-back; }

/* --- Willkommens-Screen --------------------------------------------------
 * Der erste Screen beim Seitenaufruf: Bild, Logo darauf, dann Frage und
 * Subline — und unten der einzige Knopf. Er hat eine Aufgabe: den Start
 * auszulösen. Deshalb keine Antworten, kein Fortschritt, keine Nummer.
 * ------------------------------------------------------------------------ */

.dlp-funnel__welcome { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.dlp-funnel__welcome-media {
  position: relative;
  flex: none;
  /* Rund 40 % des Screens im Übernahme-Modus, sonst ein ruhiges Breitbild. */
  aspect-ratio: 16 / 10;
  max-height: 42vh;
  margin: 0 0 24px;
  background: var(--dlpf-line);
  overflow: hidden;
}
.dlp-funnel__welcome-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Verlauf unter dem Logo: Ein Logo auf einem hellen Bildbereich wäre sonst
   unlesbar — und welcher Bereich hell ist, wissen wir pro Kunde nicht. */
.dlp-funnel__welcome-media::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 42%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent);
  pointer-events: none;
}
/* Logo über der Karte: mittig, in Farbe, in der Größe begrenzt. Auf dem Bild
   war es bei dunklen Motiven abgeschnitten und zu groß. */
.dlp-funnel__welcome-body { padding: 0 26px; }
.dlp-funnel__welcome-headline {
  color: var(--dlpf-ink);
  margin: 0 0 10px;
  font-size: clamp(26px, 7.6vw, 38px);
  line-height: 1.14;
  letter-spacing: -.025em;
  font-weight: 660;
  text-wrap: balance;
}
.dlp-funnel__welcome-subline {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(15.5px, 4.2vw, 18px);
  color: var(--dlpf-ink-soft);
}
.dlp-funnel__welcome-subline strong { color: var(--dlpf-ink); font-weight: 640; }

/* Auf dem Willkommens-Screen trägt das Bild den Kopf — die normale Logo-Zeile
   wäre dann doppelt. */
.dlp-funnel--welcome .dlp-funnel__brand-bar,
.dlp-funnel--welcome .dlp-funnel__intro,
.dlp-funnel--welcome .dlp-funnel__progress { display: none; }
.dlp-funnel--welcome .dlp-funnel__stage { padding-left: 0; padding-right: 0; padding-top: 0; }
.dlp-funnel--welcome .dlp-funnel__card { padding-top: 0; }

/* --- Antwortzeilen ------------------------------------------------------- */

.dlp-funnel__options { display: grid; gap: 8px; margin: 18px 0 0; }

/* Zwei Spalten ab sechs Antworten und ab Tablet-Breite. Der frühere Einwand —
   lange deutsche Labels lassen die Pillen unterschiedlich hoch werden — gilt
   weiter; grid-auto-rows: 1fr nimmt ihm die Spitze, weil alle Zellen einer
   Reihe gleich hoch bleiben. Acht Antworten schrumpfen so von acht Reihen auf
   vier, und damit passt der Schritt in die 90dvh, statt den Streifen auf den
   Vertrauens-Bereich unter die Kante zu schieben. */
@media (min-width: 600px) {
  .dlp-funnel__options--raster {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
  }
}

/* Kompakte Pille, IMMER eine pro Zeile. Zwei Spalten sahen im Muster gut aus,
   brechen aber an deutschen Labels: „In den nächsten 1-6 Monaten" läuft auf
   drei Zeilen, die Pillen werden unterschiedlich hoch und das Raster franst
   aus. Eine Spalte bleibt bei jeder Labellänge ruhig. */
.dlp-funnel .dlp-funnel__option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 50px;
  /* 16px statt 20px Seitenpolster und die Schrift eine Spur kleiner: Die
     Ja-Antwort ("Ja, ich möchte eine Immobilie verkaufen.") soll auf einem
     normalen Handy in EINE Zeile passen. Auf sehr schmalen Geräten bricht
     sie trotzdem — dann greift der hängende Einzug unten. */
  padding: 11px 16px;
  text-align: left;
  font: inherit;
  font-size: clamp(14px, 3.85vw, 17px);
  font-weight: 500;
  color: var(--dlpf-ink);
  /* Die Antworten sind der Grund, warum jemand hier ist — sie sollen kräftiger
     wirken als Marke, Schrittnummer und Begleittext. Eine eigene Fläche trägt
     das besser als ein Rand allein. */
  background: color-mix(in srgb, var(--dlpf-ink) 10%, transparent);
  border: 1.5px solid var(--dlpf-line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.dlp-funnel--brand .dlp-funnel__option { border-color: rgba(255, 255, 255, .34); }
@supports not (color: color-mix(in srgb, red, blue)) {
  .dlp-funnel--brand .dlp-funnel__option { background: rgba(255, 255, 255, .1); }
}
@media (hover: hover) and (pointer: fine) {
  .dlp-funnel .dlp-funnel__option:hover { border-color: var(--dlpf-cta); }
}
/* Anfassbarkeit: Der Knopf kommt dem Zeiger unter der Maus entgegen.
   Nur auf Zeigergeräten — auf Touch bliebe der Hover-Zustand nach dem Tippen
   kleben und die Antwort stünde dauerhaft vergrößert da.
   translateZ hebt den Knopf auf eine eigene Compositing-Ebene, damit die
   Skalierung nicht bei jedem Frame neu gerastert wird (Kantenflimmern). */
@media (hover: hover) and (pointer: fine) {
  .dlp-funnel .dlp-funnel__submit:hover,
  .dlp-funnel .dlp-funnel__back:hover,
  .dlp-trust__cta a:hover { transform: scale(1.05) translateZ(0); }
  /* Antworten deutlich zurückhaltender: Sie sind breite Zeilen, keine
     kompakten Knöpfe — 5 % schöbe die Kanten mehrere Pixel nach außen und
     die ganze Liste geriete in Bewegung, sobald der Zeiger sie überstreicht. */
  .dlp-funnel .dlp-funnel__option:hover { transform: scale(1.01) translateZ(0); }
}
.dlp-funnel .dlp-funnel__option:active { transform: scale(.99); }
.dlp-funnel .dlp-funnel__option:focus-visible { outline: none; border-color: var(--dlpf-cta); box-shadow: 0 0 0 3px var(--dlpf-tint, rgba(13, 91, 215, .18)); }
/* Klick-Quittung */
.dlp-funnel .dlp-funnel__option[aria-pressed="true"] {
  border-color: var(--dlpf-cta);
  background: var(--dlpf-cta);
  color: var(--dlpf-on-cta);
}
.dlp-funnel__option-label { flex: 1 1 auto; }
/* Hängender Einzug NUR über text-indent: Ein Flex-Label fraß die Leerzeichen
   um das kursive <i>nicht</i> — Whitespace zwischen Flex-Kindern wird nicht
   gerendert. So bleibt der Text normaler Inline-Fluss, das Zeichen belegt die
   ersten 30px, und umbrechende Zeilen starten hinter dem Zeichen statt
   darunter. */
.dlp-funnel__option-label:has(.dlp-funnel__option-zeichen) {
  padding-left: 30px;
  text-indent: -30px;
}

/* Vorangestelltes Zeichen der Ja/Nein-Antworten — GEZEICHNET, nicht als
   Schriftglyph: ✓ und ╳ bringen ihre Strichstärke aus der Schrift mit und
   lassen sich nicht angleichen (font-weight wirkt auf Box-Drawing-Zeichen
   gar nicht). Zwei Balken bzw. ein Winkel aus denselben 2.5px sind exakt
   gleich stark. currentColor, damit die Zeichen die Quittungs-Farbe des
   gedrückten Buttons mitmachen. */
.dlp-funnel__option-zeichen {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -1px;
  text-indent: 0;
}
.dlp-funnel__option-zeichen--ja::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 6px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translate(-50%, -65%) rotate(-45deg);
}
.dlp-funnel__option-zeichen--nein::before,
.dlp-funnel__option-zeichen--nein::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
}
.dlp-funnel__option-zeichen--nein::before { transform: translate(-50%, -50%) rotate(45deg); }
.dlp-funnel__option-zeichen--nein::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* --- Helle Fläche: Akzent-Behandlung ------------------------------------ */
/* Auf der Marken-Fläche leuchten weiße Umrisse — auf Weiß wirkten dieselben
   Pillen wie ausgegraut (G049, 21.08.2026): neutrale Flächen, dunkle Zeichen,
   kein Markenrot im Bild. Auf hellen Flächen tragen deshalb Akzent-Tönungen
   die Bedienelemente; der gedrückte Zustand bleibt die volle Akzentfläche.
   Ohne color-mix (alte Browser) fallen die Regeln aus und es bleibt der graue
   Grundzustand — bedienbar, nur unlackiert. */
.dlp-funnel:not(.dlp-funnel--brand) {
  --dlpf-tint: color-mix(in srgb, var(--dlpf-cta, #0d5bd7) 18%, transparent);
}
.dlp-funnel:not(.dlp-funnel--brand) .dlp-funnel__option:not([aria-pressed="true"]) {
  background: color-mix(in srgb, var(--dlpf-cta, var(--dlpf-ink)) 5%, #ffffff);
  border-color: color-mix(in srgb, var(--dlpf-cta, var(--dlpf-ink)) 38%, #ffffff);
}
@media (hover: hover) and (pointer: fine) {
  .dlp-funnel:not(.dlp-funnel--brand) .dlp-funnel__option:hover:not([aria-pressed="true"]) {
    background: color-mix(in srgb, var(--dlpf-cta, var(--dlpf-ink)) 10%, #ffffff);
    border-color: var(--dlpf-cta, var(--dlpf-ink));
  }
}
/* Die gezeichneten ✓/✗ übernehmen den Akzent — gedrückt folgen sie weiter
   der Quittungs-Farbe (currentColor auf voller Akzentfläche). */
.dlp-funnel:not(.dlp-funnel--brand) .dlp-funnel__option:not([aria-pressed="true"]) .dlp-funnel__option-zeichen {
  color: var(--dlpf-cta, currentColor);
}
/* Schrittnummer: getönter Akzent-Chip statt Grau — verortet UND trägt die
   Marke, ohne mit der Frage zu konkurrieren. */
.dlp-funnel:not(.dlp-funnel--brand) .dlp-funnel__step-number {
  background: color-mix(in srgb, var(--dlpf-cta, var(--dlpf-ink)) 10%, #ffffff);
  color: var(--dlpf-cta, var(--dlpf-ink));
}

/* --- Ansprechpartner ----------------------------------------------------- */
/* Wer gleich anruft, bekommt ein Gesicht — genau dort, wo über die
   Telefonnummer entschieden wird. */
.dlp-funnel__person {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 20px 0 0;
  flex-wrap: nowrap; /* Foto und Name gehören in eine Zeile */
}
.dlp-funnel__person-meta { min-width: 0; }
.dlp-funnel__person-photo { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--dlpf-line); }
.dlp-funnel__person-name { display: block; font-weight: 600; font-size: 15px; }
.dlp-funnel__person-role { display: block; font-size: 13.5px; color: var(--dlpf-ink-soft); }

/* --- Eingabefelder ------------------------------------------------------- */
/* Unterstrich statt Kasten: weniger Linien auf dem Screen, größere Schrift,
   ruhigeres Bild. */
.dlp-funnel__fields { display: grid; gap: 20px; margin: 24px 0 0; }
.dlp-funnel__field label {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dlpf-ink);
}
.dlp-funnel .dlp-funnel__field input {
  width: 100%;
  min-height: 46px;
  padding: 8px 2px;
  font: inherit;
  font-size: 19px;
  color: var(--dlpf-ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--dlpf-line);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .14s ease;
}
.dlp-funnel--brand .dlp-funnel__field input { border-bottom-color: rgba(255, 255, 255, .34); }
.dlp-funnel__field input::placeholder { color: var(--dlpf-ink-soft); opacity: .75; }
.dlp-funnel .dlp-funnel__field input:focus { outline: none; border-bottom-color: var(--dlpf-cta); border-bottom-width: 2px; }
.dlp-funnel__field input[aria-invalid="true"] { border-bottom-color: var(--dlpf-danger); }
/* Der Ort erscheint, ohne dass jemand ihn getippt hat — ohne Quittung wirkt
   das wie ein Fehler. Deshalb blendet der Text kurz auf und der Unterstrich
   blitzt in der Markenfarbe: "das haben wir für Sie ergänzt". Bewusst ohne
   Verschiebung — der Unterstrich gehört zum Feld und würde mitwandern. */
@keyframes dlpf-autofilled {
  0%   { opacity: .2; border-bottom-color: var(--dlpf-cta); }
  55%  { opacity: 1;  border-bottom-color: var(--dlpf-cta); }
  100% { opacity: 1; }
}
.dlp-funnel__field input.is-autofilled {
  animation: dlpf-autofilled 380ms cubic-bezier(.2, .7, .3, 1);
}

/* Halbfett, nicht nur farbig: Auf Marken-Flächen, deren CI-Farbe selbst rot
   ist, fällt die Fehlerfarbe auf die Textfarbe zurück (siehe readableDanger).
   Dann trägt allein das Gewicht den Unterschied. */
.dlp-funnel__field-error {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dlpf-danger);
}
/* "Optional" gehört an die Beschriftung, nicht in eine Fußnote: Wer es dort
   nicht sieht, füllt aus Pflichtgefühl aus oder bricht ab. */
.dlp-funnel__field-optional {
  margin-left: 8px;
  font-size: .78em;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--dlpf-ink-soft);
}

.dlp-funnel__field-note { display: block; margin-top: 6px; font-size: 13.5px; color: var(--dlpf-ink-soft); }

/* Honeypot: für Menschen und Screenreader unsichtbar, für Bots ausfüllbar. */
.dlp-funnel__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* --- Einwilligung -------------------------------------------------------- */
/* Der Gesetzestext ist lang und sperrig, muss aber wörtlich so stehen. Er soll
   deshalb so leicht wirken wie der Rest des Schritts: keine Kästen, keine
   Rahmen — dieselbe Zurückhaltung wie bei den Eingabefeldern, die nur eine
   Linie sind. */

.dlp-funnel__consent { margin: 24px 0 0; }
.dlp-funnel__consent-row { display: flex; align-items: flex-start; gap: 12px; }

/* Checkbox selbst gezeichnet: Die native ist auf jedem System anders groß und
   anders rund und bricht das ruhige Bild. */
.dlp-funnel__consent-row input[type="checkbox"] {
  flex: none;
  position: relative;
  width: 21px;
  height: 21px;
  margin: 1px 0 0;
  border: 1.5px solid var(--dlpf-line);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .14s ease, background-color .14s ease;
}
.dlp-funnel--brand .dlp-funnel__consent-row input[type="checkbox"] {
  border-color: rgba(255, 255, 255, .38);
}
.dlp-funnel__consent-row input[type="checkbox"]:hover { border-color: var(--dlpf-cta); }
.dlp-funnel__consent-row input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--dlpf-cta);
  box-shadow: 0 0 0 3px var(--dlpf-tint, rgba(13, 91, 215, .2));
}
.dlp-funnel__consent-row input[type="checkbox"]:checked {
  border-color: var(--dlpf-cta);
  background: var(--dlpf-cta);
}
/* Haken als zwei Kanten — kein Zeichensatz, keine Grafik. */
.dlp-funnel__consent-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 6.5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--dlpf-on-cta);
  border-bottom: 2px solid var(--dlpf-on-cta);
  transform: rotate(45deg);
}

.dlp-funnel__consent-row label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--dlpf-ink-soft);
  cursor: pointer;
}
.dlp-funnel__consent a { color: var(--dlpf-ink); text-underline-offset: 2px; }

.dlp-funnel__consent details { margin-top: 12px; }
.dlp-funnel__consent summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--dlpf-ink-soft);
  list-style: none;
  padding: 4px 0;
}
.dlp-funnel__consent summary::-webkit-details-marker { display: none; }
.dlp-funnel__consent summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .18s ease;
}
.dlp-funnel__consent details[open] summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.dlp-funnel__consent summary:focus-visible { outline: 2px solid var(--dlpf-cta); outline-offset: 3px; border-radius: 4px; }
/* Lesbar statt klein-gedrückt: 13,5 px mit viel Zeilenabstand und begrenzter
   Zeilenlänge — der Text ist lang, er soll nicht auch noch anstrengend sein. */
.dlp-funnel__consent-legal {
  margin: 6px 0 0;
  max-width: 58ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dlpf-ink-soft);
}

/* --- Fußleiste ----------------------------------------------------------- */

/* Untereinander statt nebeneinander: Absenden, darunter die Zusicherung, und
   erst darunter der Rückweg. In einer Zeile konkurrieren zwei Wege um
   denselben Blick — und die Zusicherung beantwortet die Frage, die im Moment
   des Klickens entsteht, nicht davor. */
.dlp-funnel__nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex: none;
  padding: 22px 26px calc(24px + env(safe-area-inset-bottom, 0px));
}
.dlp-funnel__nav-zurueck { display: flex; margin-top: 14px; }
/* Zurück ist die Nebenhandlung — gedeckt statt in voller CTA-Farbe. Zwei
   gleich kräftige Knöpfe nebeneinander lassen den Besucher überlegen. */
.dlp-funnel .dlp-funnel__back {
  flex: none;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  /* Gleiche Sprache wie die Schrittnummer: zurückgenommene Fläche, Zeichen in
     der CI-Farbe. Der Zurück-Weg ist die Nebenhandlung. */
  color: var(--dlpf-brandcolor, var(--dlpf-ground));
  background: color-mix(in srgb, var(--dlpf-ink) 50%, transparent);
  border: 0;
  border-radius: 50% !important; /* Astra setzt button { border-radius: 4px } */
  padding: 0;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, transform .12s ease;
}
/* Der Pfeil war aus border-left + border-bottom gebaut. Sobald ein Theme an
   Button-Rändern dreht, bleibt davon eine Hälfte übrig — deshalb ein SVG. */
.dlp-funnel .dlp-funnel__back svg { width: 18px; height: 18px; display: block; }
.dlp-funnel .dlp-funnel__back:hover { filter: brightness(1.1); }
@supports not (color: color-mix(in srgb, red, blue)) {
  .dlp-funnel .dlp-funnel__back { background: rgba(255, 255, 255, .5); }
}

.dlp-funnel .dlp-funnel__back[hidden] { display: none; }

.dlp-funnel .dlp-funnel__submit {
  flex: 1 1 auto;
  min-height: 56px;
  padding: 15px 24px;
  font: inherit;
  font-size: 17px;
  font-weight: 640;
  letter-spacing: -.01em;
  color: var(--dlpf-on-cta);
  background: var(--dlpf-cta);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: filter .14s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.dlp-funnel .dlp-funnel__submit:hover { filter: brightness(1.08); }
.dlp-funnel .dlp-funnel__submit:active { transform: scale(.99); }
.dlp-funnel .dlp-funnel__submit:focus-visible { outline: 3px solid var(--dlpf-cta); outline-offset: 3px; }
.dlp-funnel .dlp-funnel__submit:disabled { opacity: .6; cursor: progress; filter: none; }

.dlp-funnel__reassurance { margin: 0; text-align: center; font-size: 13.5px; color: var(--dlpf-ink-soft); }

/* Pflichttext, klein und ruhig: Er muss vollständig dastehen und lesbar sein,
   soll aber nicht mit dem Absenden konkurrieren. */
.dlp-funnel__objection {
  margin: 10px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--dlpf-ink-soft);
}
.dlp-funnel__objection strong { font-weight: 620; }
/* Das (i) trägt die gesetzlich vorgeschriebene Erläuterung im title —
   sichtbar auf Hover und erreichbar per Tastatur. */
.dlp-funnel__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin: 0 1px 0 2px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: baseline;
}

/* Sende-Zustand ohne Absende-Knopf: Der gewählte Button pulsiert leicht, damit
   sichtbar ist, dass etwas läuft. */
@keyframes dlpf-sending { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.dlp-funnel--sending .dlp-funnel__option[aria-pressed="true"] {
  animation: dlpf-sending 1.1s ease-in-out infinite;
}
.dlp-funnel--sending .dlp-funnel__option:not([aria-pressed="true"]) { opacity: .45; }
.dlp-funnel--sending .dlp-funnel__option { pointer-events: none; }

/* --- Ergebnis ------------------------------------------------------------ */

.dlp-funnel__result-title {
  color: var(--dlpf-ink);
  margin: 0 0 12px;
  font-size: clamp(23px, 6.2vw, 30px);
  line-height: 1.2;
  letter-spacing: -.022em;
  font-weight: 660;
  text-wrap: balance;
}
.dlp-funnel__result-title:focus { outline: none; }
/* text-wrap: pretty gegen einsame letzte Wörter — der Abschieds-Satz bricht
   zusätzlich per geschützter Leerzeichen (Definition) an der Satzfuge. */
.dlp-funnel__result-text { margin: 0; max-width: 46ch; color: var(--dlpf-ink-soft); white-space: pre-line; text-wrap: pretty; }

/* Abweisungs-Screen: zentriert — er ist kurz, ohne Formularfelder, und soll
   wie eine ruhige Verabschiedung wirken, nicht wie ein weiterer Schritt. */
.dlp-funnel__result--abgewiesen { text-align: center; }
.dlp-funnel__result--abgewiesen .dlp-funnel__result-text { margin-left: auto; margin-right: auto; }

/* Der Abstand darüber ist die "Leerzeile" zwischen Verabschiedung und
   Kontaktangebot. */
.dlp-funnel__kontakt { margin-top: 30px; }
.dlp-funnel__kontakt-hinweis { margin: 0 0 12px; color: var(--dlpf-ink-soft); }
.dlp-funnel__kontakt-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
/* Ruhige Zweitknöpfe: Der Screen hat keinen Primär-CTA mehr, aber zwei
   gleichrangige Angebote — Umrandung statt Fläche hält sie zurückhaltend. */
.dlp-funnel .dlp-funnel__kontakt-knopf {
  display: inline-block;
  max-width: 100%;
  padding: 12px 20px;
  border: 1.5px solid var(--dlpf-cta);
  border-radius: 999px;
  color: var(--dlpf-ink);
  font-weight: 620;
  font-size: 15.5px;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: filter .14s ease;
  -webkit-tap-highlight-color: transparent;
}
.dlp-funnel .dlp-funnel__kontakt-knopf:hover { filter: brightness(1.08); }
.dlp-funnel .dlp-funnel__kontakt-knopf:focus-visible { outline: 3px solid var(--dlpf-cta); outline-offset: 3px; }

/* Der Weg zurück, falls das "Nein" ein Vertipper war — als stiller Textknopf
   unter den Kontaktwegen, damit er die Verabschiedung nicht widerruft. */
.dlp-funnel .dlp-funnel__abweisung-zurueck {
  display: inline-block;
  margin-top: 26px;
  padding: 8px 12px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--dlpf-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dlp-funnel .dlp-funnel__abweisung-zurueck:hover { color: var(--dlpf-ink); }
.dlp-funnel .dlp-funnel__abweisung-zurueck:focus-visible { outline: 3px solid var(--dlpf-cta); outline-offset: 2px; }

.dlp-funnel__error {
  margin: 16px 26px 0;
  padding: 13px 15px;
  border-radius: var(--dlpf-radius);
  background: #fef3f2;
  border: 1px solid #fda29b;
  color: var(--dlpf-danger);
  font-size: 14px;
}
.dlp-funnel__error[hidden] { display: none; }

.dlp-funnel__noscript { padding: 18px; border: 1px solid var(--dlpf-line); border-radius: var(--dlpf-radius); }


/* Am Schreibtisch füllt die Übernahme den Schirm, der INHALT bleibt aber in
   einer lesbaren Spalte: Eine Antwortzeile über 1920 px liest niemand, und
   eine Frage, deren Zeilen quer über den Schirm laufen, verliert den Blick.
   Gefüllt wird die Fläche von der Marke, nicht vom Text. */
@media (min-width: 768px) {
  /* EINE Spalte für alle Blöcke, mit gleichem Rand links und rechts. Vorher
     bekam der Schritt seine 620px innerhalb der eingerückten Bühne, Kopfzeile
     und Headline ihre 620px innerhalb der vollen Kartenbreite — dadurch war
     der Antwortblock breiter UND nach rechts verschoben. Der Rand ist die
     Gasse, in der die Schrittnummer hängt; er zählt zur Breite, damit der
     Textblock in allen Zeilen an derselben Kante beginnt. */
  .dlp-funnel { --dlpf-spalte: 560px; --dlpf-gasse: 60px; }
  .dlp-funnel .dlp-funnel__identity,
  .dlp-funnel .dlp-funnel__intro,
  .dlp-funnel .dlp-funnel__nav,
  .dlp-funnel .dlp-funnel__step,
  .dlp-funnel .dlp-funnel__result {
    width: 100%;
    max-width: calc(var(--dlpf-spalte) + var(--dlpf-gasse) * 2);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--dlpf-gasse);
    padding-right: var(--dlpf-gasse);
  }
  /* Die Leiste bekommt nur den Inhaltsteil — sonst liefe sie über die
     Textkante hinaus. */
  .dlp-funnel .dlp-funnel__progress {
    width: 100%;
    max-width: var(--dlpf-spalte);
    margin-left: auto;
    margin-right: auto;
  }
  /* Die Bühne bleibt voll breit und ohne eigene Polsterung: Sie ist nur der
     Rahmen, die Spalte macht ihr Kind. */
  .dlp-funnel .dlp-funnel__stage { padding-left: 0; padding-right: 0; }
  /* Oberes Drittel statt exakter Mitte: Zentriert schob ein kurzer Schritt
     die Frage weit nach unten und ließ zwischen Fortschrittsleiste und Frage
     ein Loch. Ein fester, moderater Abstand hält den Einstieg dort, wo der
     Blick nach dem Laden ohnehin liegt — und lange Schritte laufen weiterhin
     nach unten aus, statt beschnitten zu werden. */
  .dlp-funnel .dlp-funnel__stage {
    justify-content: flex-start;
    padding-top: clamp(12px, 5vh, 56px);
  }
  .dlp-funnel .dlp-funnel__step { flex: 0 1 auto; }
  /* Platzhalter — entfällt mit dem Schließen-Knopf.
     Vollbild, nicht zur Frage. */
  .dlp-funnel }


/* --- Größere Schirme ----------------------------------------------------- */

@media (min-width: 600px) {
  .dlp-funnel__brand-bar,
  .dlp-funnel__intro,
  .dlp-funnel__stage,
  .dlp-funnel__welcome-body,
  .dlp-funnel__nav { padding-left: 34px; padding-right: 34px; }
  .dlp-funnel__progress { margin-left: 34px; margin-right: 34px; }
  .dlp-funnel--welcome .dlp-funnel__stage { padding-left: 0; padding-right: 0; }
  .dlp-funnel__card { min-height: 560px; }
}

/* --- Schrittnummer in der Randspalte (Tablet und größer) -----------------
 * Über der Frage kostet sie eine Zeile, die auf breiten Schirmen niemand
 * braucht. Links daneben verortet sie genauso und drängt sich nicht vor.
 *
 * Dafür braucht die Inhaltsspalte einen linken Rand: Die Karte schneidet ab
 * (overflow: hidden für die runden Ecken), ein Badge in der bisherigen
 * 34px-Polsterung klebte am Kartenrand. Fortschrittsleiste und Logo bleiben
 * bündig — sie sind Rahmen, nicht Inhalt.
 * ---------------------------------------------------------------------- */
@media (min-width: 768px) {
  .dlp-funnel__head { position: relative; }
  .dlp-funnel__head .dlp-funnel__step-number {
    position: absolute;
    right: calc(100% + 14px);
    /* Versalhöhe: Grotesken setzen Großbuchstaben auf etwa 0.72em. Der
       Abstand von oben ist der halbe Durchschuss (line-height 1.2 minus
       Versalhöhe), damit die Oberkante des Badges auf der Oberkante des
       ersten Großbuchstabens sitzt. */
    top: calc(var(--dlpf-question-size) * .24);
    height: calc(var(--dlpf-question-size) * .72);
    min-width: calc(var(--dlpf-question-size) * .72);
    padding: 0 5px;
    margin-bottom: 0;
    font-size: calc(var(--dlpf-question-size) * .42);
    border-radius: 7px 3.5px 7px 3.5px;
  }
}


@media (prefers-reduced-motion: reduce) {
  .dlp-funnel__step,
  .dlp-funnel__step.is-leaving,
  .dlp-funnel__welcome,
  .dlp-funnel__welcome.is-leaving { animation: none; }
  .dlp-funnel__progress { transition: none; }
  .dlp-funnel__progress-bar,
  .dlp-funnel__option,
  .dlp-funnel__submit,
  .dlp-funnel .dlp-funnel__field input { transition: none; }
  .dlp-funnel .dlp-funnel__option:hover,
  .dlp-funnel .dlp-funnel__submit:hover,
  .dlp-funnel .dlp-funnel__back:hover,
  .dlp-trust__cta a:hover { transform: none; }
  .dlp-funnel__field input.is-autofilled { animation: none; }
  .dlp-funnel__field:has(input.is-loading)::after { animation: none; }
}

/* ---------------------------------------------------------------------------
 * Trust-Bereich unter dem Funnel
 *
 * In derselben Datei wie das Widget: Die Formularseite lädt es ohnehin, und ein
 * zweiter Request kostet auf Mobile mehr, als diese Zeilen wiegen. Präfix
 * dlp-trust-, damit sich nichts mit Astra/Spectra beißt.
 * ------------------------------------------------------------------------- */

.dlp-trust {
  /* Erbt die CI-Farbe des Formulars. Vorher stand hier --dlpf-accent, die es
     seit dem Zweirollen-Modell nicht mehr gibt — der ganze Trust-Bereich fiel
     dadurch auf ein Standard-Blau zurück. */
  --dlpt-accent: var(--dlpf-brandcolor, #14171f);
  --dlpt-on-accent: var(--dlpf-brandink, #ffffff);
  max-width: 940px;
  /* Eigene helle Fläche: Die Seite trägt jetzt die CI-Farbe, damit
     Browser-Leiste und Seitenkopf zusammenpassen. Ohne eigene Fläche stünde
     der dunkle Text des Vertrauens-Bereichs auf dunklem Grund. */
  margin: 0 auto;
  width: calc(100% - 32px);
  /* Oben knapp: Die erste Zeile muss in den Streifen passen, sonst sieht man
     vor dem Scrollen nur weiße Fläche. */
  padding: 0 20px 36px;
  background: #ffffff;
  border-radius: 18px;
  color: #14171f;
  font-size: 16px;
  line-height: 1.55;
}
.dlp-trust *, .dlp-trust *::before, .dlp-trust *::after { box-sizing: border-box; }
/* Gleicher Grund wie im Formular: Das Theme färbt Überschriften direkt ein,
   und eine direkt gesetzte Farbe schlägt die geerbte. */
.dlp-trust :where(h1, h2, h3, p, li, strong, summary, figcaption) { color: inherit; }

.dlp-trust__section { margin: 0 0 44px; }
/* Topline und Headline sind EIN Block, nicht zwei Zeilen mit Abstand: Die
   Topline sagt, worum es geht, die Headline sagt es aus. Deshalb dicht
   beieinander und in derselben Farbe — Versalien und ein gesperrtes
   Kleingedrucktes machten daraus zwei Etiketten übereinander.
   Der Abstand liegt stattdessen ÜBER dem Block und unter der Headline. */
.dlp-trust__eyebrow {
  margin: 0 0 4px;
  font-size: clamp(14.5px, 2vw, 16px);
  font-weight: 600;
  letter-spacing: -.005em;
  color: inherit;
}
.dlp-trust__title {
  margin: 0 0 22px;
  font-size: clamp(23px, 4.2vw, 31px);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 700;
  text-wrap: balance;
}
/* Ein Abschnitt ohne Topline beginnt auf derselben Grundlinie wie einer mit —
   sonst springen die Überschriften von Abschnitt zu Abschnitt. */
.dlp-trust__section > .dlp-trust__title:first-child { margin-top: 0; }

/* Das Wichtigste zum Makler als Stichpunkte — Haken in der CI-Farbe. */
.dlp-trust__usps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dlp-trust__usps li { position: relative; padding-left: 30px; }
/* Haken im kreisrunden Feld: Fläche in der CI-Akzentfarbe, Zeichen weiß.
   Weiß fest, nicht die berechnete Textfarbe — der Haken ist ein Symbol, keine
   Fließtext-Zeile, und auf jeder gepflegten CI-Farbe kräftig genug. */
.dlp-trust__usps li { padding-left: 34px; }
.dlp-trust__usps li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dlpt-accent);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}
.dlp-trust__team {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 0 18px;
}

/* Video-Kacheln (Imagefilm, Testimonials). Das Markup ist das normale
   Wistia-Embed — der Static-Export ersetzt es beim Einfrieren automatisch
   durch die Viewport-Lazy-Facade (applyWistiaFacade), deshalb hier KEINE
   eigene Lazy-Lösung. */
.dlp-trust__videos { display: grid; gap: 20px; }
@media (min-width: 720px) { .dlp-trust__videos--multi { grid-template-columns: repeat(3, 1fr); } }
.dlp-trust__video { margin: 0; }
/* Kein eigenes Seitenverhältnis mehr: Das bringt Wistia mit seinen beiden
   Rahmen selbst mit (56,25 % Polsterung = 16:9). Zwei ineinander verschachtelte
   Verhältnisse ergaben am Schreibtisch einen verzogenen Abspieler. Der Rahmen
   hier macht nur noch die runden Ecken. */
.dlp-trust__video-frame {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #101828;
}
/* Die Fassade des Static-Exports bringt kein eigenes Verhältnis mit. */
.dlp-trust__video-frame .dlp-wistia-facade { aspect-ratio: 16 / 9; }
.dlp-trust__video-frame .dlp-wistia-facade { width: 100%; height: 100%; }
.dlp-trust__video figcaption { margin-top: 10px; font-size: 14.5px; font-weight: 550; }

/* Siegel */
.dlp-trust__section--seals { margin-bottom: 34px; }
.dlp-trust__seals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px 30px;
}
.dlp-trust__seals img { height: 62px; width: auto; max-width: 130px; object-fit: contain; }

/* Referenzobjekte */
.dlp-trust__refs { display: grid; gap: 18px; }
@media (min-width: 640px) { .dlp-trust__refs { grid-template-columns: repeat(3, 1fr); } }
.dlp-trust__ref { margin: 0; }
.dlp-trust__ref img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  background: #e2e5ea;
}
.dlp-trust__ref figcaption { margin-top: 10px; font-size: 14.5px; line-height: 1.4; }
.dlp-trust__ref figcaption strong { display: block; font-weight: 620; }
.dlp-trust__ref figcaption span { display: block; color: #616873; }
.dlp-trust__ref-price { font-weight: 600; color: #14171f !important; }

/* Bewertungen */
.dlp-trust__rating { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dlp-trust__stars { font-size: 19px; letter-spacing: .1em; color: #f0a202; }
.dlp-trust__rating-value { font-size: 21px; font-weight: 660; letter-spacing: -.01em; }
.dlp-trust__rating-meta { font-size: 14.5px; color: #616873; }

/* Ausklappbare Kurz-Infos (Barrieren im Funnel abräumen) */
.dlp-trust__faq { display: flex; flex-direction: column; gap: 9px; }
.dlp-trust__faq details { border: 1px solid #e2e5ea; border-radius: 12px; background: #fff; }
.dlp-trust__faq summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 17px;
  font-weight: 560;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.dlp-trust__faq summary::-webkit-details-marker { display: none; }
.dlp-trust__faq summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid #616873;
  border-bottom: 2px solid #616873;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.dlp-trust__faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.dlp-trust__faq summary:focus-visible { outline: 2px solid var(--dlpt-accent); outline-offset: 2px; border-radius: 11px; }
.dlp-trust__faq p { margin: 0; padding: 0 17px 16px; font-size: 15px; color: #4a515c; }

/* Ablauf */
.dlp-trust__steps { list-style: none; margin: 0; padding: 0; counter-reset: dlpt; display: grid; gap: 20px; }
.dlp-trust__steps li { position: relative; padding-left: 54px; counter-increment: dlpt; }
.dlp-trust__steps li::before {
  content: counter(dlpt);
  color: var(--dlpt-on-accent);
  position: absolute; left: 0; top: -2px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--dlpt-accent);
  font-weight: 660;
  font-size: 15px;
}
.dlp-trust__step-title { display: block; font-weight: 620; margin-bottom: 2px; }

/* CTA zurück zum Formular */
.dlp-trust__cta { text-align: center; margin: 26px 0 0; }
/* Der mittlere Knopf braucht Abstand zur folgenden Überschrift — er gehört
   zum Abschnitt davor, nicht zum Ablauf darunter. */
.dlp-trust__cta--mitte { margin-bottom: 44px; }
.dlp-trust__cta a {
  display: inline-block;
  min-height: 58px;
  padding: 17px 30px;
  background: var(--dlpt-accent);
  color: var(--dlpt-on-accent);
  font-weight: 620;
  font-size: 17px;
  text-decoration: none;
  border-radius: 12px;
  transition: filter .14s ease, transform .12s ease;
}
.dlp-trust__cta a:hover { filter: brightness(1.08); }

@media (min-width: 640px) { .dlp-trust { padding: 0 28px 48px; } }
/* Auf dem Handy mehr Luft zwischen Formular und Karte. Der Abstand verschiebt
   nur, WANN die echte Karte an der Streifenkante ankommt — nicht WO: Das
   Skript misst ihre Lage, der Tausch bleibt deckungsgleich. */
@media (max-width: 767px) {
  /* Kurze Schritte kleben sonst unter der Subline, und unter den Antworten
     bleibt ein Loch bis zum Streifen. Zentriert verteilt sich die freie
     Fläche nach oben und unten; lange Schritte füllen sie ohnehin. */
  .dlp-funnel__stage { justify-content: center; }
  .dlp-funnel__step { flex: 0 1 auto; }
  /* Frage 1: nicht mittig, sondern im oberen Viertel — zwei unsichtbare
     Flex-Polster teilen den Freiraum 1:3. Die Frage rückt damit um die
     Hälfte näher an das Intro heran. */
  .dlp-funnel--erste-frage .dlp-funnel__stage::before { content: ""; flex: 1 0 0; }
  .dlp-funnel--erste-frage .dlp-funnel__stage::after { content: ""; flex: 3 0 0; }
}

/* Ein Viertel des eingesparten Abstands wandert ÜBER das Intro — Headline und
   Subline bekommen Luft zur Kopfzeile mit Avatar und Logo. */
.dlp-funnel--erste-frage .dlp-funnel__intro { margin-top: clamp(10px, 3vh, 30px); }

@media (max-width: 767px) {
  .dlp-trust { margin-top: 100px; }
  /* Auf dem Handy wandert der Imagefilm vor die FAQ: Vier Minuten Video sind
     unterwegs kein Einstieg — die Stichpunkte übernehmen das, und wer mehr
     will, findet den Film weiter unten. Die Quellreihenfolge (Schreibtisch)
     bleibt: Stichpunkte, direkt darunter der Film. */
  .dlp-trust { display: flex; flex-direction: column; }
  .dlp-trust__section--video { order: 1; }
  .dlp-trust__section--faq { order: 2; }
  .dlp-trust__cta--unten { order: 3; }
}