/* Reparaturführer.ch – Custom CSS (global)
   Brand-Gelb unten exakt eintragen. */

:root {
  --rf-gelb: #FFC400;
  --rf-text: #1a1a1a;
}

/* ============================================================
   STARTSEITE: Aktuell – Artikelvorschau (SP Page Builder)
   ============================================================ */

.sppb-addon-articles img {
  border-radius: 12px;
}

.sppb-addon-articles a {
  color: var(--rf-text) !important;
  text-decoration: none;
}

.sppb-addon-articles h2,
.sppb-addon-articles h3,
.sppb-addon-articles h4 {
  margin-top: 22px !important;
  margin-bottom: 8px;
  font-weight: 700;
}

.sppb-addon-articles .sppb-readmore,
.sppb-addon-articles a.sppb-readmore,
.sppb-addon-articles .sppb-article-readmore a,
.sppb-addon-articles .readmore a,
.sppb-addon-articles .readmore {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  font-weight: 700;
}

/* ============================================================
   STARTSEITE: Sektionsabstände + Mobile-Layout
   ============================================================ */

/* einheitlicher Abstand zwischen allen Sektionen */
.sppb-section {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

@media (max-width: 991px) {
  .sppb-section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
}

@media (max-width: 767px) {
  .sppb-section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* Per-Addon-Abstände (Margins UND Innen-Padding, im Builder gesetzt – z.B.
   margin-top 40px / padding-top 50px) erzeugen auf Mobile/Tablet grosse Lücken.
   Hier normalisiert. Erstes Addon je Spalte bleibt bündig. */
@media (max-width: 991px) {
  .sppb-column-addons > .sppb-addon-wrapper {
    margin-top: 16px !important;
  }
  .sppb-column-addons > .sppb-addon-wrapper:first-child {
    margin-top: 0 !important;
  }
  .sppb-addon-wrapper > div {
    padding-top: 0 !important;
  }
}

@media (max-width: 767px) {
  /* Abstand zwischen den gestapelten Spalten (Bild <-> Text) */
  .sppb-row {
    gap: 22px;
  }

  /* Bild zuoberst: Bild-rechts-Rows umkehren.
     Diesen Rows die Klasse rf-bild-rechts geben (Row -> Advanced -> Class). */
  .rf-bild-rechts.sppb-row,
  .rf-bild-rechts .sppb-row {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* ============================================================
   ARTIKEL-DETAILSEITE (Helix Ultimate)
   ============================================================ */

.article-details {
  max-width: 820px;
  margin: 40px auto;
  background: #fff;
  border-radius: 12px;
  padding: 36px 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
}

.article-details img {
  max-width: 100%;
  height: auto;
  border-radius: 12px !important;
}

.article-details .article-ratings-social-share {
  display: none !important;
}

.article-details .pagenavigation {
  display: none !important;
}

.article-details .rf-back {
  display: inline-block;
  margin-top: 28px;
  padding: 10px 20px;
  background: #1a1a1a;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s ease;
}
.article-details .rf-back:hover {
  background: #333;
}

@media (max-width: 600px) {
  .article-details {
    margin: 24px auto;
    padding: 24px 20px;
    border-radius: 10px;
  }
}