/*
 Theme Name:   Shakti Fire Child
 Theme URI:    https://shakti-fire.com
 Description:  Divi 5 Child Theme — ueberschreibt Divi-Defaults mit Shakti Fire Design
 Author:       Enrico Tralles
 Author URI:   https://shakti-fire.com
 Template:     Divi
 Version:      2.3.7
 Text Domain:  shakti-fire-child
*/

/* ================================================================
   SHAKTI FIRE CHILD THEME — style.css
   Version: 2.2.0 (Audit/Bereinigung)

   INHALTSVERZEICHNIS
   ================================================================

    0. CSS CUSTOM PROPERTIES (:root)             ~Zeile 33
    1. GLOBALE ELEMENT-OVERRIDES (Block 1)       ~Zeile 67
    2. DIVI BUTTONS — CONTENT (Block 2)          ~Zeile 147
    2b HEADER BUTTON (Block 2b)                  ~Zeile 207
    2c HEADER DROPDOWN-MENU (Block 2c)           ~Zeile 277
    3. DIVI SECTIONS (Block 3)                   ~Zeile 342
    4. HEADER + GRADIENT STRIPE (Block 4)        ~Zeile 393
    5. FOOTER (Block 5)                          ~Zeile 448
    6. DIVI BLOG MODULE (Block 6)                ~Zeile 499
    7. DIVI TESTIMONIAL MODULE (Block 7)         ~Zeile 662
    8. DIVI BLURB MODULE (Block 8)               ~Zeile 700
    9. SPEZIAL-KLASSEN (Block 9)                 ~Zeile 724
   10. VIDEO TESTIMONIALS                        ~Zeile 1030
   11. BLOG-POST-BAUSTEINE (Author, TOC, CTA)    ~Zeile 1209
   12. BLOG SINGLE — Overrides (.single-post)    ~Zeile 1387
   13. SF-PAGE-HERO + SF-SUBPAGE                 ~Zeile 1881
   14. RESPONSIVE — Hauptbloecke (768/480)       ~Zeile 2049
   15. BLOG SINGLE — Kommentare                  ~Zeile 2189
   16. RESPONSIVE v2 (Header, Featured, Padding) ~Zeile 2363
   17. STARTSEITE — Testimonial-Section          ~Zeile 2583
   18. BLOG — Pagination (Pill-Buttons)          ~Zeile 2759
   19. BLOG — Featured Card                      ~Zeile 2849
   20. SF-CATEGORY-FILTER (Shortcode)            ~Zeile 2945
   21. BLOG — Card Footer + Badge                ~Zeile 3013
   22. SUBPAGE-BAUSTEINE
       — SF-SECTION-QUOTE                        ~Zeile 3136
       — SF-ICON-GRID                            ~Zeile 3176
       — SF-EMOJI-LIST (mit ::before-Emojis)     ~Zeile 3243
       — SF-MODULE-CARD                          ~Zeile 3338
   23. DEPRECATED — siehe Sektion 24
   24. SHORTCODE-STYLES
       — SF-SOCIAL-PROOF                         ~Zeile 3516
       — SF-PRODUCT-PATH                         ~Zeile 3605
       — SF-BTN-ROW                              ~Zeile 3737
       — SF-BTN-OUTLINE-LIGHT                    ~Zeile 3782
   25. DEPRECATED — SF-GOLD-DIVIDER, GOLD-LINE   ~Zeile 3472

   HINWEISE
   ================================================================
   - Punkt-Escape-Selektoren (`.\.sf-X`): Schutz vor User-Fehleingabe
     mit fuehrendem Punkt. Bleiben drin, schaden nicht.
   - Responsive: Hybrid — komponenten-spezifische @media bleiben bei
     der Klasse; globale Mobile-Fix-Bloecke in Sektion 14 + 16.
   - Aenderungen: Section-Reihenfolge unveraendert, nur Header-Style
     vereinheitlicht + TOC ergaenzt. Properties + Spezifitaet identisch
     zu v2.1.52.
   - Backup: style.css.bak.v2.1.52
   ================================================================ */

/* ================================================================
   0. CSS CUSTOM PROPERTIES (:root) — Design Tokens
   ================================================================ */
:root {
  /* === FARB-PALETTE === */
  --sf-purple-deep: #2D1048;
  --sf-purple-dark: #4A1A6B;
  --sf-purple: #7B2D8E;
  --sf-purple-medium: #9B4DCA;
  --sf-purple-light: #C084FC;
  --sf-purple-pale: #F0E6FA;
  --sf-purple-wash: #F8F4FC;

  --sf-gold: #C9A96E;
  --sf-gold-light: #E2CFA0;
  --sf-gold-soft: rgba(201,169,110,0.15);
  --sf-gold-warm: #D4B87A;

  /* === PROGRAMM-FARBEN (Testimonials) === */
  --sf-color-amazing-grace: #C9A96E;
  --sf-color-retreats:      #7B2D8E;
  --sf-color-sacred-feminin:#C27088;
  --sf-color-workshops:     #4A90A4;

  /* === BRAND GRADIENT === */
  --sf-gradient: linear-gradient(90deg, #4A1A6B 0%, #7B2D8E 35%, #A83AAF 65%, #C24BAD 100%);
  --sf-gradient-btn: linear-gradient(135deg, #4A1A6B, #7B2D8E, #C24BAD);

  /* === NEUTRALS === */
  --sf-paper: #FDFBFF;
  --sf-ink: #1A0F24;
  --sf-ink-soft: #3A2E48;
  --sf-muted: #6B5F7A;
  --sf-rule: #E2D8EE;

  /* === FONTS === */
  --sf-serif: 'Fraunces', Georgia, serif;
  --sf-sans: 'Inter', -apple-system, sans-serif;
}

/* ================================================================
   1. GLOBALE ELEMENT-OVERRIDES (body, h1-h6, p, a)
   ================================================================ */

/* === BODY === */
body {
  font-family: var(--sf-sans) !important;
  background-color: var(--sf-purple-wash) !important;
  color: var(--sf-ink) !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
}

/* === HEADINGS === */
h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
.entry-title {
  font-family: var(--sf-serif) !important;
  color: var(--sf-ink) !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  text-transform: none !important;
}

h1,
.et_pb_text h1,
.entry-title {
  font-size: clamp(40px, 7vw, 80px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
}

h2,
.et_pb_text h2 {
  font-size: clamp(28px, 4.5vw, 46px) !important;
  line-height: 1.12 !important;
}

h3,
.et_pb_text h3 {
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

h4,
.et_pb_text h4 {
  font-size: 18px !important;
  font-weight: 500 !important;
}

/* Italic in Headings = Purple */
h1 em, h1 i,
h2 em, h2 i,
h3 em, h3 i,
.et_pb_text h1 em, .et_pb_text h1 i,
.et_pb_text h2 em, .et_pb_text h2 i {
  font-style: italic !important;
  color: var(--sf-purple) !important;
}

/* === PARAGRAPHS (sf-Klassen ausgenommen) === */
p:not([class*="sf-"]),
.et_pb_text p:not([class*="sf-"]) {
  font-family: var(--sf-sans) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--sf-ink-soft) !important;
}

/* === LINKS === */
a {
  color: var(--sf-purple);
  transition: color 0.25s;
}
a:hover {
  color: var(--sf-purple-medium);
}

/* ================================================================
   2. DIVI BUTTONS — Content-Buttons (Purple-Gradient-Pill)
   Nicht: Header/Nav-Buttons (siehe Section 2b)
   ================================================================ */

.et-l--body .et_pb_section .et_pb_button,
.et_pb_section .et_pb_button,
#content .et_pb_button,
.et_pb_module:not(.et_pb_menu) .et_pb_button {
  font-family: var(--sf-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #fff !important;
  background: var(--sf-gradient-btn) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 16px 36px !important;
  text-decoration: none !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
  box-shadow: 0 4px 20px rgba(123,45,142,0.3) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body #page-container .et-l--body .et_pb_section .et_pb_button:hover,
html body #page-container .et_pb_section .et_pb_button:hover,
html body #page-container #content .et_pb_button:hover,
html body #page-container .et_pb_module:not(.et_pb_menu) .et_pb_button:hover,
.et-l--body .et_pb_section .et_pb_button:hover,
.et_pb_section .et_pb_button:hover,
#content .et_pb_button:hover,
.et_pb_module:not(.et_pb_menu) .et_pb_button:hover {
  font-family: var(--sf-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #fff !important;
  background: var(--sf-gradient-btn) !important;
  background-image: var(--sf-gradient-btn) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 16px 36px !important;
  padding-top: 16px !important;
  padding-right: 36px !important;
  padding-bottom: 16px !important;
  padding-left: 36px !important;
  text-decoration: none !important;
  transform: none !important;
  opacity: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 6px 24px rgba(123,45,142,0.45) !important;
}

/* Divi Button Icon-Pfeile ausblenden */
.et_pb_section .et_pb_button::after,
.et_pb_section .et_pb_button::before,
.et_pb_section .et_pb_button:hover::after,
.et_pb_section .et_pb_button:hover::before {
  display: none !important;
}

/* ================================================================
   2b. HEADER BUTTON — Gold-Outline (Quiz-CTA in Navigation)
   ================================================================ */

body .et-l--header .et_pb_section .et_pb_button,
body .et-l--header .et_pb_button_module_wrapper .et_pb_button,
body .et-l--header .et_pb_button,
body #main-header .et_pb_section .et_pb_button,
body #main-header .et_pb_button_module_wrapper .et_pb_button,
body #main-header .et_pb_button,
body header.site-header .et_pb_button,
body .divi-header .et_pb_button,
body #et-top-navigation .et_pb_button,
body .et_pb_menu .et_pb_button {
  background: transparent !important;
  background-image: none !important;
  color: var(--sf-gold) !important;
  border: 1.5px solid var(--sf-gold) !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transform: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body #page-container .et-l--header .et_pb_section .et_pb_button:hover,
html body #page-container .et-l--header .et_pb_button_module_wrapper .et_pb_button:hover,
html body #page-container .et-l--header .et_pb_button:hover,
html body #page-container #main-header .et_pb_section .et_pb_button:hover,
html body #page-container #main-header .et_pb_button_module_wrapper .et_pb_button:hover,
html body #page-container #main-header .et_pb_button:hover,
body .et-l--header .et_pb_section .et_pb_button:hover,
body .et-l--header .et_pb_button_module_wrapper .et_pb_button:hover,
body .et-l--header .et_pb_button:hover,
body #main-header .et_pb_section .et_pb_button:hover,
body #main-header .et_pb_button_module_wrapper .et_pb_button:hover,
body #main-header .et_pb_button:hover,
body header.site-header .et_pb_button:hover,
body .divi-header .et_pb_button:hover,
body #et-top-navigation .et_pb_button:hover,
body .et_pb_menu .et_pb_button:hover {
  background: transparent !important;
  background-image: none !important;
  color: var(--sf-gold) !important;
  border: 1.5px solid var(--sf-gold) !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  padding-top: 8px !important;
  padding-right: 20px !important;
  padding-bottom: 8px !important;
  padding-left: 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transform: none !important;
  opacity: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 4px 14px rgba(201,169,110,0.25) !important;
}

body .et-l--header .et_pb_button::after,
body .et-l--header .et_pb_button::before,
body #main-header .et_pb_button::after,
body #main-header .et_pb_button::before {
  display: none !important;
}

/* ================================================================
   2c. HEADER DROPDOWN-MENU
   Verhindert Abschneiden + stylt Dropdown (white BG + Hover)
   ================================================================ */

/* Header sichtbar ueber allem halten */
#main-header,
.et-l--header,
header.et-l {
  z-index: 9999 !important;
  position: relative !important;
}

/* Dropdown-Container darf ueberstehen */
#main-header .et_pb_menu__menu,
.et-l--header .et_pb_menu__menu,
#main-header nav > ul,
.et_pb_menu .et_pb_menu__menu {
  overflow: visible !important;
}

/* Dropdown-Liste */
#main-header .et_pb_menu__menu li ul,
.et-l--header .et_pb_menu__menu li ul,
#main-header nav > ul > li > ul,
.et_pb_menu .sub-menu,
.et_pb_menu .et_pb_menu__menu li .sub-menu {
  z-index: 10000 !important;
  position: absolute !important;
  display: none;
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(45,16,72,0.12) !important;
  border: 1px solid var(--sf-rule) !important;
  padding: 8px 0 !important;
  min-width: 220px !important;
}

/* Dropdown beim Hover anzeigen */
#main-header .et_pb_menu__menu li:hover > ul,
.et-l--header .et_pb_menu__menu li:hover > ul,
#main-header nav > ul > li:hover > ul,
.et_pb_menu .et_pb_menu__menu li:hover > .sub-menu {
  display: block !important;
}

/* Dropdown-Links */
#main-header .et_pb_menu__menu li ul li a,
.et-l--header .et_pb_menu__menu li ul li a,
.et_pb_menu .sub-menu li a {
  padding: 10px 20px !important;
  font-size: 14px !important;
  color: var(--sf-ink-soft) !important;
  display: block !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
}

#main-header .et_pb_menu__menu li ul li a:hover,
.et-l--header .et_pb_menu__menu li ul li a:hover,
.et_pb_menu .sub-menu li a:hover {
  color: var(--sf-purple) !important;
  background: var(--sf-purple-wash) !important;
}

/* ================================================================
   3. DIVI SECTIONS — Padding (Content), Header/Footer ausgenommen
   ================================================================ */

.et_pb_section,
section.divi-section {
  padding: 100px 0 !important;
}

.et_pb_row,
.divi-row {
  max-width: 1100px !important;
  padding: 0 48px !important;
}

/* Header- und Footer-Sections: Padding zuruecksetzen (Theme-Builder-Layouts) */
body .et-l--header .et_pb_section,
body .et-l--footer .et_pb_section,
body #main-header .et_pb_section,
body #main-footer .et_pb_section,
body header.site-header .et_pb_section,
body footer.site-footer .et_pb_section {
  padding: 0 !important;
}

body .et-l--header .et_pb_row,
body .et-l--footer .et_pb_row,
body #main-header .et_pb_row,
body #main-footer .et_pb_row {
  max-width: none !important;
  padding: 20px 48px !important;
}

@media (max-width: 900px) {
  .et_pb_section,
  section.divi-section {
    padding: 70px 0 !important;
  }
  .et_pb_row,
  .divi-row {
    padding: 0 24px !important;
  }
  body .et-l--header .et_pb_row,
  body .et-l--footer .et_pb_row,
  body #main-header .et_pb_row,
  body #main-footer .et_pb_row {
    padding: 16px 24px !important;
  }
}

/* ================================================================
   4. HEADER + NAVIGATION + GRADIENT STRIPE
   Falls Gradient-Stripe nicht sichtbar: Selektor im Frontend
   pruefen + ggf. hier ergaenzen.
   ================================================================ */

#main-header,
.et-l--header,
header.site-header,
.divi-header {
  position: relative !important;
  background: rgba(253,251,255,0.9) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: none !important;
}

#main-header::after,
.et-l--header::after,
header.site-header::after,
.divi-header::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--sf-gradient) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Klassischer Divi-Header (#top-menu) UND Divi 5 Theme Builder Menu-Modul (.et_pb_menu__link) */
#top-menu a,
.et-menu a,
.divi-nav a,
.et_pb_menu__menu nav > ul > li > a,
.et_pb_menu .et_pb_menu__link,
.et_pb_fullwidth_menu .et_pb_menu__link {
  font-family: var(--sf-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--sf-ink) !important;
  letter-spacing: 0.02em !important;
  transition: color 0.2s ease !important;
}

/* Menue zentrieren — gesamte Hierarchie auf 100% Breite + Center
   ueberschreibt et_pb_menu--style-left_aligned (Divi-Default) */
html body .et_pb_menu .et_pb_menu_inner_container,
html body .et_pb_menu .et_pb_menu__wrap,
html body .et_pb_menu .et_pb_menu__menu,
html body .et_pb_menu .et_pb_menu__menu > nav,
html body .et_pb_fullwidth_menu .et_pb_menu_inner_container,
html body .et_pb_fullwidth_menu .et_pb_menu__wrap,
html body .et_pb_fullwidth_menu .et_pb_menu__menu,
html body .et_pb_fullwidth_menu .et_pb_menu__menu > nav {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

html body .et_pb_menu .et_pb_menu__menu > nav > ul,
html body .et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Divi-Klasse "left aligned" hart ueberschreiben */
html body .et_pb_menu.et_pb_menu--style-left_aligned .et_pb_menu__menu,
html body .et_pb_menu.et_pb_menu--style-left_aligned .et_pb_menu__menu > nav,
html body .et_pb_menu.et_pb_menu--style-left_aligned .et_pb_menu__menu > nav > ul {
  text-align: center !important;
  justify-content: center !important;
}

/* Negative Margins von .et-menu killen (Divi-Default -11px li/r) */
html body .et_pb_menu .et-menu,
html body .et_pb_fullwidth_menu .et-menu {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#top-menu li a,
.et-menu li a,
.et_pb_menu__menu nav > ul > li > a,
.et_pb_menu .et_pb_menu__link,
.et_pb_fullwidth_menu .et_pb_menu__link {
  position: relative !important;
}

#top-menu a:hover,
.et-menu a:hover,
.divi-nav a:hover,
.et_pb_menu__menu nav > ul > li > a:hover,
.et_pb_menu .et_pb_menu__link:hover,
.et_pb_fullwidth_menu .et_pb_menu__link:hover {
  color: var(--sf-purple) !important;
}

/* Aktive Seite: Purple + Gold-Unterstrich */
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a,
.et-menu li.current-menu-item > a,
.et-menu li.current_page_item > a,
.et_pb_menu__menu li.current-menu-item > a,
.et_pb_menu__menu li.current_page_item > a {
  color: var(--sf-purple) !important;
  font-weight: 500 !important;
}

#top-menu li.current-menu-item > a::after,
#top-menu li.current_page_item > a::after,
.et-menu li.current-menu-item > a::after,
.et-menu li.current_page_item > a::after,
.et_pb_menu__menu li.current-menu-item > a::after,
.et_pb_menu__menu li.current_page_item > a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: var(--sf-gold) !important;
  border-radius: 1px !important;
}

/* Hover-Unterstrich auf nicht-aktiven Links: Gold-Linie aus der Mitte */
#top-menu li:not(.current-menu-item):not(.current_page_item) > a::after,
.et-menu li:not(.current-menu-item):not(.current_page_item) > a::after,
.et_pb_menu__menu li:not(.current-menu-item):not(.current_page_item) > a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 50% !important;
  right: 50% !important;
  height: 2px !important;
  background: var(--sf-gold) !important;
  border-radius: 1px !important;
  transition: left 0.25s ease, right 0.25s ease !important;
}

#top-menu li:not(.current-menu-item):not(.current_page_item) > a:hover::after,
.et-menu li:not(.current-menu-item):not(.current_page_item) > a:hover::after,
.et_pb_menu__menu li:not(.current-menu-item):not(.current_page_item) > a:hover::after {
  left: 0 !important;
  right: 0 !important;
}

.logo_container a,
.divi-logo a {
  font-family: var(--sf-serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--sf-ink) !important;
}

/* ================================================================
   5. FOOTER — Purple-Deep BG, Gold-Hover Links
   ================================================================ */

#main-footer,
.et-l--footer,
footer.site-footer,
.divi-footer {
  background: var(--sf-purple-deep) !important;
  color: rgba(255,255,255,0.6) !important;
  padding: 64px 48px 32px !important;
}

#main-footer h4,
.et-l--footer h4,
.divi-footer h4,
.footer-widget h4 {
  font-family: var(--sf-serif) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.9) !important;
}

#main-footer p,
.et-l--footer p,
.divi-footer p {
  font-size: 15px !important;
  color: rgba(255,255,255,0.5) !important;
}

#main-footer a,
.et-l--footer a,
.divi-footer a {
  color: rgba(255,255,255,0.6) !important;
  text-decoration: none !important;
}

#main-footer a:hover,
.et-l--footer a:hover,
.divi-footer a:hover {
  color: var(--sf-gold) !important;
}

@media (max-width: 900px) {
  #main-footer,
  .et-l--footer,
  .divi-footer {
    padding: 48px 24px 24px !important;
  }
}

/* ================================================================
   6. DIVI BLOG MODULE — Blog-Cards (Startseite)
   ================================================================ */

/* Blog Grid: Flex fuer gleiche Card-Hoehe */
.et_pb_blog .et_pb_ajax_pagination_container,
.et_pb_blog .et_pb_posts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}

/* Blog Card: Basis */
.et_pb_blog .et_pb_post {
  background: #fff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(45, 16, 72, 0.06) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  width: calc(33.333% - 16px) !important;
}

html body .et_pb_blog .et_pb_post:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 28px rgba(45, 16, 72, 0.12) !important;
}

/* Featured Image: 16:10, Zoom on Hover */
.et_pb_blog .et_pb_post .et_pb_image_container {
  overflow: hidden !important;
  border-radius: 16px 16px 0 0 !important;
  aspect-ratio: 16 / 10 !important;
}

.et_pb_blog .et_pb_post .entry-featured-image-url {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.et_pb_blog .et_pb_post .entry-featured-image-url img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  transition: transform 0.3s ease !important;
}

html body .et_pb_blog .et_pb_post:hover .entry-featured-image-url img {
  transform: scale(1.03) !important;
}

/* Content-Padding */
.et_pb_blog .et_pb_post .entry-title,
.et_pb_blog .et_pb_post .post-meta,
.et_pb_blog .et_pb_post .post-content {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Titel */
.et_pb_blog .et_pb_post .entry-title,
.et_pb_blog .et_pb_post .entry-title a {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--sf-purple-deep) !important;
  padding-top: 20px !important;
  margin-bottom: 8px !important;
}

html body .et_pb_blog .et_pb_post .entry-title a:hover {
  color: var(--sf-purple) !important;
}

/* Meta-Zeile: Gold-Akzente */
.et_pb_blog .et_pb_post .post-meta {
  font-family: var(--sf-sans) !important;
  font-size: 12px !important;
  color: var(--sf-muted) !important;
  margin-bottom: 12px !important;
  padding-top: 0 !important;
  line-height: 1.4 !important;
}

.et_pb_blog .et_pb_post .post-meta a {
  color: var(--sf-gold) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

html body .et_pb_blog .et_pb_post .post-meta a:hover {
  color: var(--sf-gold-warm) !important;
}

/* Excerpt: 3 Zeilen Clamp */
.et_pb_blog .et_pb_post .post-content,
.et_pb_blog .et_pb_post .post-content p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--sf-ink-soft) !important;
  margin-bottom: 0 !important;
  padding-bottom: 24px !important;
}

.et_pb_blog .et_pb_post .post-content p {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

.et_pb_blog .et_pb_post .post-content {
  flex-grow: 1 !important;
}

/* Weiterlesen-Link */
.et_pb_blog .et_pb_post a.more-link {
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sf-gold) !important;
  text-decoration: none !important;
  padding: 0 24px 20px !important;
  letter-spacing: 0.5px !important;
}

html body .et_pb_blog .et_pb_post a.more-link:hover {
  color: var(--sf-gold-warm) !important;
}

/* Pagination */
.et_pb_blog .pagination,
.et_pb_blog .wp-pagenavi {
  width: 100% !important;
  text-align: center !important;
  margin-top: 16px !important;
  padding-top: 24px !important;
}

.et_pb_blog .pagination a,
.et_pb_blog .pagination span {
  font-family: var(--sf-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sf-gold) !important;
  text-decoration: none !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  transition: color 0.2s ease !important;
}

html body .et_pb_blog .pagination a:hover {
  color: var(--sf-purple) !important;
}

/* ================================================================
   7. DIVI TESTIMONIAL MODULE — Paper-BG + Hover-Highlight
   ================================================================ */

.et_pb_testimonial {
  background: var(--sf-paper) !important;
  border-radius: 8px !important;
  border: 1px solid var(--sf-rule) !important;
  border-top: 3px solid transparent !important;
  padding: 32px 28px !important;
  transition: all 0.3s !important;
}

.et_pb_testimonial:hover {
  border-top-color: var(--sf-purple) !important;
  box-shadow: 0 6px 20px rgba(45,16,72,0.08) !important;
}

.et_pb_testimonial_description {
  font-family: var(--sf-serif) !important;
  font-style: italic !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: var(--sf-ink) !important;
}

.et_pb_testimonial_author {
  font-family: var(--sf-sans) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--sf-ink) !important;
}

.et_pb_testimonial_portrait {
  border: none !important;
  background: linear-gradient(135deg, var(--sf-purple-light), var(--sf-purple)) !important;
}

/* ================================================================
   8. DIVI BLURB MODULE — Wash-BG + Hover-Lift
   ================================================================ */

.et_pb_blurb {
  background: var(--sf-purple-wash);
  border-radius: 8px;
  padding: 24px;
  transition: all 0.3s;
}

.et_pb_blurb:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(45,16,72,0.1);
}

.et_pb_blurb h4,
.et_pb_blurb .et_pb_module_header {
  font-family: var(--sf-serif) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--sf-ink) !important;
}

/* ================================================================
   9. SPEZIAL-KLASSEN — sf-mirror-block, sf-kicker, sf-hint,
      sf-mirror-intro, sf-anchor, sf-stars, sf-tag, sf-btn-gold,
      sf-gradient-top, sf-bg-dark, sf-bg-hero, sf-photo-frame,
      sf-btn-nav-quiz
   Verwendung: CSS-Klasse auf das Divi-Modul setzen
   ================================================================ */

/* === Mirror Block (Pain-Point-Karte mit Gold-Border links) ===
   Innenabstand (padding) im Theme. Aussenabstand (margin) setzt Du
   in Divi -> Designeinstellungen -> Abstand. */
.sf-mirror-block, .\.sf-mirror-block,
.et_pb_module .sf-mirror-block, .et_pb_module .\.sf-mirror-block,
body .sf-mirror-block, body .\.sf-mirror-block {
  padding: 32px 36px !important;
  background: var(--sf-purple-wash) !important;
  border-radius: 8px !important;
  border-left: 3px solid var(--sf-gold) !important;
}

/* === Kicker / Overline ===
   Hinweis 1: .\. -Selektoren matchen Klassen, die versehentlich mit
              fuehrendem Punkt eingetragen wurden.
   Hinweis 2: Die Klasse landet meist auf einem Divi-Container-DIV.
              Daher zusaetzlich auf innere p/span/div stylen,
              damit die globale p-Regel sie nicht zurueckwirft.
*/
.sf-kicker, .\.sf-kicker,
.sf-kicker p, .sf-kicker span, .sf-kicker div,
.\.sf-kicker p, .\.sf-kicker span, .\.sf-kicker div,
.et_pb_text .sf-kicker, .et_pb_text .\.sf-kicker,
.et_pb_module .sf-kicker, .et_pb_module .\.sf-kicker,
body .sf-kicker, body .\.sf-kicker {
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--sf-gold) !important;
  font-weight: 600 !important;
  font-family: var(--sf-sans) !important;
  line-height: 1.5 !important;
}

.sf-kicker-hero, .\.sf-kicker-hero,
.sf-kicker-hero p, .sf-kicker-hero span, .sf-kicker-hero div,
.\.sf-kicker-hero p, .\.sf-kicker-hero span, .\.sf-kicker-hero div,
.et_pb_text .sf-kicker-hero, .et_pb_text .\.sf-kicker-hero,
.et_pb_module .sf-kicker-hero, .et_pb_module .\.sf-kicker-hero,
body .sf-kicker-hero, body .\.sf-kicker-hero {
  font-size: 12px !important;
  letter-spacing: 3.5px !important;
  text-transform: uppercase !important;
  color: var(--sf-gold) !important;
  font-weight: 600 !important;
  font-family: var(--sf-sans) !important;
  line-height: 1.5 !important;
}

/* === Gold Button (fuer dunkle Sections) === */
.sf-btn-gold,
.sf-btn-gold.et_pb_button,
.et_pb_section .sf-btn-gold.et_pb_button,
body .sf-btn-gold,
a.sf-btn-gold {
  background: var(--sf-gold) !important;
  color: var(--sf-purple-deep) !important;
  box-shadow: 0 4px 20px rgba(201,169,110,0.3) !important;
  border: none !important;
}

html body #page-container .et_pb_section .sf-btn-gold.et_pb_button:hover,
html body #page-container .et_pb_section .et_pb_button.sf-btn-gold:hover,
.sf-btn-gold:hover,
.sf-btn-gold.et_pb_button:hover,
.et_pb_section .sf-btn-gold.et_pb_button:hover,
body .sf-btn-gold:hover,
a.sf-btn-gold:hover {
  background: var(--sf-gold) !important;
  background-image: none !important;
  color: var(--sf-purple-deep) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 16px 36px !important;
  padding-top: 16px !important;
  padding-right: 36px !important;
  padding-bottom: 16px !important;
  padding-left: 36px !important;
  transform: none !important;
  opacity: 1 !important;
  box-shadow: 0 6px 24px rgba(201,169,110,0.45) !important;
}

/* === Gradient-Trennlinie oben === */
.sf-gradient-top, .\.sf-gradient-top {
  position: relative !important;
}
.sf-gradient-top::before, .\.sf-gradient-top::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: var(--sf-gradient) !important;
  z-index: 10 !important;
}

/* === Dark Section Background === */
.sf-bg-dark, .\.sf-bg-dark {
  background: linear-gradient(160deg, var(--sf-purple-deep) 0%, var(--sf-purple-dark) 40%, var(--sf-purple) 100%) !important;
}

.sf-bg-dark h2, .\.sf-bg-dark h2,
.sf-bg-dark h3, .\.sf-bg-dark h3 {
  color: #fff !important;
}

.sf-bg-dark p, .\.sf-bg-dark p {
  color: rgba(255,255,255,0.65) !important;
}

.sf-bg-dark em, .\.sf-bg-dark em,
.sf-bg-dark i, .\.sf-bg-dark i {
  color: var(--sf-gold-light) !important;
}

/* === Hero Background === */
.sf-bg-hero, .\.sf-bg-hero,
body .sf-bg-hero, body .\.sf-bg-hero {
  background:
    radial-gradient(ellipse 60% 45% at 50% 30%, rgba(123,45,142,0.1), transparent 60%),
    radial-gradient(ellipse 40% 35% at 70% 60%, rgba(201,169,110,0.08), transparent 50%),
    var(--sf-purple-wash) !important;
}

/* === Hint Text === */
.sf-hint, .\.sf-hint,
.sf-hint p, .sf-hint span, .sf-hint div,
.\.sf-hint p, .\.sf-hint span, .\.sf-hint div,
.et_pb_text .sf-hint, .et_pb_text .\.sf-hint,
.et_pb_module .sf-hint, .et_pb_module .\.sf-hint,
body .sf-hint, body .\.sf-hint {
  font-size: 13px !important;
  color: var(--sf-gold) !important;
  font-family: var(--sf-sans) !important;
}

/* === Mirror Intro === */
.sf-mirror-intro, .\.sf-mirror-intro,
.sf-mirror-intro p, .sf-mirror-intro span, .sf-mirror-intro div,
.\.sf-mirror-intro p, .\.sf-mirror-intro span, .\.sf-mirror-intro div,
.et_pb_text .sf-mirror-intro, .et_pb_text .\.sf-mirror-intro,
.et_pb_module .sf-mirror-intro, .et_pb_module .\.sf-mirror-intro,
body .sf-mirror-intro, body .\.sf-mirror-intro {
  font-family: var(--sf-serif) !important;
  font-style: italic !important;
  font-size: 20px !important;
  color: var(--sf-gold) !important;
  text-align: center !important;
  line-height: 1.5 !important;
}

/* === Anchor Text === */
.sf-anchor, .\.sf-anchor,
.sf-anchor p, .sf-anchor span, .sf-anchor div,
.\.sf-anchor p, .\.sf-anchor span, .\.sf-anchor div,
.et_pb_text .sf-anchor, .et_pb_text .\.sf-anchor,
.et_pb_module .sf-anchor, .et_pb_module .\.sf-anchor,
body .sf-anchor, body .\.sf-anchor {
  font-family: var(--sf-serif) !important;
  font-style: italic !important;
  font-size: 17px !important;
  color: var(--sf-muted) !important;
}

/* === Stars === */
.sf-stars, .\.sf-stars,
.sf-stars p, .sf-stars span, .sf-stars div,
.\.sf-stars p, .\.sf-stars span, .\.sf-stars div,
.et_pb_text .sf-stars, .et_pb_text .\.sf-stars,
.et_pb_module .sf-stars, .et_pb_module .\.sf-stars,
body .sf-stars, body .\.sf-stars {
  color: var(--sf-gold) !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
}

/* === Foto mit Gold-Rahmen-Offset === */
.sf-photo-frame, .\.sf-photo-frame {
  position: relative !important;
  border-radius: 8px !important;
  overflow: visible !important;
}
.sf-photo-frame::after, .\.sf-photo-frame::after {
  content: "" !important;
  position: absolute !important;
  bottom: -12px !important; right: -12px !important;
  width: 90% !important; height: 90% !important;
  border: 1px solid var(--sf-gold) !important;
  border-radius: 8px !important;
  z-index: -1 !important;
}

/* === Tag (Blog-Kategorie-Pill) === */
.sf-tag, .\.sf-tag,
.et_pb_text .sf-tag, .et_pb_text .\.sf-tag,
.et_pb_module .sf-tag, .et_pb_module .\.sf-tag,
body .sf-tag, body .\.sf-tag,
span.sf-tag, span.\.sf-tag {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
  background: var(--sf-gold-soft) !important;
  color: var(--sf-gold) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(201,169,110,0.25) !important;
}

/* === Video Testimonial Card ===
   HTML-Struktur fuer ein Text-Modul:
     <a href="VIDEO_URL" class="sf-video-card">
       <div class="sf-video-thumb" style="background-image:url(THUMB.jpg)">
         <span class="sf-video-play-btn"></span>
       </div>
       <div class="sf-video-info">
         <div class="sf-video-name">Andrea</div>
         <div class="sf-video-teaser">"Kurzes Zitat..."</div>
       </div>
     </a>
*/
.sf-video-card, .\.sf-video-card {
  display: block !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: var(--sf-paper) !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
  cursor: pointer !important;
}

.sf-video-card:hover, .\.sf-video-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(45,16,72,0.1) !important;
}

/* Thumb-Bereich (16:10 Format, Purple-Gradient als Fallback wenn kein Bild) */
.sf-video-thumb, .\.sf-video-thumb {
  position: relative !important;
  aspect-ratio: 16/10 !important;
  background: linear-gradient(135deg, var(--sf-purple-dark), var(--sf-purple-deep)) !important;
  background-size: cover !important;
  background-position: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sf-video-thumb::before, .\.sf-video-thumb::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(26,15,36,0.2) !important;
}

/* Play-Button-Kreis innerhalb des Thumbs */
.sf-video-play-btn, .\.sf-video-play-btn {
  position: relative !important;
  z-index: 1 !important;
  width: 52px !important;
  height: 52px !important;
  background: rgba(255,255,255,0.95) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}

.sf-video-play-btn::after, .\.sf-video-play-btn::after {
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 8px 0 8px 13px !important;
  border-color: transparent transparent transparent var(--sf-purple) !important;
  margin-left: 3px !important;
}

/* Info-Bereich unter dem Thumb */
.sf-video-info, .\.sf-video-info {
  padding: 16px 20px !important;
}

.sf-video-name, .\.sf-video-name {
  font-family: var(--sf-serif) !important;
  font-size: 17px !important;
  color: var(--sf-ink) !important;
  font-weight: 400 !important;
}

.sf-video-teaser, .\.sf-video-teaser {
  font-family: var(--sf-sans) !important;
  font-size: 13px !important;
  color: var(--sf-muted) !important;
  font-style: italic !important;
  margin-top: 4px !important;
}

/* ================================================================
   VIDEO TESTIMONIALS — Karte mit eingebettetem Video
   Verwendung: Row-Klasse "sf-video-testimonial"
   Inhalt: Video-Modul (oben) + Text-Modul (unten, Name + Zitat)
   Die aeltere .sf-video-card (Plain-HTML) bleibt zur Abwaerts-
   kompatibilitaet bestehen — sf-video-testimonial ist empfohlen.
   ================================================================ */

/* Container-Row */
.sf-video-testimonial,
body .sf-video-testimonial,
.et_pb_section .sf-video-testimonial {
  background: var(--sf-purple-wash) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 16px rgba(74,26,107,0.08) !important;
  padding: 0 !important;
}

/* Video-Modul: kein Extra-Abstand, keine runden Ecken unten */
.sf-video-testimonial .et_pb_video,
.sf-video-testimonial .et_pb_video_wrap {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 0 !important;
}

/* Spalte innerhalb: kein Padding */
.sf-video-testimonial .et_pb_column {
  padding: 0 !important;
}

/* Text-Modul unterhalb des Videos */
.sf-video-testimonial .et_pb_text {
  padding: 20px 24px 24px !important;
}

/* Name der Person */
.sf-video-testimonial .sf-video-name,
.sf-video-testimonial .et_pb_text .sf-video-name {
  font-family: var(--sf-serif) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--sf-purple-deep) !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}

/* Zitat / Teaser */
.sf-video-testimonial .sf-video-teaser,
.sf-video-testimonial .et_pb_text .sf-video-teaser {
  font-family: var(--sf-serif) !important;
  font-style: italic !important;
  font-size: 15px !important;
  color: var(--sf-ink-soft) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Hover-Effekt auf der gesamten Karte */
.sf-video-testimonial:hover {
  box-shadow: 0 4px 24px rgba(74,26,107,0.14) !important;
  transform: translateY(-2px);
  transition: box-shadow 0.3s, transform 0.3s;
}

@media (max-width: 768px) {
  .sf-video-testimonial .et_pb_text {
    padding: 16px 20px 20px !important;
  }
  .sf-video-testimonial .sf-video-name {
    font-size: 18px !important;
  }
  .sf-video-testimonial .sf-video-teaser {
    font-size: 14px !important;
  }
}

/* === Testimonial Card ===
   Alias: .testimonial (falls bereits gesetzt im Builder)
   Innere Struktur erwartet:
     <div class="sf-stars">★ ★ ★ ★ ★</div>
     <p>"Quote text..."</p>
     <div class="sf-testi-divider"></div>
     <div class="sf-testi-author">
       <span class="sf-testi-avatar">M</span>
       <span class="sf-testi-name">Michaela</span>
     </div>
   Tipp: In Divi-Row die Option "Saeulen-Hoehe ausgleichen" aktivieren
*/
.sf-testi-card, .\.sf-testi-card,
.testimonial, .\.testimonial,
.et_pb_module.sf-testi-card,
.et_pb_module.testimonial,
.et_pb_text.sf-testi-card,
.et_pb_text.testimonial {
  background: var(--sf-paper) !important;
  border-radius: 8px !important;
  border: 1px solid var(--sf-rule) !important;
  border-top: 3px solid transparent !important;
  padding: 32px 28px !important;
  transition: all 0.3s !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.sf-testi-card:hover, .\.sf-testi-card:hover,
.testimonial:hover, .\.testimonial:hover {
  border-top-color: var(--sf-purple) !important;
  box-shadow: 0 6px 20px rgba(45,16,72,0.08) !important;
}

/* Inneres Wrapper-Div (et_pb_text_inner) auch flex machen */
.sf-testi-card .et_pb_text_inner,
.\.sf-testi-card .et_pb_text_inner,
.testimonial .et_pb_text_inner,
.\.testimonial .et_pb_text_inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Quote-Text: nimmt verfuegbaren Platz, schiebt Author nach unten */
.sf-testi-card blockquote, .\.sf-testi-card blockquote,
.testimonial blockquote, .\.testimonial blockquote,
.sf-testi-card p, .\.sf-testi-card p,
.testimonial p, .\.testimonial p {
  font-family: var(--sf-serif) !important;
  font-style: italic !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: var(--sf-ink) !important;
  margin: 12px 0 0 0 !important;
  flex: 1 1 auto !important;
}

/* Trennlinie zwischen Quote und Author */
.sf-testi-divider, .\.sf-testi-divider {
  height: 1px !important;
  background: var(--sf-rule) !important;
  margin: 20px 0 16px 0 !important;
  border: none !important;
}

/* Author-Row mit Avatar + Name */
.sf-testi-author, .\.sf-testi-author {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: auto !important;
}

/* Avatar — runder Lila-Kreis mit Buchstaben */
.sf-testi-avatar, .\.sf-testi-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--sf-purple-light), var(--sf-purple)) !important;
  font-family: var(--sf-serif) !important;
  font-size: 16px !important;
  color: #fff !important;
  font-weight: 500 !important;
  font-style: normal !important;
  flex-shrink: 0 !important;
}

/* Name */
.sf-testi-name, .\.sf-testi-name {
  font-family: var(--sf-sans) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--sf-ink) !important;
  font-style: normal !important;
}

/* ================================================================
   BLOG POST — Autoren-Box
   Verwendung: Text-Modul mit HTML-Struktur (siehe README/Plan)
   ================================================================ */

.sf-author-box,
body .sf-author-box,
.et_pb_text .sf-author-box {
  display: flex !important;
  gap: 24px !important;
  align-items: flex-start !important;
  padding: 32px !important;
  background: var(--sf-purple-wash) !important;
  border-radius: 12px !important;
  border: 1px solid var(--sf-rule) !important;
}

.sf-author-avatar,
.sf-author-box .sf-author-avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: var(--sf-gradient-btn) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-family: var(--sf-serif) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  flex-shrink: 0 !important;
}

.sf-author-content h4 {
  font-family: var(--sf-serif) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--sf-ink) !important;
  margin-bottom: 8px !important;
}

.sf-author-content p {
  font-size: 14px !important;
  color: var(--sf-ink-soft) !important;
  line-height: 1.6 !important;
}

@media (max-width: 600px) {
  .sf-author-box {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* ================================================================
   BLOG POST — Blockquote Override (Gold-Border)
   Greift auf Divi Post Content Blockquotes
   ================================================================ */

.et_pb_post_content blockquote,
body .et_pb_post_content blockquote {
  border-left: 3px solid var(--sf-gold) !important;
  padding: 20px 28px !important;
  margin: 32px 0 !important;
  background: var(--sf-gold-soft) !important;
  border-radius: 0 8px 8px 0 !important;
}

.et_pb_post_content blockquote p {
  font-family: var(--sf-serif) !important;
  font-style: italic !important;
  font-size: 18px !important;
  color: var(--sf-ink) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ================================================================
   BLOG POST — Inhaltsverzeichnis (manuell oder Rank Math)
   ================================================================ */

.sf-toc,
body .sf-toc,
.et_pb_text .sf-toc {
  background: var(--sf-purple-wash) !important;
  border: 1px solid var(--sf-rule) !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  margin-bottom: 40px !important;
}

.sf-toc h4,
.sf-toc .sf-toc-title {
  font-family: var(--sf-serif) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--sf-ink) !important;
  margin-bottom: 14px !important;
}

.sf-toc ol,
.sf-toc ul {
  list-style: none !important;
  counter-reset: toc !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sf-toc ol li,
.sf-toc ul li {
  counter-increment: toc !important;
  padding: 6px 0 !important;
  padding-left: 0 !important;
  border-bottom: 1px solid rgba(226,216,238,0.5) !important;
  list-style: none !important;
}

/* disc/marker-Reste killen falls Divi-CSS spaeter greift */
.sf-toc ul li::marker,
.sf-toc ol li::marker {
  content: none !important;
}

.sf-toc li:last-child {
  border-bottom: none !important;
}

.sf-toc li::before {
  content: counter(toc) "." !important;
  color: var(--sf-purple) !important;
  font-weight: 500 !important;
  margin-right: 10px !important;
  font-size: 13px !important;
}

.sf-toc a {
  color: var(--sf-ink-soft) !important;
  text-decoration: none !important;
  font-size: 14px !important;
}

.sf-toc a:hover {
  color: var(--sf-purple) !important;
}

/* ================================================================
   BLOG POST — Inline CTA Box (mitten im Beitragstext)
   ================================================================ */

.sf-inline-cta,
body .sf-inline-cta,
.et_pb_post_content .sf-inline-cta {
  background: var(--sf-purple-wash) !important;
  border-radius: 12px !important;
  padding: 32px !important;
  margin: 40px 0 !important;
  text-align: center !important;
  border: 1px solid var(--sf-rule) !important;
}

.sf-inline-cta h3 {
  font-family: var(--sf-serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--sf-ink) !important;
  margin-bottom: 16px !important;
}

.sf-inline-cta .sf-btn-inline {
  display: inline-block !important;
  padding: 14px 32px !important;
  border-radius: 999px !important;
  background: var(--sf-gradient-btn) !important;
  color: #fff !important;
  font-family: var(--sf-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 20px rgba(123,45,142,0.3) !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}

.sf-inline-cta .sf-btn-inline:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(194,75,173,0.35) !important;
}

/* ================================================================
   BLOG SINGLE — Globale Single-Post-Overrides (v2)
   Wirken auf body.single-post — also auf jeder Blogpost-Seite.
   ================================================================ */

/* --- Breadcrumb: Abstand reduzieren --- */
.single-post .rank-math-breadcrumb,
.single-post .et_pb_breadcrumb,
body.single-post .breadcrumb {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  margin-top: 0 !important;
  font-size: 13px !important;
  color: var(--sf-muted) !important;
}
.single-post .rank-math-breadcrumb a {
  color: var(--sf-muted) !important;
  text-decoration: none !important;
}
.single-post .rank-math-breadcrumb a:hover {
  color: var(--sf-purple) !important;
}

.single-post .et_pb_section:first-child,
.single-post #main-content .container:first-child {
  padding-top: 0 !important;
}
body.single-post .entry-content,
body.single-post .et_pb_post {
  padding-top: 0 !important;
}

/* --- Kategorie-Tag (Wrapper aus Shortcode) --- */
.sf-category-tag-wrapper {
  text-align: center !important;
  margin-bottom: 16px !important;
}

/* --- Post Title + Meta + Featured Image (kombiniertes Modul) --- */
.single-post .et_pb_post_title h1,
.single-post .entry-title,
body.single-post h1.entry-title {
  font-family: var(--sf-serif) !important;
  font-size: clamp(32px, 5vw, 46px) !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  color: var(--sf-ink) !important;
  text-align: center !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 16px !important;
}

.single-post .et_pb_post_title h1 em,
.single-post .entry-title em {
  font-style: italic !important;
  color: var(--sf-purple) !important;
}

.single-post .et_pb_post_title .post-meta,
.single-post .et_pb_post_meta,
body.single-post .post-meta {
  text-align: center !important;
  font-size: 13px !important;
  color: var(--sf-muted) !important;
  margin-bottom: 24px !important;
}
.single-post .post-meta a {
  color: var(--sf-muted) !important;
  text-decoration: none !important;
}
.single-post .post-meta a:hover {
  color: var(--sf-purple) !important;
}

.single-post .et_pb_post_title .et_post_meta_wrapper + .entry-featured-image-url img,
.single-post .et_pb_title_featured_container img,
body.single-post .entry-featured-image-url img {
  border-radius: 16px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Titel-Overlay ausblenden — gezielt, nur Overlay-Container im Featured Image
   WICHTIG: NICHT .et_pb_post_title .et_pb_title_container matchen
   (das ist der eigentliche Titel ausserhalb des Featured-Containers).
   NICHT > *:not(img) verwenden (versteckt den Link-Wrapper ums Image). */
.single-post .et_pb_title_featured_container .et_pb_title_container,
.single-post .et_pb_title_featured_container .et_pb_title_container_inner,
.single-post .et_pb_title_overlay,
.single-post .entry-featured-image-url .et_pb_title_container,
.single-post .et_post_meta_wrapper ~ .et_pb_title_featured_container .et_pb_title_container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Pseudo-Element-Overlays */
.single-post .et_pb_title_featured_container::before,
.single-post .et_pb_title_featured_container::after,
.single-post .et_pb_title_featured_container .et_pb_title_container::before,
.single-post .et_pb_title_featured_container .et_pb_title_container::after {
  display: none !important;
  content: none !important;
}

/* Bild bleibt sichtbar (inkl. Link-Wrapper) */
.single-post .et_pb_title_featured_container,
.single-post .et_pb_title_featured_container a,
.single-post .et_pb_title_featured_container img,
.single-post .entry-featured-image-url img {
  display: block !important;
}

.single-post .et_pb_title_featured_container img,
.single-post .entry-featured-image-url img {
  border-radius: 16px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* --- Content-Bereich: Breite kommt aus Divi-Row-Settings --- */
.single-post .et_pb_post_content,
.single-post .entry-content,
body.single-post .et_pb_section .et_pb_post_content {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Rank Math TOC Block --- */
.single-post .wp-block-rank-math-toc-block,
.single-post .rank-math-toc-block {
  background: var(--sf-purple-wash) !important;
  border: 1px solid var(--sf-rule) !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  margin-bottom: 40px !important;
}
.single-post .wp-block-rank-math-toc-block h2,
.single-post .rank-math-toc-block h2 {
  font-family: var(--sf-serif) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--sf-ink) !important;
  margin-bottom: 14px !important;
}
.single-post .wp-block-rank-math-toc-block li {
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(226,216,238,0.5) !important;
}
.single-post .wp-block-rank-math-toc-block li:last-child {
  border-bottom: none !important;
}
.single-post .wp-block-rank-math-toc-block a {
  color: var(--sf-ink-soft) !important;
  text-decoration: none !important;
  font-size: 14px !important;
}
.single-post .wp-block-rank-math-toc-block a:hover {
  color: var(--sf-purple) !important;
}

/* --- Blockquote (im Content) --- */
.single-post .et_pb_post_content blockquote,
.single-post .entry-content blockquote,
body.single-post blockquote {
  border-left: 3px solid var(--sf-gold) !important;
  padding: 20px 28px !important;
  margin: 32px 0 !important;
  background: var(--sf-gold-soft) !important;
  border-radius: 0 8px 8px 0 !important;
}
.single-post .et_pb_post_content blockquote p,
.single-post .entry-content blockquote p,
body.single-post blockquote p {
  font-family: var(--sf-serif) !important;
  font-style: italic !important;
  font-size: 18px !important;
  color: var(--sf-ink) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* --- H2/H3 im Content --- */
.single-post .et_pb_post_content h2,
.single-post .entry-content h2 {
  font-family: var(--sf-serif) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--sf-ink) !important;
  margin: 48px 0 16px !important;
  line-height: 1.2 !important;
}
.single-post .et_pb_post_content h3,
.single-post .entry-content h3 {
  font-family: var(--sf-serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--sf-ink) !important;
  margin: 36px 0 12px !important;
  line-height: 1.3 !important;
}

/* --- Post-Tags (aus Shortcode) --- */
.sf-post-tags {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin: 40px auto !important;
  padding-top: 32px !important;
  border-top: 1px solid var(--sf-rule) !important;
}
.sf-post-tags-label {
  font-size: 13px !important;
  color: var(--sf-muted) !important;
  font-weight: 500 !important;
  margin-right: 4px !important;
}
.sf-post-tags .sf-tag {
  text-decoration: none !important;
  transition: all 0.2s !important;
}
.sf-post-tags .sf-tag:hover {
  background: var(--sf-gold) !important;
  color: var(--sf-purple-deep) !important;
}

/* --- Autoren-Box: nur Vertical-Margins (Breite aus Divi-Row) --- */
.single-post .sf-author-box,
body.single-post .sf-author-box {
  margin: 32px auto 48px !important;
}

.sf-author-avatar {
  min-width: 72px !important;
}

.sf-author-content .sf-kicker {
  font-size: 10px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--sf-gold) !important;
  font-weight: 600 !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* --- Reading-Time Plugin (rt-reading-time / span-reading-time) ---
   Sauber zentriert, klein, Gold-Ton wie ein Kicker. */
.single-post .span-reading-time,
.single-post .rt-reading-time,
.single-post .et_pb_post_content .span-reading-time,
.single-post .et_pb_post_content .rt-reading-time,
body.single-post .span-reading-time {
  display: block !important;
  text-align: center !important;
  font-family: var(--sf-sans) !important;
  font-size: 12px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--sf-gold) !important;
  font-weight: 600 !important;
  margin: 8px 0 32px !important;
  line-height: 1.5 !important;
}

.single-post .span-reading-time .rt-label,
.single-post .span-reading-time .rt-time,
.single-post .rt-reading-time .rt-label,
.single-post .rt-reading-time .rt-time {
  color: var(--sf-gold) !important;
  font-family: var(--sf-sans) !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  font-weight: inherit !important;
}

/* --- Eigener Lesezeit-Shortcode .sf-reading-time ---
   Hook fuer optionales Custom-Styling. Standard:
   erbt Meta-Zeile-Styles wo eingesetzt. */
.sf-reading-time {
  font-size: inherit;
  color: inherit;
}

/* --- Inline-CTA: Single-Post-spezifische Overrides
   Hoehere Spezifitaet, damit Single-Post H2/H3-Margins NICHT
   auf inner Elemente der Box durchschlagen. */
.single-post .et_pb_post_content .sf-inline-cta,
.single-post .entry-content .sf-inline-cta {
  padding: 28px 32px !important;
  margin: 32px 0 !important;
}

.single-post .et_pb_post_content .sf-inline-cta .sf-kicker,
.single-post .entry-content .sf-inline-cta .sf-kicker,
.sf-inline-cta .sf-kicker {
  display: block !important;
  margin: 0 0 8px !important;
  white-space: nowrap !important;
}

.single-post .et_pb_post_content .sf-inline-cta h3,
.single-post .entry-content .sf-inline-cta h3,
.sf-inline-cta h3 {
  font-family: var(--sf-serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: var(--sf-ink) !important;
  margin: 0 0 16px !important;
}

.single-post .et_pb_post_content .sf-inline-cta p,
.single-post .entry-content .sf-inline-cta p {
  margin: 0 !important;
}

.single-post .et_pb_post_content .sf-inline-cta .sf-hint,
.single-post .entry-content .sf-inline-cta .sf-hint,
.sf-inline-cta .sf-hint {
  display: block !important;
  margin: 12px 0 0 !important;
}

.single-post .et_pb_post_content .sf-inline-cta .sf-btn-inline,
.single-post .entry-content .sf-inline-cta .sf-btn-inline {
  margin: 0 auto !important;
}

/* --- Related Posts (Rank Math) ---
   Container .sf-related-posts manuell oder via Filter eingebaut.
   Innere Selektoren matchen Rank Math Pro's Render-Output. */
.sf-related-posts,
body .sf-related-posts,
.et_pb_text .sf-related-posts {
  margin: 48px 0 !important;
  padding: 32px 0 !important;
  border-top: 1px solid var(--sf-rule) !important;
}

.sf-related-posts > h3,
.sf-related-posts > h2 {
  font-family: var(--sf-serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--sf-ink) !important;
  margin-bottom: 24px !important;
}

.sf-related-posts .rank-math-related-posts,
.sf-related-posts .wp-block-rank-math-related-posts {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sf-related-posts .rank-math-related-posts li,
.sf-related-posts .rank-math-related-posts article,
.sf-related-posts .wp-block-rank-math-related-posts li,
.sf-related-posts [class*="rank-math"] li {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--sf-rule) !important;
  list-style: none !important;
}

.sf-related-posts [class*="rank-math"] li:last-child {
  border-bottom: none !important;
}

.sf-related-posts [class*="rank-math"] img,
.sf-related-posts [class*="rank-math"] .rank-math-image {
  width: 64px !important;
  height: 64px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.sf-related-posts [class*="rank-math"] a,
.sf-related-posts [class*="rank-math"] .rank-math-title a {
  font-family: var(--sf-serif) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--sf-ink) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  line-height: 1.4 !important;
}

.sf-related-posts [class*="rank-math"] a:hover {
  color: var(--sf-purple) !important;
}

/* Score/Datum/Excerpt verstecken (Rank Math Default-Output) */
.sf-related-posts [class*="rank-math"] .rank-math-score,
.sf-related-posts [class*="rank-math"] .rank-math-date,
.sf-related-posts [class*="rank-math"] .rank-math-excerpt {
  display: none !important;
}

/* --- Fallback-Shortcode [sf_related_posts] (eigene WP_Query) --- */
.sf-related-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sf-related-list li {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--sf-rule) !important;
}

.sf-related-list li:last-child {
  border-bottom: none !important;
}

.sf-related-list .sf-related-thumb,
.sf-related-list img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.sf-related-list .sf-related-title {
  font-family: var(--sf-serif) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--sf-ink) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  line-height: 1.4 !important;
}

.sf-related-list .sf-related-title:hover {
  color: var(--sf-purple) !important;
}

@media (max-width: 600px) {
  .sf-related-posts [class*="rank-math"] img,
  .sf-related-list img {
    width: 48px !important;
    height: 48px !important;
  }
  .sf-related-posts [class*="rank-math"] a,
  .sf-related-list .sf-related-title {
    font-size: 15px !important;
  }
}

/* --- Kommentar-Bereich --- */
.single-post #comment-wrap,
.single-post #respond {
  margin: 48px auto !important;
}
.single-post #respond h3 {
  font-family: var(--sf-serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
}
.single-post #respond .comment-form textarea {
  border: 1px solid var(--sf-rule) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  font-family: var(--sf-sans) !important;
}
.single-post #respond .form-submit .et_pb_button,
.single-post #respond .form-submit input[type="submit"] {
  background: var(--sf-gradient-btn) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  font-family: var(--sf-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

/* === Page Hero (Section-Klasse fuer Unterseiten-Hero, v2) ===
   Verwendung: CSS-Klasse "sf-page-hero" auf die Divi-Section.
   Wichtig: BG-Regel ist :not(.sf-page-hero-img) — damit Modifier
   .sf-page-hero-img mit Divi-Background-Bild funktioniert. */

/* Layout + Padding gelten IMMER */
.sf-page-hero, .\.sf-page-hero,
.sf-page-hero.et_pb_section, .\.sf-page-hero.et_pb_section {
  padding-top: 80px !important;
  padding-bottom: 60px !important;
  text-align: center;
}

/* Wash-BG mit Radial-Gradients nur WENN KEIN sf-page-hero-img Modifier */
.sf-page-hero:not(.sf-page-hero-img),
.\.sf-page-hero:not(.sf-page-hero-img),
.sf-page-hero.et_pb_section:not(.sf-page-hero-img),
.\.sf-page-hero.et_pb_section:not(.sf-page-hero-img) {
  background:
    radial-gradient(ellipse 60% 45% at 50% 30%, rgba(123,45,142,0.1), transparent 60%),
    radial-gradient(ellipse 40% 35% at 70% 60%, rgba(201,169,110,0.05), transparent 50%),
    #F8F4FC !important;
}

/* H1 — Seitentitel kompakt */
.sf-page-hero h1,
.sf-page-hero .et_pb_module_header {
  font-family: var(--sf-serif) !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  color: var(--sf-purple-deep) !important;
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
}

/* Purple-Highlight in H1 (em/i) */
.sf-page-hero h1 em,
.sf-page-hero h1 i,
.sf-page-hero .et_pb_module_header em {
  font-style: italic;
  color: var(--sf-purple) !important;
}

/* H2 — Subtitle */
.sf-page-hero h2 {
  font-family: var(--sf-serif) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--sf-muted) !important;
  line-height: 1.4 !important;
  margin-bottom: 20px !important;
}

/* Absatztext zentriert mit max-width */
.sf-page-hero p,
.sf-page-hero .et_pb_text_inner p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--sf-ink-soft) !important;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Gold-Divider 60px breit zentriert */
.sf-page-hero .et_pb_divider_internal {
  width: 60px !important;
  margin: 0 auto 20px !important;
  border-top-color: var(--sf-gold) !important;
  border-top-width: 2px !important;
}

/* Kicker zentriert */
.sf-page-hero .sf-kicker {
  text-align: center;
}

@media (max-width: 768px) {
  .sf-page-hero {
    padding-top: 48px !important;
    padding-bottom: 36px !important;
  }
  .sf-page-hero h1,
  .sf-page-hero .et_pb_module_header {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }
  .sf-page-hero h2 {
    font-size: 17px !important;
  }
}

/* ================================================================
   SF-PAGE-HERO-IMG — Hero mit Hintergrundbild (Modifier)
   Verwendung zusammen mit sf-page-hero auf der Section.
   Entfernt den festen Background + legt dunkles Overlay drueber,
   damit das Divi-Background-Bild durchscheinen kann.
   ================================================================ */

/* sf-page-hero setzt seinen Wash-BG NICHT (via :not(.sf-page-hero-img)),
   damit Divis Hintergrundbild durchkommt. Hier nur position + overflow
   fuer das ::after-Overlay. */
.sf-page-hero.sf-page-hero-img {
  position: relative !important;
  overflow: hidden !important;
}

/* Overlay via ::after (Divi nutzt manchmal ::before fuer Section-Backgrounds).
   ::after kollidiert nicht mit Divis BG-Pseudoelementen. */
.sf-page-hero.sf-page-hero-img::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(26, 15, 36, 0.45) 0%,
    rgba(26, 15, 36, 0.55) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Inhalt ueber dem Overlay */
.sf-page-hero.sf-page-hero-img .et_pb_row {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 768px) {
  /* Overlay etwas dichter auf Mobile (mehr Kontrast fuer kleinere Schrift) */
  .sf-page-hero.sf-page-hero-img::after {
    background: linear-gradient(
      180deg,
      rgba(26, 15, 36, 0.50) 0%,
      rgba(26, 15, 36, 0.60) 100%
    ) !important;
  }
}

/* ================================================================
   SF-PAGE-HERO-IMG-DARK — Verdunkelter Overlay + helle Schrift
   Verwendung: sf-page-hero sf-page-hero-img sf-page-hero-img-dark
   Geeignet fuer helle Hintergrundbilder.
   ================================================================ */

.sf-page-hero.sf-page-hero-img-dark::after {
  background: linear-gradient(
    180deg,
    rgba(26, 15, 36, 0.55) 0%,
    rgba(26, 15, 36, 0.72) 100%
  ) !important;
}

/* Text-Farben weiss + Gold-Akzente */
.sf-page-hero.sf-page-hero-img-dark h1,
.sf-page-hero.sf-page-hero-img-dark .et_pb_module_header,
.sf-page-hero.sf-page-hero-img-dark h2,
.sf-page-hero.sf-page-hero-img-dark p,
.sf-page-hero.sf-page-hero-img-dark .et_pb_text_inner p {
  color: #FFFFFF !important;
}

.sf-page-hero.sf-page-hero-img-dark h1 em,
.sf-page-hero.sf-page-hero-img-dark h1 i,
.sf-page-hero.sf-page-hero-img-dark .et_pb_module_header em {
  color: var(--sf-gold-light) !important;
}

.sf-page-hero.sf-page-hero-img-dark h2 {
  color: rgba(255, 255, 255, 0.85) !important;
}

.sf-page-hero.sf-page-hero-img-dark .sf-kicker {
  color: var(--sf-gold-light) !important;
}

.sf-page-hero.sf-page-hero-img-dark .et_pb_divider_internal {
  border-top-color: var(--sf-gold-light) !important;
}

@media (max-width: 768px) {
  .sf-page-hero.sf-page-hero-img-dark::after {
    background: linear-gradient(
      180deg,
      rgba(26, 15, 36, 0.65) 0%,
      rgba(26, 15, 36, 0.80) 100%
    ) !important;
  }
}

/* ================================================================
   SF-PAGE-HERO-IMG-LIGHT — Aufgehellter Overlay + dunkle Schrift
   Verwendung: sf-page-hero sf-page-hero-img sf-page-hero-img-light
   Geeignet fuer dunkle Hintergrundbilder.
   ================================================================ */

.sf-page-hero.sf-page-hero-img-light::after {
  background: linear-gradient(
    180deg,
    rgba(248, 244, 252, 0.70) 0%,
    rgba(248, 244, 252, 0.85) 100%
  ) !important;
}

/* Text-Farben bleiben dunkellila/purple (sf-page-hero default).
   Explizit setzen, damit es nicht durch andere Regeln gestoert wird. */
.sf-page-hero.sf-page-hero-img-light h1,
.sf-page-hero.sf-page-hero-img-light .et_pb_module_header {
  color: var(--sf-purple-deep) !important;
}

.sf-page-hero.sf-page-hero-img-light h1 em,
.sf-page-hero.sf-page-hero-img-light h1 i,
.sf-page-hero.sf-page-hero-img-light .et_pb_module_header em {
  color: var(--sf-purple) !important;
}

.sf-page-hero.sf-page-hero-img-light h2 {
  color: var(--sf-muted) !important;
}

.sf-page-hero.sf-page-hero-img-light p,
.sf-page-hero.sf-page-hero-img-light .et_pb_text_inner p {
  color: var(--sf-ink-soft) !important;
}

.sf-page-hero.sf-page-hero-img-light .sf-kicker {
  color: var(--sf-gold) !important;
}

.sf-page-hero.sf-page-hero-img-light .et_pb_divider_internal {
  border-top-color: var(--sf-gold) !important;
}

@media (max-width: 768px) {
  .sf-page-hero.sf-page-hero-img-light::after {
    background: linear-gradient(
      180deg,
      rgba(248, 244, 252, 0.78) 0%,
      rgba(248, 244, 252, 0.90) 100%
    ) !important;
  }
}

/* ================================================================
   SF-SUBPAGE — Unterseiten-Typografie (Body-Klasse, optional)
   Hinweis: Divi 5 hat kein Custom-Body-Class-Feld mehr im
   Page-Panel. Diese Klasse wird daher NICHT automatisch gesetzt.
   Empfohlener Weg: `.sf-page-content` auf einzelne Sections
   anwenden (kontrollierter, kein Header-Konflikt).
   Section-Padding wurde bewusst entfernt — sonst wird auch der
   Theme-Builder-Header (auch eine .et_pb_section) gequetscht.
   ================================================================ */

body.sf-subpage h2,
body.sf-subpage .et_pb_module_header {
  font-size: 32px !important;
  line-height: 1.15 !important;
}

/* Hero behaelt seine eigene H2 (20px) */
body.sf-subpage .sf-page-hero h2 {
  font-size: 20px !important;
}

body.sf-subpage h2 em,
body.sf-subpage h2 i,
body.sf-subpage .et_pb_module_header em {
  font-style: italic;
  color: var(--sf-purple) !important;
}

body.sf-subpage h3 {
  font-size: 22px !important;
}

@media (max-width: 768px) {
  body.sf-subpage h2,
  body.sf-subpage .et_pb_module_header {
    font-size: 26px !important;
  }
  body.sf-subpage h3 {
    font-size: 19px !important;
  }
}

/* ================================================================
   SF-PAGE-CONTENT — Section-Klasse fuer kompakte Content-Bereiche
   Selektiver Scope: nur in der markierten Section.
   ================================================================ */

.sf-page-content h2,
.sf-page-content .et_pb_module_header {
  font-size: 32px !important;
  line-height: 1.15 !important;
}

.sf-page-content h2 em,
.sf-page-content h2 i,
.sf-page-content .et_pb_module_header em {
  font-style: italic;
  color: var(--sf-purple) !important;
}

.sf-page-content h3 {
  font-size: 22px !important;
}

@media (max-width: 768px) {
  .sf-page-content h2,
  .sf-page-content .et_pb_module_header {
    font-size: 26px !important;
  }
  .sf-page-content h3 {
    font-size: 19px !important;
  }
}

/* === Nav Quiz Button === */
.sf-btn-nav-quiz {
  color: var(--sf-gold) !important;
  border: 1.5px solid var(--sf-gold) !important;
  padding: 8px 20px !important;
  border-radius: 999px !important;
  background: transparent !important;
}
.sf-btn-nav-quiz:hover {
  background: var(--sf-gold) !important;
  color: var(--sf-purple-deep) !important;
}

/* ================================================================
   RESPONSIVE — Mobile Fixes (max-width: 768px)
   ================================================================ */

@media (max-width: 768px) {

  /* HEADER: Logo verkleinern */
  #main-header .logo_container img,
  .et-l--header .et_pb_image img,
  .et-l--header img[src*="shakti"],
  .et-l--header .et_pb_image_wrap img,
  header .et_pb_module .et_pb_image_wrap img {
    max-height: 60px !important;
    width: auto !important;
  }

  #main-header .logo_container,
  .et-l--header .et_pb_image {
    padding: 12px 0 !important;
  }

  /* HEADER: Quiz-Button auf Mobile ausblenden (kommt im Hamburger-Menu) */
  .et-l--header .sf-btn-nav-quiz,
  #main-header .sf-btn-nav-quiz {
    display: none !important;
  }

  /* BLOG: Section-Spacing reduzieren */
  .single-post .et_pb_section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .single-post .et_pb_post_title {
    padding: 16px 20px !important;
  }

  .single-post .et_pb_post_title h1,
  .single-post .entry-title {
    font-size: clamp(26px, 6vw, 36px) !important;
    line-height: 1.15 !important;
  }

  .single-post .et_pb_title_featured_container img,
  .single-post .entry-featured-image-url img {
    border-radius: 8px !important;
  }

  .single-post .rank-math-breadcrumb,
  .single-post [class*="breadcrumb"] {
    font-size: 12px !important;
    padding: 8px 20px !important;
  }

  .single-post .et_pb_post_content,
  .single-post .entry-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .single-post .sf-toc,
  .single-post .wp-block-rank-math-toc-block {
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
  }

  .single-post .sf-inline-cta {
    padding: 24px 20px !important;
    margin: 28px 0 !important;
  }

  .single-post .sf-post-tags {
    padding-top: 20px !important;
  }

  .single-post .sf-author-box {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 24px 20px !important;
    gap: 16px !important;
  }

  .single-post .sf-author-avatar {
    width: 56px !important;
    height: 56px !important;
    font-size: 20px !important;
  }

  .single-post .sf-bg-dark,
  .single-post [class*="sf-bg-dark"] {
    padding: 40px 20px !important;
  }

  .single-post .sf-bg-dark h2,
  .single-post [class*="sf-bg-dark"] h2 {
    font-size: clamp(24px, 5vw, 32px) !important;
  }

  .single-post .sf-btn-gold,
  .single-post .sf-bg-dark .et_pb_button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  footer .et_pb_section,
  .et-l--footer .et_pb_section {
    padding: 32px 20px !important;
  }
}

/* ================================================================
   RESPONSIVE — Kleine Phones (max-width: 480px)
   ================================================================ */

@media (max-width: 480px) {

  #main-header .logo_container img,
  .et-l--header .et_pb_image img,
  .et-l--header img[src*="shakti"],
  .et-l--header .et_pb_image_wrap img,
  header .et_pb_module .et_pb_image_wrap img {
    max-height: 48px !important;
  }

  .single-post .et_pb_post_title h1,
  .single-post .entry-title {
    font-size: clamp(22px, 5.5vw, 30px) !important;
  }

  .single-post .et_pb_post_title .et_pb_title_meta_container,
  .single-post .post-meta {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 12px !important;
  }
}

/* ================================================================
   BLOG SINGLE — Kommentar-Sektion Styling
   ================================================================ */

.single-post #comments,
.single-post #respond,
.single-post .comment-respond {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 40px 0 !important;
}

.single-post #reply-title,
.single-post .comment-reply-title {
  font-family: var(--sf-serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--sf-ink) !important;
  margin-bottom: 8px !important;
}

.single-post .logged-in-as,
.single-post .comment-notes {
  font-size: 13px !important;
  color: var(--sf-muted) !important;
  margin-bottom: 20px !important;
}

.single-post .logged-in-as a {
  color: var(--sf-purple) !important;
  text-decoration: none !important;
}

.single-post .logged-in-as a:hover {
  text-decoration: underline !important;
}

/* Kommentar-Textfeld */
.single-post #comment,
.single-post .comment-form textarea {
  width: 100% !important;
  min-height: 140px !important;
  padding: 16px 20px !important;
  border: 1px solid var(--sf-rule) !important;
  border-radius: 12px !important;
  font-family: var(--sf-sans) !important;
  font-size: 15px !important;
  color: var(--sf-ink) !important;
  background: var(--sf-paper) !important;
  resize: vertical !important;
  transition: border-color 0.2s !important;
}

.single-post #comment:focus,
.single-post .comment-form textarea:focus {
  outline: none !important;
  border-color: var(--sf-purple) !important;
  box-shadow: 0 0 0 3px rgba(123,45,142,0.1) !important;
}

/* Name/Email/URL Felder */
.single-post .comment-form input[type="text"],
.single-post .comment-form input[type="email"],
.single-post .comment-form input[type="url"] {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid var(--sf-rule) !important;
  border-radius: 8px !important;
  font-family: var(--sf-sans) !important;
  font-size: 14px !important;
  color: var(--sf-ink) !important;
  background: var(--sf-paper) !important;
  margin-bottom: 12px !important;
  transition: border-color 0.2s !important;
}

.single-post .comment-form input:focus {
  outline: none !important;
  border-color: var(--sf-purple) !important;
  box-shadow: 0 0 0 3px rgba(123,45,142,0.1) !important;
}

/* Absenden-Button */
.single-post .form-submit input[type="submit"],
.single-post .comment-form .submit,
.single-post #submit {
  display: inline-flex !important;
  align-items: center !important;
  padding: 14px 32px !important;
  border-radius: 999px !important;
  background: var(--sf-gradient-btn) !important;
  color: #fff !important;
  font-family: var(--sf-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(123,45,142,0.3) !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}

.single-post .form-submit input[type="submit"]:hover,
.single-post #submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(194,75,173,0.35) !important;
}

/* Bestehende Kommentare */
.single-post .comment-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.single-post .comment-list .comment {
  padding: 24px 0 !important;
  border-bottom: 1px solid var(--sf-rule) !important;
}

.single-post .comment-list .comment:last-child {
  border-bottom: none !important;
}

.single-post .comment-author {
  font-family: var(--sf-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--sf-ink) !important;
}

.single-post .comment-author img {
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  margin-right: 12px !important;
}

.single-post .comment-metadata,
.single-post .comment-metadata a {
  font-size: 12px !important;
  color: var(--sf-muted) !important;
  text-decoration: none !important;
}

.single-post .comment-content p {
  font-size: 15px !important;
  color: var(--sf-ink-soft) !important;
  line-height: 1.6 !important;
}

.single-post .reply a {
  font-size: 13px !important;
  color: var(--sf-purple) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.single-post .reply a:hover {
  text-decoration: underline !important;
}

@media (max-width: 768px) {
  .single-post #comments,
  .single-post #respond,
  .single-post .comment-respond {
    padding: 24px 20px !important;
  }

  .single-post .form-submit input[type="submit"] {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ================================================================
   RESPONSIVE v2 — Header Mobile Fix (max-width: 980px)
   ================================================================ */

@media (max-width: 980px) {

  /* Header-Container kompakter */
  #main-header,
  .et-l--header,
  header.et-l,
  .et-l--header .et_pb_section {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .et-l--header .et_pb_row,
  #main-header .et_pb_row,
  header .et_pb_row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Logo kleiner, kein Extra-Abstand */
  .et-l--header .et_pb_image_wrap img,
  #main-header .logo_container img,
  header .et_pb_image img {
    max-height: 50px !important;
    width: auto !important;
  }

  .et-l--header .et_pb_image,
  #main-header .logo_container {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Burger-Icon eng am Rand */
  .et-l--header .et_pb_menu__icon,
  .et-l--header .mobile_menu_bar,
  #main-header .mobile_menu_bar,
  .et_pb_menu .et_pb_menu__icon--hamburger {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Menu-Modul kompakt */
  .et-l--header .et_pb_menu,
  #main-header .et_pb_menu,
  .et-l--header .et_pb_menu_inner_container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Quiz-Button-Wrapper ohne Eigenabstaende */
  .et-l--header .sf-btn-nav-quiz,
  #main-header .sf-btn-nav-quiz,
  .et-l--header .et_pb_button_module_wrapper {
    margin-top: 0 !important;
    padding: 0 !important;
  }

  /* Spalten: Gap reduzieren */
  .et-l--header .et_pb_column,
  #main-header .et_pb_column {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .et-l--header .et_pb_section::after,
  #main-header::after {
    margin-top: 0 !important;
  }
}

/* ================================================================
   RESPONSIVE v2 — Featured Image responsive
   ================================================================ */

/* Bilder im Post grundsaetzlich responsive */
.single-post .et_pb_title_featured_container,
.single-post .et_pb_title_featured_container img,
.single-post .entry-featured-image-url,
.single-post .entry-featured-image-url img,
.single-post .et_pb_post_title .et_pb_title_featured_container img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

.single-post .et_pb_title_featured_container,
.single-post .entry-featured-image-url {
  overflow: hidden !important;
}

.single-post .et_pb_title_featured_container > * {
  max-width: 100% !important;
}

@media (max-width: 768px) {

  /* Featured Image ueber volle Viewport-Breite */
  .single-post .et_pb_title_featured_container img,
  .single-post .entry-featured-image-url img {
    border-radius: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
  }

  .single-post .et_pb_title_featured_container,
  .single-post .entry-featured-image-url {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    border-radius: 0 !important;
  }
}

/* ================================================================
   RESPONSIVE v2 — Content-Padding Mobile (max-width: 768px)
   ================================================================ */

@media (max-width: 768px) {

  /* Sections: minimales seitliches Padding */
  .single-post .et_pb_section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Rows: ohne eigenes Padding */
  .single-post .et_pb_row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Post-Content: volle Breite */
  .single-post .et_pb_post_content,
  .single-post .entry-content,
  .single-post .et_pb_text_inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Breadcrumb */
  .single-post .rank-math-breadcrumb,
  .single-post [class*="breadcrumb"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 12px !important;
  }

  /* Titel-Container */
  .single-post .et_pb_post_title,
  .single-post .et_pb_title_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* TOC */
  .single-post .sf-toc,
  .single-post .wp-block-rank-math-toc-block {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Inline-CTA */
  .single-post .sf-inline-cta {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 24px 16px !important;
  }

  /* Autoren-Box */
  .single-post .sf-author-box {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 24px 16px !important;
  }

  /* Blockquote */
  .single-post .et_pb_post_content blockquote {
    padding: 16px 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Spalten */
  .single-post .et_pb_column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Dark CTA Section */
  .single-post .sf-bg-dark,
  .single-post [class*="sf-bg-dark"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Kommentare */
  .single-post #comments,
  .single-post #respond {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 480px) {
  .single-post .et_pb_section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ================================================================
   STARTSEITE — Testimonial-Section kompakter
   Voraussetzung: Section hat CSS-Klasse "sf-testimonials"
   (Divi Builder -> Section -> Erweitert -> CSS-Klasse)
   ================================================================ */

/* Divi Testimonial-Modul: weniger Margin/Padding */
.et_pb_testimonial,
body .et_pb_testimonial,
.et_pb_module.et_pb_testimonial {
  margin-bottom: 20px !important;
  padding: 24px !important;
}

.et_pb_testimonial_portrait,
body .et_pb_testimonial .et_pb_testimonial_portrait {
  margin-bottom: 12px !important;
}

/* Custom Text-Testimonial-Cards kompakter */
.sf-testi-card,
body .sf-testi-card,
.et_pb_text .sf-testi-card,
.testimonial {
  padding: 20px 24px !important;
  margin-bottom: 16px !important;
}

/* Section selbst: kompakteres Padding */
.sf-testimonials,
.sf-testimonials.et_pb_section {
  padding-top: 60px !important;
  padding-bottom: 40px !important;
}

/* Rows: weniger Gap untereinander */
.sf-testimonials .et_pb_row,
.sf-testimonials .et_pb_row_inner {
  margin-bottom: 24px !important;
}

/* Section-Header naeher an Cards */
.sf-testimonials .et_pb_row:first-child {
  margin-bottom: 32px !important;
}

/* Spalten-Gap */
.sf-testimonials .et_pb_row.et_pb_row_3col,
.sf-testimonials .et_pb_row {
  column-gap: 20px !important;
}

/* Video-Testimonial enger */
.sf-video-testimonial {
  margin-bottom: 16px !important;
}

/* Spalten als Flex-Container -> gleiche Hoehe */
.sf-testimonials .et_pb_column {
  display: flex !important;
  flex-direction: column !important;
}

.sf-testimonials .et_pb_column .et_pb_module {
  flex: 1 !important;
}

/* Quote-Text: minimal kleiner fuer kompakteres Gefuehl */
.sf-testi-card blockquote,
.sf-testi-card p,
.et_pb_testimonial_description p {
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin-bottom: 8px !important;
}

/* Sterne enger an Quote */
.sf-testi-card .sf-stars,
.sf-stars {
  margin-bottom: 8px !important;
}

/* Author-Row kompakter */
.sf-testi-card .sf-testi-divider {
  margin: 12px 0 !important;
}

.sf-testi-card .sf-testi-author {
  gap: 8px !important;
}

/* ================================================================
   RESPONSIVE — Testimonials Mobile
   ================================================================ */

@media (max-width: 768px) {

  .sf-testimonials,
  .sf-testimonials.et_pb_section {
    padding-top: 40px !important;
    padding-bottom: 24px !important;
  }

  /* Vertikal stapeln, weniger Gap */
  .sf-testimonials .et_pb_row {
    row-gap: 16px !important;
  }

  /* Cards kompakter */
  .sf-testi-card,
  .et_pb_testimonial {
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
  }

  .sf-testi-card p,
  .et_pb_testimonial_description p {
    font-size: 14px !important;
  }

  /* Video-Cards volle Breite */
  .sf-video-testimonial {
    max-width: 100% !important;
  }
}

/* ================================================================
   RESPONSIVE — Blog-Cards
   ================================================================ */

@media (max-width: 980px) {

  /* 2er Grid auf Tablet */
  .et_pb_blog .et_pb_post {
    width: calc(50% - 12px) !important;
  }

  .et_pb_blog .et_pb_ajax_pagination_container,
  .et_pb_blog .et_pb_posts {
    gap: 16px !important;
  }
}

@media (max-width: 768px) {

  /* 1er Spalte */
  .et_pb_blog .et_pb_post {
    width: 100% !important;
    border-radius: 12px !important;
  }

  .et_pb_blog .et_pb_post .et_pb_image_container {
    border-radius: 12px 12px 0 0 !important;
  }

  .et_pb_blog .et_pb_post .entry-title,
  .et_pb_blog .et_pb_post .post-meta,
  .et_pb_blog .et_pb_post .post-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .et_pb_blog .et_pb_post .entry-title {
    font-size: 16px !important;
    padding-top: 16px !important;
  }

  .et_pb_blog .et_pb_post .post-content p {
    font-size: 13px !important;
  }

  .et_pb_blog .et_pb_post a.more-link {
    padding: 0 16px 16px !important;
  }
}

/* ================================================================
   DIVI BLOG — Pagination als Gold-Pill-Buttons
   ================================================================ */

.et_pb_blog .pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 40px !important;
  padding-top: 32px !important;
  border-top: 1px solid rgba(201, 169, 110, 0.2) !important;
  width: 100% !important;
}

.et_pb_blog .pagination a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--sf-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sf-gold) !important;
  text-decoration: none !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 10px 24px !important;
  border: 1.5px solid var(--sf-gold) !important;
  border-radius: 999px !important;
  background: transparent !important;
  transition: all 0.25s ease !important;
}

html body .et_pb_blog .pagination a:hover {
  background: var(--sf-gold) !important;
  color: #fff !important;
}

/* Aktuelle Seite (nummerierte Pagination) */
.et_pb_blog .pagination span.current {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--sf-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: var(--sf-purple) !important;
  min-width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
}

/* Seitenzahl-Links */
.et_pb_blog .pagination a.page-numbers {
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border-color: rgba(201, 169, 110, 0.3) !important;
}

html body .et_pb_blog .pagination a.page-numbers:hover {
  border-color: var(--sf-gold) !important;
  background: rgba(201, 169, 110, 0.1) !important;
  color: var(--sf-gold-warm) !important;
}

/* Vom JS gesetzte Seitenzahl-Anzeige */
.et_pb_blog .pagination .sf-page-indicator {
  font-family: var(--sf-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--sf-muted) !important;
}

@media (max-width: 768px) {
  .et_pb_blog .pagination {
    gap: 12px !important;
    margin-top: 24px !important;
    padding-top: 24px !important;
  }

  .et_pb_blog .pagination a {
    font-size: 12px !important;
    padding: 8px 16px !important;
  }
}

/* ================================================================
   BLOG — Featured Card (erster Post horizontal, volle Breite)
   ================================================================ */

.et_pb_blog .et_pb_ajax_pagination_container .et_pb_post:first-child,
.et_pb_blog .et_pb_posts .et_pb_post:first-child {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

.et_pb_blog .et_pb_post:first-child .et_pb_image_container {
  border-radius: 20px 0 0 20px !important;
  aspect-ratio: auto !important;
  min-height: 300px !important;
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
}

/* Text-Items alle in Spalte 2, untereinander gestapelt */
.et_pb_blog .et_pb_post:first-child .entry-title,
.et_pb_blog .et_pb_post:first-child .post-meta,
.et_pb_blog .et_pb_post:first-child .post-content {
  grid-column: 2 !important;
}

.et_pb_blog .et_pb_post:first-child .entry-title { grid-row: 1 !important; }
.et_pb_blog .et_pb_post:first-child .post-meta   { grid-row: 2 !important; }
.et_pb_blog .et_pb_post:first-child .post-content { grid-row: 3 !important; }

/* Title/Meta/Content kompakt oben in Spalte 2; Bild fuellt linke Haelfte */
.et_pb_blog .et_pb_post:first-child {
  grid-template-rows: auto auto 1fr !important;
  align-items: start !important;
}

.et_pb_blog .et_pb_post:first-child .entry-featured-image-url,
.et_pb_blog .et_pb_post:first-child .entry-featured-image-url img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

.et_pb_blog .et_pb_post:first-child .entry-title,
.et_pb_blog .et_pb_post:first-child .post-meta,
.et_pb_blog .et_pb_post:first-child .post-content {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.et_pb_blog .et_pb_post:first-child .entry-title,
.et_pb_blog .et_pb_post:first-child .entry-title a {
  font-size: 26px !important;
  line-height: 1.3 !important;
  padding-top: 28px !important;
  margin-bottom: 10px !important;
}

.et_pb_blog .et_pb_post:first-child .post-content p {
  font-size: 15px !important;
  -webkit-line-clamp: 4 !important;
}

@media (max-width: 980px) {
  .et_pb_blog .et_pb_post:first-child {
    grid-template-columns: 1fr 1fr !important;
  }
  .et_pb_blog .et_pb_post:first-child .entry-title a {
    font-size: 22px !important;
  }
}

@media (max-width: 768px) {
  /* Featured Card auf Mobile: Grid komplett resetten -> Flex-Stacking
     WICHTIG: Selektoren spezifischer als Desktop-Default (das hat
     .et_pb_ajax_pagination_container davor), sonst gewinnt Desktop. */
  .et_pb_blog .et_pb_ajax_pagination_container .et_pb_post:first-child,
  .et_pb_blog .et_pb_posts .et_pb_post:first-child {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    border-radius: 12px !important;
  }
  /* Innere Grid-Positionen aufheben */
  .et_pb_blog .et_pb_ajax_pagination_container .et_pb_post:first-child .et_pb_image_container,
  .et_pb_blog .et_pb_ajax_pagination_container .et_pb_post:first-child .entry-title,
  .et_pb_blog .et_pb_ajax_pagination_container .et_pb_post:first-child .post-meta,
  .et_pb_blog .et_pb_ajax_pagination_container .et_pb_post:first-child .post-content,
  .et_pb_blog .et_pb_posts .et_pb_post:first-child .et_pb_image_container,
  .et_pb_blog .et_pb_posts .et_pb_post:first-child .entry-title,
  .et_pb_blog .et_pb_posts .et_pb_post:first-child .post-meta,
  .et_pb_blog .et_pb_posts .et_pb_post:first-child .post-content {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .et_pb_blog .et_pb_ajax_pagination_container .et_pb_post:first-child .et_pb_image_container,
  .et_pb_blog .et_pb_posts .et_pb_post:first-child .et_pb_image_container {
    border-radius: 12px 12px 0 0 !important;
    min-height: 200px !important;
    aspect-ratio: 16 / 10 !important;
  }
  .et_pb_blog .et_pb_ajax_pagination_container .et_pb_post:first-child .entry-title,
  .et_pb_blog .et_pb_ajax_pagination_container .et_pb_post:first-child .post-meta,
  .et_pb_blog .et_pb_ajax_pagination_container .et_pb_post:first-child .post-content,
  .et_pb_blog .et_pb_posts .et_pb_post:first-child .entry-title,
  .et_pb_blog .et_pb_posts .et_pb_post:first-child .post-meta,
  .et_pb_blog .et_pb_posts .et_pb_post:first-child .post-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .et_pb_blog .et_pb_ajax_pagination_container .et_pb_post:first-child .entry-title a,
  .et_pb_blog .et_pb_posts .et_pb_post:first-child .entry-title a {
    font-size: 20px !important;
    padding-top: 16px !important;
  }
}

/* ================================================================
   SF-CATEGORY-FILTER — Horizontale Pill-Navigation
   Shortcode: [sf_category_filter]
   ================================================================ */

.sf-category-filter,
.\.sf-category-filter {
  background: #fff !important;
  border-top: 1px solid rgba(201, 169, 110, 0.15) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sf-category-filter-inner {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px 0 !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.sf-category-filter-inner::-webkit-scrollbar {
  display: none !important;
}

.sf-cat-pill,
.\.sf-cat-pill {
  font-family: var(--sf-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sf-muted) !important;
  background: transparent !important;
  border: 1.5px solid rgba(107, 95, 122, 0.2) !important;
  border-radius: 999px !important;
  padding: 7px 18px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  display: inline-block !important;
}

html body .sf-cat-pill:hover {
  border-color: var(--sf-gold) !important;
  color: var(--sf-gold) !important;
}

.sf-cat-pill.active {
  background: var(--sf-purple-deep) !important;
  color: #fff !important;
  border-color: var(--sf-purple-deep) !important;
  font-weight: 600 !important;
}

@media (max-width: 768px) {
  .sf-category-filter-inner {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    justify-content: center !important;
    padding: 12px 0 !important;
    gap: 8px !important;
  }
  .sf-cat-pill {
    font-size: 12px !important;
    padding: 6px 14px !important;
  }
}

/* ================================================================
   BLOG CARDS — Footer (Weiterlesen + Lesezeit)
   ================================================================ */

.sf-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-bottom: 20px !important;
  border-top: 1px solid rgba(201, 169, 110, 0.12) !important;
}

.sf-card-footer .sf-card-read {
  font-family: var(--sf-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sf-gold) !important;
  letter-spacing: 0.3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: gap 0.2s ease !important;
}

.et_pb_blog .et_pb_post:hover .sf-card-read {
  gap: 8px !important;
}

.sf-card-footer .sf-card-read .sf-arrow {
  transition: transform 0.2s ease !important;
}

.et_pb_blog .et_pb_post:hover .sf-card-read .sf-arrow {
  transform: translateX(2px) !important;
}

.sf-card-footer .sf-card-time {
  font-family: var(--sf-sans) !important;
  font-size: 12px !important;
  color: var(--sf-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.sf-card-footer .sf-card-time svg {
  color: var(--sf-muted) !important;
}

/* Featured Card: Footer mit groesserem Padding */
.et_pb_blog .et_pb_post:first-child .sf-card-footer {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

@media (max-width: 768px) {
  .sf-card-footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 16px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
  }
  .sf-card-footer .sf-card-read {
    font-size: 12px !important;
  }
  .sf-card-footer .sf-card-time {
    font-size: 11px !important;
  }
  .et_pb_blog .et_pb_post:first-child .sf-card-footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ================================================================
   BLOG CARDS — Kategorie-Badge auf dem Bild
   ================================================================ */

.et_pb_blog .et_pb_post .et_pb_image_container,
.et_pb_blog .et_pb_post .entry-featured-image-url {
  position: relative !important;
}

.sf-card-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  font-family: var(--sf-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--sf-gold-warm) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.et_pb_blog .et_pb_post:first-child .sf-card-badge {
  top: 16px !important;
  left: 16px !important;
  font-size: 12px !important;
  padding: 6px 16px !important;
}

@media (max-width: 768px) {
  .sf-card-badge {
    font-size: 10px !important;
    padding: 3px 10px !important;
    top: 8px !important;
    left: 8px !important;
  }
}

/* ================================================================
   SF-SECTION-QUOTE — Zentrierte Italic-Quote (Section-Opener)
   Verwendung: Text-Modul mit Klasse "sf-section-quote"
   Inhalt als <p>, Highlights als <strong> oder <em>
   ================================================================ */

.sf-section-quote, .\.sf-section-quote,
.sf-section-quote .et_pb_text_inner {
  text-align: center;
}

.sf-section-quote .et_pb_text_inner p,
.sf-section-quote p {
  font-family: var(--sf-serif) !important;
  font-style: italic !important;
  font-size: 24px !important;
  line-height: 1.45 !important;
  color: var(--sf-ink) !important;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300 !important;
}

.sf-section-quote .et_pb_text_inner p strong,
.sf-section-quote .et_pb_text_inner p em,
.sf-section-quote p strong,
.sf-section-quote p em {
  color: var(--sf-purple) !important;
  font-weight: 400 !important;
}

@media (max-width: 768px) {
  .sf-section-quote .et_pb_text_inner p,
  .sf-section-quote p {
    font-size: 20px !important;
    padding: 0 8px;
  }
}

/* ================================================================
   SF-ICON-GRID — 2-Spalten Icon+Text Grid
   Verwendung: Text-Modul mit Klasse "sf-icon-grid"
   Innere Struktur: <div class="sf-icon-item"><span class="icon">💔</span><span>...</span></div>
   Varianten: .sf-bordered (Lila-Wash + Gold-Border-Left), .check (Gold-Checkmark)
   ================================================================ */

.sf-icon-grid .et_pb_text_inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}

.sf-icon-item, .\.sf-icon-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sf-ink-soft);
}

.sf-icon-item .icon {
  flex-shrink: 0;
  font-size: 16px;
  margin-top: 2px;
}

.sf-icon-item strong {
  color: var(--sf-ink);
  font-weight: 500;
}

/* Variante: bordered Card */
.sf-icon-item.sf-bordered {
  padding: 16px 20px;
  background: var(--sf-purple-wash);
  border-radius: 12px;
  border-left: 3px solid var(--sf-gold);
}

/* Variante: Gold-Checkmark statt Emoji */
.sf-icon-item .check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(201,169,110,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-gold);
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}

@media (max-width: 768px) {
  .sf-icon-grid .et_pb_text_inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ================================================================
   SF-EMOJI-LIST — Bullet-Listen mit Emoji-Icons (via ::before)
   Vorteil: Emojis kommen aus CSS, nicht aus HTML —
   Divi-Visual-Editor filtert nichts raus.
   Verwendung: Text-Modul mit Klasse "sf-emoji-list" + Modifier
   Inhalt: normale <ul><li>-Liste im visuellen Editor
   ================================================================ */

.sf-emoji-list .et_pb_text_inner ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
  max-width: 760px;
  margin: 0 auto !important;
}

.sf-emoji-list .et_pb_text_inner ul li {
  position: relative !important;
  padding-left: 32px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--sf-ink-soft) !important;
  list-style: none !important;
}

.sf-emoji-list .et_pb_text_inner ul li::before {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.sf-emoji-list .et_pb_text_inner ul li strong {
  color: var(--sf-ink) !important;
  font-weight: 500 !important;
}

/* === MODIFIER: Emoji-Varianten === */
.sf-emoji-heart .et_pb_text_inner ul li::before {
  content: "\1F494" !important; /* 💔 */
}

.sf-emoji-check .et_pb_text_inner ul li::before {
  content: "\2713" !important; /* ✓ */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(201,169,110,0.15);
  color: var(--sf-gold) !important;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1 !important;
  top: 2px !important;
}

.sf-emoji-star .et_pb_text_inner ul li::before {
  content: "\2B50" !important; /* ⭐ */
}

.sf-emoji-fire .et_pb_text_inner ul li::before {
  content: "\1F525" !important; /* 🔥 */
}

/* === MODIFIER: 1-Spalte erzwingen === */
.sf-emoji-1col .et_pb_text_inner ul {
  grid-template-columns: 1fr !important;
}

/* === VARIANTE: Bordered-Cards === */
.sf-emoji-bordered .et_pb_text_inner ul li {
  padding: 16px 20px 16px 48px !important;
  background: var(--sf-purple-wash) !important;
  border-radius: 12px !important;
  border-left: 3px solid var(--sf-gold) !important;
}

.sf-emoji-bordered .et_pb_text_inner ul li::before {
  left: 16px !important;
  top: 16px !important;
}

@media (max-width: 768px) {
  .sf-emoji-list .et_pb_text_inner ul {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ================================================================
   SF-MODULE-CARD — Nummerierte Modul-Karten
   Verwendung:
     - ROW-Klasse: sf-module-cards-row (Grid-Layout)
     - MODUL-Klasse: sf-module-card (auf Text-Modul)
     - HTML-Inhalt:
         <div class="sf-badge-num">1</div>
         <h4>Titel</h4>
         <p>Beschreibung</p>
   ================================================================ */

/* Row-Container: Spalten-Padding + gleiche Spalten-Hoehe */
.sf-module-cards-row .et_pb_column,
.\.sf-module-cards-row .et_pb_column {
  padding: 0 8px !important;
  display: flex !important;
  flex-direction: column !important;
}

.sf-module-cards-row .et_pb_column .et_pb_module {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Karte selbst — Flex-Container, dehnt sich auf volle Spaltenhoehe */
.sf-module-card .et_pb_text_inner,
.\.sf-module-card .et_pb_text_inner {
  background: #FFFFFF !important;
  border: 1px solid rgba(201,169,110,0.25) !important;
  border-radius: 16px !important;
  padding: 32px 24px 40px !important;
  text-align: center !important;
  position: relative !important;
  box-shadow: 0 2px 12px rgba(26,15,36,0.06) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  height: 100% !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: visible !important;
}

.sf-module-card .et_pb_text_inner:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(26,15,36,0.10) !important;
}

/* Gold-Linie am Kartenfuss */
.sf-module-card .et_pb_text_inner::after {
  content: "" !important;
  display: block !important;
  width: 40px !important;
  height: 2px !important;
  background: var(--sf-gold) !important;
  margin: 20px auto 0 !important;
  border-radius: 2px !important;
}

/* Nummern-Badge */
.sf-module-card .sf-badge-num,
.\.sf-module-card .sf-badge-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--sf-purple) !important;
  color: #FFFFFF !important;
  font-family: var(--sf-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 auto 16px !important;
  line-height: 1 !important;
}

/* Titel — kompakter + min-height fuer einheitliche Hoehen-Linie */
.sf-module-card .et_pb_text_inner h4 {
  font-family: var(--sf-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--sf-ink) !important;
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
  /* Reserviert Platz fuer bis zu 3 Zeilen Titel — alle Beschreibungen
     starten so auf gleicher Hoehe, egal wie kurz der Titel ist. */
  min-height: calc(16px * 1.3 * 3) !important; /* 62.4px */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Beschreibung — flex-grow damit Gold-Fussline immer am Boden klebt */
.sf-module-card .et_pb_text_inner p {
  font-family: var(--sf-sans) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--sf-muted) !important;
  margin: 0 !important;
  flex: 1 !important;
}

@media (max-width: 980px) {
  .sf-module-cards-row {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .sf-module-cards-row .et_pb_column {
    width: 50% !important;
    margin-bottom: 16px !important;
  }
}

@media (max-width: 768px) {
  .sf-module-cards-row .et_pb_column {
    width: 100% !important;
  }
  .sf-module-card .et_pb_text_inner {
    padding: 24px 20px 32px !important;
  }
  .sf-module-card .sf-badge-num {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
  .sf-module-card .et_pb_text_inner h4 {
    font-size: 15px !important;
    min-height: 0 !important; /* Mobile: kein Reservespace, Karten stapeln eh */
  }
}

/* ================================================================
   25. DEPRECATED — SF-GOLD-DIVIDER + GOLD-LINE-CENTER
   Ersetzt durch [sf_divider] Shortcode (v2.1.39).
   Bleibt als Fallback fuer bestehende Seiten. Fuer neue Seiten
   bitte den Shortcode verwenden.
   ----------------------------------------------------------------
   SF-GOLD-DIVIDER — Zentrierte Gold-Trennlinie (60px) per ::after
   Funktioniert auf jedem Modul-Typ (Text/Code/Divider/Spacer).
   ================================================================ */

.sf-gold-divider, .\.sf-gold-divider {
  text-align: center !important;
  overflow: visible !important;
}

.sf-gold-divider::after {
  content: "" !important;
  display: block !important;
  width: 60px !important;
  height: 2px !important;
  background: var(--sf-gold, #C9A96E) !important;
  margin: 0 auto !important;
  border: none !important;
}

/* Falls Divi-Divider-Modul verwendet: eigenen Content verstecken */
.sf-gold-divider .et_pb_divider_internal {
  display: none !important;
}

.sf-gold-divider.et_pb_space {
  height: auto !important;
  min-height: 0 !important;
}

.sf-gold-divider .et_pb_text_inner {
  padding: 0 !important;
}

/* Standalone <div class="gold-line-center"></div> Variante */
.gold-line-center {
  width: 60px;
  height: 2px;
  background: var(--sf-gold);
  margin: 24px auto;
  border: none;
}

/* ================================================================
   SF-SOCIAL-PROOF — Zahlen-Leiste (Shortcode)
   Verwendung: [sf_social_proof] + [sf_proof_item ...]
   ================================================================ */

.sf-social-proof {
  display: grid !important;
  gap: 0 !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

/* Spalten-Klassen (sf-cols-1..6) */
.sf-social-proof.sf-cols-1 { grid-template-columns: 1fr !important; }
.sf-social-proof.sf-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.sf-social-proof.sf-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.sf-social-proof.sf-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.sf-social-proof.sf-cols-5 { grid-template-columns: repeat(5, 1fr) !important; }
.sf-social-proof.sf-cols-6 { grid-template-columns: repeat(6, 1fr) !important; }

.sf-proof-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 24px !important;
}

/* Vertikale Trennlinien zwischen Items */
.sf-proof-dividers .sf-proof-item + .sf-proof-item {
  border-left: 1px solid var(--sf-rule) !important;
}

.sf-proof-number {
  font-family: var(--sf-serif) !important;
  font-size: clamp(32px, 4vw, 42px) !important;
  font-weight: 500 !important;
  color: var(--sf-purple) !important;
  line-height: 1.1 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.sf-proof-label {
  font-family: var(--sf-sans) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--sf-muted) !important;
  display: block !important;
  max-width: 160px !important;
}

@media (max-width: 768px) {
  /* Mobile: ueberschreibt jede Spalten-Klasse mit 2 Spalten */
  .sf-social-proof.sf-cols-1,
  .sf-social-proof.sf-cols-2,
  .sf-social-proof.sf-cols-3,
  .sf-social-proof.sf-cols-4,
  .sf-social-proof.sf-cols-5,
  .sf-social-proof.sf-cols-6 {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 0 !important;
    padding: 0 !important;
  }
  /* Trennlinien nur zwischen Spalten, nicht zwischen Zeilen */
  .sf-proof-dividers .sf-proof-item:nth-child(odd) {
    border-left: none !important;
  }
  .sf-proof-number {
    font-size: 28px !important;
  }
  /* Bei UNGERADER Item-Anzahl: letztes Item spannt volle Breite (zentriert) */
  .sf-social-proof.sf-cols-3 .sf-proof-item:nth-child(3),
  .sf-social-proof.sf-cols-5 .sf-proof-item:nth-child(5) {
    grid-column: 1 / -1 !important;
  }
  /* Trennlinie wegnehmen falls vollbreites Item zur "geraden" Position wuerde */
  .sf-social-proof.sf-cols-3 .sf-proof-item:nth-child(3),
  .sf-social-proof.sf-cols-5 .sf-proof-item:nth-child(5) {
    border-left: none !important;
  }
}

@media (max-width: 480px) {
  .sf-social-proof.sf-cols-1,
  .sf-social-proof.sf-cols-2,
  .sf-social-proof.sf-cols-3,
  .sf-social-proof.sf-cols-4,
  .sf-social-proof.sf-cols-5,
  .sf-social-proof.sf-cols-6 {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 0 !important;
  }
  .sf-proof-label {
    font-size: 12px !important;
  }
}

/* ================================================================
   SF-PRODUCT-PATH — Produkt-Pfad-Karten (Shortcode)
   Verwendung: [sf_product_path] + [sf_path_item ...]
   ================================================================ */

.sf-product-path {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 24px !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 20px 0 !important;
}

/* Pfeil nach jeder Karte — bei der letzten Karte wird er unten ausgeblendet */
.sf-path-with-arrow .sf-path-item::after {
  content: "→" !important;
  position: absolute !important;
  right: -28px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 24px !important;
  color: var(--sf-muted) !important;
  z-index: 1 !important;
}

/* Letzte Karte (egal ob <a> oder <div>): Pfeil verstecken.
   :last-of-type + :last-child kombiniert deckt beide Faelle ab. */
.sf-path-with-arrow .sf-path-item:last-of-type::after,
.sf-path-with-arrow .sf-path-item:last-child::after {
  display: none !important;
  content: none !important;
}

/* Karte */
.sf-path-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 32px 28px !important;
  border-radius: 16px !important;
  position: relative !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.sf-path-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(26,15,36,0.08) !important;
}

/* Purple-Variante */
.sf-path-purple {
  background: var(--sf-purple-wash) !important;
  border: 2px solid var(--sf-purple-light) !important;
}

/* Gold-Variante */
.sf-path-gold {
  background: rgba(201,169,110,0.08) !important;
  border: 2px solid var(--sf-gold-light) !important;
}

/* Kicker */
.sf-path-kicker {
  font-family: var(--sf-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.sf-path-purple .sf-path-kicker {
  color: var(--sf-purple) !important;
}

.sf-path-gold .sf-path-kicker {
  color: var(--sf-gold) !important;
}

/* Titel */
.sf-path-title {
  font-family: var(--sf-sans) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--sf-ink) !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Beschreibung */
.sf-path-desc {
  font-family: var(--sf-sans) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--sf-muted) !important;
  display: block !important;
}

@media (max-width: 768px) {
  .sf-product-path {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: center !important;
  }
  .sf-path-item {
    width: 100% !important;
    max-width: 360px !important;
  }
  /* Mobile-Pfeil zeigt nach unten — nach jeder Karte */
  .sf-path-with-arrow .sf-path-item::after {
    content: "↓" !important;
    right: auto !important;
    left: 50% !important;
    top: auto !important;
    bottom: -26px !important;
    transform: translateX(-50%) !important;
  }
  /* Letzte Karte: kein Pfeil */
  .sf-path-with-arrow .sf-path-item:last-of-type::after,
  .sf-path-with-arrow .sf-path-item:last-child::after {
    display: none !important;
    content: none !important;
  }
}

/* ================================================================
   SF-BTN-ROW — Zentrierte Button-Reihe (Row-Klasse)
   Verwendung: CSS-Klasse "sf-btn-row" auf die Divi-Row.
   Spalten werden Auto-Breite — Buttons sitzen zentriert mit Gap.
   ================================================================ */

.sf-btn-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.sf-btn-row .et_pb_column {
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sf-btn-row .et_pb_button_module_wrapper {
  display: inline-flex !important;
}

.sf-btn-row .et_pb_button {
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  .sf-btn-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .sf-btn-row .et_pb_column {
    width: 100% !important;
    max-width: 320px !important;
  }
  .sf-btn-row .et_pb_button {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ================================================================
   SF-BTN-OUTLINE-LIGHT — Ghost-Button fuer dunkle Hintergruende
   Verwendung: CSS-Klasse "sf-btn-outline-light" auf Button-Modul.
   Fuer sf-bg-dark, sf-bg-hero etc.
   ================================================================ */

.sf-btn-outline-light .et_pb_button,
html body #page-container .sf-btn-outline-light .et_pb_button {
  background: transparent !important;
  background-image: none !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  border-radius: 50px !important;
  color: #FFFFFF !important;
  font-family: var(--sf-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 14px 32px !important;
  letter-spacing: 0.3px !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important;
}

.sf-btn-outline-light .et_pb_button:hover,
html body #page-container .sf-btn-outline-light .et_pb_button:hover {
  background: rgba(255,255,255,0.10) !important;
  background-image: none !important;
  border-color: rgba(255,255,255,0.6) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

/* Pfeil-Icon (Divi-Standard) — heller machen */
.sf-btn-outline-light .et_pb_button::after {
  color: #FFFFFF !important;
  opacity: 0.7 !important;
}

.sf-btn-outline-light .et_pb_button:hover::after {
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .sf-btn-outline-light .et_pb_button,
  html body #page-container .sf-btn-outline-light .et_pb_button {
    font-size: 14px !important;
    padding: 12px 28px !important;
  }
}

/* ================================================================
   SF-DUO-PROFILE — Duo-Profil nebeneinander (Row-Klasse)
   Verwendung: CSS-Klasse "sf-duo-profile" auf 2-Spalten Divi-Row.
   Vertikale Gold-Linie + Lila-Herz-Icon zwischen den Spalten.
   Gold-Bullets auf alle <li> innerhalb der Row.
   ================================================================ */

.sf-duo-profile,
html body #page-container .sf-duo-profile {
  background: var(--sf-purple-wash) !important;
  border-radius: 20px !important;
  padding: 48px 40px !important;
  position: relative !important;
  overflow: visible !important;
}

/* Vertikale Linie zwischen den Spalten */
.sf-duo-profile::before {
  content: "" !important;
  position: absolute !important;
  top: 48px !important;
  bottom: 48px !important;
  left: 50% !important;
  width: 1px !important;
  background: var(--sf-gold-light) !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
}

/* Herz-Icon mittig auf der Linie */
.sf-duo-profile::after {
  content: "\1F49C" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 40px !important;
  height: 40px !important;
  background: #FFFFFF !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  line-height: 40px !important;
  text-align: center !important;
  z-index: 2 !important;
  box-shadow: 0 2px 8px rgba(26, 15, 36, 0.08) !important;
}

/* Spalten-Padding */
.sf-duo-profile .et_pb_column {
  padding: 0 32px !important;
}

.sf-duo-profile .sf-kicker {
  margin-bottom: 8px !important;
}

.sf-duo-profile h3 {
  font-family: var(--sf-serif) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  color: var(--sf-ink) !important;
  margin-bottom: 16px !important;
}

.sf-duo-profile .et_pb_text_inner > p:first-of-type {
  font-size: 15px !important;
  color: var(--sf-ink-soft) !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
}

/* Gold-Bullet-Points auf alle <li> */
.sf-duo-profile li {
  list-style: none !important;
  position: relative !important;
  padding-left: 24px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-size: 15px !important;
  color: var(--sf-ink-soft) !important;
  line-height: 1.5 !important;
}

.sf-duo-profile li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 16px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--sf-gold) !important;
}

.sf-duo-profile ul {
  padding-left: 0 !important;
  margin: 0 !important;
}

/* Variante: ohne Herz */
.sf-duo-profile.sf-duo-no-heart::after {
  display: none !important;
}

@media (max-width: 980px) {
  .sf-duo-profile,
  html body #page-container .sf-duo-profile {
    padding: 32px 24px !important;
    border-radius: 16px !important;
  }

  /* Vertikale Linie wird horizontal */
  .sf-duo-profile::before {
    top: 50% !important;
    bottom: auto !important;
    left: 24px !important;
    right: 24px !important;
    width: auto !important;
    height: 1px !important;
    transform: translateY(-50%) !important;
  }

  .sf-duo-profile::after {
    top: 50% !important;
  }

  .sf-duo-profile .et_pb_column {
    padding: 0 8px 24px !important;
  }

  .sf-duo-profile .et_pb_column:last-child {
    padding-top: 24px !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 768px) {
  .sf-duo-profile,
  html body #page-container .sf-duo-profile {
    padding: 24px 20px !important;
  }

  .sf-duo-profile h3 {
    font-size: 26px !important;
  }

  .sf-duo-profile li {
    font-size: 14px !important;
  }
}

/* ================================================================
   BUGFIX: H2 em GOLD auf dunklen Hintergruenden
   Problem: <em> erbte Purple statt Gold auf Dark BG.
   Betrifft: sf-bg-dark, sf-bg-hero, sf-page-hero
   ================================================================ */

.sf-bg-dark h2 em,
.sf-bg-dark h2 i,
.sf-bg-hero h2 em,
.sf-bg-hero h2 i,
.sf-page-hero h2 em,
.sf-page-hero h2 i,
html body #page-container .sf-bg-dark h2 em,
html body #page-container .sf-bg-dark h2 i,
html body #page-container .sf-bg-hero h2 em,
html body #page-container .sf-bg-hero h2 i,
html body #page-container .sf-page-hero h2 em,
html body #page-container .sf-page-hero h2 i {
  color: var(--sf-gold) !important;
}

/* Auch innerhalb Divi Text-Inner-Wrapper */
.sf-bg-dark .et_pb_text_inner h2 em,
.sf-bg-dark .et_pb_text_inner h2 i,
.sf-bg-hero .et_pb_text_inner h2 em,
.sf-bg-hero .et_pb_text_inner h2 i,
.sf-page-hero .et_pb_text_inner h2 em,
.sf-page-hero .et_pb_text_inner h2 i {
  color: var(--sf-gold) !important;
}

/* ================================================================
   TESTIMONIALS: Masonry-Grid + Cards + Filter + Photo Breaks
   ================================================================ */

.sf-testimonials-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2rem;
  justify-content: center;
}

.sf-filter-pill {
  font-family: var(--sf-sans);
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 50px;
  border: 1px solid var(--sf-rule);
  background: #fff;
  color: var(--sf-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sf-filter-pill:hover {
  border-color: var(--sf-purple);
  color: var(--sf-purple);
}

.sf-filter-pill.sf-filter-active {
  background: var(--sf-purple);
  color: #fff;
  border-color: var(--sf-purple);
}

/* --- Masonry-Grid via CSS columns --- */
.sf-testimonials-grid { column-gap: 20px; }
.sf-masonry-2 { columns: 2; }
.sf-masonry-3 { columns: 3; }

@media (max-width: 980px) {
  .sf-masonry-3 { columns: 2; }
}
@media (max-width: 680px) {
  .sf-masonry-3,
  .sf-masonry-2 { columns: 1; }
}

/* --- Card --- */
.sf-testimonial-card {
  break-inside: avoid;
  margin-bottom: 20px;
  border-radius: 12px;
  border: 1px solid var(--sf-rule);
  padding: 1.5rem;
  background: #fff;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sf-testimonial-card.sf-hidden,
.sf-testimonial-card.sf-filter-hidden { display: none; }

.sf-testimonial-card.sf-featured {
  border-color: var(--sf-gold);
  border-width: 2px;
}

/* --- Text Testimonial --- */
.sf-testimonial-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--sf-ink);
  margin-bottom: 1rem;
}

.sf-testimonial-text.sf-truncated {
  max-height: 140px;
  overflow: hidden;
  position: relative;
}

.sf-testimonial-text.sf-truncated::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, #fff);
  pointer-events: none;
}

/* --- Mehr lesen / Weniger anzeigen Buttons --- */
.sf-read-more,
.sf-read-less {
  font-size: 13px;
  color: var(--sf-purple);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 1rem;
  font-weight: 500;
}
.sf-read-more:hover,
.sf-read-less:hover { text-decoration: underline; }

.sf-read-less { display: none; }

/* --- Expanded: Karte spannt 2 Masonry-Spalten --- */
.sf-testimonial-card.sf-expanded {
  column-span: all;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  padding: 2rem;
  border-color: var(--sf-purple);
  border-width: 1px;
}

.sf-testimonial-card.sf-expanded .sf-testimonial-text {
  grid-column: 1 / -1;
  max-height: none;
  overflow: visible;
  font-size: 15px;
  line-height: 1.8;
  column-count: 2;
  column-gap: 32px;
}

.sf-testimonial-card.sf-expanded .sf-testimonial-text::after { display: none; }

.sf-testimonial-card.sf-expanded .sf-read-more  { display: none; }
.sf-testimonial-card.sf-expanded .sf-read-less,
.sf-testimonial-card.sf-expanded .sf-testimonial-footer {
  display: block;
  grid-column: 1 / -1;
}

.sf-testimonial-card.sf-expanded .sf-testimonial-footer {
  display: flex;
}

@media (max-width: 680px) {
  .sf-testimonial-card.sf-expanded {
    column-span: none;
    display: block;
    padding: 1.5rem;
  }
  .sf-testimonial-card.sf-expanded .sf-testimonial-text { column-count: 1; }
}

/* --- Video Card --- */
.sf-type-video { padding: 0; overflow: hidden; }

.sf-video-wrapper { position: relative; cursor: pointer; }

.sf-video-placeholder {
  position: relative;
  min-height: 180px;
  background: var(--sf-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-video-placeholder img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.7;
}

.sf-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.sf-video-play-btn:hover { transform: translate(-50%, -50%) scale(1.1); }

.sf-type-video .sf-testimonial-footer,
.sf-type-screenshot .sf-testimonial-footer {
  padding: 1rem 1.5rem;
}

/* --- Screenshot Card --- */
.sf-screenshot-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px 12px 0 0;
}

/* --- Footer (Avatar + Name + Programm) --- */
.sf-testimonial-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sf-testimonial-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sf-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

/* --- Programm-spezifische Akzente: obere Linie + Avatar-Farbe ---
   data-program enthaelt die Programm-Slug(s) (kommagetrennt). *= matcht Teilstrings. */
.sf-testimonial-card { border-top: 3px solid var(--sf-purple); }

.sf-testimonial-card[data-program*="amazing-grace"]                       { border-top-color: var(--sf-color-amazing-grace); }
.sf-testimonial-card[data-program*="amazing-grace"] .sf-testimonial-avatar { background: var(--sf-color-amazing-grace); }

.sf-testimonial-card[data-program*="retreats"]                       { border-top-color: var(--sf-color-retreats); }
.sf-testimonial-card[data-program*="retreats"] .sf-testimonial-avatar { background: var(--sf-color-retreats); }

.sf-testimonial-card[data-program*="sacred-feminin"]                       { border-top-color: var(--sf-color-sacred-feminin); }
.sf-testimonial-card[data-program*="sacred-feminin"] .sf-testimonial-avatar { background: var(--sf-color-sacred-feminin); }

.sf-testimonial-card[data-program*="workshops"]                       { border-top-color: var(--sf-color-workshops); }
.sf-testimonial-card[data-program*="workshops"] .sf-testimonial-avatar { background: var(--sf-color-workshops); }

.sf-testimonial-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--sf-ink);
}

.sf-testimonial-program {
  display: block;
  font-size: 12px;
  color: var(--sf-muted);
}

/* --- Load More --- */
.sf-load-more-wrap { text-align: center; margin-top: 2rem; }

.sf-load-more-btn {
  font-family: var(--sf-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 32px;
  border-radius: 50px;
  border: 1px solid var(--sf-rule);
  background: #fff;
  color: var(--sf-purple);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sf-load-more-btn:hover {
  background: var(--sf-purple-wash);
  border-color: var(--sf-purple);
}

/* --- Photo Break --- */
.sf-photo-break {
  margin: 3rem 0;
  border-radius: 12px;
  overflow: hidden;
}

.sf-photo-strip {
  display: flex;
  gap: 4px;
  height: var(--sf-photo-height, 220px);
}

.sf-photo-strip .sf-photo-item {
  flex: 1;
  overflow: hidden;
}

.sf-photo-strip .sf-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.sf-photo-strip .sf-photo-item:hover img { transform: scale(1.03); }

.sf-photo-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  height: var(--sf-photo-height, 220px);
}

.sf-photo-collage .sf-photo-item:first-child { grid-row: span 2; }

.sf-photo-collage .sf-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 680px) {
  .sf-photo-strip {
    flex-direction: column;
    height: auto;
  }
  .sf-photo-strip .sf-photo-item { height: 200px; }
}