/*
================================================================
CUSTOM.CSS FÜR IHRE HELIX/SPPB WEBSEITE
(Version 3: Mit _local Namen und TTF-Fallback)
================================================================

INHALT:
1. LOKALE SCHRIFTART-DEFINITIONEN (DSGVO-KONFORM)
   - @font-face Definitionen für 'Lato_local' (WOFF2 + TTF)
   - @font-face Definitionen für 'Montserrat_local' (WOFF2 + TTF)

2. GLOBALE ANWENDUNGSREGELN (AUFGABE A)
   - Zuweisung für Body, Navigation und Überschriften

3. ZUKÜNFTIGE ANPASSUNGEN
   - Platzhalter für weitere Design-Regeln

================================================================
*/

/* ----------------------------------------------------------------
1. LOKALE SCHRIFTART-DEFINITIONEN (BLOCK 1)
----------------------------------------------------------------
*/

/* --- LATO --- */
/* lato-100 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato_local';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/lato-v24-latin-100.woff2') format('woff2'), 
       url('../fonts/lato-v24-latin-100.ttf') format('truetype'); 
}
/* lato-300 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato_local';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/lato-v24-latin-300.woff2') format('woff2'), 
       url('../fonts/lato-v24-latin-300.ttf') format('truetype'); 
}
/* lato-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato_local';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v24-latin-regular.woff2') format('woff2'), 
       url('../fonts/lato-v24-latin-regular.ttf') format('truetype'); 
}
/* lato-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato_local';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lato-v24-latin-700.woff2') format('woff2'), 
       url('../fonts/lato-v24-latin-700.ttf') format('truetype'); 
}
/* lato-900 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato_local';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/lato-v24-latin-900.woff2') format('woff2'), 
       url('../fonts/lato-v24-latin-900.ttf') format('truetype'); 
}


/* --- MONTSERRAT --- */
/* montserrat-100 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat_local';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/montserrat-v31-latin-100.woff2') format('woff2'), 
       url('../fonts/montserrat-v31-latin-100.ttf') format('truetype'); 
}
/* montserrat-200 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat_local';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/montserrat-v31-latin-200.woff2') format('woff2'), 
       url('../fonts/montserrat-v31-latin-200.ttf') format('truetype'); 
}
/* montserrat-300 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat_local';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat-v31-latin-300.woff2') format('woff2'), 
       url('../fonts/montserrat-v31-latin-300.ttf') format('truetype'); 
}
/* montserrat-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat_local';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2'), 
       url('../fonts/montserrat-v31-latin-regular.ttf') format('truetype'); 
}
/* montserrat-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat_local';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-v31-latin-500.woff2') format('woff2'), 
       url('../fonts/montserrat-v31-latin-500.ttf') format('truetype'); 
}
/* montserrat-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat_local';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v31-latin-600.woff2') format('woff2'), 
       url('../fonts/montserrat-v31-latin-600.ttf') format('truetype'); 
}
/* montserrat-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat_local';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v31-latin-700.woff2') format('woff2'), 
       url('../fonts/montserrat-v31-latin-700.ttf') format('truetype'); 
}
/* montserrat-800 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat_local';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/montserrat-v31-latin-800.woff2') format('woff2'), 
       url('../fonts/montserrat-v31-latin-800.ttf') format('truetype'); 
}
/* montserrat-900 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat_local';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/montserrat-v31-latin-900.woff2') format('woff2'), 
       url('../fonts/montserrat-v31-latin-900.ttf') format('truetype'); 
}
    

/* ----------------------------------------------------------------
2. GLOBALE ANWENDUNGSREGELN (BLOCK 2 - AUFGABE A)
----------------------------------------------------------------
*/

/* Diese Regeln setzen die globalen Standards gemäß "Aufgabe A"
   und überschreiben die "Arial"-Einstellung aus dem Helix-Backend.
*/

/* Body Font: Lato 400 */
/* Gilt für alle normalen Textabsätze (p), Listen (li) etc. */
body, .sp-page-builder .page-content {
    font-family: 'Lato_local', Arial, sans-serif; /* Weist Lato_local zu, mit Fallback auf Arial */
    font-weight: 400;
    font-size: 17px; 
}

/* Navigation Font: Montserrat 500 */
/* Zielt spezifisch auf die Hauptnavigation von Helix */
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
    font-family: 'Montserrat_local', Arial, sans-serif;
    font-weight: 500;
}

/* Headings (H1-H6) Font: Montserrat 700 */
/* Gilt für alle Überschriften */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat_local', Arial, sans-serif;
    font-weight: 700;
}


/* ----------------------------------------------------------------
3. ZUKÜNFTIGE ANPASSUNGEN
----------------------------------------------------------------
*/

/* Fügen Sie hier zukünftige CSS-Regeln hinzu.
   
   BEISPIEL (derzeit auskommentiert / inaktiv):
   
   .btn, button, .sp-page-builder .sppb-btn {
       font-family: 'Montserrat_local', Arial, sans-serif;
       font-weight: 600; 
   }
*/

/*
============================================================
CUSTOM CSS FÜR BEWEGT BERATUNG UND COACHING
============================================================
*/

/* --- SCHRIFTEN (LOKAL) --- */
/* Hier sollten Ihre @font-face Regeln für Lato & Montserrat stehen,
   die Sie bereits eingefügt haben. Falls nicht, fügen Sie sie hier ganz am Anfang ein.
   Beispiel:
   @font-face {
     font-family: 'Lato_local';
     src: url('../fonts/lato-v24-latin-regular.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
   }
   ...weitere Font-Regeln...
*/

/*
============================================================
GLOBALE KOMPONENTEN
============================================================
*/

/*
============================================================
HEADER: LOGO PADDING 
============================================================
*/

/*
============================================================
HEADER: RESPONSIVE ANPASSUNGEN (FINALE 4-BLOCK-STRUKTUR)
============================================================
*/

/* === 1. Desktop (992px und GRÖSSER) === */
@media (min-width: 992px) {
    #sp-logo {
        padding-top: 12px; /* Dein Wert für Desktop */
    }
}

/* === 2. Tablet Hochformat (768px bis 991px) === */
/* WUNSCH: Logo höher, Menü ist OK */
@media (min-width: 768px) and (max-width: 991px) {
    #sp-logo {
        margin-top: 8px;  /* TESTWERT: Schiebt Logo höher. Passe -5px, -8px etc. an */
        padding-top: 0px;    /* Setzt Desktop-Padding zurück */
    }
    #sp-menu {
        margin-top: -4px;     /* Stellt sicher, dass Menü auf Standard ist */
        padding-top: 0px;
    }
}

/* === 3. Smartphone Querformat/Groß (576px bis 767px) === */
/* WUNSCH: Logo UND Menü tiefer */
@media (min-width: 576px) and (max-width: 767px) {
    #sp-logo {
        padding-top: 10px; /* TESTWERT: Schiebt Logo tiefer */
    }
    #sp-menu {
        margin-top: 0px;     /* WICHTIG: Setzt die Regel aus Block 4 zurück! */
        padding-top: 0px; /* TESTWERT: Schiebt Menü tiefer (auf Logo-Höhe) */
    }
}

/* === 4. Smartphone Hochformat (575px und KLEINER) === */
/* Dein alter Wunsch: Menü höher, da es zu tief war */
@media (max-width: 575px) {
    #sp-menu {
        margin-top: -10px; /* Deine alte Regel für Hochformat */
    }
    /* Logo ist hier OK (keine Regel) */
}

/* Setzt die Standard-Farbe für H2- und H3-Überschriften auf Waldgrün */
h2.sppb-addon-title,
h3.sppb-addon-title {
    color: #2E4039 !important;
}

/* Styling für unseren 'Ghost' Button (überall wiederverwendbar) */
.btn-ghost-green .sppb-btn {
    display: inline-block;
    background-color: transparent !important;
    color: #2E4039 !important; /* Waldgrün */
    border: 2px solid #2E4039 !important; /* NEU: Waldgrün statt Salbeigrün */
    padding: 8px 25px !important;
    font-size: 14px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Der Hover-Block bleibt unverändert */
.btn-ghost-green .sppb-btn:hover {
    background-color: #2E4039 !important;
    color: #FFFFFF !important;
    border-color: #2E4039 !important;
}

/* KORREKTUR: Verhindert, dass die Button-Zeile selbst eine Hintergrundfarbe bekommt */
.btn-primary {
    background-color: transparent !important;
}

/* Styling für den primären Button (FINAL) */
.btn-primary .sppb-btn {
    display: inline-block;
    background-color: #D4A259 !important;
    color: #2E4039 !important;
    border: 2px solid transparent !important; /* WICHTIG: Verhindert das "Springen" */
    border-radius: 4px;
    padding: 15px 35px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.btn-primary .sppb-btn:hover {
    background-color: transparent !important;
    color: #D4A259 !important;
    border: 2px solid #D4A259 !important;
}

/* Styling für zentrierte, schmalere Einleitungs-Absätze */
.intro-paragraph .sppb-addon-content {
  max-width: 750px; /* Begrenzt die Breite für bessere Lesbarkeit */
  margin: 0 auto; /* Zentriert den Block horizontal */
  font-size: 18px; /* Macht den Text eine Spur größer als Standard-Fließtext */
  text-align: center;
}

/* Styling für einen dezenten Sektions-Trenner */
.section-divider .sppb-divider {
    border-top: 1px solid rgba(46, 64, 57, 0.2) !important; /* Waldgrün mit 20% Deckkraft */
    max-width: 750px; /* Die gleiche Breite wie unsere Einleitungstexte */
    margin: 60px auto; /* Schafft einen großzügigen, sauberen Abstand */
}

/* Korrektur: Fügt einen oberen Abstand (Offset) für ALLE
  SP Page Builder Sektionen (divs) hinzu, die eine ID haben.
*/
div.sppb-section[id] {
  scroll-margin-top: 100px;
}

/*
============================================================
FUNDAMENT (PHASE 1)
============================================================
*/

/* Footer-Zentrierung */
#sp-footer .sp-module-content {
  text-align: center;
}

/* Sicherheitsnetz: Weißen Hintergrund bei Textabsätzen entfernen */
#sp-main-body p,
.sp-component p,
.sppb-addon-content p {
  background-color: transparent !important;
  background: transparent !important;
}


/*
============================================================
STARTSEITE HERO-SEKTION (Sektion 1)
============================================================
*/

.hero-section { color: #FFFFFF; }

.hero-section .sppb-addon-header .sppb-addon-title {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.2;
}

.hero-section .sppb-addon-text-block .sppb-addon-content {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto 35px auto;
}

/* Text-Schatten für bessere Lesbarkeit auf dem Hero-Bild */
.hero-section .sppb-addon-header .sppb-addon-title,
.hero-section .sppb-addon-text-block .sppb-addon-content {
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
}

/*
============================================================
STARTSEITE SEKTION 2: PROBLEM-ANSPRACHE
============================================================
*/

.problem-section .sppb-addon-header .sppb-addon-title {
  color: #2E4039 !important;
  font-size: 36px;
}

.problem-section .sppb-addon-text-block .sppb-addon-content {
  color: #2E4039;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  line-height: 1.7;
}


/*
============================================================
STARTSEITE SEKTION 3: LÖSUNGS-VORSTELLUNG (USP)
============================================================
*/

.solution-section .sppb-addon-header .sppb-addon-title {
  color: #2E4039 !important;
  font-size: 36px;
}

.solution-section .sppb-addon-text-block .sppb-addon-content {
  color: #3D3D3D;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  line-height: 1.7;
}

/*
============================================================
STARTSEITE SEKTION 4: LEISTUNGS-TEASER (Final)
============================================================
*/

/* Farbe der Hauptüberschrift dieser Sektion */
.feature-section .sppb-addon-header .sppb-addon-title {
  color: #2E4039 !important; /* Unser Waldgrün */
}

.feature-box-custom .sppb-feature-title,
.feature-box-custom .sppb-feature-title a {
  color: #2E4039 !important; /* Titel Farbe: Waldgrün */
  font-size: 22px !important;
  margin-top: 20px;
  margin-bottom: 15px;
  transition: color 0.3s ease;
}

.feature-box-custom .sppb-feature-content {
  color: #3D3D3D !important; /* Text Farbe: Standard-Grau */
  font-size: 17px;
  line-height: 1.6;
}

/*
============================================================
STARTSEITE SEKTION 5: ÜBER-MICH-TEASER
============================================================
*/

/* Textfarben für Überschrift und Fließtext auf Salbei-Hintergrund */
.about-teaser-section .sppb-addon-header .sppb-addon-title,
.about-teaser-section .sppb-addon-text-block .sppb-addon-content {
    color: #2E4039 !important; /* Waldgrün */
}

.about-teaser-section .sppb-addon-header .sppb-addon-title {
    font-size: 36px;
}


/*
============================================================
STARTSEITE SEKTION 6: FINALER CALL-TO-ACTION
============================================================
*/

/* Globale Textfarbe und Überschrift in dieser Sektion */
.final-cta-section {
  color: #FFFFFF;
}
.final-cta-section .sppb-addon-header .sppb-addon-title,
.final-cta-section .sppb-addon-text-block .sppb-addon-content {
  color: #FFFFFF !important;
}

.final-cta-section .sppb-addon-header .sppb-addon-title {
  font-size: 38px;
}


/*
============================================================
SEITE: COACHING & BERATUNG
============================================================
*/

/* Sektion 1: Einleitung */
.page-hero-section .sppb-addon-header .sppb-addon-title {
  color: #FFFFFF !important;
  font-size: 48px;
}
.page-hero-section .sppb-addon-text-block .sppb-addon-content {
  color: #FFFFFF;
  font-size: 19px;
  max-width: 800px;
  margin: 0 auto;
}

/* Sektion 3: Nutzen-Listen mit Custom Bullet Points */
.sppb-addon-text-block ul {
  list-style: none;
  padding-left: 0;
}
.sppb-addon-text-block ul li {
  padding-left: 35px;
  position: relative;
  margin-bottom: 15px;
  font-size: 17px;
}
.sppb-addon-text-block ul li::before {
  content: '✔'; /* Sie können hier auch andere Symbole verwenden */
  position: absolute;
  left: 0;
  top: 0;
  color: #D4A259; /* Unser Gold-Ton */
  font-size: 20px;
}

/* Einleitungs-Text vor den Kernthemen */
.topic-intro .sppb-addon-content {
  max-width: 750px;
  margin: 0 auto;
  font-size: 18px;
}

/* Ergänzung für Bilder-Box Shadow */
/* Der Add-on-Container dient nur noch als "Maske" und passt sich dem Bild an */
.image-card-style {
    display: inline-block; /* WICHTIG: Container schrumpft auf die Größe des Bildes */
    border-radius: 8px;
    /*overflow: hidden;      Erzwingt die Rundung des Bildes darin */
    line-height: 0;       /* Verhindert unerwünschten Leerraum */
}

/* Der Schatten wird jetzt direkt auf das Bild-Element angewendet */
.image-card-style img {
    width: 100%;
    vertical-align: middle;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

@media (max-width: 1199px) {
/* --- ANPASSUNG FÜR "DAS FUNDAMENT" (usp-root-section) AUF TABLET & SMARTPHONE (FINALE VERSION) --- */

    /* Setzt die Reihenfolge: Text (Spalte 2) kommt VOR Bild (Spalte 1) */
    .usp-root-section .fundament-text-col { /* Zielt auf benannte Text-Spalte */
        order: 1 !important; /* Kommt zuerst */
        margin-bottom: 40px !important; /* Abstand zum Bild darunter */
    }
    .usp-root-section .fundament-image-col { /* Zielt auf benannte Bild-Spalte */
        order: 2 !important; /* Kommt danach */
        margin-bottom: 0 !important; /* Kein Abstand nach unten */
        text-align: center; /* Zentriert das Bild-Addon darin (Fallback) */
    }

    /* Begrenzt Breite und zentriert das Bild-Addon selbst */
    .usp-root-section .fundament-image-col{
         display: block !important;
         max-width: 600px !important; /* Breite für Tablet */
         width: 100%;
         margin: 0 auto !important; /* Zentriert das Addon */
    }

    /* Begrenzt Breite und zentriert das Text-Addon selbst */
    .usp-root-section .fundament-text-col{
        display: block !important;
        max-width: 750px !important; /* Maximale Breite für Text */
        width: 100%;
        margin: 0 auto !important; /* Zentriert das Addon */
    }
    /* Stellt sicher, dass Text IN der Box linksbündig bleibt */
    .usp-root-section .fundament-text-col .sppb-addon-text-block{
        text-align: left !important;
    }
}

/*
============================================================
SEITE: COACHING & BERATUNG - SEKTION 4
============================================================
*/

/* Sektion 4: Prozess-Schritte (Feature Boxen) */
.process-section .sppb-feature-box .sppb-icon .sppb-icon-wow i {
    color: #2E4039 !important; /* Waldgrün statt Gold für einen seriöseren Look */
}

@media (max-width: 991px) {
    /* --- ANPASSUNG FÜR "Four Core Topics" BILD (Tablet) --- */
    .four-core-topics-section .core-topics-image-col{
        display: block !important;
         max-width: 450px !important; /* Breite für Tablet */
         width: 100%;
         margin: 0 auto !important; /* Zentriert das Addon */
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    /* Sorgt für bündige Textausrichtung in den Prozess-Boxen */
    .process-section .process-feature-box .sppb-feature-box-title {
        min-height: 50px; /* Passe diesen Wert ggf. leicht an (z.B. 60px) */
    }
}

/*
============================================================
SEITE: COACHING & BERATUNG - SEKTION 5 (PREIS-TEASER - FINAL V3)
============================================================
*/

/* Basis-Stil Hervorgehobenes Paket (Standard / Mobile / Tablet bis 1399px) */
.pricing-card.highlight-package-teaser {
    border-color: #D4A259 !important; /* Goldener Rand immer */
    transform: translateY(0px);      /* KEIN Anheben standardmäßig */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Schatten immer */
    /* Die anderen Basis-Stile der Karte bleiben erhalten */
}

/* Regeln für Tablet (min-width: 992px) - Nur Grid-Layout, keine Änderung am Highlight nötig */
@media (min-width: 992px) {
    .pricing-final-row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: stretch !important;
        gap: 30px;
        justify-content: center;
    }
    .pricing-final-row > [class*="sppb-col-"] {
        display: flex !important;
        width: calc(33.333% - 20px);
        max-width: 380px;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Keine spezielle .highlight-package Regel hier nötig, da transform: translateY(0px) bereits Standard ist */
}

/* Regeln für große Desktops (ab 1400px) - JETZT das Anheben hinzufügen */
@media (min-width: 1200px) {
    .pricing-card.highlight-package-teaser {
        transform: translateY(-15px); 
    }
}

/*
============================================================
SEITE: COACHING & BERATUNG - STYLING FÜR ZITAT-BLÖCKE
============================================================
*/

.quote-block blockquote {
  position: relative;
  font-size: 24px;
  font-style: italic;
  font-weight: 400; /* Normales Gewicht für Zitat */
  color: #FFFFFF; /* Gilt für dunklen Hintergrund */
  border-left: 3px solid #D4A259; /* Goldener Balken */
  padding-left: 30px;
  margin: 40px auto;
  max-width: 700px;
  text-align: left; /* Zitattext linksbündig */
}

/* Anpassung für hellen Hintergrund (falls Zitat dort vorkommt) */
.sppb-section:not(.final-cta-section) .quote-block blockquote {
    color: #3D3D3D; /* Dunkelgrau auf hellem Grund */
}


.quote-block blockquote footer {
  display: block;
  margin-top: 15px;
  font-size: 16px;
  font-style: normal; /* Autor nicht kursiv */
  font-weight: 400;
  color: #A4AC88; /* Salbeigrün für Autor */
  text-align: right; /* Autor rechtsbündig */
}

/* Anpassung Autor-Farbe auf hellem Grund */
.sppb-section:not(.final-cta-section) .quote-block blockquote footer {
    color: #A4AC88; /* Bleibt Salbeigrün */
}

/*
============================================================
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!! ACHTUNG Trenner - Preiskarten !!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
============================================================
*/

/*
============================================================
SEITE: Kontakt und Preise - FINALES DESIGN FÜR PREISKARTEN 
============================================================
*/
/* Basis-Stil Hervorgehobenes Paket (Standard / Mobile / Tablet bis 1399px) */
.pricing-card.highlight-package {
    border-color: #D4A259 !important; /* Goldener Rand immer */
    transform: translateY(0px);      /* KEIN Anheben standardmäßig */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Schatten immer */
    /* Die anderen Basis-Stile der Karte bleiben erhalten */
}

/* Regeln für Tablet (min-width: 992px) - Nur Grid-Layout, keine Änderung am Highlight nötig */
@media (min-width: 992px) {
    .pricing-final-row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: stretch !important;
        gap: 30px;
        justify-content: center;
    }
    .pricing-final-row > [class*="sppb-col-"] {
        display: flex !important;
        width: calc(33.333% - 20px);
        max-width: 380px;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Keine spezielle .highlight-package Regel hier nötig, da transform: translateY(0px) bereits Standard ist */
}

/* Regeln für große Desktops (ab 1400px) - JETZT das Anheben hinzufügen */
@media (min-width: 1400px) {
    .pricing-card.highlight-package {
        transform: translateY(-15px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }
}

/* Basis-Stil der Karte (Textblock Addon) - Stellt sicher, dass sie die Spaltenhöhe füllt */
.pricing-card {
    border: 2px solid #A4AC88;
    border-radius: 8px;
    padding: 40px 30px !important;
    transition: all 0.3s ease;
    height: 100% !important; /* Füllt die Grid-Item-Höhe (Spalte) */
    position: relative;
    overflow: visible;
    background-color: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
    display: flex !important; /* Macht die Karte zum Flex-Container für interne Ausrichtung */
    flex-direction: column !important;
    text-align: center;
}

/* Hervorgehobenes Paket 
.pricing-card.highlight-package {
    border-color: #D4A259;
    transform: translateY(-15px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}*/

/* Preis-Gruppe wird nach unten geschoben */
.pricing-card .price-group {
    margin-top: auto !important;
    text-align: center;
    padding-top: 30px;
}

/* --- Typografie-Stile --- */
.pricing-card h3 { font-size: 22px; color: #2E4039; margin-bottom: 5px; }
.pricing-card p.sessions { font-size: 16px; color: #3D3D3D; margin-bottom: 20px; }
.pricing-card h4 { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 16px; color: #2E4039; margin-top: 30px; margin-bottom: 15px; text-align: left !important; }
.pricing-card ul { list-style: none; padding-left: 0; text-align: left !important; width: 100%; }
.pricing-card ul li { padding-left: 25px; position: relative; margin-bottom: 10px; font-size: 16px; }
.pricing-card ul li::before { content: '✔'; position: absolute; left: 0; color: #D4A259; font-size: 18px; top: 0px; }
.pricing-card p.price { font-size: 38px; font-weight: 700; color: #2E4039; margin-bottom: 5px; }
.pricing-card p.price-context { font-size: 14px; color: #A4AC88; margin-top: 0; }

/* Vorteils-Badge */
.package-badge {
    position: absolute;
    top: -15px;
    right: 20px;
    background-color: #D4A259;
    color: #2E4039;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    border-radius: 4px;
    z-index: 1;
}

@media (max-width: 767px) { /* Gilt für Geräte schmaler als 768px */

    /* --- ANPASSUNG PREISKARTEN FÜR SMARTPHONE --- */

    /* Reduziert das Padding innerhalb der Karte */
    .pricing-section .pricing-card,
    .pricing-teaser-section .pricing-card { /* Gilt für beide Seiten */
        padding: 30px 20px !important; /* Weniger Padding oben/unten und seitlich */
    }

    /* Reduziert Abstände der Typografie innerhalb der Karten */
    .pricing-section .pricing-card h4,
    .pricing-teaser-section .pricing-card h4 {
        margin-top: 20px !important; /* Weniger Abstand über H4 */
        margin-bottom: 10px !important; /* Weniger Abstand unter H4 */
        font-size: 15px !important; /* H4 etwas kleiner */
    }

    .pricing-section .pricing-card ul,
    .pricing-teaser-section .pricing-card ul {
        margin-bottom: 15px !important; /* Weniger Abstand unter Listen */
    }
     .pricing-section .pricing-card ul li,
     .pricing-teaser-section .pricing-card ul li {
        font-size: 15px !important; /* Listentext etwas kleiner */
        margin-bottom: 8px !important; /* Engerer Zeilenabstand in Listen */
        padding-left: 22px; /* Häkchen etwas näher ran */
     }
     .pricing-section .pricing-card ul li::before,
     .pricing-teaser-section .pricing-card ul li::before {
         font-size: 16px; /* Häkchen etwas kleiner */
         top: 1px;
     }

    /* Reduziert Abstand über der Preisgruppe */
    .pricing-section .pricing-card .price-group,
    .pricing-teaser-section .pricing-card .price-group {
        padding-top: 15px !important; /* Weniger Abstand über dem Preis */
    }
    
    /* Preis und Kontext optional leicht verkleinern */
    .pricing-section .pricing-card p.price,
    .pricing-teaser-section .pricing-card p.price {
        font-size: 32px !important; 
    }
     .pricing-section .pricing-card p.price-context,
     .pricing-teaser-section .pricing-card p.price-context {
        font-size: 13px !important; 
    }

    .pricing-section .pricing-card,
        .pricing-teaser-section .pricing-card {
            padding-top: 25px !important;    /* Noch weniger Padding oben */
            padding-bottom: 25px !important; /* Noch weniger Padding unten */
        }

        .pricing-section .pricing-card h4,
        .pricing-teaser-section .pricing-card h4 {
            margin-top: 15px !important; /* Weniger Abstand über H4 */
            margin-bottom: 8px !important; /* Weniger Abstand unter H4 */
        }
        
        .pricing-section .pricing-card ul li,
        .pricing-teaser-section .pricing-card ul li {
            margin-bottom: 5px !important; /* Engerer Abstand zwischen Listenelementen */
        }

        .pricing-section .pricing-card .price-group,
        .pricing-teaser-section .pricing-card .price-group {
            padding-top: 10px !important; /* Noch weniger Abstand über Preis */
        }
}

@media (max-width: 991px) {
/* --- ANPASSUNG FÜR "DAS FUNDAMENT" (usp-root-section) AUF TABLET & SMARTPHONE (FINALE VERSION) --- */

    /* Setzt die Reihenfolge: Text (Spalte 2) kommt VOR Bild (Spalte 1) */
    .usp-section .fundament-text-col,
    .usp-root-section .fundament-text-col { /* Zielt auf benannte Text-Spalte */
        order: 1 !important; /* Kommt zuerst */
        margin-bottom: 20px !important; /* Abstand zum Bild darunter */
    }
    .usp-section .fundament-image-col,
    .usp-root-section .fundament-image-col { /* Zielt auf benannte Bild-Spalte */
        order: 2 !important; /* Kommt danach */
        margin-bottom: 0 !important; /* Kein Abstand nach unten */
        text-align: center; /* Zentriert das Bild-Addon darin (Fallback) */
    }

    /* Begrenzt Breite und zentriert das Bild-Addon selbst */
    .usp-section .fundament-image-col,
    .usp-root-section .fundament-image-col {
         display: block !important;
         max-width: 450px !important; /* Breite für Tablet */
         width: 100%;
         margin: 0 auto !important; /* Zentriert das Addon */
    }

    /* Begrenzt Breite und zentriert das Text-Addon selbst */
    .usp-section .fundament-text-col,
    .usp-root-section .fundament-text-col {
        display: block !important;
        max-width: 750px !important; /* Maximale Breite für Text */
        width: 100%;
        margin: 0 auto !important; /* Zentriert das Addon */
    }
    /* Stellt sicher, dass Text IN der Box linksbündig bleibt */
    .usp-section .fundament-text-col .sppb-addon-text-block,
    .usp-root-section .fundament-text-col .sppb-addon-text-block {
        text-align: left !important;
    }
}

@media (max-width: 767px) {
    /* --- ANPASSUNG FÜR "DAS FUNDAMENT" BILD (SMARTPHONE) --- */
    .usp-section .fundament-image-col,
    .usp-root-section .fundament-image-col{
         max-width: 350px !important; /* Überschreibt die 600px vom Tablet */
    }
}

/*
============================================================
SEITE: MEINE ARBEITSWEISE - SEKTION 3 (WERKZEUGKOFFER - FINAL V2)
============================================================
*/

/* Korrekte Farben für Titel und Text in den Boxen */
.werkzeugkoffer-box .sppb-feature-title h3 {
  color: #2E4039 !important; /* Waldgrün für die H3-Titel */
}

.werkzeugkoffer-box .sppb-feature-content {
  color: #3D3D3D !important; /* Dunkelgrau für den Text */
}


/*
============================================================
SEITE: MEINE ARBEITSWEISE - SEKTION 4 (PROZESS - FINALE)
============================================================
*/

/* Stellt sicher, dass alle Texte in der Sektion die korrekte Farbe haben */
.process-section .sppb-addon-title,
.process-section .sppb-addon-content {
  color: #2E4039 !important; /* Waldgrün */
}

/* Styling für die "Gut zu wissen"-Box */
.process-section .info-box .sppb-addon-content {
  border: 1px solid rgba(46, 64, 57, 0.4);
  border-radius: 8px;
  padding: 25px 30px;
  max-width: 750px;
  margin: 0 auto;
  font-size: 16px;
  background-color: rgba(255,255,255,0.1);
  text-align: center;
}

/*
============================================================
SEITE: MEINE ARBEITSWEISE - SEKTION 4 (PROZESS - FINALE VERSION 6)
============================================================
*/

/* Allgemeine Textfarbe für die Sektion */
.process-section .sppb-addon-content {
  color: #2E4039 !important; /* Waldgrün */
}

/* Styling für die "Gut zu wissen"-Box */
.process-section .info-box .sppb-addon-content {
  border: 1px solid rgba(46, 64, 57, 0.4);
  border-radius: 8px;
  padding: 25px 30px;
  max-width: 750px;
  margin: 0 auto;
  font-size: 16px;
  background-color: rgba(255,255,255,0.1);
  text-align: center;
}


/*
============================================================
SEITE: RATGEBER - SEKTION 2 (ARTIKEL-GITTER - FINALE VERSION 2)
============================================================
*/

/* Basis-Stil für die gesamte Karte (Spalte) */
.article-card {
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    /* overflow: hidden; <-- HIER ENTFERNT! Das war der Fehler. */
    transition: all 0.3s ease;
    height: 100%;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;   
}

/* NEU: Wir wenden die "Maske" nur auf den Bild-Container an */
.article-card .article-card-image {
    border-radius: 8px 8px 0 0; /* Rundet nur die oberen Ecken ab */
    overflow: hidden; /* Schneidet nur das Bild ab, nicht den Schatten der Karte */
}

/* Der von Ihnen gewünschte Hover-Effekt */
.article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(46, 64, 57, 0.15); /* Ein klar sichtbarer Schatten */
}

/* Styling für den Inhalts-Container unter dem Bild */
.article-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* --- Die Typografie-Stile --- */
.article-card .meta-info {
    font-size: 14px;
    color: #A4AC88;
    margin-bottom: 10px;
}
.article-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
    color: #2E4039;
    margin-bottom: 15px;
}
.article-card .excerpt {
    color: #3D3D3D;
    flex-grow: 1;
    margin-bottom: 20px;
}
.article-card .read-more-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #D4A259;
    text-decoration: none;
    transition: color 0.3s ease;
}
.article-card .read-more-link:hover {
    color: #2E4039;
}

/* --- ANPASSUNG FÜR ARTIKEL-GITTER AUF TABLETS & SMARTPHONES --- */
@media (max-width: 991px) {
/* --- ANPASSUNG FÜR ARTIKEL-GITTER AUF TABLETS & SMARTPHONES (FINALE ZENTRIERUNG & BREITE) --- */

    /* Stellt sicher, dass die Reihe umbricht */
    .article-grid .sppb-nested-row {
        display: block !important; /* Kein Flex mehr */
    }

    /* Weist jede Spalte (die .article-card Klasse trägt) an, sich zu zentrieren und die Breite anzupassen 
    .article-grid .article-card {
        display: block !important;
        width: 100% !important;
        max-width: 550px !important;
        margin: 0 auto 40px auto !important;
        float: none !important;
        height: auto !important;
        transform: none !important;
        box-shadow: none !important;
        flex-basis: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }*/

    /* Entfernt den unteren Abstand bei der letzten Karte/Spalte */
     .article-grid .article-card:last-child {
       margin-bottom: 0 !important;
    }

    /* Entfernt Hover-Effekt explizit, falls Basis-Regel durchschlägt */
    .article-grid .article-card:hover {
        transform: none !important;
        /* box-shadow: none !important; */ /* Optional */
     }
}

@media (max-width: 767px) { /* Gilt für Geräte schmaler als 768px */
    /* Styling für den Inhalts-Container unter dem Bild */
    .article-card-content {
        padding: 20px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
}

/*
============================================================
SEITE: ÜBER MICH - SEKTION 1 (HERO - KORRIGIERT)
============================================================
*/

/* Zielt präzise auf die Überschrift ab und setzt Farbe & Größe */
.about-hero-section .sppb-addon-header .sppb-addon-title {
  color: #FFFFFF !important;
  font-size: 48px; /* Fehlende Schriftgröße hinzugefügt */
}

/* Zielt präzise auf den Textblock ab und setzt Farbe & Größe */
.about-hero-section .sppb-addon-text-block .sppb-addon-content {
  color: #FFFFFF !important;
  font-size: 19px; /* Fehlende Schriftgröße hinzugefügt */
}

/*
============================================================
HELPER-KLASSE: PAGE-SUBTITLE (z.B. für "Über Mich") - FINAL v2
============================================================
*/

/* * Dies ist die hoch-spezifische Regel, die wir brauchen.
 * Sie kombiniert die Sektions-Klasse mit unserer Add-on-Klasse.
 */
.about-hero-section .page-subtitle h2.sppb-addon-title {
    color: #2E4039 !important;   /* ERZWINGT das Waldgrün */
    font-size: 22px !important;   
    font-weight: 500 !important;  
    line-height: 1.4 !important;
}

/*
============================================================
SEITE: ÜBER MICH - SEKTION 1 (HERO - TABLET HOCHFORMAT UMBRUCH - KORREKTUR V2)
============================================================
*/

/* Erzwingt den Umbruch der Spalten IN der verschachtelten Reihe nur auf Tablet Hochformat */
@media (max-width: 1199px) { /* Vereinfacht: Gilt für Tablet Hochformat UND Smartphone 
    .about-hero-section .sppb-nested-row > .sppb-row-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }*/
    /* Fügt Abstand unter dem Bild hinzu, wenn es umbricht */
    .about-hero-section .sppb-row-column:first-child {
         margin-bottom: 40px; 
    }
        /* Begrenzt Breite und zentriert das Bild-Addon selbst */
    .about-hero-section .ueber-image-col{
         display: block !important;
         max-width: 600px !important; /* Breite für Tablet */
         width: 100%;
         margin: 0 auto !important; /* Zentriert das Addon */
    }

    /* Begrenzt Breite und zentriert das Text-Addon selbst */
    .about-hero-section .ueber-text-col{
        display: block !important;
        max-width: 750px !important; /* Maximale Breite für Text */
        width: 100%;
        margin: 0 auto !important; /* Zentriert das Addon */
    }
    /* Stellt sicher, dass Text IN der Box linksbündig bleibt */
    .about-hero-section .ueber-text-col .sppb-addon-text-block{
        text-align: left !important;
    }
}

/*
============================================================
SEITE: ÜBER MICH - SEKTION 2 (MEILENSTEIN-LAYOUT)
============================================================
*/

/* Gestaltet die gesamte Zeile eines Meilensteins */
.milestone-row {
    display: flex;
    align-items: flex-start; /* Richtet Ziffer und Text oben bündig aus */
}

/* Styling für die große Ziffer links */
.milestone-number .sppb-addon-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 56px !important;
    font-weight: 700 !important;
    color: rgba(212, 162, 89, 0.4) !important; /* Gold mit 40% Deckkraft für einen dezenten Look */
    line-height: 1;
    padding-right: 30px;
}

/* Styling für Titel und Text im Inhaltsbereich rechts */
.milestone-content .sppb-addon-header .sppb-addon-title {
    color: #2E4039 !important; /* Waldgrün */
}

.milestone-content .sppb-addon-text-block .sppb-addon-content {
    color: #3D3D3D !important; /* Dunkelgrau */
}

/* Abstand für das Zertifikat-Bild */
.milestone-content .sppb-addon-image {
    margin-top: 25px;
}


/* Ergänzung für Bilder-Box Shadow */
/* Der Add-on-Container dient nur noch als "Maske" und passt sich dem Bild an */
.image-card-style2 {
    display: inline-block; /* WICHTIG: Container schrumpft auf die Größe des Bildes */
    border-radius: 8px;
    /*overflow: hidden;      Erzwingt die Rundung des Bildes darin */
    line-height: 0;       /* Verhindert unerwünschten Leerraum */
}

/* Der Schatten wird jetzt direkt auf das Bild-Element angewendet */
.image-card-style2 img {
    vertical-align: middle;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

@media (max-width: 767px) { /* Gilt für Geräte schmaler als 768px */
 /* Styling für die große Ziffer links */
.milestone-number .sppb-addon-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 42px !important;    /* NEU: Verkleinert */
    font-weight: 700 !important;
    line-height: 1 !important;
    color: rgba(212, 162, 89, 0.4) !important; /* Gold mit 40% Deckkraft für einen dezenten Look */
    margin-bottom: 10px !important; /* NEU: Reduzierter Abstand */
    /* Optional: Versuch zur Höhenanpassung, falls nötig: */
    /* padding-top: 5px; */ 
    } 
     
    /* Verkleinert die Ziffern in den Prozess-Layouts */
     .milestone-number .sppb-addon-title {
         font-size: 42px !important; /* Vorher 56px */
     } 
}

/*
============================================================
SEITE: ÜBER MICH - SEKTION 3 (PERSÖNLICHE NOTE)
============================================================
*/

.personal-touch-section .sppb-addon-title,
.personal-touch-section .sppb-addon-content {
  color: #2E4039 !important; /* Waldgrün */
}

/*
============================================================
SEITE: KONTAKT & PREISE - SEKTION 4 (PROZESS - FINALE VERSION 3)
============================================================
*/

/* --- Allgemeine Stile für die Sektion --- */
.contact-process-section .sppb-addon-title {
  color: #2E4039 !important;
}

/* KORRIGIERT: Macht das gesamte 2x2-Gitter schmaler und zentriert es */
.contact-process-section .sppb-row {
  max-width: 750px; /* Breite von intro-paragraph übernommen */
  margin: 0 auto;   /* Zentriert die Reihen */
}

/* Definiert den Abstand zwischen der oberen und unteren Reihe 
.contact-process-section .sppb-row:first-of-type {
    margin-bottom: 50px; 
}*/

/* --- Stile für die Elemente IN den Boxen --- */

/* Styling für die großen, grünen Ziffern */
.contact-process-section .contact-step-number .sppb-addon-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 56px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #2E4039 !important;
    opacity: 0.7;
    margin-bottom: 15px;
}

/* Styling für die H3 und den Text */
.contact-process-section .sppb-addon-text-block h3 {
    min-height: 60px; /* Sorgt für die bündige Ausrichtung */
    margin-bottom: 15px;
}

/* KORRIGIERT: Stellt sicher, dass auch der Fließtext die richtige Farbe hat */
.contact-process-section .sppb-addon-text-block p {
    color: #2E4039 !important;
}

@media (max-width: 767px) { /* Gilt für Geräte schmaler als 768px */
 /* Styling für die großen, grünen Ziffern in dieser Sektion */
.contact-process-section .contact-step-number .sppb-addon-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 42px !important;    /* NEU: Verkleinert */
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #2E4039 !important;
    opacity: 0.7;
    margin-bottom: 10px !important; /* NEU: Reduzierter Abstand */
    /* Optional: Versuch zur Höhenanpassung, falls nötig: */
    /* padding-top: 5px; */ 
    } 

    /* Verkleinert die Ziffern in den Prozess-Layouts */
     .contact-step-number .sppb-addon-title{
         font-size: 42px !important; /* Vorher 56px */
     } 
}

/*
============================================================
SEITE: KONTAKT & PREISE - SEKTION 5 (KONTAKTFORMULAR - FINALE KORREKTUR)
============================================================
*/

/* NEU: Macht den gesamten Formular-Container schmaler und zentriert ihn */
.contact-form-custom {
    max-width: 750px;
    margin: 0 auto;
}

/* Styling für die Formular-Felder */
.contact-form-custom .sppb-form-group input,
.contact-form-custom .sppb-form-group textarea {
    border: 1px solid #EAEAEA !important;
    border-radius: 4px !important;
}

.contact-form-custom .sppb-form-group input:focus,
.contact-form-custom .sppb-form-group textarea:focus {
    border-color: #D4A259 !important;
}

/* Zwingt den Sende-Button im Kontaktformular, unseren "Ghost-Button"-Stil anzunehmen */
.contact-form-custom .sppb-btn.sppb-btn-success {
    display: inline-block;
    background-color: transparent !important;
    color: #2E4039 !important; /* Waldgrün */
    border: 2px solid #2E4039 !important; /* NEU: Waldgrün statt Salbeigrün */
    padding: 8px 25px !important;
    font-size: 14px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.contact-form-custom .sppb-btn.sppb-btn-success:hover {
    background-color: #2E4039 !important;
    color: #FFFFFF !important;
    border-color: #2E4039 !important;
}

/* Styling für die alternativen Kontaktdaten */
.contact-details {
    text-align: center;
    max-width: 750px; /* Begrenzt die Breite für bessere Lesbarkeit */
    margin: 0 auto; /* Zentriert den Block horizontal */
}
.contact-details .fa {
    color: #D4A259;
    margin-right: 10px;
    font-size: 18px;
}
.contact-details a {
    color: #2E4039 !important; /* Waldgrün (jetzt mit !important) */
    text-decoration: none;
    font-weight: 600;
}
.contact-details a:hover {
    color: #D4A259 !important; /* Gold beim Hovern */
}
.contact-details .availability-note {
    font-size: 15px;
    color: #A4AC88; /* Salbeigrün */
    margin-top: 20px;
}

/*
============================================================
STYLING FÜR DAS ACCORDION (FAQ - FINALE KORREKTUR)
============================================================
*/

/* Macht das gesamte Accordion-Element schmaler und zentriert es */
.custom-accordion {
    max-width: 750px;
    margin: 0 auto;
}

/* Stil für jeden einzelnen Frage/Antwort-Block */
.custom-accordion .sppb-panel-group {
    border: 1px solid #EAEAEA;
    border-radius: 4px !important; /* KORRIGIERT: Rundung wird erzwungen */
    margin-bottom: 15px; /* Etwas mehr Abstand zwischen den Fragen */
    background-color: #FFFFFF;
    overflow: hidden;
}

/* Stil für den klickbaren Kopfbereich */
.custom-accordion .sppb-panel-heading {
    padding: 20px 25px;
    width: 100%;
}

/* Stil für den Fragetext (Titel) */
.custom-accordion .sppb-panel-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #2E4039 !important;
    transition: color 0.3s ease;
}

/* Ändert die Farbe des Fragetextes beim Hovern */
.custom-accordion .sppb-panel-heading:hover .sppb-panel-title {
    color: #D4A259 !important;
}

/* Ändert das Pfeil-Icon auf unsere Akzentfarbe */
.custom-accordion .sppb-toggle-direction {
    color: #D4A259 !important;
}

/* Stil für den ausgeklappten Inhaltsbereich (die Antwort) */
.custom-accordion .sppb-panel-collapse {
    color: #3D3D3D;
    border-top: 1px solid #EAEAEA;
    padding: 25px 25px 25px 25px; /* KORRIGIERT: Kompakteres Padding */
    font-size: 16px;
    line-height: 1.7;
}

/*
============================================================
PHASE 4: RESPONSIVE ANPASSUNGEN - TABLET
============================================================
*/

@media (max-width: 991px) {
  /* --- DEBUG-TEST --- 
    body { background-color: red !important; } */

    /* --- GLOBALE ANPASSUNGEN FÜR TABLET --- */

    /* Reduziert die Größe der H1-Überschriften auf Tablets */
    h1.sppb-addon-title {
        font-size: 40px !important; /* Vorher z.B. 48px */
    }

    /* Reduziert die Größe der H2-Überschriften auf Tablets */
    h2.sppb-addon-title {
        font-size: 34px !important; /* Vorher z.B. 38px oder 36px */
    }
    
    /* Reduziert die Größe der H3-Überschriften auf Tablets */
    h3.sppb-addon-title,
    .sppb-addon-text-block h3 {
        font-size: 20px !important; /* Vorher z.B. 22px */
    }

    /* Reduziert das Padding der Standard-Seitenköpfe */
    .page-hero-section .sppb-section-content {
        padding-top: 80px !important;
        padding-bottom: 80px !important; /* Vorher 100px */
    }

    /* Reduziert das Padding der dunklen CTA-Sektionen */
    .final-cta-section .sppb-section-content {
        padding-top: 60px !important;
        padding-bottom: 60px !important; /* Vorher 80px */
    }

    /* --- SEITEN-SPEZIFISCHE ANPASSUNGEN (BEISPIEL KONTAKT-SEITE) --- */

    /* Reduziert das Padding der hellen Inhalts-Sektionen auf Tablets */
    .pricing-section .sppb-section-content,
    .contact-form-section .sppb-section-content, /* Annahme: Sie geben Sektion 5 diese Klasse */
    .faq-section .sppb-section-content { /* Annahme: Sie geben Sektion 6 diese Klasse */
        padding-top: 80px !important;
        padding-bottom: 80px !important; /* Vorher 100px */
    }
    
    /* Anpassung für das 2x2 Prozess-Gitter (optional: Umbruch auf 1 Spalte) */
    /* Wenn das 2x2 Gitter auf Tablets zu eng wirkt, aktivieren Sie diesen Code:
    .contact-process-section .process-grid-row {
        grid-template-columns: 1fr; 
        gap: 40px; 
        max-width: 500px; 
    }
    */

/* --- ANPASSUNG FÜR PREISKARTEN AUF TABLETS (FINALE BEREINIGTE VERSION) --- */

    /* Entfernt den Hervorhebungs-Effekt (Anheben & Schatten) auf Tablets */
    .pricing-section .pricing-card.highlight-package {
        transform: none !important;
        box-shadow: none !important;
        border-width: 2px !important; /* Stellt sicher, dass der Rand sichtbar bleibt */
    }

    /* Entfernt den unteren Abstand bei der letzten Karte/Reihe (optional, falls nötig) */
     /* Ggf. Regel für :last-child, falls Abstände nicht passen */

} /* Ende des @media Blocks für Tablets */

/*
============================================================
GLOBALE DESKTOP-SCHRIFTGRÖSSEN (Überschreibt Template-Defaults)
============================================================
*/

@media (min-width: 992px) { /* Gilt für alle Geräte BREITER als 991px */

    h1.sppb-addon-title {
        font-size: 48px !important;
    }

    h2.sppb-addon-title {
        font-size: 36px !important; /* Unser Standard-Desktop-H2 */
    }
    
    /* Ggf. auch H3 hier definieren, falls nötig */
    h3.sppb-addon-title,
    .sppb-addon-text-block h3 {
        font-size: 22px !important;
    }
}

/*
============================================================
PHASE 4: RESPONSIVE ANPASSUNGEN - SMARTPHONE
============================================================
*/

@media (max-width: 767px) { /* Gilt für Geräte schmaler als 768px */

    /* --- GLOBALE ANPASSUNGEN FÜR SMARTPHONE --- */

    /* Reduziert die Größe der H1-Überschriften auf Smartphones */
    h1.sppb-addon-title {
        font-size: 32px !important; /* Deutlich kleiner */
        line-height: 1.3 !important; /* Engerer Zeilenabstand */
    }

    /* Reduziert die Größe der H2-Überschriften auf Smartphones */
    h2.sppb-addon-title {
        font-size: 24px !important; /* Deutlich kleiner */
        line-height: 1.3 !important;
    }
    
    /* Reduziert die Größe der H3-Überschriften auf Smartphones */
    h3.sppb-addon-title,
    .sppb-addon-text-block h3 {
        font-size: 20px !important; /* Bleibt wie Tablet oder leicht kleiner */
    }

    /* Reduziert das Padding der Standard-Seitenköpfe (Salbeigrün) */
    .page-hero-section .sppb-section-content {
        padding-top: 60px !important;    /* Weniger Abstand */
        padding-bottom: 60px !important;
    }
    
    /* Reduziert das Padding der dunklen CTA-Sektionen (Waldgrün) */
    .final-cta-section .sppb-section-content {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* Reduziert das Padding der hellen Inhalts-Sektionen */
    .pricing-section .sppb-section-content,
    .contact-form-section .sppb-section-content,
    .faq-section .sppb-section-content,
    .usp-root-section .sppb-section-content,
    .usp-section .sppb-section-content, /* Ergänzt für andere Seiten */
    .toolbox-section .sppb-section-content, /* Ergänzt für andere Seiten */
    .personal-touch-section .sppb-section-content, /* Ergänzt für andere Seiten */
    .feature-section .sppb-section-content /* Ergänzt für Startseite */
     {
        padding-top: 60px !important;
        padding-bottom: 60px !important; /* Vorher 80px/100px */
    }
     
    /* Verkleinert die Timeline-Punkte */
    .timeline-item::before {
        height: 15px;
        width: 15px;
        left: -58.5px; /* Muss eventuell leicht angepasst werden */
    }

    /* --- ANPASSUNG FÜR PRIMÄRE BUTTONS AUF SMARTPHONE --- */

    .btn-primary .sppb-btn {
        padding: 12px 15px !important; /* Deutlich reduziertes Padding */
        font-size: 14px !important;    /* Leicht reduzierte Schriftgröße */
        line-height: 1.3 !important;   /* Angepasster Zeilenabstand */
        display: block !important;     /* Macht den Button zum Block-Element */
        width: 100% !important;        /* Füllt die verfügbare Breite der Spalte */
        max-width: 320px !important;   /* Begrenzt maximale Breite des Buttons */
        margin-left: auto !important;  /* Zentriert den Button, wenn max-width greift */
        margin-right: auto !important; /* Zentriert den Button, wenn max-width greift */
    }

        /* Korrigiert die Ausrichtung für Intro-Absätze auf Smartphones */
    .intro-paragraph .sppb-addon-content {
        text-align: left !important; /* Erzwingt linksbündig für bessere Lesbarkeit */
    }


} /* Ende des @media Blocks für Smartphones */

/* Erzwingt linksbündig für Tablet hochformat und schmaler für bessere Lesbarkeit 
@media (max-width: 991px) {
    .intro-paragraph .sppb-addon-content {
        text-align: left !important; 
    }
}*/

/*
============================================================
FOOTER - RESPONSIVE COPYRIGHT (KORRIGIERT FÜR CUSTOM MODULE & P-TAG)
============================================================
*/

/* Desktop: Text zentrieren und Abstand für Links */
#sp-footer1 .mod-custom {
    text-align: center;
}
#sp-footer1 .mod-custom .legal-links {
    margin-left: 10px; 
}

/* Smartphone: P-Tag als Flex-Container behandeln und Blöcke stapeln */
@media (max-width: 767px) {
    #sp-footer1 .mod-custom p {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;     
        line-height: 1.6;
        margin-bottom: 0; /* Verhindert doppelten Abstand durch das P-Tag */
    }
    
    #sp-footer1 .mod-custom .legal-links {
        margin-left: 0; 
    }
}

/*
============================================================
FIX: H1 DATENSCHUTZERKLÄRUNG (MOBIL) - MIT SOFT HYPHEN
============================================================
*/
@media (max-width: 767px) {
    /* * Zielt auf den H1-Titel (.sppb-addon-title)
     * INNERHALB des Add-ons mit unserer Spezial-Klasse (.h1-mobil-kleiner)
     */
    .h1-mobil-kleiner .sppb-addon-title {
        /* Eine finale, lesbare Schriftgröße beibehalten */
        font-size: 28px !important; /* (Kannst du ggf. jetzt sogar leicht erhöhen auf 30px) */
        line-height: 1.3 !important;
        
        /* Verhindert "brutale" Umbrüche, da wir jetzt den &shy; haben */
        word-break: normal; 
    }
}

/*
============================================================
STYLING FÜR RECHTSTEXTE (Impressum, Datenschutz)
============================================================
*/

/* Fügt saubere, hierarchische Abstände über den Überschriften hinzu */
.legal-text-content h2 {
    margin-top: 45px; /* Größter Abstand für Haupt-Abschnitte */
}

.legal-text-content h3 {
    margin-top: 35px; /* Mittlerer Abstand für Unter-Abschnitte */
}

.legal-text-content h4 {
    margin-top: 30px; /* Kleinerer Abstand für Detail-Überschriften */
}

.legal-text-content h5 {
    margin-top: 25px; /* Minimaler Abstand für unterste Ebene */
}


/*
============================================================
FIX: SAFARI HERO IMAGE ZOOM (FINAL - ID TARGET) -> !!! ACHTUNG, falls die Sektion kopiert, neu erstellt etc. wird dann ändert sich die section-id!!!
keywords: Section ID , SectionID , section-id
============================================================
*/
@media (max-width: 991px) {
    
    /* * Zielt auf die ID der Sektion
     */
    #section-id-3a362be4-1ac8-4a7a-8514-40c0586f4cb9 {
        /* * Tötet den Parallax-Effekt (das löst den Zoom-Bug)
         */
        background-attachment: scroll !important;
        
        /* * Setzt eine fixe Höhe, um den vh-Bug zu umgehen
         
        min-height: 550px !important;
        height: 550px !important; */
        
        /* * Setzt die Hintergrundposition zurück, 
         * die das Parallax-Skript manipuliert
         */
        background-position: 50% 50% !important; 
    }
}