/**
 * STARFRUIT STUDIO – DESIGN SYSTEM R2
 * Finaler Konsistenz-Layer, 2026-11-12
 */

/* =========================================================
   1. EIN GEMEINSAMER RHYTHMUS
   ========================================================= */

:root {
  --sfs-r2-space: clamp(70px, 8.5vw, 104px);
  --sfs-r2-space-mobile: 54px;
  --sfs-r2-gap: clamp(34px, 5vw, 54px);
}

.section-header .lead {
  margin-top: 16px;
}

.section-header > :last-child,
.card > :last-child,
.cta-block > :last-child {
  margin-bottom: 0;
}

/* Kundenstimmen: bewusst als eigener Abschnitt lesbar */
body.page-id-46 .sfs-service-testimonial-band,
body.page-id-129 .sfs-service-testimonial-band,
body.page-id-139 .sfs-service-testimonial-band {
  margin-top: clamp(48px, 6vw, 72px);
  margin-bottom: clamp(48px, 6vw, 72px);
}

/* Website: Praxisblock und FAQ ebenfalls nicht ankleben lassen */
body.page-id-46 .sfs-service-proof {
  margin-top: clamp(48px, 6vw, 76px);
  margin-bottom: clamp(48px, 6vw, 76px);
}


/* =========================================================
   2. GROSSE SCHWARZE PROBLEMBLÖCKE -> OFFENE HELLE ABSCHNITTE
   ========================================================= */

body.page-id-46 .section--dark,
body.page-id-136 .section--dark {
  background: transparent !important;
  color: var(--ink) !important;
  clip-path: none !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

body.page-id-46 .section--dark h2,
body.page-id-46 .section--dark h3,
body.page-id-136 .section--dark h2,
body.page-id-136 .section--dark h3 {
  color: var(--ink) !important;
}

body.page-id-46 .section--dark .kicker,
body.page-id-46 .section--dark .section-header .lead,
body.page-id-46 .section--dark .pain-point p,
body.page-id-136 .section--dark .kicker,
body.page-id-136 .section--dark .section-header .lead,
body.page-id-136 .section--dark .pain-point p {
  color: var(--muted) !important;
}

body.page-id-46 .section--dark .pain-points-grid,
body.page-id-136 .section--dark .pain-points-grid {
  gap: 22px 30px;
}

body.page-id-46 .section--dark .pain-point,
body.page-id-136 .section--dark .pain-point {
  padding: 22px 0 4px !important;
  text-align: left !important;
  background: transparent !important;
  border-top: 1px solid var(--line);
}

body.page-id-46 .section--dark .pain-point svg,
body.page-id-136 .section--dark .pain-point svg {
  color: var(--accent-text, var(--ink)) !important;
}


/* =========================================================
   3. HERO-REGEL: ZENTRIERT BLEIBT ZENTRIERT
   ========================================================= */

body.page-id-46 .website-hero-header,
body.page-id-136 .analytics-hero,
body.page-id-129 .hero-lp {
  text-align: center !important;
}

body.page-id-46 .website-hero-header .lead,
body.page-id-136 .analytics-hero .lead,
body.page-id-129 .hero-lp .lead {
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page-id-46 .website-hero-header .act,
body.page-id-136 .analytics-hero .act,
body.page-id-129 .hero-lp .act {
  justify-content: center !important;
}


/* =========================================================
   4. PRAXISBLÖCKE: KEINE GRÜNSTICHIGEN VOLLFÄCHEN
   ========================================================= */

body.page-id-111 .sfs-service-proof,
body.page-id-123 .sfs-service-proof,
body.page-id-129 .sfs-service-proof {
  background: transparent !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

body.page-id-111 .sfs-proof-media img,
body.page-id-111 .sfs-proof-media--logo,
body.page-id-123 .sfs-proof-media img,
body.page-id-123 .sfs-proof-media--logo,
body.page-id-129 .sfs-proof-media img,
body.page-id-129 .sfs-proof-media--logo {
  clip-path: var(--clip-path-cut);
}


/* =========================================================
   5. LEISTUNGS-CTAS: EIN GEMEINSAMER HELLER LOOK
   ========================================================= */

body.page-id-46 .cta-block,
body.page-id-111 .cta-block,
body.page-id-123 .cta-block,
body.page-id-129 .cta-block,
body.page-id-136 .cta-block {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
  clip-path: var(--clip-path-cut);
  box-shadow: none !important;
}

body.page-id-46 .cta-block h2,
body.page-id-111 .cta-block h2,
body.page-id-123 .cta-block h2,
body.page-id-129 .cta-block h2,
body.page-id-136 .cta-block h2 {
  color: var(--ink) !important;
}

body.page-id-46 .cta-block .lead,
body.page-id-111 .cta-block .lead,
body.page-id-123 .cta-block .lead,
body.page-id-129 .cta-block .lead,
body.page-id-136 .cta-block .lead {
  color: var(--muted) !important;
  opacity: 1 !important;
}


/* =========================================================
   6. BETREUUNG: CUT-EDGE NUR AN DER GEWÜNSCHTEN STELLE
   ========================================================= */

body.page-id-139 .sfc-care-scope {
  background: transparent !important;
}

body.page-id-139 .sfc-care-scope > .wrap {
  padding: clamp(34px, 5vw, 58px);
  background: var(--bg);
  border: 1px solid var(--line);
  clip-path: var(--clip-path-cut);
}


/* =========================================================
   7. ANALYTICS: RUHIGE FRAGEN-/BILD-SEKTION
   ========================================================= */

.sfs-analytics-questions-grid {
  display: grid;
  gap: clamp(38px, 7vw, 82px);
  align-items: center;
}

.sfs-analytics-questions-copy h2 {
  max-width: 16ch;
  margin: 10px 0 18px;
}

.sfs-analytics-questions-copy > .lead {
  max-width: 58ch;
  margin: 0;
}

.sfs-analytics-question-list {
  margin-top: 30px;
  border-top: 1px solid var(--line);
}

.sfs-analytics-question {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.sfs-analytics-question strong,
.sfs-analytics-question span {
  display: block;
}

.sfs-analytics-question strong {
  margin-bottom: 5px;
  color: var(--ink);
}

.sfs-analytics-question span {
  color: var(--muted);
  line-height: 1.6;
}

.sfs-analytics-visual {
  margin: 0;
}

.sfs-analytics-visual img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--line);
  clip-path: var(--clip-path-cut);
  box-shadow: 0 18px 42px rgba(0,0,0,.06);
}

.sfs-analytics-visual figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .sfs-analytics-questions-grid {
    grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  }
}


/* =========================================================
   8. ÜBER UNS + REFERENZEN: DREIERBLÖCKE OHNE KARTENWAND
   ========================================================= */

.sfa-hero-proof.sfa-hero-skills,
.sfr3-hero-facts.sfr3-hero-skills {
  display: grid;
  gap: 0;
}

.sfa-hero-skills span,
.sfr3-hero-skills span {
  display: block;
  padding: 16px 0;
}

.sfa-hero-skills strong,
.sfa-hero-skills small,
.sfr3-hero-skills strong,
.sfr3-hero-skills small {
  display: block;
}

.sfa-hero-skills strong,
.sfr3-hero-skills strong {
  color: var(--ink);
  font-size: .9rem;
}

.sfa-hero-skills small,
.sfr3-hero-skills small {
  margin-top: 5px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}

@media (min-width: 820px) {
  .sfa-hero-proof.sfa-hero-skills,
  .sfr3-hero-facts.sfr3-hero-skills {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .sfa-hero-skills span,
  .sfr3-hero-skills span {
    padding: 16px 22px;
  }

  .sfa-hero-skills span:first-child,
  .sfr3-hero-skills span:first-child {
    padding-left: 0;
  }

  .sfa-hero-skills span + span,
  .sfr3-hero-skills span + span {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}


/* =========================================================
   9. WISSEN / GLOSSAR
   ========================================================= */

body.page-id-282 .section-header h2 {
  max-width: 19ch;
  margin-left: auto;
  margin-right: auto;
}

body.page-id-282 .section-header .lead {
  max-width: 64ch;
  margin-left: auto !important;
  margin-right: auto !important;
}

.sf-glossar-grid.sfs-glossar-one {
  grid-template-columns: minmax(0, 380px) !important;
  justify-content: center !important;
}

.sf-glossar-grid.sfs-glossar-two {
  grid-template-columns: repeat(2, minmax(0, 380px)) !important;
  justify-content: center !important;
}

.sf-glossar-card {
  clip-path: var(--clip-path-cut);
}


/* =========================================================
   10. KONTAKT: DIREKTE WEGE
   ========================================================= */

body.page-id-250 .sfs-contact-direct {
  position: sticky;
  top: 100px;
}

body.page-id-250 .sfs-contact-direct__intro {
  margin: 8px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.65;
}

body.page-id-250 .sfs-contact-direct__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

body.page-id-250 .sfs-contact-direct__list li {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

body.page-id-250 .sfs-contact-direct__list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

body.page-id-250 .sfs-contact-direct__label {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-text, var(--ink));
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.page-id-250 .sfs-contact-direct__list a {
  color: var(--ink);
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}


/* =========================================================
   11. MOBILE
   ========================================================= */

@media (max-width: 759px) {
  body.page-id-46 .website-hero-header,
  body.page-id-136 .analytics-hero,
  body.page-id-129 .hero-lp {
    text-align: center !important;
  }

  body.page-id-46 .website-hero-header .lead,
  body.page-id-136 .analytics-hero .lead,
  body.page-id-129 .hero-lp .lead {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.page-id-46 .website-hero-header .act,
  body.page-id-136 .analytics-hero .act,
  body.page-id-129 .hero-lp .act {
    justify-content: center !important;
  }

  body.page-id-46 .sfs-service-testimonial-band,
  body.page-id-129 .sfs-service-testimonial-band,
  body.page-id-139 .sfs-service-testimonial-band {
    margin-top: 36px;
    margin-bottom: 36px;
  }

  body.page-id-46 .sfs-service-proof {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  body.page-id-139 .sfc-care-scope > .wrap {
    padding: 28px 22px;
  }

  .sfs-analytics-questions-grid {
    gap: 30px;
  }

  .sfs-analytics-visual {
    order: -1;
  }

  .sf-glossar-grid.sfs-glossar-two {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-id-250 .sfs-contact-direct {
    position: static;
  }
}