/* ==========================================================================
   Landingpage Immobilienverrentung – lpjuhlreal.webnova.at
   Setzt auf site.css auf: dieselbe Marke (Gold auf Schwarz, Playfair +
   Montserrat), aber heller, luftiger und mit mehr Bewegung als die
   Hauptseite. Die Zielgruppe ist älter – deshalb durchgehend größere
   Schrift, ruhigere Kontraste und großzügige Tap-Flächen.
   ========================================================================== */

.lp {
  --lp-creme: #f7f4ec;
  --lp-creme-tief: #efe9db;
  --lp-tinte: #23211c;
  --lp-tinte-mild: #55504a;
  /* Dunkleres Gold für KLEINE Schrift auf hellem Grund. Das Marken-Gold
     #c6a75e bzw. #b0914a kommt auf Creme nur auf 2,7:1 – für die Zielgruppe
     dieser Seite zu wenig, gefordert sind 4,5:1. Große Flächen, Ränder,
     Ziffern und Haken behalten das helle Gold, dort gilt die Schwelle nicht. */
  --lp-gold-text: #7a642f;
  background: var(--lp-creme);
  color: var(--lp-tinte);
  font-size: clamp(1rem, .4vw + .92rem, 1.125rem);   /* eine Spur größer */
}

.lp .section { padding-block: clamp(3.5rem, 8vw, 7rem); }

/* Farben werden VERERBT, nicht auf p/h2 gesetzt.
   Zwei Gründe: Global gesetzt landete die dunkle Schrift auch in Fußzeile,
   WebNova-Leiste und Cookie-Hinweis – alle drei stehen auf Schwarz und waren
   praktisch unlesbar. Und ein Selektor wie ".lp main p" ist spezifischer als
   jede Komponentenklasse: Er hat die goldene Vorzeile und die Kontaktzeile
   überstimmt, obwohl beide ihre eigene Farbe mitbringen. Über den Container
   vererbt gewinnt dagegen immer die Komponente. */
.lp main { color: var(--lp-tinte-mild); }
.lp main :where(h1, h2, h3) { color: var(--lp-tinte); }
.lp main :where(a) { color: inherit; }

/* Abschnitte auf dunklem Grund kehren die Vererbung um. */
.lp .lp-hero, .lp .lp-vorteile, .lp .lp-kontakt { color: var(--on-dark-mute); }
.lp .lp-hero :where(h1, h2, h3),
.lp .lp-vorteile :where(h2, h3),
.lp .lp-kontakt :where(h2, h3) { color: var(--on-dark); }

/* Kleine goldene Vorzeile mit Strich – die Signatur dieser Seite. */
.lp-eyebrow {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--sans);
  font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lp-gold-text);
  margin-bottom: 1rem;
}
.lp-eyebrow::before {
  content: ''; width: 28px; height: 2px; flex: none; background: var(--gold);
}

.lp-kopf { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.lp-kopf h2 { font-size: clamp(1.75rem, 4vw, 2.9rem); line-height: 1.12; }
.lp-kopf__lead { margin-top: 1.1rem; font-size: 1.05rem; }
.lp-kopf--zentriert { max-width: 54ch; margin-inline: auto; text-align: center; }
.lp-kopf--zentriert .lp-eyebrow { justify-content: center; }

/* --- Kopfleiste ---------------------------------------------------------- */
.lp-header { background: var(--ink); }

/* --- Hero ---------------------------------------------------------------- */
.lp-hero {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: clamp(520px, 78vh, 780px);
  padding-block: clamp(3rem, 8vw, 6rem);
  background: var(--ink);
  overflow: hidden;
}
.lp-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
  z-index: -2;
}
.lp-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(85deg, rgba(9, 9, 9, .92) 0%, rgba(9, 9, 9, .74) 42%, rgba(9, 9, 9, .28) 78%),
    linear-gradient(to top, rgba(9, 9, 9, .7), transparent 45%);
}
.lp-hero__inner { max-width: 40rem; color: var(--on-dark); }
.lp-hero .lp-eyebrow, .lp-vorteile .lp-eyebrow, .lp-kontakt .lp-eyebrow { color: var(--gold-hi); }
.lp-hero h1 {
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.06;
  color: #fff;
  max-width: 15ch;
}
.lp-hero__lead {
  margin-top: 1.25rem;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
  max-width: 46ch;
}
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.lp-hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.lp-hero .btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.lp-hero__marken {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  margin-top: 2.25rem;
  font-size: .875rem; color: rgba(255, 255, 255, .8);
}
.lp-hero__marken li { display: flex; align-items: center; gap: .5rem; }
.lp-hero__marken li::before {
  content: ''; flex: none;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--gold);
  background:
    linear-gradient(45deg, transparent 45%, var(--gold) 45%, var(--gold) 55%, transparent 55%) no-repeat center / 8px 2px;
}

/* --- Vorspann ------------------------------------------------------------ */
.lp-intro { background: var(--lp-creme-tief); padding-block: clamp(2.5rem, 5vw, 4rem); }
.lp-intro__text {
  max-width: 60ch; margin-inline: auto; text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  line-height: 1.6;
  color: var(--lp-tinte);
}

/* --- Zweispalter (Text + Bild) ------------------------------------------- */
.lp-split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .lp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-split--dreh .lp-split__bild { order: -1; }
}
.lp-split__text h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.15; margin-bottom: 1.25rem; }
.lp-split__text p + p { margin-top: 1rem; }
.lp-split__bild img {
  width: 100%; height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 30px 60px -35px rgba(35, 33, 28, .55);
}
.lp-gross { font-size: 1.1rem; color: var(--lp-tinte) !important; font-weight: 500; }

/* --- Vorteile ------------------------------------------------------------ */
.lp-vorteile { background: var(--ink); }
.lp-vorteile h2, .lp-vorteile .lp-kopf h2 { color: var(--on-dark); }
.lp-vorteile__liste { display: grid; gap: 1px; background: var(--line-dark); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 780px) { .lp-vorteile__liste { grid-template-columns: 1fr 1fr; } }
.lp-vorteile__liste li {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.5rem clamp(1.25rem, 2.5vw, 2rem);
  background: #131313;
  color: var(--on-dark);
  font-size: 1rem; line-height: 1.6;
  transition: background .3s var(--ease);
}
.lp-vorteile__liste li:hover { background: #191919; }
.lp-vorteile__liste li::before {
  content: ''; flex: none; margin-top: .18em;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6a75e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 14px;
}

/* --- Ablauf: Treppe mit goldener Linie ----------------------------------- */
.lp-schritte { display: grid; gap: 0; counter-reset: schritt; }
.lp-schritt {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.1rem, 3vw, 2rem);
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.lp-schritt:last-child { padding-bottom: 0; }

/* Die Linie verbindet die Nummern. Sie besteht aus zwei Teilen: einer blassen
   Spur (::before), die immer da ist, und einer goldenen Füllung (::after), die
   erst herunterläuft, wenn der Schritt erreicht ist. So wächst die Treppe beim
   Scrollen mit, statt fertig dazustehen. */
.lp-schritt::before,
.lp-schritt::after {
  content: ''; position: absolute;
  inset-inline-start: calc(clamp(46px, 6vw, 60px) / 2 - 1px);
  top: clamp(46px, 6vw, 60px); bottom: 0;
  width: 2px;
}
.lp-schritt::before { background: rgba(35, 33, 28, .12); }
.lp-schritt::after {
  background: linear-gradient(var(--gold), rgba(198, 167, 94, .35));
  transform: scaleY(0); transform-origin: top;
  transition: transform .75s var(--ease) .12s;
}
.lp-schritt.is-in::after { transform: scaleY(1); }
.lp-schritt:last-child::before,
.lp-schritt:last-child::after { display: none; }
.lp-schritt__nr {
  position: relative; z-index: 1;
  width: clamp(46px, 6vw, 60px); height: clamp(46px, 6vw, 60px);
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: var(--lp-creme);
  font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700;
  color: var(--lp-gold-text);
}
.lp-schritt h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin-bottom: .5rem; padding-top: .5rem; }
.lp-schritt p { max-width: 62ch; }

/* --- Für wen: Karte über Bild -------------------------------------------- */
.lp-fuerwen { position: relative; isolation: isolate; background: var(--ink); overflow: hidden; }
.lp-fuerwen__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.lp-fuerwen::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(9, 9, 9, .82), rgba(9, 9, 9, .45));
}
.lp-fuerwen__karte {
  max-width: 44rem;
  background: rgba(247, 244, 236, .96);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
}
.lp-fuerwen__karte h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.18; margin-bottom: 1rem; }

.lp-haken { margin-top: 1.5rem; display: grid; gap: .9rem; }
.lp-haken li {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: .98rem; line-height: 1.6; color: var(--lp-tinte);
}
.lp-haken li::before {
  content: ''; flex: none; margin-top: .3em;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0914a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Häufige Fragen ------------------------------------------------------ */
.lp-fragen { background: var(--lp-creme-tief); }
.lp-faq { display: grid; gap: .75rem; max-width: 62rem; }
.lp-faq__eintrag {
  background: #fff;
  border: 1px solid rgba(35, 33, 28, .1);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.lp-faq__eintrag[open] { border-color: rgba(198, 167, 94, .55); box-shadow: 0 16px 34px -26px rgba(35, 33, 28, .5); }
.lp-faq__eintrag summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem clamp(1.1rem, 2.5vw, 1.6rem);
  cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: clamp(1.02rem, 1.8vw, 1.22rem); font-weight: 600;
  color: var(--lp-tinte);
  min-height: 56px;                 /* bequem zu treffen */
}
.lp-faq__eintrag summary::-webkit-details-marker { display: none; }
.lp-faq__eintrag summary::after {
  content: ''; flex: none;
  width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0914a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .3s var(--ease);
}
.lp-faq__eintrag[open] summary::after { transform: rotate(135deg); }
.lp-faq__antwort { padding: 0 clamp(1.1rem, 2.5vw, 1.6rem) 1.4rem; }
.lp-faq__antwort p { max-width: 70ch; }

/* --- Vertrauen ----------------------------------------------------------- */
.lp-person {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(35, 33, 28, .12);
}
.lp-person__bild { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex: none; }
.lp-person span { display: block; line-height: 1.45; }
.lp-person strong { display: block; font-family: var(--serif); font-size: 1.1rem; color: var(--lp-tinte); }
.lp-person span span { font-size: .88rem; color: var(--lp-tinte-mild); }
.lp-person a { display: inline-block; margin-top: .2rem; font-size: .9rem; font-weight: 600; color: var(--lp-gold-text); text-decoration: none; }
.lp-person a:hover { text-decoration: underline; }

/* --- Formulare ----------------------------------------------------------- */
.lp-kontakt { background: var(--ink); }
.lp-kontakt .lp-kopf h2 { color: var(--on-dark); }
.lp-kontakt .lp-kopf__lead { color: var(--on-dark-mute); }

.lp-formulare { display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }
@media (min-width: 940px) { .lp-formulare { grid-template-columns: 1fr 1fr; } }
.lp-formcard h3 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.25;
  margin-bottom: .6rem;
}
.lp-formcard h3 { color: var(--on-light) !important; }
.lp-formcard label { color: #4a4a4a; }
.lp-formcard__lead { font-size: .92rem; color: #5c5c5c !important; margin-bottom: 1.5rem; }
.lp-formcard .form__note { color: #5f5f5f !important; }
.lp-formcard .btn { width: 100%; justify-content: center; }

.field__opt { font-weight: 400; color: #6e6e6e; text-transform: none; letter-spacing: 0; }
.field__zaehler { margin: .35rem 0 0; font-size: .74rem; color: #6e6e6e; text-align: end; }

.lp-direkt {
  margin-top: clamp(1.75rem, 3vw, 2.5rem); text-align: center;
  color: var(--on-dark-mute); font-size: .95rem;
}
.lp-direkt a { color: var(--gold); font-weight: 600; text-decoration: none; }
.lp-direkt a:hover { text-decoration: underline; }

/* --- Hinweis zur Zusammenarbeit ------------------------------------------ */
.lp-hinweis { background: var(--lp-creme-tief); padding-block: clamp(2.5rem, 5vw, 4rem); }
.lp-hinweis__karte {
  max-width: 62rem; margin-inline: auto;
  border-inline-start: 3px solid var(--gold);
  padding: 1.25rem 0 1.25rem clamp(1.1rem, 2.5vw, 1.75rem);
}
.lp-hinweis__karte h2 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; margin-bottom: .6rem; }
.lp-hinweis__karte p { font-size: .95rem; max-width: 76ch; }

/* --- Fußzeile ------------------------------------------------------------ */
/* Auf der Hauptseite ist die Grundschrift hell und die Fußzeile erbt sie. Hier
   ist der Grundton dunkel – ohne diese Zeile stünden die Überschriften der
   Fußzeile fast unsichtbar auf dem schwarzen Grund (Kontrast 1,4). */
.lp-footer { background: var(--ink); color: var(--on-dark); }
.lp-footer h2 { color: var(--on-dark); }
.lp .g2-brandbar { color: var(--on-dark); }

/* --- Mitlaufender Knopf (nur Handy) -------------------------------------- */
.lp-sticky {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(11, 11, 11, .94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-dark);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
}
.lp-sticky[hidden] { display: none; }
.lp-sticky.is-da { transform: none; }
.lp-sticky .btn { width: 100%; justify-content: center; }
@media (min-width: 780px) { .lp-sticky { display: none; } }

/* Damit der mitlaufende Knopf die Fußzeile nicht verdeckt. */
@media (max-width: 779px) { .lp .lp-hinweis { padding-bottom: 6rem; } }

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

/* ==========================================================================
   Sanfte Bewegung
   Alles hier ist Zierde. Die Inhalte sind ohne sie vollständig da – versteckt
   wird nur, was unterhalb des Sichtfensters liegt, und einmal eingeblendet
   bleibt eingeblendet (siehe .reveal in site.css). Wer im Betriebssystem
   weniger Bewegung eingestellt hat, bekommt gar keine.
   ========================================================================== */

/* Der Hero fährt beim Laden gestaffelt herein – einmal, nicht am Scroll. */
@keyframes lpAuftritt {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.lp-hero .lp-eyebrow      { animation: lpAuftritt .7s var(--ease) both; }
.lp-hero h1               { animation: lpAuftritt .7s var(--ease) .08s both; }
.lp-hero__lead            { animation: lpAuftritt .7s var(--ease) .16s both; }
.lp-hero__actions         { animation: lpAuftritt .7s var(--ease) .24s both; }
.lp-hero__marken          { animation: lpAuftritt .7s var(--ease) .32s both; }

/* Der Hintergrund liegt eine Spur größer, damit der Parallax-Versatz aus
   site.js keine Kante freilegt. */
.lp-hero__bg { transform: scale(1.06); will-change: transform; }

/* Der goldene Strich der Vorzeile wächst, sobald der Abschnitt erscheint. */
.lp-eyebrow::before { transition: width .55s var(--ease) .12s; }
.reveal.vorbereitet .lp-eyebrow::before,
.lp-eyebrow.vorbereitet::before { width: 0; }

/* Bilder kommen minimal herangezoomt und legen sich beim Einblenden hin. */
.lp-split__bild img,
.lp-fuerwen__karte { transition: transform .9s var(--ease), opacity .7s var(--ease); }
.reveal.vorbereitet .lp-split__bild img,
.lp-split__bild.vorbereitet img { transform: scale(1.045); }

/* Auftritt eines Schrittes: die Ziffer setzt sich auf und füllt sich mit Gold,
   der Text rückt von rechts nach. Beides zusammen liest sich wie „jetzt bist du
   hier". Ausgelöst wird jeder Schritt einzeln, erst wenn er gut im Bild ist
   (data-reveal-solo in site.js). */
.lp-schritt__nr {
  transition: transform .55s var(--ease), background .55s var(--ease),
              color .55s var(--ease), box-shadow .55s var(--ease);
}
/* Die Zeile selbst bleibt sichtbar – sonst versteckt die allgemeine
   Einblendung die ganze Zeile und der Auftritt der einzelnen Teile geht darin
   unter. Sichtbar bleiben Ziffer und Linienspur, ERSCHEINEN tut der Text. */
.lp-schritt.reveal.vorbereitet { opacity: 1; transform: none; }
.lp-schritt.vorbereitet .lp-schritt__nr { transform: scale(.7); }
.lp-schritt.is-in .lp-schritt__nr {
  background: var(--gold); color: #2a220e;
  box-shadow: 0 0 0 7px rgba(198, 167, 94, .14);
}
.lp-schritt > div { transition: opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s; }
.lp-schritt.vorbereitet > div { opacity: 0; transform: translateX(18px); }

/* Vorteilskacheln heben sich beim Überfahren leicht an. */
.lp-vorteile__liste li { transition: background .3s var(--ease), transform .3s var(--ease); }
.lp-vorteile__liste li:hover { transform: translateY(-2px); }

/* Antwort im Fragenblock gleitet beim Öffnen herunter. */
@keyframes lpFaqAuf {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.lp-faq__eintrag[open] .lp-faq__antwort { animation: lpFaqAuf .34s var(--ease) both; }
.lp-faq__eintrag summary { transition: background .25s var(--ease); }
.lp-faq__eintrag summary:hover { background: rgba(198, 167, 94, .07); }

/* Formularkarten heben sich, sobald man in ihnen arbeitet. */
.lp-formcard { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.lp-formcard:focus-within { transform: translateY(-3px); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9); }

/* Die Person unten: das Porträt tritt beim Überfahren einen Hauch hervor. */
.lp-person__bild { transition: transform .4s var(--ease); }
.lp-person:hover .lp-person__bild { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .lp-hero .lp-eyebrow, .lp-hero h1, .lp-hero__lead,
  .lp-hero__actions, .lp-hero__marken { animation: none; }
  .lp-hero__bg { transform: none !important; }
  .lp-eyebrow::before { transition: none; }
  .lp-split__bild img, .lp-schritt__nr, .lp-vorteile__liste li,
  .lp-formcard, .lp-person__bild { transition: none; transform: none !important; }
  .lp-faq__eintrag[open] .lp-faq__antwort { animation: none; }
}