.elementor-259165 .elementor-element.elementor-element-3df0267{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-259165 .elementor-element.elementor-element-6e97e3f > .elementor-widget-container{margin:2rem 0rem 0rem 0rem;}.elementor-259165 .elementor-element.elementor-element-3a97908 > .elementor-widget-container{margin:2rem 0rem 0rem 0rem;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-259165 .elementor-element.elementor-element-de3cc4b .elementor-icon-wrapper{text-align:center;}/* Start custom CSS *//* =============================================================
   TimeLine Electronics – Motion + Mobile
   Portierung der Animationen von electronics.timeline-erp.com
   (framer-motion) nach CSS, plus Mobile-Anpassungen.

   Aufbau
   0  Canvas-Fix (Enfold html min-width)
   1  Keyframes
   2  Hero: Einblend-Choreografie beim Laden (gestaffelte Delays)
   3  Hover: Karten-Lift, Pixel-Wipe-Buttons, Play-Button
   4  Mobile (<= 767px)
   5  prefers-reduced-motion

   Die Scroll-Reveals (Reveal-Komponente der Astro-Seite) liegen
   NICHT hier, sondern als Interaction "Scroll In" direkt an den
   jeweiligen Elementen.

   Selektoren: V4-Widgets (Headings, Paragraphs, Buttons) rendern
   ohne .elementor-element-<id>, nur Container haben die Klasse.
   Einheitlich greifbar sind alle ueber [data-id="<id>"].
   Der Prefix .elementor-page-259165 .elementor-259165.elementor
   sorgt fuer genug Spezifitaet gegen die lokalen Element-Styles,
   die nach dieser Datei geladen werden.

   Warum die Mobile-Regeln hier stehen und nicht am Element:
   Elementor verwirft @media-Bloecke in Element-Styles, die ueber
   die API geschrieben werden (getestet und bestaetigt).
   ============================================================= */

/* ---------- 0  Canvas-Fix -----------------------------------
   Enfold setzt html { min-width: 910px } und hebt das nur ueber
   die Klasse .responsive am <html> wieder auf. Im Elementor-
   Canvas-Template setzt das Theme diese Klasse nicht, dadurch
   war das Dokument auf dem Handy 910px breit und lief horizontal
   ueber. Das war die eigentliche Ursache der fehlenden Mobile-
   Darstellung: alle Grids der Seite sind mit auto-fit/minmax
   bereits responsiv, bekamen aber 910px Breite vorgesetzt.
   :root gibt genug Spezifitaet gegen die Theme-Regel, ohne
   !important. Diese Datei wird nur auf dieser Seite geladen,
   der Eingriff bleibt also lokal. */

html:root {
  min-width: 0;
}

.elementor-259165 {
  --tl-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 1  Keyframes -------------------------------------
   Die to-Blocks lassen transform/filter/clip-path bewusst weg:
   so faellt der Wert am Ende auf den Element-Eigenwert zurueck
   und kollidiert nicht mit den Hover-Effekten. */

@keyframes tlFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; }
}

@keyframes tlRise {
  from { opacity: 0; transform: translateY(18px); filter: blur(5px); }
  to   { opacity: 1; }
}

@keyframes tlRiseLg {
  from { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  to   { opacity: 1; }
}

@keyframes tlWipe {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; }
}

@keyframes tlGearIn {
  from { opacity: 0; transform: rotate(-20deg); }
  to   { opacity: 0.07; }
}

@keyframes tlSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes tlPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ---------- 2  Hero: Choreografie beim Laden ----------------- */

/* hero-eyebrow */
.elementor-page-259165 .elementor-259165.elementor [data-id="785fdbd0"] {
  animation: tlFadeUp 0.5s var(--tl-ease) both;
}
/* hero-h1 "Das ERP" */
.elementor-page-259165 .elementor-259165.elementor [data-id="8e977c9"] {
  animation: tlRise 0.6s var(--tl-ease) 0.1s both;
}
/* hero-hl "fuer EMS." – Wipe von links nach rechts */
.elementor-page-259165 .elementor-259165.elementor [data-id="3b518c47"] {
  animation: tlWipe 0.8s var(--tl-ease) 0.35s both;
}
/* hero-sub */
.elementor-page-259165 .elementor-259165.elementor [data-id="325b12a1"] {
  animation: tlRise 0.6s var(--tl-ease) 0.45s both;
}
/* hero-lead */
.elementor-page-259165 .elementor-259165.elementor [data-id="1b708ef8"] {
  animation: tlFadeUp 0.6s var(--tl-ease) 0.7s both;
}
/* hero-cta */
.elementor-page-259165 .elementor-259165.elementor [data-id="731d03e9"] {
  animation: tlFadeUp 0.6s var(--tl-ease) 0.85s both;
}
/* hero-award */
.elementor-page-259165 .elementor-259165.elementor [data-id="26491fec"] {
  animation: tlFadeUp 0.6s var(--tl-ease) 1s both;
}
/* hero-right (Video-Karte) */
.elementor-page-259165 .elementor-259165.elementor [data-id="3e2bf08f"] {
  animation: tlRiseLg 0.9s var(--tl-ease) 0.4s both;
}
/* hero-gear: einblenden + aufrichten ... */
.elementor-page-259165 .elementor-259165.elementor [data-id="7c0404c9"] {
  animation: tlGearIn 1.6s ease-out both;
}
/* ... und das SVG dreht sich danach endlos weiter */
.elementor-page-259165 .elementor-259165.elementor [data-id="92e8937"] {
  animation: tlSpin 120s linear 1.6s infinite;
}
/* Live-Punkt in der Webinar-Leiste */
.elementor-page-259165 .elementor-259165.elementor [data-id="11d64e49"] {
  animation: tlPulse 2s ease-in-out infinite;
}

/* ---------- 3  Hover ----------------------------------------
   Der Lift laeuft ueber translate/scale (eigenstaendige
   Properties), damit er sich nicht mit dem transform der
   Scroll-In-Interaction beisst. */

.elementor-page-259165 .elementor-259165.elementor :is(
  [data-id="2a5ac3ea"], [data-id="29f1459f"], [data-id="74d2e4ca"],
  [data-id="778713b4"], [data-id="48aba9df"], [data-id="1ec3bf3e"],
  [data-id="53e5f152"], [data-id="681c620"],  [data-id="73b139bf"],
  [data-id="7013e87b"], [data-id="1be97bef"], [data-id="5e6bddc5"],
  [data-id="384ace32"], [data-id="6e858709"], [data-id="7477d058"],
  [data-id="76fd6fe4"], [data-id="75dc1c5e"], [data-id="664fa6fc"],
  [data-id="5d7d8b53"], [data-id="2056506c"]
) {
  transition: translate 0.3s var(--tl-ease), border-color 0.3s ease,
              box-shadow 0.3s ease;
}

.elementor-page-259165 .elementor-259165.elementor :is(
  [data-id="2a5ac3ea"], [data-id="29f1459f"], [data-id="74d2e4ca"],
  [data-id="778713b4"], [data-id="48aba9df"], [data-id="1ec3bf3e"],
  [data-id="53e5f152"], [data-id="681c620"],  [data-id="73b139bf"],
  [data-id="7013e87b"], [data-id="1be97bef"], [data-id="5e6bddc5"],
  [data-id="384ace32"], [data-id="6e858709"], [data-id="7477d058"],
  [data-id="76fd6fe4"], [data-id="75dc1c5e"], [data-id="664fa6fc"],
  [data-id="5d7d8b53"], [data-id="2056506c"]
):hover {
  translate: 0 -4px;
  border-color: rgba(36, 87, 245, 0.35);
  box-shadow: 0 24px 40px -28px rgba(10, 26, 51, 0.45);
}

/* ---- Pixel-Wipe der Buttons --------------------------------
   CSS-Nachbau des Canvas-Effekts aus PixelButton.tsx.
   Die weisse Flaeche liegt in einem ::before mit z-index: -1 –
   dank isolation: isolate malt es ueber den Button-Hintergrund,
   aber unter die Schrift.
   9 Hintergrund-Layer = 9 Reihen a ~6px. Jede Reihe hat einen
   eigenen Rueckversatz (die px-Werte im calc), dadurch ist die
   Kante ausgefranst statt gerade. steps(16) laesst sie in
   Bloecken wandern, die drei Alpha-Stufen am rechten Rand
   entsprechen dem globalAlpha-Dithering des Originals.

   Der 2px-Rahmen ist im Ruhezustand transparent (der blaue
   Button-Hintergrund scheint durch) und kippt beim Hover auf
   Royalblau – sonst geht die weisse Flaeche auf hellem Grund
   ohne Kante ueber. Da inset: 0 an der Padding-Box haengt,
   bleibt der Rahmen als Ring um die Pixel-Flaeche stehen.

   Zwei Details, die sonst sichtbare Artefakte geben:
   – Die Versaetze muessen alle <= 0 sein. Positive Werte lassen
     im Endzustand am linken Rand einen unbedeckten Streifen.
   – background-size ist mit 13% hoeher als der Reihenabstand
     (11.11%), damit sich die Reihen leicht ueberlappen. Exakt
     passende Werte erzeugen durch Rundung feine Trennlinien. */

.elementor-page-259165 .elementor-259165.elementor :is(
  [data-id="2bed0677"],  /* hdr-cta */
  [data-id="5113f152"],  /* hero-btn1 */
  [data-id="70525966"],  /* cta1-btn */
  [data-id="44431e5f"],  /* clr-btn */
  [data-id="1e4b0d7d"],  /* cta2-btn */
  [data-id="98662aa"],   /* web-btn */
  [data-id="70f0ff6e"],  /* fin-btn */
  [data-id="d2536f3"]    /* dem-submit */
) {
  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;
}

.elementor-page-259165 .elementor-259165.elementor :is(
  [data-id="2bed0677"], [data-id="5113f152"], [data-id="70525966"],
  [data-id="44431e5f"], [data-id="1e4b0d7d"], [data-id="98662aa"],
  [data-id="70f0ff6e"], [data-id="d2536f3"]
)::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);
}

.elementor-page-259165 .elementor-259165.elementor :is(
  [data-id="2bed0677"], [data-id="5113f152"], [data-id="70525966"],
  [data-id="44431e5f"], [data-id="1e4b0d7d"], [data-id="98662aa"],
  [data-id="70f0ff6e"], [data-id="d2536f3"]
):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%;
}

/* Schrift und Rahmen kippen auf Royalblau, sobald die Pixel ueber
   der Haelfte sind (Original: progress > 0.6). Beim Verlassen
   sofort zurueck. */
.elementor-page-259165 .elementor-259165.elementor :is(
  [data-id="2bed0677"], [data-id="5113f152"], [data-id="70525966"],
  [data-id="44431e5f"], [data-id="1e4b0d7d"], [data-id="98662aa"],
  [data-id="70f0ff6e"], [data-id="d2536f3"]
):hover {
  background-color: #2457f5;
  border-color: #2457f5;
  color: #2457f5;
  transition-delay: 0.22s;
}

/* Play-Button im Hero-Video */
.elementor-page-259165 .elementor-259165.elementor [data-id="681d26ce"] {
  transition: scale 0.3s var(--tl-ease);
}
.elementor-page-259165 .elementor-259165.elementor [data-id="22a32c20"]:hover
  [data-id="681d26ce"] {
  scale: 1.1;
}

/* Sekundaerer Hero-Button */
.elementor-page-259165 .elementor-259165.elementor [data-id="1c5f9be5"] {
  transition: border-color 0.3s ease, translate 0.3s var(--tl-ease);
}
.elementor-page-259165 .elementor-259165.elementor [data-id="1c5f9be5"]:hover {
  translate: 0 -2px;
}

/* =============================================================
   4  Mobile (<= 767px, Elementor-Breakpoint)
   ============================================================= */

@media (max-width: 767px) {

  /* 4a  Dekoration, die auf dem Handy nur Platz kostet bzw. aus
     dem Viewport ragt. Zahnrad und Abschluss-Bild sind im
     Original erst ab lg sichtbar; der Puls-Punkt der Webinar-
     Leiste landete im Umbruch allein auf einer Zeile. */
  .elementor-page-259165 .elementor-259165.elementor :is(
    [data-id="7c0404c9"],  /* hero-gear */
    [data-id="45fb7f51"],  /* fin-img */
    [data-id="11d64e49"]   /* hdr-bar-dot */
  ) {
    display: none;
  }

  /* 4b  Mehr Textbreite: aeussere Wrapper und Karten enger fassen */
  .elementor-page-259165 .elementor-259165.elementor :is(
    [data-id="3bae2d1f"], [data-id="2342784b"], [data-id="75247f8"],
    [data-id="6e3668b7"], [data-id="7dc57b5"],  [data-id="5b47148d"],
    [data-id="7f8e1e95"], [data-id="45e5965d"], [data-id="55f8423e"],
    [data-id="69f6c1b9"], [data-id="9945adc"],  [data-id="1c515f12"],
    [data-id="7d4b5959"], [data-id="5ed71e94"]
  ) {
    padding-inline-start: 16px;
    padding-inline-end: 16px;
  }

  .elementor-page-259165 .elementor-259165.elementor :is(
    [data-id="2a5ac3ea"], [data-id="29f1459f"], [data-id="74d2e4ca"],
    [data-id="778713b4"], [data-id="48aba9df"], [data-id="1ec3bf3e"],
    [data-id="53e5f152"], [data-id="681c620"],  [data-id="73b139bf"],
    [data-id="7013e87b"], [data-id="1be97bef"], [data-id="5e6bddc5"],
    [data-id="384ace32"], [data-id="6e858709"], [data-id="7477d058"],
    [data-id="76fd6fe4"], [data-id="52317cf8"], [data-id="1f1fee78"],
    [data-id="77028582"], [data-id="6a312e35"], [data-id="7ff1b034"],
    [data-id="189745b9"], [data-id="40038e48"]
  ) {
    padding: 20px;
  }

  /* 4c  Grids, die auf 390px nicht aufgehen */

  /* dev-stats: Spalten waren 300px|75px, dadurch brach "20 %" um */
  .elementor-page-259165 .elementor-259165.elementor [data-id="4456316f"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* web-facts: 4 Spalten a 50px sind unlesbar */
  .elementor-page-259165 .elementor-259165.elementor [data-id="70705224"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  /* trs-stats: zwei Spalten sind fuer die Label-Texte zu schmal
     ("Ausgezeichnet seit" brach auf zwei Zeilen um) */
  .elementor-page-259165 .elementor-259165.elementor [data-id="4f25fbe0"] {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Lieferanten-Zeilen: Label braucht mehr Platz, sonst bricht
     "Lieferant A" um waehrend die anderen Spalten einzeilig bleiben */
  .elementor-page-259165 .elementor-259165.elementor :is(
    [data-id="195178d6"], [data-id="297f301d"], [data-id="73fa7609"]
  ) {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
  }
  .elementor-page-259165 .elementor-259165.elementor :is(
    [data-id="195178d6"], [data-id="297f301d"], [data-id="73fa7609"]
  ) > * {
    font-size: 12px;
  }

  /* 4d  Karten-Ueberschriften: lange Komposita wie
     "Stuecklistenmanagement" liefen sonst ueber die Karte */
  .elementor-page-259165 .elementor-259165.elementor :is(
    [data-id="b00afcd"],  [data-id="2c8b898e"], [data-id="49ae5f5f"],
    [data-id="4492b939"], [data-id="5c08fd55"], [data-id="19c52207"],
    [data-id="6be7271"],  [data-id="16f8bb75"], [data-id="5dbbe247"],
    [data-id="57970b66"], [data-id="42d35a94"], [data-id="378c1265"],
    [data-id="7c852a13"], [data-id="5c09b662"], [data-id="6ac8b900"],
    [data-id="31c5836c"]
  ) {
    font-size: 19px;
    letter-spacing: -0.2px;
  }

  /* Sicherheitsnetz gegen ueberlaufende Einzelwoerter */
  .elementor-page-259165 .elementor-259165.elementor :is(h1, h2, h3, p, span, a) {
    overflow-wrap: break-word;
  }

  /* 4e  Webinar-Badge passte nicht in eine Zeile */
  .elementor-page-259165 .elementor-259165.elementor [data-id="54801303"] {
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  /* Auszeichnungs-Badges ragten rechts aus dem Viewport */
  .elementor-page-259165 .elementor-259165.elementor [data-id="1cc8315d"] {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* 4f  Primaer-Buttons auf volle Breite – groessere Tap-Flaeche */
  .elementor-page-259165 .elementor-259165.elementor :is(
    [data-id="5113f152"], [data-id="1c5f9be5"], [data-id="70525966"],
    [data-id="44431e5f"], [data-id="1e4b0d7d"], [data-id="98662aa"],
    [data-id="70f0ff6e"], [data-id="2bed0677"]
  ) {
    width: 100%;
  }
}

/* =============================================================
   5  prefers-reduced-motion
   animation: none stellt den Normalzustand wieder her, weil die
   Startwerte ausschliesslich in den Keyframes stehen. Die Pixel-
   Flaeche der Buttons wird ganz ausgeblendet.
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  .elementor-page-259165 .elementor-259165.elementor *,
  .elementor-page-259165 .elementor-259165.elementor *::before,
  .elementor-page-259165 .elementor-259165.elementor *::after {
    animation: none !important;
    transition: none !important;
  }
  .elementor-page-259165 .elementor-259165.elementor :is(
    [data-id="2bed0677"], [data-id="5113f152"], [data-id="70525966"],
    [data-id="44431e5f"], [data-id="1e4b0d7d"], [data-id="98662aa"],
    [data-id="70f0ff6e"], [data-id="d2536f3"]
  )::before {
    display: none;
  }
}
@media (min-width: 990px) {

  html.html_header_top.html_header_topbar_active.html_header_sticky
  #top.page-id-259165 #main {
    padding-top: 0;
  }

  #top.page-id-259165 #header .header_bg {
    opacity: 0;
    transition: opacity .25s ease;
  }

  #top.page-id-259165 #header.header-scrolled .header_bg {
    opacity: .95;
  }

  #top.page-id-259165 #start {
    padding-top: 140px;
  }
}/* End custom CSS */