:root {
	--brand-color: #202b36;
	--brand-color-gradient1: #2f4050;
	--brand-color-gradient2-red: #6b838e;
	--plenigo-brand: #1ab394;
	--plenigo-second: #1ab394;
	--plenigo-accent-green: #1ab394;
	--background1: #fff;
	--background2: #FBFBFB;
	--background3: #f8f8f8;
	--font-color-main: #0B132A;
	--font-color-grey: #4F5665;
	--dot-background: #dde0e4;
    --spotlight-blend-mode: multiply;
    --spotlight-reveal: radial-gradient(ellipse 150% 100% at center, 
        #8B45FF 0%,
        #C2185B 25%,
        #E91E63 40%,
        #FF5722 65%,
        #FF8F00 85%,
        #FFB000 100%
    );
    --spotlight-cover: rgba(255, 255, 255, 0.8);
}

body.subverse-page {
	--brand-color: #5924B2;
	--brand-color-gradient1: #7f1c93;
	--brand-color-gradient2-red: #9b7cd1;
	--plenigo-brand: #5924B2;
	--plenigo-second: #A925C4;
	--plenigo-accent-green: #A925C4;
	--background1: #fff;
	--background2: #FBFBFB;
	--background3: #f8f8f8;
	--font-color-main: #0B132A;
	--font-color-grey: #4F5665;
	--dot-background: #dde0e4;
}
.schaubild-category-title {
  border-bottom: 2px solid #fff;
  display: inline-block;
  padding-bottom: 4px;
  margin-bottom: 12px;
  font-size: 1.1rem;
  font-weight: 600;
}
.schaubild-section ul {
  padding-left: 1.2em;
  margin-bottom: 0;
}
.schaubild-section li {
  font-size: 1rem;
  margin-bottom: 2px;
}
/*'Indie Flower',*/
.handwritten {
  font-family: 'Caveat Brush', cursive;
  font-weight: 400;
  color: inherit;
  letter-spacing: 0.01em;
  vertical-align: baseline;
}
.pricing-lite-hinweis {
	font-size: 0.8em;
	color: grey;
}

.pricing-account {
	font-size: 0.9em !important;
	color:grey !important;
}
.pricing-account-name {
	font-size: 1.1em !important;
	color:black !important;
}

.btn-gradient {
  background: linear-gradient(175deg, #A925C4 0%, #5924B2 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 6px;
  padding: 0.75em 2.2em;
  font-size: 0.9em;
  font-weight: 400;
  box-shadow:
    0 0 0 4px rgba(120, 104, 255, 0.02); /* blauer Glow außen */
  transition: box-shadow 0.2s, transform 0.2s;
  position: relative;
}

.btn-gradient:hover, .btn-gradient:focus {
  box-shadow:
    0 2px 12px 0 rgba(89,36,178,0.3);   /* lila outer shadow */
  /*transform: translateY(-1px) scale(1.01);*/
  outline: none;
  color: #e6e6e6;
}
.btn-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1.5px 8px 0 rgba(255,255,255,0.15);
}



.about-abstand {
    padding-top: 14rem !important;
    padding-bottom: 10rem !important;
}

.hero-section-parent {
  min-height: calc(100vh - 80px);
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  margin-top: -5em !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  z-index: -10;
}


.hero-gradient-bg.about-abstand {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 0;
  height: 100%;
  padding: 0 !important;
    background: 
    /* Oberer linker Bereich - Kräftiger Brand-Gradient */
    radial-gradient(ellipse 65% 45% at 12% 5%, 
      rgba(89, 36, 178, 0.25) 0%, 
      rgba(89, 36, 178, 0.18) 25%, 
      rgba(139, 69, 255, 0.12) 45%, 
      rgba(168, 85, 247, 0.06) 65%, 
      transparent 85%),
    
    /* Screenshot-Highlight rechts - Intensiver Glow */
    radial-gradient(ellipse 50% 40% at 85% 65%, 
      rgba(89, 36, 178, 0.28) 0%, 
      rgba(139, 69, 255, 0.20) 20%, 
      rgba(168, 85, 247, 0.15) 40%, 
      rgba(99, 102, 241, 0.08) 60%, 
      transparent 80%),
    
    /* Zusätzlicher Akzent für mehr Tiefe */
    radial-gradient(ellipse 40% 30% at 75% 25%, 
      rgba(168, 85, 247, 0.15) 0%, 
      rgba(139, 69, 255, 0.08) 40%, 
      transparent 70%),
    
    /* Diagonaler Gradient für moderne Dynamik */
    linear-gradient(125deg, 
      rgba(89, 36, 178, 0.08) 0%, 
      rgba(255, 255, 255, 0.95) 15%, 
      rgba(255, 255, 255, 1) 35%, 
      rgba(255, 255, 255, 0.98) 65%, 
      rgba(139, 69, 255, 0.05) 85%, 
      rgba(89, 36, 178, 0.03) 100%),
    
    /* Übergang zum grauen Bereich */
    linear-gradient(to bottom, 
      transparent 0%, 
      transparent 75%, 
      rgba(246, 246, 246, 0.4) 88%, 
      #f6f6f6 100%),
    
    #ffffff;
}
  /*background: radial-gradient(ellipse 60% 50% at -5% 0%, rgba(169, 37, 196, 0.3) 30%, transparent 100%),
               radial-gradient(ellipse 50% 40% at 100% 90%, rgba(89, 36, 178, 0.3) 30%, transparent 100%),
               #fff;*/
.hero-gradient-bg .container {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.hero-visuals-custom {
  position: absolute;
  right: -30%;
  top: 50%;
  transform: translateY(-50%);
  height: 60vh;
  max-width: none;
  overflow: visible;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.hero-bg {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left center;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  box-shadow: 0 8px 12px rgba(60, 40, 180, 0.3);
  z-index: 1;
  pointer-events: auto;
}

/* small1: starts below and left, animates to middle of left edge */
.hero-float--center {
  position: absolute;
  left: 5%;
  top: 85%;
  width: 17em;
  opacity: 0.98;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  transform: translateY(140px) translateX(-80px) scale(0.65);
  transition:
    transform 1.5s cubic-bezier(.22,1,.36,1),
    box-shadow 0.8s cubic-bezier(.22,1,.36,1),
    opacity 0.8s cubic-bezier(.22,1,.36,1);
  z-index: 2;
}

/* small2: starts right and offscreen, animates in */
.hero-float--right {
  position: absolute;
  right: 10%;
  bottom: 10%;
  width: 15em;
  opacity: 0.97;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  transform: translateX(180px) scale(0.6);
  transition:
    transform 2.5s cubic-bezier(.22,1,.36,1),
    box-shadow 0.8s cubic-bezier(.22,1,.36,1),
    opacity 0.8s cubic-bezier(.22,1,.36,1);
  z-index: 2;
}

/* Animation active */
.hero-float--active.hero-float--center {
  top: 70%;
  left: -7%;
  transform: translateY(-50%) translateX(-8px) scale(1.04);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  opacity: 1;
}
.hero-float--active.hero-float--right {
    bottom: -10%;
  left: 58%;
  transform: translateX(0px) scale(1.12);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  opacity: 1;
}

/* Responsive: */
@media (max-width: 1399px) {
  .hero-visuals-custom { 
    right: -20%;
    width: 80%;
  }
  .hero-float--center { width: 120px; left: 0; }
  .hero-float--right { width: 70px; right: 5%; }
}

@media (max-width: 991px) {
  .hero-visuals-custom { 
    position: relative;
    right: -10%;
    top: auto;
    transform: none;
    width: 120%;
    height: auto;
    margin-top: 2rem;
  }
  .hero-bg { 
    width: 100%;
    height: auto;
    max-width: none;
    min-width: 320px;
  }
  .hero-float--center { width: 70px; left: 5%; }
  .hero-float--right { width: 40px; right: 10%; }
}

.pricing-gradient-bg {
    position: relative;
    z-index: 0;
    background:
        radial-gradient(ellipse 60% 50% at -40% 10%, rgba(169, 37, 196, 0.3) 40%, transparent 100%),
        radial-gradient(ellipse 50% 50% at 120% 100%, rgba(89, 36, 178, 0.3) 40%, transparent 100%),
        radial-gradient(ellipse 100% 50% at -20% 110%, rgb(255, 255, 255) 50%, transparent 100%),
        #f6f6f6 !important;
}

.hero-gradient-bg {
    position: relative;
    z-index: 0;
    background:
        radial-gradient(ellipse 60% 50% at -5% 0%, rgba(169, 37, 196, 0.3) 30%, transparent 100%),
        radial-gradient(ellipse 50% 40% at 100% 90%, rgba(89, 36, 178, 0.3) 30%, transparent 100%),
        #fff;
}

.hero-gradient-bg > section {
    position: relative;
    z-index: 1;
    background: none !important;
}




.pricing-btn {
	padding-top: 1rem;
	padding-bottom: 1rem;
	align-self: center;
}
#pricing .card-body {
    display: flex;
    flex-direction: column;
}

#pricing .card-body > div {
    flex-grow: 1;
}

#pricing .priceButton {
    margin-top: auto;
}
.pricing-font {
	font-size: 0.9rem !important;
}
.bigPrice.midPrice {
	font-size: 1.4rem !important;
	font-weight: bolder;
}
.pricing-starter-kicker {
	color: var(--font-color-grey);
	font-size: 1rem;
}

/* Neue Styles für fette schwarze Preise */
.bigPrice-bold {
    font-size: 1.5rem;
    font-weight: 500;
}

.midPrice-bold {
    font-size: 1.2rem;
    font-weight: 500;
}

/* Bullet Points für Features */
.pricing-features {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.4rem;
    margin-top: 1.4rem;
}

.pricing-features li {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1.2rem;
}

.pricing-features li:before {
    content: "•";
    color: #6c757d;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Description für Lite */
.pricing-description {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1.4rem;
    margin-top: 1.4rem;
}


/* rubik-300 - 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: 'Rubik';
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/rubik-v28-latin-300.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		url('../fonts/rubik-v28-latin-300.ttf') format('truetype');
	/* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* rubik-300italic - 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: 'Rubik';
	font-style: italic;
	font-weight: 300;
	src: url('../fonts/rubik-v28-latin-300italic.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		url('../fonts/rubik-v28-latin-300italic.ttf') format('truetype');
	/* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* rubik-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: 'Rubik';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/rubik-v28-latin-regular.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		url('../fonts/rubik-v28-latin-regular.ttf') format('truetype');
	/* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* rubik-italic - 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: 'Rubik';
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/rubik-v28-latin-italic.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		url('../fonts/rubik-v28-latin-italic.ttf') format('truetype');
	/* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* rubik-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: 'Rubik';
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/rubik-v28-latin-500.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		url('../fonts/rubik-v28-latin-500.ttf') format('truetype');
	/* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* rubik-500italic - 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: 'Rubik';
	font-style: italic;
	font-weight: 500;
	src: url('../fonts/rubik-v28-latin-500italic.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		url('../fonts/rubik-v28-latin-500italic.ttf') format('truetype');
	/* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* rubik-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: 'Rubik';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/rubik-v28-latin-600.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		url('../fonts/rubik-v28-latin-600.ttf') format('truetype');
	/* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* rubik-600italic - 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: 'Rubik';
	font-style: italic;
	font-weight: 600;
	src: url('../fonts/rubik-v28-latin-600italic.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		url('../fonts/rubik-v28-latin-600italic.ttf') format('truetype');
	/* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* rubik-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: 'Rubik';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/rubik-v28-latin-700.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		url('../fonts/rubik-v28-latin-700.ttf') format('truetype');
	/* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* rubik-700italic - 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: 'Rubik';
	font-style: italic;
	font-weight: 700;
	src: url('../fonts/rubik-v28-latin-700italic.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		url('../fonts/rubik-v28-latin-700italic.ttf') format('truetype');
	/* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* rubik-800 - 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: 'Rubik';
	font-style: normal;
	font-weight: 800;
	src: url('../fonts/rubik-v28-latin-800.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		url('../fonts/rubik-v28-latin-800.ttf') format('truetype');
	/* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* rubik-800italic - 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: 'Rubik';
	font-style: italic;
	font-weight: 800;
	src: url('../fonts/rubik-v28-latin-800italic.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		url('../fonts/rubik-v28-latin-800italic.ttf') format('truetype');
	/* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* rubik-900 - 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: 'Rubik';
	font-style: normal;
	font-weight: 900;
	src: url('../fonts/rubik-v28-latin-900.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		url('../fonts/rubik-v28-latin-900.ttf') format('truetype');
	/* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* rubik-900italic - 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: 'Rubik';
	font-style: italic;
	font-weight: 900;
	src: url('../fonts/rubik-v28-latin-900italic.woff2') format('woff2'),
		/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
		url('../fonts/rubik-v28-latin-900italic.ttf') format('truetype');
	/* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

@media (min-width: 1540px) {

	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl,
	.container-xxl {
		max-width: 1280px;
	}
}
@media (min-width: 1840px) {

	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl,
	.container-xxl {
		max-width: 1440px;
	}
}
@media (min-width: 1930px) {

	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl,
	.container-xxl {
		max-width: 1600px;
	}
}
html {
	scroll-behavior: smooth;
}

body {
	color: var(--font-color-main);
    overflow-x: hidden;
}

@media(min-width: 1600px) {
	.stickyDesk {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 10000;
	}
}

.main.forIframe {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/*
.main.forIframe .container {
	width: 1520px !important;
	max-width: none !important;
}
*/

.btn-contact {
	border: 1px solid var(--brand-color);
	color: var(--brand-color);
	transition: 0.2s;
}

.btn-contact:hover,
.btn-contact:focus,
.btn-contact:active {
	border: 1px solid var(--brand-color-gradient1);
	color: var(--brand-color-gradient1);
}

.btn-demo {
	background: var(--brand-color);
	color: #fff;
	transition: 0.3s;
}

.btn-demo:hover,
.btn-demo:focus,
.btn-demo:active {
	outline: none;
	background: var(--brand-color-gradient1);
	box-shadow: none !important;
	color: #fff;
}

.smallIcon {
	width: 22px;
}

@media (max-width: 768px) {
	p {
    text-align: justify;
	}
}

.hasCircles svg {
	fill: var(--plenigo-second);
	margin-top: 4px;
	width: 18px;
	height: 18px;
}

.hasCircles h3 {
	margin-bottom: 30px;
	font-size: 40px;
	line-height: 1.4;
	font-weight: 400;
	padding-right: 30px;
}

@media (max-width: 768px) {
	.hasCircles h3 {
		font-size: 30px;
	}
}

.referenzen {
	text-align: center;
	padding-top: 1em !important;
	padding-bottom: 1em !important;
	background-color: #f6f6f6
}

.referenzen .refSlider {
	padding-left: 100px;
	padding-right: 100px;
}

@media (max-width: 1199px) {
	.referenzen .refSlider {
		padding-left: 50px;
		padding-right: 50px;
	}
}

@media (max-width: 768px) {
	.referenzen .refSlider {
		padding-left: 15px;
		padding-right: 15px;
	}
}

.referenzen img {
    width: 120px;
    opacity: 0.45; 
    transition: opacity 0.3s ease; 
}

.referenzen img:hover {
    opacity: 1;
}

@media (max-width: 768px) {
	.referenzen img {
		width: 120px;
	}
}

/* .referenzen .slide {
	width: 200px;
	height: 80px;
} */


.referenzen .slick-track {
	display: flex;
}

.referenzen .slick-slide {
	height: auto;
}
/* NEUE referenzen für Fade Out*/
.referenzen .slick-list {
  position: relative;
  overflow: hidden;
}

.referenzen .slick-list::before,
.referenzen .slick-list::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.referenzen .slick-list::before {
  left: 0;
  background: linear-gradient(to right, #f6f6f6 0%, transparent 100%);
}

.referenzen .slick-list::after {
  right: 0;
  background: linear-gradient(to left, #f6f6f6 0%, transparent 100%);
}


/* Pricing */
.pricingItem {
	padding: 30px;
}

.zoomBody {
	transform: none;
	transition: 0.4s;
	border: none;
	/* box-shadow: 0 0 10px 5px rgba(125, 125, 125, 0.2); */
	box-shadow: 0 1.5625rem 2.8125rem rgba(79, 86, 101, 0.075) !important;
}
.zoomBodyLite {
	transform: none;
	transition: 0.4s;
	/* box-shadow: 0 0 10px 5px rgba(125, 125, 125, 0.2); */
	box-shadow: none !important;
}
.zoomBody:hover {
	transform: scale(1.05);
}
.zoomBodyLite:hover {
	transform: scale(1.05);
}
.pricingItem .imgWrap {
	text-align: right;
	height: 40px;
}

.pricingItem .imgWrap img {
	height: 100%;
	width: auto;
}

.pricingItem h5 {
	color: var(--font-color-grey);
	font-weight: normal;
}

.pricingItem p {
	color: var(--font-color-grey);
	margin-bottom: 10px;
}

.pricingItem .bigPrice {
	color: var(--font-color-main);
	font-size: 38px;
	padding-right: 10px;
}

.pricingItem .midPrice {
	color: var(--font-color-main);
	font-size: 28px;
	padding-right: 10px;
}

.priceButton {
	background: var(--brand-color);
	color: #fff;
	transition: 0.2s;
}

.priceButton:hover,
.priceButton:focus,
.priceButton:active {
	outline: none;
	background: var(--brand-color-gradient1);
	box-shadow: none !important;
	color: #fff;
}

.inversedBody {
	background: var(--brand-color);
	color: #fff;
}


.pricingItem.inversed h4,
.pricingItem.inversed h5,
.pricingItem.inversed p,
.pricingItem.inversed .bigPrice,
.pricingItem.inversed .midPrice {
	color: #fff;
}

.inversed .priceButton {
	background: #fff;
	color: var(--plenigo-brand);
	transition: 0.2s;
}

.inversed .priceButton:hover,
.inversed .priceButton:focus,
.inversed .priceButton:active {
	outline: none;
	background: var(--background3);
	box-shadow: none !important;
	/* color: #fff; */
}

.priceExtra {
	margin-top: 15px;
	text-align: right;
}


/* Module */
.moduleSlider {
	position: relative;
}

.moduleSlider::before {
	background: linear-gradient(90deg, rgba(246, 246, 246, 1) 0%, transparent 100%);
	top: 0;
	left: 0;
	width: 30px;
	height: 100%;
	z-index: 1001;
	display: block;
	position: absolute;
	content: '';
}

.moduleSlider::after {
	background: linear-gradient(90deg, transparent 0%, rgba(246, 246, 246, 1) 100%);
	top: 0;
	right: 0;
	width: 30px;
	height: 100%;
	z-index: 1001;
	display: block;
	position: absolute;
	content: '';
}

@media(max-width: 991px) {
	.moduleSlider::before,
	.moduleSlider::after {
		display: none;
	}
}

.moduleSlider .slick-arrow {
	width: 2em;
	height: 2em;
	position: absolute;
	top: 30%;
	transform: translateY(-50%);
	z-index: 5000;
	background: #fff;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 50%;
	border: none;
	outline: none;
	cursor: pointer;
}

@media (max-width: 768px) {
	/* Show only one item in the slider for mobile view */
	.moduleSlider .slick-track {
		flex-wrap: nowrap;
	}

	.moduleSlider .slick-slide {
		width: 100%; /* Occupy full width for one item per view */
	}

	/* Hide left and right arrows in mobile view */
	.moduleSlider .slick-prev,
	.moduleSlider .slick-next {
		display: none;
	}
}

.moduleSlider .slick-prev {
	left: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' class='bi bi-arrow-left-circle' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z'/%3E%3C/svg%3E");
}

.moduleSlider .slick-next {
	right: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' class='bi bi-arrow-right-circle' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E");
}

.moduleSlider .slide {
	padding-left: 20px;
	padding-right: 20px;
}

.moduleSlider .slick-slide {
	transition: 2s;
}

.moduleSlider .slick-current {
	transition: 1s;
}

.moduleSlider .slick-current > div {
	/* height: 100%; */
}

.moduleSlider .slick-current .slide {
	/* padding-top: 0;
	padding-bottom: 0; */
	/* height: 100%; */
}

.moduleSlider .slick-current .slide .inner {
	/* height: 100%; */
}

.moduleSlider .inner {
	padding: 10px;
}

.moduleSlider .imgWrap {
	overflow: hidden;
	cursor: pointer;
}

.moduleSlider .imgWrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.moduleSlider .slick-track {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	padding-bottom: 40px;
	padding-top: 40px;
}

.moduleSlider .slick-slide {
	height: auto;
}

.moduleSlider .slick-dots {
	display: flex;
	justify-content: center;
	gap: 12px;
	padding: 0;
}

.moduleSlider .slick-dots li {
	list-style: none;
}

.moduleSlider .slick-dots button {
	text-indent: -9999px;
	outline: none;
	border: none;
	background: var(--dot-background);
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.moduleSlider .slick-dots .slick-active button {
	width: 40px;
	background: var(--brand-color);
	border-radius: 10px;
}

.moduleSlider .slick-dots button:hover,
.moduleSlider .slick-dots button:active,
.moduleSlider .slick-dots button:focus {
	background: var(--brand-color);
}

.line-through {
	text-decoration: line-through;
}

.accent {
	color: var(--plenigo-accent-green);
}

.smallGrey {
	color: var(--font-color-grey);
	font-size: 0.9rem;
}

@media(min-width: 992px) {
	.ml-auto {
		margin-left: auto;
	}
}


/* Footer */
.iconLine {
	margin-bottom: 8px;
}

.iconLine a {
	color: var(--font-color-main);
	display: flex;
	gap: 10px;
	align-items: center;
}

.iconLine a:not(.text-decoration-none) {
	text-decoration: underline;
}

.iconWrap {
	width: 20px;
	height: 20px;
	padding: 2px;
	background: #fff;
}

.iconWrap img {
	width: 100%;
	height: auto;
	display: block;
}

.badge-circle {
	height: 3.4rem;
	width: 3.4rem;
	padding: 0 1rem;
}

@media(max-width: 767px) {
	.startIcon .border-end {
		border-right: none !important
	}

	.startIcon:not(:first-child) {
		border-top: 1px solid #bec3d0;
		padding-top: 10px;
		margin-top: 10px;
	}

	.switchOrderMobile {
		flex-direction: column-reverse;
	}
}

.lightshow {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10001;
}

.lightshow.shown {
	display: flex;
}

.lightshow .track {
	width: 90vw;
	height: 90vh;
	position: relative;
	/* margin: auto;
	max-width: 1000px; */
}

.lightshow .lightshowItem {
	opacity: 0;
	z-index: 0;
	transition: 0s;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.lightshow .lightshowItem.active {
	opacity: 1;
	z-index: 5;
	text-align: center;
	transition: 0.7s;
}

.lightshow .imgWrap {
	/* width: 100%; */
	/* height: 100%; */
	width: auto;
	display: inline-block;
	position: relative;
	padding: 80px 20px 20px 20px;
	background: #fff;
	border-radius: 0.625rem;
	box-shadow: 0 1.5625rem 2.8125rem rgba(79, 86, 101, 0.075);
}

.lightshow img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	max-height: 80vh;
}


@media(max-height: 600px) {
	.lightshow img {
		height: 70vh;
	}
}

.lightshow .overlay {
	color: var(--font-color-main);
	font-size: 30px;
	line-height: 1;
	position: absolute;
	top: 30px;
}

.lightshow .control {
	width: 60px;
	height: 60px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5000;
	background: #fff;
	border-radius: 50%;
	border: none;
	outline: none;
	cursor: pointer;
	/* border: 1px solid var(--brand-color); */
}

.lightshow .prev {
	left: -30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' fill='%23202b36' class='bi bi-arrow-left-circle' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z'/%3E%3C/svg%3E");
}

.lightshow .next {
	right: -30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' fill='%23202b36' class='bi bi-arrow-right-circle' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
	.lightshow .control {
		width: 40px;
		height: 40px;
	}

	.lightshow .prev {
		left: -20px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' fill='%23202b36' class='bi bi-arrow-left-circle' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z'/%3E%3C/svg%3E");
	}

	.lightshow .next {
		right: -20px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' fill='%23202b36' class='bi bi-arrow-right-circle' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E");
	}
}

p a {
	color: var(--brand-color);
}

p a:hover,
p a:focus,
p a:active {
	color: var(--brand-color-gradient1);
	text-decoration: none;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dropdown-item img {
    margin-right: 10px;
}



/*new stuff*/
.features-section {
  padding: 4rem 0;
  background-color: #f8f9fa;
}

.container2 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 2rem;
  align-items: center;
}

.feature-item {
  text-align: center;
  padding: 1rem;
}

.icon-wrapper {
  background-color: #8e44ad;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1rem;
}

.feature-icon {
  width: 30px;
  height: 30px;
}

.central-image {
  grid-column: 1 / -1;
  text-align: center;
}

.chart-image {
  max-width: 100%;
  height: auto;
}

h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

p {
  font-size: 0.9rem;
  color: #6c757d;
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .central-image {
    grid-row: 1 / -1;
    grid-column: 2;
  }

  .top-left {
    grid-column: 1;
    grid-row: 1;
  }

  .top-right {
    grid-column: 3;
    grid-row: 1;
  }

  .bottom-left {
    grid-column: 1;
    grid-row: 2;
  }

  .bottom-right {
    grid-column: 3;
    grid-row: 2;
  }
}

/* Multiple Platform Section */
.multiple-platform-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.platform-content {
    padding-right: 2rem;
}

.platform-icon .icon-wrapper {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(74, 144, 226, 0.3);
}

.platform-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
}

.platform-description {
    font-size: 1.1rem;
    color: #6c757d;
    line-height: 1.6;
}

.btn-platform {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    color: white;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.btn-platform:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(139, 92, 246, 0.4);
    color: white;
}

/* Visual Container */
.platform-visuals {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prince-visual-wrapper {
    position: relative;
    z-index: 1;
}

.prince-visual {
    max-width: 400px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateX(100px);
    transition: all 1.2s ease-out;
}

.prince-tooltip-wrapper {
    position: absolute;
    top: 20%;
    left: 50%;
    z-index: 2;
}

.prince-tooltip {
    max-width: 180px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: scale(0.6) translateY(20px);
    transition: all 2s ease-out 0.3s;
}

/* Animation Triggers - AKTIV */
.platform-visuals.animate .prince-visual {
    opacity: 1;
    transform: translateX(0);
}

.platform-visuals.animate .prince-tooltip {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Animation Triggers - INAKTIV (explizit definiert für smooth reverse) */
.platform-visuals:not(.animate) .prince-visual {
    opacity: 0;
    transform: translateX(100px);
    transition: all 1.5s ease-out;
}

.platform-visuals:not(.animate) .prince-tooltip {
    opacity: 0;
    transform: scale(0.6) translateY(20px);
    transition: all 1.2s ease-out;
}

/* Responsive Design */
@media (max-width: 991.98px) {
    .platform-content {
        padding-right: 0;
        text-align: center;
    }
    
    .platform-visuals {
        height: 300px;
        margin-top: 2rem;
    }
    
    .platform-title {
        font-size: 2rem;
    }
    
    .prince-tooltip-wrapper {
        top: -10px;
        left: -20px;
    }
    
    .prince-tooltip {
        max-width: 150px;
    }
}

@media (max-width: 767.98px) {
    .platform-visuals {
        height: 250px;
    }
    
    .prince-tooltip {
        max-width: 120px;
    }
}


/* Cluely-Style Features Section */
.cluely-features-section {
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
}

.cluely-main-title {
    font-size: 2.5rem;
    font-weight: 300;
    color: #1a1a1a;
    line-height: 1.2;
}

.cluely-main-title strong {
    font-weight: 700;
    background: linear-gradient(135deg, var(--plenigo-brand), #ff6b9d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cluely-subtitle {
    font-size: 1.2rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

.cluely-bento-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    margin-top: 3rem;
}

.cluely-bento-item {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
}

.cluely-bento-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.cluely-bento-large {
    grid-row: span 2;
}

.cluely-bento-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cluely-feature-image {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    margin-bottom: 1.5rem;
}

.cluely-bento-large .cluely-feature-image {
    max-height: 300px;
}

.cluely-feature-text h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.cluely-feature-text p {
    color: #666;
    line-height: 1.6;
    font-size: 1rem;
}

.cluely-quote-section {
    text-align: center;
    padding: 3rem 0;
}

.cluely-quote {
    font-size: 2rem;
    font-style: italic;
    color: #1a1a1a;
    margin-bottom: 1rem;
    border: none;
}

.cluely-quote-response {
    font-size: 1.1rem;
    color: var(--plenigo-brand);
}

/* Platforms Section */
.cluely-platforms-section {
    background: #fafbff;
}

.cluely-section-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
}

.cluely-section-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
}

.cluely-platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.cluely-platform-category h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 1rem;
    text-align: center;
}

.cluely-platform-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
}

.cluely-platform-logo {
    background: white;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.2s ease;
}

.cluely-platform-logo:hover {
    transform: translateY(-2px);
}

.cluely-integration-diagram {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

/* Invisible Section */
.cluely-invisible-section {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
}

.cluely-section-text {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.7;
}

.cluely-feature-list {
    margin-top: 2rem;
    font-size: 1rem;
    color: #555;
    line-height: 1.3;
}

.cluely-feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.cluely-check-icon {
    width: 24px;
    height: 24px;
    background: var(--plenigo-brand);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    margin-right: 1rem;
    flex-shrink: 0;
}

.cluely-feature-item-price {
    display: flex;
    align-items: center;
    margin-bottom: 0.6rem;
    font-size: 0.9rem !important;
    color: #6c757d;
}

.cluely-check-icon-price {
    width: 20px;
    height: 20px;
    background: var(--plenigo-brand);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: bold;
    margin-right: 0.8rem;
    flex-shrink: 0;
}
.cluely-visual-container {
    position: relative;
    text-align: center;
}

.cluely-main-visual {
    width: 100%;
    max-width: 500px;
    height: auto;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.cluely-floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.cluely-data-point {
    position: absolute;
    background: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--plenigo-brand);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 30px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(230, 230, 230);
    animation: float 3s ease-in-out infinite;
}

.cluely-data-1 {
    top: 20%;
    right: 10%;
    animation-delay: 0s;
}

.cluely-data-2 {
    top: 60%;
    left: 5%;
    animation-delay: 1s;
}

.cluely-data-3 {
    bottom: 20%;
    right: 15%;
    animation-delay: 2s;
}
.cluely-data-selektion {
    top: -5%;
    right: 5%;
    animation-delay: 2s;
}
.cluely-data-campaignmanager {
    bottom: 10%;
    left: -5%;
    animation-delay: 2s;
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

.cluely-subsection-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.cluely-insight-cards {
    display: flex;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
}

.cluely-insight-card {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

.cluely-insight-card h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--plenigo-brand);
    margin-bottom: 0.5rem;
}

.cluely-insight-card p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    line-height: 1.3;
}

.cluely-alert-overlay {
    position: absolute;
    top: 20px;
    right: 20px;
}

.cluely-alert {
    background: #A925C4;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .cluely-bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    
    .cluely-bento-large {
        grid-row: span 1;
    }
    
    .cluely-main-title {
        font-size: 2rem;
    }
    
    .cluely-section-title {
        font-size: 1.8rem;
    }
    
    .cluely-platforms-grid {
        grid-template-columns: 1fr;
    }
    
    .cluely-insight-cards {
        grid-template-columns: 1fr;
    }
    
    .cluely-data-point {
        position: relative;
        display: inline-block;
        margin: 0.5rem;
    }
    
    .cluely-floating-elements {
        position: relative;
        text-align: center;
        margin-top: 1rem;
    }
}





/* FROM HERE COOPYYYY*/



/* BOX STYLE */
.bg-subverse {
	border: 1px solid #e6e6e6;
    border-radius: 6px;
    box-shadow: 4px 4px 8px rgba(156, 156, 156, 0.3);
	background: #fff;
}

.cluely-screenshot-visual {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 12px;
}
.cluely-data-appicon {
    bottom: 10%;
    right: 10%;
    animation-delay: 1s;
}

.cluely-data-point-appicon {
    position: absolute;
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    animation: float 3s ease-in-out infinite;
}
/* Subverse Text Stack Styling - FIXED */
.subverse-text-stack {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.subverse-text-line {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.subverse-text-item {
    font-size: clamp(3.5rem, 5vw, 4.5rem);
    font-weight: 700;
    color: #9e9e9e;
    opacity: 0.7;
    transition: all 0.6s ease;
    letter-spacing: -0.02em;
    line-height: 1.3;
    white-space: nowrap;
    text-align: center;
    display: inline-block;
}

.subverse-text-item.active {
    font-weight: 700;
    color: #1a365d;
    background: linear-gradient(135deg, #A925C4, #5924B2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.6s ease;
    animation: subverse-highlight-pulse 0.6s ease-in-out;
}

@keyframes subverse-highlight-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

.subverse-text-item:hover {
    color: #666;
    transform: translateY(-2px);
}

/* Cluely-exact Animation Styles */
#subverse-insights {
    background-color: #f8f9fa;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* Text fade-up animation - exact Cluely style */
@keyframes cluely-fade-up {
    0% {
        opacity: 0;
        transform: translateY(72px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.cluely-fade-up {
    opacity: 0;
    transform: translateY(72px);
    animation: cluely-fade-up 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-play-state: paused;
}

/* Floating icons - exact Cluely animation WITH ROTATION */
@keyframes cluely-icon-entrance-left {
    0% {
        opacity: 0;
        transform: translateX(-45px) translateY(70px) rotate(-3deg);
    }
    100% {
        opacity: 1;
        transform: translateX(-45px) translateY(-70px) rotate(-3deg);
    }
}

@keyframes cluely-icon-entrance-right {
    0% {
        opacity: 0;
        transform: translateX(45px) translateY(70px) rotate(3deg);
    }
    100% {
        opacity: 1;
        transform: translateX(45px) translateY(-70px) rotate(3deg);
    }
}

/* Continuous floating animation after entrance WITH ROTATION */
@keyframes cluely-float-gentle-left {
    0%, 100% {
        transform: translateX(-45px) translateY(-70px) rotate(-3deg);
    }
    50% {
        transform: translateX(-45px) translateY(-82px) rotate(-3deg);
    }
}

@keyframes cluely-float-gentle-right {
    0%, 100% {
        transform: translateX(45px) translateY(-70px) rotate(3deg);
    }
    50% {
        transform: translateX(45px) translateY(-82px) rotate(3deg);
    }
}

/* Base floating icon styles */
.cluely-floating-icon {
    position: absolute;
    opacity: 0;
    z-index: 10;
    animation-play-state: paused;
}

.cluely-floating-icon img {
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.12));
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 16px;
}

.cluely-floating-icon:hover img {
    transform: scale(1.1);
    filter: drop-shadow(0 12px 32px rgba(0,0,0,0.18));
}

/* Left side icons (1, 4) WITH ROTATION */
.cluely-icon-1, .cluely-icon-4, .cluely-icon-6, .cluely-icon-7 {
    transform: translateX(-45px) translateY(70px) rotate(-3deg);
    animation: cluely-icon-entrance-left 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.cluely-icon-1 {
    animation-delay: 1.1s;
}

.cluely-icon-4 {
    animation-delay: 1.4s;
}
.cluely-icon-6 {
    animation-delay: 0.9s;
}
.cluely-icon-7 {
    animation-delay: 1.6s;
}
/* Right side icons (2, 3, 5) WITH ROTATION */
.cluely-icon-2, .cluely-icon-3, .cluely-icon-5, .cluely-icon-8 {
    transform: translateX(45px) translateY(70px) rotate(3deg);
    animation: cluely-icon-entrance-right 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.cluely-icon-2 {
    animation-delay: 1.1s;
}

.cluely-icon-3 {
    animation-delay: 1.3s;
}

.cluely-icon-5 {
    animation-delay: 1.5s;
}
.cluely-icon-5 {
    animation-delay: 0.9s;
}
/* Apply continuous floating after entrance WITH ROTATION */
.cluely-icon-1 img, .cluely-icon-4 img {
    animation: cluely-float-gentle-left 4s ease-in-out infinite;
    animation-delay: 2.6s;
    animation-play-state: paused;
}

.cluely-icon-2 img, .cluely-icon-3 img, .cluely-icon-5 img {
    animation: cluely-float-gentle-right 4s ease-in-out infinite;
    animation-delay: 2.8s;
    animation-play-state: paused;
}

/* Pulse Animation for Alert */
@keyframes subverse-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.05);
    }
}

.subverse-pulse {
    animation: subverse-pulse 2.5s ease-in-out infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .subverse-text-line {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.1rem !important;
    }
    
    .subverse-text-item {
        font-size: clamp(2rem, 9vw, 4rem) !important;
        margin-right: 0 !important;
    }
    
    .cluely-floating-icon {
        display: none !important;
    }
    
    #subverse-insights {
        min-height: auto !important;
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

@media (max-width: 576px) {
    .subverse-text-item {
        font-size: clamp(1.8rem, 11vw, 3.5rem) !important;
    }
}

/* Ensure proper spacing */
.py-6 {
    padding-top: 6rem !important; 
    padding-bottom: 6rem !important;
}

/* Custom badge styles */
.badge {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
}

/* Success subtle background for Bootstrap compatibility */
.bg-success-subtle {
    background-color: rgba(25, 135, 84, 0.1) !important;
}

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

.text-warning-emphasis {
    color: #664d03 !important;
}

/* Animation trigger class */
#subverse-insights.animate .cluely-fade-up,
#subverse-insights.animate .cluely-floating-icon,
#subverse-insights.animate .cluely-floating-icon img {
    animation-play-state: running !important;
}


        /* Premium Cluely-inspired animations */
        @keyframes settingsRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes slideInFromBottom {
            0% {
                opacity: 0;
                transform: translateY(30px) scale(0.95);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        @keyframes fadeInScale {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        @keyframes pulseGlow {
            0%, 100%   { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.4); }
            50%  { box-shadow: 0 0 0 8px rgba(25, 135, 84, 0); }
        }
        
        @keyframes typewriter {
            from { width: 0; }
            to { width: 100%; }
        }
        
        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }
        
        /* Settings icon rotation */
        .settings-icon {
            transition: transform 0.3s ease;
        }
        
        .settings-icon.rotating {
            animation: settingsRotate 2s ease-in-out;
        }
        
        /* Data source items */
        .data-source-item {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .data-source-item.animate-in {
            animation: slideInFromBottom 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }
        
        /* Status indicators */
        .status-dot {
            animation: pulseGlow 2s infinite;
        }
        
        /* Command terminal animation */
        .terminal-command {
            overflow: hidden;
            white-space: nowrap;
        }
        
        .terminal-command.typing {
            animation: typewriter 2s steps(40, end);
        }
        
        .terminal-cursor {
            animation: blink 1s infinite;
        }
        
        .terminal-response {
            opacity: 0;
            transform: translateY(10px);
        }
        
        .terminal-response.show {
            animation: fadeInScale 0.8s ease forwards;
        }
        
        /* Premium styling */
        .settings-panel {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 1px solid rgba(0,0,0,0.08);
            box-shadow: 0 8px 32px rgba(0,0,0,0.08);
            backdrop-filter: blur(10px);
        }
        
        .data-source-card {
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(0,0,0,0.05);
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            transition: all 0.3s ease;
        }
        
        .data-source-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        }
        
        .terminal-container {
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            border: 1px solid #404040;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .data-source-item {
                margin-bottom: 0.5rem;
            }
        }
 

/* Marketing Automation Section */
.marketing-automation {
    padding: 5rem 0;
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.automation-header {
    text-align: left;
    margin-bottom: 4rem;
    max-width: 800px;
}

.automation-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.automation-description {
    font-size: 1.2rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.automation-flow {
    display: flex;
    align-items: normal;
    justify-content: center;
    position: relative;
    padding: 2rem 0;
    gap: 3rem;
}

.flow-step {
    text-align: center;
    position: relative;
    z-index: 3;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 280px;
}

.flow-step:hover {
    opacity: 1;
}

.step-circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, 
        rgba(169, 37, 196, 0.3) 0%, 
        rgba(89, 36, 178, 0.3) 100%
    );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(89, 36, 178, 0.15);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.step-circle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    pointer-events: none;
}

/* Volle Farbausprägung bei Hover */
.flow-step:hover .step-circle {
    background: linear-gradient(135deg, #A925C4 0%, #5924B2 100%);
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(89, 36, 178, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

/* Icon-Anpassungen für bessere Sichtbarkeit */
.step-icon {
    width: 38px;
    height: 38px;
    fill: rgba(255, 255, 255, 0.8);
    z-index: 1;
    position: relative;
    transition: all 0.3s ease;
}

.flow-step:hover .step-icon {
    fill: white;
    transform: scale(1.1);
}

.step-content {
    max-width: 280px;
    text-align: center;
}

.step-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #A925C4;
    margin-bottom: 1rem;
    min-height: 1.6em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-kicker {
    font-size: 0.95rem;
    color: #666;
    font-weight: 600;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

.step-description {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
    margin-bottom: 1rem;
    text-align: left;
}

/* Chevron Arrows */
.chevron-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1rem;
    opacity: 0.6;
}

.chevron-arrow svg {
    width: 24px;
    height: 24px;
    fill: #A925C4;
    transition: all 0.3s ease;
}

.chevron-arrow:hover svg {
    transform: translateX(5px);
    opacity: 1;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .automation-flow {
        flex-wrap: wrap;
        justify-content: center;
        gap: 3rem 2rem;
    }
    
    .flow-step {
        flex: 0 0 calc(50% - 2rem);
        max-width: 350px;
    }
    
    .chevron-arrow {
        display: none;
    }
}

@media (max-width: 768px) {
    .automation-title {
        font-size: 2rem;
    }
    
    .automation-description {
        font-size: 1.1rem;
    }
    
    .automation-flow {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }
    
    .flow-step {
        flex: none;
        width: 100%;
        max-width: 400px;
    }
    
    .step-content {
        max-width: none;
    }
    
    .step-description {
        text-align: center;
    }
    
    .chevron-arrow {
        display: none;
    }
}

/* Intersection Observer Animation Trigger */
.marketing-automation.animate .automation-flow {
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered Animation for Steps */
.flow-step {
    animation: fadeInStep 0.8s ease-out both;
}

.flow-step:nth-child(1) { animation-delay: 0.1s; }
.flow-step:nth-child(2) { animation-delay: 0.2s; }
.flow-step:nth-child(3) { animation-delay: 0.3s; }
.flow-step:nth-child(4) { animation-delay: 0.4s; }
.flow-step:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInStep {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    to {
        opacity: 0.8;
        transform: translateY(0) scale(1);
    }
}


.marketing-automation {
    position: relative;
    background: #f8f9fa; /* Normaler heller Hintergrund */
}

/* Statischer Farbverlauf im Hintergrund */
.flow-gradient-bg {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(177deg, 
            white 0%, 
            white 20%, 
            rgba(255, 255, 255, 0.95) 25%, 
            rgba(255, 255, 255, 0.8) 30%, 
            rgba(255, 255, 255, 0.5) 38%, 
            rgba(255, 255, 255, 0.2) 42%, 
            transparent 48%, 
            transparent 100%
        ),
        linear-gradient(185deg, 
            transparent 0%, 
            transparent 52%, 
            rgba(255, 255, 255, 0.2) 58%, 
            rgba(255, 255, 255, 0.5) 62%, 
            rgba(255, 255, 255, 0.8) 70%, 
            rgba(255, 255, 255, 0.95) 75%, 
            white 80%, 
            white 100%
        ),
        linear-gradient(105deg, 
            rgba(255, 176, 0, 0.1) 0%,    /* Sanfter Start */
            rgba(255, 176, 0, 0.5) 5%,    /* Aufbau */
            #FFB000 15%,                  /* Volle Orange */
            #E91E63 50%,                  /* Pink in der Mitte */
            #8B45FF 85%,                  /* Volle Lila */
            rgba(139, 69, 255, 0.5) 95%,  /* Auslauf */
            rgba(139, 69, 255, 0.1) 100%  /* Sanftes Ende */
        );
    z-index: 1;
}

/* Content über dem Farbverlauf */
.marketing-automation .container {
    position: relative;
    z-index: 3;
}

.marketing-automation .spotlight {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.91;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.8);
    background-image:
        radial-gradient(
            circle 450px at var(--clientX, 50%) var(--clientY, 50%), 
            transparent 0%, 
            transparent 100px,
            rgba(255, 255, 255, 0.1) 150px,
            rgba(255, 255, 255, 0.3) 220px,
            rgba(255, 255, 255, 0.5) 280px,
            rgba(255, 255, 255, 0.7) 350px,
            rgba(255, 255, 255, 0.85) 400px,
            rgba(255, 255, 255, 0.9) 450px
        );
    transition: all 0.2s ease;
}


.list-connector {
    padding-left: 0;
    list-style: none;
    font-size: 0.9em;
    color: #6c757d;
}
.text-connector  {
    font-size: 0.9em !important;
    font-weight: 500;
}

.cluely-gif-visual {
    width: 100%;
    /* max-width: 600px; */
    FONT-WEIGHT: 600;
    border: 2px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}