/* golos-text-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/golos-text/golos-text-v4-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* golos-text-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/golos-text/golos-text-v4-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* golos-text-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/golos-text/golos-text-v4-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* golos-text-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/golos-text/golos-text-v4-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* be-vietnam-pro-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-v11-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* be-vietnam-pro-italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Be Vietnam Pro';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-v11-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* be-vietnam-pro-500 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-v11-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* be-vietnam-pro-500italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Be Vietnam Pro';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-v11-latin_latin-ext-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* be-vietnam-pro-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-v11-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* be-vietnam-pro-700italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Be Vietnam Pro';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-v11-latin_latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-sans-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ibm-plex-sans/ibm-plex-sans-v19-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-sans-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/ibm-plex-sans/ibm-plex-sans-v19-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* E_Mail Spamschutz */

/*****************************************
02 Cryptedmail
/**/

input[name='vorname']{ display:none; }

.cryptedmail {}
.cryptedmail:after {
  content: attr(data-name) "@" attr(data-domain) "." attr(data-tld); 
}


/* ***** Digital Experience ***** */
.digital-experience .module-img-1 {
	/* right: 4vw; */
}

.digital-experience .module-img-2 {
	/* right: 55px; */
}

.digital-experience .module-img-3 {
  left: 8%;
  margin-top: -33%;
  position: relative;
  float:left;
}

.digital-experience .module-img-4 {
  right: 8%;
  margin-top: -23%;
  position: relative;
  float:right;
}

.digital-experience .module-img-5 {
  left: 8%;
  margin-top: -4%;
  position: relative;
  float:left;
}

.digital-experience .module-img-6 {
  right: 8%;
  margin-top: -4%;
  position: relative;
  float:right;
}

@media (max-width: 1199px) {
  
}

@media (max-width: 767px) {
	.digital-experience {
		padding: 0 10px 30px 10px;
	}

	.digital-experience .btn {
		margin-bottom: 15px;
	}
}

@media (max-width: 420px) {
	h2, .h2 {
		font-size: 35px;
	}
  .lqd-testi-quote-18 .lqd-testi-quote blockquote {
    font-size: 16px;
  }
  .text-24 {
    font-size: 20px;
  }
}

@media (max-width: 370px) {
	h2, .h2, 
  .banner .ld-fancy-heading h1 {
		font-size: 25px;
	}
  .lqd-testi-details-sm .lqd-testi-np h3 {
    font-size: 11px;
  }
}

.lqd-tabs-style-10 .lqd-tabs-nav li a.active::before {
  opacity: 1;
  transform: scale(1);
}

.info-icon {
  position: relative;
  display: inline-block;
  margin-right: 0.5em; /* Adjust space between icon and text */
  cursor: pointer;
  color: #c7c7c7; /* Icon color, adjust as needed */
}

.middle-part .info-icon {
  color: #c9c9c985; /* Icon color, adjust as needed */
}

.info-icon .fas {
  font-size: 1rem; /* Icon size */
}

.tooltip-text {
  visibility: hidden;
  width: 160px;
  background-color: #b7b7b7d1;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 125%; /* Position the tooltip below the icon */
  left: 50%;
  margin-left: -80px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.7rem; /* Tooltip font size */
}
.middle-part .tooltip-text {
  background-color: #d6d2d2b0;
  color: #fff;
}


.tooltip-text::after {
  content: "";
  position: absolute;
  bottom: 100%; /* Arrow pointing upwards */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #b7b7b7d1 transparent;
}
.middle-part .tooltip-text::after {
  border-color: transparent transparent #d6d2d2b0 transparent;
}

.info-icon:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.row > * {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

table tbody tr:nth-child(2n+1) {
  background-color: unset;
}

.lqd-pt-style-8 .lqd-pt-price {
  color: #0f2148;
  font-weight: 500;
}
.middle-part .lqd-pt-style-8 .lqd-pt-price {
  color: #fff;
}

.text-success {
  color: #34bd91 !important;
}

.text-danger {
  color: #bd4242 !important;
}

.text-muted {
  color: #7184ad !important;
}

.feature-list table td {
  border: none;
  padding: 0.7em 1em 0.7em 0;
  font-size: 14px;
}

#pricelist .header-text {
  z-index: 1;
}


/* ------------ */
/* Pricing List */
/* ------------ */

@media (min-width: 767px) {

  .pricing-title {
    display: none;
  }

  .mobile-features {
    display:none;
  }
  .pricing .row {
    margin-right: calc(-5 * var(--lqd-row-gutter-x));
    margin-left: calc(-5 * var(--lqd-row-gutter-x));
  }

  .pricing-row.row {
    margin-left: -180px;
  }
}
.pricing .lqd-tabs-nav-txt {
  color: #6f7888;
}
/*.pricing #toggle-pricing-nav .active span {*/
/*  color: #1a3760;*/
/*}*/
.pricing .sale-tag {
  right: 0;
  margin-right: -144px;
  top: 0;
  margin-top: -137px;
}

/* base state */
.pricing-container {
  opacity:    0;
  transform:  translateX(30px);
  filter:     blur(5px);
  transition: opacity 0.5s ease,
  transform 0.5s ease,
  filter  0.5s ease;
}
/* final state */
.pricing-container.animate {
  opacity:   1;
  transform: translateX(0);
  filter:    blur(0);
}

/* --------- now stagger the delays ------------- */
.row-of-pricing > .col:nth-child(2) .pricing-container { transition-delay: 0s;   }
.row-of-pricing > .col:nth-child(3) .pricing-container { transition-delay: 0.3s; }
.row-of-pricing > .col:nth-child(4) .pricing-container { transition-delay: 0.6s; }
.row-of-pricing > .col:nth-child(5) .pricing-container { transition-delay: 0.9s; }


/* disable _all_ transitions when this is on */
.pricing-container.no-transition {
  transition: none !important;
}

/*******************/
/*     Tooltip     */
/*******************/

/* 1) base wrapper */
.pricing .tooltip-icon {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* 2) text box (shared) */
.pricing .tooltip-icon .tooltip-text {
  position: absolute;
  left: 35.4%;
  transform: translateX(-50%);
  white-space: break-spaces;
  padding: 4px 8px;
  font-size: 0.85em;
  background: rgba(0,0,0,0.8);
  color: #fff;
  border-radius: 4px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s;
  z-index: 1000;
  bottom: 100%;           /* sit right above the icon */
  margin: unset;
  margin-left: 3px;
  top: auto    !important;    /* cancel any stray “top” */
  width: 330px;
  line-height: 1.5;
}
/* 2) text box (shared) */
.pricing .tooltip-icon .tooltip-overview {
  left: 18.4%;
}

.pricing .tooltip-icon .tooltip-text::after {
  top: 100%;              /* arrow at bottom of box */
  border-color: rgba(0,0,0,0.8) transparent transparent transparent;
}

/* 5) show on hover or .active */
.pricing .tooltip-icon:hover .tooltip-text,
.pricing .tooltip-icon.active .tooltip-text {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

#lqd-particle-banner,
.ld-particles-container {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;       /* füllt jetzt die komplette Seite, nicht nur 100vh */
  z-index: -1;        /* hinter den normalen Content schieben */
  pointer-events: none;
}

/* 3) Optional: Falls dein Canvas nicht automatisch skaliert */
.particles-js-canvas-el {
  width: 100% !important;
  height: 100% !important;
}

.hidden {
  display: none;
}

#toggle-features {
  cursor: pointer;
}


/* ───────────────────────────────────────────────────────────────── */
/* Base (expanded)                                                  */
/* ───────────────────────────────────────────────────────────────── */
.icon-list-item {
  display: flex;                /* put icon/text on one line */
  align-items: center;          /* vertically center them */

  /* fix the total item height so text/icon never wrap */
  height: 42px;
  max-height: 42px;

  /* carry over your original padding/margin */
  padding-bottom: 15px;         /* same as pb-15 */
  margin-top: 15px;             /* same as mt-15 */

  opacity: 1;
  transform: translateY(0);
  filter: blur(0);

  transition:
    /* height must animate before it snaps, so leave it last */
          padding-bottom 0.3s ease-out,
          margin-top     0.3s ease-out,
          opacity        0.3s ease-out 0.1s,
          transform      0.4s ease-out,
          filter         0.4s ease-out,
          max-height     0.5s ease-out;
}

/* no gap above the first item */
.icon-list-item {
  margin-top: 0;
}

/* ───────────────────────────────────────────────────────────────── */
/* Collapsed (hidden)                                               */
/* ───────────────────────────────────────────────────────────────── */
.icon-list-item.collapsed {
  /* collapse the box entirely */
  opacity: 0;
  transform: translateY(-8px);
  filter: blur(3px);

  /* remove all spacing so nothing peeks through */
  max-height: 0;
  height:      0;
  padding-bottom: 0 !important;
  padding-top:     0 !important;
  margin-top:     0 !important;

  transition:
    /* reverse order: content fades, then height collapses */
          opacity        0.2s ease-in,
          transform      0.3s ease-in,
          filter         0.3s ease-in,
          padding-bottom 0.2s ease-in,
          margin-top     0.2s ease-in,
          max-height     0.5s ease-in 0.1s;
  display: none;
}



/* 1. Grid container: auto-fit as many 300px columns as will fit */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;               /* space between cards */
}

/* 2. Card styling—lifts on hover like your screenshot */
.service-card {
  background-color: #ffeee6;
  border: 1px solid #ffd7ba;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 3. Header with check-icon and title */
.service-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.service-header i {
  color: #ff5d18;
  font-size: 1.2em;
  margin-right: 8px;
}
.service-title {
  font-size: 1rem;
  font-weight: 600;
}

/* 4. Description and price */
.service-desc {
  flex-grow: 1;
  font-size: 0.875rem;
  color: #4a4a4a;
  margin-bottom: 16px;
}
.service-price {
  text-align: right;
  font-size: 1.125rem;
  font-weight: 700;
  color: #333;
}

/* when the “Monatlich” tab is active, turn all tab-bars white */
.lqd-tabs-style-10 .lqd-tabs-nav:has(a[data-period="monthly"].active) a::after {
  background-color: #c3c3c3;
  transition: background-color 0.5s ease;
}

/* make each #kontakt row a flex container, center its cols */
#kontakt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  /* horizontal centering */
  align-items: center;      /* vertical centering, if you need it */
}

/* optional: ensure your columns stay their normal width */
#kontakt > .col-12,
#kontakt > .col-lg-4 {
  /* no change to your existing grid widths */
}

.pricing .bg-lightgray {
  background-color: #ff55381c;
}
.packages-col-overview:not(.bg-lightgray) {
  border: solid .5px #d5d5d5;
  border-radius: 9px;
}
#contact-modal .packages-col {
  border-top: solid .5px #d5d5d5;
  border-bottom: solid .5px #d5d5d5;
}

#contact-modal .packages-col:nth-child(1 of .packages-col) {
  border-left: solid .5px #d5d5d5;
  border-right: solid .5px #d5d5d5;
  border-bottom-left-radius: 9px;
  border-top-left-radius: 9px;
}
#contact-modal .packages-col {
  border-right: solid .5px #d5d5d5;
}
#contact-modal .packages-col:last-child {
  border-bottom-right-radius: 9px;
  border-top-right-radius: 9px;
}
#contact-modal .feature-name {
  line-height: 17px;
}
#contact-modal .feature-name {
  line-height: 17px;
}

#contact-modal .row-of-pricing .row-of-pricing :nth-child(1 of .packages-col) {
  padding-right: 1.1px !important;
  padding-left: 1.1px !important;
}

/* odd items (1,3,5,…) */
.packages-col>div:not(.list-bg-transparent) .icon-list-items .icon-list-item:nth-child(odd),
.icon-list-items .feature-name:nth-child(odd) {
  background-color: #f7f7f7;

}

.packages-col>div.list-bg-transparent .icon-list-items .icon-list-item:nth-child(odd) {
  background-color: #ff553814;

}
.icon-list-items .feature-name {
  position: relative;    /* establish positioning context */
}

/* top line on the very first feature only */
.icon-list-items .feature-name:last-child::after {
  display:none;
}

/* Damit die absolute Positionierung bezogen auf die Spalte funktioniert */
.packages-col.plus-package {
  position: relative;
}

.rotate-25 {
  transform: rotate(25deg);
}

.badge-text {
  padding-left: 17px;
}

#addon-services .container {
  max-width: 1400px /* or whatever fits your design */;
  width: 100%;
}
.w-full>.icon-list-items:has(.feature-name) {
  padding-top: 1.5px;
}


@media (max-width: 767px) {
  .pricing .tooltip-icon .tooltip-overview::after {
    display: none;
  }
  .pricing .tooltip-icon .tooltip-text {
    left: -93.6%;
    transform: unset;
  }

  #contact-modal .tooltip-text::after {
    display: none;
  }
  #contact-modal .tooltip-icon .tooltip-overview {
    position: fixed;
    left: 50%;
    transform: translate(-50%);
  }

  .lqd-tabs-style-10 .lqd-tabs-nav li:last-child a {
    flex-direction: row;
  }

  .pricing .lqd-tabs-style-10 .lqd-tabs-nav li a::before {
    left: 10px;
    bottom: 10px;
    right: auto;
  }

  .pricing .lqd-tabs-style-10 .lqd-tabs-nav li a::after {
    border-radius: 50%;
  }

  .pricing .toggle-pricing-nav  {
    margin-top: 80px;
  }
  .lqd-section.pricing {
    padding-top: 50px;
  }
  .pricing .row-of-pricing .features-summary {
    padding: 0 15px;
  }
  .pricing .row-of-pricing .packages-col-overview,
  #contact-modal .row-of-pricing .packages-col {
    border:none;
    border-radius: 0;
    border-top: 1px solid transparent;
    border-image:
            linear-gradient(
                    to right,
                    transparent 0%,
                    #d5d5d5 25%,
                    #d5d5d5 75%,
                    transparent 100%
            ) 1  /* slice so that the gradient covers the full width */
            stretch
  }
  /* only the last wrapper’s overview */
  .pricing .row-of-pricing > div:last-child > .packages-col-overview,
  #contact-modal .row-of-pricing:last-child > .packages-col {
    border-bottom: 1px solid transparent;
    border-image:
            linear-gradient(
                    to right,
                    transparent 0%,
                    #d5d5d5 25%,
                    #d5d5d5 75%,
                    transparent 100%
            ) 1  /* slice so that the gradient covers the full width */
            stretch;
  }

  .toggle-features {
    margin-bottom: 30px;
  }

  .book-demo {
    margin-top: 10px;
  }
  #contact-modal .ld-fancy-heading>h2 {
    line-height: 35px;
  }
  #contact-modal .icon-list-text {
    line-height: 18px;
  }
}


/* ------------ */
/* Blog Entry's */
/* ------------ */

.blog-entrys .text-title {

  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: linear-gradient(196deg, rgb(254, 80, 108) 0%, rgb(252, 106, 42) 100%);
}
.blog-pic-wrapper {
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}
.blog-pic {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
}

.relative-wrapper {
  position: relative;
}


.sticky-spacer {
  height: 200px;
}


.share-block {
  position: sticky;
  top: 93px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blog-col {
  padding-left: 2rem;
  padding-right: 2rem;
}

.blog-titlebar {
  background-image: radial-gradient(circle at 99% 99%,#faeae1 0,rgba(238,230,235,.2) 42%,#fcfbfb 109%);
}


@media (max-width: 767px) {
  .share-block-wrapper {
    display: none;
  }
}