/* Themify Customize Styling */
body {	
	font-family: "Source Sans 3";	font-weight:400;

	color: #3a3532; 
}
h1 {	
	font-family: "Fraunces";	font-weight:400;

	color: #3a3532; 
}
h2 {	
	font-family: "Fraunces";	font-weight:400;

	color: #3a3532; 
}
h3 {	
	font-family: "Fraunces";	font-weight:400;

	color: #3a3532; 
}
h4 {	
	font-family: "Fraunces";	font-weight:400;

	color: #3a3532; 
}
h5 {	
	font-family: "Fraunces";	font-weight:400;

	color: #3a3532; 
}
h6 {	
	font-family: "Fraunces";	font-weight:400;

	color: #3a3532; 
}

/* Themify Custom CSS */
/* ===================================================================
   Behrens OnePager – Custom CSS
   Einfügen unter: WordPress Customizer → Zusätzliches CSS
   (oder Themify Theme Options, falls dort vorhanden)

   Passend zur Themify-Import-Datei ab v4 (BHB_themify_builder_import_v4.zip):
   Buttons, Icons und die Hero-Row tragen jetzt EIGENE CSS-Klassen
   (btn-primary, btn-secondary, icon-circle, row-hero), die direkt in den
   Modulen gesetzt sind. Kein Raten von Theme-Klassen mehr nötig – diese
   CSS-Regeln greifen 1:1 gegen genau diese selbst vergebenen Klassen.
   =================================================================== */

/* Schriften: werden über den Customizer gesetzt (Fraunces/Source Sans), daher
   hier bewusst kein @import/font-family mehr – Dopplung vermeiden. */

/* 2. Button-Stil: gefüllt (primär) vs. Outline (sekundär)
   Themify erlaubt bei mehreren Buttons im selben Modul nur eine "id" pro
   Button (keine "class") – deshalb hat jeder Button eine eigene, eindeutige
   ID mit gemeinsamem Präfix (cta-primary-*, cta-secondary-*), die wir hier
   per Attribut-Selektor ([id^="..."]) gemeinsam ansprechen. */
[id^="cta-primary"] {
  background-color: #8B7BA8 !important;
  border: 2px solid #8B7BA8 !important;
  color: #ffffff !important;
  border-radius: 6px;
  padding: 14px 28px;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
[id^="cta-primary"] * {
  color: #ffffff !important;
}
[id^="cta-primary"]:hover {
  background-color: #6F5F8E !important;
  border-color: #6F5F8E !important;
  transform: translateY(-1px);
}

[id^="cta-secondary"] {
  background-color: transparent !important;
  border: 2px solid #8B7BA8 !important;
  color: #8B7BA8 !important;
  border-radius: 6px;
  padding: 14px 28px;
}
[id^="cta-secondary"] * {
  color: #8B7BA8 !important;
}
[id^="cta-secondary"]:hover {
  background-color: #8B7BA8 !important;
}
[id^="cta-secondary"]:hover * {
  color: #ffffff !important;
}

/* 3. Icons in farbiger Kreisfläche statt nackter Glyphe
   ZURÜCKGESTELLT: Ob das Themify-Icon-Modul ebenfalls nur "id" statt "class"
   erlaubt (wie beim Buttons-Modul), ist noch nicht bestätigt. Bevor wir hier
   wieder etwas Falsches raten: bitte kurz sagen, ob Icon-Module bei euch
   eine eigene CSS-Klasse bekommen können oder auch nur eine ID – dann
   bauen wir das genauso zielsicher wie die Buttons oben. */

/* 4. Karten-/Spalten-Hover (Leistungen, Team, Soforthilfe)
   Hinweis: .tb-column ist eine übliche, aber nicht selbst vergebene Klasse –
   falls Karten nicht reagieren, im Inspektor die echte Spalten-Klasse prüfen. */
.tb-column {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tb-column:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(58, 53, 50, 0.08);
}

/* 5. FAQ-Akkordeon etwas aufwerten
   Hinweis: .tb-accordion-title ist ebenfalls eine übliche, nicht selbst
   vergebene Klasse – im Inspektor prüfen, ggf. anpassen. */
.tb-accordion-title {
  font-weight: 600;
  padding: 18px 20px;
  border-bottom: 1px solid #E4DCD3;
}
.tb-accordion-title:hover {
  color: #8B7BA8;
}

/* 6. Sanfter Wellenschwung am Ende der Hero-Section (eigene Klasse row-hero) */
.row-hero {
  position: relative;
}
.row-hero::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0; width: 100%; height: 60px;
  background: #F7F3EC;
  clip-path: ellipse(60% 100% at 50% 100%);
}