.elementor-1958 .elementor-element.elementor-element-a03b9d7{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:0vw;--margin-bottom:0vw;--margin-left:0vw;--margin-right:0vw;--z-index:1;}.elementor-1958 .elementor-element.elementor-element-a03b9d7:not(.elementor-motion-effects-element-type-background), .elementor-1958 .elementor-element.elementor-element-a03b9d7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://schamanische-kraftquellen.de/wp-content/uploads/2024/11/Ahnenpfade-scaled.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}@media(min-width:768px){.elementor-1958 .elementor-element.elementor-element-a03b9d7{--content-width:100vw;}}/* Start custom CSS for html, class: .elementor-element-8a9703d *//* Schritt 2: Glassmorphism-Element */
.glassmorphism-element {
    position: absolute; /* Absolute Positionierung, um es innerhalb des Containers zu platzieren */
    top: 50%; /* Vertikale Mitte des Containers */
    left: 50%; /* Horizontale Mitte des Containers */
    transform: translate(-50%, -50%); /* Korrektur, damit das Element wirklich zentriert ist */
    width: 30vw; /* Breite des Elements auf 30% der Viewport-Breite setzen */
    max-width: 320px; /* Maximale Breite zur Begrenzung auf größeren Bildschirmen */
    padding: 2vh 2vw; /* Polsterung innerhalb des Containers für Raum um die Überschriften */
    background: rgba(245, 245, 220, 0.48); /* Halbtransparenter Hintergrund im Glassmorphism-Stil (entspricht #F5F5DC7A in rgba) */
    backdrop-filter: blur(2px); /* Unschärfe-Effekt für Glassmorphism */
    -webkit-backdrop-filter: blur(2px); /* Unschärfe-Effekt für bessere Browser-Kompatibilität */
    border-radius: 15px; /* Abgerundete Ecken für weicheren Look */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Leichte Umrandung für besseren Effekt */
    text-align: center; /* Zentrierung des Textes innerhalb des Elements */
}

/* Schritt 3: Stil der Überschriften anpassen */
.glassmorphism-element h1 {
    font-size: 5vh; /* Responsive Schriftgröße in Abhängigkeit zur Höhe des Viewports */
    color: #6B4423; /* Schriftfarbe für besseren Kontrast */
    margin-bottom: -1vh; /* Abstand zum nächsten Element */
}

.glassmorphism-element h2 {
    font-size: 2vh; /* Etwas kleinere Schriftgröße für H2 */
    color: #6B4423; /* Schriftfarbe */
    margin: 0; /* Kein zusätzlicher Abstand */
}

/* Schritt 4: Button-Stil für Desktop */
.glassmorphism-element .button {
    display: inline-block;
    margin-top: 3vh !important;
    padding: 1vh 3vw;
    background-color: #6B4423 !important;
    color: #F5F5DC !important;
    font-size: 2.5vh;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.glassmorphism-element .button:hover {
    background-color: #3A6B35 !important;
    color: #F5F5DC !important;
}/* End custom CSS */