.elementor-259578 .elementor-element.elementor-element-tlscripts{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS *//* =============================================================
   TimeLine Vertrieb kontaktieren (WP 259578) – Akzente, Motion, Mobile
   Gleiche Logik wie Electronics, Startseite und KI-Bonus.

   Aufbau
   0  Canvas-Fix, Header über dem Hero, Grundwerte
   1  Textakzente (Inline-HTML verliert class/style, darum über Abschnitts-IDs)
   2  Keyframes, Hero-Choreografie, Wort-Einblendungen
   3  Hover: Karten-Lift, Pixel-Wipe der Primär-Buttons
   4  Formular
   5  Tablet (<= 1024px) und Mobile (<= 767px)
   6  prefers-reduced-motion
   ============================================================= */

/* ---------- 0  Canvas-Fix + Header -------------------------------- */

html:root {
  min-width: 0;
}

.elementor-259578 {
  --tl-ease: cubic-bezier(0.4, 0, 0.2, 1);
  font-variant-emoji: text;
}

@media (min-width: 990px) {
  html.html_header_top.html_header_topbar_active.html_header_sticky
  #top:is(.page-id-259578, .postid-259578) #main {
    padding-top: 0;
  }
  #top:is(.page-id-259578, .postid-259578) #header .header_bg {
    opacity: 0;
    transition: opacity .25s ease;
  }
  #top:is(.page-id-259578, .postid-259578) #header.header-scrolled .header_bg {
    opacity: .95;
  }
  #top:is(.page-id-259578, .postid-259578) #start {
    padding-top: 190px;
  }
}

html {
  scroll-behavior: smooth;
}
.elementor-259578 section[id] {
  scroll-margin-top: 80px;
}

:where(.elementor-259578) :is(h1, h2, h3) {
  text-wrap: balance;
}
:where(.elementor-259578) p {
  text-wrap: pretty;
}
#top #wrap_all .elementor.elementor-259578 :is(h1, h2, h3) {
  font-weight: 700;
}
.elementor-259578 :is(h1, h2, h3, p) {
  overflow-wrap: break-word;
  hyphens: manual;
}

/* ---------- 1  Textakzente ----------------------------------------- */

/* Verlaufsmarkierung wie „für EMS.“ auf der Electronics-Seite */
#start h1 span:not(.tl-w) {
  display: inline-block;
  padding: 0 0.22em 0.04em;
  border-radius: 0.14em;
  color: #fff;
  background: linear-gradient(90deg, #2457f5 0%, #4f7cf7 45%, rgba(79, 124, 247, 0.25) 100%);
}

/* Zweite Headline-Zeile auf hellem Grund */
:is(#wege, #team) h2 span:not(.tl-w) {
  color: #2457f5;
}

/* Live-Punkte */
#kb-live {
  display: flex;
  align-items: center;
  gap: 8px;
}
#kb-live::before {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #2457f5;
  animation: tlPulse 2s ease-in-out infinite;
}


/* ---------- 2  Keyframes + Hero ------------------------------------ */

@keyframes tlFadeUp {
  from { opacity: 0; transform: translateY(12px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes tlRise {
  from { opacity: 0; transform: translateY(18px); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes tlSlideIn {
  from { opacity: 0; transform: translateX(40px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes tlPop {
  from { opacity: 0; transform: translateY(14px) scale(0.85); }
  to   { opacity: 1; transform: none; }
}
@keyframes tlWord {
  from { opacity: 0; transform: translateY(10px); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes tlSpin {
  to { transform: rotate(360deg); }
}
@keyframes tlPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* Choreografie beim Laden; fill-mode backwards, damit kein blur(0) stehen bleibt */
#kb-hero-left > :nth-child(1) { animation: tlFadeUp 0.5s var(--tl-ease) backwards; }
#kb-hero-left > :nth-child(2) { animation: tlRise 0.7s var(--tl-ease) 0.1s backwards; }
#kb-hero-left > :nth-child(3) { animation: tlRise 0.6s var(--tl-ease) 0.45s backwards; }
#kb-hero-left > :nth-child(4) { animation: tlFadeUp 0.6s var(--tl-ease) 0.7s backwards; }
#kb-hero-left > :nth-child(5) { animation: tlFadeUp 0.6s var(--tl-ease) 0.85s backwards; }
#kb-hero-left > :nth-child(6) { animation: tlFadeUp 0.6s var(--tl-ease) 1s backwards; }
#anfrage { animation: tlSlideIn 1s var(--tl-ease) 0.4s backwards; }

/* H1 Wort für Wort (das Motion-Skript zerlegt sie in .tl-w) */
#start h1.tl-split {
  animation: none;
}
#start h1 :is(.tl-w, .tl-u) {
  display: inline-block;
  animation: tlWord 0.6s var(--tl-ease) backwards;
  animation-delay: calc(var(--i) * 70ms + 100ms);
}

/* H2 beim Scrollen Wort für Wort, ohne JS bleibt alles sichtbar */
#top .elementor-259578 .tl-words :is(.tl-w, .tl-u) {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(10px);
  transition:
    opacity 0.6s var(--tl-ease) calc(var(--i) * 60ms),
    transform 0.6s var(--tl-ease) calc(var(--i) * 60ms),
    filter 0.6s var(--tl-ease) calc(var(--i) * 60ms);
}
#top .elementor-259578 .tl-words.tl-in :is(.tl-w, .tl-u) {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Zahnräder drehen sich langsam, wie am Messestand */
#kb-hero-gear svg {
  animation: tlSpin 120s linear infinite;
}

/* ---------- 3  Hover ---------------------------------------------- */

[id^="kb-way-"] {
  transition: translate 0.3s var(--tl-ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
[id^="kb-way-"]:hover {
  translate: 0 -4px;
  box-shadow: 0 24px 40px -28px rgba(10, 26, 51, 0.45);
}
#kb-trial {
  transition: translate 0.3s var(--tl-ease), box-shadow 0.3s ease;
}
#kb-trial:hover {
  translate: 0 -2px;
}

/* Pixel-Wipe der Primär-Buttons (Nachbau von PixelButton.tsx, wie Electronics) */
#top :is(#kb-btn-form, #kb-btn-tm) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid transparent;
  transition: color 0.15s ease 0s, border-color 0.15s ease 0s;
}
#top :is(#kb-btn-form, #kb-btn-tm)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(90deg,#fff 0 calc(50% - 24px),rgba(255,255,255,.72) calc(50% - 24px) calc(50% - 16px),rgba(255,255,255,.46) calc(50% - 16px) calc(50% - 8px),rgba(255,255,255,.22) calc(50% - 8px) 50%,transparent 50%),
    linear-gradient(90deg,#fff 0 calc(50% - 24px),rgba(255,255,255,.72) calc(50% - 24px) calc(50% - 16px),rgba(255,255,255,.46) calc(50% - 16px) calc(50% - 8px),rgba(255,255,255,.22) calc(50% - 8px) 50%,transparent 50%),
    linear-gradient(90deg,#fff 0 calc(50% - 24px),rgba(255,255,255,.72) calc(50% - 24px) calc(50% - 16px),rgba(255,255,255,.46) calc(50% - 16px) calc(50% - 8px),rgba(255,255,255,.22) calc(50% - 8px) 50%,transparent 50%),
    linear-gradient(90deg,#fff 0 calc(50% - 24px),rgba(255,255,255,.72) calc(50% - 24px) calc(50% - 16px),rgba(255,255,255,.46) calc(50% - 16px) calc(50% - 8px),rgba(255,255,255,.22) calc(50% - 8px) 50%,transparent 50%),
    linear-gradient(90deg,#fff 0 calc(50% - 24px),rgba(255,255,255,.72) calc(50% - 24px) calc(50% - 16px),rgba(255,255,255,.46) calc(50% - 16px) calc(50% - 8px),rgba(255,255,255,.22) calc(50% - 8px) 50%,transparent 50%),
    linear-gradient(90deg,#fff 0 calc(50% - 24px),rgba(255,255,255,.72) calc(50% - 24px) calc(50% - 16px),rgba(255,255,255,.46) calc(50% - 16px) calc(50% - 8px),rgba(255,255,255,.22) calc(50% - 8px) 50%,transparent 50%),
    linear-gradient(90deg,#fff 0 calc(50% - 24px),rgba(255,255,255,.72) calc(50% - 24px) calc(50% - 16px),rgba(255,255,255,.46) calc(50% - 16px) calc(50% - 8px),rgba(255,255,255,.22) calc(50% - 8px) 50%,transparent 50%),
    linear-gradient(90deg,#fff 0 calc(50% - 24px),rgba(255,255,255,.72) calc(50% - 24px) calc(50% - 16px),rgba(255,255,255,.46) calc(50% - 16px) calc(50% - 8px),rgba(255,255,255,.22) calc(50% - 8px) 50%,transparent 50%),
    linear-gradient(90deg,#fff 0 calc(50% - 24px),rgba(255,255,255,.72) calc(50% - 24px) calc(50% - 16px),rgba(255,255,255,.46) calc(50% - 16px) calc(50% - 8px),rgba(255,255,255,.22) calc(50% - 8px) 50%,transparent 50%);
  background-repeat: no-repeat;
  background-size: 250% 13%;
  background-position:
    calc(100% - 0px) 0%, calc(100% - 16px) 12.5%, calc(100% - 8px) 25%,
    calc(100% - 24px) 37.5%, calc(100% - 4px) 50%, calc(100% - 20px) 62.5%,
    calc(100% - 12px) 75%, calc(100% - 2px) 87.5%, calc(100% - 18px) 100%;
  transition: background-position 0.45s steps(16, end);
}
#top :is(#kb-btn-form, #kb-btn-tm):hover::before {
  background-position:
    calc(0% - 0px) 0%, calc(0% - 16px) 12.5%, calc(0% - 8px) 25%,
    calc(0% - 24px) 37.5%, calc(0% - 4px) 50%, calc(0% - 20px) 62.5%,
    calc(0% - 12px) 75%, calc(0% - 2px) 87.5%, calc(0% - 18px) 100%;
}
#top :is(#kb-btn-form, #kb-btn-tm):hover {
  background-color: #2457f5;
  border-color: #2457f5;
  color: #2457f5;
  transition-delay: 0.22s;
}

/* ---------- 4  Formular -------------------------------------------- */

#anfrage :is(input:not([type="checkbox"]), textarea):focus {
  outline: none;
  border-color: #2457f5;
  box-shadow: 0 0 0 4px rgba(36, 87, 245, 0.15);
}
#anfrage :is(input, textarea)::placeholder {
  color: rgba(10, 26, 51, 0.45);
}
#kb-consent a {
  color: #2457f5;
  text-decoration: underline;
}
#kb-accept input[type="checkbox"] {
  accent-color: #2457f5;
  cursor: pointer;
}
/* Betreff kurz hervorheben, wenn der 90-Tage-Button ihn vorbefüllt */
#anfrage {
  scroll-margin-top: 110px;
}

/* =============================================================
   5  Tablet und Mobile
   Alle Grids laufen über auto-fit/minmax, hier stehen nur
   Hero, Abstände und Tap-Flächen.
   ============================================================= */

@media (max-width: 1024px) {
  #kb-hero-gear {
    display: none;
  }
}

/* Telefon-Chip über dem Teamfoto: nur so breit wie sein Inhalt */
#top #kb-hero-phone {
  width: auto;
  right: auto;
  max-width: calc(100% - 32px);
}

@media (max-width: 767px) {
  /* Telefon-Chip liegt mobil unter dem Foto statt über den Gesichtern */
  #top #kb-hero-phone {
    position: static;
    max-width: none;
    margin-top: 12px;
    box-shadow: none;
    border: 1px solid rgba(36,87,245,0.2);
  }
  /* Abstände: Abschnitte und Inhaltsbreite */
  .elementor-259578 section[id] {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  #start {
    padding-top: 32px;
    padding-bottom: 72px;
  }
  #fin {
    padding-top: 0;
  }
  .elementor-259578 section[id] > .e-con:not([id$="-gear"]) {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Hero */
  #start h1 {
    font-size: 42px;
    letter-spacing: -1.2px;
  }
  #anfrage {
    padding: 22px;
  }
  #kb-trial {
    padding: 16px;
  }
  [id^="kb-way-"] {
    padding: 22px;
  }
  [id^="kb-way-"] a,
  #kb-btn-tm {
    width: 100%;
  }
}

/* =============================================================
   6  prefers-reduced-motion
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .elementor-259578 *,
  .elementor-259578 *::before,
  .elementor-259578 *::after {
    animation: none !important;
    transition: none !important;
  }
  #top :is(#kb-btn-form, #kb-btn-tm)::before {
    display: none;
  }
}

/* Skript-Container nimmt keinen Platz ein */
.elementor-259578 .tl-scripts {
  display: none;
}/* End custom CSS */