/*
 * Designrichtung "fangrowth": der Stil der alten fangrowth.de (Webflow, 2024),
 * mit dem neuen Aufbau. Weiss mit hellgrauen Abschnitten, Montserrat, Pink als
 * einzige Knopf- und Akzentfarbe mit Leuchtschatten, Pillen-Knoepfe, Fotos mit
 * einer grossen runden Ecke, Konfetti (Ring und Punkte) aus den Zusatzfarben
 * decor1-3 rund um das Einstiegsfoto, Fotoleiste im Abschluss.
 * Laedt nach lp.css; jede Regel gilt nur unter .lp-design-fangrowth.
 * Formen nur aus CSS-Verlaeufen und Rahmen, ohne eingebundene Dateien.
 */

.lp-design-fangrowth {
  --fg-glow: 0 7px 30px color-mix(in srgb, var(--lp-accent) 42%, transparent);
  --fg-glow-hover: 0 12px 36px color-mix(in srgb, var(--lp-accent) 55%, transparent);
  --fg-soft: 0 18px 40px -22px rgba(28, 36, 56, 0.28);
  --fg-ecke: 20px 20px 160px 20px;
}

/* --- Schrift -------------------------------------------------------------------- */

.lp-design-fangrowth .lp-h1 { font-size: clamp(2.35rem, 5.6vw, 3.9rem); line-height: 1.08; letter-spacing: -0.01em; }
.lp-design-fangrowth .lp-h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.12; letter-spacing: -0.01em; }
.lp-design-fangrowth .lp-h3 { font-weight: 700; letter-spacing: 0; }
.lp-design-fangrowth .lp-eyebrow {
  margin-bottom: 14px !important; color: var(--lp-accent);
  font-size: 0.95rem; letter-spacing: 0.02em; text-transform: none;
}
.lp-design-fangrowth .lp-eyebrow::before { display: none; }
.lp-design-fangrowth .lp-lead, .lp-design-fangrowth .lp-body { color: var(--s-muted); }

/* Ueberschriften der Raster-Abschnitte mittig, wie "Unsere Leistungen". */
.lp-design-fangrowth .lp-features .lp-section-head,
.lp-design-fangrowth .lp-creatorroster .lp-section-head {
  margin-inline: auto; text-align: center;
}

/* --- Knoepfe: Pille in Pink mit Leuchtschatten ------------------------------------ */

.lp-design-fangrowth .lp-btn {
  min-height: 56px; padding: 15px 32px; border-radius: 999px;
  font-weight: 800; letter-spacing: 0.01em; box-shadow: var(--fg-glow);
}
.lp-design-fangrowth .lp-btn:hover { box-shadow: var(--fg-glow-hover); }
.lp-design-fangrowth .lp-btn--ghost {
  background: var(--s-bg, var(--lp-bg)); color: var(--s-fg); box-shadow: none;
  border: 2px solid color-mix(in srgb, var(--s-fg) 18%, transparent);
}
.lp-design-fangrowth .lp-btn--ghost:hover { border-color: var(--lp-accent); color: var(--lp-accent); box-shadow: none; }
.lp-design-fangrowth .lp-btn--small { min-height: 46px; padding: 10px 24px; }

/* --- Kopf: Schriftzug ganz in Pink ------------------------------------------------ */

.lp-design-fangrowth .lp-header { background: color-mix(in srgb, var(--lp-bg) 94%, transparent); border-bottom-color: transparent; }
.lp-design-fangrowth .lp-wordmark { color: var(--lp-accent); font-weight: 700; letter-spacing: -0.01em; }
.lp-design-fangrowth .lp-nav a { font-weight: 500; }
.lp-design-fangrowth .lp-nav a:hover { color: var(--lp-accent); }

/* --- Einstieg: Foto mit grosser Ecke, Konfetti drumherum -------------------------- */

.lp-design-fangrowth .lp-hero { overflow: hidden; }
.lp-design-fangrowth .lp-hero__media { position: relative; }
.lp-design-fangrowth .lp-hero__img,
.lp-design-fangrowth .lp-imagetext__img {
  border-radius: var(--fg-ecke); box-shadow: var(--fg-soft);
}
/* Ring unten rechts */
.lp-design-fangrowth .lp-hero__media::before {
  content: ""; position: absolute; inset: auto -26px -26px auto; z-index: 2;
  width: 26%; aspect-ratio: 1; border-radius: 50%;
  border: clamp(9px, 1.4vw, 15px) solid var(--lp-decor3); background: transparent;
}
/* Punkte und Striche rundherum (ein Hintergrund aus mehreren Verlaeufen) */
.lp-design-fangrowth .lp-hero__media::after {
  content: ""; position: absolute; inset: -9% -9%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle, var(--lp-accent) 0 58%, transparent 60%) 2% 58% / 30px 30px no-repeat,
    radial-gradient(circle, var(--lp-decor1) 0 58%, transparent 60%) 94% 4% / 34px 34px no-repeat,
    radial-gradient(circle, var(--lp-decor2) 0 58%, transparent 60%) 98% 70% / 24px 24px no-repeat,
    radial-gradient(circle, var(--lp-accent) 0 58%, transparent 60%) 70% 99% / 22px 22px no-repeat,
    radial-gradient(circle, var(--lp-decor3) 0 58%, transparent 60%) 4% 90% / 20px 20px no-repeat,
    linear-gradient(var(--lp-decor2), var(--lp-decor2)) 12% 2% / 14px 64px no-repeat,
    linear-gradient(var(--lp-decor1), var(--lp-decor1)) 100% 36% / 60px 14px no-repeat;
}
.lp-design-fangrowth .lp-hero__media > * { position: relative; z-index: 1; }
.lp-design-fangrowth .lp-hero__media--multi { gap: 14px; }
/* Einstieg ohne Bild (Creator-Seite): eine Spalte, wirklich mittig. */
.lp-design-fangrowth .lp-hero--centered .lp-hero__grid { grid-template-columns: minmax(0, 1fr); }
.lp-design-fangrowth .lp-hero--centered { padding-bottom: clamp(32px, 5vw, 56px); }

/* --- Karten: weiss, weich, auf grauen Abschnitten --------------------------------- */

.lp-design-fangrowth .lp-card {
  border-radius: 20px; box-shadow: var(--fg-soft);
}
.lp-design-fangrowth .lp-surface-default .lp-card { border: 1px solid var(--lp-border); box-shadow: none; }
.lp-design-fangrowth .lp-card__num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px;
  border-radius: 50%; background: var(--lp-accent); color: var(--lp-accent-fg);
  font-weight: 800; font-size: 0.95rem; box-shadow: var(--fg-glow);
}

/* --- Bild und Text: Ring statt versetzter Flaeche ---------------------------------- */

.lp-design-fangrowth .lp-imagetext__media { position: relative; }
.lp-design-fangrowth .lp-imagetext__media::before {
  inset: auto auto -22px -22px; width: 22%; aspect-ratio: 1; border-radius: 50%;
  border: 12px solid var(--lp-decor2); background: transparent; z-index: 2;
}
.lp-design-fangrowth .lp-facts li { border-radius: 16px; }

/* --- Creator-Karten ------------------------------------------------------------------ */

.lp-design-fangrowth .lp-creator__card {
  padding: 10px; border-radius: 22px; background: var(--lp-bg);
  box-shadow: var(--fg-soft); border: 1px solid var(--lp-border);
}
.lp-design-fangrowth .lp-creator__img { border-radius: 16px 16px 90px 16px; }
.lp-design-fangrowth .lp-creator__body { padding: 16px 8px 6px; }
.lp-design-fangrowth .lp-creator__name { font-weight: 700; letter-spacing: -0.01em; }
.lp-design-fangrowth .lp-tags li {
  background: color-mix(in srgb, var(--lp-accent) 10%, var(--lp-bg)); color: var(--lp-accent); font-weight: 700;
}
.lp-design-fangrowth .lp-creator__badge { border: 1px solid var(--lp-border); }
/* Kompakte Uebersicht: die letzte Reihe steht mittig (auch nach dem Filter, der Karten
   per hidden ausblendet); fuenf Karten am Rechner 3 + 2. Spaltenabstaende wie lp.css. */
.lp-design-fangrowth .lp-roster.lp-roster--compact { display: flex; flex-wrap: wrap; justify-content: center; }
.lp-design-fangrowth .lp-roster--compact > .lp-creator { flex: 0 0 calc((100% - 14px) / 2); }
@media (min-width: 700px) {
  .lp-design-fangrowth .lp-roster--compact > .lp-creator { flex-basis: calc((100% - 2 * 18px) / 3); }
}
@media (min-width: 1000px) {
  .lp-design-fangrowth .lp-roster--compact > .lp-creator { flex-basis: calc((100% - 3 * 20px) / 4); }
  .lp-design-fangrowth .lp-roster--compact.lp-roster--5 > .lp-creator { flex-basis: calc((100% - 2 * 20px) / 3); }
}
/* Am Handy passt „Profil ansehen“ in eine Zeile: Knopf so breit wie die Karte. */
@media (max-width: 699px) {
  .lp-design-fangrowth .lp-roster--compact .lp-btn--creator {
    width: 100%; padding-inline: 10px; white-space: nowrap;
  }
}
.lp-design-fangrowth .lp-spotlight__img { border-radius: var(--fg-ecke); }

/* --- Formular ------------------------------------------------------------------------ */

.lp-design-fangrowth .lp-formblock__card {
  border-radius: 24px; background: var(--lp-bg); box-shadow: var(--fg-soft); border: 1px solid var(--lp-border);
}

/* --- Fragen -------------------------------------------------------------------------- */

.lp-design-fangrowth .lp-faq__item summary { font-weight: 700; }

/* --- Abschluss: mittig, darunter die Fotoleiste wie auf der alten Seite ---------------- */

.lp-design-fangrowth .lp-cta { text-align: center; }
.lp-design-fangrowth .lp-cta .lp-container { grid-template-columns: minmax(0, 1fr); gap: 0; }
.lp-design-fangrowth .lp-cta .lp-section-head,
.lp-design-fangrowth .lp-cta .lp-lead { margin-inline: auto; }
.lp-design-fangrowth .lp-cta .lp-actions { justify-content: center; }
/* Mit Fotos: die Leiste reicht ueber die ganze Breite und schliesst unten buendig ab. */
.lp-design-fangrowth .lp-cta:has(.lp-cta__gallery) { padding-bottom: 0; }
.lp-design-fangrowth .lp-cta__gallery {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  width: 100vw; margin: clamp(40px, 6vw, 72px) 0 0 calc(50% - 50vw);
  padding: 0; list-style: none;
}
.lp-design-fangrowth .lp-cta__gallery li { transform: none !important; }
@media (min-width: 700px) {
  .lp-design-fangrowth .lp-cta__gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lp-design-fangrowth .lp-cta__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; box-shadow: none; }

/* --- Fuss: hellgrau, Schriftzug in Pink ------------------------------------------------ */

.lp-design-fangrowth .lp-footer .lp-wordmark { color: var(--lp-accent); }
.lp-design-fangrowth .lp-footer__links a { color: var(--lp-accent); font-weight: 700; }

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