/* Leistung · Webseite erstellen lassen · Hero (Owner: wdf-section-builder, Auftrag B-leistung-erstellen).
   1:1 aus dem abgenommenen Entwurf wdf/entwuerfe/leistung-erstellen/entwurf.css (Stand r2). 
   Mobil zuerst, Erweiterungen mit min-width 560 / 768 / 1024 / 1280. Statische Fassung = Endzustand jeder Bewegung. */
.le-held { position: relative; isolation: isolate; padding: var(--kopf-h) 0 var(--space-64); overflow-x: clip; }
.le-held-bild { position: relative; z-index: -1; height: clamp(300px, 84vw, 480px); overflow: hidden; background: var(--color-scene-ground); }
.le-held-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 84% 46%; }
.le-held-bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--color-bg-rgb), .6) 0%, rgba(var(--color-bg-rgb), 0) 24%),
    linear-gradient(0deg, var(--color-bg) 0%, rgba(var(--color-bg-rgb), .72) 20%, rgba(var(--color-bg-rgb), 0) 48%);
}
.le-held-raster { display: grid; gap: var(--space-24); margin-top: calc(-1 * var(--space-96)); }
.le-held-text { display: grid; gap: var(--space-16); align-content: start; min-width: 0; }

.le-h1 { max-width: 11ch; margin-top: var(--space-4); }
.le-unterzeile { max-width: 26ch; font: var(--font-weight-medium) var(--font-size-h3) / var(--leading-h3) var(--font-display); letter-spacing: var(--tracking-h3); color: var(--color-text); text-wrap: balance; }
.le-held .lead { max-width: 44ch; }

/* Preis sichtbar im ersten Bildschirm (Einwand „unklarer Endpreis“, Lead-Entscheidung Nachtrag 30) */
.le-preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-12); margin-top: var(--space-4); }
.le-preis-wert { font: var(--font-weight-medium) var(--font-size-body-lg) / var(--leading-none) var(--font-display); color: var(--color-text-secondary); }
.le-preis-wert b { font-size: var(--font-size-ui-value); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-h2); color: var(--color-text); font-variant-numeric: tabular-nums; }
.le-preis-zusatz { font-size: var(--font-size-caption); line-height: var(--leading-caption); color: var(--color-text-tertiary); text-wrap: pretty; }

.le-held-aktion { display: grid; gap: var(--space-12); justify-items: start; margin-top: var(--space-8); }
.le-held-aktion .btn { width: 100%; }
.le-vertrauen { margin-top: var(--space-4); }
.le-vertrauen .trenner { display: none; }

/* Angebots-Karte: auf dem Telefon unter dem Text (Preis steht schon im Text), ab 1024 px am Objekt */
.le-angebot { display: none; }
.le-angebot-karte { gap: var(--space-12); }
.le-angebot-zeilen { display: grid; margin: 0; }
.le-angebot-zeilen div { display: flex; justify-content: space-between; gap: var(--space-16); padding: var(--space-8) 0; border-top: 1px solid var(--color-line); font-size: var(--font-size-ui-sm); }
.le-angebot-zeilen dt { color: var(--color-text-tertiary); }
.le-angebot-zeilen dd { margin: 0; color: var(--color-text); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; text-align: right; }
.le-angebot-stempel { margin-top: var(--space-2); }

@media (min-width: 560px) {
  .le-held-aktion { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-24); }
  .le-held-aktion .btn { width: auto; }
  .le-vertrauen .trenner { display: block; }
}
@media (min-width: 1024px) {
  .le-held { min-height: min(100svh, 1000px); display: flex; align-items: center; padding: calc(var(--kopf-h) + var(--space-48)) 0 var(--space-64); }
  .le-held-bild { position: absolute; inset: 0; height: auto; }
  .le-held-bild img { object-position: 70% 48%; }
  .le-held-bild::after {
    background:
      linear-gradient(90deg, rgba(var(--color-bg-rgb), .96) 0%, rgba(var(--color-bg-rgb), .86) 30%, rgba(var(--color-bg-rgb), .35) 48%, rgba(var(--color-bg-rgb), 0) 60%),
      linear-gradient(180deg, rgba(var(--color-bg-rgb), .7) 0%, rgba(var(--color-bg-rgb), 0) 16%),
      linear-gradient(0deg, var(--color-bg) 0%, rgba(var(--color-bg-rgb), 0) 24%);
  }
  .le-held-raster { width: 100%; margin-top: 0; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--gap-hero); align-items: end; }
  .le-held-text { gap: var(--space-20); }
  .le-unterzeile { margin-top: calc(-1 * var(--space-4)); }
  .le-angebot { display: block; align-self: end; justify-self: start; width: min(var(--size-toast), 100%); margin-bottom: calc(-1 * var(--space-8)); }
}
/* 1024–1279 px: Objekt weiter nach rechts, Karte weg (der Preis steht im Text), damit nichts hinter der H1 liegt */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .le-held-bild { left: 34%; }
  .le-held-bild img { object-position: 86% 48%; }
  .le-held-bild::after {
    background:
      linear-gradient(90deg, var(--color-bg) 0%, rgba(var(--color-bg-rgb), .6) 22%, rgba(var(--color-bg-rgb), 0) 46%),
      linear-gradient(180deg, rgba(var(--color-bg-rgb), .7) 0%, rgba(var(--color-bg-rgb), 0) 16%),
      linear-gradient(0deg, var(--color-bg) 0%, rgba(var(--color-bg-rgb), 0) 24%);
  }
  .le-held-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .le-angebot { display: none; }
}
@media (min-width: 1280px) {
  .le-angebot { margin-left: var(--space-32); }
  .le-held-aktion .mikro { max-width: 24ch; }
}
/* niedrige Desktops: Hero kompakter, alles über dem Falz */
@media (min-width: 1024px) and (max-height: 820px) {
  .le-held { padding-top: calc(var(--kopf-h) + var(--space-24)); }
  .le-held-text { gap: var(--space-14); }
  .le-held .lead { display: none; }
}

/* Auftrag B-leistung-wordpress (Zusatz a): 1024–1279 px beginnt das Bild bei 34 % (Familienregel); seine linke Kante läuft weich aus,
   statt als harte Kante neben dem Text zu stehen (wie wdf/entwuerfe/leistung-wordpress/entwurf.css) */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .le-held-bild { -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--color-bg) 28%); mask-image: linear-gradient(90deg, transparent 0%, var(--color-bg) 28%); }
}