/* Divi-5-Seiten (Best Practice): nur, was Divi nicht selbst kann. Gestaltung kommt aus Divi. */

/* Neuer Header/Footer des Child Themes sitzt korrekt ueber dem Divi-Inhalt */
html body.sfb-body { overflow-x: clip !important; overflow-y: visible !important; }
html body.sfb-body #page-container { padding-top: 0 !important; margin-top: 0 !important; background: transparent; overflow: visible !important; }
body.sfb-body #et-main-area,
body.sfb-body #main-content { background: transparent; }
body.sfb-body #main-content .container::before { display: none; }

/* Hervorgehobenes Wort in Ueberschriften: <span class="sf-hl">…</span> (Divi-Ueberschriften koennen einzelne Woerter nicht einfaerben) */
.sf-hl { color: var(--gcid-primary-color); }


/* Divi-Standard: h1-h6 haben padding-bottom:10px. Im SF-Design steuern Container-Abstaende (gap) den Rhythmus. */
.et_pb_module_header { padding-bottom: 0; }

/* Post Filter: Optionen als Knopfreihe (Divi ordnet die Liste fest untereinander an). */
.et_pb_post_filter__item-options-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }

/* Artikeltexte (Preset "SF Artikel"): Abstand vor Zwischenueberschriften im Fliesstext (in Divi nicht einstellbar). */
.sf-artikel h2 { margin-top: 1.8em; }
.sf-artikel :is(h3, h4) { margin-top: 1.6em; }
.sf-artikel :is(h2, h3, h4):first-child { margin-top: 0; }


/* Mobiles Menue (Divi-Menuemodul mit Klasse sf-mobilmenu, Menue "Hauptmenue mobil"):
   Knopf "Menue" als Pille, aufgeklappte Liste als abgerundetes Feld, letzter Eintrag (Klasse sf-menu-cta) als Button.
   Divi bietet fuer die mobile Ansicht nur Farben und Schriftgroessen. */
.sf-mobilmenu .mobile_nav { display: flex; flex-direction: column; align-items: flex-end; }
.sf-mobilmenu .mobile_menu_bar { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--gcid-5c77b000-1fbd-4fa6-9f4d-771d5427a724); cursor: pointer; }
.sf-mobilmenu .mobile_menu_bar::before { position: static; font-size: 20px; line-height: 1; color: var(--gcid-833ef8c9-15a9-4548-ac87-6342af1f0884); }
.sf-mobilmenu .mobile_menu_bar::after { content: "Men\00FC"; font: 500 15px/1 Rubik, sans-serif; color: var(--gcid-833ef8c9-15a9-4548-ac87-6342af1f0884); }
.sf-mobilmenu .et_mobile_menu { top: calc(100% + 12px); left: 0; right: 0; width: 100%; padding: 8px; border: 0; border-radius: 20px; box-shadow: none; background: var(--gcid-5c77b000-1fbd-4fa6-9f4d-771d5427a724); }
.sf-mobilmenu .et_mobile_menu li a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border: 0; border-radius: 14px; font: 500 17px/1.2 Rubik, sans-serif; color: var(--gcid-833ef8c9-15a9-4548-ac87-6342af1f0884); }
.sf-mobilmenu .et_mobile_menu li a:hover { background: var(--gcid-8aab01fd-d53b-401e-8349-17877b2b220b); opacity: 1; }
.sf-mobilmenu .et_mobile_menu li.current-menu-item > a { color: var(--gcid-9949ee8c-fdad-4615-b466-2da3715cfef6) !important; }
.sf-mobilmenu .et_mobile_menu li.sf-menu-cta > a { justify-content: center; margin-top: 6px; border-radius: 999px; background: var(--gcid-833ef8c9-15a9-4548-ac87-6342af1f0884); color: var(--gcid-5c77b000-1fbd-4fa6-9f4d-771d5427a724) !important; }
.sf-mobilmenu .et_mobile_menu li.sf-menu-cta > a:hover { background: var(--gcid-9949ee8c-fdad-4615-b466-2da3715cfef6); }