/* ============================================================
   pleyer ai - Branchen-Landingpages (Immobilien, Finanz)
   Ergaenzung zu premium.css. Enthaelt NUR, was die
   Landingpage-Dramaturgie braucht und premium.css nicht hergibt:
   Schmerz-Liste, Demo-Block, Preisanker, Formular-Rahmen.
   Alle Farben, Easings und Abstaende kommen aus den Tokens in
   premium.css (:root), damit die Seiten wie der Rest der Site wirken.
   ============================================================ */

/* ---------- SICHERHEITSNETZ OHNE JS ----------
   premium.css setzt .reveal auf opacity: 0 und blendet erst per JS ein.
   Auf einer Landingpage waere eine leere Seite ohne JS fatal, deshalb
   greifen die Reveal-Regeln nur, wenn das Inline-Snippet im <head>
   die Klasse js gesetzt hat. */
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Notbremse, gesetzt von landingpage.js: macht ein Element hart sichtbar,
   ohne auf die Transition zu warten. Noetig, weil CSS-Transitions in
   unsichtbaren Tabs und In-App-Browsern nicht anlaufen und das Element sonst
   trotz is-in bei opacity 0 stehen bleibt. */
.reveal.reveal--sofort {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* ---------- HERO ZUSATZ: CTA-Reihe unter dem Subtext ----------
   Ueberschrift und Fliesstext im Seitenkopf sind mittig gesetzt. Beide Reihen
   hier sind Flex-Container, und text-align aus dem Eltern-Element wirkt auf
   Flex-Kinder NICHT -- ohne justify-content standen Knoepfe und
   Merkmalszeile deshalb linksbuendig unter einem mittigen Kopf. */
.lp-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

/* Vertrauenszeile direkt unter den Buttons: kurz, faktisch, ohne Kasten */
.lp-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 26px;
  font-family: 'Geist Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--fg-dim);
}
.lp-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lp-hero__meta span::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.8;
}

/* ---------- SCHMERZ ----------
   Bewusst keine Karten: eine gesetzte Liste mit Haarlinie,
   links die Zuspitzung, rechts der Absatz. Auf Mobil gestapelt. */
.lp-pain {
  border-top: 1px solid var(--hair);
}
.lp-pain__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: clamp(26px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--hair);
}
.lp-pain__lead {
  font-size: clamp(1.25rem, 2.4vw, 1.6875rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--fg);
  text-wrap: balance;
}
.lp-pain__lead .accent { color: var(--accent); }
.lp-pain__body {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--fg-muted);
  max-width: 64ch;
}
@media (min-width: 880px) {
  .lp-pain__item {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 4vw, 72px);
    align-items: start;
  }
}

/* ---------- DEMO ----------
   Ein Block, ein Button. Der Beweis steht fuer sich, keine Kachelwand. */
.lp-demo {
  position: relative;
  border: 1px solid var(--hair-strong);
  border-radius: 22px;
  background: var(--bg-card);
  padding: clamp(26px, 4vw, 52px);
  /* Der Schimmer aus ::after ragt per inset: auto -20% ueber die Karte hinaus.
     Mit overflow: hidden ist die Karte dadurch seitlich scrollbar (241px), und
     sobald der Abspielknopf rechts den Fokus bekommt, scrollt der Browser die
     Karte dorthin -- die Ueberschrift wird links abgeschnitten. overflow: clip
     schneidet genauso ab, macht die Karte aber NICHT scrollbar.
     hidden steht als Rueckfall fuer Browser ohne clip davor. */
  overflow: hidden;
  overflow: clip;
}
.lp-demo::after {
  /* leiser Lime-Schimmer aus der Ecke, gleiche Sprache wie die Bento-Karten */
  content: '';
  position: absolute;
  inset: auto -20% -60% auto;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  pointer-events: none;
}
.lp-demo__title {
  position: relative;
  font-size: clamp(1.4375rem, 2.8vw, 2.125rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  font-weight: 500;
  text-wrap: balance;
}
.lp-demo__body {
  position: relative;
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--fg-muted);
  max-width: 62ch;
}
.lp-demo__actions {
  position: relative;
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
/* .bento__play kommt aus den Bento-Kacheln und ist dort absolut in der Ecke
   platziert (premium.css: position absolute, top/left 22px). Ohne Ruecksetzung
   faellt der Knopf hier aus dem Textfluss: der Hinweis rutscht darueber und der
   Knopf haengt 22px eingerueckt darunter, statt neben ihm zu stehen. */
.lp-demo__actions .bento__play {
  position: static;
}
.lp-demo__hint {
  font-family: 'Geist Mono', monospace;
  font-size: 0.75rem;
  color: var(--fg-dim);
}

/* Ab 900px (derselbe Umbruchpunkt wie .lp-crm) wird die Karte zweispaltig:
   links der Text in Lesebreite, rechts die Wiedergabe als eigenes Feld.
   Vorher nutzte der Text nur rund die Haelfte der Karte, die rechte Haelfte
   stand leer, und Knopf samt Hinweis klebten unten links. */
@media (min-width: 900px) {
  .lp-demo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 310px);
    gap: clamp(28px, 3.5vw, 56px);
    align-items: center;
  }
  /* Das Transkript ist visually-hidden und damit absolut positioniert, es
     belegt also keine Rasterzelle. */
  .lp-demo__title,
  .lp-demo__body {
    grid-column: 1;
  }
  .lp-demo__actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: clamp(22px, 2.4vw, 30px);
    border: 1px solid var(--hair-strong);
    border-radius: 18px;
    background: var(--bg-card);
  }
  .lp-demo__hint {
    text-align: center;
  }
}

/* ---------- CRM ----------
   Zweispaltig: links die Erklaerung, rechts die Liste. Bewusst keine
   Kachelwand, der Abschnitt ist eine Einordnung und kein Produktregal. */
.lp-crm {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.lp-crm__title {
  margin-top: 18px;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 500;
  text-wrap: balance;
}
.lp-crm__body {
  margin-top: 18px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg-muted);
  max-width: 60ch;
}
.lp-crm__list {
  list-style: none;
  margin: 0;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--hair-strong);
  border-radius: 20px;
  background: var(--bg-card);
}
.lp-crm__list li {
  position: relative;
  padding: 14px 0 14px 26px;
  border-bottom: 1px solid var(--hair);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fg);
}
.lp-crm__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.lp-crm__list li:first-child { padding-top: 0; }
.lp-crm__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 21px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.lp-crm__list li:first-child::before { top: 7px; }
@media (min-width: 900px) {
  .lp-crm {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
}

/* Besonderheiten: Textbloecke mit Haarlinie oben, bewusst keine Karten.
   Zweispaltig ab Tablet, dreispaltig ab grossem Desktop. */
.lp-crm__extras {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(38px, 5vw, 72px);
}
.lp-crm__extra {
  padding-top: 20px;
  border-top: 1px solid var(--hair-strong);
}
.lp-crm__extra-title {
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--fg);
}
.lp-crm__extra-body {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--fg-muted);
}
@media (min-width: 720px) {
  .lp-crm__extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .lp-crm__extras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- ROI-RECHNER ----------
   Nutzt die .roi-Komponente aus premium.css unveraendert. Hier nur der
   Knopf darunter, der als <button> statt als <a> ausgezeichnet ist
   (er springt ins Formular und uebernimmt die Werte, kein Seitenwechsel). */
button.roi__cta {
  border: 0;
  cursor: pointer;
  font: inherit;
}

/* Groessere Trefferflaeche fuer Daumen: die Spur bleibt optisch 6px hoch,
   der anfassbare Bereich waechst auf 34px. Nur auf der Landingpage, weil der
   Traffic von Instagram und LinkedIn praktisch komplett mobil ist. */
#rechner .roi__slider {
  height: 34px;
  border-block: 14px solid transparent;
  background-clip: content-box;
}

/* ---------- FORMULAR ---------- */
.lp-form {
  max-width: 780px;
  margin: 0 auto;
}
.lp-form__note {
  margin-top: 18px;
  font-size: 0.84375rem;
  line-height: 1.6;
  color: var(--fg-dim);
  text-align: center;
}

/* ---------- RECHNER, AUSRICHTUNG ----------
   Der Abschnittskopf sitzt per .section__head--left an der Containerkante
   (premium.css: margin-left 0). Die Rechner-Karte .roi hat dagegen eine eigene
   Maximalbreite von 880px und steht mittig im 1320px-Container. Auf breiten
   Schirmen begann die Ueberschrift dadurch 164px weiter links als die Karte
   und wirkte verrutscht. Beide auf dieselbe linke Kante bringen; die Schrift
   bleibt linksbuendig wie in den uebrigen Abschnitten.
   Die 880px sind bewusst derselbe Wert wie .roi in premium.css -- aendert er
   sich dort, muss er hier mit. */
#rechner .section__head {
  max-width: 880px;
  margin-inline: auto;
}

/* ---------- REDUCED MOTION ----------
   premium.css deckt die eigenen Komponenten ab; hier nur die neuen. */
@media (prefers-reduced-motion: reduce) {
  .lp-demo::after { display: none; }
}

/* Der Cookie-Hinweis (.consent-banner, assets/consent.css) liegt auf
   z-index 150. Der Dialog muss beim ersten Besuch (noch keine
   Einwilligungswahl) darueber liegen, sonst deckt der Banner den unteren
   Teil des geoeffneten Players ab. Der Hintergrund des Dialogs deckt dabei
   den Banner ab, solange er offen ist; nach dem Schliessen ist der Banner
   wieder da. Die Coming-soon-Startseite hat dieselbe Regel in
   coming-soon/assets/briefing-demo.css. */
.audio-modal {
  z-index: 200;
}