/*
 * Landingpage Hueftendoprothetik.
 *
 * Umgesetzt nach dem Design-Mockup "Google-Ads-Landingpage Hüft-OP Wien"
 * (Design Component, November 2026). Die Werte stammen eins zu eins aus dessen
 * Inline-Styles, liegen hier aber als Tokens und Klassen.
 *
 * Gilt fuer beide Landingpages, Huefte und Knie. Der Praefix .lph- stammt aus
 * der Zeit, als die Huefte als Erste auf diesen Entwurf wechselte; er bleibt,
 * damit die Klassen nicht mit denen der Leistungsseiten kollidieren.
 *
 * Die Schrift kommt aus style.css (Figtree, selbst gehostet). Das Mockup laedt
 * sie von Google - das waere genau der DSGVO-Fehler, den wir am 29.10. auf
 * diesen Seiten behoben haben, und ist hier bewusst nicht uebernommen.
 */

html:has(.lph) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has(.lph) {
    scroll-behavior: auto;
  }
}

/* Abstand unter dem klebenden Kopf, damit Sprungziele nicht darunter landen.
   Der Kopf ist 67 Pixel hoch, auf schmalen Fenstern 51. */
.lph [id] {
  scroll-margin-top: 96px;
}

@media (max-width: 767px) {
  .lph [id] {
    scroll-margin-top: 76px;
  }
}

.lph {
  --lph-primary: #457585;
  --lph-accent: #6a96a5;
  --lph-dark: #0f2d34;
  --lph-tint: #ebf3f6;
  --lph-surface: #f8fafa;
  --lph-text: #3d3e43;
  --lph-muted: #555555;
  --lph-line: #dce4e7;
  --lph-line-soft: #e5e7eb;
  --lph-field: #c9d3d7;
  --lph-star: #b07d00;
  --lph-todo: #b4232a;

  /* Eigene Radius-Staffel des Entwurfs: gross, mittel, Eingabefeld. */
  --lph-r-lg: 16px;
  --lph-r-md: 12px;
  --lph-r-sm: 10px;

  --lph-max: 1240px;
  --lph-gutter: clamp(20px, 4vw, 48px);

  font-family: 'Figtree', system-ui, sans-serif;
  color: var(--lph-text);
  background: #ffffff;
  font-size: 17px;
  line-height: 27.5px;
  letter-spacing: 0.34px;
  display: block;
}

.lph *,
.lph *::before,
.lph *::after {
  box-sizing: border-box;
}

.lph p {
  margin: 0;
}

/* Knoepfe ausnehmen: .lph a waere sonst spezifischer als .lph-btn-primary und
   faerbte Schrift und Icon in der Primaerfarbe - auf primaerfarbenem Grund. */
.lph a:not(.lph-btn):not(.lph-fab) {
  color: var(--lph-primary);
}

.lph a:not(.lph-btn):not(.lph-fab):hover {
  color: var(--lph-dark);
}

.lph :focus-visible {
  outline: 3px solid var(--lph-primary);
  outline-offset: 3px;
}

/* Der Telefon-Knopf des Themes wird hier nicht gebraucht, der Kopf hat einen
   eigenen. Das alte Template blendete ihn inline aus; mit dem Neubau war er
   ploetzlich sichtbar. Gehoert ohnehin ganz entfernt, siehe DMF-165 Punkt 5. */
#wp-phone-fab {
  display: none !important;
}

/* Platzhalter, die noch bestaetigt werden muessen. Faellt im Layout auf. */
.lph-todo {
  color: var(--lph-todo);
}

.lph-todo-dark {
  color: #f2b8bb;
}

/* =========================
   Bausteine
   ========================= */

.lph-section {
  max-width: var(--lph-max);
  margin: 0 auto;
  padding: 88px var(--lph-gutter);
}

.lph-band {
  background: var(--lph-surface);
}

.lph-eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--lph-primary);
}

.lph-h1 {
  margin: 0;
  font-size: clamp(34px, 3.8vw, 48px);
  line-height: 1.2;
  font-weight: 600;
  color: var(--lph-text);
  letter-spacing: 0;
}

.lph-h1 span {
  color: var(--lph-accent);
}

.lph-h2 {
  margin: 0;
  font-size: 36px;
  line-height: 46px;
  font-weight: 600;
  color: var(--lph-accent);
}

.lph-h2-sm {
  font-size: 32px;
  line-height: 42px;
}

.lph-h3 {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

.lph-h4 {
  margin: 0;
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
}

.lph-lead {
  font-size: 19px;
  line-height: 29px;
  max-width: 600px;
}

.lph-strong {
  font-weight: 600;
}

.lph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--lph-r-md);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lph-btn-sm {
  height: 46px;
  padding: 0 20px;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}

.lph-btn-primary {
  background: var(--lph-primary);
  color: #ffffff;
}

.lph-btn-light {
  background: var(--lph-accent);
  color: var(--lph-dark);
  font-weight: 700;
}

.lph-btn-outline {
  background: transparent;
  color: #ffffff;
  border: 1px solid var(--lph-accent);
  letter-spacing: 0;
  text-transform: none;
}

.lph-btn-primary:hover,
.lph-btn-light:hover,
.lph-btn-outline:hover {
  background: var(--lph-dark);
  color: #ffffff;
}

/* =========================
   Kopf
   ========================= */

.lph-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lph-line-soft);
}

.lph-head-inner {
  max-width: var(--lph-max);
  margin: 0 auto;
  padding: 14px var(--lph-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lph-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.lph-brand-pre {
  font-size: 13px;
}

.lph-brand-name {
  font-size: 22px;
  font-weight: 500;
  color: var(--lph-accent);
  letter-spacing: 0;
}

.lph-head-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.lph-head-note {
  font-size: 14px;
  color: var(--lph-muted);
}

/* Der runde Knopf vertritt auf schmalen Fenstern den Knopf aus der Kopfzeile,
   die dort nur noch die Marke traegt. Breit gibt es ihn nicht. */
.lph-fab {
  /* Breit gibt es den Knopf nicht - dort steht er in der Kopfzeile.
     Das display setzt die Regel fuer schmale Fenster weiter unten. */
  display: none;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: var(--lph-primary);
  color: #ffffff;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(15, 45, 52, 0.26);
  transition: transform 0.2s ease, box-shadow 0.15s ease, opacity 0.2s ease, visibility 0.2s;
}

.lph-fab-aus {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

.lph-fab:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15, 45, 52, 0.32);
}

.lph-fab:focus-visible {
  outline: 3px solid rgba(69, 117, 133, 0.45);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .lph-fab {
    transition: none;
  }
}

/* =========================
   Hero
   ========================= */

.lph-hero {
  position: relative;
  isolation: isolate;
  /* Haelt die ueberstehende, weichgezeichnete Bildebene im Abschnitt. */
  overflow: hidden;
  background: linear-gradient(180deg, var(--lph-tint) 0%, var(--lph-surface) 100%);
}

/* Das Herofoto liegt als Textur zwischen Verlauf und Inhalt. Die Vorlage setzt
   --lph-hero-bild; ohne die Eigenschaft bleibt die Flaeche wie bisher, die
   Knieseite kann dasselbe mit ihrem eigenen Foto tun. Der negative z-index
   malt die Ebene ueber den eigenen Hintergrund, aber unter den Text - dafuer
   braucht .lph-hero mit isolation einen eigenen Stapelkontext. */
.lph-hero::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: -1;
  background-image: var(--lph-hero-bild, none);
  background-size: cover;
  background-position: 70% 38%;
  opacity: 0.16;
  /* Unscharf, damit kein Detail mit der Ueberschrift konkurriert. Der
     ueberstehende Rand faengt die weichen Kanten des Weichzeichners ab,
     geklammert wird er vom overflow des Abschnitts. */
  filter: blur(4px);
  /* Hinter der Textspalte deutlich schwaecher, zur rechten Seite hin voll. */
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.3) 38%, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 1) 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.3) 38%, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 1) 100%);
}

.lph-hero-inner {
  max-width: var(--lph-max);
  margin: 0 auto;
  padding: 64px var(--lph-gutter) 72px;
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}

.lph-hero-text {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lph-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  max-width: 600px;
}

.lph-trust-card {
  background: #ffffff;
  border-radius: var(--lph-r-md);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.lph-trust-icon,
.lph-card-icon {
  border-radius: 50%;
  background: var(--lph-tint);
  color: var(--lph-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lph-trust-icon {
  width: 40px;
  height: 40px;
}

.lph-trust-body {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.lph-trust-title {
  font-weight: 600;
}

.lph-trust-sub {
  font-size: 14px;
  color: var(--lph-muted);
}

.lph-rating {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lph-rating-body {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.lph-stars {
  color: var(--lph-star);
  letter-spacing: 2px;
}

.lph-stars-lg {
  font-size: 20px;
}

.lph-rating-text {
  font-size: 15px;
}

/* =========================
   Formularkarte
   ========================= */

.lph-formcard {
  flex: 1 1 400px;
  min-width: 0;
  max-width: 480px;
  background: #ffffff;
  border-radius: var(--lph-r-lg);
  box-shadow: 0 20px 50px rgba(15, 45, 52, 0.12);
  padding: 32px clamp(20px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lph-formcard-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lph-formcard-title {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: var(--lph-text);
}

.lph-formcard-intro {
  font-size: 15px;
  color: var(--lph-muted);
}

/* Kopf der Karte folgt dem Kontaktweg.
   Der gewaehlte Radioknopf steht im Formular, die Ueberschrift darueber -
   :has() am gemeinsamen Elternteil loest das ohne JavaScript. */
.lph-formcard [data-weg="mail"] {
  display: none;
}

.lph-formcard:has(input[type="radio"][value="E-Mail"]:checked) [data-weg="tel"] {
  display: none;
}

.lph-formcard:has(input[type="radio"][value="E-Mail"]:checked) [data-weg="mail"] {
  display: block;
}

.lph-formcard-foot {
  font-size: 14px;
  color: var(--lph-muted);
  text-align: center;
}

.lph-formcard-recht {
  margin-top: 6px;
  text-align: center;
  font-size: 13px;
  line-height: 19px;
  color: var(--lph-muted);
}

.lph-formcard-foot a {
  font-weight: 600;
}

/* WS Form an die Karte angleichen.
   Das WS-Form-Stylesheet laedt NACH diesem. Bei gleicher Spezifitaet gewinnt
   dann das spaetere, deshalb ueberall ein .wsf-form mehr im Selektor. */

.lph-formcard form.wsf-form {
  margin: 0;
}

/* Felder immer ueber die volle Breite. WS Form gibt Name und Telefonnummer
   ab 576px je die halbe Zeile (wsf-small-6); im Entwurf stehen sie
   untereinander. --wsf-c ist die Spaltenzahl, aus der WS Form die Flex-Basis
   rechnet - .wsf-fields ist flex, kein Grid.
   Das [class] steht da fuer die Spezifitaet: WS Forms Regel ist ebenfalls
   dreiklassig und laedt spaeter, bei Gleichstand gewinnt sonst sie. */
.lph-formcard .wsf-form .wsf-field-wrapper[class] {
  --wsf-c: 12;
}

/* Zustimmungszeile: Haken links, Text daneben, nicht darunter. */
.lph-formcard .wsf-form .wsf-field-wrapper:has(> input[type="checkbox"]),
.lph-formcard .wsf-form .wsf-checkbox {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.lph-formcard .wsf-form input[type="checkbox"] + .wsf-label {
  flex: 1;
  min-width: 0;
}

.lph-formcard .wsf-form .wsf-fields,
.lph-formcard .wsf-form .wsf-sections {
  gap: 16px;
}

.lph-formcard .wsf-form .wsf-section {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Nur den unteren Abstand setzen, nicht die Kurzform margin: WS Form rueckt
   das Label der Checkbox links ein, damit es nicht unter dem absolut
   positionierten Kaestchen liegt. Eine margin-Kurzform loescht das. */
.lph-formcard .wsf-form .wsf-label {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--lph-text);
  letter-spacing: 0;
}

.lph-formcard .wsf-form .wsf-field:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--lph-field);
  border-radius: var(--lph-r-sm);
  background: #ffffff;
  font-family: inherit;
  font-size: 16px;
  color: var(--lph-text);
  box-shadow: none;
}

.lph-formcard textarea.wsf-field {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
  line-height: 25px;
  resize: vertical;
}

.lph-formcard select.wsf-field {
  padding: 0 12px;
}

.lph-formcard .wsf-form .wsf-field:focus {
  outline: none;
  border-color: var(--lph-primary);
  box-shadow: 0 0 0 3px var(--lph-tint);
}

/* Zustimmungszeile.
   Die Checkbox selbst nicht anfassen: WS Form setzt sie auf position:absolute
   und appearance:none und zeichnet das Kaestchen selbst. Eigene Groessen- oder
   Abstandsangaben schieben das absolut positionierte Feld ueber den Text. */
.lph-formcard .wsf-form .wsf-field-wrapper:has(input[type="checkbox"]) .wsf-label {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--lph-muted);
}

.lph-formcard .wsf-form .wsf-field-wrapper:has(input[type="checkbox"]) .wsf-label a {
  font-weight: 400;
  text-decoration: underline;
}

.lph-formcard .wsf-form .wsf-required-wrapper {
  color: var(--lph-todo);
}

.lph-formcard .wsf-form .wsf-invalid-feedback {
  font-size: 13px;
  line-height: 18px;
  color: var(--lph-todo);
}

/* Kontaktweg-Umschalter (Rueckruf / E-Mail).
   Kein WS-Form-Reiter: mehrere Gruppen werden gemeinsam abgeschickt, ein
   Pflichtfeld im ausgeblendeten Reiter blockiert dann die Absendung. Statt
   dessen ein Radiofeld mit bedingter Logik, hier als Segmentleiste gestaltet.

   WS Form gibt das Feld so aus:
     div.wsf-field-wrapper
       div.wsf-label              <- Gruppenbeschriftung, hier unerwuenscht
       div[role=radiogroup]
         div > input.wsf-field + label.wsf-label   (je Option)
       div.wsf-invalid-feedback

   Die Klasse lph-switch greift an beiden Stellen, an denen man sie in WS Form
   setzen kann: am Field Wrapper oder am Feld selbst. */

.lph-formcard .wsf-form .wsf-field-wrapper.lph-switch > .wsf-label,
.lph-formcard .wsf-form .wsf-field-wrapper:has(input.lph-switch) > .wsf-label {
  display: none;
}

.lph-formcard .wsf-form .wsf-field-wrapper.lph-switch [role="radiogroup"],
.lph-formcard .wsf-form .wsf-field-wrapper:has(input.lph-switch) [role="radiogroup"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--lph-tint);
  border-radius: var(--lph-r-md);
}

/* Die Zeilen-Container flachlegen, damit Eingabe und Beschriftung
   direkte Rasterkinder bleiben. */
.lph-formcard .wsf-form .wsf-field-wrapper.lph-switch [role="radiogroup"] > div,
.lph-formcard .wsf-form .wsf-field-wrapper:has(input.lph-switch) [role="radiogroup"] > div {
  display: contents;
}

/* .wsf-field zusaetzlich im Selektor: WS Form setzt Breite, Hoehe, Deckkraft
   und den linken Aussenabstand mit derselben Spezifitaet und laedt spaeter. */
.lph-formcard .wsf-form input.wsf-field.lph-switch,
.lph-formcard .wsf-form .wsf-field-wrapper.lph-switch input.wsf-field[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

.lph-formcard .wsf-form input.wsf-field.lph-switch + .wsf-label,
.lph-formcard .wsf-form .wsf-field-wrapper.lph-switch input.wsf-field[type="radio"] + .wsf-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  margin: 0;
  margin-left: 0;
  border-radius: var(--lph-r-sm);
  background: transparent;
  color: var(--lph-muted);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lph-formcard .wsf-form input.wsf-field.lph-switch:checked + .wsf-label,
.lph-formcard .wsf-form .wsf-field-wrapper.lph-switch input.wsf-field[type="radio"]:checked + .wsf-label {
  background: #ffffff;
  color: var(--lph-text);
  box-shadow: 0 1px 3px rgba(15, 45, 52, 0.12);
}

.lph-formcard .wsf-form input.wsf-field.lph-switch:focus-visible + .wsf-label,
.lph-formcard .wsf-form .wsf-field-wrapper.lph-switch input.wsf-field[type="radio"]:focus-visible + .wsf-label {
  outline: 3px solid var(--lph-primary);
  outline-offset: 2px;
}

/* Optionalblock. Erscheint ueber die bedingte Logik von WS Form, sobald Name
   und ein Kontaktweg ausgefuellt sind. Das erste der drei Felder traegt die
   Trennlinie mit der Beschriftung, wie im Entwurf.

   Der Entwurf stellt Gelenk und Roentgen nebeneinander. Auf der 480 px breiten
   Karte bleiben dann 160 px je Feld - zu wenig fuer "Private Zusatz-
   versicherung (Sonderklasse)". Deshalb hier alle drei voll breit. */
.lph-formcard .wsf-form .lph-optional-erst {
  position: relative;
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--lph-line-soft);
}

.lph-formcard .wsf-form .lph-optional-erst::before {
  content: "Optional: hilft uns bei der Vorbereitung";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 10px;
  background: #ffffff;
  font-size: 13px;
  line-height: 20px;
  color: var(--lph-muted);
  white-space: nowrap;
}

/* Absendeknopf wie im Entwurf: volle Breite, 54px, versal. */
.lph-formcard .wsf-form .wsf-button,
.lph-formcard .wsf-form .wsf-button.wsf-button-primary {
  width: 100%;
  height: 54px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--lph-r-md);
  background: var(--lph-primary);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.lph-formcard .wsf-form .wsf-button:hover,
.lph-formcard .wsf-form .wsf-button.wsf-button-primary:hover {
  background: var(--lph-dark);
  color: #ffffff;
}

/* =========================
   Wahlarzt und Kosten
   ========================= */

.lph-costs {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}

.lph-costs-text {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lph-costs-text p {
  max-width: 480px;
}

.lph-costs-text .lph-btn {
  align-self: flex-start;
}

.lph-costs-cards {
  flex: 1 1 520px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.lph-card {
  background: var(--lph-surface);
  border-radius: var(--lph-r-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lph-card-icon {
  width: 44px;
  height: 44px;
}

.lph-card p {
  font-size: 16px;
  line-height: 25px;
}

/* =========================
   Ablauf
   ========================= */

.lph-steps {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.lph-section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.lph-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.lph-step {
  background: #ffffff;
  border-radius: var(--lph-r-lg);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lph-step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lph-primary);
  color: #ffffff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lph-step p {
  font-size: 15px;
  line-height: 24px;
}

/* Scrollgesteuerte Einblendung, nur wo der Browser sie kann. */
@supports (animation-timeline: view()) {
  @keyframes lph-step-in {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes lph-num-pop {
    0% { transform: scale(0.3); }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); }
  }

  .lph-steps-grid {
    view-timeline-name: --lph-steps;
    view-timeline-axis: block;
  }

  .lph-step,
  .lph-step-num {
    animation-timeline: --lph-steps;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
  }

  .lph-step { animation-name: lph-step-in; }
  .lph-step-num { animation-name: lph-num-pop; }

  .lph-step-1, .lph-step-1 .lph-step-num { animation-range: cover 8% cover 18%; }
  .lph-step-2, .lph-step-2 .lph-step-num { animation-range: cover 18% cover 28%; }
  .lph-step-3, .lph-step-3 .lph-step-num { animation-range: cover 28% cover 38%; }
  .lph-step-4, .lph-step-4 .lph-step-num { animation-range: cover 38% cover 48%; }
  .lph-step-5, .lph-step-5 .lph-step-num { animation-range: cover 48% cover 58%; }
}

@media (prefers-reduced-motion: reduce) {
  .lph-step,
  .lph-step-num {
    animation: none !important;
  }
}

/* =========================
   Symptome und Erstgespraech
   ========================= */

.lph-symptoms {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: stretch;
}

.lph-symptoms-text {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lph-symptom-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lph-symptom {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--lph-surface);
  border-radius: var(--lph-r-md);
}

.lph-symptom svg {
  flex-shrink: 0;
  color: var(--lph-accent);
}

.lph-bring {
  flex: 1 1 400px;
  min-width: 0;
  background: var(--lph-dark);
  color: #ffffff;
  border-radius: var(--lph-r-lg);
  padding: 40px clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lph-bring-title {
  font-size: 26px;
  line-height: 34px;
}

.lph-bring-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lph-bring-list > span {
  display: flex;
  gap: 12px;
}

.lph-bring-list svg {
  flex-shrink: 0;
  margin-top: 4px;
  color: #9fc1cd;
}

.lph-bring .lph-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* =========================
   Operateur
   ========================= */

.lph-doc {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
}

.lph-doc-image {
  flex: 1 1 380px;
  min-width: 0;
  max-width: 440px;
  border-radius: var(--lph-r-lg);
  overflow: hidden;
  background: var(--lph-tint);
}

.lph-doc-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 1120;
  object-fit: cover;
}

.lph-doc-text {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lph-doc-text > p {
  max-width: 560px;
}

.lph-facts {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.lph-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--lph-line);
}

.lph-facts > div:last-child {
  border-bottom: 1px solid var(--lph-line);
}

.lph-facts dt {
  color: var(--lph-muted);
}

.lph-facts dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.lph-facts dd.lph-fact-logo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.lph-facts dd.lph-fact-logo img {
  display: block;
  height: 22px;
  width: auto;
  border-radius: 2px;
}

/* =========================
   Bewertung
   ========================= */

.lph-review-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-top: 1px solid var(--lph-line);
  border-bottom: 1px solid var(--lph-line);
}

.lph-review-score {
  flex: 1 1 280px;
  min-width: 0;
  padding: 40px clamp(0px, 3vw, 40px) 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.lph-review-value {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.lph-review-num {
  font-size: 64px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -1px;
}

.lph-review-count {
  font-size: 15px;
  color: var(--lph-muted);
}

.lph-review-quote {
  flex: 2 1 480px;
  min-width: 0;
  margin: 0;
  padding: 40px 0 40px clamp(0px, 4vw, 56px);
  border-left: 1px solid var(--lph-line);
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.lph-review-quote > svg {
  flex-shrink: 0;
  opacity: 0.5;
  color: var(--lph-accent);
}

.lph-review-quote > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lph-review-quote p {
  font-size: 22px;
  line-height: 34px;
  font-weight: 300;
  color: var(--lph-text);
}

.lph-review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lph-review-author > div {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.lph-review-name {
  /* Groesse und Farbe ausdruecklich, sonst greift die Blockquote-Regel aus
     style.css und macht aus dem Namen eine 28px-Ueberschrift. */
  font-size: 16px;
  font-weight: 600;
  color: var(--lph-text);
}

.lph-review-source {
  font-size: 14px;
  color: var(--lph-muted);
}

/* =========================
   Haeufige Fragen
   ========================= */

.lph-faq {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.lph-faq-title {
  text-align: center;
}

.lph-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lph-faq-item {
  background: #ffffff;
  border-radius: var(--lph-r-md);
  padding: 0 24px;
}

.lph-faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
}

.lph-faq-item summary::-webkit-details-marker {
  display: none;
}

.lph-faq-item summary > span:first-child {
  flex: 1;
  font-weight: 600;
}

.lph-faq-plus {
  font-size: 26px;
  color: var(--lph-primary);
  transition: transform 0.2s ease;
}

.lph-faq-item[open] .lph-faq-plus {
  transform: rotate(45deg);
}

.lph-faq-item p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 25px;
}

.lph-faq-item p.lph-quelle {
  margin-top: -12px;
  font-size: 14px;
  line-height: 21px;
  color: var(--lph-muted);
}

/* =========================
   Abschluss und Fuss
   ========================= */

.lph-cta {
  background: var(--lph-dark);
  color: #ffffff;
}

.lph-cta-inner {
  max-width: var(--lph-max);
  margin: 0 auto;
  padding: 72px var(--lph-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
}

.lph-cta-text {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lph-cta-text .lph-h2 {
  color: #ffffff;
}

.lph-cta-text p {
  font-weight: 300;
  font-size: 18px;
  color: #d6e3e8;
}

.lph-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lph-cta-actions .lph-btn {
  height: 54px;
  padding: 0 26px;
}

.lph-foot {
  background: #e6e6e6;
}

.lph-foot-inner {
  max-width: var(--lph-max);
  margin: 0 auto;
  padding: 24px var(--lph-gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}

.lph-foot-links {
  display: flex;
  gap: 24px;
}

/* =========================
   Schmale Fenster
   ========================= */

@media (max-width: 767px) {
  .lph-section {
    padding: 56px var(--lph-gutter);
  }

  .lph-head-inner {
    padding: 9px var(--lph-gutter);
  }

  .lph-brand-pre {
    font-size: 11px;
  }

  .lph-brand-name {
    font-size: 18px;
  }

  .lph-head-right {
    display: none;
  }

  .lph-fab {
    display: inline-flex;
    right: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
  }

  .lph-hero-inner {
    padding: 40px var(--lph-gutter) 48px;
    gap: 36px;
  }

  .lph-hero::before {
    /* Schmal stehen Text und Formular untereinander, eine Maske nach rechts
       haette hier keinen Bezug mehr. Stattdessen durchgehend schwaecher. */
    background-position: 62% 32%;
    opacity: 0.08;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .lph-h2 {
    font-size: 30px;
    line-height: 40px;
  }

  .lph-h2-sm {
    font-size: 27px;
    line-height: 36px;
  }

  .lph-review-score {
    padding: 32px 0;
  }

  .lph-review-quote {
    padding: 32px 0;
    border-left: 0;
    border-top: 1px solid var(--lph-line);
  }

  .lph-review-quote p {
    font-size: 19px;
    line-height: 30px;
  }

  .lph-review-num {
    font-size: 52px;
  }

  .lph-cta-inner {
    padding: 48px var(--lph-gutter);
  }

  .lph-facts > div {
    flex-direction: column;
    gap: 2px;
  }

  .lph-facts dd {
    text-align: left;
  }

  .lph-facts dd.lph-fact-logo {
    justify-content: flex-start;
  }
}