/*
 Theme Name:   EFo Twenty Twenty-Five Child
 Theme URI:    https://www.eva-focke-doula.de/
 Description:  Child-Theme für das Projekt Eva Focke Doula auf Basis von Twenty Twenty-Five.
 Author:       happy.dawg alias Duc Ngoc Dao, Conscious.hemp GmbH
 Author URI:   beaCHEMP.de
 Template:     twentytwentyfive
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentyfive-child
*/

/* Ab hier können Sie optionales, zusätzliches CSS hinzufügen. */
/* Bei FSE-Themes werden die meisten Stile jedoch über die theme.json verwaltet. */

/*
 * ===================================================================
 * V3.7.0 - KORRIGIERTER ENDLOS-TICKER HEADER
 * Author: Senior Web Engineer
 * Beschreibung: CSS, das auf das JavaScript-Startsignal wartet.
 * ===================================================================
 */
.google-form {
  width: 100%;      /* volle Breite im Container */
  max-width: 100%; /* optional Begrenzung */
  height: 1000px;    /* Standardhöhe */
  border: none;     /* Rahmen ausblenden */
}

.google-formI {
  width: 100%;      /* volle Breite im Container */
  max-width: 100%; /* optional Begrenzung */
  height: 1400px;    /* Standardhöhe */
  border: none;     /* Rahmen ausblenden */
}

h1.wp-block-heading,
h2.wp-block-heading,
h3.wp-block-heading,
h4.wp-block-heading {
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.ticker-full-bleed-background {
    width: 100%;
    background-color: #f7fcff;
    padding: 10px 0;
    box-sizing: border-box;
    z-index: 125;
}

.ticker-content-constrained {
    max-width: 900px;
    margin: 0 auto; 
    overflow: hidden;
}

/* KORREKTUR: Die 'animation'-Eigenschaft wurde hier entfernt. */
/* Der Ticker ist jetzt standardmäßig statisch. */
.ticker-move {
    display: flex;
}

/* NEU: Die Animation wird nur gestartet, wenn die 'is-animated'-Klasse vorhanden ist. */
.ticker-move.is-animated {
    animation: ticker-animation 30s linear infinite;
}

.ticker-item {
    white-space: nowrap;
    padding: 0 2rem;
	font-size: 12px;
    color: #594866;
    flex-shrink: 0;
    transition: color 0.5s ease;
    font-family: mansalva;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ticker-item:hover {
    color: var(--wp--preset--color--accent-2);
    cursor: pointer;
}

@keyframes ticker-animation {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Das Pausieren beim Hovern bleibt unverändert. */
.ticker-content-constrained:hover .ticker-move {
    animation-play-state: paused;
}

/*
 * ===================================================================
 * V3.7.0 - KORRIGIERTER ENDLOS-TICKER FOOTER
 * Author: Senior Web Engineer
 * Beschreibung: CSS, das auf das JavaScript-Startsignal wartet.
 * ===================================================================
 */

.ticker-full-bleed-background-footer {
    width: 100%;
    background-color: #f7fcff;
    padding: 10px 0;
    box-sizing: border-box;
}

.ticker-content-constrained-footer {
    max-width: 900px;
    margin: 0 auto; 
    overflow: hidden;
}

/* KORREKTUR: Die 'animation'-Eigenschaft wurde hier entfernt. */
/* Der Ticker ist jetzt standardmäßig statisch. */
.ticker-move-footer {
    display: flex;
}

/* NEU: Die Animation wird nur gestartet, wenn die 'is-animated'-Klasse vorhanden ist. */
.ticker-move-footer.is-animated-footer {
    animation: ticker-animation 30s linear infinite;
}

.ticker-item-footer {
    white-space: nowrap;
    padding: 0 2rem;
	font-size: 12px;
    color: #594866;
    flex-shrink: 0;
    transition: color 0.5s ease;
    font-family: mansalva;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ticker-item-footer:hover {
    color: var(--wp--preset--color--accent-2);
    cursor: pointer;
}

@keyframes ticker-animation-footer {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Das Pausieren beim Hovern bleibt unverändert. */
.ticker-content-constrained-footer:hover .ticker-move-footer {
    animation-play-state: paused;
}

/*
 * Version: 2.1.0 (Aktualisiert)
 * Projekt: Eva Focke Doula (000e_fo-jd-wt)
 * Modul: Schwebendes Logo und fluider Header
 * Author: Senior Chief Web Engineer
 *
 * Beschreibung:
 * Dieses Modul definiert einen Header-Container mit einer responsiven,
 * festen Höhe und positioniert ein zentrales Logo absolut, sodass es
 * den Container überlappen und frei verschoben werden kann.
 * Neu: Vorbereitung für dynamische Skalierung und Positionierung via JS/CSS-Variablen.
*/

/*
 * Version: 7.1.0
 * Author: Senior Chief Web Engineer
 * Beschreibung: Basis-Styles für den Header, optimiert für sanftere Übergänge und zukünftige Sticky-Funktionalität.
 */

.efo-header-wrapper {
  position: relative; /* Muss für 'top' Verschiebung beim Sticky sein */
  min-height: clamp(109px, 18vh, 125px);
  align-items: center;
  z-index: 100;
  /* V 7.1.0: Längere Transition-Dauer und 'ease-in-out' für smoothere Effekte */
  /* Hinzugefügt: 'transform' für 'will-change' */
  transition: min-height 0.5s ease-in-out, padding 0.5s ease-in-out, box-shadow 0.5s ease-in-out, top 0.5s ease-in-out;
  /* V 7.1.0: Performance-Optimierung. Informiert den Browser über bevorstehende Änderungen. */
  will-change: min-height, padding, box-shadow, top, transform;
}

/*
 * Version: 7.1.0
 * Author: Senior Chief Web Engineer
 * Beschreibung: Styles für das Namens-Logo und sein Bild-Element.
 */
.efo-header-wrapper .efo-name-logo {
  /* V 7.1.0: Längere Transition-Dauer und 'ease-in-out' */
  transition: left 0.5s ease-in-out;
  will-change: left;
}

.efo-header-wrapper .efo-name-logo img {
  /* V 7.1.0: Längere Transition-Dauer und 'ease-in-out' für Höhe und Breite des <img>-Tags. */
  transition: height 0.5s ease-in-out, width 0.5s ease-in-out;
  width: 92px; /* Dein Basiswert */
  height: auto; /* Sorgt für Proportionalität bei Änderungen */
  will-change: height, width;
}

/*
 * Version: 7.1.0
 * Author: Senior Chief Web Engineer
 * Beschreibung: Styles für das zentrale Logo und sein Bild-Element sowie den Container.
 */
.efo-header-wrapper .efo-central-logo {
  left: 42%; /* Dein angepasster Basiswert */
  top: 22px; /* Basiswert */
  z-index: 100;
  position: absolute;
  /* V 7.1.0: Längere Transition-Dauer und 'ease-in-out' für Position */
  transition: top 0.5s ease-in-out, left 0.5s ease-in-out;
  will-change: top, left;
}

.efo-header-wrapper .efo-central-logo img {
  /* V 7.1.0: Längere Transition-Dauer und 'ease-in-out' für Breite und Höhe des <img>-Tags. */
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
  width: 92px; /* Dein Basiswert */
  height: auto; /* Sorgt für Proportionalität */
  will-change: width, height;
}


/*
 * Version: 7.1.0
 * Author: Senior Chief Web Engineer
 * Beschreibung: CSS-Klasse für den GESSCROLLTEN Zustand des Headers.
 *              !important weiterhin nötig.
 */
body.scrolled .efo-header-wrapper .efo-name-logo img {
  height: 68px !important;
  width: auto !important;
}

body.scrolled .efo-header-wrapper .efo-name-logo {
  left: 55% !important;
}

body.scrolled .efo-header-wrapper .efo-central-logo img {
  width: 68px !important;
  height: auto !important;
}

body.scrolled .efo-header-wrapper .efo-central-logo {
  top: -28px !important;
}

/*
 * Version: 7.1.0
 * Author: Senior Chief Web Engineer
 * Beschreibung: Visuelle Anpassungen für den gesamten Header beim Scrollen, optional.
 */
body.scrolled .efo-header-wrapper {
    min-height: clamp(60px, 10vh, 70px) !important;
    box-shadow: var(--wp--preset--shadow--soft);
}

/*
 * Version: 7.1.0
 * Author: Senior Chief Web Engineer
 * Beschreibung: Sticky Header Styles.
 * Diese Klasse wird per JavaScript hinzugefügt/entfernt, um den Header "sticky" zu machen.
 */
.efo-header-wrapper.is-sticky {
    position: fixed; /* Macht den Header am Viewport fixiert */
    top: 0;          /* Klebt ihn am oberen Rand */
    left: 0;
    width: 100%;     /* Volle Breite des Viewports */
    background-color: var(--wp--preset--color--base); /* Hintergrundfarbe, falls der Header transparent ist */
    box-shadow: var(--wp--preset--shadow--natural); /* Optional: Schatten für besseren Kontrast */
    /* Die Transition für 'top' ist bereits auf .efo-header-wrapper definiert. */
    z-index: 1000; /* Stellt sicher, dass er über anderen Inhalten liegt */
}

/*
 * Version: 7.1.0
 * Author: Senior Chief Web Engineer
 * Beschreibung: Sticky Header am Ende der Seite stoppen.
 * Diese Klasse wird dynamisch hinzugefügt, wenn der Header stoppen soll.
 */
.efo-header-wrapper.is-sticky.stop-at-end {
    position: absolute; /* Ändert von 'fixed' zu 'absolute' */
    /* Der 'top'-Wert wird hier dynamisch per JavaScript gesetzt! */
    /* top: [berechneter_wert_in_px] !important; */
    left: 0; /* Bleibt links */
    width: 100%; /* Volle Breite */
    z-index: 999; /* Eventuell niedriger als normal sticky, falls Footer drüber sein soll */
    transform: none; /* Stellt sicher, dass keine ungewollten Transforms wirken */
}
/**
 * Ziel: Das <mark>-Element.
 *
 * Zweck: Das <mark>-Tag wird semantisch für hervorgehobenen oder
 * markierten Text verwendet. Wir nutzen diesen Tag als direkten
 * Haken (Hook), um unser benutzerdefiniertes Styling anzuwenden.
*/
mark,
.has-inline-color { /* WordPress verwendet oft die Klasse .has-inline-color für Hervorhebungen */
  /*
   * Best Practice: Anstatt den Namen der Schriftart hart zu codieren,
   * verwenden wir die von WordPress generierte CSS-Variable.
   * 'var(--wp--preset--font-family--mansalva)' greift direkt auf die
   * Schriftart zu, die Sie in Ihrer theme.json unter dem Slug 'mansalva'
   * definiert haben. Dies stellt Konsistenz und Wartbarkeit sicher.
  */
  font-family: var(--wp--preset--font-family--mansalva);
  font-size: 1.3em;
  /*
   * OPTIONALE ANPASSUNG:
   * Manchmal benötigen handschriftliche Fonts eine leichte
   * Anpassung der Schriftgröße oder des Abstands, um harmonisch
   * mit dem Fließtext zu wirken. Sie können diese Werte bei
   * Bedarf einkommentieren und anpassen.
  */
  /*
  font-size: 1.1em;
  letter-spacing: 0.5px;
  */
}

/*
 * Version: 2.1.0
 * Projekt: Eva Focke Doula (000e_fo-jd-wt)
 * Modul: Interaktive Navigation (Hover-Effekt)
 * Author: Senior Chief Web Engineer
 *
 * Beschreibung:
 * Fügt einen sanften Farbwechsel beim Überfahren der Menüpunkte
 * (Hover) im Hauptnavigationsblock hinzu.
*/

/**
 * 1. Basis-Styling des Navigationslinks
 *
 * Zweck: Wir definieren hier den Übergang (transition). Indem wir die
 * Transition auf das Basis-Element legen, stellen wir sicher, dass der
 * Effekt in beide Richtungen (hinein- und hinaus-hovern) sanft abläuft.
*/
.wp-block-navigation .wp-block-navigation-item a {
  /*
   * 'transition' ist die Eigenschaft, die den sanften Übergang steuert.
   * - 'color': Wir animieren nur die Farbeigenschaft.
   * - '0.25s': Die Animation dauert 0.25 Sekunden. Ein guter Wert für unaufdringliche Effekte.
   * - 'ease-in-out': Dies ist die "Beschleunigungskurve" der Animation, die sie natürlich wirken lässt.
  */
  transition: color 0.25s ease-in-out;
}

/**
 * 2. Hover-Zustand des Navigationslinks
 *
 * Zweck: Diese Regel wird nur dann aktiv, wenn der Mauszeiger
 * über dem Link schwebt (dank der ":hover" Pseudo-Klasse).
*/
.wp-block-navigation .wp-block-navigation-item a:hover {
  /*
   * Hier definieren wir die Zielfarbe für den Hover-Effekt.
   * Ich verwende hier 'accent-1' aus Ihrer theme.json.
   * Sie können JEDE Ihrer vordefinierten Farben verwenden, indem Sie
   * die Variable anpassen, z.B. zu var(--wp--preset--color--accent-2).
   * Dies ist die Best Practice, um Design-Konsistenz zu wahren.
  */
  color: var(--wp--preset--color--accent-2) !important;
}

  /* 
    Ich bin Sesy As Fuck ____ CSS_efo-WT___V01
 */

    /* --- Seite HOME --- */

.section-home-life-wrapper {
    position: relative;
    z-index: 15;
}

 /*
 * ______________ Section Hero Home
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Home, Section: Hero
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-home-hero-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative; 
    z-index: 25;
}

/* 
 * Schritt 2: Der Title in die Ebeme platzieren.
 */
.section-home-hero-wrapper .section-home-hero-title {
    position: relative;
    z-index: 15;
}
.section-home-hero-wrapper .section-home-hero-button {
    position: relative;
    z-index: 15;
}

/* 
 * Schritt 2: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-home-hero-wrapper .section-home-hero-icon {
  /* --- GRUNDEINSTELLUNGEN --- */
  position: absolute; 
  z-index: 10; 

  /* --- FLUIDE GRÖSSE IMG --- */
  /*
   * clamp(MINIMALWERT, BEVORZUGTER WERT, MAXIMALWERT)
   * - Das Bild wird nie kleiner als 80px sein (auf sehr kleinen Handys).
   * - Das Bild wird nie größer als 200px sein (auf sehr großen Monitoren).
   * - Dazwischen skaliert es flexibel mit 12% der Bildschirmbreite (12vw).
   width: clamp(78px, 26vw, 150px);
  */
  /* Stellt sicher, dass das eigentliche Bild-Element im Container responsiv bleibt */
  height: auto;

  /* --- FLUIDE POSITIONIERUNG IMG --- */
  /*
   * Die Positionierung skaliert nun ebenfalls mit der Bildschirmgröße.
   * Das sorgt dafür, dass die Überlappung auf allen Geräten proportional wirkt.
   top: clamp(98px, 15vh, 118px); MOBILE
   top: clamp(152px, 15vh, 176px);
   left: clamp(-60px, -9vw, -20px); MOBILE
   left: clamp(-60px, -8vw, -20px);
   right: clamp(233px, 68vw, 256px); MOBILE
   right: clamp(798px, 64vw, 809px);
   transform: translateX(-20%);
   transform: translateY(-50%);
  */
  top: 30%;
  left: 2%;


  
  /* --- TRANSFORMATIONEN UND VISUELLE EFFEKTE --- */
  transform: rotate(260deg);

/* --- ANIMATIONEN (Scroll & Schweben) --- */
    animation: unblur-on-scroll-hero linear, gentle-float-hero 6s ease-in-out infinite;
    animation-timeline: view();
    animation-range: contain 30% contain 100%;

    /*
     * NEU: Sanfter Übergang für den Hover-Effekt.
     * Wir definieren, welche Eigenschaften sanft animiert werden sollen,
     * wenn sich ihr Wert ändert (z.B. durch :hover).
    */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.6s ease-in-out,
                opacity 0.6s ease-in-out;

    /* Performance-Optimierung */
    will-change: transform, filter, opacity;    
    
  

  /* --- OPTION 2: Visuelle Zurückhaltung --- */
  /* Zweck: Lässt das Bild weniger dominant erscheinen, damit es nicht
     vom Hauptinhalt ablenkt. */
  
    opacity: 0.6;
    filter: blur(8px);
  
  
  /* --- OPTION 3: Interaktiver Hover-Effekt --- */
  /* Zweck: Verändert das Bild, wenn der Mauszeiger darüber schwebt.
     Funktioniert am besten, wenn OPTION 1 (transition) aktiviert ist. 
       &:hover {
    transform: rotate(2.5deg) scale(1.08);
    opacity: 0.8;
    filter: blur(0.4px);
    }*/
}

@keyframes unblur-on-scroll-hero {
  0% {                   /* Am Anfang der Animation */
    filter: blur(8px);
    opacity: 0.6;
  }
  20% {                  /* In der Mitte der Animation */
    filter: blur(8px);
    opacity: 0.6;
  }
  70% {       
    filter: blur(0);
    opacity: 1;
  }
  95% {               
    filter: blur(0);
    opacity: 1;
  }
  98% {                 
    filter: blur(4);
    opacity: 0.8;
  }
  100% {                   /* Am Anfang der Animation */
    filter: blur(8px);
    opacity: 0.6;
    }
}

@keyframes gentle-float-hero {
  0% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}

 /*
 * ______________ Section Hello Home
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Home, Section: Hello
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-home-hello-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 25;
}

/* 
 * Schritt 2: Der Title in die Ebeme platzieren.
 */
.section-home-hello-wrapper .section-home-hello-title {
    position: relative;
    z-index: 15;
}

/* 
 * Schritt 3: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-home-hello-wrapper .section-home-hello-image {
  /* --- GRUNDEINSTELLUNGEN --- */
  position: absolute;
  z-index: 10;
  right: 10vw;
  top: 36%;
  right: auto;
  /* --- TRANSFORMATIONEN UND VISUELLE EFFEKTE --- */
  transform: rotate(0);
  /* Stellt sicher, dass das eigentliche Bild-Element im Container responsiv bleibt */
  height: auto;
  /*
   * =============================================================
   * OPTIONALE KONFIGURATION (zum Aktivieren einkommentieren)
   * =============================================================
   */

  /* --- OPTION 1: Sanfter Übergang für Hover-Effekte --- */
  /* Zweck: Sorgt dafür, dass alle Änderungen (Größe, Drehung, etc.)
     beim Überfahren mit der Maus sanft animiert werden. */
  /*
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              opacity 0.4s ease-in-out;
  */

  /* --- OPTION 2: Visuelle Zurückhaltung --- */
  /* Zweck: Lässt das Bild weniger dominant erscheinen, damit es nicht
     vom Hauptinhalt ablenkt. */
  /*
  opacity: 0.8;
  filter: blur(1px);
  */
  
  /* --- OPTION 3: Interaktiver Hover-Effekt --- */
  /* Zweck: Verändert das Bild, wenn der Mauszeiger darüber schwebt.
     Funktioniert am besten, wenn OPTION 1 (transition) aktiviert ist. */
  /*
  &:hover {
    transform: rotate(240deg) scale(1.1);
    opacity: 1;
    filter: blur(0);
  }
  */
}

/*
 * ===================================================================
 * TABLET-ANPASSUNGEN
 * min-width: 782px bedeutet "ab 782px und breiter".
 * ===================================================================
 */
@media (min-width: 782px) {

    .section-home-doula-wrapper .section-home-doula-image {
        /* Wir überschreiben nur die Position, der Rest bleibt gleich */
        top: -90px;
        left: auto; /* 'left' zurücksetzen */
        right: 5vw; /* Positionierung rechts */
        transform: none; /* Transformation zurücksetzen */
    }

}


/*
 * ===================================================================
 * GROSSE DESKTOP-ANPASSUNGEN
 * min-width: 1200px bedeutet "ab 1200px und breiter".
 * ===================================================================
 */
@media (min-width: 1200px) {

    .section-home-doula-wrapper .section-home-doula-image {
        /* Für sehr große Bildschirme machen wir das Bild größer */
        width: clamp(220px, 15vw, 300px);
        right: -50px; /* Lässt es aus dem Container ragen */
    }

}

    /* --- BEISPIEL 2: Rechts, vertikal mittig --- */
    /*
    top: 50%;
    right: 5%;
    width: 250px;
    transform: translateY(-50%); // Trick, um es exakt vertikal zu zentrieren
    */

    /* --- BEISPIEL 3: Unten, horizontal mittig und überlappend --- */
    /*
    bottom: -40px; // Rag-40px aus der Sektion nach unten heraus
    left: 50%;
    width: 180px;
    transform: translateX(-50%); // Trick, um es exakt horizontal zu zentrieren
    */

 /*
 * ______________ Section Doula Banner Home
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Home, Section: Doula
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-home-doula-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative; 
    z-index: 25;
}

/* 
 * Schritt 2: Die Überschrift zentrieren und eine Ebene zuweisen.
 */
.section-home-doula-wrapper .section-home-doula-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 15; 
}

/* 
 * Schritt 3: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-home-doula-wrapper .section-home-doula-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */
    top: -90px; /* 20px Abstand vom oberen Rand der Sektion */
    left: 68vw;  /* 5% Abstand vom linken Rand der Sektion */
   
    /* Stellt sicher, dass das eigentliche Bild-Element im Container responsiv bleibt */
    height: auto;

    /* --- BEISPIEL 2: Rechts, vertikal mittig --- */
    /*
    top: 50%;
    right: 5%;
    width: 250px;
    transform: translateY(-50%); // Trick, um es exakt vertikal zu zentrieren
    */

    /* --- BEISPIEL 3: Unten, horizontal mittig und überlappend --- */
    /*
    bottom: -40px; // Rag-40px aus der Sektion nach unten heraus
    left: 50%;
    width: 180px;
    transform: translateX(-50%); // Trick, um es exakt horizontal zu zentrieren
    */
/* --- ANIMATIONEN (Scroll & Schweben) --- */
    animation: unblur-on-scroll linear, gentle-float 6s ease-in-out infinite;
    animation-timeline: view();
    animation-range: contain 0% contain 100%;

    /*
     * NEU: Sanfter Übergang für den Hover-Effekt.
     * Wir definieren, welche Eigenschaften sanft animiert werden sollen,
     * wenn sich ihr Wert ändert (z.B. durch :hover).
    */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.6s ease-in-out,
                opacity 0.6s ease-in-out;

    /* Performance-Optimierung */
    will-change: transform, filter, opacity;    
    
  

  /* --- OPTION 2: Visuelle Zurückhaltung --- */
  /* Zweck: Lässt das Bild weniger dominant erscheinen, damit es nicht
     vom Hauptinhalt ablenkt. */
  
    opacity: 0.6;
    filter: blur(8px);
  
  
  /* --- OPTION 3: Interaktiver Hover-Effekt --- */
  /* Zweck: Verändert das Bild, wenn der Mauszeiger darüber schwebt.
     Funktioniert am besten, wenn OPTION 1 (transition) aktiviert ist. 
       &:hover {
    transform: rotate(2.5deg) scale(1.08);
    opacity: 0.8;
    filter: blur(0.4px);
    }*/
}

/* --- 3. Definition der Keyframe-Animationen (unverändert) --- */

@keyframes unblur-on-scroll {
  0% {                   /* Am Anfang der Animation */
    filter: blur(8px);
    opacity: 0.6;
  }
  20% {                  /* In der Mitte der Animation */
    filter: blur(0);
    opacity: 1;
  }
  70% {                  /* In der Mitte der Animation */
    filter: blur(0);
    opacity: 1;
  }
  95% {                 /* Am Ende der Animation */
    filter: blur(04);
    opacity: 0.8;
  }
  100% {                   /* Am Anfang der Animation */
    filter: blur(8px);
    opacity: 0.6;
    }
}

@keyframes gentle-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}

 /*
 * ______________ Section Call to Action 1 Home
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Home, Section: CtA
 */
/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-home-CtA1-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative; 
    z-index: 30;
}

/* 
 * Schritt 2: Die Überschrift zentrieren und eine Ebene zuweisen.
 */
.section-home-CtA1-wrapper .section-home-CtA1-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 35; 
}

/* 
 * Schritt 3: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-home-CtA1-wrapper .section-home-CtA1-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 30; 

    /* STANDARD-POSITION: Oben links, überlappend */
    top: -7%;
    right: 77vw;

/* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

    /* --- BEISPIEL 2: Rechts, vertikal mittig --- */
    /*
    top: 50%;
    right: 5%;
    width: 250px;
    transform: translateY(-50%); // Trick, um es exakt vertikal zu zentrieren
    */

    /* --- BEISPIEL 3: Unten, horizontal mittig und überlappend --- */
    /*
    bottom: -40px; // Rag-40px aus der Sektion nach unten heraus
    left: 50%;
    width: 180px;
    transform: translateX(-50%); // Trick, um es exakt horizontal zu zentrieren
    */
}

 /*
 * ______________ Section Call to Action 2 Home
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Home, Section: CtA2
 */
/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-home-CtA2-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative; 
    z-index: 25;
}

/* 
 * Schritt 2: Die Überschrift zentrieren und eine Ebene zuweisen.
 */
.section-home-CtA2-wrapper .section-home-CtA2-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 35; 
}

/* 
 * Schritt 3: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-home-CtA2-wrapper .section-home-CtA2-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 30; 

    /* STANDARD-POSITION: Oben links, überlappend */
    top: 5%;
    left: 75vw;
    right: auto;

/* --- ANIMATIONEN (Scroll & Schweben) --- */
    animation: unblur-on-scroll linear, gentle-float 6s ease-in-out infinite;
    animation-timeline: view();
    animation-range: contain 0% contain 100%;

    /*
     * NEU: Sanfter Übergang für den Hover-Effekt.
     * Wir definieren, welche Eigenschaften sanft animiert werden sollen,
     * wenn sich ihr Wert ändert (z.B. durch :hover).
    */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.6s ease-in-out,
                opacity 0.6s ease-in-out;

    /* Performance-Optimierung */
    will-change: transform, filter, opacity;    
    
  

  /* --- OPTION 2: Visuelle Zurückhaltung --- */
  /* Zweck: Lässt das Bild weniger dominant erscheinen, damit es nicht
     vom Hauptinhalt ablenkt. */
  
    opacity: 0.6;
    filter: blur(8px);

/* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

    /* --- BEISPIEL 2: Rechts, vertikal mittig --- */
    /*
    top: 50%;
    right: 5%;
    width: 250px;
    transform: translateY(-50%); // Trick, um es exakt vertikal zu zentrieren
    */

    /* --- BEISPIEL 3: Unten, horizontal mittig und überlappend --- */
    /*
    bottom: -40px; // Rag-40px aus der Sektion nach unten heraus
    left: 50%;
    width: 180px;
    transform: translateX(-50%); // Trick, um es exakt horizontal zu zentrieren
    */
}

 /*
 * ______________ Section Doula Dienste Home
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Home, Section: Doula Dienste
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-home-dd-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 25;
}

/* 
 * Schritt 2: Die Überschrift zentrieren und eine Ebene zuweisen.
 */
.section-home-dd-wrapper .section-home-dd-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 15; 
}

/* 
 * Schritt 3: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-home-dd-wrapper .section-home-dd-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */
    top: -190%; /* 20px Abstand vom oberen Rand der Sektion */
    left: -5%;  /* 5% Abstand vom linken Rand der Sektion */
    /* Bild drehen */
    transform: rotate(0deg); /* dreht das Bild um 15 Grad im Uhrzeigersinn */
    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

    /* --- BEISPIEL 2: Rechts, vertikal mittig --- */
    /*
    top: 50%;
    right: 5%;
    width: 250px;
    transform: translateY(-50%); // Trick, um es exakt vertikal zu zentrieren
    */

    /* --- BEISPIEL 3: Unten, horizontal mittig und überlappend --- */
    /*
    bottom: -40px; // Rag-40px aus der Sektion nach unten heraus
    left: 50%;
    width: 180px;
    transform: translateX(-50%); // Trick, um es exakt horizontal zu zentrieren
    */
}

 /*
 * ______________ Section Rezept Empfehlung Home
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Home, Section: Rezept
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-home-rezept-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative; 
    z-index: 25;
}

.section-home-rezept-wrapper .section-home-rezept-CtA-wrapper {
    position: relative;
    z-index: 15;
}

.section-home-rezept-wrapper .section-home-rezept-title-wrapper {
    position: relative;
    z-index: 15;
}

.section-home-rezept-wrapper .section-home-rezept-title2-wrapper {
    position: relative;
    z-index: 10;
}

/* 
 * Schritt 3: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-home-rezept-wrapper .section-home-rezept-image img {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 20; 

    /* STANDARD-POSITION: Oben links, überlappend */
    left: 60vw;
    top: 11%;
    /* Bild drehen */
    transform: scaleX(-1);

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

    /* --- BEISPIEL 2: Rechts, vertikal mittig --- */
    /*
    top: 50%;
    right: 5%;
    width: 250px;
    transform: translateY(-50%); // Trick, um es exakt vertikal zu zentrieren
    */

    /* --- BEISPIEL 3: Unten, horizontal mittig und überlappend --- */
    /*
    bottom: -40px; // Rag-40px aus der Sektion nach unten heraus
    left: 50%;
    width: 180px;
    transform: translateX(-50%); // Trick, um es exakt horizontal zu zentrieren
    */
}

.section-home-rezept-wrapper .section-home-rezept-image2 {
        /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 20; 

    /* STANDARD-POSITION: Oben links, überlappend */
    left: 16vw;
    top: 52%;
    /* Bild drehen */
    transform: scaleX(-1);

    /* --- ANIMATIONEN (Scroll & Schweben) --- */
    animation: unblur-on-scroll linear, gentle-float 6s ease-in-out infinite;
    animation-timeline: view();
    animation-range: contain 0% contain 100%;

    /*
     * NEU: Sanfter Übergang für den Hover-Effekt.
     * Wir definieren, welche Eigenschaften sanft animiert werden sollen,
     * wenn sich ihr Wert ändert (z.B. durch :hover).
    */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.6s ease-in-out,
                opacity 0.6s ease-in-out;

    /* Performance-Optimierung */
    will-change: transform, filter, opacity;    
    
  

  /* --- OPTION 2: Visuelle Zurückhaltung --- */
  /* Zweck: Lässt das Bild weniger dominant erscheinen, damit es nicht
     vom Hauptinhalt ablenkt. */
  
    opacity: 0.6;
    filter: blur(8px);

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

    /* --- BEISPIEL 2: Rechts, vertikal mittig --- */
    /*
    top: 50%;
    right: 5%;
    width: 250px;
    transform: translateY(-50%); // Trick, um es exakt vertikal zu zentrieren
    */

    /* --- BEISPIEL 3: Unten, horizontal mittig und überlappend --- */
    /*
    bottom: -40px; // Rag-40px aus der Sektion nach unten heraus
    left: 50%;
    width: 180px;
    transform: translateX(-50%); // Trick, um es exakt horizontal zu zentrieren
    */
}


/*
 /*
 * ______________ Section Raum für Inspo Home
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Home, Section: Inspo
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-home-inspo-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 25;
}

/* 
 * Schritt 2: Die Überschrift zentrieren und eine Ebene zuweisen.
 */
.section-home-inspo-wrapper .section-home-inspo-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 15; 
}

/* 
 * Schritt 3: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-home-inspo-wrapper .section-home-inspo-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* Bild drehen */
    transform: scaleX(1);

    /* STANDARD-POSITION: Oben links, überlappend */
    
    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

    /* --- ANIMATIONEN (Scroll & Schweben) --- */
    animation: unblur-on-scroll linear, gentle-float 6s ease-in-out infinite;
    animation-timeline: view();
    animation-range: contain 0% contain 100%;

    /*
     * NEU: Sanfter Übergang für den Hover-Effekt.
     * Wir definieren, welche Eigenschaften sanft animiert werden sollen,
     * wenn sich ihr Wert ändert (z.B. durch :hover).
    */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.6s ease-in-out,
                opacity 0.6s ease-in-out;

    /* Performance-Optimierung */
    will-change: transform, filter, opacity;    
    
  

  /* --- OPTION 2: Visuelle Zurückhaltung --- */
  /* Zweck: Lässt das Bild weniger dominant erscheinen, damit es nicht
     vom Hauptinhalt ablenkt. */
  
    opacity: 0.6;
    filter: blur(8px);


    /* --- BEISPIEL 2: Rechts, vertikal mittig --- */
    /*
    top: 50%;
    right: 5%;
    width: 250px;
    transform: translateY(-50%); // Trick, um es exakt vertikal zu zentrieren
    */

    /* --- BEISPIEL 3: Unten, horizontal mittig und überlappend --- */
    /*
    bottom: -40px; // Rag-40px aus der Sektion nach unten heraus
    left: 50%;
    width: 180px;
    transform: translateX(-50%); // Trick, um es exakt horizontal zu zentrieren
    */
}

/*
 * ______________ Section Rezept Empfehlung Home
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Home, Section: Rezept
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-home-CtA3-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 25;
}

/* 
 * Schritt 2: Die Überschrift zentrieren und eine Ebene zuweisen.
 */
.section-home-CtA3-wrapper .section-home-CtA3-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 15; 
}

/* 
 * Schritt 3: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-home-CtA3-wrapper .section-home-CtA3-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */
    left: 1vw;
    top: 7.5%;
    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

    /* --- BEISPIEL 2: Rechts, vertikal mittig --- */
    /*
    top: 50%;
    right: 5%;
    width: 250px;
    transform: translateY(-50%); // Trick, um es exakt vertikal zu zentrieren
    */

    /* --- BEISPIEL 3: Unten, horizontal mittig und überlappend --- */
    /*
    bottom: -40px; // Rag-40px aus der Sektion nach unten heraus
    left: 50%;
    width: 180px;
    transform: translateX(-50%); // Trick, um es exakt horizontal zu zentrieren
    */
}

    /* --- Seite DIENSTE --- */

/*
 * ______________ Section Kinderwunsch Dienste
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Dienste, Section: Kinderwunsch
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-dienst-kindw-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 25;
}

/* 
 * Schritt 2: Die Überschrift zentrieren und eine Ebene zuweisen.
 */
.section-dienst-kindw-wrapper .section-dienst-kindw-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 15; 
}

/* 
 * Schritt 3: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-dienst-kindw-wrapper .section-dienst-kindw-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */
    left: 58vw;
    bottom: 40%;
    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

    /* --- ANIMATIONEN (Scroll & Schweben) --- */
    animation: unblur-on-scroll linear, gentle-float 6s ease-in-out infinite;
    animation-timeline: view();
    animation-range: contain 0% contain 100%;

    /*
     * NEU: Sanfter Übergang für den Hover-Effekt.
     * Wir definieren, welche Eigenschaften sanft animiert werden sollen,
     * wenn sich ihr Wert ändert (z.B. durch :hover).
    */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.6s ease-in-out,
                opacity 0.6s ease-in-out;

    /* Performance-Optimierung */
    will-change: transform, filter, opacity;    
    
  

  /* --- OPTION 2: Visuelle Zurückhaltung --- */
  /* Zweck: Lässt das Bild weniger dominant erscheinen, damit es nicht
     vom Hauptinhalt ablenkt. */
  
    opacity: 0.6;
    filter: blur(8px);


    /* --- BEISPIEL 2: Rechts, vertikal mittig --- */
    /*
    top: 50%;
    right: 5%;
    width: 250px;
    transform: translateY(-50%); // Trick, um es exakt vertikal zu zentrieren
    */

    /* --- BEISPIEL 3: Unten, horizontal mittig und überlappend --- */
    /*
    bottom: -40px; // Rag-40px aus der Sektion nach unten heraus
    left: 50%;
    width: 180px;
    transform: translateX(-50%); // Trick, um es exakt horizontal zu zentrieren
    */
}

/*
 * ______________ Section Geburt Dienste
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Dienste, Section: Geburt
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-dienst-birth-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 25;
}

/* 
 * Schritt 2: Die Überschrift zentrieren und eine Ebene zuweisen.
 */
.section-dienst-birth-wrapper .section-dienst-birth-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 15; 
}

/* 
 * Schritt 3: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-dienst-birth-wrapper .section-dienst-birth-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */
    right: 1.5vw;
    top: 88vw;

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

    /* --- ANIMATIONEN (Scroll & Schweben) --- */
    animation: unblur-on-scroll linear, gentle-float 6s ease-in-out infinite;
    animation-timeline: view();
    animation-range: contain 0% contain 100%;

    /*
     * NEU: Sanfter Übergang für den Hover-Effekt.
     * Wir definieren, welche Eigenschaften sanft animiert werden sollen,
     * wenn sich ihr Wert ändert (z.B. durch :hover).
    */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.6s ease-in-out,
                opacity 0.6s ease-in-out;

    /* Performance-Optimierung */
    will-change: transform, filter, opacity;    
    
  

  /* --- OPTION 2: Visuelle Zurückhaltung --- */
  /* Zweck: Lässt das Bild weniger dominant erscheinen, damit es nicht
     vom Hauptinhalt ablenkt. */
  
    opacity: 0.6;
    filter: blur(8px);

    

    /* --- BEISPIEL 2: Rechts, vertikal mittig --- */
    /*
    top: 50%;
    right: 5%;
    width: 250px;
    transform: translateY(-50%); // Trick, um es exakt vertikal zu zentrieren
    */

    /* --- BEISPIEL 3: Unten, horizontal mittig und überlappend --- */
    /*
    bottom: -40px; // Rag-40px aus der Sektion nach unten heraus
    left: 50%;
    width: 180px;
    transform: translateX(-50%); // Trick, um es exakt horizontal zu zentrieren
    */
}

.section-dienst-birth-wrapper .section-dienst-birth-image2 {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */
    bottom: 92vw;
    left: -8vw;

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

    /* --- ANIMATIONEN (Scroll & Schweben) --- */
    animation: unblur-on-scroll linear, gentle-float 6s ease-in-out infinite;
    animation-timeline: view();
    animation-range: contain 0% contain 100%;

    /*
     * NEU: Sanfter Übergang für den Hover-Effekt.
     * Wir definieren, welche Eigenschaften sanft animiert werden sollen,
     * wenn sich ihr Wert ändert (z.B. durch :hover).
    */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.6s ease-in-out,
                opacity 0.6s ease-in-out;

    /* Performance-Optimierung */
    will-change: transform, filter, opacity;    
    
  

  /* --- OPTION 2: Visuelle Zurückhaltung --- */
  /* Zweck: Lässt das Bild weniger dominant erscheinen, damit es nicht
     vom Hauptinhalt ablenkt. */
  
    opacity: 0.6;
    filter: blur(8px);

    

    /* --- BEISPIEL 2: Rechts, vertikal mittig --- */
    /*
    top: 50%;
    right: 5%;
    width: 250px;
    transform: translateY(-50%); // Trick, um es exakt vertikal zu zentrieren
    */

    /* --- BEISPIEL 3: Unten, horizontal mittig und überlappend --- */
    /*
    bottom: -40px; // Rag-40px aus der Sektion nach unten heraus
    left: 50%;
    width: 180px;
    transform: translateX(-50%); // Trick, um es exakt horizontal zu zentrieren
    */
}

/*
 * ______________ Section Wochenbett Dienste
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Dienste, Section: Bett
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-dienst-bett-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 25;
}

/* 
 * Schritt 2: Die Überschrift zentrieren und eine Ebene zuweisen.
 */
.section-dienst-bett-wrapper .section-dienst-bett-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 15; 
}

/* 
 * Schritt 3: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-dienst-bett-wrapper .section-dienst-bett-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10;

    /* STANDARD-POSITION: Oben links, überlappend */
    transform: rotate(-15deg);
    top: 88vw;
    left: 8vw;

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

    /* --- ANIMATIONEN (Scroll & Schweben) --- */
    animation: unblur-on-scroll linear, gentle-float 6s ease-in-out infinite;
    animation-timeline: view();
    animation-range: contain 0% contain 100%;

    /*
     * NEU: Sanfter Übergang für den Hover-Effekt.
     * Wir definieren, welche Eigenschaften sanft animiert werden sollen,
     * wenn sich ihr Wert ändert (z.B. durch :hover).
    */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.6s ease-in-out,
                opacity 0.6s ease-in-out;

    /* Performance-Optimierung */
    will-change: transform, filter, opacity;    
    
  

  /* --- OPTION 2: Visuelle Zurückhaltung --- */
  /* Zweck: Lässt das Bild weniger dominant erscheinen, damit es nicht
     vom Hauptinhalt ablenkt. */
  
    opacity: 0.6;
    filter: blur(8px);

    

    /* --- BEISPIEL 2: Rechts, vertikal mittig --- */
    /*
    top: 50%;
    right: 5%;
    width: 250px;
    transform: translateY(-50%); // Trick, um es exakt vertikal zu zentrieren
    */

    /* --- BEISPIEL 3: Unten, horizontal mittig und überlappend --- */
    /*
    bottom: -40px; // Rag-40px aus der Sektion nach unten heraus
    left: 50%;
    width: 180px;
    transform: translateX(-50%); // Trick, um es exakt horizontal zu zentrieren
    */
}

/*
 * ______________ Section Wochenbett Dienste
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Dienste, Section: Bett
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-dienst-well-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 25;
}

/* 
 * Schritt 2: Die Überschrift zentrieren und eine Ebene zuweisen.
 */
.section-dienst-well-wrapper .section-dienst-well-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 15; 
}

/* 
 * Schritt 3: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-dienst-well-wrapper .section-dienst-well-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */
    transform: scaleX(-1);
    left: 51vw;
    top: -0.5%;

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

}

.section-dienst-well-wrapper .section-dienst-well-image2 {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */
    transform: scaleX(-1);
    left: 0.5vw;
    bottom: 7%;

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;
    

    /* --- BEISPIEL 2: Rechts, vertikal mittig --- */
    /*
    top: 50%;
    right: 5%;
    width: 250px;
    transform: translateY(-50%); // Trick, um es exakt vertikal zu zentrieren
    */

    /* --- BEISPIEL 3: Unten, horizontal mittig und überlappend --- */
    /*
    bottom: -40px; // Rag-40px aus der Sektion nach unten heraus
    left: 50%;
    width: 180px;
    transform: translateX(-50%); // Trick, um es exakt horizontal zu zentrieren
    */
}

.section-dienst-well-wrapper .section-dienst-well-image3 {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */

    top: 48%;
    right: 1vw;

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;
    

    /* --- BEISPIEL 2: Rechts, vertikal mittig --- */
    /*
    top: 50%;
    right: 5%;
    width: 250px;
    transform: translateY(-50%); // Trick, um es exakt vertikal zu zentrieren
    */

    /* --- BEISPIEL 3: Unten, horizontal mittig und überlappend --- */
    /*
    bottom: -40px; // Rag-40px aus der Sektion nach unten heraus
    left: 50%;
    width: 180px;
    transform: translateX(-50%); // Trick, um es exakt horizontal zu zentrieren
    */
}

    /* --- Seite ABOUT --- */

/*
 * ______________ Section Hey About
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:About, Section: Hey
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-about-hey-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 25;
}

/* 
 * Schritt 2: Die Überschrift zentrieren und eine Ebene zuweisen.
 */
.section-about-hey-wrapper .section-about-hey-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 10; 
}

/* 
 * Schritt 3: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-about-hey-wrapper .section-about-hey-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
       
    width: clamp(200px, 50vw, 250px);

    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 15; 

    /* STANDARD-POSITION: Oben links, überlappend */
    transform: scaleX(-1);
    top: -16vh;
    right: 3vw;

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

}

.section-about-hey-wrapper .section-about-hey-image2 {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
       
    width: clamp(100px, 50vw, 150px);

    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 20; 

    /* STANDARD-POSITION: Oben links, überlappend */
    transform: scaleX(-1);
    top: -11vh;
    left: -9vw;

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

}

/*
 * ______________ Section Banner About
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:About, Section: Banner
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-about-banner-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 25;
}

/*
 * ______________ Section Banner2 About
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:About, Section: Banner2
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-about-banner2-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 20;
}

.section-about-banner2-wrapper .section-about-banner2-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 15; 
}

.section-about-banner2-wrapper .section-about-banner2-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 

    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */
    top: -4vh;
    left: -6vw;

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

}

/*
 * ______________ Section Frauengesundheit About
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:About, Section: Banner2
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-about-well2-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 20;
}

.section-about-well2-wrapper .section-about-well2-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 15; 
}

.section-about-well2-wrapper .section-about-well2-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
       
    width: clamp(200px, 50vw, 250px);

    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */
    top: -28%;
    left: -6%;

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

        /* --- ANIMATIONEN (Scroll & Schweben) --- */
    animation: unblur-on-scroll linear, gentle-float 6s ease-in-out infinite;
    animation-timeline: view();
    animation-range: contain 0% contain 100%;

    /*
     * NEU: Sanfter Übergang für den Hover-Effekt.
     * Wir definieren, welche Eigenschaften sanft animiert werden sollen,
     * wenn sich ihr Wert ändert (z.B. durch :hover).
    */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.6s ease-in-out,
                opacity 0.6s ease-in-out;

    /* Performance-Optimierung */
    will-change: transform, filter, opacity;    
    
  

  /* --- OPTION 2: Visuelle Zurückhaltung --- */
  /* Zweck: Lässt das Bild weniger dominant erscheinen, damit es nicht
     vom Hauptinhalt ablenkt. */
  
    opacity: 0.6;
    filter: blur(8px);


}

.section-about-well2-wrapper .section-about-well2-image2 {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 

    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */
    top: -2vh;
    left: 8vw;

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

}

/*
 * ______________ Section Warum About
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:About, Section: Warum
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-about-why-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 20;
}

.section-about-why-wrapper .section-about-why-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 15; 
}

.section-about-why-wrapper .section-about-why-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: fixed; 

    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */


    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */

        /* --- ANIMATIONEN (Scroll & Schweben) --- */
    animation: unblur-on-scroll linear, gentle-float 6s ease-in-out infinite;
    animation-timeline: view();
    animation-range: contain 0% contain 100%;

    /*
     * NEU: Sanfter Übergang für den Hover-Effekt.
     * Wir definieren, welche Eigenschaften sanft animiert werden sollen,
     * wenn sich ihr Wert ändert (z.B. durch :hover).
    */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.6s ease-in-out,
                opacity 0.6s ease-in-out;

    /* Performance-Optimierung */
    will-change: transform, filter, opacity;    
    
  

  /* --- OPTION 2: Visuelle Zurückhaltung --- */
  /* Zweck: Lässt das Bild weniger dominant erscheinen, damit es nicht
     vom Hauptinhalt ablenkt. */
  
    opacity: 0.6;
    filter: blur(8px);


}

/*
 * ______________ Section Warum2 About
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:About, Section: Warum2
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-about-why2-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 20;
}

.section-about-why2-wrapper .section-about-why2-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 15; 
}

.section-about-why2-wrapper .section-about-why2-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 


    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 
    left: 23%;

    /* STANDARD-POSITION: Oben links, überlappend */

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

}

.section-about-why2-wrapper .section-about-why2-image2 {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 

    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */
    left: 23%;
    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

}

.section-about-why2-wrapper .section-about-why2-image3 {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 

    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */
    left: 23%;
    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

}

/*
 * ______________ Section Wichtig About
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:About, Section: Wichtig
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-about-wicht-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 20;
}

.section-about-wicht-wrapper .section-about-wicht-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 15; 
}

.section-about-wicht-wrapper .section-about-wicht-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 


    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */
    right: -20%;
    top: -5%;

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

}

/*
 * ______________ Section Bio About
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:About, Section: Bio
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-about-bio-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 20;
}

.section-about-way-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 80;
}

.section-about-bio-wrapper .section-about-bio-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 15; 
}

.section-about-bio-wrapper .section-about-bio-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 


    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */
    left: 8%;
    top: -2%;

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

}

.section-about-bio-wrapper .section-about-bio-image2 {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 


    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 10; 

    /* STANDARD-POSITION: Oben links, überlappend */
    bottom: 2%;
    left: 18%;

    /* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

}

    /* --- Seite KONTAKT --- */

/*
 * ______________ Section Hey About
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:About, Section: Hey
 */

/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-contact-hero-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative;
    z-index: 35;
}
 /*
 * ______________ Section Call to Action 1 Home
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Home, Section: CtA
 */
/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-contact-CtA1-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative; 
    z-index: 30;
}

/* 
 * Schritt 2: Die Überschrift zentrieren und eine Ebene zuweisen.
 */
.section-contact-CtA1-wrapper .section-contact-CtA1-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 35; 
}

/* 
 * Schritt 3: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-contact-CtA1-wrapper .section-contact-CtA1-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 30; 
    /* STANDARD-POSITION: Oben links, überlappend */
    top: 5%;
    left: 3%;

/* Stellt sicher, dass das eigentliche Bild-Element responsiv bleibt */
    height: auto;

    /* --- BEISPIEL 2: Rechts, vertikal mittig --- */
    /*
    top: 50%;
    right: 5%;
    width: 250px;
    transform: translateY(-50%); // Trick, um es exakt vertikal zu zentrieren
    */

    /* --- BEISPIEL 3: Unten, horizontal mittig und überlappend --- */
    /*
    bottom: -40px; // Rag-40px aus der Sektion nach unten heraus
    left: 50%;
    width: 180px;
    transform: translateX(-50%); // Trick, um es exakt horizontal zu zentrieren
    */
}
/*
 * ______________ Banner Blog
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Blog, Section: Hero
 */
.section-blog-banner {
    grid-template-columns: repeat(2, 1fr);
    gap: auto;
}

 /*
 * ______________ Section Call to Action 1 Blog
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Home, Section: CtA
 */
/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-blog-CtA1-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative; 
    z-index: 30;
}

/* 
 * Schritt 2: Die Überschrift zentrieren und eine Ebene zuweisen.
 */
.section-blog-CtA1-wrapper .section-blog-CtA1-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 35; 
}

/* 
 * Schritt 3: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-blog-CtA1-wrapper .section-blog-CtA1-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 30; 
    left: -12vw;
    transform: scaleX(-1);

}

 /*
 * ______________ Section Gedanken tanken Blog
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:Blog, Section: Gt
 */
/* 
 * Schritt 1: Den Sektions-Container als unsere "Leinwand" (Anker) definieren.
 */
.section-blog-Gt-wrapper {
    /* WICHTIG: Dient als Bezugspunkt für unser absolut positioniertes Bild. */
    position: relative; 
    z-index: 30;
}

/* 
 * Schritt 2: Die Überschrift zentrieren und eine Ebene zuweisen.
 */
.section-blog-Gt-wrapper .section-blog-Gt-title {
    /* Stellt sicher, dass die Überschrift am Ebenen-System teilnimmt. */
    position: relative;
    /* Liegt auf einer unteren Ebene, damit das Bild darüber erscheinen kann. */
    z-index: 35; 
}

/* 
 * Schritt 3: Das Bild aus dem Layout-Fluss nehmen und frei positionieren.
 */
.section-blog-Gt-wrapper .section-blog-Gt-image {
    /* WICHTIG: Nimmt das Bild aus dem normalen Fluss und lässt es "schweben". */
    position: absolute; 
    
    /* Liegt auf einer höheren Ebene und überlappt damit die Überschrift. */
    z-index: 30; 

}

/*
 * ______________ Media Query
 * Version: 1.0
 * Author: happy.dawg
 * Beschreibung: Seite:ALL, Section: ALL
 */

@media (min-width: 782px) {

    .efo-header-wrapper .efo-central-logo {
        left: 45%;
    }
  	
  	.ticker-item {
    font-size: 0.7rem;
	}
   	.ticker-item {
    font-size: 0.7rem;
	}

    .section-home-dd-wrapper .section-home-dd-image {
    top: -158%; /* 20px Abstand vom oberen Rand der Sektion */
    left: -5%;  /* 5% Abstand vom linken Rand der Sektion */
    }

    .section-home-CtA2-wrapper .section-home-CtA2-image {
    top: 10%;
    left: auto;
    right: auto;
    right: 20%;
    }

    .section-home-rezept-wrapper .section-home-rezept-image2 {
        /* Wir überschreiben nur die Position, der Rest bleibt gleich */
        left: 26vw;
        width: 350px;
    }
    .section-home-CtA3-wrapper .section-home-CtA3-image {
        /* Wir überschreiben nur die Position, der Rest bleibt gleich */
        left: auto;
        top: 8%;
        width: 350px;
    }
    .section-dienst-kindw-wrapper .section-dienst-kindw-image {
        /* STANDARD-POSITION: Oben links, überlappend */
        left: 1vw;
        bottom: 1vw;
        transform: scaleX(-1);
    }
    .section-dienst-birth-wrapper .section-dienst-birth-image {
        /* STANDARD-POSITION: Oben links, überlappend */
        top: 38vw;
        right: 8vw;
    }
    .section-dienst-birth-wrapper .section-dienst-birth-image2 {
        /* STANDARD-POSITION: Oben links, überlappend */
        bottom: 67vw;
        left: 1vw;
    }
    .section-dienst-bett-wrapper .section-dienst-bett-image {
        transform: rotate(-15deg);
        top: -2vw;
        left: 72vw;
    }
    .section-dienst-well-wrapper .section-dienst-well-image {
        /* STANDARD-POSITION: Oben links, überlappend */
        left: 29vw;
        top: 14%;
    }

    .section-dienst-well-wrapper .section-dienst-well-image2 {
        /* STANDARD-POSITION: Oben links, überlappend */
        transform: scaleX(-1);
        left: 51vw;
        bottom: 28%;
    }

    .section-dienst-well-wrapper .section-dienst-well-image3 {
        /* STANDARD-POSITION: Oben links, überlappend */
        top: 44%;
        right: 1vw;
    }
    .section-about-hey-wrapper .section-about-hey-image {
        top: -18vh;
        right: 3vw; 
    }

    .section-about-hey-wrapper .section-about-hey-image2 {
        top: -11vh;
        left: 8vw;
    }

    .section-about-banner2-wrapper .section-about-banner2-image {
        top: -3vh;
        left: -5.5vw;
    }   

    .section-about-why-wrapper .section-about-why-image {

    }
    .section-about-why2-wrapper .section-about-why2-image {
        /* STANDARD-POSITION: Oben links, überlappend */
        left: 16%;
    }

    .section-about-why2-wrapper .section-about-why2-image2 {
        /* STANDARD-POSITION: Oben links, überlappend */
        left: 46%;
    }

    .section-about-why2-wrapper .section-about-why2-image3 {
        /* STANDARD-POSITION: Oben links, überlappend */
        left: 79%;
    }

    .section-about-wicht-wrapper .section-about-wicht-image {
        /* STANDARD-POSITION: Oben links, überlappend */
        top: -5.5%;
        left: 49%;
        right: auto;
    }

    .section-about-bio-wrapper .section-about-bio-image2 {
        bottom: 2%;
        left: 78%;
    }

    .section-home-hello-wrapper .section-home-hello-image {
    /* --- GRUNDEINSTELLUNGEN --- */
        right: 10vw;
        top: 58%;
        right: auto;
    }

    .section-blog-banner {
        grid-template-columns: repeat(4, 1fr);
        gap: auto;
    }

    .section-blog-CtA1-wrapper .section-blog-CtA1-image {
        left: 85%;
        transform: none;
    }

}


/*
 * ===================================================================
 * GROSSE DESKTOP-ANPASSUNGEN
 * min-width: 1200px bedeutet "ab 1200px und breiter".
 * ===================================================================
 */
@media (min-width: 978px) {

    .section-home-dd-wrapper .section-home-dd-image {
    top: -150%; /* 20px Abstand vom oberen Rand der Sektion */
    left: -5%;  /* 5% Abstand vom linken Rand der Sektion */
    }
  
  	.ticker-item-footer {
    font-size: 0.8rem;
	}
  	
    .ticker-item {
    font-size: 0.8rem;
	}

    .section-home-CtA2-wrapper .section-home-CtA2-image {
    top: 10%;
    left: auto;
    right: auto;
    }

    .section-home-rezept-wrapper .section-home-rezept-image2 {
        /* Für sehr große Bildschirme machen wir das Bild größer */
        left: 26vw;
    }
    .section-home-CtA3-wrapper .section-home-CtA3-image {
        /* Wir überschreiben nur die Position, der Rest bleibt gleich */
        left: auto;
        top: 9%;
        width: 350px;
    }
    .section-dienst-kindw-wrapper .section-dienst-kindw-image {
        /* STANDARD-POSITION: Oben links, überlappend */
        left: clamp(930px, 72vw, 1300px);
        top: 9%;
        transform: scaleX(-1);
        width: 180px;
    }
    .section-dienst-birth-wrapper .section-dienst-birth-image {
        /* STANDARD-POSITION: Oben links, überlappend */
        top: clamp(380px, 32vw, 400px);
        left: 38vw;
        width: 200px;
    }
    .section-dienst-birth-wrapper .section-dienst-birth-image2 {
        /* STANDARD-POSITION: Oben links, überlappend */
        top: -5vw;
        left: -5.5vw;
        width: 200px;
    }
    .section-dienst-bett-wrapper .section-dienst-bett-image {
        top: -2vw;
        left: 38.5vw;
        width: 230px;
    }
    .section-dienst-well-wrapper .section-dienst-well-image {
        /* STANDARD-POSITION: Oben links, überlappend */
        left: 51vw;
        top: 15vw;
    }

    .section-dienst-well-wrapper .section-dienst-well-image2 {
        /* STANDARD-POSITION: Oben links, überlappend */
        transform: scaleX(-1);
        right: 42vw;
        bottom: 4vw;
    }

    .section-dienst-well-wrapper .section-dienst-well-image3 {
        /* STANDARD-POSITION: Oben links, überlappend */
        top: clamp(520px, 48vw, 620px);
        right: 18vw;
    }

    .section-about-hey-wrapper .section-about-hey-image {
        top: -18vh;
        right: 3vw; 
    }

    .section-about-hey-wrapper .section-about-hey-image2 {
        top: -11vh;
        left: 8vw;
    }

        .section-about-banner2-wrapper .section-about-banner2-image {
        top: 1vh;
        left: 8vw;
    }   

    .section-about-why-wrapper .section-about-why-image {

    }

    .section-about-why2-wrapper .section-about-why2-image {
    /* STANDARD-POSITION: Oben links, überlappend */
    left: 23%;
    }

    .section-about-why2-wrapper .section-about-why2-image2 {
        /* STANDARD-POSITION: Oben links, überlappend */
    left: 46%;
    }

    .section-about-why2-wrapper .section-about-why2-image3 {
        /* STANDARD-POSITION: Oben links, überlappend */
    left: 73%;
    }
    .section-about-bio-wrapper .section-about-bio-image2 {
        bottom: 2%;
        left: 78%;
    }

    .section-home-hello-wrapper .section-home-hello-image {
    /* --- GRUNDEINSTELLUNGEN --- */
        right: 10vw;
        top: 49%;
        right: auto;
    }

    .section-blog-CtA1-wrapper .section-blog-CtA1-image {
        left: 78vw;

    }
}

/* 
 * Version: 8.1.0
 * Haupt-Container des responsiven Navigationsmenüs
 * Dieser Container wird sichtbar, wenn das Burger-Menü geöffnet wird
 */
.wp-block-navigation__responsive-container.is-menu-open {
    /* Mindesthöhe für ausreichend Platz für alle Menüpunkte */
    min-height: 300px !important;
    
    /* Maximale Höhe, um Overflow zu vermeiden */
    max-height: 80vh !important;
    
    /* Breite auf 100% für volle mobile Abdeckung */
    width: 95% !important;
    
    /* Padding für bessere Lesbarkeit und Touch-Targets */
    padding: 20px 15px !important;
    
    /* Sanfte Übergänge für professionelles Erscheinungsbild */
    transition: all 0.3s ease-in-out !important;
    
    /* Z-Index erhöhen, damit Menü über anderen Inhalten liegt */
    z-index: 999 !important;
    
    /* Box-Shadow für bessere Abgrenzung vom Hintergrund */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* 
 * Version: 8.1.0
 * Navigation-Liste innerhalb des Containers
 * Optimierung der Menüpunkte-Darstellung
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    /* Flexbox für bessere Verteilung der Menüpunkte */
    display: flex !important;
    flex-direction: column !important;
    
    /* Abstand zwischen den Menüpunkten */
    gap: 12px !important;
    
    /* Padding für bessere Touch-Targets */
    padding: 10px 0 !important;
    
    /* Maximale Breite für bessere Lesbarkeit */
    max-width: 100% !important;
}

/* 
 * Version: 8.1.0
 * Einzelne Menüpunkte
 * Verbesserung der Klickbarkeit und Lesbarkeit
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    /* Mindesthöhe für Touch-Targets (empfohlen: 44px) */
    min-height: 44px !important;
    
    /* Padding für bessere Klickbarkeit */
    padding: 8px 12px !important;
    
    /* Flexbox für vertikale Zentrierung */
    display: flex !important;
    align-items: center !important;
    
    /* Sanfte Hover-Übergänge */
    transition: background-color 0.2s ease !important;
    
    /* Runde Ecken für moderneres Aussehen */
    border-radius: 6px !important;
}

/* 
 * Version: 8.1.0
 * Hover-Effekt für Menüpunkte
 * Verbesserte Benutzerinteraktion
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:hover {
    /* Subtiler Hover-Hintergrund */
    background-color: rgba(0, 0, 0, 0.05) !important;
    
    /* Leichte Transformation für Feedback */
    transform: translateX(2px) !important;
}

/* 
 * Version: 8.1.0
 * Links innerhalb der Menüpunkte
 * Optimierung für bessere Lesbarkeit
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    /* Schriftgröße für bessere Lesbarkeit */
    font-size: 16px !important;
    
    /* Zeilenhöhe für bessere Vertikalität */
    line-height: 1.4 !important;
    
    /* Volle Breite für größeren Klickbereich */
    width: 100% !important;
    
    /* Padding entfernen, da es am Container-Element gesetzt ist */
    padding: 0 !important;
}

/* 
 * Version: 8.1.0
 * Responsive Anpassungen
 * Optimierung für verschiedene Bildschirmgrößen
 */

/* Tablet-Größen (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .wp-block-navigation__responsive-container.is-menu-open {
        min-height: 350px !important;
        max-width: 400px !important;
        /* Menü nicht über volle Breite auf Tablets */
        width: 400px !important;
        
        /* Positionierung rechts auf größeren Screens */
        right: 0 !important;
        left: auto !important;
    }
}

/* Desktop-Größen (ab 1025px) */
@media screen and (min-width: 1025px) {
    .wp-block-navigation__responsive-container.is-menu-open {
        min-height: 300px !important;
        max-width: 320px !important;
        width: 320px !important;
        
        /* Desktop-Positionierung */
        right: 20px !important;
        left: auto !important;
        
        /* Abgerundete Ecken für Desktop */
        border-radius: 8px !important;
    }
}

/* 
 * Version: 8.1.0
 * Überschreibung für Theme-spezifische Styles
 * Falls das Theme eigene Styles hat, die überschrieben werden müssen
 */
.wp-block-navigation__responsive-container-open.is-menu-open,
.wp-block-navigation[data-responsive-menu-open="true"] .wp-block-navigation__responsive-container {
    /* Sicherstellen, dass unsere Größen-Regeln Priorität haben */
    min-height: 300px !important;
    height: auto !important;
}

/* 
 * Version: 8.1.0
 * Performance-Optimierung
 * GPU-Beschleunigung für sanftere Animationen
 */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open * {
    /* GPU-Beschleunigung aktivieren */
    transform: translateZ(0);
    backface-visibility: hidden;
    
    /* Browser über kommende Änderungen informieren */
    will-change: transform, opacity;
}