.elementor-3221 .elementor-element.elementor-element-11df958{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:10rem;--padding-bottom:6rem;--padding-left:1rem;--padding-right:1rem;}.elementor-3221 .elementor-element.elementor-element-38b4a912{z-index:3;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-3221 .elementor-element.elementor-element-11df958{--padding-top:7rem;--padding-bottom:1rem;--padding-left:1rem;--padding-right:1rem;}}@media(min-width:768px){.elementor-3221 .elementor-element.elementor-element-11df958{--content-width:1400px;}}/* Start custom CSS for shortcode, class: .elementor-element-38b4a912 */.elementor-3221 .elementor-element.elementor-element-38b4a912 { font-family: 'Montserrat'; } .termin-doi-result-btn { border-radius: 50px !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-11df958 *//* ===================================================== HERO – Goldener Glitter-Ozean ===================================================== */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; /* Sanfter Verlauf von hellem Cremeweiß oben zu warmem Gelb unten */ background: linear-gradient(180deg, #fffef9 0%, #fffaea 25%, #fff3c4 55%, #ffe680 80%, #ffd84d 100%); overflow: hidden; isolation: isolate; } /* --------------------------------------------------- 1) Zentrale Lichtquelle – diffuser, weicher Glow --------------------------------------------------- */ .light-source { position: absolute; top: 38%; left: 50%; width: 1100px; height: 800px; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(255, 252, 220, 0.55) 22%, rgba(255, 235, 140, 0.25) 48%, rgba(255, 220, 100, 0.08) 70%, transparent 85%); filter: blur(30px); z-index: 1; pointer-events: none; animation: lightPulse 9s ease-in-out infinite; } @keyframes lightPulse { 0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } } /* --------------------------------------------------- 2) Glitter-Ozean – schimmernde Partikelwellen --------------------------------------------------- */ .glitter-ocean { position: absolute; inset: 0; z-index: 2; pointer-events: none; /* Maske: oben transparent, nach unten voll sichtbar => Glitzer „erhebt" sich aus dem unteren Bereich */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.08) 22%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.75) 58%, #000 75%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.08) 22%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.75) 58%, #000 75%, #000 100%); } .glitter-layer { position: absolute; inset: -30% -25%; width: 150%; height: 160%; background-repeat: repeat; } /* Schicht 1 – kleine, dichte Glitzerpunkte */ .glitter-layer--small { background-image: radial-gradient(1px 1px at 4% 12%, #ffffff 50%, transparent 100%), radial-gradient(1.2px 1.2px at 11% 28%, #fff4b3 50%, transparent 100%), radial-gradient(1px 1px at 17% 44%, #ffffff 50%, transparent 100%), radial-gradient(1.5px 1.5px at 23% 62%, #ffd84d 50%, transparent 100%), radial-gradient(1px 1px at 29% 18%, #ffffff 50%, transparent 100%), radial-gradient(1.2px 1.2px at 35% 78%, #fff4b3 50%, transparent 100%), radial-gradient(1px 1px at 41% 34%, #ffffff 50%, transparent 100%), radial-gradient(1.5px 1.5px at 47% 52%, #ffd84d 50%, transparent 100%), radial-gradient(1px 1px at 53% 8%, #ffffff 50%, transparent 100%), radial-gradient(1.3px 1.3px at 59% 88%, #fff4b3 50%, transparent 100%), radial-gradient(1px 1px at 65% 24%, #ffffff 50%, transparent 100%), radial-gradient(1.5px 1.5px at 71% 70%, #ffd84d 50%, transparent 100%), radial-gradient(1px 1px at 77% 42%, #ffffff 50%, transparent 100%), radial-gradient(1.2px 1.2px at 83% 14%, #fff4b3 50%, transparent 100%), radial-gradient(1px 1px at 89% 56%, #ffffff 50%, transparent 100%), radial-gradient(1.3px 1.3px at 95% 82%, #ffd84d 50%, transparent 100%); background-size: 320px 280px; animation: drift1 28s linear infinite, twinkle 3.2s ease-in-out infinite; } /* Schicht 2 – winzige Lichtpunkte, schneller, langsamer Funkel-Rhythmus */ .glitter-layer--tiny { background-image: radial-gradient(0.6px 0.6px at 7% 21%, #ffffff 50%, transparent 100%), radial-gradient(0.8px 0.8px at 14% 38%, #ffe680 50%, transparent 100%), radial-gradient(0.6px 0.6px at 22% 11%, #ffffff 50%, transparent 100%), radial-gradient(1px 1px at 30% 56%, #ffd84d 50%, transparent 100%), radial-gradient(0.6px 0.6px at 38% 73%, #ffffff 50%, transparent 100%), radial-gradient(0.8px 0.8px at 46% 29%, #ffe680 50%, transparent 100%), radial-gradient(0.6px 0.6px at 54% 84%, #ffffff 50%, transparent 100%), radial-gradient(1px 1px at 62% 47%, #ffd84d 50%, transparent 100%), radial-gradient(0.6px 0.6px at 70% 16%, #ffffff 50%, transparent 100%), radial-gradient(0.8px 0.8px at 78% 91%, #ffe680 50%, transparent 100%), radial-gradient(0.6px 0.6px at 86% 33%, #ffffff 50%, transparent 100%), radial-gradient(1px 1px at 94% 65%, #ffd84d 50%, transparent 100%), radial-gradient(0.6px 0.6px at 9% 67%, #ffffff 50%, transparent 100%), radial-gradient(0.8px 0.8px at 25% 95%, #ffe680 50%, transparent 100%), radial-gradient(0.6px 0.6px at 51% 6%, #ffffff 50%, transparent 100%), radial-gradient(0.8px 0.8px at 81% 51%, #ffe680 50%, transparent 100%); background-size: 240px 220px; animation: drift2 19s linear infinite, twinkle 2.1s ease-in-out infinite; opacity: 0.85; } /* Schicht 3 – größere, hellere Highlights, langsamer */ .glitter-layer--bright { background-image: radial-gradient(2px 2px at 16% 48%, rgba(255, 255, 255, 0.95) 40%, transparent 100%), radial-gradient(2.5px 2.5px at 33% 72%, rgba(255, 216, 77, 0.95) 40%, transparent 100%), radial-gradient(2px 2px at 50% 30%, rgba(255, 255, 255, 0.95) 40%, transparent 100%), radial-gradient(3px 3px at 67% 81%, rgba(255, 230, 128, 0.95) 40%, transparent 100%), radial-gradient(2px 2px at 84% 54%, rgba(255, 255, 255, 0.95) 40%, transparent 100%), radial-gradient(2.5px 2.5px at 91% 22%, rgba(255, 216, 77, 0.95) 40%, transparent 100%); background-size: 480px 460px; animation: drift3 38s linear infinite, twinkle 4.5s ease-in-out infinite; } @keyframes drift1 { 0% { transform: translate(0, 0); } 100% { transform: translate(-320px, -40px); } } @keyframes drift2 { 0% { transform: translate(0, 0); } 100% { transform: translate(240px, 30px); } } @keyframes drift3 { 0% { transform: translate(0, 0); } 100% { transform: translate(-240px, 50px); } } @keyframes twinkle { 0%, 100% { filter: brightness(0.9); } 50% { filter: brightness(1.4); } } /* --------------------------------------------------- 3) Bokeh – größere, unscharfe Lichtkreise --------------------------------------------------- */ .bokeh { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .bokeh__circle { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 248, 200, 0.25) 45%, transparent 100%); filter: blur(2px); animation: floatBokeh 14s ease-in-out infinite; } .bokeh__circle:nth-child(1) { width: 90px; height: 90px; top: 15%; left: 8%; animation-delay: 0s; } .bokeh__circle:nth-child(2) { width: 130px; height: 130px; top: 10%; right: 12%; animation-delay: -3s; } .bokeh__circle:nth-child(3) { width: 55px; height: 55px; top: 55%; left: 18%; animation-delay: -6s; } .bokeh__circle:nth-child(4) { width: 100px; height: 100px; top: 65%; right: 6%; animation-delay: -2s; } .bokeh__circle:nth-child(5) { width: 65px; height: 65px; top: 38%; left: 60%; animation-delay: -9s; animation-duration: 18s; } .bokeh__circle:nth-child(6) { width: 110px; height: 110px; top: 78%; left: 38%; animation-delay: -5s; } .bokeh__circle:nth-child(7) { width: 40px; height: 40px; top: 22%; left: 72%; animation-delay: -7s; animation-duration: 11s; } .bokeh__circle:nth-child(8) { width: 75px; height: 75px; top: 88%; left: 78%; animation-delay: -1s; } .bokeh__circle:nth-child(9) { width: 60px; height: 60px; top: 48%; left: 4%; animation-delay: -4s; animation-duration: 16s; } .bokeh__circle:nth-child(10) { width: 85px; height: 85px; top: 4%; left: 45%; animation-delay: -10s; } .bokeh__circle:nth-child(11) { width: 45px; height: 45px; top: 70%; left: 55%; animation-delay: -8s; animation-duration: 13s; } .bokeh__circle:nth-child(12) { width: 120px; height: 120px; top: 32%; right: 30%; animation-delay: -11s; } @keyframes floatBokeh { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; } 50% { transform: translate(28px, -36px) scale(1.1); opacity: 0.95; } } /* Hero-Container vorbereiten – nur dort wo .hero-text drin ist */ .e-con-inner:has(.hero-text) { position: relative; } /* HTML-Widget mit den Effekten den ganzen Hero füllen lassen */ .elementor-element-87c77a7 { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; z-index: 1; pointer-events: none; } .elementor-element-87c77a7 > .elementor-widget-container { position: absolute; inset: 0; width: 100%; height: 100%; } /* Sicherstellen, dass die Effekt-Layer wirklich den ganzen Bereich abdecken */ .elementor-element-87c77a7 .light-source, .elementor-element-87c77a7 .glitter-ocean, .elementor-element-87c77a7 .bokeh { position: absolute; } .elementor-element-87c77a7 .glitter-ocean, .elementor-element-87c77a7 .bokeh { inset: 0; width: 100%; height: 100%; }/* End custom CSS */