.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-8c679aa:#FBC140;--e-global-color-fcd01a2:#313F4B;--e-global-color-ba8f6ed:#FFFFFF;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-size:1.1rem;line-height:1.6rem;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 h1{font-size:3.2rem;line-height:3.6rem;}.elementor-kit-6 h2{font-size:2.4rem;line-height:2.6rem;}.elementor-kit-6 h3{font-size:1.6rem;line-height:1.9rem;}.elementor-kit-6 h4{font-size:1.2rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.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(max-width:1024px){.elementor-kit-6{font-size:1.2rem;line-height:1.6rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{font-size:1rem;line-height:1.7rem;}.elementor-kit-6 h1{font-size:2rem;line-height:2.2rem;}.elementor-kit-6 h2{font-size:1.6rem;line-height:1.9rem;}.elementor-kit-6 h3{font-size:1.2rem;line-height:1.4rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */html, body {overflow-x:hidden;}

/* Basis: Hero-Container vorbereiten */
#heroheader {
    position: relative;
    overflow: hidden;
}

/* Zweites LKW-Bild als Overlay über das bestehende Bild */
#heroheader::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("https://gap4business.de/wp-content/uploads/2026/02/header_closed_5.webp");
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 4.6s cubic-bezier(0.23, 0.93, 0.26, 0.99);
    pointer-events: none;
    z-index: 1;
}

/* Wenn die Animation gestartet wird, blendet das zweite Bild ein */
#heroheader.gap-animate::before {
    opacity: 1;
}

/* Texte und Button animierbar machen */
#heroheader .headerfeld1,
#heroheader .headerfeld2,
#heroheader #animation-button {
    position: relative;
    z-index: 2;
    transition:
        opacity 0.6s ease-out,      /* etwas langsamer */
        transform 0.6s ease-out;
}

/* Beim Start der Animation Text + Button ausblenden */
#heroheader.gap-animate .headerfeld1,
#heroheader.gap-animate .headerfeld2 {
    opacity: 0;
    transform: translateY(-10px);
}

/* Optional: Button auch ausblenden / „deaktiviert“ wirken lassen */
#heroheader.gap-animate #animation-button {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

/* Rundes Logo als Lade-/Closing-Element */
#heroheader::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    background-image: url("https://gap4business.de/wp-content/uploads/2025/11/circle_load.webp");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    pointer-events: none;
    z-index: 3;

    /* weiches Einblenden & Reinzoomen */
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
}

/* Wenn Animation gestartet wird → Logo einblenden & größer werden */
#heroheader.gap-animate::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Sobald Spin aktiv ist → Rotation + minimaler Pulse */
#heroheader.gap-animate-spin::after {
    animation: gap-spin-pulse 2.8s linear infinite;
}

/* Rotation + minimaler Pulse in einem Keyframe kombiniert */
@keyframes gap-spin-pulse {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    25% {
        transform: translate(-50%, -50%) scale(1.03) rotate(90deg);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05) rotate(180deg);
    }
    75% {
        transform: translate(-50%, -50%) scale(1.03) rotate(270deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(360deg);
    }
}



/* Grundstyling für Buttons mit Füll-Animation */
.button_fill .elementor-button {
    position: relative;
    overflow: hidden;
    background-color: #ffffff !important; /* Weiß als Basis */
    z-index: 0;
}

/* Füll-Balken (Gelb) – startet bei ca. 15% Breite */
.button_fill .elementor-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 15%; /* Startfüllung */
    background-color: #fcc140; /* Gelb */
    z-index: 0;
    transition: width 0.4s ease-out;
}

/* Text & Icon über den Füll-Balken legen */
.button_fill .elementor-button-content-wrapper,
.button_fill .elementor-button-icon,
.button_fill .elementor-button-text {
    position: relative;
    text-align:left;
    z-index: 1;
}

/* Beim Hover: Gelb füllt den ganzen Button */
.button_fill:hover .elementor-button::before {
    width: 100%;
}

/* Optional: Textfarbe fixen, falls Elementor da reinfunkt */
.button_fill .elementor-button,
.button_fill .elementor-button:hover,
.button_fill .elementor-button:focus {
    color: #000000; /* Schwarzer Text, wenn du magst */
}



/* KREEISSEGMENTE DREHEND */

:root {
  --dark: #384546;
  --mid: #627c87;
  --accent: #f7c04c;
}

/* Loader orientiert sich zu 100% an der Containerbreite */
.custom-circle-loader {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: auto;
}

.custom-circle-loader svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Langsame Animation */
.segment {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* neue, langsamere Zeiten */
.segment--outer-left {
  animation: spin-cw 15s linear infinite;
}

.segment--outer-right {
  animation: spin-ccw 40s linear infinite;
}

.segment--inner-blue {
  animation: spin-cw 25s linear infinite;
}

.segment--inner-yellow {
  animation: spin-ccw 30s linear infinite;
}

@keyframes spin-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spin-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}


/* Nur die INAKTIVEN Tabs animieren */
#vorteile .e-n-tabs-heading button.e-n-tab-title[aria-selected="false"]{
  transform-origin: 50% 50%;
  will-change: transform;
  animation: tabNudge 5s ease-in-out infinite;
}

/* Aktiv: garantiert KEINE Animation */
#vorteile .e-n-tabs-heading button.e-n-tab-title[aria-selected="true"]{
  animation: none !important;
  transform: none;
}

/* Dezent "wabbeln" + minimal größer, dann wieder ruhig */
@keyframes tabNudge{
  /* lange Ruhephase */
  0%, 82%{
    transform: scale(1) rotate(0deg);
  }

  /* kurzer "Hey klick mich" Impuls */
  86%{
    transform: scale(1.03) rotate(-0.8deg);
  }
  90%{
    transform: scale(1.05) rotate(0.8deg);
  }
  94%{
    transform: scale(1.03) rotate(-0.5deg);
  }
  98%{
    transform: scale(1.01) rotate(0.2deg);
  }
  100%{
    transform: scale(1) rotate(0deg);
  }
}

/* Optional: respektiert Reduced-Motion */
@media (prefers-reduced-motion: reduce){
  #vorteile .e-n-tabs-heading button.e-n-tab-title[aria-selected="false"]{
    animation: none !important;
  }
}

/* =========================================================
   ICON LIST – KACHEL DESIGN (Elementor)
   ========================================================= */

/* Liste */
.bausteine-liste .elementor-icon-list-items{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
}

/* GANZES LI */
.bausteine-liste li.elementor-icon-list-item{
  display: flex;
  align-items: center;        /* vertikal zentriert */
  gap: 14px;

  min-height: 60px;
  padding: 0 18px;

  background: transparent;
  border-radius: 14px;
  list-style: none;
}

/* Active State = kompletter Hintergrund */
.bausteine-liste li.elementor-icon-list-item.is-active{
  background: #313F4B;
}

/* ICON KREIS – wieder groß & sichtbar */
.bausteine-liste .elementor-icon-list-icon{
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Text */
.bausteine-liste .elementor-icon-list-text{
  transition: color 300ms ease;
}

/* Active Text */
.bausteine-liste li.elementor-icon-list-item.is-active
.elementor-icon-list-text{
  color: #FBC140 !important;
  font-weight: 600;
}

/* Elementor Icon List Spacing komplett neutralisieren */
.bausteine-liste .elementor-icon-list-item{
  margin-block-start: 0 !important;
  padding-block-end: 0 !important;
}/* End custom CSS */