/* Start custom CSS *//* =============================================================
   TimeLine Startseite (neu) – Akzente, Motion, Mobile
   Vorlage: electronics.timeline-erp.com/startseite (Astro).

   Aufbau
   0  Canvas-Fix und Enfold-Header über dem Hero
   1  Textakzente (Elementor entfernt class/style aus Inline-HTML,
      darum greifen die Farben über Abschnitts-IDs + span)
   2  Keyframes und Hero-Choreografie
   3  Pixel-Wipe der Primär-Buttons (wie Electronics)
   4  Tablet (<= 1024px) und Mobile (<= 767px)
   5  prefers-reduced-motion

   Selektoren: Abschnitte und Grids tragen eigene IDs (tl-…, tlh-…),
   Einzel-Buttons werden über [data-id] angesprochen.
   ============================================================= */

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

html:root {
  min-width: 0;
}

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

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

/* Desktop-Hero: Screens liegen absolut in ihrer Spalte und laufen rechts
   aus dem Bild, damit sie die Höhe des Heros nicht bestimmen. */
@media (min-width: 1025px) {
  #start {
    height: 100vh;
    min-height: 640px;
    max-height: 1100px;
  }
  #tlh-hero-grid {
    grid-template-rows: auto auto;
    align-content: center;
    row-gap: clamp(28px, 5vh, 56px);
  }
  #tlh-hero-right {
    align-self: stretch;
    width: auto;
    /* bis genau an die Fensterkante: Rand des 1320er-Wraps + 40px Innenabstand */
    margin-right: calc(-1 * (max(0px, (100vw - 1320px) / 2) + 40px));
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  /* explizit in Zeile 2, sonst weicht die Zeile neben der Screen-Spalte
     in eine dritte Rasterzeile aus und der Abstand verdoppelt sich */
  #tlh-hero-chips {
    grid-row: 2;
  }
  /* Die Grafik ist oben hart beschnitten: sie hängt deshalb am Hero-Raster
     (nicht an ihrer Spalte), läuft bis zur Oberkante des Heros hinter den
     transparenten Header und wird dort weich ausgeblendet. */
  #tlh-hero-right {
    position: static;
    animation: none;
  }
  #tlh-hero-right img {
    position: absolute;
    top: -102px;
    bottom: 0;
    right: calc(-1 * max(0px, (100vw - 1320px) / 2));
    margin: 0;
    height: calc(100% + 102px);
    max-height: none;
    width: auto;
    max-width: 50vw;
    object-fit: contain;
    object-position: right bottom;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.35) 70px, #000 220px);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.35) 70px, #000 220px);
    animation: tlSlideIn 1s var(--tl-ease) 0.4s backwards;
  }
  #tlh-hero-left h1 {
    font-size: clamp(40px, 6.6vh, 68px);
  }
  #tlh-hero-left > p:nth-child(3) {
    font-size: clamp(16px, 2vh, 19px);
  }
  /* Branchen: linke Spalte breiter, sonst bricht die Headline vierfach */
  #tl-branchen > .e-con > .e-con:first-child {
    grid-template-columns: 1.35fr 1fr;
  }
}

/* ---------- 0b  Grundwerte angleichen -------------------------------
   V4-Div-Blöcke bringen 10px Innenabstand mit, das Theme setzt eigene
   Zeilenhöhen und eine schwächere H1. :where() hält die Spezifität bei
   (0,1,0): schlägt die Basis-Styles, aber nicht die lokalen Element-Styles. */

/* Container ohne eigenen Innenabstand (Liste aus dem Bau-Skript) */
#top .elementor-259435 :is(
[data-id="390c7c0c"],
[data-id="2153c371"],
[data-id="5ff3d1fd"],
[data-id="7e452dcc"],
[data-id="13c2494"],
[data-id="70579f51"],
[data-id="38a29245"],
[data-id="627189ac"],
[data-id="4b5854c3"],
[data-id="2acac105"],
[data-id="55a7bf92"],
[data-id="6a15d1b9"],
[data-id="716885be"],
[data-id="7e8dced5"],
[data-id="4aed4cd3"],
[data-id="7b02c6a9"],
[data-id="12a3b212"],
[data-id="6ab7b703"],
[data-id="451ef847"],
[data-id="77b159be"],
[data-id="3c1cd847"],
[data-id="5753a89b"],
[data-id="49160eeb"],
[data-id="1bc68b0a"],
[data-id="30124e1e"],
[data-id="348a5ac7"],
[data-id="19c25b33"],
[data-id="4fa3d686"],
[data-id="7ae41cdd"],
[data-id="a355e9c"],
[data-id="11f5bd45"],
[data-id="521d3f5"],
[data-id="1b38ccba"],
[data-id="5f24340a"],
[data-id="3f66941f"],
[data-id="37ff30ea"],
[data-id="55e69750"],
[data-id="5443ec9b"],
[data-id="488d4559"],
[data-id="6f30b7c8"],
[data-id="1dfb370e"],
[data-id="cef295c"],
[data-id="10c451cf"],
[data-id="14d4494e"],
[data-id="56d96610"],
[data-id="5ed1a96d"],
[data-id="5a1e2252"],
[data-id="26aea3e5"],
[data-id="112d793e"],
[data-id="38a06692"],
[data-id="742d8347"],
[data-id="7d4b00fe"],
[data-id="1bcc140b"],
[data-id="76418876"],
[data-id="556cc224"],
[data-id="54219a00"],
[data-id="3ee4a9e3"],
[data-id="38ec6d2c"],
[data-id="69ceb35e"],
[data-id="19319e0d"],
[data-id="c27c0c6"],
[data-id="32030cc7"],
[data-id="7c0caae3"],
[data-id="430cddd9"],
[data-id="36d0c3df"],
[data-id="a6a6f0a"],
[data-id="652ad56b"],
[data-id="62eafeb8"],
[data-id="4cac8686"],
[data-id="37571a1f"],
[data-id="22d83929"],
[data-id="4a6b4005"],
[data-id="2e998b20"],
[data-id="719be191"],
[data-id="65240513"],
[data-id="525b123a"],
[data-id="10e6a81d"],
[data-id="53a89387"],
[data-id="7c9a9b48"],
[data-id="14497abf"],
[data-id="4426a55d"]
) {
  padding: 0;
}
:where(.elementor-259435) :is(h1, h2, h3) {
  text-wrap: balance;
}
:where(.elementor-259435) p {
  text-wrap: pretty;
}
#top #wrap_all .elementor.elementor-259435 :is(h1, h2, h3) {
  font-weight: 700;
}
:where(.elementor-259435) section p {
  line-height: 1.5;
}

/* Hero-Eyebrow vorerst ohne Text, der Abstand bleibt */
#tlh-hero-left > p:first-child {
  visibility: hidden;
}

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

/* Verlaufsmarkierung wie „ERP completa.“ */
#tlh-hero-left h1 span:not(.tl-w),
#tl-dev h2 span:not(.tl-w),
#tl-trial h2 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(#tl-plattform, #tl-branchen, #tl-awards, #tl-gruppe, #tl-events, #tl-blog, #tl-webinar, #tl-faq) :is(h2, h3) span:not(.tl-w) {
  color: #2457f5;
}

/* KI: Cyan-Verlauf */
#tl-ki h2 span:not(.tl-w) {
  background: linear-gradient(90deg, #22c3ee, #a5f3fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Cyan-Punkt vor „Neue KI-Funktionen“ */
#tlh-hero-cta > :nth-child(2)::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: #22c3ee;
}

/* Live-Punkt im Messe-Hinweis */
#top .elementor-259435 [data-id="4642cf63"] {
  display: flex;
  align-items: center;
  gap: 6px;
}
#top .elementor-259435 [data-id="4642cf63"]::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #2457f5;
  animation: tlPulse 2s ease-in-out infinite;
}

/* V4-Div-Blöcke sind standardmäßig 100 % breit; die Hinweis-Karten
   im Hero sollen aber nur so breit wie ihr Inhalt sein. */
#tlh-hero-chips > * {
  width: auto;
  flex: 0 1 auto;
}

#tlh-hero-chips > *::after {
  content: "";
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-left: 24px;
  border-radius: 50%;
  border: 1px solid rgba(1, 73, 145, 0.12);
  background: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%232457f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5l7-7M4.5 3.5h6v6'/%3E%3C/svg%3E");
}

/* Pfeile in Buttons als Textzeichen, nicht als Emoji (iOS) */
.elementor-259435 {
  font-variant-emoji: text;
}

/* Lange Komposita sicher umbrechen */
.elementor-259435 :is(h1, h2, h3, p) {
  overflow-wrap: break-word;
  hyphens: manual;
}
#tl-pf-grid p {
  hyphens: auto;
}

/* ---------- 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 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; }
}

#tlh-hero-left > :nth-child(1) { animation: tlFadeUp 0.5s var(--tl-ease) backwards; }
#tlh-hero-left > :nth-child(2) { animation: tlRise 0.7s var(--tl-ease) 0.1s backwards; }
#tlh-hero-left > :nth-child(3) { animation: tlFadeUp 0.6s var(--tl-ease) 0.7s backwards; }
#tlh-hero-left > :nth-child(4) { animation: tlFadeUp 0.6s var(--tl-ease) 0.85s backwards; }
#tlh-hero-right { animation: tlSlideIn 1s var(--tl-ease) 0.4s backwards; }
#tlh-hero-chips > :nth-child(1) { animation: tlFadeUp 0.6s var(--tl-ease) 1s backwards; }
#tlh-hero-chips > :nth-child(2) { animation: tlFadeUp 0.6s var(--tl-ease) 1.2s backwards; }

/* fill-mode backwards statt both: nach dem Ende fällt das Element auf seinen
   normalen Zustand zurück. Mit "both" bliebe filter: blur(0px) stehen, und
   Chrome/Safari rendern die Ebene auf Retina-Displays dauerhaft weich. */

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

/* Scroll-Einblendungen im Framer-Look: unscharf und leicht versetzt rein,
   dann scharf. Klassen setzt das Skript, ohne JS bleibt alles sichtbar. */
#top .elementor-259435 .tl-r {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
  transition:
    opacity 0.7s var(--tl-ease) var(--tl-d, 0ms),
    transform 0.7s var(--tl-ease) var(--tl-d, 0ms),
    filter 0.7s var(--tl-ease) var(--tl-d, 0ms);
}
#top .elementor-259435 .tl-r.tl-in {
  opacity: 1;
  transform: none;
  filter: none;
}
#top .elementor-259435 .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-259435 .tl-words.tl-in :is(.tl-w, .tl-u) {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Skript-Widget nimmt keinen Platz ein */
#tlh-hero-left > :last-child:not(h1, p, #tlh-hero-cta) {
  display: none;
}

/* Logo-Leiste ohne Trennstrich, der folgende Abschnitt setzt sich farblich ab */
#top .tlhl {
  border-block-end: 0;
}

/* Zahnräder drehen sich langsam, wie am Messestand */
:is(#tlh-hero-gear, #tl-dev-gear, #tl-tr-gear) svg {
  animation: tlSpin 120s linear infinite;
}

/* Award-Siegel: aktuelles Jahr leicht schräg nach vorn */
#tl-aw-fan > :nth-child(3) {
  transform: rotate(-3deg) scale(1.05);
}

/* ---------- 3  Pixel-Wipe der Primär-Buttons --------------------- */

#top .elementor-259435 :is([data-id="750ddaf4"], [data-id="572a0e49"], [data-id="3e8af1ae"]) {
  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 .elementor-259435 :is([data-id="750ddaf4"], [data-id="572a0e49"], [data-id="3e8af1ae"])::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 .elementor-259435 :is([data-id="750ddaf4"], [data-id="572a0e49"], [data-id="3e8af1ae"]):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 .elementor-259435 :is([data-id="750ddaf4"], [data-id="572a0e49"], [data-id="3e8af1ae"]):hover {
  background-color: #2457f5;
  border-color: #2457f5;
  color: #2457f5;
  transition-delay: 0.22s;
}

/* =============================================================
   4  Tablet (<= 1024px) und Mobile (<= 767px)
   Die Inhalts-Grids sind mit auto-fit/minmax bereits responsiv,
   hier stehen nur der Hero und Abstände.
   ============================================================= */

@media (max-width: 1024px) {
  #start {
    min-height: 0;
  }
  #tlh-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
  #tlh-hero-right {
    margin-right: -40px;
    justify-content: flex-end;
  }
  #tlh-hero-right img {
    max-height: 40vh;
    max-width: 85%;
    margin: 0;
  }
  #tlh-hero-chips {
    flex-direction: column;
    align-items: stretch;
  }
  #tlh-hero-chips > * {
    width: 100%;
  }
  #tlh-hero-gear {
    display: none;
  }
}

@media (max-width: 767px) {
  /* Abstände: Abschnitte und Inhaltsbreite */
  .elementor-259435 > section,
  .elementor-259435 > .e-con > section {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  #start {
    padding-top: 28px;
    padding-bottom: 40px;
  }
  .elementor-259435 section > .e-con:not([id$="-gear"]) {
    padding-left: 20px;
    padding-right: 20px;
  }
  #tl-trial {
    padding: 0 12px 56px;
  }
  #tl-trial > .e-con {
    padding: 0;
  }
  #tl-tr-content {
    padding: 28px 24px;
  }
  #tl-wb-card {
    padding: 24px;
  }
  #tl-pf-modules,
  #tl-gr-stats > * {
    padding: 20px;
  }

  /* Hero: 7vh wären auf dem Handy ~59px, dann bricht „Unternehmen“ mitten im Wort */
  #tlh-hero-left h1 {
    font-size: 38px;
    letter-spacing: -1px;
  }

  /* KI-Kennzahlen untereinander, nebeneinander sind die Notizen zu schmal */
  #top .elementor-259435 [data-id="3c1cd847"] {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Hero */
  #tlh-hero-cta > * {
    width: 100%;
  }
  #tlh-hero-right {
    margin-right: -20px;
  }
  #tlh-hero-right img {
    max-height: 34vh;
    max-width: 92%;
  }

  /* Deko, die auf dem Handy nur Platz kostet */
  :is(#tl-dev-gear, #tl-tr-gear) {
    display: none;
  }
  #tl-aw-stage {
    min-height: 340px;
  }
  #tl-aw-fan {
    width: 180px;
    height: 240px;
  }

  /* Branchen-Fotos flacher, damit sechs Kacheln nicht endlos werden */
  [id^="tl-ind-"] > :first-child {
    aspect-ratio: 21 / 9;
  }

  /* Events: kleineres Bild */
  #tl-ev-grid img {
    width: 96px;
    height: 96px;
  }

  /* Primär-Buttons volle Breite */
  #top .elementor-259435 :is([data-id="572a0e49"], [data-id="3e8af1ae"], [data-id="3904a20d"]) {
    width: 100%;
  }
  #tl-tr-cta > * {
    width: 100%;
  }
}

/* =============================================================
   5  prefers-reduced-motion
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  .elementor-259435 *,
  .elementor-259435 *::before,
  .elementor-259435 *::after {
    animation: none !important;
    transition: none !important;
  }
  #top .elementor-259435 :is([data-id="750ddaf4"], [data-id="572a0e49"], [data-id="3e8af1ae"])::before {
    display: none;
  }
}/* End custom CSS */