/*
 Theme Name:     Kreativ
 Theme URI:      http://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Kreativ Webagentur KlG
 Author URI:     https://www.kreativ.swiss
 Template:       Divi
 Version:        1.0.2
*/

@import url("../Divi/style.css");

/* =Theme customization starts here
------------------------------------------------------- */

/*Custom Image Border
.custom-image-border::after {
  content: '';
  display: block;
  padding-bottom: 56.25%; /* 16:9 — adjust to your ratio */
  height: auto !important;
  min-height: 0 !important;
}*/

/*Silbentrennung*/
.hyphenate {
  hyphens: auto;
  -webkit-hyphens: auto;
/*  hyphenate-limit-chars: 6 3 3;  min word length, min before, min after break */
}

/* =========================
   BACKGROUND IMAGE ZOOM
========================= */
.custom-image-border {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.custom-image-border::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  z-index: 0;
}

.custom-image-border:hover::before {
  transform: scale(1.06);
}
/*Correct divider before*/
.et_pb_divider_0:before, .et_pb_divider_0:before, .et_pb_divider_1:before {
	top:0px!important;
	right:0px!important;
	left:0px!important;
}

/* =========================
   DESKTOP MENU BUTTONS
========================= */
@media only screen and (min-width: 980px) {

  /* Kontakt */
  .menu-contact {
    padding: 0 !important;
    border-radius: 99px !important;
    border: 1px solid #E5E7EB !important;
    transition: 0.3s;
    background-color: #8267EC !important;
    color: #ffffff !important;
    font-size: 16px !important;
  }

  .menu-contact a {
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 99px !important;
    font-size: 16px !important;
  }

  #main-header.et-fixed-header .menu-contact a,
  #main-header.et-fixed-header li.current-menu-item.menu-contact a {
    color: #ffffff !important;
    border-radius: 99px !important;
  }

  #top-menu-nav .menu-contact a:hover {
    background: #fff !important;
    color: red !important;
    opacity: 1 !important;
  }

  /* Other nav items */
  .menu-kompetenzen,
  .menu-referenzen,
  .menu-about,
  .menu-blog {
    padding: 0 !important;
    border-radius: 99px !important;
    transition: 0.3s;
    background-color: #fff !important;
    font-size: 16px !important;
  }

  .menu-blog {
    margin-right: 10px !important;
  }

  .menu-referenzen a,
  .menu-about a,
  .menu-blog a {
    color: #0a0a0a !important;
    padding: 12px 16px !important;
    border-radius: 99px !important;
    font-size: 16px !important;
  }

  .menu-kompetenzen a {
    color: #0a0a0a !important;
    padding: 12px 20px 12px 16px !important;
    border-radius: 99px !important;
    font-size: 16px !important;
    margin-right: 10px;
  }

  #main-header.et-fixed-header .menu-kompetenzen a,
  #main-header.et-fixed-header .menu-referenzen a,
  #main-header.et-fixed-header .menu-about a,
  #main-header.et-fixed-header .menu-blog a {
    color: #ffffff !important;
    border-radius: 99px !important;
  }

  .menu-kompetenzen:hover,
  .menu-referenzen:hover,
  .menu-about:hover,
  .menu-blog:hover {
    background: #F1F2F5 !important;
    color: #0a0a0a !important;
    border-radius: 99px !important;
    opacity: 1 !important;
    transition: 0.3s ease-in-out;
  }
}

li.menu-webdesign, li.menu-branding, li.menu-content, li.menu-seo {
	padding-left:0px!important;
	padding-right:0px!important;
	width:stretch;
	background:white;
	border-radius:99px;
}
li.menu-webdesign:hover, li.menu-branding:hover, li.menu-content:hover, li.menu-seo:hover {
	background:#E5E7EB!important;
	transition:0.3s ease-in-out;
}

/* Remove top margin from menu items */
.et_pb_menu--without-logo .et_pb_menu__menu > nav > ul > li {
  margin-top: 0px !important;
}

/* Chevron position fix */
.menu-kompetenzen > a:after,
.et-menu .menu-item-has-children > a:first-child:after {
  top: 12px !important;
}


/* =========================
   MOBILE HAMBURGER
========================= */
@media (max-width: 980px) {
  .et_divi_100_custom_hamburger_menu .mobile_menu_bar {
    margin-bottom: 0px !important;
  }

  .et_pb_menu .et_mobile_nav_menu {
    background: #8267EC;
    padding: 6px 18px !important;
    border-radius: 99px;
  }
}


/* =========================
   SUB-MENU BASE
========================= */
.nav li ul {
  border: 1px solid #E5E7EB;
}


/* =========================
   SMART HEADER — BASE
========================= */
.smart-header {
  border: 1px solid #E5E7EB;
  border-radius: 40px;
  background: #fff;
  position: relative;
  z-index: 1001;
}

.smart-header-mobile-panel {
  display: none;
}


/* =========================
   BLUR OVERLAY
========================= */
.smart-header-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 10, 10, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.smart-header-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}


/* =========================
   SMART HEADER — MOBILE
========================= */
@media (max-width: 980px) {

  .smart-header {
    position: relative !important;
    z-index: 1001 !important;
    overflow: visible !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    align-content: flex-start !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    transition: border-radius 0.36s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .smart-header.mobile-menu-open {
    border-bottom-left-radius: 32px !important;
    border-bottom-right-radius: 32px !important;
  }

  .smart-header > .et_pb_column.smart-header-logo {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    align-self: center !important;
    text-align: left !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    order: 1 !important;
  }

  .smart-header > .et_pb_column.smart-header-menu {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    order: 2 !important;
  }

  .smart-header > .smart-header-mobile-panel {
    order: 3 !important;
  }

  .smart-header .et_pb_menu__menu {
    display: none !important;
  }

  .smart-header .et_mobile_nav_menu {
    display: block !important;
  }

  .smart-header #mobile_menu1 {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .smart-header .et_pb_menu,
  .smart-header .et_pb_menu_inner_container,
  .smart-header .et_pb_menu__wrap {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .smart-header .et_mobile_nav_menu,
  .smart-header .mobile_nav {
    margin: 0 !important;
    overflow: visible !important;
  }

  .smart-header-menu .et_pb_menu,
  .smart-header-menu .et_pb_menu_inner_container,
  .smart-header-menu .et_pb_menu__wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    overflow: visible !important;
  }

  .smart-header-menu .et_mobile_nav_menu,
  .smart-header-menu .mobile_nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    line-height: 1 !important;
    overflow: visible !important;
  }

  .smart-header-menu .et_pb_menu_inner_container {
    min-height: 0 !important;
  }

  /* Logo */
  .smart-header-logo .et_pb_image_0_tb_header,
  .smart-header-logo .et_pb_image {
    width: auto !important;
    max-width: 165px !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .smart-header-logo .et_pb_image_0_tb_header.et_pb_module {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .smart-header-logo .et_pb_image_wrap {
    display: block !important;
    width: 126px !important;
    max-width: 165px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .smart-header-logo a {
    display: block !important;
    width: 165px !important;
    margin: 0 !important;
  }

  .smart-header-logo img {
    display: block !important;
    width: 100% !important;
    max-width: 165px !important;
    height: auto !important;
    margin: 0 !important;
    padding-left: 10px;
  }

  /* Mobile panel */
  .smart-header-mobile-panel {
    display: block;
    width: 100%;
    flex: 0 0 100%;
    box-sizing: border-box;
    background: #fff;
	  padding-left:0px;
	  padding-right:0px;
    padding-bottom: 0px;
    border-top: 0px solid rgba(255,255,255,0);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
      max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      opacity    0.28s cubic-bezier(0.22, 1, 0.36, 1),
      transform  0.28s cubic-bezier(0.22, 1, 0.36, 1),
      padding    0.42s cubic-bezier(0.22, 1, 0.36, 1),
      border-top-width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: max-height, opacity, transform;
  }

  .smart-header-mobile-panel.is-open {
    max-height: 600px;
    opacity: 1;
    transform: translateY(0);
    padding-top: 16px;
    padding-bottom: 0px;
    border-top-width: 1px;
    pointer-events: auto;
  }

  .smart-header-mobile-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .smart-header-mobile-panel li {
    margin: 0;
    padding: 0;
  }

  .smart-header-mobile-panel li + li {
    margin-top: 4px;
  }

  /* Staggered entrance */
  .smart-header-mobile-panel li {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .smart-header-mobile-panel.is-open li { opacity: 1; transform: translateY(0); }
  .smart-header-mobile-panel.is-open li:nth-child(1) { transition-delay: 0.06s; }
  .smart-header-mobile-panel.is-open li:nth-child(2) { transition-delay: 0.10s; }
  .smart-header-mobile-panel.is-open li:nth-child(3) { transition-delay: 0.14s; }
  .smart-header-mobile-panel.is-open li:nth-child(4) { transition-delay: 0.18s; }
  .smart-header-mobile-panel.is-open li:nth-child(5) { transition-delay: 0.22s; }
  .smart-header-mobile-panel.is-open li:nth-child(6) { transition-delay: 0.26s; }

  .smart-header-mobile-panel a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 10px;
    color: #0a0a0a;
    text-decoration: none;
    border-radius: 12px;
    box-sizing: border-box;
    font-family: 'satoshi-medium';
    font-size: 16px;
    transition: background-color 0.18s ease;
  }

  .smart-header-mobile-panel a:hover {
   /* background: #E5E7EB;*/
  }

  /* Menu icons */
  .sh-menu-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
  }

  /* Kontakt pill button */
  .smart-header-mobile-panel li.menu-contact a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: auto;
    padding: 8px 14px;
    margin-top: 8px;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    font-size: 16px;
    background: #8267EC;
    color: #fff;
  }

  .smart-header-mobile-panel li.menu-contact a .sh-menu-icon {
    display: none;
  }

  .smart-header-mobile-panel li.menu-contact a:hover {
    background: #6c52d4;
  }
}


/* =========================
   MOBILE SUBMENU ACCORDION
========================= */
@media (max-width: 980px) {

  .smart-header-mobile-panel li.menu-item-has-children {
    display: block;
  }

  .smart-header-mobile-panel li.menu-item-has-children > a {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    width: auto !important;
  }

  .sh-submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #0a0a0a;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  .sh-mobile-open > a > .sh-submenu-toggle {
    transform: rotate(180deg);
  }

  .smart-header-mobile-panel ul.sh-mobile-submenu {
    flex: 0 0 100%;
    list-style: none;
    margin: 0;
    padding: 0 0 0 24px;
    max-height: 0;
    overflow: hidden;
    /*border-left: 2px solid #E5E7EB;*/
    margin-left: 10px;
    transition: max-height 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .smart-header-mobile-panel ul.sh-mobile-submenu li {
    margin-top: 2px !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .smart-header-mobile-panel ul.sh-mobile-submenu li a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px;
    color: #0a0a0a;
    font-size: 15px;
    font-family: 'satoshi-medium';
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
  }

  .smart-header-mobile-panel ul.sh-mobile-submenu li a:hover {
    background: #E5E7EB;
    color: #0a0a0a;
  }
}


/* =========================
   SMART HEADER — DESKTOP
========================= */
@media (min-width: 981px) {

  .smart-header {
    display: grid !important;
    grid-template-columns: 1fr 3fr !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .smart-header-logo {
    grid-column: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .smart-header-menu {
    grid-column: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .smart-header .et_pb_menu__menu {
    display: block !important;
  }

  .smart-header .et_mobile_nav_menu {
    display: none !important;
  }

  .smart-header-mobile-panel {
    display: none !important;
  }

  .smart-header > .et_pb_column {
    width: auto !important;
    float: none !important;
    margin-right: 0 !important;
  }

  .smart-header-overlay {
    display: none !important;
  }
}


/* =========================
   DESKTOP SUBMENU
========================= */
@media (min-width: 981px) {

  .smart-header .et_pb_menu ul.et-menu > li.menu-item-has-children > ul.sub-menu {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin-top: 24px !important;
    padding: 8px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 32px !important;
    background: #fff !important;
    max-width: 200px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    transition:
      opacity 0.18s ease,
      visibility 0s linear 0.18s !important;
  }

  .smart-header .et_pb_menu ul.et-menu > li.menu-item-has-children > ul.sub-menu.sh-visible {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition:
      opacity 0.18s ease,
      visibility 0s linear 0s !important;
  }

  .smart-header .et_pb_menu ul.et-menu > li.menu-item-has-children > ul.sub-menu li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    color: #0a0a0a !important;
    font-size: 15px !important;
    white-space: nowrap !important;
    transition: background 0.18s ease !important;
  }

  .smart-header .et_pb_menu ul.et-menu > li.menu-item-has-children > ul.sub-menu li a .sh-menu-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
  }

  .smart-header .et_pb_menu ul.et-menu > li.menu-item-has-children > ul.sub-menu li a:hover {
    background: rgba(255,25,255,0) !important;
  }
/*Remove opacity filter from hover*/
.et_mobile_menu li a:hover, .nav ul li a:hover, .menu-item-881 li a:hover {
	opacity:1.0!important;
}
}


/* =========================
   ICON BUTTONS
========================= */
.icon-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 42px;
  border-radius: 99px;
  border: 1px solid #E5E7EB;
  background: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.icon-btn img {
  width: 24px;
  height: 24px;
  display: block;
}

.icon-btn:hover {
  background-color: #F1F2F5;
}


/* =========================
   PRICING
========================= */
.price {
  font-family: 'satoshi-bold';
  font-size: 32px;
  color: #8267EC;
}

.custom-button-inline {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 24px;
  margin-bottom: 24px;
  background-color: #8267ec;
  color: #ffffff !important;
  font-family: 'satoshi-medium', Georgia, "Times New Roman", serif;
  font-size: 18px !important;
  border-radius: 60px;
  border: 1px solid #e5e7eb;
  text-decoration: none;
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
  box-sizing: border-box;
}

.custom-button-inline:hover {
  background-color: #ffffff;
  color: #8267ec !important;
  border: 1px solid #8267ec;
}

/* Push button to bottom of pricing card */
.pricing-card .et_pb_column_7,
.pricing-card .et_pb_column_9,
.pricing-card .et_pb_column_11 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.et_pb_column_7 .et_pb_row_nested,
.et_pb_column_9 .et_pb_row_nested,
.et_pb_column_11 .et_pb_row_nested {
  margin-top: auto;
  width: 100%;
}

/* Pricing grid */
.pricing-table-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.pricing-table-row > .et_pb_column {
  width: 100% !important;
  margin-right: 0 !important;
  float: none !important;
  min-width: 0;
}

@media (max-width: 980px) and (min-width: 768px) {
  .pricing-table-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-table-row > .et_pb_column:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .pricing-table-row {
    grid-template-columns: 1fr;
  }

  .pricing-table-row > .et_pb_column:nth-child(3) {
    grid-column: auto;
  }
}

/* iPad Safari fix */
@media (min-width: 768px) and (max-width: 1024px) {
  .pricing-table-row1,
  .pricing-table-row1 > .et_pb_column,
  .pricing-table-row1 .pricing-info,
  .pricing-table-row1 .pricing-info .et_pb_row_nested,
  .pricing-table-row1 .pricing-info .et_pb_column_14 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
  }

  .pricing-table-row1 .pricing-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .pricing-table-row1 .pricing-info .et_pb_button_module_wrapper {
    margin-top: 16px !important;
  }

  .pricing-table-row1 .et_pb_column_15 {
    align-self: start !important;
    height: auto !important;
    min-height: auto !important;
  }
}

/* Pricing info push to bottom */
.pricing-info > *:last-child {
  margin-top: auto;
}

/* Advantages grid */
.advantages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 980px) {
  .advantages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advantages .advantage   { grid-column: 1; grid-row: 1; }
  .advantages .advantage-2 { grid-column: 2; grid-row: 1; }
  .advantages .advantage-3 { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 767px) {
  .advantages {
    grid-template-columns: 1fr;
  }
}


/* =========================
   BADGES & TYPOGRAPHY
========================= */
.big-badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(0deg, #7050F0 0%, #B7AAEE 100%);
  color: #fff;
  line-height: 1;
}

.purple {
  color: #8267EC;
}

.custom-badge {
  display: inline-block;
  border-radius: 99px;
  border: 1px solid #E5E7EB;
  /*padding: 8px 24px 10px;*/
	padding-top:8px;
	padding-right:24px;
	padding-bottom:10px!important;
	padding-left:24px;
}


/* =========================
   LOOP SLIDER GRADIENT
========================= */
.image-slider-loop {
  position: relative;
  overflow: hidden;
}

.image-slider-loop::before,
.image-slider-loop::after {
  content: "";
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.image-slider-loop::before {
  left: 0;
  background: linear-gradient(to right, rgba(242,240,253,1), rgba(242,240,253,0));
}

.image-slider-loop::after {
  right: 0;
  background: linear-gradient(to left, rgba(242,240,253,1), rgba(242,240,253,0));
}


/* =========================
   STICKY LAYOUT
========================= */
.sticky-row {
  align-items: flex-start;
}

.sticky-left {
  position: sticky;
  top: 10vh;
  height: fit-content;
}

.scroll-right {
  position: relative;
}

.scroll-right > * {
  margin-bottom: 2rem;
}


/* =========================
   TIMELINE
========================= */
.timeline-widget {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  width: 100%;
}

.timeline-cards {
  grid-column: 2;
  width: 100%;
}

.timeline-rail {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.timeline-line,
.timeline-line-fill {
  position: absolute;
  left: 24px;
  width: 2px;
  border-radius: 999px;
}

.timeline-line {
  top: 0;
  height: 100%;
  background: #e5e7eb;
}

.timeline-line-fill {
  top: 0;
  height: 0;
  background: #8267EC;
  transition: height 0.2s ease;
}

.timeline-step {
  position: absolute;
  left: 0;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 2;
  font-family: 'satoshi-medium', sans-serif;
  font-size: 14px;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.timeline-step.reached,
.timeline-step.active {
  border-color: #8267EC;
  color: #8267EC;
}

.timeline-card {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 32px;
  padding: 2rem;
  margin: 0 0 1.5rem 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(36px);
  filter: blur(8px);
  pointer-events: none;
  transition:
    opacity 0.18s linear,
    transform 0.18s linear,
    filter 0.18s linear,
    visibility 0s linear 0.18s;
}

.timeline-card.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
  transition:
    opacity 0.18s linear,
    transform 0.18s linear,
    filter 0.18s linear,
    visibility 0s linear 0s;
}

.timeline-card h3 {
  margin: 0 0 0.75rem;
  font-family: 'satoshi-medium', sans-serif;
  font-size: 24px;
  line-height: 1.2em;
  color: #6b7280;
}

.timeline-card p {
  margin: 0;
  font-family: 'satoshi-regular', sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  color: #404040;
}

.et_pb_code .timeline-widget,
.et_pb_code .timeline-cards,
.et_pb_code .timeline-card,
.et_pb_code_inner .timeline-widget,
.et_pb_code_inner,
.et_pb_column,
.et_pb_module,
.et_pb_code {
  overflow: visible;
}

.et_pb_code_inner,
.et_pb_code .timeline-widget,
.et_pb_code .timeline-cards,
.et_pb_code .timeline-card,
.et_pb_code_inner .timeline-widget {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 980px) {
  .timeline-widget {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 1rem;
  }

  .timeline-rail { width: 52px; }
  .timeline-line, .timeline-line-fill { left: 18px; }
  .timeline-step { width: 38px; height: 38px; font-size: 13px; }
  .timeline-card { border-radius: 24px; padding: 1.5rem; margin-bottom: 1rem; }
  .timeline-card h3 { font-size: 20px; }
  .timeline-card p { font-size: 16px; }
}

@media (max-width: 767px) {
  .timeline-card { padding: 1.25rem; }
  .timeline-card h3 { font-size: 20px; }
}


/* =========================
   WORD REVEAL ANIMATION
========================= */
.word-reveal .word {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(30px);
  transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease;
  will-change: transform, opacity, filter;
}

.word-reveal.animate .word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.word-reveal .word-space {
  display: inline-block;
  width: 0.35em;
}


/* =========================
   FLEX COLUMN UTILITIES
========================= */
.inside-grid-column,
.inside-flex-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.inside-grid-column .element-bottom,
.contact-methods .element-bottom,
.inside-flex-column .item-bottom {
  margin-top: auto;
}

.inside-flex-column .item-top {
  margin-bottom: 0;
}


/* =========================
   TESTIMONIALS GRID
========================= */
.testimonials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.testimonials .inside-grid-column { min-height: 0; align-self: stretch; }
.testimonials .inside-grid-column:nth-child(1) { grid-column: 1; grid-row: 1; }
.testimonials .inside-grid-column:nth-child(2) { grid-column: 2; grid-row: 1; }
.testimonials .inside-grid-column:nth-child(3) { grid-column: 1; grid-row: 2 / span 2; }
.testimonials .inside-grid-column:nth-child(4) { grid-column: 2; grid-row: 2; }
.testimonials .inside-grid-column:nth-child(5) { grid-column: 2; grid-row: 3; }

@media (max-width: 767px) {
  .testimonials {
    grid-template-columns: 1fr;
  }

  .testimonials .inside-grid-column {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}


/* =========================
   REFERENCES
========================= */
.reference-services-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.reference-service-badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  color: #404040;
  border: 1px solid rgb(235, 236, 239);
  font-family: 'satoshi-medium';
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}


/* =========================
   FOOTER
========================= */
@media (max-width: 767px) {
  .footer-row { grid-template-columns: 1fr 1fr; }
  .footer-row .col-big { grid-column: 1 / -1; }
  .footer-row .col-small { grid-column: span 1; }

  .dual-button-row { grid-template-columns: 1fr; }
  .dual-button-row .button-column .et_pb_button_module_wrapper { width: 100%; }
  .dual-button-row .button-column .et_pb_button { display: block; width: 100%; text-align: center; }
}


/* =========================
   CREDITS / UNDERLINE LINKS
========================= */
.credits-info,
.cont-icons {
  display: inline-block;
  padding: none !important;
}

.credits-info:hover { color: #8267EC !important; }

.credits-info:after {
  content: '';
  width: 0;
  height: 1px;
  display: block;
  background: #8267EC;
  transition: 300ms;
}

.credits-info:hover:after { width: 100% !important; }

.cred-info {
  display: inline-block;
  padding: none !important;
}

.cred-info:hover { color: #fff !important; }

.cred-info:after {
  content: '';
  width: 100%;
  height: 1px;
  display: block;
  background: #fff;
  transition: 300ms;
}

.cred-info:hover:after { width: 0; }

.credits-info-reverse {
  display: inline-block;
  padding: none !important;
}

.credits-info-reverse:hover { color: #8267EC !important; }

.credits-info-reverse:after {
  content: '';
  width: 100%;
  height: 1px;
  display: block;
  background: #404040;
  transition: 300ms;
}

.credits-info-reverse:hover:after { width: 0; }


/* =========================
   LINKEDIN BUTTON
========================= */
.luc-linkedin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 30px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.luc-linkedin-button:hover { background-color: #F3F4F6; }

.luc-linkedin-button img {
  width: 24px;
  height: 24px;
  display: block;
}

/* Posts page background */
body.has-default-category,
body.has-default-category #page-container {
  background-color: #fff !important;
}


/* =========================
   PRICING TOOLTIPS
========================= */
.pricing-blurb .et_pb_module_header {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.pricing-blurb .et_pb_module_header::after {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  flex: 0 0 18px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  color: #8267ec;
  cursor: pointer;
}

.pricing-blurb .et_pb_module_header::before {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  max-width: 250px;
  width: max-content;
  background: #8267EC;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  white-space: pre-line;
  word-break: break-word;
  overflow-wrap: break-word;
  opacity: 0;
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 999;
  box-sizing: border-box;
}

.pricing-blurb .et_pb_module_header:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#blurb-basic-functions .et_pb_module_header::before    { content: "Kontaktformular, Verlinkung von Social Media, Integration von Google Maps"; }
#blurb-advanced-functions .et_pb_module_header::before { content: "Custom Post Types (z.B. Blog, Projekte oder Referenzen), erweiterte Animationen & Microinteractions, erweiterte Formulare (z.B. Multi-Step & Conditional Logic)"; }
#blurb-complex-functions .et_pb_module_header::before  { content: "Custom Features, API-Anbindungen, erweiterte Automationen, individuelle Buchungssyteme, individuelle Tracking- & Analytics-Setups"; }
#blurb-basic-seo .et_pb_module_header::before          { content: "Anpassen von Meta-Titel & Beschreibungen"; }
#blurb-advanced-seo .et_pb_module_header::before       { content: "Anpassen von Struktur, Inhalten, Performance (Core Web Vitals)"; }
#blurb-expert-seo .et_pb_module_header::before         { content: "Strukturierte Daten & Optimierung für Generative KI (z.B. ChatGPT)"; }


/* =========================
   CONTACT FORM
========================= */
input.text,
input.title,
input[type=email],
input[type=password],
input[type=tel],
input[type=text],
select,
textarea {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 99px !important;
  font-size: 16px !important;
  font-family: 'satoshi-regular' !important;
  padding-left: 24px !important;
  border-color: #E5E7EB;
  background: #F7F6FE;
  margin-top: 8px;
}

.page-id-726 textarea {
  width: 100% !important;
  min-height: 48px !important;
  height: 96px;
  max-height: 500px !important;
  border-radius: 24px !important;
  font-size: 16px !important;
  font-family: 'satoshi-regular' !important;
  padding-left: 16px !important;
  padding-top: 10px;
  border-color: #E5E7EB;
  background: #F7F6FE;
  transition: ease-in-out 0.5s;
}

textarea:focus {
  height: 200px;
  max-height: 500px !important;
  transition: 0.5s ease-in-out;
}

input.text:focus,
input.title:focus,
input[type=text]:focus,
select:focus,
textarea:focus,
input[type=email]:focus,
input[type=tel]:focus {
  border-color: #8267ec !important;
}

.wpcf7-not-valid {
  color: #C91D2B !important;
  border-color: #C91D2B !important;
}

.wpcf7-not-valid-tip {
  padding-top: 4px !important;
  font-family: 'satoshi-medium' !important;
  color: #C91D2B !important;
  font-size: 16px !important;
}

.wpcf7-list-item {
  margin: 0 0 0 6px !important;
}

.page-id-726 label p,
.page-id-726 .form-row p {
  font-size: 16px !important;
  font-family: 'satoshi-bold' !important;
  color: #404040 !important;
}

.page-id-726 .wpcf7-submit {
  font-family: 'satoshi-medium';
  color: #fff !important;
  border-radius: 99px !important;
  font-size: 18px !important;
  background-color: #8267ec !important;
  border: 1px;
  padding: 12px 24px;
  cursor: pointer;
  margin-top: 10px;
  transition: 0.3s;
}

.page-id-726 .wpcf7-submit:hover {
  background-color: #3A5127 !important;
}

.page-id-726 .wpcf7-submit:after,
.page-id-726 .wpcf7-submit:hover:after {
  display: none !important;
}

.wpcf7 form .wpcf7-response-output {
  border: 1.5px solid !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  padding: 1.2em !important;
  display: flex;
  align-items: center;
  font-family: 'satoshi-regular' !important;
}

.wpcf7 form.sent .wpcf7-response-output {
  border: 1.5px solid #34B249 !important;
  background: #34B249 !important;
}

.wpcf7 form.sent .wpcf7-response-output:before {
  content: '';
  width: 25px;
  height: 25px;
  background-image: url('https://vinum-dominus.ch/wp-content/uploads/2024/08/check-green-filled.webp');
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 6px;
  display: inline-block;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border: 1.5px solid #F6D8D2 !important;
  background: #F6D8D2 !important;
}

.wpcf7 form.failed .wpcf7-response-output:before,
.wpcf7 form.invalid .wpcf7-response-output:before {
  content: '';
  width: 25px;
  height: 25px;
  background-image: url('https://vinum-dominus.ch/wp-content/uploads/2024/08/error-circle.webp');
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 6px;
  display: inline-block;
}

/* Form layout */
#responsive-form {
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.form-row { width: 100%; }

.column-half,
.column-full,
.column-third {
  float: left;
  position: relative;
  padding: 0.65rem 0.65rem 0.65rem 0;
  width: 100%;
  box-sizing: border-box;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

@media only screen and (min-width: 48em) {
  .column-half  { width: 50%; }
  .column-third { width: 33%; }
}

.column-full p,
.column-half p {
  font-family: 'satoshi-medium';
  color: #404040;
  font-size: 16px;
  line-height: 1.7em;
}

/**/
/* =========================
   CUSTOM SLIDE ROW
========================= */
.custom-slide-row-slider {
  width: 100%;
  box-sizing: border-box;
}

.csr-track-wrap {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  scroll-padding-left: 24px;
  padding-left: 24px;
  padding-right: 0;

  /* Bleed to true viewport edges using vw + offset trick.
     This cancels whatever padding Divi adds at any screen size. */
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50.5vw;
  margin-right: -50vw;
  /* Restore visual indent inside the now full-width scroller */
  padding-left: calc(4% + 24px);
  padding-right: 0;
  scroll-padding-left: calc(4% + 24px);
}

.csr-track-wrap::-webkit-scrollbar {
  display: none;
}

/* DESKTOP */
.csr-track {
  display: flex;
  gap: 18px;
  /* padding-right must be at least (100vw - card-width - padding-left)
     so the last card scrolls fully into view.
     Using a generous value that covers all cases: 
  padding-right: calc(100vw - 46% - 6% - 18px);*/
}

/* DESKTOP — 2 full cards + peek on both sides */
.csr-card {
  flex: 0 0 20%;
  scroll-snap-align: start;
  min-height: 280px;
  border-radius: 20px;
  padding: 28px 24px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #F2F0FD;
  border: 1px solid #E5E7EB;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.csr-card.is-active {
  background: #7B5CF0;
  border-color: transparent;
}

/*Custom*/
@media (max-width: 1400px) and (min-width: 980px) {
  .csr-card {
    flex: 0 0 58%;
    min-height: 260px;
  }	
}

/* TABLET — 1 full + 60% peek */
@media (max-width: 980px) and (min-width: 477px) {
  .csr-track-wrap {
    padding-left: calc(4% + 24px);
    scroll-padding-left: calc(4% + 24px);
	/*  padding-left:55px;
	  scroll-padding-left:55px;*/
  }
  .csr-track {
    padding-right: 0;
  }
  .csr-card {
    flex: 0 0 58%;
    min-height: 260px;
  }
}

/* MOBILE — 1 full + small peek */
@media (max-width: 476px) {
  .csr-track-wrap {
    padding-left: calc(4% + 24px);
    scroll-padding-left: calc(4% + 24px);
  }
  .csr-track {
    padding-right: 0;
  }
  .csr-card {
    flex: 0 0 82%;
    min-height: 240px;
  }
}

/* On large screens — disable the vw bleed entirely */
@media (min-width: 1200px) {
  .csr-track-wrap {
    width: 100vw;
    position: static;
    left: auto;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0px;
    scroll-padding-left: 0px;
  }
}

/* Card content */
.csr-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

.csr-body-wrap {
  margin-top: auto;
  padding-top: 24px;
}

.csr-title {
  font-family: 'satoshi-medium', sans-serif;
  font-size: 20px;
  margin: 0 0 6px;
  line-height: 1.3;
  color: #0a0a0a;
}

.csr-body {
  font-family: 'satoshi-regular', sans-serif;
  font-size: 16px!important;
  line-height: 1.3!important;
  margin: 0;
  color: #404040;
}

.csr-card.is-active .csr-title {
  color: #ffffff;
}

.csr-card.is-active .csr-body {
  color: rgba(255, 255, 255, 0.82);
}

/* Footer */
.csr-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
	margin-left:4px;
	margin-right:4px;
}

.csr-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.csr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D1D5DB;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}

.csr-dot.is-active {
  background: #8267EC;
  transform: scale(1.25);
}

.csr-arrows {
  display: flex;
  gap: 8px;
}

.csr-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #E5E7EB;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #0a0a0a;
  transition: background 0.18s ease;
}

.csr-arrow:hover {
  background: #F1F2F5;
}

.csr-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Disable snap during silent loop jump to prevent Safari snap interference */
.csr-track-wrap.is-jumping {
  scroll-snap-type: none;
}

/*========== BLOG POST MAIN ==========*/
/*DESKTOP
.blog-main h3 {
	font-family:'satoshi-medium';
	color:#171717;
	font-size:32px;
	line-height:1.2em;
}
.blog-main h4 {
	font-family:'satoshi-medium';
	color:#171717;
	font-size:28px;
	line-height:1.2em;	
}
.blog-main p {
	font-family:'satoshi-regular';
	color:#404040;
	font-size:16px;
	line-height:1.3em;
}
.blog-main li {
	font-family:'satoshi-regular';
	color:#404040;
	font-size:16px;
	line-height:1.3em;
}*/

/*TABLET
@media (max-width: 980px) {
	.blog-main h3 {
		font-family:28px;
	}
}
.blog-main h4 {
	font-size:24px;
}*/

/*MOBILE
@media (max-width: 768px) {
	.blog-main h3 {
		font-family:24px;
	}
.blog-main h4 {
	font-size:23px;
}
}*/
.et_post_meta_wrapper {
	display:none!important;	
}
/*Blog arrow back*/
/* Blurb arrow-back — cross-fade hover image */
.arrow-back .et_pb_image_wrap {
  position: relative;
  display: inline-block;
}

/* The base image */
.arrow-back .et_pb_image_wrap img {
  display: block;
  transition: opacity 0.3s ease;
}

/* Hover image overlaid via pseudo-element */
.arrow-back .et_pb_image_wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://preprod.kreativ.swiss/wp-content/uploads/2026/04/arrw-bck-hvr.png'); /* your hover image URL */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* On hover: fade in the overlay, fade out the base */
.arrow-back:hover .et_pb_image_wrap img {
  opacity: 0;
}
.arrow-back:hover .et_pb_image_wrap::after {
  opacity: 1;
}

/*========= References */
body.single-reference, body.postid-344 {
  background: #fff !important;
}

body.single-reference #page-container, body.postid-344 #page-container {
  background: #fff !important;
}

/*ERROR 404*/
body.error404 {
  background-color: #ffffff !important;
}