/* =====================================================
   Landingpages – Theme der öffentlichen Seite.
   Die Bausteine bringen KEINE eigenen Styles mit; sie setzen nur Klassen
   (lpCtl) und lesen hier. Dadurch kann eine Seite nicht "kaputt" aussehen.
   ===================================================== */

.lp {
  --lp-accent:  #1e1e1e;          /* wird von view.php aus accentColor() gesetzt */
  --lp-ink:     #16181d;
  --lp-muted:   #6b7280;
  --lp-soft:    #f4f5f7;
  --lp-beige:   #f3e9d8;
  --lp-dark:    #12151a;
  --lp-line:    rgba(0,0,0,.08);
  --lp-radius:  14px;
  --lp-wrap:    1080px;

  color: var(--lp-ink);
  font-family: var(--font-content, 'Lato', 'Segoe UI', system-ui, Arial, sans-serif);
  line-height: 1.65;
  background: #fff;
  /* Eigener Block-Formatierungskontext: hält die Außenabstände der Sektionen
     sauber getrennt (kein margin-collapse/Durchschlagen -> keine ungewollte
     Überlappung von Bausteinen, auch ohne Hintergrundfarbe). */
  display: flow-root;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
/* Formularelemente erben die Schrift NICHT automatisch -> überall Marken-Schrift
   (Lato). Verhindert, dass Buttons/Inputs auf Arial zurückfallen. */
.lp button, .lp input, .lp select, .lp textarea {
  font-family: var(--font-content, 'Lato', 'Segoe UI', system-ui, Arial, sans-serif);
}

/* ── Steuer-Klassen (lpCtl) ─────────────────────────
   Innenabstand MIT Hintergrundfarbe, Außenabstand OHNE. */
.lp-b { position: relative; --lp-pt: 0px; --lp-pb: 0px; --lp-mt: 0px; --lp-mb: 0px; }
/* Innen-/Außenabstand FLIESSEND (clamp): skaliert stufenlos mit der Bildschirm-
   breite – klein auf dem Handy, groß auf dem Desktop, KEINE harten Sprünge an
   Breakpoints. clamp(min, vw-Anteil, max): min = Handy-Wert, max = Desktop-Wert.
   Basis 400px..1400px Viewport. Weil Innen- UND Außenabstand über dieselben
   Variablen laufen, wirkt alles überall gleich – auch bei farbigen Bausteinen. */
.lp-pt-0{--lp-pt:0px}   .lp-pb-0{--lp-pb:0px}
.lp-pt-s{--lp-pt:clamp(14px, 3.2vw, 26px)}   .lp-pb-s{--lp-pb:clamp(14px, 3.2vw, 26px)}
.lp-pt-m{--lp-pt:clamp(24px, 6vw, 52px)}     .lp-pb-m{--lp-pb:clamp(24px, 6vw, 52px)}
.lp-pt-l{--lp-pt:clamp(32px, 9vw, 84px)}     .lp-pb-l{--lp-pb:clamp(32px, 9vw, 84px)}
.lp-pt-xl{--lp-pt:clamp(40px, 13vw, 124px)}  .lp-pb-xl{--lp-pb:clamp(40px, 13vw, 124px)}
.lp-b{ padding-top: var(--lp-pt); padding-bottom: var(--lp-pb); }
/* Außenabstand (ohne Farbe, echtes margin). Gleiche fließende Werte; zusätzlich
   in Variablen gespiegelt, damit lp-mcol sie in farbiges padding umlenken kann. */
.lp-mt-s{--lp-mt:clamp(14px,3.2vw,26px);  margin-top:var(--lp-mt)}    .lp-mb-s{--lp-mb:clamp(14px,3.2vw,26px);  margin-bottom:var(--lp-mb)}
.lp-mt-m{--lp-mt:clamp(24px,6vw,52px);    margin-top:var(--lp-mt)}    .lp-mb-m{--lp-mb:clamp(24px,6vw,52px);    margin-bottom:var(--lp-mb)}
.lp-mt-l{--lp-mt:clamp(32px,9vw,84px);    margin-top:var(--lp-mt)}    .lp-mb-l{--lp-mb:clamp(32px,9vw,84px);    margin-bottom:var(--lp-mb)}
.lp-mt-xl{--lp-mt:clamp(40px,13vw,124px); margin-top:var(--lp-mt)}    .lp-mb-xl{--lp-mb:clamp(40px,13vw,124px); margin-bottom:var(--lp-mb)}
/* Baustein MIT Hintergrundfarbe: der Außenabstand soll dieselbe Farbe tragen
   (kein weißer Streifen). Das margin wird zu 0, der Abstand stattdessen als
   farbiges padding oben/unten aufgeschlagen – Innen- + Außenabstand addiert. */
.lp-mcol{ margin-top:0; margin-bottom:0;
  padding-top: calc(var(--lp-pt) + var(--lp-mt));
  padding-bottom: calc(var(--lp-pb) + var(--lp-mb)); }

.lp-al-left   { text-align: left; }
.lp-al-center { text-align: center; }
.lp-al-right  { text-align: right; }
.lp-al-center .lp-btns { justify-content: center; }
.lp-al-right  .lp-btns { justify-content: flex-end; }
.lp-al-center .lp-sub, .lp-al-center .lp-tx { margin-left: auto; margin-right: auto; }

/* Hintergründe */
.lp-bg-soft   { background: var(--lp-soft); }
.lp-bg-beige  { background: var(--lp-beige); }
.lp-bg-dark   { background: var(--lp-dark); color: #f3f4f6; }
.lp-bg-accent { background: var(--lp-accent); color: #fff; }
.lp-bg-grad-soft   { background: linear-gradient(160deg, #fff, var(--lp-soft)); }
.lp-bg-grad-accent { background: linear-gradient(160deg, var(--lp-accent),
                     color-mix(in srgb, var(--lp-accent) 55%, #000)); color: #fff; }
.lp-bg-grad-dark   { background: linear-gradient(160deg, var(--lp-dark), #000); color: #f3f4f6; }
/* Auf dunklen Flächen müssen Text und Überschriften mitziehen */
.lp-bg-dark .lp-h1, .lp-bg-dark .lp-h2, .lp-bg-dark .lp-h3,
.lp-bg-accent .lp-h1, .lp-bg-accent .lp-h2, .lp-bg-accent .lp-h3,
.lp-bg-grad-accent .lp-h1, .lp-bg-grad-accent .lp-h2, .lp-bg-grad-dark .lp-h2 { color: inherit; }
.lp-bg-dark .lp-sub, .lp-bg-dark .lp-tx, .lp-bg-dark .lp-kick,
.lp-bg-accent .lp-sub, .lp-bg-accent .lp-tx, .lp-bg-accent .lp-kick,
.lp-bg-grad-accent .lp-sub, .lp-bg-grad-dark .lp-sub { color: rgba(255,255,255,.82); }
.lp-bg-dark .lp-feat, .lp-bg-dark .lp-srv, .lp-bg-dark .lp-tst,
.lp-bg-dark .lp-price { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
/* Auf dunklen Flaechen darf die Akzentfarbe nicht fuer Text gelten: ein dunkler
   Akzent (Standard hier ist Anthrazit) waere auf Dunkelgrau praktisch unsichtbar.
   Deshalb erben Zahlen, Kicker & Co. dort die helle Textfarbe. */
.lp-bg-dark .lp-stat-v, .lp-bg-dark .lp-kick, .lp-bg-dark .lp-srv-p,
.lp-bg-grad-dark .lp-stat-v, .lp-bg-grad-dark .lp-kick, .lp-bg-grad-dark .lp-srv-p,
.lp-bg-accent .lp-stat-v, .lp-bg-accent .lp-kick, .lp-bg-accent .lp-srv-p,
.lp-bg-grad-accent .lp-stat-v, .lp-bg-grad-accent .lp-kick, .lp-bg-grad-accent .lp-srv-p { color: inherit; }
.lp-bg-dark .lp-ico, .lp-bg-grad-dark .lp-ico,
.lp-bg-accent .lp-ico, .lp-bg-grad-accent .lp-ico {
  background: rgba(255,255,255,.12); color: inherit;
}
.lp-bg-dark .lp-faq, .lp-bg-grad-dark .lp-faq { border-color: rgba(255,255,255,.14); }
.lp-bg-dark .lp-faq summary::after, .lp-bg-grad-dark .lp-faq summary::after { color: inherit; }
.lp-bg-dark .lp-faq-a, .lp-bg-grad-dark .lp-faq-a { color: rgba(255,255,255,.75); }

/* ── Textauszeichnung ────────────────────────────────
   *kursiv* und [rot]…[/rot] in allen Textfeldern (siehe lpText() in render.php).
   Die Ampelfarben: dunkel genug zum Lesen auf Weiß. */
.lp-c-gruen { color: var(--lp-c-gruen, #15803d); }
.lp-c-gelb  { color: var(--lp-c-gelb,  #b45309); }
.lp-c-rot   { color: var(--lp-c-rot,   #b91c1c); }

/* Auf dunklen und farbigen Flächen sind dieselben Töne zu dunkel – dort die
   hellen Varianten, sonst verschwindet vor allem Rot im Hintergrund. */
.lp-bg-dark, .lp-bg-grad-dark, .lp-bg-accent, .lp-bg-grad-accent {
  --lp-c-gruen: #4ade80;
  --lp-c-gelb:  #fbbf24;
  --lp-c-rot:   #f87171;
}

/* Der Farbtext behält die Schriftstärke seiner Umgebung; nur Kursiv kippt.
   font-synthesis:style erzwingt einen schräg gestellten Schnitt auch dann,
   wenn die geladene Web-Schrift (z.B. Lato) gar keinen echten Italic mitbringt
   – sonst bliebe der Text optisch aufrecht und Kursiv sähe wirkungslos aus. */
.lp-tx em, .lp-sub em, .lp-h1 em, .lp-h2 em, .lp-h3 em, .lp-q-t em, em {
  font-style: italic;
  font-synthesis: style;
}

/* Innenbreite */
.lp-in { max-width: var(--lp-wrap); margin: 0 auto; padding: 0 20px; }
/* Breiter Baustein: innerer Container auf 1600px statt der normalen 1080px.
   Auf schmalen Fenstern greift ohnehin die 100%-Breite minus Padding. */
.lp-w-wide > .lp-in { max-width: 1600px; }

/* Inhaltshoehe: eine frei eingetragene Mindesthoehe (min-height:__vh, per Feld
   "minh" gesetzt). Der Baustein wird zum Flex-Container und zentriert seinen
   Inhalt vertikal – so steht z.B. ein kurzer Text mittig auf 70vh Hoehe. */
.lp-mh { display: flex; flex-direction: column; justify-content: center; }
.lp-mh > .lp-in { width: 100%; }

/* ── Typografie ─────────────────────────────────────
   clamp() statt Media-Queries: skaliert stufenlos mit der Fensterbreite. */
/* Alle Überschriften einheitlich groß: Hero (h1) wie die Sektionstitel (h2/h3).
   Wer einzelne größer will, nutzt das Feld „Überschrift-Größe". */
.lp-h1 { line-height: 1.14; font-weight: 800; margin: 0 0 14px; letter-spacing: -.02em; }
.lp-h2 { line-height: 1.2; font-weight: 800; margin: 0 0 14px; letter-spacing: -.01em; }
.lp-h3 { line-height: 1.3; font-weight: 700; margin: 0 0 10px; }
/* Einheitliche Überschrift-Größe je Baustein (Steuer-Feld „Überschrift-Größe").
   Die Klasse .lp-hs-l/-xl sitzt auf der Baustein-Section und setzt --lp-hs; die
   Überschrift UND der Untertitel darin skalieren über diese geerbte Variable.
   var(--lp-hs,1): fällt auf 1 zurück, wenn nichts gesetzt ist – font-size bricht
   nie weg. */
/* Einheitliche Grundgröße für ALLE Überschriften (h1/h2/h3). Der Faktor
   --lp-hs (aus „Überschrift-Größe") skaliert sie bei Bedarf pro Baustein. */
.lp-h1, .lp-h2, .lp-h3 { font-size: calc(clamp(24px, 3.4vw, 38px) * var(--lp-hs, 1)); }
.lp-hs-l  { --lp-hs: 1.25; }
.lp-hs-xl { --lp-hs: 1.6; }
/* Überschrift-Größe (--lp-hs) wirkt NUR auf die Überschrift (h1/h2/h3, oben).
   Untertitel-Größe (--lp-ss) wirkt auf Untertitel + Fließtext (.lp-sub/.lp-tx,
   nutzen die Variable direkt). Beide sind unabhängig einstellbar. */
.lp-ss-l  { --lp-ss: 1.28; }
.lp-ss-xl { --lp-ss: 1.6; }
/* Beschreibungs-/Fließtextgröße (.lp-tx) – getrennt vom Untertitel. */
.lp-ts-l  { --lp-ts: 1.28; }
.lp-ts-xl { --lp-ts: 1.6; }
/* Mobil die bewusste Vergrößerung (groß/sehr groß) DÄMPFEN: auf einem 400er-
   Screen wirkt 1,6x Untertitel/Text (oder Überschrift) zu wuchtig – z.B. das
   „Statement" (heading mit Untertitel-Größe sehr groß). Auf dem Handy reichen
   moderate Faktoren; Desktop bleibt wie eingestellt. Gilt einheitlich für ALLE
   Bausteine, die diese Größen nutzen. */
@media (max-width: 640px) {
  .lp-ss-l  { --lp-ss: 1.12; }
  .lp-ss-xl { --lp-ss: 1.28; }
  .lp-ts-l  { --lp-ts: 1.12; }
  .lp-ts-xl { --lp-ts: 1.28; }
  .lp-hs-l  { --lp-hs: 1.12; }
  .lp-hs-xl { --lp-hs: 1.28; }
}
/* Einheitlicher Kicker über ALLE Bausteine (Vorbild: Portfolio-Streifen).
   13px, Laufweite .18em, fett, Akzentfarbe. Andere Kicker-Klassen erben diese
   Werte (siehe cs-kick / cs-media-kick / ps-kicker). */
.lp-kick { font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lp-accent); margin-bottom: 14px; }
/* Fliesstext: 22px auf dem Desktop, skaliert stufenlos mit der Fensterbreite.
   Die WIRKSAME --lp-text-Definition steht am Dateiende (bei den fliessenden
   Schriftgroessen) – dort zentral aendern. Hier NICHT erneut setzen, sonst
   gaebe es zwei konkurrierende Werte. */
.lp-sub { font-size: calc(var(--lp-text) * var(--lp-ss, 1)); color: var(--lp-muted); margin: 0 0 6px; max-width: 62ch; }
.lp-tx { font-size: calc(var(--lp-text) * var(--lp-ts, 1)); color: var(--lp-muted); margin: 0 0 8px; max-width: 68ch; line-height: 1.7; }
/* "gross" setzt eine Stufe drauf */
.lp-tx-l { font-size: clamp(18px, 1.6vw + 12px, 26px); }

/* Absaetze im Text-Baustein: eine Leerzeile im Feld = ein neuer Absatz. */
.lp-tx > p { margin: 0 0 1.1em; }
.lp-tx > p:last-child { margin-bottom: 0; }

/* Fett im Fliesstext – etwas kraeftiger als die Umgebung, aber nicht schreiend. */
.lp-tx strong, .lp-sub strong { font-weight: 700; color: var(--lp-ink); }
.lp-bg-dark .lp-tx strong, .lp-bg-dark .lp-sub strong,
.lp-bg-grad-dark .lp-tx strong, .lp-bg-accent .lp-tx strong,
.lp-bg-grad-accent .lp-tx strong { color: inherit; }
/* ABER: fett INNERHALB einer Farb-Auszeichnung ([terracotta]**…**) behält die
   gewählte Farbe – sonst würde das Ink-Fett oben die Farbe überschreiben. */
.lp-tx [class^="lp-c-"] strong, .lp-tx [class*=" lp-c-"] strong,
.lp-sub [class^="lp-c-"] strong, .lp-sub [class*=" lp-c-"] strong { color: inherit; }

/* Zweispaltig – der Text fliesst wie in einer Zeitung von der linken in die
   rechte Spalte. Die Zeilenlaenge begrenzt hier die Spalte selbst, deshalb
   faellt die 68ch-Grenze weg. Unter 700px waeren die Spalten zu schmal zum
   Lesen: dort automatisch wieder einspaltig. */
@media (min-width: 700px) {
  .lp-tx-2col {
    max-width: none;
    columns: 2;
    column-gap: clamp(28px, 4vw, 56px);
  }
  /* Absaetze duerfen umbrechen – sonst bliebe ein einzelner langer Absatz
     komplett in der linken Spalte stehen. Nur einzelne Zeilen am Spaltenrand
     werden vermieden. */
  .lp-tx-2col > p { orphans: 2; widows: 2; margin-top: 0; }
}

/* ── Buttons (überall gleich) ───────────────────────── */
.lp-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: 999px; font-size: 15px; font-weight: 700;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  /* Ruhiger Button: nur ein sanfter Farbwechsel beim Hover, kein Springen,
     kein Schatten, kein Skalieren ("KI-Look" vermeiden). */
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.lp-btn:hover { opacity: .88; }
.lp-btn-accent { background: var(--lp-accent); color: #fff; }
.lp-btn-dark   { background: var(--lp-dark);   color: #fff; }
.lp-btn-light  { background: var(--lp-soft);   color: var(--lp-ink); }
.lp-btn-white  { background: #fff;             color: var(--lp-ink); }
.lp-btn-bd.lp-btn-accent { background: transparent; color: var(--lp-accent); border-color: var(--lp-accent); }
.lp-btn-bd.lp-btn-dark   { background: transparent; color: var(--lp-dark);   border-color: var(--lp-dark); }
.lp-btn-bd.lp-btn-light  { background: transparent; color: currentColor;     border-color: currentColor; }
.lp-btn-bd.lp-btn-white  { background: transparent; color: #fff;             border-color: #fff; }

/* ── Hero / Cover ───────────────────────────────────── */
/* Cover-Darstellung des Hero-/Cover-Bilds. !important + hohe Spezifität, weil eine
   gleichzeitig gesetzte Marken-Hintergrundfarbe (.lp-bgc-*{background:…}) die
   background-size als Shorthand sonst auf „auto" zurücksetzt -> Bild nicht cover. */
.lp-hero, .lp-cover,
.lp-hero.has-img, .lp-cover.has-img {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.lp-hero.has-img, .lp-cover.has-img { color: #fff; }
.lp-hero.has-img .lp-h1, .lp-cover.has-img .lp-h2 { color: #fff; }
.lp-hero.has-img .lp-sub, .lp-cover.has-img .lp-sub { color: rgba(255,255,255,.88); }
.lp-hero.has-img .lp-kick { color: #fff; }
/* Zwei Schichten: das eingestellte Abdunkeln (lp-ov, Inline-Stil) und ein dezenter
   Verlauf von unten. Der Verlauf sorgt dafuer, dass Text auch auf hellen Fotos
   lesbar bleibt, ohne das ganze Bild flach zu machen. */
.lp-ov { position: absolute; inset: 0; pointer-events: none; }
.lp-hero.has-img::after, .lp-cover.has-img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.05) 60%);
}
.lp-hero.has-img .lp-hero-in, .lp-cover.has-img .lp-in { position: relative; z-index: 2; }
.lp-hero.has-img .lp-h1, .lp-cover.has-img .lp-h2,
.lp-hero.has-img .lp-sub, .lp-cover.has-img .lp-sub { text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.lp-hero-in, .lp-cover .lp-in { position: relative; z-index: 1; }
.lp-hero-s    { min-height: 34vh; }
.lp-hero-m    { min-height: 52vh; }
.lp-hero-l    { min-height: 72vh; }
.lp-hero-full { min-height: 100vh; }
.lp-hero { display: flex; align-items: center; }
.lp-hero-in { width: 100%; }

/* ── Zweispaltig ────────────────────────────────────── */
.lp-split-in { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: center; }
.lp-split-right .lp-split-img { order: 2; }
.lp-split-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--lp-radius); display: block; }
.lp-split-txt .lp-btns { margin-top: 18px; }

/* Video im zweispaltigen Baustein. Eigene Datei (<video>) behaelt ihr echtes
   Seitenverhaeltnis – ein Hochformat-Clip bleibt hochkant, ein Querformat quer.
   Kein festes 16:9/cover, damit nichts beschnitten oder verzerrt wird. Die Hoehe
   wird nur nach oben begrenzt, damit ein Hochformat nicht die Seite sprengt. */
.lp-split-vid { width: 100%; display: flex; justify-content: center; }
.lp-vid { max-width: 100%; max-height: 80vh; display: block; border-radius: var(--lp-radius);
  background: #000; }
/* Eingebettete Videos (YouTube/Vimeo) sind praktisch immer quer -> 16:9. */
.lp-vid-embed { width: 100%; border-radius: var(--lp-radius); overflow: hidden; }
.lp-vid-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Video-Baustein: alle Abstaende und die Aufteilung sind im Editor einstellbar.
   Breite (Video/Text), Spaltenabstand und vertikale Ausrichtung kommen ueber
   Klassen am Grid. Normale Bild-Bausteine (ohne diese Klassen) bleiben 50/50. */

/* Videobreite. Die VIDEO-Spalte ist fest (Prozent), die TEXT-Spalte nimmt den
   Rest (1fr). So bleibt das Video bei groesserem Abstand gleich gross – nur der
   Text rueckt weg und wird schmaler (statt dass beide Spalten schrumpfen). */
.lp-vw-half  { grid-template-columns: 50% minmax(0, 1fr); }
.lp-vw-wide  { grid-template-columns: 60% minmax(0, 1fr); }
.lp-vw-xwide { grid-template-columns: 66.6% minmax(0, 1fr); }
.lp-vw-huge  { grid-template-columns: 75% minmax(0, 1fr); }
/* Video rechts (Video hat order:2): Video-Spalte ist die ZWEITE, Text die erste. */
.lp-split-right .lp-vw-half  { grid-template-columns: minmax(0, 1fr) 50%; }
.lp-split-right .lp-vw-wide  { grid-template-columns: minmax(0, 1fr) 60%; }
.lp-split-right .lp-vw-xwide { grid-template-columns: minmax(0, 1fr) 66.6%; }
.lp-split-right .lp-vw-huge  { grid-template-columns: minmax(0, 1fr) 75%; }

/* Randlos: der Baustein durchbricht die 1080px-Inhaltsbreite und nutzt fast die
   ganze Fensterbreite – so wird das Video richtig gross. Video bekommt 2/3. */
.lp-in.lp-vw-edge { max-width: min(1600px, calc(100% - 48px)); }
.lp-vw-edge { grid-template-columns: 66.6% minmax(0, 1fr); }
.lp-split-right .lp-vw-edge { grid-template-columns: minmax(0, 1fr) 66.6%; }

/* Ganze Breite: Video oben gross, Text darunter (eine Spalte). */
.lp-vw-full { grid-template-columns: 1fr; }
.lp-vw-full .lp-split-txt { text-align: center; max-width: 760px; margin: 0 auto; }
.lp-vw-full .lp-split-txt .lp-btns { justify-content: center; }

/* Abstand zwischen Video und Text (Spalten-Gap). */
.lp-vgap-s  { gap: 18px; }
.lp-vgap-m  { gap: 34px; }
.lp-vgap-l  { gap: 52px; }
.lp-vgap-xl { gap: 76px; }

/* Text vertikal an der Videohoehe ausrichten. */
.lp-vva-center { align-items: center; }
.lp-vva-top    { align-items: start; }
.lp-vva-bottom { align-items: end; }

/* Zweispaltig -> einspaltig. Breakpoint bei 1000px (statt 800): bei den
   ungleichen Splits (60/40, 66/33) wird die Textspalte sonst schon ab ~900px so
   schmal, dass jedes Wort umbricht und rechts viel Leerraum bleibt. Lieber früher
   untereinander: erst Bild/Video, dann Text in voller Breite. */
@media (max-width: 1000px) {
  .lp-split-in { grid-template-columns: 1fr; gap: 24px; }
  .lp-split-right .lp-split-img { order: 0; }
  /* Alle Video-Breiten auf eine Spalte zwingen (auch die Bild-Splits). */
  .lp-vw-half, .lp-vw-wide, .lp-vw-xwide, .lp-vw-huge, .lp-vw-edge, .lp-vw-full,
  .lp-split-right .lp-vw-wide, .lp-split-right .lp-vw-xwide,
  .lp-split-right .lp-vw-huge, .lp-split-right .lp-vw-edge { grid-template-columns: 1fr; }
  .lp-in.lp-vw-edge { max-width: var(--lp-wrap); }
  /* Einspaltig: Text nicht mehr vertikal zentrieren (sonst schwebt er), und der
     Text soll die volle Breite nutzen statt einer schmalen Spalte. */
  .lp-vva-center, .lp-vva-top, .lp-vva-bottom { align-items: stretch; }
  .lp-split-txt { max-width: none; }
}

/* ── Raster (Merkmale / Leistungen) ─────────────────── */
.lp-grid { display: grid; gap: 20px; margin-top: 28px; }
.lp-c2 { grid-template-columns: repeat(2, 1fr); }
.lp-c3 { grid-template-columns: repeat(3, 1fr); }
.lp-c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .lp-c3, .lp-c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-c2, .lp-c3, .lp-c4 { grid-template-columns: 1fr; } }

/* ── Instagram-Raster (Modul "instagram") ───────────── */
.ig-grid { display: grid; gap: 10px; margin-top: 28px; }
.ig-c3 { grid-template-columns: repeat(3, 1fr); }
.ig-c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) { .ig-c3, .ig-c4 { grid-template-columns: repeat(2, 1fr); } }
.ig-cell { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  background: var(--lp-soft, #f2f2f2); display: block; }
.ig-cell img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.ig-cell:hover img { transform: scale(1.05); }
/* Kleines Instagram-Glyph, das beim Hover auftaucht. */
.ig-cell-ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0; background: rgba(0,0,0,.28); transition: opacity .2s; }
.ig-cell-ic svg { width: 30px; height: 30px; }
.ig-cell:hover .ig-cell-ic { opacity: 1; }

.ig-follow { text-align: center; margin-top: 26px; }
/* Button im Seiten-Design (wie .lp-btn): dunkler Akzent, Pillenform, ruhiger
   Hover. Kein Instagram-Verlauf – fügt sich in die Seite ein. */
.ig-follow-btn { display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none;
  color: #fff; background: var(--lp-dark, #1e1e1e); border: 2px solid transparent;
  transition: background-color .15s ease, opacity .15s ease; }
.ig-follow-btn svg { width: 18px; height: 18px; }
.ig-follow-btn:hover { opacity: .88; }
/* Auf dunklen Hintergründen: heller Button. */
.lp-bg-dark .ig-follow-btn, .lp-bg-grad-dark .ig-follow-btn,
.lp-bg-accent .ig-follow-btn { background: #fff; color: var(--lp-ink, #16181d); }

/* ── Pakete-Raster (Modul "packages") ────────────────
   Weiße Karten mit Rahmen: Name groß mit Trennlinie, kurze Beschreibung,
   Häkchen-Liste, unten die Preise (untereinander) und ein Button. Alle Karten
   sind gleich hoch; der Fuß (Preise/Button) sitzt immer bündig unten. */
.pkg-grid { display: grid; gap: 22px; margin-top: 28px; align-items: stretch; }
.pkg-c2 { grid-template-columns: repeat(2, 1fr); }
.pkg-c3 { grid-template-columns: repeat(3, 1fr); }
.pkg-c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .pkg-c3, .pkg-c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pkg-c2, .pkg-c3, .pkg-c4 { grid-template-columns: 1fr; } }

.pkg-card { display: flex; flex-direction: column; background: var(--lp-card, #fff);
  border: 1px solid var(--lp-line, #e6e6e6); border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.pkg-img { aspect-ratio: 16/10; overflow: hidden; background: var(--lp-soft, #f2f2f2); }
.pkg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pkg-body { display: flex; flex-direction: column; flex: 1; padding: clamp(24px, 2.4vw, 38px); }
.pkg-head { flex: 1; }
/* Name groß, mit Trennlinie darunter (wie im Vorbild). */
.pkg-name { font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.01em;
  margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--lp-line, #e6e6e6);
  color: var(--lp-ink); line-height: 1.15; }
.pkg-descr { color: var(--lp-muted); font-size: 15.5px; line-height: 1.6; margin-bottom: 18px; }
.pkg-descr p { margin: 0 0 8px; } .pkg-descr p:last-child { margin-bottom: 0; }

.pkg-feats { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pkg-feats li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: var(--lp-ink); line-height: 1.4; }
/* Häkchen-Kästchen wie im Vorbild. */
.pkg-check { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; position: relative;
  border: 2px solid currentColor; border-radius: 4px; color: var(--lp-ink); }
.pkg-check::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Fuß: immer unten. Preise untereinander, dann Button. */
.pkg-foot { margin-top: 28px; }
.pkg-prices { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.pkg-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pkg-price-v { font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.02em; color: var(--lp-ink); }
.pkg-price-l { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-muted); }
.pkg-btn { margin-top: 4px; }
.pkg-pdf { text-align: center; margin-top: 30px; }
.pkg-btn .lp-btn { width: 100%; justify-content: center; }

.lp-ico { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: 11px; background: color-mix(in srgb, var(--lp-accent) 12%, transparent);
  color: var(--lp-accent); margin-bottom: 12px; }
.lp-ico svg { width: 22px; height: 22px; }
.lp-al-center .lp-ico { margin-left: auto; margin-right: auto; }

.lp-feat, .lp-srv { background: #fff; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: 22px; }
.lp-feat-t, .lp-srv-t { font-size: 16.5px; font-weight: 700; margin: 0 0 6px; }
.lp-feat-x, .lp-srv-x { font-size: 14px; color: var(--lp-muted); margin: 0; }
.lp-srv-p { margin-top: 12px; font-weight: 800; color: var(--lp-accent); }

/* Karten mit Button (Baustein „cards"). Look wie im Vorbild: heller Kasten mit
   dezentem Rahmen, Icon oben, Titel, Text, Outline-Button unten. Nutzt die
   Design-Variablen der Seite, damit es sich einfügt. Als Flex-Spalte, damit der
   Button unten bündig sitzt, auch wenn die Texte verschieden lang sind. */
.lp-card { background: #fff; border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
  padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; }
.lp-card .lp-ico { margin-bottom: 18px; }
.lp-card-t { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.01em; margin: 0 0 12px; color: var(--lp-ink); }
.lp-card-x { font-size: var(--lp-text); color: var(--lp-muted); line-height: 1.65; margin: 0; }
/* Button unten; margin-top:auto schiebt ihn an den Kartenfuß. */
.lp-card-btn { margin-top: auto; padding-top: 22px; }
.lp-card-btn .lp-btn { font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; }
/* Auf dunklem Kartenhintergrund (Baustein-BG dunkel) heller Rahmen/Text. */
.lp-bg-dark .lp-card, .lp-bg-grad-dark .lp-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.lp-bg-dark .lp-card-t, .lp-bg-grad-dark .lp-card-t { color: #fff; }

/* ── Ablauf / Zeitstrahl (Baustein „timeline") ──────────
   Schritte nebeneinander in gleich breiten Spalten. Über den Nummern-Kreisen
   läuft eine durchgehende Linie (nicht über den ersten/letzten Rand hinaus). */
.lp-tl { display: grid; grid-template-columns: repeat(var(--lp-tl-n, 4), 1fr); gap: 24px; margin-top: 32px; }
.lp-tl-step { position: relative; text-align: center; padding-top: 8px; }
.lp-tl-marker { position: relative; display: flex; justify-content: center; margin-bottom: 22px; }
/* Verbindungslinie: waagerecht auf Höhe der Kreis-Mitte, hinter den Kreisen.
   Läuft von Kreis-Mitte nach links und rechts bis zum Spaltenrand; beim ersten
   Schritt links, beim letzten rechts abgeschnitten (kein Überhang nach außen). */
.lp-tl-marker::before { content: ""; position: absolute; top: 50%; left: -50%; right: 50%;
  height: 2px; background: var(--lp-line); transform: translateY(-50%); z-index: 0; }
.lp-tl-step:first-child .lp-tl-marker::before { display: none; }
.lp-tl-num { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; background: var(--lp-accent); color: #fff;
  font-size: 20px; font-weight: 800; box-shadow: 0 0 0 6px var(--lp-bg, #fff); }
.lp-tl-time { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .02em;
  color: var(--lp-accent); background: color-mix(in srgb, var(--lp-accent) 12%, transparent);
  padding: 3px 11px; border-radius: 999px; margin: 0 0 10px; }
.lp-tl-t { font-size: clamp(17px, 1.6vw, 20px); font-weight: 800; letter-spacing: -.01em;
  margin: 0 0 8px; color: var(--lp-ink); }
.lp-tl-x { font-size: var(--lp-text); color: var(--lp-muted); line-height: 1.6; margin: 0; }
/* Optionaler Button mittig unter dem Zeitstrahl. */
.lp-tl-cta { margin-top: 34px; }
.lp-tl-cta .lp-btns { justify-content: center; margin-top: 0; }

/* ── Animation (per JS: [data-lp-tl] -> Schritte bekommen .on nacheinander) ──
   Startzustand nur wenn animiert wird (Klasse .lp-tl-anim vom JS gesetzt), damit
   ohne JS alles normal sichtbar bleibt. */
.lp-tl.lp-tl-anim .lp-tl-step { opacity: .35; transition: opacity .5s ease; }
.lp-tl.lp-tl-anim .lp-tl-num {
  transform: scale(.82); background: color-mix(in srgb, var(--lp-ink) 22%, transparent);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), background .45s ease, box-shadow .45s ease;
}
.lp-tl.lp-tl-anim .lp-tl-marker::before { background: var(--lp-line);
  transition: background .5s ease; }
.lp-tl.lp-tl-anim .lp-tl-step.on { opacity: 1; }
.lp-tl.lp-tl-anim .lp-tl-step.on .lp-tl-num {
  transform: scale(1); background: var(--lp-accent);
  box-shadow: 0 0 0 6px var(--lp-bg, #fff), 0 6px 18px color-mix(in srgb, var(--lp-accent) 35%, transparent);
}
.lp-tl.lp-tl-anim .lp-tl-step.on .lp-tl-marker::before {
  background: var(--lp-accent);
}
@media (prefers-reduced-motion: reduce) {
  .lp-tl.lp-tl-anim .lp-tl-step { opacity: 1; }
  .lp-tl.lp-tl-anim .lp-tl-num { transform: none; background: var(--lp-accent); }
}

/* ── Senkrechte Variante (nach unten laufend) ── */
/* Zweispaltig: Kopf (Kicker + Überschrift) links, Zeitstrahl rechts. Mittig
   ausgerichtet; auf schmalen Screens untereinander (Kopf oben). */
.lp-tl-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: 8px; }
.lp-tl-split .lp-tl-head { align-self: center; }
.lp-tl-split .lp-tl-head .lp-kick { margin-bottom: 10px; }
.lp-tl-split .lp-tl-main { min-width: 0; }
.lp-tl-split .lp-tl-vert { margin: 0; max-width: none; }
.lp-tl-split .lp-tl-cta { margin-top: 22px; }
.lp-tl-split .lp-tl-cta .lp-btns { justify-content: flex-start; }
@media (max-width: 820px) {
  .lp-tl-split { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .lp-tl-split .lp-tl-cta .lp-btns { justify-content: center; }
}

.lp-tl-vert { display: block; grid-template-columns: none; max-width: 720px; margin: 32px auto 0; }
.lp-tl-vert .lp-tl-step {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px; text-align: left;
  padding: 0 0 30px 0; align-items: start;
}
.lp-tl-vert .lp-tl-step:last-child { padding-bottom: 0; }
.lp-tl-vert .lp-tl-step { position: relative; }
.lp-tl-vert .lp-tl-marker { margin-bottom: 0; justify-content: flex-start; }
/* Senkrechte Verbindungslinie: vom Kreis dieses Schritts nach UNTEN zum nächsten.
   An den Schritt gehängt (nicht den Marker), damit die Höhe bis zum nächsten reicht. */
.lp-tl-vert .lp-tl-step::before {
  content: ""; position: absolute; left: 28px; top: 52px; bottom: -2px;
  width: 2px; background: var(--lp-line); transform: translateX(-50%); z-index: 0;
}
.lp-tl-vert .lp-tl-step:last-child::before { display: none; }
.lp-tl-vert .lp-tl-marker::before { display: none; }
.lp-tl-vert .lp-tl-body { padding-top: 4px; }
/* Animation greift auch senkrecht (Linie färbt sich mit dem aktiven Schritt). */
.lp-tl-vert.lp-tl-anim .lp-tl-step::before { transition: background .5s ease; }
.lp-tl-vert.lp-tl-anim .lp-tl-step.on::before { background: var(--lp-accent); }
@media (max-width: 560px) {
  .lp-tl-vert .lp-tl-step { grid-template-columns: 44px 1fr; gap: 14px; }
  .lp-tl-vert .lp-tl-num { width: 44px; height: 44px; font-size: 17px; }
  .lp-tl-vert .lp-tl-step::before { left: 22px; top: 44px; }
}

/* Dunkle Hintergründe: Linie/Kreisrand heller, Titel weiß. */
.lp-bg-dark .lp-tl-marker::before, .lp-bg-grad-dark .lp-tl-marker::before { background: rgba(255,255,255,.2); }
.lp-bg-dark .lp-tl-num, .lp-bg-grad-dark .lp-tl-num { box-shadow: 0 0 0 6px rgba(0,0,0,0); }
.lp-bg-dark .lp-tl-t, .lp-bg-grad-dark .lp-tl-t { color: #fff; }

/* Handy: Schritte untereinander mit senkrechter Linie links neben den Nummern. */
@media (max-width: 720px) {
  .lp-tl { grid-template-columns: 1fr; gap: 0; }
  .lp-tl-step { text-align: left; display: grid; grid-template-columns: 52px 1fr; gap: 16px;
    padding: 0 0 26px; }
  .lp-tl-marker { margin: 0; display: block; }
  /* Senkrechte Linie zwischen den Nummern (nicht unter dem letzten Schritt). */
  .lp-tl-marker::before { top: 52px; bottom: -26px; left: 50%; right: auto;
    width: 2px; height: auto; transform: translateX(-50%); }
  .lp-tl-step:first-child .lp-tl-marker::before { display: block; }
  .lp-tl-step:last-child .lp-tl-marker::before { display: none; }
  .lp-tl-body { padding-top: 12px; }
}

/* ── Making-of: gestapelte, gefächerte Bilder ───────────
   Die Bilder überlappen leicht (negativer Rand), sind minimal gedreht und
   heben sich beim Überfahren größer in den Vordergrund. */
.lp-mko .mko-head { text-align: center; max-width: 640px; margin: 0 auto 6px; }
.lp-mko .mko-head .lp-h2 { margin-bottom: 10px; }
.mko-stack { display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; padding: 40px 10px 20px; }
.mko-stack + .mko-stack { padding-top: 10px; }   /* Abstand zwischen 3er-Reihen */
.mko-item { position: relative; width: min(340px, 72vw); margin: 0 -70px; cursor: pointer;
  border-radius: 10px; overflow: hidden; background: #111;
  box-shadow: 0 18px 44px rgba(0,0,0,.28); border: 6px solid #fff;
  /* leichte Fächerung: ungerade nach rechts, gerade nach links kippen */
  transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 4deg));
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, z-index 0s;
  z-index: 1; }
.mko-item img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/5; }
.mko-item:hover { transform: rotate(0deg) scale(1.45) translateY(-14px); z-index: 5;
  box-shadow: 0 40px 90px rgba(0,0,0,.45); }
.mko-cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 26px 14px 10px; font-size: 13px; color: #fff; text-align: center;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  opacity: 0; transition: opacity .3s; }
.mko-item:hover .mko-cap { opacity: 1; }
/* Handy: nicht mehr überlappen/drehen – ruhig untereinander, gut antippbar. */
@media (max-width: 720px) {
  .mko-stack { flex-direction: column; padding: 20px 0; gap: 16px; }
  .mko-item { margin: 0; width: min(360px, 86vw); transform: none; }
  .mko-item:hover { transform: scale(1.02); }
  .mko-cap { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mko-item { transition: none; }
  .mko-item:hover { transform: rotate(0deg) scale(1.05); }
}

/* ── Zahlen ─────────────────────────────────────────── */
.lp-stats { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 26px; }
.lp-al-center .lp-stats { justify-content: center; }
.lp-stat-v { font-size: clamp(28px, 4vw, 44px); font-weight: 800; color: var(--lp-accent); line-height: 1.1; }
.lp-stat-l { font-size: 13.5px; color: var(--lp-muted); }

/* ── Bewertungen ────────────────────────────────────── */
.lp-tsts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 26px; }
.lp-tst { background: #fff; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: 22px; margin: 0; }
.lp-tst-q { margin: 0 0 14px; font-size: 15px; font-style: italic; }
.lp-tst-c { display: flex; align-items: center; gap: 11px; }
.lp-tst-c img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.lp-tst-n { font-weight: 700; font-size: 14px; }
.lp-tst-r { font-size: 12.5px; color: var(--lp-muted); }

/* ── Sterne (Bewertungen, Google-Look) ───────────────
   Jeder Stern ist ein grauer Umriss, darueber liegt ein goldener, dessen Breite
   die Fuellung steuert – so gehen auch halbe Sterne fuer den Durchschnitt. */
.lp-stars { display: inline-flex; gap: 2px; font-size: 17px; line-height: 1; }
.lp-star { position: relative; color: #dadce0; }          /* leerer Stern */
.lp-star-f {
  position: absolute; left: 0; top: 0; overflow: hidden;
  color: #fbbc04; white-space: nowrap;                    /* Google-Gold */
}
.lp-tst .lp-stars { margin-bottom: 12px; }

/* Kopf: grosse Note links, Sterne + Anzahl rechts */
.lp-tst-head { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.lp-tst-avg { font-size: 44px; font-weight: 800; line-height: 1; color: var(--lp-ink); }
.lp-tst-head .lp-stars { font-size: 22px; }
.lp-tst-count { font-size: 13px; color: var(--lp-muted); margin-top: 4px; }

/* Auf dunklem Grund bleibt der leere Stern sichtbar, die Note wird hell. */
.lp-bg-dark .lp-star, .lp-bg-grad-dark .lp-star,
.lp-bg-accent .lp-star, .lp-bg-grad-accent .lp-star { color: rgba(255,255,255,.28); }
.lp-bg-dark .lp-tst-avg, .lp-bg-grad-dark .lp-tst-avg,
.lp-bg-accent .lp-tst-avg, .lp-bg-grad-accent .lp-tst-avg { color: inherit; }

/* ── Galerie ────────────────────────────────────────── */
.lp-gal { display: grid; gap: 12px; margin-top: 26px; }
.lp-gi { margin: 0; }
.lp-gi img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--lp-radius); display: block; }
.lp-gi figcaption { font-size: 12.5px; color: var(--lp-muted); margin-top: 6px; }

/* ── Galerie: versetzte Reihe ("Hero-Reihe") ─────────
   Pro Reihe drei Bilder; das mittlere größer/höher, die äußeren kleiner und
   vertikal zentriert. Klick öffnet die Lightbox. Handy: untereinander. */
.lp-ghero-intro { margin-bottom: 30px; }
.lp-ghero-intro .lp-tx { margin-bottom: 0; }
.lp-al-center .lp-ghero-intro .lp-tx { margin-left: auto; margin-right: auto; }

/* KEIN Beschnitt. Die Bilder behalten ihr echtes Seitenverhältnis zu 100%
   (kein object-fit, keine feste aspect-ratio). Drei gleich breite Spalten;
   ein Querbild wird dadurch niedriger, ein Hochbild höher – ganz das echte
   Format. Äußere vertikal zentriert, damit ein hohes Mittelbild oben/unten
   herausragt. So wird NIE etwas abgeschnitten. */
.lp-ghero-row { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; }
.lp-ghgap-s .lp-ghero-row { gap: 12px; }
.lp-ghgap-m .lp-ghero-row { gap: 22px; }
.lp-ghgap-l .lp-ghero-row { gap: 34px; }
.lp-ghgap-s .lp-ghero-row + .lp-ghero-row { margin-top: 12px; }
.lp-ghgap-m .lp-ghero-row + .lp-ghero-row { margin-top: 22px; }
.lp-ghgap-l .lp-ghero-row + .lp-ghero-row { margin-top: 34px; }
/* Restreihen mit 1 oder 2 Bildern mittig statt gestreckt. */
.lp-ghero-n1 { grid-template-columns: minmax(0, 33%); justify-content: center; }
.lp-ghero-n2 { grid-template-columns: 1fr 1fr; justify-content: center; }

.lp-ghero-cell { margin: 0; min-width: 0; }
.lp-ghero-cell img {
  width: 100%; height: auto; display: block;   /* proportional, NIE beschnitten */
  box-shadow: 0 20px 50px -28px rgba(0,0,0,.5);
}
.lp-ghero-cell figcaption { font-size: 12.5px; color: var(--lp-muted); margin-top: 8px; text-align: center; }

@media (max-width: 760px) {
  .lp-ghero-row, .lp-ghero-n1, .lp-ghero-n2 { grid-template-columns: 1fr !important; }
  .lp-ghero-row + .lp-ghero-row { margin-top: 16px !important; }
}

/* ── Vorher/Nachher (before_after) ───────────────────*/
.lp-ba-head { margin-bottom: 24px; }
.lp-ba-w-plus { max-width: 1100px; margin-left: auto; margin-right: auto; padding: 0 20px; }
.lp-ba-w-wide { max-width: 1600px; margin-left: auto; margin-right: auto; padding: 0 20px; }
.lp-ba-w-full { max-width: none; margin: 0; padding: 0 40px; }
.lp-ba {
  --ba: 50%;
  position: relative; display: grid; width: 100%; overflow: hidden; border-radius: 6px;
  user-select: none; touch-action: pan-y; line-height: 0;
}
.lp-ba-img { grid-area: 1 / 1; width: 100%; height: auto; display: block; pointer-events: none; }
/* Beide Bilder liegen exakt übereinander (Grid). Das Vorher-Bild wird rechts vom
   Regler abgeschnitten – per clip-path, das ist deckungsgleich und robust. */
.lp-ba-before { clip-path: inset(0 calc(100% - var(--ba)) 0 0); }
.lp-ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--ba); width: 44px;
  transform: translateX(-50%); cursor: ew-resize; z-index: 3;
  display: flex; align-items: center; justify-content: center;
}
.lp-ba-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  transform: translateX(-50%); background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.lp-ba-knob { position: relative; width: 40px; height: 40px; border-radius: 999px;
  background: #fff; color: #1a1a1a; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(0,0,0,.35); }
.lp-ba-handle:focus-visible { outline: none; }
.lp-ba-handle:focus-visible .lp-ba-knob { box-shadow: 0 0 0 3px var(--lp-accent), 0 3px 12px rgba(0,0,0,.35); }
.lp-ba-label {
  position: absolute; bottom: 12px; z-index: 2; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: rgba(0,0,0,.55); padding: 5px 11px; border-radius: 999px; line-height: 1;
}
.lp-ba-label-b { left: 12px; }
.lp-ba-label-a { right: 12px; }

/* ── Einzelnes Bild (single_image) ───────────────────*/
.lp-si-head { margin-bottom: 24px; }
/* „Etwas breiter": ragt nur sanft über die Textspalte hinaus (wie WordPress „wide"). */
.lp-si-w-plus { max-width: 1100px; margin-left: auto; margin-right: auto; padding: 0 20px; }
.lp-si-w-wide { max-width: 1600px; margin-left: auto; margin-right: auto; padding: 0 20px; }
.lp-si-w-full { max-width: none; margin: 0; padding: 0 40px; }
.lp-si-fig { margin: 0; }
.lp-si-fig img { width: 100%; height: auto; display: block; border-radius: 6px; }
.lp-si-fig.is-zoom img { cursor: zoom-in; transition: transform .45s ease, box-shadow .3s ease; }
.lp-si-fig.is-zoom:hover img { transform: scale(1.01); box-shadow: 0 20px 50px -26px rgba(0,0,0,.5); }
.lp-si-fig figcaption { font-size: 12.5px; color: var(--lp-muted); margin-top: 8px; text-align: center; }
/* Beschnitt (Seitenverhältnis): Bild füllt den festen Rahmen, Ausschnitt per object-position. */
.lp-si-fig.lp-si-r img { height: 100%; object-fit: cover; object-position: center; }
.lp-si-r-3x2  { aspect-ratio: 3/2; }
.lp-si-r-2x3  { aspect-ratio: 2/3; max-width: 620px; margin-inline: auto; }
.lp-si-r-16x9 { aspect-ratio: 16/9; }
.lp-si-r-1x1  { aspect-ratio: 1/1; max-width: 760px; margin-inline: auto; }
.lp-si-r-4x5  { aspect-ratio: 4/5; max-width: 680px; margin-inline: auto; }
@media (max-width: 640px) {
  .lp-si-w-full { padding: 0 14px; }
  .lp-si-w-wide { padding: 0 14px; }
}

/* ── Hochkant-Galerie (portrait_grid) ────────────────*/
/* Reines Raster aus Hochformat-Bildern, alle gleich groß (3:4), Lightbox. */
.lp-pg { display: grid; }
/* Kopf (Kicker/Titel/Text) bleibt ruhig in Inhaltsbreite; darunter Abstand zum Raster. */
.lp-pg-head { margin-bottom: 28px; }
/* Breiten: normal (im lp-in), plus (etwas breiter), wide (1600px), full (randlos). */
.lp-pg-w-plus  { max-width: 1100px; margin-left: auto; margin-right: auto; padding: 0 20px; }
.lp-pg-w-wide  { max-width: 1600px; margin-left: auto; margin-right: auto; padding: 0 20px; }
.lp-pg-w-full  { max-width: none; margin: 0; padding: 0 40px; }
@media (max-width: 640px) {
  .lp-pg-w-full { padding: 0 14px; }
  .lp-pg-w-wide { padding: 0 14px; }
}
.lp-pg-c2 { grid-template-columns: repeat(2, 1fr); }
.lp-pg-c3 { grid-template-columns: repeat(3, 1fr); }
.lp-pg-c4 { grid-template-columns: repeat(4, 1fr); }
/* Großzügige Abstände wie bei modernen Foto-Portfolios (Referenz). */
.lp-pggap-s { gap: 24px; }
.lp-pggap-m { gap: clamp(28px, 3.5vw, 48px); }
.lp-pggap-l { gap: clamp(40px, 5vw, 76px); }
.lp-pg-cell { margin: 0; }
.lp-pg-cell img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  border-radius: 6px; cursor: zoom-in;
  transition: transform .45s ease, box-shadow .3s ease;
}
.lp-pg-cell:hover img { transform: scale(1.02); box-shadow: 0 18px 44px -22px rgba(0,0,0,.55); }
.lp-pg-cell figcaption { font-size: 12.5px; color: var(--lp-muted); margin-top: 8px; text-align: center; }
/* Tablet: höchstens 3, dann 2 Spalten. Handy: 2 Spalten (Hochformate bleiben schmal genug). */
@media (max-width: 900px) {
  .lp-pg-c4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .lp-pg-c3, .lp-pg-c4 { grid-template-columns: repeat(2, 1fr); }
  .lp-pggap-l { gap: 20px; }
  .lp-pggap-m { gap: 16px; }
}

/* ── Hochkant-Video-Raster (portrait_video_grid) ─────*/
/* Nutzt das lp-pg-Grid (Spalten/Breiten/Gaps), aber jede Zelle ist ein Video im
   Hochformat 9:16 mit Play-Button; Klick startet in der Kachel (pv-grid.js). */
.lp-pv-cell { margin: 0; position: relative; cursor: pointer; }
.lp-pv-cell .lp-pv-video,
.lp-pv-cell .lp-pv-embed {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  border-radius: 6px; background: #111; overflow: hidden;
}
.lp-pv-cell .lp-pv-embed { border: 0; }
/* Play-Overlay (rund, halbtransparent). Verschwindet, sobald das Video läuft. */
.lp-pv-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(20,20,25,.55); color: #fff; z-index: 2; pointer-events: none;
  transition: background .18s ease, opacity .18s ease; backdrop-filter: blur(2px);
}
.lp-pv-play svg { margin-left: 3px; }
.lp-pv-cell:hover .lp-pv-play { background: rgba(20,20,25,.72); }
.lp-pv-cell.is-playing .lp-pv-play { opacity: 0; }
.lp-pv-cell figcaption { font-size: 12.5px; color: var(--lp-muted); margin-top: 8px; text-align: center; }
/* Datei-Video zeigt beim Abspielen die Steuerung; vorher nur Poster + Play. */
.lp-pv-cell .lp-pv-video { cursor: pointer; }

/* Einzelnes Hochkant-Video (portrait_video): Text LINKS, Video rechts.
   Auf dem Handy stapelt es (Text oben, Video darunter). */
.lp-pv1 { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 4vw, 48px); }
.lp-pv1.has-text .lp-pv1-vid { margin: 0; }              /* neben Text nicht zentrieren */
.lp-pv1:not(.has-text) .lp-pv1-vid { margin: 0 auto; }   /* ohne Text mittig */
.lp-pv1-text { flex: 1 1 300px; min-width: 260px; }
.lp-pv1-text > :first-child { margin-top: 0; }
.lp-pv1-vid { flex: 0 0 auto; }
/* Videogröße (3 Stufen): normal wie ein Instagram-Reel, dann mittel, dann groß. */
.lp-pv1-s-normal { width: 320px; max-width: 100%; }
.lp-pv1-s-mid    { width: 440px; max-width: 100%; }
.lp-pv1-s-big    { width: 600px; max-width: 100%; }
/* Variante „Text oben, Video groß": untereinander, alles zentriert. */
.lp-pv1-top { flex-direction: column; align-items: center; text-align: center; }
.lp-pv1-top .lp-pv1-text { flex: none; max-width: 640px; }
.lp-pv1-top .lp-pv1-vid { margin: 0 auto; }
.lp-pv1-src { font-size: 13.5px; color: var(--lp-muted); margin: 12px 0 0; text-align: center; opacity: .95; }
.lp-pv1-src a { color: var(--lp-accent); text-decoration: none; border-bottom: 1px solid transparent; }
.lp-pv1-src a:hover { border-bottom-color: currentColor; }
@media (max-width: 640px) {
  .lp-pv1 { flex-direction: column; align-items: stretch; }
  .lp-pv1-text { text-align: center; }
  .lp-pv1.has-text .lp-pv1-vid { margin: 0 auto; }
}

/* ── Lightbox (lp-lightbox.js) ───────────────────────*/
.lp-lb {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center;
  background: rgba(10,11,13,.92); padding: 3vmin;
}
.lp-lb.open { display: flex; }
.lp-lb-fig { margin: 0; max-width: 100%; max-height: 100%; display: flex;
  flex-direction: column; align-items: center; gap: 12px; }
.lp-lb-img { max-width: 92vw; max-height: 88vh;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); }
.lp-lb-cap { color: #e5e5e5; font-size: 14px; text-align: center;
  font-family: var(--font-content, 'Lato', system-ui, Arial, sans-serif); }
.lp-lb-x {
  position: absolute; top: 14px; right: 18px; width: 44px; height: 44px;
  border: 0; background: none; color: #fff; font-size: 34px; line-height: 1;
  cursor: pointer; opacity: .8;
  font-family: var(--font-content, 'Lato', 'Segoe UI', system-ui, Arial, sans-serif);
}
.lp-lb-x:hover { opacity: 1; }
.lp-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; font-size: 34px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
  font-family: var(--font-content, 'Lato', 'Segoe UI', system-ui, Arial, sans-serif);
}
.lp-lb-nav:hover { background: rgba(255,255,255,.24); }
.lp-lb-prev { left: 2vmin; }
.lp-lb-next { right: 2vmin; }
@media (max-width: 600px) {
  .lp-lb-nav { width: 44px; height: 44px; font-size: 26px; }
}

/* ── Logos ──────────────────────────────────────────── */
.lp-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 34px; margin-top: 26px; }
.lp-al-center .lp-logos { justify-content: center; }
.lp-logo img { max-height: 44px; max-width: 150px; object-fit: contain;
  filter: grayscale(1); opacity: .65; transition: filter .2s, opacity .2s; }
.lp-logo img:hover { filter: none; opacity: 1; }

/* ── FAQ ────────────────────────────────────────────── */
.lp-faqs { margin-top: 22px; text-align: left; }
.lp-faq { border-bottom: 1px solid var(--lp-line); }
.lp-faq summary { padding: 16px 0; font-weight: 700; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 14px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; color: var(--lp-accent); font-size: 20px; line-height: 1; }
.lp-faq[open] summary::after { content: '–'; }
.lp-faq-a { padding: 0 0 16px; color: var(--lp-muted); font-size: 14.5px; }
/* Optionales Bild in der FAQ-Antwort (FAQ-Modul). */
.lp-faq-a .fq-a-img { margin-top: 12px; }
.lp-faq-a .fq-a-img img { max-width: 100%; height: auto; border-radius: 10px; display: block; }

/* ── Preise ─────────────────────────────────────────── */
.lp-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 28px; }
.lp-price { background: #fff; border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
  padding: 26px 22px; text-align: center; display: flex; flex-direction: column; }
.lp-price.is-hl { border-color: var(--lp-accent); box-shadow: 0 10px 30px rgba(0,0,0,.09); }
.lp-price-n { font-weight: 700; font-size: 15px; }
.lp-price-v { font-size: 30px; font-weight: 800; color: var(--lp-accent); margin: 8px 0 2px; }
.lp-price-note { font-size: 12.5px; color: var(--lp-muted); }
.lp-price-f { list-style: none; padding: 0; margin: 16px 0; text-align: left; font-size: 14px; color: var(--lp-muted); }
.lp-price-f li { padding: 5px 0 5px 20px; position: relative; }
.lp-price-f li::before { content: '✓'; position: absolute; left: 0; color: var(--lp-accent); font-weight: 800; }
.lp-price .lp-btn { margin-top: auto; }

/* ── Fußzeile ───────────────────────────────────────── */
.lp-foot { position: relative; z-index: 10;   /* über den Scroll-Stapel-Blöcken (bis z6) */
  border-top: 1px solid var(--lp-line); padding: 26px 20px; text-align: center;
  font-size: 12.5px; color: var(--lp-muted);
  background: inherit;                         /* deckt den letzten Baustein sauber ab */ }
.lp-foot a { color: var(--lp-muted); margin: 0 8px; }
/* Platz unter dem Footer für das feste Cookie-Banner / den mobilen CTA, damit
   diese den Footer nicht verdecken (auf Landingpages greift body.ws nicht). */
.lp-foot { padding-bottom: 96px; }

/* Entwurf-Hinweis – nur für eingeloggte Admins sichtbar */
.lp-draft { background: #fef3c7; color: #92400e; text-align: center; padding: 9px 16px;
  font-size: 13.5px; font-weight: 700; position: sticky; top: 0; z-index: 99; }
.lp-draft a { color: #92400e; }

@media (prefers-reduced-motion: reduce) {
  .lp-btn, .lp-logo img { transition: none !important; }
  .lp-btn:hover { transform: none !important; }
}

/* ── Statement (großes Zitat) ────────────────────────
   Ein Satz, gross gesetzt, viel Luft. Die Anfuehrungszeichen zeichnet das CSS –
   so bleiben sie aus dem Text heraus und lassen sich abschalten. */
/* Struktur des Zitats (Gewicht, Abstand, Breite). Die SCHRIFTGRÖSSE steht
   gesammelt am Dateiende (fließend, eine Quelle) – hier bewusst KEIN font-size,
   damit es nur eine Stelle gibt, die die Größe bestimmt. */
.lp-q-t {
  line-height: 1.3; font-weight: 700; letter-spacing: -.01em;
  margin: 0; max-width: 22ch; color: var(--lp-ink);
  /* hanging punctuation: das Anfuehrungszeichen haengt links im Rand, der Text
     bleibt optisch buendig – wie im guten Buchsatz. */
  position: relative;
}
.lp-q-l .lp-q-t { max-width: 20ch; }
.lp-q-s .lp-q-t { font-weight: 600; max-width: 46ch; line-height: 1.55; }

/* Anfuehrungszeichen als Zeichen, nicht als Text */
.lp-q.has-marks .lp-q-t::before { content: '\201E'; }   /* „ */
.lp-q.has-marks .lp-q-t::after  { content: '\201C'; }   /* “ */
.lp-q.has-marks .lp-q-t::before,
.lp-q.has-marks .lp-q-t::after {
  color: var(--lp-accent); opacity: .38; font-weight: 800;
}

/* Mittig ausgerichtet zentriert sich auch der Textblock */
.lp-al-center .lp-q-t { margin-left: auto; margin-right: auto; }
.lp-al-right  .lp-q-t { margin-left: auto; }

/* Wer das Zitat schrieb */
.lp-q-by {
  display: flex; align-items: center; gap: 12px; margin-top: 26px;
}
.lp-al-center .lp-q-by { justify-content: center; }
.lp-al-right  .lp-q-by { justify-content: flex-end; }
.lp-q-img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lp-q-by cite { font-style: normal; display: flex; flex-direction: column; gap: 2px; }
.lp-q-n { font-size: 15px; font-weight: 700; color: var(--lp-ink); }
.lp-q-r { font-size: 13px; color: var(--lp-muted); }

/* Auf dunklen/farbigen Flaechen zieht alles mit */
.lp-bg-dark .lp-q-t, .lp-bg-accent .lp-q-t,
.lp-bg-grad-dark .lp-q-t, .lp-bg-grad-accent .lp-q-t,
.lp-bg-dark .lp-q-n, .lp-bg-accent .lp-q-n,
.lp-bg-grad-dark .lp-q-n, .lp-bg-grad-accent .lp-q-n { color: inherit; }
.lp-bg-dark .lp-q-r, .lp-bg-accent .lp-q-r,
.lp-bg-grad-dark .lp-q-r, .lp-bg-grad-accent .lp-q-r { color: rgba(255,255,255,.72); }
/* (die obigen greifen, weil lp-q-t/-n/-r KINDER der Section sind) */
/* Achtung: lpCtl setzt die Hintergrund-Klasse auf DASSELBE <section> wie lp-q –
   deshalb ohne Leerzeichen verketten, sonst greift die Regel nie. */
.lp-bg-dark.lp-q.has-marks .lp-q-t::before, .lp-bg-dark.lp-q.has-marks .lp-q-t::after,
.lp-bg-accent.lp-q.has-marks .lp-q-t::before, .lp-bg-accent.lp-q.has-marks .lp-q-t::after,
.lp-bg-grad-dark.lp-q.has-marks .lp-q-t::before, .lp-bg-grad-dark.lp-q.has-marks .lp-q-t::after,
.lp-bg-grad-accent.lp-q.has-marks .lp-q-t::before, .lp-bg-grad-accent.lp-q.has-marks .lp-q-t::after {
  color: currentColor; opacity: .3;
}

/* ── Zweispaltig randlos ─────────────────────────────
   Bild bis zur Kante, volle Hoehe; die Textseite ist eine durchgehende
   Farbflaeche. Der Baustein bringt seinen eigenen Rahmen mit – deshalb hier
   kein lp-in, und die Innenabstaende sitzen an der Textspalte. */
.lp-sf { padding-left: 0 !important; padding-right: 0 !important; }
.lp-sf-in { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.lp-sf-right .lp-sf-img { order: 2; }
.lp-sf-left  .lp-sf-img { order: 0; }

.lp-sf-txt { display: flex; align-items: center; }
/* Aussen so viel Luft, dass der Text auf Augenhoehe des Rasters bleibt,
   innen auf Lesebreite begrenzt. */
.lp-sf-txt-in { padding: 64px clamp(24px, 5vw, 76px); max-width: 620px; margin-left: auto; }
.lp-sf-left .lp-sf-txt-in { margin-left: 0; margin-right: auto; }

.lp-sf-img { position: relative; overflow: hidden; background: var(--lp-soft); }
.lp-sf-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hoehe: entweder so hoch wie der Text, oder fest vorgegeben. */
.lp-sf-h-m .lp-sf-in    { min-height: 60vh; }
.lp-sf-h-l .lp-sf-in    { min-height: 78vh; }
.lp-sf-h-full .lp-sf-in { min-height: 100vh; }
/* Bei "so hoch wie der Text" braucht das Bild trotzdem eine Mindesthoehe,
   sonst wird es bei wenig Text zum Streifen. */
.lp-sf-h-auto .lp-sf-img { min-height: 420px; }

.lp-sf .lp-h2 { font-size: clamp(30px, 4.4vw, 52px); }
.lp-sf .lp-tx { max-width: none; }

@media (max-width: 800px) {
  /* Untereinander: erst der Text, dann das Bild – egal welche Seite eingestellt ist. */
  .lp-sf-in { grid-template-columns: 1fr; min-height: 0 !important; }
  .lp-sf-right .lp-sf-img, .lp-sf-left .lp-sf-img { order: 2; }
  .lp-sf-txt-in { padding: 44px 20px; max-width: none; margin: 0; }
  .lp-sf-img { min-height: 60vh !important; }
}

/* =====================================================
   Preise – Split-Screen (Baustein "pricing")
   Nach der Vorlage aus mpdrop: zwei Haelften nebeneinander, beim Ueberfahren
   zieht sich eine auf und zeigt die Pakete. Die Effekt-Werte (flex 1 -> 2.1 /
   .55, die Kurven, der Bild-Zoom) sind bewusst uebernommen – sie machen das
   Gefuehl aus. Auf Touch gibt es kein Hover: dort ist alles aufgeklappt.
   ===================================================== */

.ps-wrap { padding-bottom: 0; display: flow-root; }
.ps-head { text-align: center; padding-bottom: 34px; }
.ps-kicker {
  display: block; color: var(--lp-accent); font-weight: 800; letter-spacing: .18em;
  font-size: 13px; text-transform: uppercase; margin-bottom: 14px;
}
.ps-h2 {
  font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -.5px;
  color: var(--lp-ink); margin: 0 0 20px;
}
.ps-lead { color: var(--lp-muted); font-size: 16.5px; line-height: 1.7; max-width: 560px; margin: 0 auto; }

/* Die Buehne */
.ps-split {
  position: relative; display: flex; width: 100%; height: 860px;
  overflow: hidden; background: #111; margin-top: 38px;
}
.ps-half {
  position: relative; flex: 1; overflow: hidden; cursor: pointer;
  transition: flex .55s cubic-bezier(.45,.05,.2,1);
}
/* Hintergrundbild: entsaettigt, abgedunkelt, leicht unscharf – der Text bleibt lesbar */
.ps-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.02) brightness(.72) blur(3px);
  transform: scale(1.08); transition: transform .6s ease, filter .5s;
}
.ps-shade { position: absolute; inset: 0; transition: background .5s; }
.ps-left  .ps-shade { background: linear-gradient(115deg, rgba(8,8,10,.48), rgba(8,8,10,.84) 82%); }
.ps-right .ps-shade { background: linear-gradient(245deg, rgba(8,8,10,.48), rgba(8,8,10,.85) 82%); }

.ps-pane {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  padding: 0 48px; color: #fff;
  transition: transform .5s cubic-bezier(.45,.05,.2,1);
}
.ps-pk {
  font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.8); margin-bottom: 34px;
  transition: transform .5s cubic-bezier(.45,.05,.2,1);
}
.ps-title {
  font-size: clamp(44px, 6vw, 72px); font-weight: 900; letter-spacing: -1px; line-height: .9;
  text-shadow: 0 4px 30px rgba(0,0,0,.55); transform-origin: center;
  transition: transform .5s cubic-bezier(.45,.05,.2,1), font-size .4s;
}

/* Teaser (Ruhe) und Karten (aufgezogen) liegen uebereinander */
.ps-stack { position: relative; margin-top: 34px; width: 100%; min-height: 64px; }
.ps-teaser { position: absolute; top: 0; left: 0; right: 0; text-align: center; transition: opacity .3s; }
.ps-tp { font-size: 24px; font-weight: 800; }
.ps-ts { font-size: 14px; color: rgba(255,255,255,.78); margin-top: 5px; }
.ps-reveal {
  position: absolute; top: 0; left: 0; right: 0;
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity .45s .1s, transform .45s .1s;
}

/* Der Effekt: die gehoverte Haelfte waechst, die andere schrumpft */
.ps-split:hover .ps-half { flex: .55; }
.ps-split .ps-half:hover { flex: 2.1; }
.ps-split .ps-half:hover .ps-bg { transform: scale(1.14); }
.ps-split .ps-half:hover .ps-teaser { opacity: 0; }
.ps-split .ps-left:hover  .ps-pane { transform: translateY(-150px); }
.ps-split .ps-right:hover .ps-pane { transform: translateY(-162px); }
.ps-split .ps-half:hover .ps-reveal { opacity: 1; transform: none; pointer-events: auto; }
/* Die nicht gehoverte Haelfte tritt zurueck */
.ps-split:hover .ps-pane { opacity: .4; transition: transform .5s cubic-bezier(.45,.05,.2,1), opacity .4s; }
.ps-split .ps-half:hover .ps-pane { opacity: 1; }
.ps-split:hover .ps-title { font-size: 34px; }
.ps-split .ps-half:hover .ps-title { font-size: clamp(30px, 3vw, 40px); }

/* Karten */
.ps-cards {
  display: flex; flex-wrap: wrap; gap: 28px; align-items: stretch; justify-content: center;
  width: 100%; max-width: 1320px; margin: 0 auto;
}
.ps-card {
  flex: 1 1 0; min-width: 0; max-width: 340px; width: 240px;
  background: rgba(16,16,20,.46);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  border: 1px solid rgba(255,255,255,.18); border-radius: 16px;
  padding: 36px 28px; display: flex; flex-direction: column; color: #fff; text-align: center;
}
.ps-feat {
  border-color: rgba(255,255,255,.55); background: rgba(18,18,22,.58);
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
}
.ps-badge {
  align-self: center; background: #fff; color: #141414;
  font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 20px; margin-bottom: 12px; white-space: nowrap;
}
.ps-cn {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.78); margin-bottom: 14px;
}
.ps-feat .ps-cn { color: #fff; }
.ps-csub { font-size: 12px; color: rgba(255,255,255,.72); line-height: 1.45; margin: 2px 0 24px; }
.ps-cprices { display: flex; align-items: flex-end; gap: 24px; margin: 14px 0 12px; justify-content: center; }
.ps-cpr { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.ps-cpl {
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.58); line-height: 1.25;
}
.ps-cpv { font-size: 23px; font-weight: 900; letter-spacing: -.5px; line-height: 1; }
.ps-cdesc {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.85); margin: 8px 0 0;
}

/* Leistungspunkte */
.ps-feats { list-style: none; margin: 8px 0 18px; padding: 0; text-align: left; }
.ps-feats li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: rgba(255,255,255,.85); padding: 5px 0; line-height: 1.35;
}
.ps-feats svg { flex-shrink: 0; margin-top: 2px; opacity: .8; }

/* Business: die zwei Stundensaetze */
.ps-biz { width: 560px; max-width: 100%; text-align: left; }
.ps-biz-rates { display: flex; gap: 34px; margin-bottom: 6px; }
.ps-rate { flex: 1; }
.ps-rn { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.ps-rp { font-size: 40px; font-weight: 900; letter-spacing: -1px; line-height: 1.05; }
.ps-rh { font-size: 12px; color: rgba(255,255,255,.72); }
.ps-sep { width: 1px; background: rgba(255,255,255,.2); }

/* Knoepfe unter der Karte: Aktion + "Mehr Details" */
.ps-btns { margin-top: auto; display: flex; flex-direction: column; gap: 7px; }
.ps-mini {
  text-align: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-weight: 700; font-size: 13.5px; line-height: 1.2; text-decoration: none;
  padding: 12px 14px; border-radius: 10px; transition: background .15s;
}
.ps-mini:hover { background: rgba(255,255,255,.22); }
.ps-feat .ps-mini { background: #fff; color: #141414; border-color: #fff; }
.ps-feat .ps-mini:hover { background: rgba(255,255,255,.86); }
/* "Mehr Details" sitzt im Teaser – also dort, wo in Ruhe nur der Titel und der
   Ab-Preis stehen. Beim Aufziehen verschwindet er mit dem Teaser; dann sprechen
   die Karten fuer sich. */
.ps-tdet {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 13px;
  padding: 9px 18px; border-radius: 999px; transition: background .15s, transform .15s;
}
.ps-tdet::after { content: '›'; font-size: 15px; line-height: 1; opacity: .8; }
.ps-tdet:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); }

/* PDF-Knopf */
.ps-dlwrap { text-align: center; margin-top: 34px; width: 100%; }
.ps-dlbtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.34);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 13.5px;
  padding: 11px 22px; border-radius: 10px; cursor: pointer;
  font-family: inherit; transition: background .15s;
}
.ps-dlbtn:hover { background: rgba(255,255,255,.22); }

/* ── Touch / schmal: kein Hover, alles aufgeklappt ── */
@media (hover: none), (max-width: 860px) {
  .ps-split { flex-direction: column; height: auto; margin-top: 28px; }
  .ps-half { flex: none !important; min-height: auto; cursor: default; }
  .ps-pane {
    position: relative; z-index: 2; padding: 44px 20px; transform: none !important; opacity: 1 !important;
  }
  .ps-title { transform: none !important; font-size: 46px !important; margin-bottom: 2px; }
  .ps-split:hover .ps-pk { opacity: 1 !important; }
  /* Teaser und Detail-Knopf sind mobil ueberfluessig: die Karten stehen ohnehin
     schon offen da. "Alle Details ansehen" gehoert nur auf den Desktop, wo die
     Karten erst beim Ueberfahren erscheinen. */
  .ps-teaser { display: none; }
  .ps-stack { min-height: 0; margin-top: 22px; }
  .ps-reveal { position: static; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .ps-cards { flex-direction: column; align-items: stretch; gap: 14px; }
  .ps-card { width: 100%; max-width: 100%; }
  .ps-biz { width: 100%; }
  .ps-biz-rates { gap: 18px; }
  .ps-rp { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-half, .ps-bg, .ps-pane, .ps-title, .ps-pk, .ps-reveal, .ps-teaser, .ps-mini, .ps-dlbtn {
    transition: none !important;
  }
}

/* ── Portfolio-Streifen (Baustein „portfolio_split") ──
   Wie die Preise-Section: mehrere Streifen nebeneinander, der überfahrene zieht
   sich auf, die anderen treten zurück. Titel („Art der Fotografie") sitzt unten. */
.lp-pfs { padding-left: 0 !important; padding-right: 0 !important; }
.lp-pfs .lp-in { margin-bottom: 26px; }
.pfs-split { position: relative; display: flex; width: 100%; overflow: hidden; background: #111; }
.pfs-h-m  { height: 520px; }
.pfs-h-l  { height: 680px; }
.pfs-h-xl { height: 820px; }
.pfs-strip {
  position: relative; flex: 1; overflow: hidden; text-decoration: none; color: #fff;
  cursor: pointer; transition: flex .55s cubic-bezier(.45,.05,.2,1);
  border-right: 1px solid rgba(255,255,255,.08);
}
.pfs-strip:last-child { border-right: none; }
.pfs-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.35) brightness(.78); transform: scale(1.06);
  transition: transform .6s ease, filter .5s;
}
.pfs-shade { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,10,.72), rgba(8,8,10,.12) 55%, rgba(8,8,10,.28)); }
/* Zusätzliches, gleichmäßiges schwarzes Overlay pro Streifen (Deckkraft je
   Streifen einstellbar, Inline-Style). Liegt über dem Bild, unter dem Text. */
.pfs-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* Beschriftung: nimmt die UNTERE HÄLFTE des Streifens ein und teilt sich in feste
   Zonen (Titel / Untertitel / Beschreibung / Button). Dadurch stehen die drei
   Titel, die drei Beschreibungen und die drei Buttons über alle Streifen jeweils
   auf DERSELBEN Höhe – egal wie lang die Texte sind. */
.pfs-cap {
  position: absolute; left: 0; right: 0; bottom: 0; top: 46%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; padding: 0 26px 40px;
  transition: transform .5s cubic-bezier(.45,.05,.2,1);
}
.pfs-t {
  font-size: clamp(22px, 2.2vw, 34px); font-weight: 900; letter-spacing: -.01em; line-height: 1.05;
  /* Titel bleibt IMMER eine Zeile – gleiche Höhe über alle Streifen. */
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 0;
}
.pfs-s { font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.82); margin-top: 8px; flex-shrink: 0;
  opacity: 0; max-height: 0; transition: opacity .4s, max-height .4s; }
/* Beschreibung: feste Höhe (ca. 4 Zeilen), damit die Buttons darunter auf einer
   Linie liegen. Größe über --pfs-ds (Standard = Fließtext). */
.pfs-d { font-size: calc(var(--lp-text) * var(--pfs-ds, 1)); line-height: 1.5;
  color: rgba(255,255,255,.92); margin-top: 14px; max-width: 40ch;
  height: calc(1.5em * 4); overflow: hidden; flex-shrink: 0; }
.pfs-ds-l  { --pfs-ds: 1.25; }
.pfs-ds-xl { --pfs-ds: 1.55; }
/* Button direkt UNTER der Beschreibung (kleiner fester Abstand). Weil die
   Beschreibung feste Höhe hat, sitzen alle Buttons trotzdem auf einer Linie –
   nur eben näher am Text statt ganz am Streifenrand. */
.pfs-btn { margin-top: 16px; }
.pfs-btn .lp-btn { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }

/* Effekt: überfahrener Streifen wächst, die anderen schrumpfen. */
.pfs-split:hover .pfs-strip { flex: .7; }
.pfs-split .pfs-strip:hover { flex: 2.4; }
.pfs-split .pfs-strip:hover .pfs-bg { transform: scale(1.12); filter: grayscale(0) brightness(.85); }
.pfs-split .pfs-strip:hover .pfs-cap { transform: translateY(-10px); }
.pfs-split .pfs-strip:hover .pfs-s { opacity: 1; max-height: 40px; }

/* Touch / schmal: kein Hover, alle Streifen untereinander. Der Inhalt
   (Überschrift, Text, Button) steht NICHT mehr absolut, sondern im normalen
   Fluss und vertikal ZENTRIERT – so ist der Button immer komplett sichtbar und
   wird nie abgeschnitten. Die Streifenhöhe wächst mit dem Inhalt (min-height
   statt fixe height), mit genug Innenabstand oben/unten. */
@media (hover: none), (max-width: 820px) {
  .pfs-split { flex-direction: column; height: auto; }
  .pfs-strip {
    flex: none !important; height: auto; min-height: 360px;
    border-right: none; border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex; flex-direction: column; justify-content: center;
  }
  .pfs-strip .pfs-bg { filter: grayscale(0) brightness(.82); }
  /* Caption im Fluss statt absolut positioniert -> nichts läuft unten raus. */
  .pfs-cap {
    position: static; top: auto; bottom: auto; transform: none !important;
    justify-content: center; padding: 44px 26px;
  }
  /* Auf dem Handy alles offen zeigen (kein Hover). Beschreibung ohne feste
     Höhe, damit langer Text nicht abgeschnitten wird und der Button darunter
     Platz hat. */
  .pfs-s { opacity: 1; max-height: 40px; }
  .pfs-d { opacity: 1; max-height: none; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pfs-strip, .pfs-bg, .pfs-cap, .pfs-s, .pfs-d { transition: none !important; }
}

/* ── Kontakt zweispaltig (Baustein „contact_split") ──
   Links großes Bild mit Kicker/Titel/Beschreibung unten drauf, rechts die
   Kontaktspalte (Kicker/Titel/Text + Formular + Buttons + E-Mail). */
.lp-cs { padding-left: 0 !important; padding-right: 0 !important; overflow: hidden; }
.cs-in { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch;
  max-width: 100%; padding: 0; }
/* Wenn eine Inhaltshöhe (vh) gesetzt ist: das Grid füllt die volle Section-Höhe,
   statt vom .lp-mh-Zentrieren gestaucht zu werden. So wirkt die vh-Höhe hier. */
.lp-cs.lp-mh { justify-content: stretch; }
.lp-cs.lp-mh .cs-in { flex: 1; min-height: 0; height: 100%; }
.lp-cs.lp-mh .cs-media { min-height: 0; }   /* feste Bildhöhe weicht der vh-Höhe */
.lp-cs.lp-mh .cs-right { justify-content: center; }   /* Inhalt vertikal mittig */
/* Bild rechts statt links. */
.lp-cs-right .cs-media { order: 2; }

/* Linke Bild-Seite */
.cs-media { position: relative; min-height: 560px; overflow: hidden; background: #0d0d0f; }
.cs-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-media-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 40px 44px; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 60%); }
.cs-media-kick { display: block; font-size: 13px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 14px; }
.cs-media-t { display: block; font-size: clamp(30px, 3.4vw, 46px); font-weight: 900; letter-spacing: -.02em; }
.cs-media-s { display: block; font-size: 15px; color: rgba(255,255,255,.82); margin-top: 8px; font-style: italic; }

/* Rechte Kontakt-Seite */
.cs-right { padding: clamp(44px, 5vw, 84px) clamp(28px, 5vw, 80px); display: flex; flex-direction: column;
  min-width: 0; }   /* min-width:0: breiter Inhalt (Formular) sprengt die Grid-Spalte nicht */
.cs-in { max-width: 100%; }
.cs-media, .cs-right { min-width: 0; }
.cs-kick { font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lp-accent); margin-bottom: 14px; }
.cs-title { margin-top: 0; }
.cs-right .lp-tx { margin-bottom: 10px; }
/* Das eingebettete Formular (fotografen.management) hat ein eigenes linkes Innen-
   Padding (Bootstrap-.container + Spalten-Gutter, ~38px), sodass seine Felder weiter
   innen stehen als Titel/Text/Häkchen/Senden. Um die Feldkante mit dem übrigen
   Inhalt fluchten zu lassen, ziehen wir das GANZE Formular links um diesen Betrag
   (--cs-field-inset) nach außen und gleichen rechts mit Padding aus – so bleibt die
   Netto-Breite gleich und es steht rechts nicht über. Der Betrag (24px) ist per
   Browser gemessen: das erste Feld saß 24px weiter innen als der Formularrand.
   Damit landet die Feldkante auf der Referenzlinie (Titel/Text/Häkchen/Senden).
   Die Überschrift "Rückruf anfordern" wandert mit nach links – sie bekommt den
   Versatz per padding-left wieder zurück, damit sie ebenfalls auf der Linie sitzt. */
.cs-form { --cs-field-inset: 24px; margin: 26px 0 8px; max-width: none; overflow: hidden;
  margin-left: calc(var(--cs-field-inset) * -1); padding-right: var(--cs-field-inset); }
.cs-form iframe { width: 100%; max-width: 100%; border: 0; display: block; }
.cs-form [data-consent] { width: 100%; max-width: 100%; }
.cs-form-t { font-size: clamp(18px, 1.8vw, 22px); font-weight: 800; letter-spacing: -.01em;
  margin: 0 0 14px; padding-left: var(--cs-field-inset); color: var(--lp-ink); }
/* Beschreibung unter der Formular-Überschrift: gleicher Einzug wie die Überschrift
   (das Formular hat einen Negativ-Margin links – ohne Ausgleich stünde der Text zu
   weit links). Etwas kleiner/ruhiger als der Haupttext. */
.cs-form-tx { padding-left: var(--cs-field-inset); margin: -4px 0 16px;
  color: var(--lp-muted); font-size: 15px; line-height: 1.6; }
.cs-form-tx p { margin: 0 0 8px; }
.cs-form-tx p:last-child { margin-bottom: 0; }

/* Buttons + Trenner */
.cs-btns { display: flex; align-items: center; gap: 18px; margin-top: 28px; flex-wrap: wrap; }
.cs-btns .lp-btn { border-radius: 0; }   /* eckig wie im Vorbild */
/* Zweite Button-Reihe unter der E-Mail. */
.cs-btns2 { margin-top: 18px; gap: 12px; }
.cs-sep { color: var(--lp-muted); font-size: 20px; }

/* E-Mail unten */
.cs-contact { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--lp-line); }
.cs-contact-lbl { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lp-muted); margin-bottom: 6px; }
.cs-contact-v { font-size: 16px; color: var(--lp-ink); text-decoration: none; }
.cs-contact-v:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .cs-in { grid-template-columns: 1fr; }
  .lp-cs-right .cs-media { order: 0; }
  /* Einspaltig: das Bild braucht eine feste Höhe, sonst kollabiert es auf 0.
     Auch bei manueller vh-Höhe (.lp-mh) erzwingen, sonst fehlt der linke Bereich
     auf dem Handy komplett. */
  .cs-media, .lp-cs.lp-mh .cs-media { min-height: 440px; height: 440px; }
  .cs-right { padding: 40px 22px; }
}

/* ── Vergleich (Baustein „compare") ──────────────────
   Zwei Karten nebeneinander: links „das übliche Modell" (zurückhaltend, graue
   ✗-Punkte), rechts das eigene Paket (Akzent-Rahmen, grüne ✓-Punkte, Badge).
   Zeigt auf einen Blick, was man anders/besser macht. Handy: gestapelt. */
/* Kopf über den Karten (Kicker/Titel/Beschreibung). Beschreibung bleibt lesbar
   schmal und folgt der Ausrichtung des Bausteins (links/mittig/rechts). */
.lp-cmp-intro { margin-bottom: 34px; }
.lp-cmp-intro .lp-tx { margin-bottom: 0; }
.lp-al-center .lp-cmp-intro .lp-tx { margin-left: auto; margin-right: auto; }

.lp-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.lp-cmp-card { position: relative; background: #fff; border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius); padding: 30px 30px 26px; display: flex; flex-direction: column;
  text-align: left; }   /* Karteninhalt immer linksbündig, egal wie der Baustein ausgerichtet ist */
/* Rechte Karte hervorheben: kräftiger Rahmen in Akzentfarbe + leichter Schatten. */
.lp-cmp-pro { border: 2px solid var(--lp-accent);
  box-shadow: 0 18px 50px -24px rgba(0,0,0,.35); }

.lp-cmp-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--lp-line); }
.lp-cmp-title { font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lp-muted); margin: 0; line-height: 1.4; }
.lp-cmp-pro .lp-cmp-title { color: var(--lp-ink); }
.lp-cmp-badge { flex: 0 0 auto; background: var(--lp-accent); color: #fff; border-radius: 4px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 5px 10px; white-space: nowrap; }

.lp-cmp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 20px; flex: 1; }
.lp-cmp-li { display: flex; align-items: flex-start; gap: 14px; }
.lp-cmp-mk { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; }
.lp-cmp-mk svg { width: 100%; height: 100%; display: block; }
.lp-cmp-con .lp-cmp-mk { color: #c0392b; }          /* ✗ dezent rot */
.lp-cmp-pro .lp-cmp-mk { color: #15803d; }          /* ✓ grün */
.lp-cmp-tx { font-size: 16px; line-height: 1.45; color: var(--lp-ink); }
.lp-cmp-con .lp-cmp-tx { color: var(--lp-muted); }

.lp-cmp-note { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--lp-line);
  font-style: italic; font-size: 15px; color: var(--lp-muted); }

/* Button mittig unter beiden Karten. */
.lp-cmp-cta { margin-top: 34px; }
.lp-cmp-cta .lp-btns { justify-content: center; margin-top: 0; }

/* Dunkler Hintergrund: Karten und Trennlinien anpassen. */
.lp-bg-dark .lp-cmp-card, .lp-bg-accent .lp-cmp-card,
.lp-bg-grad-dark .lp-cmp-card, .lp-bg-grad-accent .lp-cmp-card {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16); }
.lp-bg-dark .lp-cmp-pro, .lp-bg-accent .lp-cmp-pro,
.lp-bg-grad-dark .lp-cmp-pro, .lp-bg-grad-accent .lp-cmp-pro { border-color: #fff; }
.lp-bg-dark .lp-cmp-tx, .lp-bg-accent .lp-cmp-tx,
.lp-bg-grad-dark .lp-cmp-tx, .lp-bg-grad-accent .lp-cmp-tx { color: #f3f4f6; }
.lp-bg-dark .lp-cmp-con .lp-cmp-tx, .lp-bg-accent .lp-cmp-con .lp-cmp-tx { color: rgba(255,255,255,.6); }
.lp-bg-dark .lp-cmp-head, .lp-bg-accent .lp-cmp-head,
.lp-bg-dark .lp-cmp-note, .lp-bg-accent .lp-cmp-note { border-color: rgba(255,255,255,.16); }

@media (max-width: 760px) {
  .lp-cmp { grid-template-columns: 1fr; gap: 18px; }
  .lp-cmp-card { padding: 24px 22px; }
}

/* ── Schriftgrößen FLIESSEND (clamp, ohne harte Breakpoints) ──
   Steht am DATEIENDE, damit es die Baustein-Größen (z.B. .lp-q-t weiter oben)
   sicher überschreibt. clamp(min=Handy, vw, max=Desktop): stufenlos, kein Sprung.
   Basis ~360px..1300px Viewport. Keine Media-Query nötig. */
.lp-h1, .lp-h2, .lp-h3 { font-size: calc(clamp(21px, 2.2vw + 13px, 38px) * var(--lp-hs, 1)); }
.lp { --lp-text: clamp(16px, 0.7vw + 13.5px, 22px); }
/* Zitat/Statement: Handy-Untergrenze bewusst niedrig (war mobil oft zu groß).
   WICHTIG: Der Zitattext darf nicht so groß werden wie ein Sektionstitel
   (.lp-h* geht bis 38px) – ein Zitat ist Fließtext, kein Headline. Die Kurven
   sind daher flacher gehalten und unter dem Titel gedeckelt. */
.lp-q-t         { font-size: clamp(17px, 1.8vw + 9px, 30px); line-height: 1.45; }
.lp-q-l .lp-q-t { font-size: clamp(19px, 2.3vw + 9px, 34px); }
.lp-q-s .lp-q-t { font-size: clamp(16px, 1.2vw + 11px, 24px); }

/* ── Mobiler Sticky-CTA (mbMobileCta) ────────────────
   Schwebt unten am Bildschirm, NUR auf dem Handy (≤640px). Volle Breite mit
   kleinem Rand, Akzentfarbe. Sicherheits-Abstand am Seitenende, damit der Button
   nichts überdeckt. Auf größeren Screens ausgeblendet. */
.mb-mcta { display: none; }
@media (max-width: 640px) {
  .mb-mcta {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900;
    padding: 15px 18px; border-radius: 999px;
    background: var(--lp-accent, #1e1e1e); color: #fff;
    /* Marken-Schrift erzwingen (der fixe Button erbt sonst die System-Schrift). */
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-weight: 700; font-size: 15px; text-decoration: none; line-height: 1.2;
    box-shadow: 0 8px 26px -6px rgba(0,0,0,.5);
    /* iPhone-Notch: über der Home-Leiste bleiben. */
    margin-bottom: env(safe-area-inset-bottom, 0);
  }
  /* Kalender-Icon: feste Größe, schrumpft nicht neben dem längeren Text. */
  .mb-mcta-i { flex: 0 0 auto; }
  .mb-mcta:active { transform: translateY(1px); }
  /* Platz am Seitenende, damit der schwebende Button den Footer nicht verdeckt. */
  body.ws, .lp-foot { padding-bottom: 84px; }
}

/* =====================================================
   Scroll-Stapel (lpCtl -> .lp-stack). Steuerfeld "Scroll-Stapel" pro Sektion.
   Aufeinanderfolgende Sektionen mit .lp-stack kleben beim Scrollen oben fest;
   die jeweils nächste schiebt sich darüber -> Stacked-Cards-Effekt. Reines CSS.
   top-Offset = feste Kopfzeile der Webseite (--ws-head-h); auf Landingpages
   (/lp/…) ist die Variable nicht gesetzt -> Fallback 0. z-index unter der
   Kopfzeile (die liegt bei 50), damit das Menü nie verdeckt wird.
   ===================================================== */
.lp-stack {
  position: sticky;
  top: var(--ws-head-h, 0px);
  z-index: 1;
  /* Kein Schatten – die Bausteine gehen nahtlos ineinander über (keine sichtbare
     Trennlinie/Kante zwischen den Stapel-Karten). */
  /* Stapel funktioniert von allein: garantierter Innenabstand oben/unten, egal
     was am Baustein eingestellt ist (sonst klebt der Inhalt an der Kartenkante).
     max() -> ein evtl. GRÖSSERER eingestellter Innenabstand bleibt erhalten. */
  padding-top:    max(var(--lp-pt), clamp(28px, 5vw, 64px)) !important;
  padding-bottom: max(var(--lp-pb), clamp(28px, 5vw, 64px)) !important;
}
/* Außenabstände zwischen Stapel-Karten aufheben – beim Kleben stören sie und
   erzeugen Lücken/Versatz. Der Nutzer muss dafür nichts einstellen. */
.lp-stack { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Sektion höher als der Bildschirm: NICHT kleben (sonst wird ihr unterer Teil beim
   Scrollen abgeschnitten). Sie scrollt normal mit; stack-nav.js setzt die Klasse.
   Höherer z-index (8) als die klebenden Karten (z1) und Trenner (z6/7), damit eine
   nachfolgende klebende Karte sie NICHT überdeckt, solange man in ihr scrollt. */
/* Zu hohe Sektion klebt am UNTEREN Rand (bottom-sticky): stack-nav.js setzt dafür
   den negativen top-Wert (Viewporthöhe − Blockhöhe). Sie bleibt Teil des Stapels
   (sticky) und behält die weiche Kartenkante – der Effekt läuft für ALLE Blöcke
   durch, kein hängender Schatten. */
.lp-stack.lp-stack-tall { position: sticky; }
/* Hoher Block, auf den ein WEITERER hoher Block folgt (z.B. 2 Instagram): NICHT
   kleben – normal durchscrollen, damit zwei hohe Blöcke sich nicht überlappen.
   position:relative (nicht static), damit z-index/Reihenfolge sauber bleibt. */
.lp-stack.lp-stack-flow { position: relative; top: auto !important; z-index: 3; }
/* Die LETZTE Karte einer Stapel-Serie (keine .lp-stack folgt) darf NICHT mehr
   kleben und wirft KEINEN unteren Schatten – sonst schwebt am Stapel-Ende ein
   weißer Streifen mit Schattenlinie über dem nächsten Bereich. Sie scrollt normal
   und bekommt ihren unteren Abstand zurück, damit der Footer sauber darunter
   sitzt (sonst überlappt die klebende Karte den Footer). */
/* „~" statt „+": prüft, ob IRGENDWO danach noch eine .lp-stack folgt – auch wenn
   ein Nicht-Block-Element (z.B. ein <script> aus faq_ref) dazwischen liegt. Sonst
   würde eine mittige Karte fälschlich als „letzte" behandelt -> z-index-Bruch und
   Überlappung beim Scrollen. */
.lp-stack:not(:has(~ .lp-stack)) {
  position: relative;   /* NICHT static: sonst wirkt z-index nicht und die davor
                           klebende Karte überdeckt diese letzte Section. */
  top: auto;
  z-index: 7;           /* über allen klebenden Vorgänger-Karten */
  box-shadow: none;
  margin-bottom: revert !important;
}
/* Deckender Grund = Seiten-Hintergrund NUR für Stapel-Karten OHNE eigene Farbe
   und OHNE Bild. So bleiben Marken-Hintergrundfarbe (.lp-bgc-*) und Bild (.lp-bgimg)
   unangetastet, während neutrale Karten sauber den Seitengrund übernehmen (kein
   Farbstreifen zur Seite). */
.lp-stack:not([class*="lp-bgc-"]):not(.lp-bgimg) { background-color: inherit; }
.lp-stack.lp-bgimg { background-color: transparent; }
/* Stapel-Karten: alle auf gleichem z-index. Bei gleichem z-index überdeckt das im
   DOM SPÄTERE Element automatisch das frühere – genau der gewünschte Stapel-Effekt
   (die nächste Karte schiebt sich über die klebende). Das ist robust gegen
   zwischengeschobene Nicht-Block-Elemente (z.B. <script> aus faq_ref), an denen
   eine „+"-Zählung sonst zusammenbrechen würde. */
.lp-stack { z-index: 1; }
/* Folgt auf eine Stapel-Karte ein NORMALER Baustein (kein Stapel), muss dieser
   sauber ÜBER die noch klebende Karte gleiten: gleicher Seitengrund + höher
   gelegt. Sonst scheint die klebende Karte durch und Texte überlagern sich. */
.lp-stack + .lp-b:not(.lp-stack) {
  position: relative;
  z-index: 6;
}
/* Deckender Grund nur für Trenner OHNE eigene Farbe/Bild (sonst würde die
   Marken-Farbe/das Bild übermalt). */
.lp-stack + .lp-b:not(.lp-stack):not([class*="lp-bgc-"]):not(.lp-bgimg) {
  background-color: inherit;
}

/* =====================================================
   Hintergrundbild pro Baustein (lpCtl/lpBlockBg -> .lp-bgimg + Schleier .lp-bgdim-*).
   Das Bild füllt die ganze Sektion (cover, mittig). Ein optionaler Schleier
   (dunkel/hell) legt sich darüber, damit Text lesbar bleibt. Der Inhalt (.lp-in)
   liegt über allem. Gilt zentral für JEDEN Baustein.
   ===================================================== */
.lp-bgimg { background-image: var(--lp-bgimg-url); background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Unschärfe: Bild NICHT direkt an der Sektion (das würde Text unscharf machen),
   sondern in ein ::before-Layer verlagern und dort weichzeichnen. Leichtes
   Hochskalieren (scale) verdeckt die unscharfen Ränder. */
.lp-bgblur { background-image: none; overflow: hidden; }
.lp-bgblur::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  background-image: var(--lp-bgimg-url); background-size: cover;
  background-position: center; background-repeat: no-repeat;
  /* Blur-Layer ÜBER die Sektionskanten hinausziehen (negativer inset). Der
     weiche, unscharfe Bildrand liegt so außerhalb des Sichtbaren und wird von
     overflow:hidden abgeschnitten -> oben/unten eine saubere, harte Kante,
     KEIN heller Blur-Saum. Der Überstand muss größer als der blur-Radius sein. */
  inset: -40px;
}
.lp-bgblur-b1::before { filter: blur(4px);  inset: -24px; }
.lp-bgblur-b2::before { filter: blur(9px);  inset: -40px; }
.lp-bgblur-b3::before { filter: blur(18px); inset: -70px; }
/* Schleier: absolut über dem Bild, unter dem Inhalt. */
.lp-bgdim { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lp-bgdim-d3 { background: rgba(0,0,0,.30); }
.lp-bgdim-d5 { background: rgba(0,0,0,.50); }
.lp-bgdim-d7 { background: rgba(0,0,0,.70); }
.lp-bgdim-l5 { background: rgba(255,255,255,.55); }
/* Inhalt über Bild + Schleier heben. */
.lp-bgimg > .lp-in,
.lp-bgimg > * { position: relative; z-index: 1; }
.lp-bgimg > .lp-bgdim { z-index: 0; }
/* Auf DUNKLEM Schleier (d3/d5/d7) ALLES im Inhalt hell machen – auch fett
   ausgezeichnete Wörter (die sonst dunkel = var(--lp-ink) blieben und auf dem
   dunklen Bild verschwinden). Ausnahme: bewusst FARBIGE Wörter (lp-c-*) behalten
   ihre Marken-Farbe. Gilt unabhängig vom Hell-/Dunkel-Modus der Seite. */
.lp-bgdim-dark .lp-in, .lp-bgdim-dark .lp-in *,
.lp-bgimg:has(.lp-bgdim-d3) .lp-in,   .lp-bgimg:has(.lp-bgdim-d3) .lp-in *,
.lp-bgimg:has(.lp-bgdim-d5) .lp-in,   .lp-bgimg:has(.lp-bgdim-d5) .lp-in *,
.lp-bgimg:has(.lp-bgdim-d7) .lp-in,   .lp-bgimg:has(.lp-bgdim-d7) .lp-in * {
  color: #fff;
}
/* Farbige Akzent-Wörter (lp-c-*) NICHT übermalen – sie sollen leuchten. */
.lp-bgimg:has(.lp-bgdim-d3) .lp-in [class*="lp-c-"],
.lp-bgimg:has(.lp-bgdim-d5) .lp-in [class*="lp-c-"],
.lp-bgimg:has(.lp-bgdim-d7) .lp-in [class*="lp-c-"] {
  color: revert;
}
/* ── Buttons auf einem ABGEDUNKELTEN Bild ──────────────────────────────
   Der Hintergrund ist dort IMMER dunkel (egal ob Seite hell/dunkel). Darum
   richten sich die Buttons nach dem BILD, nicht nach dem Seiten-Modus:
   - helle/weiße Füll-Buttons -> fester heller Grund + dunkler Text (heben sich ab)
   - Akzent/Dark-Füll-Buttons  -> weißer Text (Grund ist ohnehin kräftig)
   - Rahmen-Buttons            -> weiß umrandet + weißer Text
   Die Weiß-auf-Bild-Regel (color:#fff für alles) darf Buttons NICHT erfassen. */
.lp-bgimg:has([class*="lp-bgdim-d"]) .lp-in .lp-btn-light,
.lp-bgimg:has([class*="lp-bgdim-d"]) .lp-in .lp-btn-white {
  background: #fff !important;
  color: #16181d !important;
}
.lp-bgimg:has([class*="lp-bgdim-d"]) .lp-in .lp-btn-accent { color: #fff !important; }
.lp-bgimg:has([class*="lp-bgdim-d"]) .lp-in .lp-btn-dark   { color: #fff !important; }
/* Rahmen-Buttons auf dem dunklen Bild: weiß umrandet + weißer Text. */
.lp-bgimg:has([class*="lp-bgdim-d"]) .lp-in .lp-btn-bd {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.85) !important;
}

/* Aufzählungspunkte mit Icon im „Bild mit Text"-Baustein (image_text -> .lp-itp).
   Icon + Text pro Zeile, jeweils einzeln im Editor gepflegt (Repeater "points"). */
.lp-itp { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-itp-li { display: flex; align-items: flex-start; gap: 12px; }
/* Punkt-Größe folgt der „Beschreibungstext-Größe" (--lp-ts) des Bausteins:
   normal/groß/sehr groß. Icon skaliert mit, damit Häkchen + Text stimmig bleiben. */
.lp-itp-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  color: var(--lp-accent); margin-top: 2px;
  width: calc(24px * var(--lp-ts, 1)); height: calc(24px * var(--lp-ts, 1)); }
.lp-itp-ic svg { width: calc(22px * var(--lp-ts, 1)); height: calc(22px * var(--lp-ts, 1)); }
.lp-itp-tx { font-size: calc(var(--lp-text) * var(--lp-ts, 1)); line-height: 1.55; color: var(--lp-ink); }

/* Statement-Baustein: optionaler Kopf (Kicker + Überschrift) über dem Zitat. */
.lp-q-head { margin-bottom: clamp(18px, 3vw, 30px); }
.lp-q-head .lp-kick { margin-bottom: 8px; }
.lp-q-head .lp-h2 { margin: 0; }

/* Dezenter Bild-Hinweis (z. B. „KI-generiert") unten am Bild im „Bild mit Text". */
.lp-split-img { position: relative; }
.lp-imgnote {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  font-size: 11px; line-height: 1; letter-spacing: .02em;
  color: #fff; background: rgba(15,17,21,.55);
  padding: 5px 9px; border-radius: 999px;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}

/* =====================================================
   Fotobox-Bausteine (fotobox_hero + fotobox_vorlagen).
   Aus fotobox-kirchheim.de übernommen, aber marken-neutral: die Akzentfarbe
   kommt aus --lp-accent, abgeleitete Töne über color-mix. So passt der Baustein
   auf jede Seite (LP + Website).
   ===================================================== */
.lp {
  --fbx-accent:      var(--lp-accent);
  --fbx-accent-mid:  color-mix(in srgb, var(--lp-accent) 82%, #000 18%);
  --fbx-accent-dark: color-mix(in srgb, var(--lp-accent) 64%, #000 36%);
  --fbx-warm:        color-mix(in srgb, var(--lp-accent) 12%, #fff);
  --fbx-soft:        color-mix(in srgb, var(--lp-accent) 5%, #fff);
}

/* ── Hero ── */
.fbx-hero-sec { padding: 0 !important; }
.fbx-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 78vh; align-items: stretch; }
.fbx-hero-text {
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1.4rem, 4vw, 4rem);
  display: flex; flex-direction: column; justify-content: center;
}
.fbx-hero-text > * { max-width: 620px; }
.fbx-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fbx-accent-mid); font-weight: 800; margin-bottom: 1.4rem; }
/* Pulsierender Punkt entfernt (auf Wunsch). */
.fbx-hero-h1 { font-size: clamp(2.6rem, 4.5vw, 4.4rem); margin-bottom: .3rem; }
.fbx-hero-sub { font-weight: 800; font-size: clamp(.85rem, 1.3vw, 1.02rem); letter-spacing: .22em;
  text-transform: uppercase; color: var(--fbx-accent-mid); margin-bottom: 1.4rem; }
.fbx-hero-text .lp-tx { max-width: 440px; }
.fbx-benefits { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.fbx-benefit { display: flex; align-items: center; gap: .65rem; font-size: .95rem; color: var(--lp-muted); }
.fbx-benefit-check { width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
  background: var(--fbx-warm); border: 1.5px solid var(--fbx-accent); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
.fbx-benefit-check::before { content: ""; width: 5px; height: 9px; border: 2px solid var(--fbx-accent-dark);
  border-top: none; border-left: none; transform: rotate(45deg) translate(-1px, -1px); }
.fbx-hero-btns { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.fbx-hero-stats { display: flex; gap: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--lp-line); }
.fbx-stat-val { font-size: 1.5rem; font-weight: 900; color: var(--lp-ink); display: block; line-height: 1; }
.fbx-stat-lbl { font-size: .72rem; color: var(--lp-muted); letter-spacing: .06em; text-transform: uppercase; margin-top: .2rem; }

/* Rechte Bildhälfte */
.fbx-hero-image { position: relative; background: var(--fbx-soft); overflow: hidden; min-height: 320px; }
.fbx-hero-image > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; position: absolute; inset: 0; }

/* Polaroid-Karte */
.fbx-pola { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 10;
  width: calc(100% - 3rem); max-width: 340px; background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.7);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(28,20,16,.18), 0 2px 8px rgba(28,20,16,.08), inset 0 1px 0 rgba(255,255,255,.9);
  animation: fbxPolaReveal .7s cubic-bezier(.34,1.56,.64,1) 1.2s both; }
@keyframes fbxPolaReveal {
  from { opacity: 0; transform: translateX(-50%) translateY(24px) scale(.94); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
.fbx-pola-shutter { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fbx-sb { position: absolute; background: #1C1410; }
.fbx-sb-top    { top: 0; left: 0; right: 0; height: 50%; transform-origin: top center;    animation: fbxShutterV .55s cubic-bezier(.77,0,.18,1) 1.2s both; }
.fbx-sb-bottom { bottom: 0; left: 0; right: 0; height: 50%; transform-origin: bottom center; animation: fbxShutterV .55s cubic-bezier(.77,0,.18,1) 1.2s both; }
.fbx-sb-left   { top: 0; left: 0; bottom: 0; width: 50%; transform-origin: left center;   animation: fbxShutterH .55s cubic-bezier(.77,0,.18,1) 1.2s both; }
.fbx-sb-right  { top: 0; right: 0; bottom: 0; width: 50%; transform-origin: right center;  animation: fbxShutterH .55s cubic-bezier(.77,0,.18,1) 1.2s both; }
@keyframes fbxShutterV { 0%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(0);opacity:0} }
@keyframes fbxShutterH { 0%{transform:scaleX(1);opacity:1} 100%{transform:scaleX(0);opacity:0} }
.fbx-pola-in { padding: 1.1rem 1.4rem 1.2rem; position: relative; z-index: 1; }
.fbx-pola-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.fbx-pola-price { font-size: 2rem; font-weight: 900; color: #1C1410; line-height: 1; letter-spacing: -.03em; }
.fbx-pola-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--fbx-accent); flex-shrink: 0; }
.fbx-pola-dur { font-size: .8rem; font-weight: 700; color: #9C8878; text-transform: uppercase; letter-spacing: .1em; }
.fbx-pola-divider { height: 1px; background: #EDE5DD; margin-bottom: .6rem; }
.fbx-pola-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #9C8878; margin-bottom: .5rem; }
.fbx-pola-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.fbx-pola-tag { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 20px;
  background: var(--fbx-warm); color: var(--fbx-accent-dark); border: 1px solid color-mix(in srgb, var(--fbx-accent) 25%, transparent); letter-spacing: .02em; }

@media (max-width: 860px) {
  .fbx-hero { grid-template-columns: 1fr; }
  .fbx-hero-image { min-height: 420px; order: -1; }
}

/* ── Vorlagen ── */
.fbx-vor-head { max-width: 680px; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.fbx-vor-note { display: flex; align-items: flex-start; gap: .6rem; background: var(--fbx-warm);
  border: 1px solid var(--lp-line); border-left: 3px solid var(--fbx-accent-mid); border-radius: 10px;
  padding: .85rem 1.1rem; font-size: .9rem; color: var(--lp-muted); line-height: 1.6; margin-top: 1.1rem; }
.fbx-vor-note-ico { flex-shrink: 0; margin-top: 1px; }
.fbx-vor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2.4rem; }
@media (max-width: 820px) { .fbx-vor-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fbx-vor-grid { grid-template-columns: 1fr; } }
.fbx-vor-card { background: #fff; border: 1px solid var(--lp-line); border-radius: 14px; overflow: hidden;
  transition: box-shadow .2s, transform .2s; }
/* Hover-Effekt entfernt (auf Wunsch – keine Bewegung/Zoom bei den Vorlagen-Karten). */
.fbx-vor-imgwrap { position: relative; aspect-ratio: 1024 / 724; overflow: hidden; background: var(--fbx-soft); }
.fbx-vor-imgwrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; display: block; }
/* Bild-Zoom bei Hover entfernt (auf Wunsch). */
.fbx-vor-badge { position: absolute; top: .75rem; left: .75rem; background: var(--lp-ink); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; }
.fbx-vor-label { font-size: .85rem; font-weight: 700; color: var(--lp-muted); text-align: center;
  padding: .85rem 1rem; border-top: 1px solid var(--lp-line); margin: 0; }
.fbx-vor-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  background: var(--fbx-warm); border: 1px solid var(--lp-line); border-radius: 18px;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem); flex-wrap: wrap; }
.fbx-vor-cta p { font-size: .95rem; color: var(--lp-muted); max-width: 500px; margin: 0; }

/* ── Fotobox-Preis (Split: dunkel links, Preis-Karte rechts) ── */
.fbx-pr-sec { padding: 0 !important; }
.fbx-pr { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.fbx-pr-left {
  color: #fff;
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1.6rem, 4vw, 4rem);
  display: flex; flex-direction: column; justify-content: center;
}
.fbx-pr-left .lp-kick { color: var(--fbx-accent); }
.fbx-pr-left .fbx-pr-h { color: #fff; margin-bottom: 1.4rem; }
.fbx-pr-left .lp-tx { color: rgba(255,255,255,.62); max-width: 360px; margin-bottom: 2rem; }
.fbx-pr-left-btn .lp-btns { justify-content: flex-start; margin-top: 0; }
.fbx-pr-right {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.4rem, 3vw, 3rem);
}

/* Frei wählbarer Hintergrund pro Seite (bg_left / bg_right). */
.fbx-pr .fbx-bg-dark       { background: var(--lp-ink); }
.fbx-pr .fbx-bg-ink        { background: #000; }
.fbx-pr .fbx-bg-accent     { background: var(--fbx-accent); }
.fbx-pr .fbx-bg-accentdark { background: var(--fbx-accent-dark); }
.fbx-pr .fbx-bg-warm       { background: var(--fbx-warm); }
.fbx-pr .fbx-bg-light      { background: var(--fbx-soft); }
.fbx-pr .fbx-bg-white      { background: #fff; }
/* Auf hellen Hintergründen (warm/hell/weiß) wird die LINKE Textseite dunkel. */
.fbx-pr-left.fbx-bg-warm,
.fbx-pr-left.fbx-bg-light,
.fbx-pr-left.fbx-bg-white  { color: var(--lp-ink); }
.fbx-pr-left.fbx-bg-warm  .fbx-pr-h,
.fbx-pr-left.fbx-bg-light .fbx-pr-h,
.fbx-pr-left.fbx-bg-white .fbx-pr-h { color: var(--lp-ink); }
.fbx-pr-left.fbx-bg-warm  .lp-tx,
.fbx-pr-left.fbx-bg-light .lp-tx,
.fbx-pr-left.fbx-bg-white .lp-tx { color: var(--lp-muted); }
.fbx-pr-left.fbx-bg-warm  .lp-kick,
.fbx-pr-left.fbx-bg-light .lp-kick,
.fbx-pr-left.fbx-bg-white .lp-kick { color: var(--fbx-accent-dark); }
.fbx-pr-card {
  background: #fff; border-radius: 20px; padding: clamp(1.8rem, 3vw, 2.5rem) clamp(1.6rem, 3vw, 3rem);
  box-shadow: 0 20px 60px rgba(60,30,10,.1); width: 100%; max-width: 440px;
}
.fbx-pr-name { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-muted); font-weight: 700; margin-bottom: 1rem; }
.fbx-pr-amount { font-size: clamp(2.8rem, 5vw, 3.5rem); font-weight: 900; line-height: 1; color: var(--lp-ink); }
.fbx-pr-amount sup { font-size: .38em; vertical-align: super; margin-right: 2px; font-weight: 800; }
.fbx-pr-dur { font-size: .83rem; color: var(--lp-muted); margin: .3rem 0 1.5rem; }
.fbx-pr-divider { height: 1px; background: var(--lp-line); margin-bottom: 1.5rem; }
.fbx-pr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.fbx-pr-list li { font-size: .9rem; color: var(--lp-muted); display: flex; align-items: center; gap: .65rem; }
.fbx-pr-list li::before {
  content: "✓"; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; min-width: 18px; border-radius: 50%;
  background: var(--fbx-warm); color: var(--fbx-accent-dark); font-size: .62rem; font-weight: 700;
}
.fbx-pr-card-btn { margin-top: 1.75rem; }
.fbx-pr-card-btn .lp-btn { display: flex; width: 100%; justify-content: center; }
.fbx-pr-note { font-size: .72rem; color: var(--lp-muted); text-align: center; margin-top: .75rem; font-style: italic; }
@media (max-width: 860px) { .fbx-pr { grid-template-columns: 1fr; } }

/* ── Kamera-Blitz + Lens-Flare (fotobox_hero Bildhälfte) ── */
.fbx-flash { position: absolute; top: 10%; left: 12%; width: 73%; height: 43%; z-index: 3;
  pointer-events: none; border-radius: 6px; overflow: hidden; }
.fbx-flash::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 55% 60%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 25%, transparent 70%);
  opacity: 0; animation: fbxCamFlash 3.5s ease-in-out infinite; }
.fbx-flash::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 55% 60%, rgba(255,240,180,.55) 0%, rgba(255,220,130,.2) 40%, transparent 70%);
  opacity: 0; animation: fbxCamGlow 3.5s ease-in-out infinite; }
@keyframes fbxCamFlash { 0%,37%{opacity:0} 40%{opacity:1} 43%{opacity:.15} 45%{opacity:.9} 48%{opacity:0} 100%{opacity:0} }
@keyframes fbxCamGlow { 0%,47%{opacity:0} 55%{opacity:.8} 80%{opacity:.3} 100%{opacity:0} }

.fbx-flare { position: absolute; top: calc(10% + 43% * .56); left: calc(12% + 73% * .52); z-index: 4;
  pointer-events: none; transform: translate(-50%,-50%); }
.fbx-lf-core { width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,240,150,.8) 50%, transparent 100%);
  opacity: 0; animation: fbxLfCore 3.5s ease-in-out infinite; }
.fbx-lf-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.6);
  top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0); opacity: 0; }
.fbx-lf-ring-1 { width: 40px; height: 40px; animation: fbxLfRing 3.5s ease-in-out infinite .02s; }
.fbx-lf-ring-2 { width: 70px; height: 70px; border-color: rgba(255,220,100,.35); animation: fbxLfRing 3.5s ease-in-out infinite .06s; }
.fbx-lf-ring-3 { width: 110px; height: 110px; border-color: rgba(255,200,80,.18); animation: fbxLfRing 3.5s ease-in-out infinite .12s; }
.fbx-lf-streak { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 300px; height: 2px;
  background: linear-gradient(to right, transparent 0%, rgba(255,240,180,.25) 20%, rgba(255,255,255,.7) 48%, rgba(255,255,255,.7) 52%, rgba(255,240,180,.25) 80%, transparent 100%);
  opacity: 0; animation: fbxLfStreak 3.5s ease-in-out infinite; }
@keyframes fbxLfCore { 0%,37%{opacity:0;transform:scale(.3)} 40%{opacity:1;transform:scale(1.4)} 44%{opacity:.6;transform:scale(.8)} 46%{opacity:1;transform:scale(1.2)} 50%{opacity:.4;transform:scale(.6)} 58%{opacity:0} 100%{opacity:0} }
@keyframes fbxLfRing { 0%,38%{opacity:0;transform:translate(-50%,-50%) scale(0)} 42%{opacity:.8;transform:translate(-50%,-50%) scale(1)} 65%{opacity:0;transform:translate(-50%,-50%) scale(1.8)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)} }
@keyframes fbxLfStreak { 0%,39%{opacity:0} 42%{opacity:1} 50%{opacity:.5} 60%{opacity:0} 100%{opacity:0} }
@media (prefers-reduced-motion: reduce) { .fbx-flash, .fbx-flare { display: none; } }

/* ── Fotobox: EINHEITLICHE Abstände (wie die Original-Seite: 5rem/80px oben+unten) ──
   Ziel: alle Sektionen der Fotobox-Seite haben denselben vertikalen Rhythmus,
   unabhängig von den Steuerfeldern. Nur die Fotobox-Bausteine betroffen. */
:root { --fbx-gap: clamp(3rem, 6vw, 5rem); }   /* ~48–80px */

/* Vollflächige Splits (Hero/Preis): randlos, aber Innenpolster einheitlich groß. */
.fbx-hero-sec, .fbx-pr-sec { padding: 0 !important; }
.fbx-hero-text  { padding: var(--fbx-gap) clamp(1.8rem, 5vw, 4rem); }
.fbx-pr-left    { padding: var(--fbx-gap) clamp(1.8rem, 5vw, 4rem); }
.fbx-pr-right   { padding: var(--fbx-gap) clamp(1.6rem, 4vw, 3rem); }
.fbx-hero { min-height: 82vh; }
.fbx-pr   { min-height: 460px; }
.fbx-hero-btns  { margin-bottom: clamp(2rem, 3.5vw, 2.8rem); }
.fbx-benefits   { margin-bottom: clamp(1.8rem, 3vw, 2.2rem); }
.fbx-hero-stats { padding-top: clamp(1.5rem, 3vw, 2rem); gap: clamp(1.6rem, 3.5vw, 2.4rem); }
.fbx-pr-card    { padding: clamp(2rem, 3.5vw, 2.6rem) clamp(1.8rem, 3.5vw, 2.8rem); }
.fbx-pr-left .lp-tx { margin-bottom: clamp(1.8rem, 3vw, 2.2rem); }
.fbx-pr-list { gap: .75rem; }

/* Vorlagen-Sektion: einheitlicher Innenabstand oben/unten (wie Original 80px),
   robust ohne :has() – der Wrapper .lp-b traegt die Steuerfeld-Paddings; wir
   erzwingen hier den einheitlichen Wert nur, wenn die Vorlagen drin sind. */
.fbx-vor-head { margin-bottom: var(--fbx-gap); }
.fbx-vor-grid { gap: clamp(1.4rem, 2.5vw, 1.8rem); margin-bottom: var(--fbx-gap); }
.fbx-vor-cta  { padding: clamp(1.8rem, 3.5vw, 2.4rem) clamp(1.8rem, 4vw, 2.6rem); }

/* Kein doppelter/harter Übergang zwischen randlosen Splits und normalen Sektionen. */
.fbx-hero-sec + .lp-b, .fbx-pr-sec + .lp-b,
.lp-b + .fbx-hero-sec, .lp-b + .fbx-pr-sec { margin-top: 0; }

/* ── Fotobox-Flyer (Text links, gestapelte Blätter rechts, PDF-Button) ── */
.fbx-fly-sec { padding: 0 !important; }
.fbx-fly {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  max-width: var(--lp-wrap, 1080px); margin: 0 auto;
  padding: var(--fbx-gap, clamp(3rem,6vw,5rem)) clamp(1.2rem, 4vw, 2.5rem);
}
.fbx-fly-left .lp-kick { color: var(--fbx-accent-mid); }
.fbx-fly-left .lp-tx { max-width: 440px; }
.fbx-fly-btn { margin: 1.75rem 0 0; }
.fbx-fly-note { font-size: .78rem; color: var(--lp-muted); margin: 1rem 0 0; }
/* Grafik: gekippter Stapel aus 3 Blättern. */
.fbx-fly-art { position: relative; height: clamp(260px, 30vw, 340px); }
.fbx-fly-sheet {
  position: absolute; top: 50%; left: 50%; width: min(230px, 62%); aspect-ratio: 3 / 4.2;
  background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(60,30,10,.14);
  transform: translate(-50%, -50%) rotate(0deg); overflow: hidden;
}
.fbx-fly-s2 { transform: translate(-58%, -52%) rotate(-9deg); background: #f3efe9; }
.fbx-fly-s1 { transform: translate(-46%, -49%) rotate(-4deg); background: #f8f5f1; }
.fbx-fly-front { transform: translate(-50%, -50%) rotate(4deg); }
.fbx-fly-top {
  display: flex; align-items: center; justify-content: center; height: 44%;
  color: #fff; background: linear-gradient(135deg, #3a3a3c, #6c6c6e);
}
.fbx-fly-top svg { color: var(--fbx-accent-mid); }
.fbx-fly-lines { display: block; padding: 12% 14% 0; }
.fbx-fly-lines i { display: block; height: 5px; border-radius: 3px; background: var(--lp-line); margin-bottom: 8px; }
.fbx-fly-lines i:nth-child(2) { width: 70%; }
.fbx-fly-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: var(--fbx-accent); }
@media (max-width: 800px) {
  .fbx-fly { grid-template-columns: 1fr; gap: clamp(2rem,6vw,3rem); }
  .fbx-fly-right { order: -1; }
}

/* ── Fotobox-Angebot (Firmen-Selbst-Kalkulator) ── */
.fbx-ang {
  max-width: 720px; margin: clamp(1.5rem,3vw,2.5rem) auto 0;
  border: 1px solid var(--lp-line); border-radius: 16px; overflow: hidden;
  background: #fff; box-shadow: 0 10px 40px rgba(60,30,10,.06);
}
.fbx-ang-rows { display: flex; flex-direction: column; }
.fbx-ang-row {
  display: flex; align-items: center; gap: 1rem; padding: 1rem clamp(1rem,3vw,1.6rem);
  border-bottom: 1px solid var(--lp-line); cursor: pointer; transition: background .12s;
}
.fbx-ang-row:hover { background: var(--fbx-soft); }
.fbx-ang-base { cursor: default; background: var(--fbx-soft); }
.fbx-ang-base:hover { background: var(--fbx-soft); }
.fbx-ang-row.is-on { background: color-mix(in srgb, var(--fbx-accent) 8%, #fff); }
.fbx-ang-ctl { flex: 0 0 auto; display: flex; align-items: center; }
.fbx-ang-chk { width: 20px; height: 20px; accent-color: var(--fbx-accent); cursor: pointer; }
.fbx-ang-qty { width: 56px; padding: .4rem .5rem; text-align: center; border: 1px solid var(--lp-line);
  border-radius: 8px; font: inherit; }
.fbx-ang-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.fbx-ang-name { font-weight: 700; color: var(--lp-ink); font-size: .98rem; }
.fbx-ang-desc { font-size: .8rem; color: var(--lp-muted); }
.fbx-ang-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fbx-accent-dark); font-weight: 800; margin-top: .1rem; }
.fbx-ang-price { flex: 0 0 auto; font-weight: 800; color: var(--lp-ink); white-space: nowrap; }
.fbx-ang-price small { font-weight: 600; color: var(--lp-muted); }
.fbx-ang-sum {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem clamp(1rem,3vw,1.6rem); background: var(--lp-ink); color: #fff;
}
.fbx-ang-sum span { font-weight: 700; letter-spacing: .02em; }
.fbx-ang-total { font-size: 1.5rem; font-weight: 900; }
.fbx-ang-recv { display: flex; flex-direction: column; gap: .6rem;
  padding: clamp(1rem,3vw,1.5rem) clamp(1rem,3vw,1.5rem) 0; }
.fbx-ang-recv .fbx-ang-zc { display: flex; gap: .6rem; }
.fbx-ang-f { padding: .8rem 1rem; border: 1px solid var(--lp-line); border-radius: 10px; font: inherit; width: 100%; }
.fbx-ang-zip { flex: 0 0 120px; }
.fbx-ang-recv .fbx-ang-zc .fbx-ang-f:last-child { flex: 1 1 auto; }
.fbx-ang-form { display: flex; gap: .6rem; flex-wrap: wrap; padding: clamp(1rem,3vw,1.5rem); }
.fbx-ang-form .fbx-ang-pdf { flex: 1 1 auto; }
.fbx-ang-note { font-size: .74rem; color: var(--lp-muted); font-style: italic;
  padding: 0 clamp(1rem,3vw,1.5rem) 1.2rem; margin: 0; }
@media (max-width: 520px) {
  .fbx-ang-form .fbx-ang-pdf { flex: 1 1 100%; }
}

/* ── Fotobox-Terminbuchung („Fenster"-Karte ums iframe) ── */
.fbx-book-head-txt { max-width: 680px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.fbx-book-win {
  max-width: 1600px; margin: 0 auto; background: #fff;
  border: 1px solid var(--lp-line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 40px rgba(60,30,10,.07);
}
.fbx-book-head {
  padding: 1.1rem 1.75rem; border-bottom: 1px solid var(--lp-line);
  display: flex; align-items: center; gap: .75rem;
}
.fbx-book-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fbx-accent); flex: 0 0 auto; }
.fbx-book-title { font-size: .9rem; font-weight: 700; color: var(--lp-ink); }
.fbx-book-sub { font-size: .82rem; color: var(--lp-muted); margin-left: auto; }
.fbx-book-win iframe { display: block; width: 100%; border: 0; }
/* Consent-Platzhalter im Fenster hübsch (bis der Nutzer zustimmt). */
.fbx-book-win [data-consent] { min-height: 320px; }

/* ── Fotobox-Zahlenleiste (Vollbreite-Balken) ── */
.fbx-sb-sec { padding: 0 !important; }
.fbx-sb-bar {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  background: var(--fbx-accent); color: #fff;
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.2rem, 4vw, 2.5rem);
}
.fbx-sb-item { text-align: center; padding: .5rem clamp(1.4rem, 4vw, 2.5rem); border-right: 1px solid rgba(255,255,255,.28); }
.fbx-sb-item:last-child { border-right: 0; }
.fbx-sb-num { display: block; font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 900; color: #fff; line-height: 1; }
.fbx-sb-lbl { display: block; font-size: .75rem; color: rgba(255,255,255,.85); letter-spacing: .07em; text-transform: uppercase; margin-top: .3rem; }
@media (max-width: 520px) {
  .fbx-sb-item { border-right: 0; padding: .5rem 1.2rem; }
}

/* ── Fotobox-Navigation (fixe Leiste oben) ── */
.fbx-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: color-mix(in srgb, #fff 88%, transparent);
  backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--lp-line);
}
.fbx-nav-in {
  max-width: var(--lp-wrap, 1080px); margin: 0 auto; padding: .85rem clamp(1rem, 4vw, 2.5rem);
  display: flex; align-items: center; gap: 1.5rem;
}
.fbx-nav-logo { font-size: 1rem; font-weight: 900; color: var(--lp-ink); text-decoration: none;
  white-space: nowrap; margin-right: auto; letter-spacing: -.01em; }
.fbx-nav-logo span { color: var(--fbx-accent-mid); }
.fbx-nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); list-style: none; margin: 0; padding: 0; }
.fbx-nav-links a { text-decoration: none; color: var(--lp-muted); font-size: .875rem; transition: color .15s; }
.fbx-nav-links a:hover { color: var(--lp-ink); }
.fbx-nav-cta { background: var(--lp-ink) !important; color: #fff !important; padding: .45rem 1.1rem;
  border-radius: 9px; font-weight: 700; }
.fbx-nav-cta:hover { background: var(--fbx-accent-dark) !important; }
/* Platz schaffen, damit der fixe Balken nichts überdeckt. Der erste Baustein
   (meist Hero) rückt runter; Anker springen sauber unter die Leiste. */
/* Fixe Nav (position:fixed) nimmt keinen Platz weg. Damit Inhalt nicht drunter
   startet, gibt es padding-top am .lp. Der Hero soll aber bündig oben anschließen
   (sein Bild bis unter die Nav) – deshalb zieht die erste Hero-Sektion den
   padding-Abstand per negativem margin wieder heraus. Der Hero-Text gleicht das
   intern aus, damit er nicht unter der Nav klebt. */
.lp:has(.fbx-nav) { padding-top: 96px; }
.lp:has(.fbx-nav) .fbx-hero-sec:first-of-type { margin-top: -96px; }
.lp:has(.fbx-nav) .fbx-hero-sec:first-of-type .fbx-hero-text { padding-top: calc(clamp(2.5rem,5vw,5rem) + 96px); }
.lp [id] { scroll-margin-top: 80px; }
/* Auf Handy: Links kompakter / bei sehr schmal ausblenden (Button bleibt). */
@media (max-width: 640px) {
  .fbx-nav-in { gap: .8rem; }
  .fbx-nav-links { gap: .9rem; }
  .fbx-nav-links li:not(:last-child) { display: none; }   /* nur der Button bleibt */
}