.elementor-30 .elementor-element.elementor-element-b8141d1>.elementor-container{min-height:256px}.elementor-30 .elementor-element.elementor-element-b8141d1{transition:background .3s,border .3s,border-radius .3s,box-shadow .3s;z-index:3}.elementor-30 .elementor-element.elementor-element-b8141d1>.elementor-background-overlay{transition:background .3s,border-radius .3s,opacity .3s}.elementor-30 .elementor-element.elementor-element-18ca5b67{--grid-template-columns:repeat(0,auto);--icon-size:66px;--grid-column-gap:13px;--grid-row-gap:0px}.elementor-30 .elementor-element.elementor-element-18ca5b67 .elementor-widget-container{text-align:center}.elementor-30 .elementor-element.elementor-element-18ca5b67 .elementor-social-icon{background-color:#F3D113B3;--icon-padding:.2em}.elementor-30 .elementor-element.elementor-element-4d024b2a{--grid-template-columns:repeat(0,auto);bottom:31px;z-index:9;--icon-size:66px;--grid-column-gap:13px;--grid-row-gap:0px}.elementor-30 .elementor-element.elementor-element-4d024b2a .elementor-widget-container{text-align:center}body:not(.rtl) .elementor-30 .elementor-element.elementor-element-4d024b2a{right:0}body.rtl .elementor-30 .elementor-element.elementor-element-4d024b2a{left:0}.elementor-30 .elementor-element.elementor-element-4d024b2a .elementor-social-icon{background-color:#F3D113B3;--icon-padding:.2em}.elementor-30 .elementor-element.elementor-element-57aafead{--grid-template-columns:repeat(0,auto);bottom:50px;z-index:20;--icon-size:66px;--grid-column-gap:13px;--grid-row-gap:0px}.elementor-30 .elementor-element.elementor-element-57aafead .elementor-widget-container{text-align:center}body:not(.rtl) .elementor-30 .elementor-element.elementor-element-57aafead{right:0}body.rtl .elementor-30 .elementor-element.elementor-element-57aafead{left:0}.elementor-30 .elementor-element.elementor-element-57aafead .elementor-social-icon{background-color:#F3D113B3;--icon-padding:.2em}.elementor-widget-heading .elementor-heading-title{font-family:var(--e-global-typography-primary-font-family),Sans-serif;font-weight:var(--e-global-typography-primary-font-weight);color:var(--e-global-color-primary)}.elementor-30 .elementor-element.elementor-element-6f8d1fa6{width:100%;max-width:100%;text-align:start}.elementor-30 .elementor-element.elementor-element-6f8d1fa6>.elementor-widget-container{margin:0}.elementor-30 .elementor-element.elementor-element-6f8d1fa6 .elementor-heading-title{color:#f3d113}.elementor-30 .elementor-element.elementor-element-503ce1ad:not(.elementor-motion-effects-element-type-background),.elementor-30 .elementor-element.elementor-element-503ce1ad>.elementor-motion-effects-container>.elementor-motion-effects-layer{background-color:#26252a}.elementor-30 .elementor-element.elementor-element-503ce1ad{transition:background .3s,border .3s,border-radius .3s,box-shadow .3s;margin-top:0;margin-bottom:0;padding:19px;z-index:1}.elementor-30 .elementor-element.elementor-element-503ce1ad>.elementor-background-overlay{transition:background .3s,border-radius .3s,opacity .3s}.elementor-30 .elementor-element.elementor-element-1ccbe05c .elementor-heading-title{mix-blend-mode:difference;color:#f3d113}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var(--e-global-color-text)}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var(--e-global-color-primary)}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var(--e-global-color-primary)}.elementor-widget-icon-list .elementor-icon-list-item>.elementor-icon-list-text,.elementor-widget-icon-list .elementor-icon-list-item>a{font-family:var(--e-global-typography-text-font-family),Sans-serif;font-weight:var(--e-global-typography-text-font-weight)}.elementor-widget-icon-list .elementor-icon-list-text{color:var(--e-global-color-secondary)}.elementor-30 .elementor-element.elementor-element-28371e5f .elementor-icon-list-icon i{transition:color .3s}.elementor-30 .elementor-element.elementor-element-28371e5f .elementor-icon-list-icon svg{transition:fill .3s}.elementor-30 .elementor-element.elementor-element-28371e5f{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px}.elementor-30 .elementor-element.elementor-element-28371e5f .elementor-icon-list-item>.elementor-icon-list-text,.elementor-30 .elementor-element.elementor-element-28371e5f .elementor-icon-list-item>a{font-family:"Roboto",Sans-serif;font-size:24px;font-weight:400}.elementor-30 .elementor-element.elementor-element-28371e5f .elementor-icon-list-text{color:#fff;transition:color .3s}.elementor-30 .elementor-element.elementor-element-3226c4e2 .elementor-icon-list-icon i{transition:color .3s}.elementor-30 .elementor-element.elementor-element-3226c4e2 .elementor-icon-list-icon svg{transition:fill .3s}.elementor-30 .elementor-element.elementor-element-3226c4e2{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px}.elementor-30 .elementor-element.elementor-element-3226c4e2 .elementor-icon-list-item>.elementor-icon-list-text,.elementor-30 .elementor-element.elementor-element-3226c4e2 .elementor-icon-list-item>a{font-family:"Roboto",Sans-serif;font-size:24px;font-weight:400}.elementor-30 .elementor-element.elementor-element-3226c4e2 .elementor-icon-list-text{color:#fff;transition:color .3s}.elementor-widget-progress-tracker .current-progress-percentage{font-family:var(--e-global-typography-text-font-family),Sans-serif;font-weight:var(--e-global-typography-text-font-weight)}.elementor-30 .elementor-element.elementor-element-7a3baf6{--direction:ltr;bottom:0;z-index:6;--horizontal-progress-border:none;--horizontal-border-style:none}.elementor-30 .elementor-element.elementor-element-7a3baf6 .current-progress{background-color:#f5d529}body:not(.rtl) .elementor-30 .elementor-element.elementor-element-7a3baf6{left:0}body.rtl .elementor-30 .elementor-element.elementor-element-7a3baf6{right:0}.elementor-30 .elementor-element.elementor-element-ac725bb .elementor-icon-list-icon i{transition:color .3s}.elementor-30 .elementor-element.elementor-element-ac725bb .elementor-icon-list-icon svg{transition:fill .3s}.elementor-30 .elementor-element.elementor-element-ac725bb{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px}.elementor-30 .elementor-element.elementor-element-ac725bb .elementor-icon-list-item>.elementor-icon-list-text,.elementor-30 .elementor-element.elementor-element-ac725bb .elementor-icon-list-item>a{font-family:"Roboto",Sans-serif;font-size:24px;font-weight:400}.elementor-30 .elementor-element.elementor-element-ac725bb .elementor-icon-list-text{color:#fff;transition:color .3s}.elementor-theme-builder-content-area{height:400px}.elementor-location-header:before,.elementor-location-footer:before{content:"";display:table;clear:both}@media(max-width:767px){.elementor-30 .elementor-element.elementor-element-18ca5b67{--icon-size:44px}.elementor-30 .elementor-element.elementor-element-4d024b2a{--icon-size:44px}.elementor-30 .elementor-element.elementor-element-57aafead{--icon-size:44px}.elementor-30 .elementor-element.elementor-element-256d4303{width:100%}.elementor-30 .elementor-element.elementor-element-256d4303>.elementor-element-populated{margin:20px;--e-column-margin-right:20px;--e-column-margin-left:20px}.elementor-30 .elementor-element.elementor-element-6f8d1fa6{text-align:center}}* Dynamische Textfarbe abhängig vom Hintergrund */.text{font-size:24px;font-weight:700;transition:color .5s ease-in-out}#container{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background-color:#000;transition:background-color 1s ease-in-out}<!DOCTYPE html><html lang="de"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Parallax & Farbwechsel</title><style>.parallax-container{position:relative;width:100%;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}.diamond{position:absolute;width:100px;height:100px;background:linear-gradient(45deg,#fff,#ff0);transform:rotate(45deg);opacity:.7;animation:diamondFloat 10s ease-in-out infinite}@keyframes diamondFloat{0%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(-20px) rotate(45deg)}100%{transform:translateY(0) rotate(45deg)}}#wrapper{width:95%;margin:0 auto;display:flex;flex-direction:column}#header,#content,#sidebar,#footer{width:100%}@media (min-width:768px){#wrapper{width:90%}.content-container{display:flex;justify-content:space-between}#content{width:70%}#sidebar{width:30%}}@media (min-width:1200px){#wrapper{width:90%}}.text{font-size:24px;font-weight:700;transition:color .5s ease-in-out}#container{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background-color:#000;transition:background-color 1s ease-in-out}#changeColorBtn{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);padding:10px 20px;font-size:16px;cursor:pointer;border:none;border-radius:5px;background-color:#fff;color:#000;transition:background .3s ease}#changeColorBtn:hover{background-color:gray;color:#fff}</style></head><body><div id="container"><h1 id="text" class="text">Wechselnde Farbe</h1><button id="changeColorBtn">Hintergrund ändern</button></div><script>const colors=["black","white","yellow"];let currentIndex=0;function updateColors(){let container=document.getElementById("container");let text=document.getElementById("text");//Nächste Farbe auswählen currentIndex=(currentIndex+1) % colors.length;let newBgColor=colors[currentIndex];//Hintergrundfarbe setzen container.style.backgroundColor=newBgColor;//Textfarbe anpassen für gute Lesbarkeit if (newBgColor==="black"){text.style.color="white"}else{text.style.color="black"}}//Eventlistener für Button document.getElementById("changeColorBtn").addEventListener("click",updateColors);</script></body></html>@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:auto;src:url('https://www.yellowflowtaik.de/wp-content/uploads/2022/09/Roboto-Regular.ttf') format('truetype')}