.elementor-739 .elementor-element.elementor-element-9496eba{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-739 .elementor-element.elementor-element-9496eba:not(.elementor-motion-effects-element-type-background), .elementor-739 .elementor-element.elementor-element-9496eba > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://schamanische-kraftquellen.de/wp-content/uploads/2024/11/Energetisches-Raeuchern-scaled.webp");background-position:0vw -10vh;background-repeat:no-repeat;background-size:cover;}.elementor-739 .elementor-element.elementor-element-3c00eae{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-739 .elementor-element.elementor-element-3c00eae:not(.elementor-motion-effects-element-type-background), .elementor-739 .elementor-element.elementor-element-3c00eae > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5DC7A;}.elementor-739 .elementor-element.elementor-element-a2fdc42{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-739 .elementor-element.elementor-element-a2fdc42:not(.elementor-motion-effects-element-type-background), .elementor-739 .elementor-element.elementor-element-a2fdc42 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5DC7A;}.elementor-739 .elementor-element.elementor-element-4982903{text-align:left;}.elementor-739 .elementor-element.elementor-element-4982903 .elementor-heading-title{font-family:"Dancing Script", Sans-serif;font-size:70px;font-weight:bold;}.elementor-739 .elementor-element.elementor-element-d4bb46d .elementor-heading-title{font-family:"EB Garamond", Sans-serif;font-size:25px;font-weight:bold;}.elementor-739 .elementor-element.elementor-element-47b2671{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-739 .elementor-element.elementor-element-47b2671:not(.elementor-motion-effects-element-type-background), .elementor-739 .elementor-element.elementor-element-47b2671 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5DC7A;}.elementor-739 .elementor-element.elementor-element-0a26134{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-739 .elementor-element.elementor-element-0a26134:not(.elementor-motion-effects-element-type-background), .elementor-739 .elementor-element.elementor-element-0a26134 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5DC7A;}.elementor-739 .elementor-element.elementor-element-808b736{font-family:"EB Garamond", Sans-serif;font-size:23px;font-weight:400;}.elementor-739 .elementor-element.elementor-element-44d63cc{font-family:"EB Garamond", Sans-serif;font-size:23px;font-weight:400;}.elementor-739 .elementor-element.elementor-element-7af5cfe{font-family:"EB Garamond", Sans-serif;font-size:23px;font-weight:400;}.elementor-739 .elementor-element.elementor-element-b4a392a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-739 .elementor-element.elementor-element-b4a392a:not(.elementor-motion-effects-element-type-background), .elementor-739 .elementor-element.elementor-element-b4a392a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5DC7A;}.elementor-739 .elementor-element.elementor-element-af97af3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-739 .elementor-element.elementor-element-af97af3:not(.elementor-motion-effects-element-type-background), .elementor-739 .elementor-element.elementor-element-af97af3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5DC7A;}.elementor-739 .elementor-element.elementor-element-698be33 .elementor-button{background-color:#6B4423;font-family:"EB Garamond", Sans-serif;font-weight:700;text-transform:uppercase;fill:#F5F5DCD1;color:#F5F5DCD1;}.elementor-739 .elementor-element.elementor-element-698be33 .elementor-button:hover, .elementor-739 .elementor-element.elementor-element-698be33 .elementor-button:focus{background-color:rgba(0,0,0,0);color:#6B4423;}.elementor-739 .elementor-element.elementor-element-698be33.elementor-element{--align-self:center;}.elementor-739 .elementor-element.elementor-element-698be33 .elementor-button:hover svg, .elementor-739 .elementor-element.elementor-element-698be33 .elementor-button:focus svg{fill:#6B4423;}.elementor-739 .elementor-element.elementor-element-950ab29{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-739 .elementor-element.elementor-element-950ab29:not(.elementor-motion-effects-element-type-background), .elementor-739 .elementor-element.elementor-element-950ab29 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5DC7A;}@media(max-width:1024px) and (min-width:768px){.elementor-739 .elementor-element.elementor-element-9496eba{--width:0vw;}}@media(max-width:1024px){.elementor-739 .elementor-element.elementor-element-9496eba{--min-height:50vh;}.elementor-739 .elementor-element.elementor-element-9496eba:not(.elementor-motion-effects-element-type-background), .elementor-739 .elementor-element.elementor-element-9496eba > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0vw 0vh;}}@media(max-width:767px){.elementor-739 .elementor-element.elementor-element-9496eba{--min-height:25vh;}.elementor-739 .elementor-element.elementor-element-9496eba:not(.elementor-motion-effects-element-type-background), .elementor-739 .elementor-element.elementor-element-9496eba > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0vw 0vh;}.elementor-739 .elementor-element.elementor-element-4982903 .elementor-heading-title{font-size:35px;}.elementor-739 .elementor-element.elementor-element-d4bb46d .elementor-heading-title{font-size:21px;}.elementor-739 .elementor-element.elementor-element-808b736{font-size:19px;}.elementor-739 .elementor-element.elementor-element-44d63cc{font-size:19px;}.elementor-739 .elementor-element.elementor-element-7af5cfe{font-size:19px;}}/* Start custom CSS for html, class: .elementor-element-7b7ac7aa *//* Schritt 1: Container mit Banner-Bild als Hintergrund */
.banner-container {
    position: relative; /* Um sicherzustellen, dass das Glassmorphism-Element absolut positioniert werden kann */
    width: 100vw; /* Breite des Containers auf den gesamten Viewport setzen */
    height: 60vh; /* Höhe des Containers auf 60% der Viewport-Höhe setzen */
    background-image: url('/ressources/img/Firefly.png'); /* Beispielhintergrundbild */
    background-size: cover; /* Bild auf den gesamten Container anpassen */
    background-position: center; /* Bild zentrieren */
}

/* 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: 40vw; /* Breite des Elements auf 80% der Viewport-Breite setzen */
    height: 22vh;
    max-height: 22vh;
    max-width: 35vh; /* Maximale Breite zur Begrenzung auf großeren Bildschirmen */
    padding: 0vh 1vw; /* 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: 6B44235; /* 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: Responsive Anpassungen */
@media (max-width: 768px) {
    .glassmorphism-element {
        width: 90vw; /* Breite anpassen für kleinere Bildschirme */
        padding: 4vh 4vw; /* Polsterung etwas verändern, damit es auf mobilen Geräten besser aussieht */
    }

    .glassmorphism-element h1 {
        font-size: 5vw; /* Schriftgröße für kleinere Bildschirme anpassen */
    }

    .glassmorphism-element h2 {
        font-size: 4vw; /* Schriftgröße für kleinere Bildschirme anpassen */
    }
}
/* Schritt 8: Button-Stil für Desktop */
.glassmorphism-element .button {
    display: inline-block;
    margin-top: vh !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 */