.elementor-kit-26{--e-global-color-primary:#212122;--e-global-color-secondary:#1544C0;--e-global-color-text:#E7E7E7;--e-global-color-accent:#FF5500;--e-global-color-2fa4e8f:#A2C614;--e-global-color-eae8e2a:#E84184;--e-global-color-c7c7323:#FFD500;--e-global-color-7888e0a:#994E99;--e-global-color-3ed4cd0:#E72E2A;--e-global-color-b361d3e:#0A0A0A;--e-global-color-fafdb8e:#EDEDED;--e-global-color-031b45a:#02010100;--e-global-color-859d05d:#212122AB;--e-global-color-7cf5bad:#FFFFFFB3;background-color:#0A0A0A;color:#FFFFFF;font-family:"Helvetica", Sans-serif;font-size:20px;font-weight:300;line-height:1.8em;}.elementor-kit-26 button,.elementor-kit-26 input[type="button"],.elementor-kit-26 input[type="submit"],.elementor-kit-26 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Archivo", Sans-serif;font-size:14px;font-weight:700;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-031b45a );border-radius:33px 33px 33px 33px;padding:12px 40px 12px 40px;}.elementor-kit-26 e-page-transition{background-color:#D54700F0;}.elementor-kit-26 a{color:var( --e-global-color-primary );}.elementor-kit-26 h1{color:#EDEDED;font-family:"Cre8ive - 2026", Sans-serif;font-size:5vw;font-weight:600;text-transform:uppercase;line-height:0.8em;letter-spacing:-3px;}.elementor-kit-26 h2{color:#EDEDED;font-family:"Cre8ive - 2026", Sans-serif;font-size:30px;font-weight:100;text-transform:uppercase;line-height:1.3em;letter-spacing:0.4px;}.elementor-kit-26 h3{color:#EDEDED;font-family:"Cre8ive - 2026", Sans-serif;font-size:30px;font-weight:300;line-height:1.4em;}.elementor-kit-26 h4{color:#212122;font-family:"Cre8ive - 2026", Sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;line-height:1.4em;letter-spacing:0.4px;}.elementor-kit-26 h5{color:#EDEDED;font-family:"Cre8ive - 2026", Sans-serif;font-size:180px;font-weight:500;text-transform:uppercase;line-height:1em;letter-spacing:0.4px;}.elementor-kit-26 h6{color:var( --e-global-color-primary );font-family:"Cre8ive - 2026", Sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;line-height:1.2em;letter-spacing:0.4px;}.elementor-kit-26 button:hover,.elementor-kit-26 button:focus,.elementor-kit-26 input[type="button"]:hover,.elementor-kit-26 input[type="button"]:focus,.elementor-kit-26 input[type="submit"]:hover,.elementor-kit-26 input[type="submit"]:focus,.elementor-kit-26 .elementor-button:hover,.elementor-kit-26 .elementor-button:focus{color:var( --e-global-color-primary );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-031b45a );border-radius:33px 33px 33px 33px;}.elementor-kit-26 label{color:#939393;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-26 input:not([type="button"]):not([type="submit"]),.elementor-kit-26 textarea,.elementor-kit-26 .elementor-field-textual{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-fafdb8e );background-color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );border-radius:0px 0px 0px 0px;padding:4px 012px 4px 12px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0%;--container-default-padding-right:05%;--container-default-padding-bottom:0%;--container-default-padding-left:5%;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}.wcf-scroll-to-top{font-size:18px;width:46px;bottom:15px;right:15px;z-index:9999;color:#ffffff;fill:#ffffff;background-color:#000000;mix-blend-mode:normal;}.wcf-scroll-to-top.scroll-to-circle{width:46px;height:46px;}.wcf-scroll-to-top.scroll-to-circle svg.progress-circle path{stroke:#ffffff;}@media(max-width:1500px){.elementor-kit-26 h1{font-size:5vw;}.elementor-kit-26 label{font-size:var( --e-global-typography-text-font-size );}.elementor-kit-26 input:not([type="button"]):not([type="submit"]),.elementor-kit-26 textarea,.elementor-kit-26 .elementor-field-textual{font-size:var( --e-global-typography-text-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:05px;--container-default-padding-bottom:0px;--container-default-padding-left:05px;}}@media(max-width:1366px){.elementor-kit-26 label{font-size:var( --e-global-typography-text-font-size );}.elementor-kit-26 input:not([type="button"]):not([type="submit"]),.elementor-kit-26 textarea,.elementor-kit-26 .elementor-field-textual{font-size:var( --e-global-typography-text-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0%;--container-default-padding-right:05%;--container-default-padding-bottom:0%;--container-default-padding-left:05%;}}@media(max-width:1200px){.elementor-kit-26 h1{font-size:5vw;}}@media(max-width:880px){.elementor-kit-26 h1{font-size:5vw;}}@media(max-width:767px){.elementor-kit-26{font-size:14px;}.elementor-kit-26 h1{font-size:10vw;line-height:1.2em;}.elementor-kit-26 h2{font-size:19px;}.elementor-kit-26 h3{font-size:18px;}.elementor-kit-26 h4{font-size:16px;}.elementor-kit-26 h5{font-size:40px;}.elementor-kit-26 h6{font-size:12px;}.elementor-kit-26 button,.elementor-kit-26 input[type="button"],.elementor-kit-26 input[type="submit"],.elementor-kit-26 .elementor-button{line-height:1.4em;}.elementor-kit-26 label{font-size:var( --e-global-typography-text-font-size );}.elementor-kit-26 input:not([type="button"]):not([type="submit"]),.elementor-kit-26 textarea,.elementor-kit-26 .elementor-field-textual{font-size:var( --e-global-typography-text-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:05px;--container-default-padding-bottom:0px;--container-default-padding-left:05px;}}@media(min-width:2400px){.elementor-kit-26 label{font-size:var( --e-global-typography-text-font-size );}.elementor-kit-26 input:not([type="button"]):not([type="submit"]),.elementor-kit-26 textarea,.elementor-kit-26 .elementor-field-textual{font-size:var( --e-global-typography-text-font-size );}}/* Start custom CSS */html, body { max-width: 100% !important; overflow-x: hidden !important; } html { scroll-behavior: smooth; } /* Wrapper um die Logos: muss position:relative sein */ .logo-wrap { position: relative; } /* Alle Logos liegen übereinander */ .logo-wrap .logo-studio, .logo-wrap .logo-design, .logo-wrap .logo-focus, .logo-wrap .logo-brand, .logo-wrap .logo-motion, .logo-wrap .logo-sound{ position: absolute; left: 0; top: 0; opacity: 0; transform: translateZ(0); will-change: opacity, transform, filter; } /* Standard: Studio sichtbar */ .logo-wrap .logo-studio{ opacity: 1; position:absolute; } /* Mode -> welches sichtbar ist (Opacity statt display, damit animierbar) */ body.mode-design .logo-wrap .logo-studio{ opacity: 0; } body.mode-design .logo-wrap .logo-design{ opacity: 1; } body.mode-focus .logo-wrap .logo-studio{ opacity: 0; } body.mode-focus .logo-wrap .logo-focus{ opacity: 1; } body.mode-brand .logo-wrap .logo-studio{ opacity: 0; } body.mode-brand .logo-wrap .logo-brand{ opacity: 1; } body.mode-motion .logo-wrap .logo-studio{ opacity: 0; } body.mode-motion .logo-wrap .logo-motion{ opacity: 1; } body.mode-sound .logo-wrap .logo-studio{ opacity: 0; } body.mode-sound .logo-wrap .logo-sound{ opacity: 1; } @keyframes warpOut { 0% { opacity: 1; transform: scale(1) skewX(0deg); filter: none; } 40% { opacity: .9; transform: scale(1.02) skewX(-6deg); filter: url(#warp) blur(1px); } 100% { opacity: 0; transform: scale(.98) skewX(6deg); filter: url(#warp) blur(2px); } } @keyframes warpIn { 0% { opacity: 0; transform: scale(1.06) skewX(8deg); filter: url(#warp) blur(2px); } 60% { opacity: .95; transform: scale(1.01) skewX(-4deg); filter: url(#warp) blur(1px); } 100% { opacity: 1; transform: scale(1) skewX(0deg); filter: none; } } /* RGB Split = farbige Doppel-Kanten */ .rgb-split{ /* mehrere drop-shadows simulieren Chromatic Aberration */ filter: url(#warp) drop-shadow(2px 0 0 rgba(255, 40, 80, .85)) /* rot */ drop-shadow(-2px 0 0 rgba(60, 255, 240, .75)) /* cyan */ drop-shadow(0 2px 0 rgba(190, 70, 255, .55)) /* violett */ blur(0.6px); } /* optional: kleines „Jitter“ für mehr Glitch-Feeling */ @keyframes rgbJitter { 0% { transform: translateX(0) translateY(0) scale(1.02) skewX(-6deg); } 25% { transform: translateX(1px) translateY(-1px) scale(1.02) skewX(-6deg); } 50% { transform: translateX(-1px) translateY(1px) scale(1.02) skewX(-6deg); } 75% { transform: translateX(1px) translateY(1px) scale(1.02) skewX(-6deg); } 100% { transform: translateX(0) translateY(0) scale(1.02) skewX(-6deg); } } /* nur während warp-out/in kurz jittern */ .logo-warp-out.rgb-split, .logo-warp-in.rgb-split{ animation-timing-function: ease; animation-name: warpOut, rgbJitter; animation-duration: .42s, .22s; animation-iteration-count: 1, 2; } .logo-warp-in.rgb-split{ animation-name: warpIn, rgbJitter; animation-duration: .48s, .22s; animation-iteration-count: 1, 2; } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .rgb-split{ filter: none !important; } .logo-warp-out.rgb-split, .logo-warp-in.rgb-split{ animation: none !important; } } .logo-warp-out{ animation: warpOut .42s ease forwards; } .logo-warp-in { animation: warpIn .48s ease forwards; } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .logo-warp-out, .logo-warp-in { animation: none !important; } } /* Basis Badge */ .case-nav a[href^="#"]{ display:inline-flex; align-items:center; justify-content:center; padding: 10px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.18); text-decoration:none !important; text-transform: uppercase; letter-spacing:.10em; font-weight:700; font-size: 13px; transition: all .2s ease; } /* Farben pro Bereich (WICHTIG) */ .case-nav a[href="#design"]{ --glow: 140,255,0; } /* Neon-Grün */ .case-nav a[href="#focus"] { --glow: 255,0,200; } /* Neon-Pink */ .case-nav a[href="#brand"] { --glow: 255,190,0; } /* Neon-Gold */ .case-nav a[href="#motion"]{ --glow: 255,80,80; } /* Neon-Rot */ .case-nav a[href="#sound"] { --glow: 155,95,255; } /* Neon-Lila */ /* Normalzustand: leichte Tönung */ .case-nav a[href^="#"]{ color: rgba(255,255,255,.85) !important; border-color: rgba(var(--glow), .25); } /* Hover: bisschen Glow */ .case-nav a[href^="#"]:hover{ border-color: rgba(var(--glow), .45); box-shadow: 0 0 0 1px rgba(var(--glow), .20), 0 0 18px rgba(var(--glow), .22); } /* AKTIV: Text in Brand-Farbe + Text Glow + starker Neon-Rand */ .case-nav a.is-active{ color: rgb(var(--glow)) !important; border-color: rgba(var(--glow), .85) !important; background: rgba(0,0,0,.28) !important; /* Richtiges Leuchten */ text-shadow: 0 0 10px rgba(var(--glow), .85), 0 0 22px rgba(var(--glow), .55); box-shadow: 0 0 0 1px rgba(var(--glow), .40), 0 0 26px rgba(var(--glow), .45), inset 0 0 14px rgba(var(--glow), .14); } /* ========================================================= CRE8IVE STUDIO — HERO LAVA TEXT (BALANCED v2) Usage: class="hero-lava" Goal: all colors visible, no orange dominance ========================================================= */ .hero-lava{ display:inline-block; /* Base fill: neutral mix, orange very low */ background-image: linear-gradient( 135deg, rgba(107,255,59,.26), rgba(255,61,154,.26), rgba(255,212,0,.26), rgba(255,138,0,.08), /* ORANGE hard reduced in base */ rgba(255,59,48,.26), rgba(155,92,255,.26) ), /* GREEN */ radial-gradient(circle at 32% 26%, rgba(107,255,59,.72) 0%, rgba(107,255,59,0) 40% ), /* PINK */ radial-gradient(circle at 70% 28%, rgba(255,61,154,.78) 0%, rgba(255,61,154,0) 40% ), /* YELLOW */ radial-gradient(circle at 34% 74%, rgba(255,212,0,.74) 0%, rgba(255,212,0,0) 40% ), /* ORANGE — tiny + outside */ radial-gradient(circle at 96% 92%, rgba(255,138,0,.18) 0%, rgba(255,138,0,0) 24% ), /* RED — move into the lower loop of the 8 */ radial-gradient(circle at 60% 62%, rgba(255,59,48,.86) 0%, rgba(255,59,48,0) 44% ), /* VIOLET — move into the upper loop of the 8 */ radial-gradient(circle at 56% 20%, rgba(155,92,255,.88) 0%, rgba(155,92,255,0) 46% ); background-repeat:no-repeat; /* Scaling tuned for single glyph */ background-size: 165% 165%, /* base */ 150% 150%, /* green */ 150% 150%, /* pink */ 150% 150%, /* yellow */ 96% 96%, /* orange tiny */ 170% 170%, /* red bigger */ 175% 175%; /* violet bigger */ -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation: hero-lava-drift 8.8s ease-in-out infinite, hero-lava-breathe 5.4s ease-in-out infinite; will-change: background-position, background-size; } /* IMPORTANT: keyframes match the layer order above */ @keyframes hero-lava-drift{ 0%{ background-position: 0% 0%, /* base */ 30% 26%, /* green */ 70% 28%, /* pink */ 32% 74%, /* yellow */ 96% 92%, /* orange (stay outside) */ 60% 62%, /* red */ 56% 20%; /* violet */ } 50%{ background-position: 100% 100%, /* base */ 38% 34%, 62% 34%, 38% 66%, 92% 88%, /* orange still outside */ 54% 58%, 52% 24%; } 100%{ background-position: 0% 0%, 30% 26%, 70% 28%, 32% 74%, 96% 92%, 60% 62%, 56% 20%; } } @keyframes hero-lava-breathe{ 0%,100%{ background-size: 165% 165%, 150% 150%, 150% 150%, 150% 150%, 96% 96%, 170% 170%, 175% 175%; } 50%{ background-size: 175% 175%, 165% 165%, 160% 160%, 165% 165%, 92% 92%, /* orange grows almost not at all */ 190% 190%, /* red breathes more */ 195% 195%; /* violet breathes more */ } } @media (prefers-reduced-motion: reduce){ .hero-lava{ animation:none; } } .gradiant-studio-cre8 .elementor-heading-title { color: transparent !important; -webkit-text-fill-color: transparent !important; background-image: linear-gradient( 98deg, #ffffff 0%, #ffffff 18%, #b6ff00 28%, #ffffff 38%, #e94183 48%, #ffd500 58%, #ffffff 68%, #994e99 78%, #e72e2a 88%, #ffffff 100% ); background-size: 280% 100%; background-position: calc(100% - (var(--cre8-scroll, 0) * 65%)) 50%; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px rgba(255,255,255,0.08)); transition: background-position 0.35s ease-out; }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Cre8ive – 2026'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://cre8ive-studio.de/wp-content/uploads/2026/01/Satoshi-Regular.ttf') format('truetype'); } @font-face { font-family: 'Cre8ive – 2026'; font-style: normal; font-weight: 600; font-display: auto; src: url('https://cre8ive-studio.de/wp-content/uploads/2026/01/Satoshi-Medium.ttf') format('truetype'); } @font-face { font-family: 'Cre8ive – 2026'; font-style: normal; font-weight: 200; font-display: auto; src: url('https://cre8ive-studio.de/wp-content/uploads/2026/01/Satoshi-Black.ttf') format('truetype'); } @font-face { font-family: 'Cre8ive – 2026'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://cre8ive-studio.de/wp-content/uploads/2026/01/Satoshi-Bold.ttf') format('truetype'); } @font-face { font-family: 'Cre8ive – 2026'; font-style: normal; font-weight: 800; font-display: auto; src: url('https://cre8ive-studio.de/wp-content/uploads/2026/01/Satoshi-Black.ttf') format('truetype'); } /* End Custom Fonts CSS */