.elementor-8799 .elementor-element.elementor-element-dfb9667{--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;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.25;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:200px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-8799 .elementor-element.elementor-element-dfb9667::before, .elementor-8799 .elementor-element.elementor-element-dfb9667 > .elementor-background-video-container::before, .elementor-8799 .elementor-element.elementor-element-dfb9667 > .e-con-inner > .elementor-background-video-container::before, .elementor-8799 .elementor-element.elementor-element-dfb9667 > .elementor-background-slideshow::before, .elementor-8799 .elementor-element.elementor-element-dfb9667 > .e-con-inner > .elementor-background-slideshow::before, .elementor-8799 .elementor-element.elementor-element-dfb9667 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-8799 .elementor-element.elementor-element-23d79c9{--wcf-duration:1000ms;--wcf-delay:0ms;--wcf-ease:linear;--wcf-flip-angle:90deg;--wcf-flip-perspective:800px;text-align:center;}.elementor-8799 .elementor-element.elementor-element-23d79c9 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-8799 .elementor-element.elementor-element-23d79c9 .elementor-heading-title{font-family:"cre8ive content", Sans-serif;font-size:220px;font-weight:600;text-transform:uppercase;line-height:1.2em;letter-spacing:0.8px;-webkit-text-stroke-color:#000;stroke:#000;}.elementor-8799 .elementor-element.elementor-element-b301d51{--wcf-duration:1000ms;--wcf-delay:0ms;--wcf-ease:ease;width:auto;max-width:auto;text-align:center;}.elementor-8799 .elementor-element.elementor-element-b301d51 > .elementor-widget-container{padding:0px 0px 30px 0px;}.elementor-8799 .elementor-element.elementor-element-b301d51 .elementor-heading-title{font-family:"Cre8ive - 2026", Sans-serif;font-size:30px;font-weight:300;line-height:41px;letter-spacing:6px;}:root{--page-title-display:none;}@media(max-width:1500px){.elementor-8799 .elementor-element.elementor-element-dfb9667{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-8799 .elementor-element.elementor-element-23d79c9 .elementor-heading-title{font-size:120px;}}@media(max-width:1366px){.elementor-8799 .elementor-element.elementor-element-23d79c9 .elementor-heading-title{font-size:160px;}}@media(max-width:880px){.elementor-8799 .elementor-element.elementor-element-23d79c9 .elementor-heading-title{font-size:120px;}}@media(max-width:767px){.elementor-8799 .elementor-element.elementor-element-dfb9667{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:150px;--padding-bottom:100px;--padding-left:10px;--padding-right:10px;}.elementor-8799 .elementor-element.elementor-element-23d79c9{--wcf-ease:ease;}.elementor-8799 .elementor-element.elementor-element-23d79c9 > .elementor-widget-container{margin:3px 0px 0px 0px;}.elementor-8799 .elementor-element.elementor-element-23d79c9 .elementor-heading-title{font-size:70px;}.elementor-8799 .elementor-element.elementor-element-b301d51 > .elementor-widget-container{margin:3px 0px 0px 0px;padding:0px 0px 30px 0px;}.elementor-8799 .elementor-element.elementor-element-b301d51 .elementor-heading-title{font-size:16px;line-height:1.2em;letter-spacing:2px;}}@media(min-width:768px){.elementor-8799 .elementor-element.elementor-element-dfb9667{--content-width:100%;}}/* Start custom CSS for container, class: .elementor-element-dfb9667 */.elementor-8799 .elementor-element.elementor-element-dfb9667{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

/* Background Video & Overlay nach hinten */
.elementor-8799 .elementor-element.elementor-element-dfb9667 .elementor-background-video-container{
  z-index: 0 !important;
}
.elementor-8799 .elementor-element.elementor-element-dfb9667 .elementor-background-overlay{
  z-index: 0 !important;
}

/* DEBUG-Overlay (muss sichtbar sein) */
.elementor-8799 .elementor-element.elementor-element-dfb9667::before{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  pointer-events:none;
  z-index: 5;
  background: var(--smoke-gradient, transparent);
mix-blend-mode: multiply;   /* sichtbar & weich */
opacity: .7;

}

/* 1) Der Wrap ist nur noch "Content-Container" */
.smoke-wrap{
  position: relative;
  z-index: 1;
}

/* 2) Das Elementor Background-Video wird fixed und fullscreen */
.smoke-wrap .elementor-background-video-container{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1 !important;
  pointer-events: none !important;
  transform: translateZ(0);
}

/* 3) Das <video> selbst sauber skalieren */
.smoke-wrap .elementor-background-video-container video{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 4) Optional: auch das Overlay fixed machen (falls du eins nutzt) */
.smoke-wrap .elementor-background-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* 5) Body/Seite muss transparent sein, sonst siehst du kein fixed Video */
body{
  background: transparent !important;
}

/* Grain über Video/Farbmap, unter Content */
.smoke-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 2;              /* ggf. anpassen: muss UNTER Text liegen */
  background-image: url("https://cre8ive-studio.de/wp-content/uploads/2026/01/grain.png");
  background-repeat: repeat;
  background-size: 420px 420px;  /* feiner: kleiner, grober: größer */
  mix-blend-mode: overlay;       /* alternativ: soft-light */
  opacity: .2;
}

@media (prefers-reduced-motion: no-preference){
  .smoke-wrap::after{
    animation: grainMove 2.2s steps(2,end) infinite;
  }
}
@keyframes grainMove{
  0%   { transform: translate3d(0,0,0); }
  25%  { transform: translate3d(-2%, 1%,0); }
  50%  { transform: translate3d( 1%,-2%,0); }
  75%  { transform: translate3d(-1%,-1%,0); }
  100% { transform: translate3d(0,0,0); }
}/* End custom CSS */
/* Start custom CSS *//* ========== SMOKE WRAP (Video + Farb-Overlay) ========== */
.smoke-wrap{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

/* Elementor Video/Overlay nach hinten */
.smoke-wrap .elementor-background-video-container,
.smoke-wrap .elementor-background-overlay{
  z-index: 0 !important;
}

/* Farbmap über dem Video (wird von JS befüllt) */
.smoke-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 1;
  background: var(--smoke-gradient, transparent);

  /* Rauch einfärben wie Photoshop Multiply */
  mix-blend-mode: multiply;
  opacity: .9;
}

/* Inhalt nach vorne (damit Text nicht eingefärbt wird) */
.smoke-wrap .e-con-inner,
.smoke-wrap .elementor-container{
  position: relative;
  z-index: 2;
}


/* ========== HEADLINE GLOW ========== */

/* Default falls JS noch nicht gelaufen ist */
.smoke-zone{
  --tint: #ffffff;
  --glow: 1;        /* JS setzt dynamisch (subtil) */
  --breathe: 1;     /* CSS-Atmen */
}

/* Headline: Schriftfarbe + SMOOTHER Glow */
.smoke-zone .glow-title{
  /* Schrift selbst etwas „cleaner“/lesbarer:
     leichte Mischung Richtung Weiß (falls Browser kann) */
  color: var(--tint) !important;

  text-shadow:
    0 0 calc(4px  * var(--glow) * var(--breathe)) color-mix(in srgb, var(--tint) 65%, transparent),
    0 0 calc(10px * var(--glow) * var(--breathe)) color-mix(in srgb, var(--tint) 45%, transparent),
    0 0 calc(18px * var(--glow) * var(--breathe)) color-mix(in srgb, var(--tint) 30%, transparent);

  filter: drop-shadow(0 0 calc(8px * var(--glow) * var(--breathe)) color-mix(in srgb, var(--tint) 35%, transparent));

  transition: text-shadow .25s ease, filter .25s ease, color .25s ease;
  will-change: filter, text-shadow;
}

@keyframes glowBreathe{
  0%,100% { --breathe: .95; }
  50%     { --breathe: 1.05; }
}

@media (prefers-reduced-motion: no-preference){
  .smoke-zone{
    animation: glowBreathe 3.6s ease-in-out infinite;
  }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'cre8ive content';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://cre8ive-studio.de/wp-content/uploads/2026/04/Nohemi-VF-BF6438cc58ad63d.ttf') format('truetype');
}
@font-face {
	font-family: 'cre8ive content';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('https://cre8ive-studio.de/wp-content/uploads/2026/04/Nohemi-ExtraLight-BF6438cc58a2634.ttf') format('truetype');
}
@font-face {
	font-family: 'cre8ive content';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('https://cre8ive-studio.de/wp-content/uploads/2026/04/Nohemi-Bold-BF6438cc587b5b5.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Cre8ive &#8211; 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 &#8211; 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 &#8211; 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 &#8211; 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 &#8211; 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 */