.elementor-kit-7{--e-global-color-primary:#FDDD00;--e-global-color-secondary:#E5E5E5;--e-global-color-text:#606060;--e-global-color-accent:#FDDD00;--e-global-color-efc2779:#FFFFFF;--e-global-color-131b4ff:#FFFFFF;--e-global-color-14df6cb:#131106;--e-global-color-d48360b:#D6D6D6;--e-global-color-d0e6440:#FFE534;--e-global-color-eb4926f:#00080E;--e-global-color-d8fa3bc:#C0C0C0;--e-global-typography-primary-font-family:"Arial";--e-global-typography-primary-font-size:24px;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-size:24px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:24px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:35px;--e-global-typography-accent-font-family:"Bebas Neue";--e-global-typography-accent-font-size:35px;--e-global-typography-accent-font-weight:500;--e-global-typography-3e560a7-font-family:"Bebas Neue";--e-global-typography-3e560a7-font-size:72px;--e-global-typography-3e560a7-font-weight:400;--e-global-typography-3e560a7-text-transform:uppercase;--e-global-typography-5a7b66c-font-family:"Bebas Neue";--e-global-typography-5a7b66c-font-size:72px;--e-global-typography-5a7b66c-font-weight:400;--e-global-typography-5a7b66c-text-transform:uppercase;--e-global-typography-a336a9e-font-family:"Inter";--e-global-typography-a336a9e-font-size:18px;--e-global-typography-a336a9e-font-weight:500;--e-global-typography-5f97d43-font-family:"Inter";--e-global-typography-5f97d43-font-size:18px;--e-global-typography-5f97d43-font-weight:400;--e-global-typography-5f97d43-line-height:30px;--e-global-typography-7eb7d1e-font-family:"Bebas Neue";--e-global-typography-7eb7d1e-font-size:40px;--e-global-typography-7eb7d1e-font-weight:400;--e-global-typography-7eb7d1e-text-transform:uppercase;--e-global-typography-24a6a12-font-family:"Inter";--e-global-typography-24a6a12-font-size:18px;--e-global-typography-24a6a12-font-weight:500;--e-global-typography-24a6a12-text-transform:uppercase;--e-global-typography-a177dfc-font-family:"Bebas Neue";--e-global-typography-a177dfc-font-size:210px;--e-global-typography-a177dfc-font-weight:400;--e-global-typography-a177dfc-text-transform:uppercase;background-color:#FFFFFF;background-image:url("https://preview2025.dtm-reifen.de/wp-content/uploads/2025/07/2343.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-kit-7 a{color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.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;}@media(min-width:1367px){.elementor-kit-7{background-attachment:fixed;}}@media(max-width:1366px){.elementor-kit-7{--e-global-typography-a177dfc-font-size:180px;background-repeat:repeat;background-size:auto;}}@media(max-width:1024px){.elementor-kit-7{--e-global-typography-text-font-size:19px;--e-global-typography-text-line-height:31px;--e-global-typography-5a7b66c-font-size:48px;--e-global-typography-a336a9e-font-size:13px;--e-global-typography-5f97d43-font-size:17px;--e-global-typography-5f97d43-line-height:27px;--e-global-typography-a177dfc-font-size:145px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-text-font-size:19px;--e-global-typography-text-line-height:27px;--e-global-typography-3e560a7-font-size:36px;--e-global-typography-5a7b66c-font-size:36px;--e-global-typography-a336a9e-font-size:13px;--e-global-typography-7eb7d1e-font-size:36px;--e-global-typography-a177dfc-font-size:70px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* halbtransparentes Weiß */
  pointer-events: none; /* klickbar bleibt alles darunter */
  z-index: -10;
}

:root{
  --header-h: 80px;      /* Fallback, wird per JS überschrieben */
  --adminbar-h: 0px;     /* wird per JS gesetzt, wenn Admin-Bar da ist */
}

/* Fixierter Header-Container */
#siteHeader{
  position: fixed;
  left: 0; right: 0;
  top: var(--adminbar-h);
  z-index: 9999;
  transition: transform .35s ease, opacity .35s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Beim Verstecken nach oben herausschieben + ausfaden */
#siteHeader.is-hidden{
  transform: translateY(calc(-100% - var(--adminbar-h)));
  opacity: 0;
  pointer-events: none;
}

/* Seite nach unten „abpolstern“, damit nichts unter dem Header liegt */
body.has-fixed-header{
  padding-top: calc(var(--header-h) + var(--adminbar-h));
}

/* (Optional) dezenter Schatten, wenn sichtbar */
/* Standard: kein Schatten */
#siteHeader{
  box-shadow: none;
}

/* Ab Scroll >150px: Schatten */
#siteHeader.scrolled{
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

/* Wenn du den Effekt nur auf Desktop willst: */
/*
@media (max-width: 1024px){
  #siteHeader{ position: static; }
  body.has-fixed-header{ padding-top: 0; }
}
*/



/* =========================
   Reveal Headlines – mit JS-Fallback
   ========================= */

/* Standard: immer sichtbar (falls JS ausfällt) */
.reveal-tracking,
.reveal-hero{
  opacity: 1;
}

/* Nur wenn JS aktiv UND im Frontend: Startzustand unsichtbar + animierbar */
.js body:not(.elementor-editor-active) .reveal-tracking,
.js body:not(.elementor-editor-active) .reveal-hero{
  opacity: 0;
  will-change: letter-spacing, transform, opacity;
}

/* ===== Normale Headlines ===== */
.js body:not(.elementor-editor-active) .reveal-tracking.is-inview{
  animation: tracking-in-expand 0.9s cubic-bezier(.215,.61,.355,1) both;
}

/* Keyframes – Normal */
@keyframes tracking-in-expand{
  0%{
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40%{ opacity: 1; }
  100%{
    letter-spacing: 0;
    opacity: 1;
  }
}

/* ===== HERO Headline (langsamer, stärkerer Einlauf) ===== */
.js body:not(.elementor-editor-active) .reveal-hero.is-inview{
  animation: tracking-in-expand-hero 2s cubic-bezier(.215,.61,.355,1) both;
}

/* Keyframes – Hero */
@keyframes tracking-in-expand-hero{
  0%{
    letter-spacing: -2em;
    opacity: 0;
  }
  40%{ opacity: 1; }
  100%{
    letter-spacing: 0;
    opacity: 1;
  }
}

/* Barrierefreiheit */
@media (prefers-reduced-motion: reduce){
  .reveal-tracking,
  .reveal-hero,
  .reveal-tracking.is-inview,
  .reveal-hero.is-inview{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    letter-spacing: 0 !important;
  }
}

/* =========================
   HERO SLIDER: Title-only Animation (forced)
   ========================= */

/* Sicherheit: im Slider niemals alles durch reveal-hero beeinflussen */
#heroSlider .reveal-hero{
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  letter-spacing: 0 !important;
}

/* Titel standardmäßig sichtbar */
#heroSlider .elementor-slide-heading{
  opacity: 1 !important;
  transform: none !important;
}

/* Nur wenn JS-Klasse gesetzt ist -> Animation (mit !important gegen Inline) */
body:not(.elementor-editor-active) #heroSlider .elementor-slide-heading.is-anim{
  display: inline-block; /* wichtig für transform sichtbar */
  opacity: 0 !important;
  transform: translateY(18px) !important;
  animation: heroTitleIn .9s cubic-bezier(.215,.61,.355,1) both !important;
  will-change: transform, opacity;
}

@keyframes heroTitleIn{
  0%{ opacity: 0; transform: translateY(18px); }
  60%{ opacity: 1; }
  100%{ opacity: 1; transform: translateY(0); }
}

/* Beschreibung & Button bleiben ruhig */
#heroSlider .elementor-slide-description,
#heroSlider .elementor-slide-button{
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Background Zoom (dein DOM: .swiper-slide-bg) */
#heroSlider .swiper-slide{ overflow: hidden; }
#heroSlider .swiper-slide-bg{
  transform: scale(1.18) !important;
  transform-origin: center;
  transition: transform 1.2s ease, background-position 1.2s ease;
  will-change: transform, background-position;
}
#heroSlider .swiper-slide-active .swiper-slide-bg{
  transform: scale(1.05) !important;
}

/* Position pro Breakpoint */
@media (min-width: 1441px){ #heroSlider .swiper-slide-bg{ background-position: 70% 50% !important; } }
@media (min-width: 1025px) and (max-width: 1440px){ #heroSlider .swiper-slide-bg{ background-position: 65% 50% !important; } }
@media (min-width: 768px) and (max-width: 1024px){ #heroSlider .swiper-slide-bg{ background-position: 60% 40% !important; } }
@media (max-width: 767px){
  #heroSlider .swiper-slide-bg{
    background-position: 50% 25% !important;
    transform: scale(1.35) !important;
  }
  #heroSlider .swiper-slide-active .swiper-slide-bg{
    transform: scale(1.20) !important;
  }
}
/* ===== Slider Titel: Endzustand erzwingen ===== */
body:not(.elementor-editor-active)
#heroSlider .swiper-slide-active .elementor-slide-heading{
  opacity: 1 !important;
  transform: translateY(0) !important;
}/* End custom CSS */