:root{--page-title-display:none;}/* Start custom CSS *//* =============================================================
   TimeLine KI-Bonus (WP 259567) – Akzente, Motion, Mobile
   Gleiche Logik wie Electronics und Startseite.

   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-259567 {
  --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-259567, .postid-259567) #main {
    padding-top: 0;
  }
  #top:is(.page-id-259567, .postid-259567) #header .header_bg {
    opacity: 0;
    transition: opacity .25s ease;
  }
  #top:is(.page-id-259567, .postid-259567) #header.header-scrolled .header_bg {
    opacity: .95;
  }
  #top:is(.page-id-259567, .postid-259567) #start {
    padding-top: 190px;
  }
}

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

:where(.elementor-259567) :is(h1, h2, h3) {
  text-wrap: balance;
}
:where(.elementor-259567) p {
  text-wrap: pretty;
}
#top #wrap_all .elementor.elementor-259567 :is(h1, h2, h3) {
  font-weight: 700;
}
.elementor-259567 :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(#alltag, #warum-tai, #llm, #branchen, #naechstes, #bonus, #ablauf, #vertrauen, #faq) h2 span:not(.tl-w) {
  color: #2457f5;
}

/* KI-Abschnitte: Cyan-Verlauf (Cyan bleibt exklusiv für KI) */
:is(#ki-heute, #bonus-sichern) h2 span:not(.tl-w) {
  background: linear-gradient(90deg, #22c3ee, #a5f3fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#fin h2 span:not(.tl-w) {
  color: rgba(255, 255, 255, 0.72);
}

/* Live-Punkte */
#kb-live,
[id^="kb-td-live-"] {
  display: flex;
  align-items: center;
  gap: 8px;
}
#kb-live::before,
[id^="kb-td-live-"]::before {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #2457f5;
  animation: tlPulse 2s ease-in-out infinite;
}
[id^="kb-td-live-"]::before {
  background: #22c3ee;
  box-shadow: 0 0 0 4px rgba(34, 195, 238, 0.18);
}

/* Hinweis-Karten im Hero: nur so breit wie der Inhalt, ganze Karte klickbar */
#kb-hero-chips > * {
  width: auto;
  flex: 0 1 auto;
  position: relative;
  cursor: pointer;
}
#top #kb-hero-chips > * > * {
  position: static;
}
#kb-hero-chips a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
#kb-hero-chips > *::after {
  content: "";
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: 12px;
  border-radius: 50%;
  border: 1px solid rgba(1, 73, 145, 0.12);
  background: center / 13px 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");
}

/* V4-Div-Blöcke sind 100 % breit: Bonus-Badge nur so breit wie der Text.
   Sitzt oben rechts an der TAI-Karte, unten würde es die Fußnote verdecken. */
#kb-hero-bonus {
  width: auto;
  left: auto;
  bottom: auto;
  right: -24px;
  top: -34px;
}

/* ---------- 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; }
#kb-hero-right { animation: tlSlideIn 1s var(--tl-ease) 0.4s backwards; }
#kb-hero-bonus { animation: tlPop 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) 1.3s 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-259567 .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-259567 .tl-words.tl-in :is(.tl-w, .tl-u) {
  opacity: 1;
  transform: none;
  filter: none;
}

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

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

:is([id^="kb-pain-"], [id^="kb-td-"]:not([id^="kb-td-live"]), [id^="kb-llm-"], [id^="kb-nx-"]:not(#kb-nx-wait)) {
  transition: translate 0.3s var(--tl-ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
:is([id^="kb-pain-"], [id^="kb-llm-"], [id^="kb-nx-"]:not(#kb-nx-wait)):hover {
  translate: 0 -4px;
  border-color: rgba(36, 87, 245, 0.35);
  box-shadow: 0 24px 40px -28px rgba(10, 26, 51, 0.45);
}
[id^="kb-td-"]:not([id^="kb-td-live"]):hover {
  translate: 0 -4px;
  border-color: rgba(34, 195, 238, 0.45);
}

#kb-btn-hero2,
#kb-btn-wait {
  transition: border-color 0.3s ease, translate 0.3s var(--tl-ease);
}
#kb-btn-hero2:hover,
#kb-btn-wait:hover {
  translate: 0 -2px;
  border-color: rgba(36, 87, 245, 0.4);
}

/* Pixel-Wipe der Primär-Buttons (Nachbau von PixelButton.tsx, wie Electronics) */
#top :is(#kb-btn-hero, #kb-btn-al, #kb-btn-form) {
  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-hero, #kb-btn-al, #kb-btn-form)::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-hero, #kb-btn-al, #kb-btn-form):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-hero, #kb-btn-al, #kb-btn-form):hover {
  background-color: #2457f5;
  border-color: #2457f5;
  color: #2457f5;
  transition-delay: 0.22s;
}

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

#kb-fm-card select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%232457f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}
#kb-fm-card :is(input, select):focus {
  outline: none;
  border-color: #2457f5;
  box-shadow: 0 0 0 4px rgba(36, 87, 245, 0.15);
}
#kb-fm-card input::placeholder {
  color: rgba(10, 26, 51, 0.45);
}

/* =============================================================
   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;
  }
  #kb-hero-right {
    max-width: 620px;
  }
}

@media (max-width: 767px) {
  /* Abstände: Abschnitte und Inhaltsbreite */
  .elementor-259567 section[id] {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  #start {
    padding-top: 32px;
    padding-bottom: 72px;
  }
  #fin {
    padding-top: 0;
  }
  .elementor-259567 section[id] > .e-con:not([id$="-gear"]) {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Hero */
  #start h1 {
    font-size: 42px;
    letter-spacing: -1.2px;
  }
  #kb-hero-cta > *,
  #kb-hero-chips > * {
    width: 100%;
  }
  #kb-hero-chips {
    margin-top: 28px;
  }
  #kb-hero-bonus {
    right: 12px;
    top: -30px;
    padding: 12px 16px;
  }
  #kb-hero-right {
    margin-top: 24px;
  }
  #kb-hero-bonus p:last-child {
    font-size: 21px;
  }

  /* Karten enger fassen */
  :is([id^="kb-pain-"], [id^="kb-td-"]:not([id^="kb-td-live"]), [id^="kb-nx-"]) {
    padding: 22px;
  }
  [id^="kb-llm-"] {
    padding: 18px;
  }
  #kb-al-cta,
  #kb-nx-wait {
    padding: 22px;
  }
  #kb-al-cta a,
  #kb-nx-wait a {
    width: 100%;
  }
  #kb-vt-award {
    min-height: 320px;
  }
  #kb-fm-card {
    padding: 22px;
  }
  #kb-bo-card {
    padding: 32px 24px;
  }
  #kb-bo-card a {
    width: 100%;
  }
  #kb-fin-card {
    padding: 32px 24px;
  }
  #kb-fin-cta,
  #kb-fin-cta > * {
    width: 100%;
  }
  #kb-fin-gear {
    display: none;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .elementor-259567 *,
  .elementor-259567 *::before,
  .elementor-259567 *::after {
    animation: none !important;
    transition: none !important;
  }
  #top :is(#kb-btn-hero, #kb-btn-al, #kb-btn-form)::before {
    display: none;
  }
}/* End custom CSS */