/* ════════════════════════════════════════════════════════════════
   Multi Clean — Landingpages (AIDA)
   Eigene Ebene über dem Design-System aus style.css. Farben, Schriften
   und Abstände kommen aus den dortigen Variablen — hier stehen nur die
   Bausteine, die es auf den normalen Seiten nicht gibt.

   Aufbau nach AIDA:
     .lp-hero    Attention — Versprechen, Vertrauen, Ansprechperson
     .lp-tiles   Interest  — Kacheln (Leistungen ODER Eigenschaften)
     .lp-sec     Desire    — Leistungsumfang, Ablauf, Ortsbezug
     .lp-close   Action    — Abschluss mit Person, Telefon und Offerte

   Mobil gilt die Hausregel: was paarweise nebeneinander passt, steht
   nebeneinander. Knopfpaar und Kacheln bleiben darum auch auf dem
   Telefon zweispaltig — gestapelt kostet das Paar rund 120 Pixel Höhe,
   nebeneinander 56.
   ════════════════════════════════════════════════════════════════ */

/* Auffangregel fuer Inline-Symbole: ein SVG ohne Mass rendert in seiner
   natuerlichen Groesse und sprengt die Zeile — genau so ist auf der
   ZL-Sammelseite ein Absatz von 183 auf 1'022 Pixel gewachsen. Steht
   bewusst ganz oben, damit jede spaetere Regel mit eigenem Mass gewinnt. */
.lp-hero svg, .lp-sec svg, .lp-close svg, .lp-tile svg { width: 1em; height: 1em; }

/* ── ATTENTION: Hero ─────────────────────────────────────────────
   Zwei Drittel Bild mit dem Versprechen darauf, ein Drittel Sandfeld,
   auf dem die dunkle Ansprechpersonen-Karte steht. Genau eine
   Bildschirmhöhe abzüglich Kopf- und Fussleiste: darunter beginnt
   sichtbar der nächste Abschnitt, statt ihn zu überlappen.
   svh statt vh, weil vh auf dem Telefon die eingefahrene Browserleiste
   mitrechnet und der Hero dann unter den Bildschirm reicht. */
/* ══ Hero als Kasten — Hausregel, gilt für JEDE Fassung ══════════
   Ein Hero der Design Zentrale wird bei MKurti NICHT randlos gesetzt,
   auch wenn sein Register-Eintrag «randlos» sagt. Er sitzt als Kasten
   im Papier: rund 70 vh hoch, abgerundet, mit Schatten und Luft zum Rand.
   Nachgeschlagen in references/design-zentrale-kurzcodes.md. */
.lp-hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
  display: flex; align-items: center;
  /* Keine feste Höhe mehr: die 60 px Polsterung oben und unten am Text
     bestimmen sie. Ein 70-vh-Boden liess unten mehr Luft stehen als oben
     und der Kasten wirkte kopflastig. */
  width: calc(100% - 2 * var(--pad));
  max-width: calc(var(--max-content) - 2 * var(--pad));
  margin: var(--lp-kasten-luft, 22px) auto 0;
  border-radius: var(--lp-kasten-rund, 22px);
  box-shadow: 0 22px 60px rgba(42,36,32,0.16);
}
/* Die Schräge steckt in der clip-path der Bildfläche, NICHT in einer
   gedrehten Fläche: eine Drehung würde die Schrift daneben mitkippen und
   den klebenden Kopf darüber abschalten. */
.lp-hero__schraege {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: 52%;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.lp-hero__schraege picture { display: block; height: 100%; }
.lp-hero__schraege img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; display: block; }
.lp-hero__bahn {
  position: relative; z-index: 1;
  width: 100%; max-width: 1100px; margin: 0 auto;
  padding: 0 32px;
}
.lp-hero__text { max-width: 52%; padding: 60px 0; }
.lp-hero__mobilbild { display: none; }
/* Kleingedruckte Zusage unter dem Knopfpaar — im Schnipsel die Zeile, die
   Frist und Unverbindlichkeit trägt. */
.lp-hero__zusage { margin-top: 18px; font-size: 13px; color: var(--slate); }

/* ── Ansprechperson als Leiste unter dem Hero ────────────────────
   Der Schnipsel hat für eine Karte keinen Platz. Der Aufbau kommt von
   Entwurf 01 «Zeile», die Espresso-Fassung von Entwurf 05. */
.lp-personbar {
  background: linear-gradient(158deg, var(--dark-1), var(--dark-2));
  color: #fff;
  width: calc(100% - 2 * var(--pad));
  max-width: calc(var(--max-content) - 2 * var(--pad));
  margin: var(--lp-kasten-luft, 22px) auto 0;
  border-radius: var(--lp-kasten-rund, 22px);
  box-shadow: 0 16px 40px rgba(42,36,32,0.16);
}
.lp-personbar__inner {
  max-width: 1100px; margin: 0 auto; padding: 16px 32px;
  display: grid; grid-template-columns: 58px auto minmax(0, 1fr) auto;
  gap: 18px; align-items: center;
}
.lp-personbar__foto {
  width: 58px; height: 58px; border-radius: 50%; overflow: hidden;
  background: var(--accent); flex: 0 0 auto;
  box-shadow: 0 0 0 4px rgba(194,107,60,0.20);
}
.lp-personbar__foto picture { display: block; height: 100%; }
.lp-personbar__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; display: block; }
.lp-personbar__wer { display: flex; flex-direction: column; gap: 2px; }
.lp-personbar__name { font-family: var(--font-heading); font-weight: 800; font-size: 15px; line-height: 1.2; }
.lp-personbar__rolle {
  font-family: var(--font-heading); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent-2);
}
.lp-personbar__satz { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.82); }
.lp-personbar__satz strong { color: #fff; font-weight: 700; }
/* Die Nummer steht schon im Hero — hier gehört der Weg zur Offerte hin,
   sonst bietet die Leiste dasselbe zweimal an. */
.lp-personbar__tat {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 22px; border-radius: 12px; white-space: nowrap;
  background: var(--accent); color: #fff; text-decoration: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
  transition: background .2s ease;
}
.lp-personbar__tat:hover { background: var(--accent-dark); }
.lp-personbar__tat svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Die Bewertung ist das Erste, was im Hero gelesen wird — sie steht darum als
   helle Karte auf dem dunklen Grund statt als schmale Versalzeile. Grosse Note
   links, Sterne und Quelle in der Mitte, Google-Wortmarke rechts: die Herkunft
   der Zahl ist damit auf einen Blick klar. */
.lp-note {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: 14px;
  padding: 10px 16px;
  margin-bottom: 22px;
  box-shadow: 0 8px 22px rgba(42,36,32,0.07);
}
.lp-note__wert {
  font-family: var(--font-heading);
  font-size: 24px; font-weight: 800; line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.lp-note__mitte { display: flex; flex-direction: column; gap: 3px; }
.lp-note__sterne { color: #E8A33D; font-size: 14px; letter-spacing: 2.5px; line-height: 1; }
.lp-note__quelle { font-size: 11.5px; line-height: 1; color: var(--gray-dark); }
.lp-note__quelle strong { color: var(--ink); font-weight: 700; }
.lp-note__marke {
  display: flex; align-items: center;
  padding-left: 14px; border-left: 1px solid var(--gray-mid);
}
.lp-note__marke svg { width: 54px; height: auto; }

.lp-hero__h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3.2vw, 2.55rem);
  font-weight: 800; line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: 16px;
}
.lp-hero__h1 { color: var(--ink); }
.lp-hero__h1 .ort { color: var(--accent); }
.lp-hero__sub {
  font-size: clamp(0.92rem, 1.2vw, 1.02rem);
  line-height: 1.65;
  color: var(--gray-dark);
  max-width: 46ch;
  margin-bottom: 26px;
}

/* Knopfpaar — bleibt auf jeder Breite nebeneinander */
.lp-cta-row { display: flex; gap: 10px; align-items: stretch; }
/* Neue Huellen der Fassung E. Am Bildschirm sind es blosse Bloecke —
   Karten und getoenter Grund kommen erst auf dem Telefon dazu. */
.lp-hero__tat { margin-top: 22px; }
.lp-hero__tat .lp-note { margin-bottom: 16px; }
.lp-hero__beleg { margin-top: 20px; }
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border-radius: 10px; border: 1px solid transparent;
  font-family: var(--font-heading); font-size: 13.5px; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.lp-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.lp-btn--solid { background: var(--accent); color: #fff; border-color: var(--accent); }
.lp-btn--solid:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-2px); }
.lp-btn--ghost { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.42); }
.lp-btn--ghost:hover { background: rgba(255,255,255,0.16); border-color: #fff; }
.lp-btn--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.lp-btn--dark:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-2px); }
.lp-btn--line { background: transparent; color: var(--ink); border-color: var(--gray-mid); }
.lp-btn--line:hover { border-color: var(--accent); color: var(--accent); }

/* Vertrauensmerkmale direkt unter dem Knopfpaar */
.lp-hero__trust {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 24px;
  list-style: none;
}
.lp-hero__trust li {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 500;
  color: var(--gray-dark);
}
.lp-hero__trust svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); }

/* Ansprechperson — Entwurf 05: Espresso statt Weiss, die Nummer als
   gefüllter Knopf. Auf dem Sandfeld setzt sie sich durch und macht den
   Anruf zur sichtbarsten Handlung im Hero. */
.lp-person {
  background: linear-gradient(158deg, var(--dark-1), var(--dark-2));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  padding: 22px;
  width: 100%; max-width: 320px;
  box-shadow: 0 22px 50px rgba(20,14,10,0.42);
  color: #fff;
  text-align: center;
}
.lp-person__foto {
  width: 96px; height: 96px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  border: 0;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(194,107,60,0.18);
}
.lp-person__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.lp-person__name { font-family: var(--font-heading); font-weight: 800; font-size: 16px; }
.lp-person__rolle {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent-2); font-family: var(--font-heading);
  margin-bottom: 12px;
}
.lp-person__zitat {
  font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.80);
  padding-top: 13px; border-top: 1px solid rgba(255,255,255,0.13);
  margin-bottom: 16px;
}
/* Der erste Satz ist die Zusage — er trägt das Gewicht. Der Nachsatz steht
   kursiv, damit das Auge die drei Ebenen ohne Anstrengung trennt. */
.lp-person__zitat strong { color: #fff; font-weight: 700; }
.lp-person__zitat em { font-style: italic; color: var(--accent-2); }
/* Die Nummer ist ein Knopf, kein Textlink: sie ist auf dem Telefon die
   zweite Handlung neben der Offerte und muss so aussehen. */
.lp-person__tel {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; border-radius: 12px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 17px;
  font-variant-numeric: tabular-nums;
  transition: background .2s ease;
}
.lp-person__tel svg { width: 17px; height: 17px; color: #fff; flex: 0 0 auto; }
.lp-person__tel:hover { background: var(--accent-dark); }
.lp-person__zeit { display: block; margin-top: 9px; font-size: 11px; color: rgba(255,255,255,0.55); }

/* Helle Fassung — im dunklen Abschluss-Streifen, wo eine Espresso-Karte
   im Grund verschwinden würde. */
.lp-person--hell {
  background: rgba(255,255,255,0.97);
  border-color: rgba(255,255,255,0.5);
  color: var(--ink);
}
.lp-person--hell .lp-person__foto { border-color: var(--accent); background: var(--soft); }
.lp-person--hell .lp-person__rolle { color: var(--slate); }
.lp-person--hell .lp-person__zeit { color: var(--slate); }

/* ══ WS-HE-11 «Einwand-Hero» ══════════════════════════════════
   Der Text steht unten, der Schleier trägt die Schrift. Genau EIN Knopf:
   der Kicker hat gerade drei Einwände weggenommen, eine Alternative daneben
   nähme dem Schwung wieder heraus. Die Nummer steht als Textlink daneben,
   der Beleg kommt NACH dem Knopf — er stützt die Entscheidung, er löst sie
   nicht aus. */
.lp-hero--einwand {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  background: var(--dark-1);
}
.lp-hero--einwand .lp-hero__bg { position: absolute; inset: 0; z-index: -1; }
.lp-hero--einwand .lp-hero__bg picture { display: block; height: 100%; }
.lp-hero--einwand .lp-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Gemessen: schwarz 60 % FLÄCHIG plus Verlauf. Ein Verlauf allein reicht
   nicht, weil sein Wert von der Stelle im Bild abhängt. */
.lp-hero__schleier {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.20) 100%),
    rgba(0,0,0,0.60);
}
.lp-hero__bahn--einwand { max-width: 1180px; padding: 0 44px 48px; }
.lp-hero__block { max-width: 46ch; }
.lp-kicker {
  font-family: var(--font-heading); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
  margin-bottom: 10px;
}
.lp-hero--einwand .lp-hero__h1 { color: #fff; }
.lp-hero--einwand .lp-hero__h1 .ort { color: var(--accent-2); }

/* Drei Sätze, die je einen Grund wegnehmen — kurz und mit Haken, nicht als
   Fliesstext, damit man sie im Vorbeigehen liest. */
.lp-einwaende { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; }
.lp-einwaende li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #fff; }
.lp-einwaende__haken {
  width: 21px; height: 21px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255,255,255,0.25); display: grid; place-items: center;
}
.lp-einwaende svg { width: 13px; height: 13px; }

.lp-tat { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; margin-top: 22px; }
.lp-tat__knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 24px; border-radius: 12px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-family: var(--font-heading); font-size: 15px; font-weight: 800;
  box-shadow: 0 12px 28px rgba(20,14,10,0.32);
  transition: background .2s ease, transform .2s ease;
}
.lp-tat__knopf:hover { background: var(--accent-dark); transform: translateY(-2px); }
/* Ein Knopf, eine Zeile — umgebrochen wirkt er wie zwei Angebote. */
.lp-tat__knopf { white-space: nowrap; }
.lp-tat__knopf svg { width: 17px; height: 17px; flex: 0 0 auto; }
.lp-tat__tel {
  color: #fff; font-size: 15px; font-weight: 600; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,0.42);
}
.lp-tat__tel:hover { text-decoration-color: #fff; }

.lp-beleg { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 11px; margin-top: 18px; }
.lp-beleg__sterne { color: #E8A33D; font-size: 15px; letter-spacing: 2px; }
.lp-beleg__wert { font-size: 13.5px; font-weight: 700; color: #fff; }
.lp-beleg__quelle { font-size: 13.5px; color: rgba(255,255,255,0.85); }

/* ── INTEREST: Kachelband unter dem Hero ─────────────────────
   Früher hing es 68 Pixel in den Hero hinein. Da der Hero jetzt genau eine
   Bildschirmhöhe misst, würde die Überlappung ihn wieder zerschneiden — die
   Kacheln beginnen darum sauber darunter. */
.lp-tiles-wrap { position: relative; z-index: 3; padding-top: 34px; }
.lp-tiles {
  display: grid;
  /* minmax(0,1fr): ohne die Null-Untergrenze zieht der laengste Kacheltext
     seine Spalte breiter und die Reihe steht schief. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.lp-tile {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: 14px;
  padding: 20px 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 30px rgba(42,36,32,0.07);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
a.lp-tile:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 18px 44px rgba(194,107,60,0.18); }
.lp-tile__icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--soft);
  color: var(--accent);
}
.lp-tile__icon svg { width: 20px; height: 20px; }
.lp-tile__icon img { width: 24px; height: 24px; object-fit: contain; }
.lp-tile__title { font-family: var(--font-heading); font-weight: 800; font-size: 15px; line-height: 1.3; }
.lp-tile__text { font-size: 13px; line-height: 1.55; color: var(--gray-dark); }
.lp-tile__more { margin-top: auto; padding-top: 4px; font-family: var(--font-heading); font-size: 12.5px; font-weight: 700; color: var(--accent); }

/* ══ Sektionen als Kästen mit Farbtreppe ═════════════════════
   Jede Sektion ist ein eigener Kasten in der Breite der Kacheln — wie der
   Hero — und trägt eine Spur mehr Sand als die vorige. Vier Stufen reichen:
   der Unterschied soll die Grenze zeigen, nicht sich selbst.
   Reihenfolge: 1 → 2 → 3 → 2 → 3 → 4 → 1 → dunkel. So stossen nie zwei
   gleiche Töne aneinander. */
:root {
  --lp-s1: #FBF7F1;
  --lp-s2: #F8F2E8;
  --lp-s3: #F4EDE0;
  --lp-s4: #F0E6D6;
}
/* Die Sektionen laufen randlos durch — nur die Farbe trennt sie. Als Kästen
   kam zur Seitenluft von .boxed noch der Kastenrand dazu; auf dem Telefon
   blieb dadurch zu wenig Zeile übrig. Kasten bleibt allein, was oben steht:
   der Hero und die Personenleiste. */

/* ── DESIRE: Inhaltsabschnitte ──────────────────────────────── */
.lp-sec { padding: 58px 0; }
.lp-sec--stufe2 { background: var(--lp-s2); }
.lp-sec--stufe3 { background: var(--lp-s3); }
.lp-seite > .section--soft { background: var(--lp-s4); }
.lp-seite > .section--plain { background: var(--lp-s1); }
.lp-seite > .lp-tiles-wrap { background: var(--lp-s1); padding: 30px 0; }
.lp-seite > .section { padding: 58px 0; }
.lp-sec__head { max-width: 720px; margin-bottom: 34px; }
.lp-sec h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 800; line-height: 1.22; letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: 14px;
}
.lp-sec h3 {
  font-family: var(--font-heading);
  font-size: 15.5px; font-weight: 800; line-height: 1.35;
  margin-bottom: 8px;
}
/* Rund 65 Zeichen je Zeile — darüber verliert das Auge beim Rücksprung
   den Anschluss. */
.lp-sec p { font-size: 15px; line-height: 1.8; color: var(--gray-dark); margin-bottom: 14px; max-width: 62ch; }
.lp-sec p:last-child { margin-bottom: 0; }
/* Der erste Absatz trägt die Antwort — er darf etwas mehr Gewicht haben.
   Das ist zugleich die Passage, die eine KI-Suche zitiert. */
.lp-split__text > p:first-of-type { font-size: 15.5px; color: var(--ink); }
.lp-sec strong { color: var(--ink); font-weight: 600; }

/* ══ WS-LE-04 «Zweispalter» ═══════════════════════════════════
   Erklärender Text und Handlungsaufruf links, die Leistungen als Liste
   rechts. Die Zeilen tragen Symbol, Titel und einen Zusatz — der Zusatz
   ist der Unterschied zur blossen Häkchenliste: er sagt, was gemeint ist. */
/* Senkrecht mittig: oben und unten gleich viel Luft — angeschlagen wirkte
   die Liste, als hinge sie an der Überschrift. */
.lp-zwei { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .lp-zwei { grid-template-columns: 1fr 1.1fr; gap: 54px; } }
.lp-zwei__text .lp-cta-row { margin-top: 24px; }
.lp-zwei__liste { display: grid; gap: 10px; }
.lp-zeile {
  display: flex; align-items: center; gap: 13px;
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: 12px;
  padding: 12px 15px;
}
.lp-zeile__ic {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 10px;
  background: rgba(194,107,60,0.11); color: var(--accent);
  display: grid; place-items: center;
}
.lp-zeile__ic svg { width: 19px; height: 19px; }
.lp-zeile__txt { min-width: 0; }
.lp-zeile__txt b { display: block; font-family: var(--font-heading); font-size: 14px; font-weight: 800; line-height: 1.3; }
.lp-zeile__txt small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--gray-dark); margin-top: 1px; }

/* Der Ortsabschnitt trägt rechts jetzt Foto und Fakten übereinander —
   das echte Arbeitsfoto hatte in WS-LE-04 keinen Platz mehr. */
.lp-lokal__seite { display: grid; gap: 16px; }

/* Text + Bild */
.lp-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; }
.lp-split--flip .lp-split__media { order: -1; }
/* Bild und Unterschrift sitzen in EINEM Rahmen. Vorher schwebte die
   Unterschrift mit eigenem Akzentstrich unter dem Bild und wirkte wie ein
   fremdes Element statt wie eine Bildlegende. */
.lp-figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-mid);
  box-shadow: 0 18px 50px rgba(42,36,32,0.10);
}
/* Das Bild bekommt einen festen Rahmen und füllt ihn — statt seine eigene
   Höhe der Sektion aufzuzwingen. Vorher riss ein Hochformat (960x1192) die
   Zeile auf 733 Pixel auf, während der Text daneben 350 hoch war und die
   Spalte halb leer blieb. --lp-fokus steuert je Bild, welcher Ausschnitt
   beim Beschneiden erhalten bleibt, damit keine Gesichter angeschnitten werden. */
.lp-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--lp-fokus, 50% 50%);
  display: block;
}
.lp-figure figcaption {
  padding: 13px 16px;
  font-size: 12.5px; line-height: 1.55; color: var(--gray-dark);
  border-top: 1px solid var(--gray-mid);
}

/* Leistungsumfang: jeder Eintrag eine Karte gleicher Höhe. Der Haken sitzt
   im getönten Quadrat — dieselbe Sprache wie die Kacheln unter dem Hero. */
.lp-checks {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 26px;
}
.lp-checks li {
  display: flex; align-items: center; gap: 11px;
  min-height: 58px;
  padding: 10px 14px 10px 10px;
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: 12px;
  font-size: 13.5px; line-height: 1.35; font-weight: 500;
  color: var(--ink);
}
/* min-width:0 ist der entscheidende Teil: ein Flex-Kind darf sonst nicht unter
   seine Inhaltsbreite schrumpfen und schiebt lange Komposita ueber den
   Kartenrand hinaus, statt sie umzubrechen. */
.lp-checks li > span {
  min-width: 0;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.lp-checks svg {
  width: 30px; height: 30px; padding: 7px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: rgba(194,107,60,0.11);
  color: var(--accent);
}

/* Ablauf — echte Reihenfolge, darum nummeriert */
.lp-steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-step {
  counter-increment: s;
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: 14px;
  padding: 20px 18px;
}
.lp-step::before {
  content: counter(s, decimal-leading-zero);
  display: block;
  font-family: var(--font-heading); font-size: 13px; font-weight: 800;
  letter-spacing: 1px; color: var(--accent);
  margin-bottom: 10px;
}
.lp-step p { font-size: 13.5px; line-height: 1.6; margin: 0; }

/* Ortsbezug */
.lp-local { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start; }
/* Bezeichnung ÜBER dem Wert. Rechtsbündig nebeneinander brach jeder längere
   Wert um («Zürcher Oberland, rund 30 km um / Fehraltorf») und die Spalte
   franste aus. Untereinander steht jeder Wert ruhig auf seiner Kante. */
.lp-facts { list-style: none; display: grid; gap: 1px; background: var(--gray-mid); border: 1px solid var(--gray-mid); border-radius: 14px; overflow: hidden; }
.lp-facts li { display: block; background: var(--white); padding: 12px 16px; }
.lp-facts .k {
  display: block;
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  letter-spacing: 1.3px; text-transform: uppercase; color: var(--slate);
  margin-bottom: 3px;
}
.lp-facts .v { display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; }

/* Belegleiste: echte Zahlen, keine Behauptungen */
.lp-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lp-proof__item { background: var(--white); border: 1px solid var(--gray-mid); border-radius: 14px; padding: 20px 18px; text-align: center; }
.lp-proof__num { font-family: var(--font-heading); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; color: var(--accent); line-height: 1; }
.lp-proof__label { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--gray-dark); }
/* Karten in den Sektionen stehen auf Weiss — der Sektionston bleibt der
   Grund, nicht die Karte. */
.lp-seite .lp-zeile, .lp-seite .lp-step, .lp-seite .lp-proof__item,
.lp-seite .lp-facts li, .lp-seite .lp-tile { background: var(--white); }

/* ── ACTION: Abschluss ──────────────────────────────────────── */
.lp-close { background: var(--dark-1); color: #fff; padding: 66px 0; }
.lp-close__inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: center; }
.lp-close h2 { font-family: var(--font-heading); font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 800; line-height: 1.2; margin-bottom: 12px; text-wrap: balance; }
.lp-close p { color: rgba(255,255,255,0.78); font-size: 15px; line-height: 1.75; margin-bottom: 24px; max-width: 560px; }
.lp-close__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--accent-2);
  margin-bottom: 14px;
}
.lp-close__badge svg { width: 15px; height: 15px; flex: 0 0 auto; }
.lp-close .lp-person { color: var(--ink); }

/* ── Mobil ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --lp-kasten-luft: 12px; --lp-kasten-rund: 16px; }
  /* EINE Linie — gemessen an der KARTENKANTE, nicht am Text darin. Vorher
     standen die Hero-Karten bei 10 px und die Kachelkarten bei 30: der Text
     lag zwar beidemal auf 30, die Kanten aber 20 px auseinander, und genau
     das sieht man. Jetzt beginnt alles mit einer Kante bei 20 px — ebenso
     jede Überschrift ohne Karte. */
  :root { --lp-linie: 20px; }
  .lp-seite .boxed { padding-left: var(--lp-linie); padding-right: var(--lp-linie); }
  .lp-hero__bahn--einwand { padding: 0 24px 34px; }
  .lp-hero--einwand { min-height: 70svh; }
  .lp-hero__block { max-width: none; }
  .lp-einwaende { gap: 7px 16px; margin-top: 16px; }
  .lp-einwaende li { font-size: 13.5px; }
  .lp-tat { gap: 12px; margin-top: 22px; }
  .lp-tat__knopf { flex: 1 1 auto; min-height: 50px; padding: 0 18px; font-size: 15px; }
  .lp-beleg { margin-top: 18px; }
  .lp-beleg__quelle, .lp-beleg__wert { font-size: 12.5px; }

  /* Auf dem Telefon zerfällt der Hero in ZWEI Karten: oben das Bild mit
     dem Titel darauf, darunter der helle Block. Seitlich 25 px bis zum
     Text — 10 px Kartenrand plus 15 px Polsterung. */
  .lp-hero {
    display: block; min-height: 0;
    background: transparent; box-shadow: none; border-radius: 0;
    width: auto; max-width: none; margin: 0; overflow: visible;
  }
  .lp-hero__schraege { display: none; }
  .lp-hero__bahn { padding: 0; }
  .lp-hero__text { max-width: none; padding: 0; }

  .lp-hero__kopf {
    position: relative;
    /* 32 statt 40 svh: die Bewertung steht nicht mehr im Bild, also
       braucht das Motiv weniger Hoehe. */
    min-height: 32svh;
    display: flex; flex-direction: column; justify-content: flex-end;
    margin: 20px var(--lp-linie) 0;
    padding: 15px 16px;
    border-radius: 18px;
    overflow: hidden;
    /* Schwaecherer Schatten: der alte fiel auf die Textkarte darunter und
       verdunkelte deren Anfang. */
    box-shadow: 0 10px 24px rgba(42,36,32,0.12);
  }
  .lp-hero__mobilbild { display: block; position: absolute; inset: 0; padding: 0; }
  .lp-hero__mobilbild picture { display: block; height: 100%; }
  .lp-hero__mobilbild img { width: 100%; height: 100%; aspect-ratio: auto;
    object-fit: cover; border: 0; border-radius: 0; }
  /* Der Schleier trägt die Schrift, nicht das Bild. */
  .lp-hero__kopf::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(34,29,25,0.86) 0%, rgba(34,29,25,0.58) 34%, rgba(34,29,25,0.34) 70%, rgba(34,29,25,0.22) 100%);
  }
  /* Das Bild ist ausgenommen — es liegt absolut hinter dem Schleier. Ohne
     :not() setzt diese Regel es zurueck auf relative und es rutscht als
     150px hoher Block in den Fluss. */
  .lp-hero__kopf > *:not(.lp-hero__mobilbild) { position: relative; z-index: 1; }
  .lp-hero__kopf .lp-hero__h1 { color: #fff; margin-bottom: 0; }
  .lp-hero__kopf .lp-hero__h1 .ort { color: var(--accent-2); }
  /* Fassung E: Text in eigener Karte, Knoepfe frei auf dem Papier,
     Belege in eigener getoenter Karte. Die Textkarte legt sich UEBER den
     Bildschatten (z-index), sonst liegt ein dunkler Streifen auf ihrem
     oberen Rand. */
  .lp-hero__rest {
    position: relative; z-index: 1;
    margin: 10px var(--lp-linie) 0;
    padding: 16px 16px 18px;
    background: var(--white);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(42,36,32,0.12);
  }
  .lp-hero__sub { margin-bottom: 0; }

  .lp-hero__tat { margin: 14px var(--lp-linie) 0; }
  .lp-hero__tat .lp-note { margin-bottom: 12px; }

  /* Belege in voller Breite untereinander. Als Zweierraster blieb bei drei
     Punkten eine leere vierte Zelle stehen. */
  .lp-hero__beleg {
    margin: 14px var(--lp-linie) 0;
    padding: 14px 15px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  }
  .lp-hero__beleg .lp-hero__trust {
    display: flex; flex-direction: column; gap: 11px; margin: 0;
  }
  .lp-hero__beleg .lp-hero__trust li { font-size: 12.5px; }
  /* Die Google-Zeile steht schon in der Bewertungskarte oben — hier wäre
     sie die zweite Nennung derselben Zahl und kostet nur Höhe. */
  .lp-hero__trust li:first-child { display: none; }
  .lp-personbar { width: auto; max-width: none; margin: 0 var(--lp-linie); }
  .lp-personbar__inner { grid-template-columns: 52px minmax(0, 1fr); gap: 12px 14px; padding: 16px; }
  .lp-personbar__foto { width: 52px; height: 52px; }
  /* Der Satz entfällt auf dem Telefon: Foto, Name und der Weg zur Offerte
     sind das, was hier zählt — der Rest kostet nur Höhe. */
  .lp-personbar__satz { display: none; }
  .lp-personbar__tat { grid-column: 1 / -1; }
  .lp-split, .lp-local, .lp-close__inner, .lp-zwei { grid-template-columns: 1fr; gap: 28px; }
  .lp-split--flip .lp-split__media { order: 0; }
  .lp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  /* Titel eine Stufe kleiner — ruhiger statt laut */
  .lp-hero__kopf { padding: 14px; min-height: 38svh; }
  .lp-hero__rest { padding: 16px 14px 18px; }
  .lp-hero__h1 { font-size: 1.42rem; line-height: 1.18; }
  .lp-hero__sub { font-size: 13px; line-height: 1.6; margin-bottom: 18px; }
  .lp-hero__zusage { margin: 12px var(--lp-linie) 60px; font-size: 11.5px; text-align: center; }
  .lp-note { gap: 9px; padding: 7px 11px; }
  .lp-note__wert { font-size: 20px; }
  .lp-note__sterne { font-size: 11px; }
  .lp-note__quelle { font-size: 10px; }
  .lp-note__marke svg { width: 40px; }
  .lp-hero__zusage { margin-top: 14px; font-size: 12px; }
  .lp-hero__sub { font-size: 14px; margin-bottom: 20px; }
  .lp-note { gap: 10px; padding: 8px 12px; border-radius: 12px; margin-bottom: 16px; }
  .lp-note__wert { font-size: 23px; }
  .lp-note__sterne { font-size: 12px; letter-spacing: 2px; }
  .lp-note__quelle { font-size: 10.5px; }
  .lp-note__marke { padding-left: 10px; }
  .lp-note__marke svg { width: 44px; }

  /* Knopfpaar bleibt nebeneinander: 56px statt 120px Höhe */
  .lp-cta-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .lp-btn { min-height: 50px; padding: 0 14px; font-size: 13px; }
  /* Der zweite Knopf zeigt auf dem Telefon nur das Hörersymbol. Gilt für
     beide Fassungen — die Schrägkante nutzt --line statt --ghost, und ohne
     diese Zeile brach die Nummer in drei Zeilen um. */
  .lp-cta-row .lp-btn--ghost,
  .lp-cta-row .lp-btn--line { padding: 0 16px; }
  .lp-cta-row .lp-btn--ghost span,
  .lp-cta-row .lp-btn--line span { display: none; }
  .lp-btn { white-space: nowrap; }

  .lp-hero__trust { gap: 6px 14px; margin-top: 18px; }
  .lp-hero__trust li { font-size: 11.5px; }

  /* Foto links, Name UND Rolle rechts daneben. Ohne die feste Spalten-
     zuweisung landet die Rolle in der 64px-Fotospalte und bricht dort in
     drei Zeilen um. */
  .lp-person { padding: 16px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px; text-align: left; align-items: center; max-width: none; }
  .lp-person__foto { width: 64px; height: 64px; margin: 0; grid-column: 1; grid-row: 1 / span 2; }
  .lp-person__name { grid-column: 2; grid-row: 1; align-self: end; }
  .lp-person__rolle { grid-column: 2; grid-row: 2; align-self: start; margin-bottom: 0; letter-spacing: 1px; }
  .lp-person__zitat, .lp-person__tel, .lp-person__zeit { grid-column: 1 / -1; }
  .lp-person__zitat { margin-top: 10px; }
  .lp-person__zeit { text-align: center; }

  .lp-tiles-wrap { padding-top: 34px; }
  .lp-tiles { gap: 10px; }
  /* In einer halbbreiten Kachel ist wenig Platz: Inhalt mittig, Titel
     kleiner mit Silbentrennung (sonst laeuft «Unterhaltsreinigung» ueber
     die Kante) und der Text auf hoechstens zwei Zeilen gekappt. */
  .lp-tile { padding: 14px 10px; gap: 5px; align-items: center; text-align: center; }
  .lp-tile__icon { width: 34px; height: 34px; border-radius: 9px; }
  .lp-tile__icon svg { width: 18px; height: 18px; }
  .lp-tile__icon img { width: 20px; height: 20px; }
  .lp-tile__title { font-size: 12.5px; line-height: 1.25; hyphens: auto; -webkit-hyphens: auto; }
  .lp-tile__text {
    font-size: 11.5px; line-height: 1.4; hyphens: auto; -webkit-hyphens: auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .lp-tile__more { font-size: 11px; padding-top: 2px; }

  .lp-sec { padding: 48px 0; }
  .lp-sec h2 { font-size: 1.28rem; }
  .lp-sec p { font-size: 14px; line-height: 1.72; }
  /* Zweierreihen bleiben — nur die Karten werden kompakter. */
  .lp-checks { gap: 7px; margin-top: 20px; }
  .lp-checks li { min-height: 48px; padding: 7px 9px 7px 7px; gap: 7px; font-size: 11.5px; line-height: 1.32; }
  .lp-checks svg { width: 21px; height: 21px; padding: 4px; border-radius: 6px; }
  .lp-facts li { padding: 10px 13px; }
  .lp-zeile { padding: 10px 12px; gap: 11px; }
  .lp-zeile__ic { width: 34px; height: 34px; border-radius: 9px; }
  .lp-zeile__ic svg { width: 17px; height: 17px; }
  .lp-zeile__txt b { font-size: 13.5px; }
  .lp-zeile__txt small { font-size: 12px; }
  .lp-facts .v { font-size: 13px; }
  .lp-step { padding: 14px 13px; }
  .lp-step p { font-size: 12.5px; }
  .lp-facts li { padding: 11px 14px; }
  .lp-facts .v { font-size: 12.5px; }
  .lp-proof__label { font-size: 11.5px; }
  .lp-close { padding: 44px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-btn, .lp-tile { transition: none; }
  a.lp-tile:hover, .lp-btn:hover { transform: none; }
}