/* ==========================================================================
   Antrophy – Startseite
   components.css · Komponenten- und Sektions-Styles
   Werte 1:1 aus der Webflow-Vorlage übernommen, Variablen bereinigt.
   ========================================================================== */

.flex-col {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.flex-row {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}

.container-large {
  width: 100%;
  max-width: 85rem;
  margin-left: auto;
  margin-right: auto;
}

.container-large.vertical-flex {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 90rem;
  display: flex;
}

.container-large.up-4rem {
  margin-top: 4rem;
}

.container-large.up-8rem {
  margin-top: 8rem;
}

.container-large._95 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 80rem;
  display: flex;
}

.h3-l {
  font-size: var(--h3-l);
}

.heading-3-s {
  font-size: var(--h3-s);
}

.text-align-center {
  text-align: center;
}

.text-size-s {
  font-size: var(--text-s);
}

.text-weight-600 {
  font-weight: var(--fw-600);
}

.page-padding {
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.page-padding.hero-custom {
  justify-content: space-between;
  align-items: center;
}

.page-padding.relative {
  z-index: 1;
  position: relative;
}

.eyebrow-text {
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: var(--fw-400);
  text-align: left;
  text-transform: uppercase;
}

.eyebrow-text.text-grey-bright {
  color: var(--text-grey-bright);
}

.eyebrow-text.gold {
  color: var(--brand-gold);
}

.headline-wrapper {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 70%;
  display: flex;
}

.headline-wrapper.centered {
  justify-content: flex-start;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.headline-wrapper.width-70 {
  width: 70%;
}

.headline-wrapper.width-100 {
  width: 100%;
}

.headline-wrapper.hero {
  grid-column-gap: 2.75rem;
  grid-row-gap: 2.75rem;
  width: 40%;
}

.headline-wrapper.gap-2rem {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
}

.section-hero-hp {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: relative;
}

.button-logo {
  width: 32px;
}

.primary-button {
  background-color: var(--brand-primary);
  border-radius: 1000px;
  justify-content: center;
  align-items: center;
  padding: .25rem .5rem .25rem .25rem;
  font-size: 16px;
  text-decoration: none;
  transition: all .2s;
  display: flex;
}

.button-icon-wrapper {
  background-color: #fff;
  border-radius: 1000px;
  justify-content: center;
  align-items: center;
  width: 55px;
  height: 55px;
  display: flex;
}

.button-text-wrapper {
  justify-content: center;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
}

.text-span-2 {
  color: var(--text-grey);
}

.avatars-wrapper {
  grid-column-gap: var(--gap-m);
  grid-row-gap: var(--gap-m);
  border: 1.5px solid var(--brand-primary);
  border-radius: 1000px;
  justify-content: flex-start;
  align-items: center;
  padding: 1.5rem 1.5rem 1.5rem 1rem;
  display: inline-flex;
}

.avatars-wrapper.white-stroke {
  border-color: var(--white);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
}

.avatars-wrapper.hero-avatars {
  margin-top: 4rem;
  padding-right: 2rem;
}

.avatars-wrapper-inner-small {
  grid-column-gap: var(--gap-xs);
  grid-row-gap: var(--gap-xs);
  display: flex;
}

.avatar-hero {
  width: 65px;
  height: 65px;
}

.vertical-line {
  background-color: var(--brand-primary);
  width: 1.5px;
  height: 65px;
}

.vertical-line.light-blue {
  background-color: var(--black);
  opacity: .3;
  background-image: none;
}

.vertical-line.white {
  background-color: var(--white);
}

.section-problem {
  background-color: var(--bg-secondary);
  padding-top: 0;
  padding-bottom: 9rem;
}

.text-centered {
  text-align: center;
}

.about-us-grid-wrapper {
  margin-top: 3rem;
  margin-left: auto;
  margin-right: auto;
}

.problem-grid {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 6rem;
  margin-bottom: 6rem;
  display: grid;
}

.outline-box {
  grid-column-gap: var(--gap-l);
  grid-row-gap: var(--gap-l);
  border: 1.5px solid var(--brand-primary);
  border-radius: var(--radius-m);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 2rem;
  display: flex;
}

.outline-box.dark {
  border-style: none;
  border-color: var(--neutral-dark);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #00000017;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}

.section-services {
  background-color: var(--white);
  padding-top: 7rem;
  padding-bottom: 0;
}

.section-automation {
  border-bottom-left-radius: var(--radius-full);
  border-bottom-right-radius: var(--radius-full);
  background-color: #1d2025;
  padding-bottom: 8rem;
  position: relative;
  overflow: hidden;
}

.text-color-white {
  color: var(--white);
}

.text-color-white.heading-3-s {
  line-height: 140%;
}

.text-color-white.z-index {
  z-index: 5;
  position: relative;
}

.v-flex {
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.v-flex.leistungen-card-inner {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  border-top: 1px solid var(--neutral-lighter);
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 2.5rem;
}

.v-flex.quote-client {
  grid-column-gap: var(--gap-xs);
  grid-row-gap: var(--gap-xs);
}

.v-flex.cta-avatar {
  grid-column-gap: var(--gap-xs);
  grid-row-gap: var(--gap-xs);
  justify-content: flex-start;
  align-items: center;
}

.v-flex.faq-header {
  grid-column-gap: var(--gap-xs);
  grid-row-gap: var(--gap-xs);
  justify-content: space-between;
  align-items: flex-start;
}

.v-flex.headline-wrapper-inner {
  grid-column-gap: var(--gap-l);
  grid-row-gap: var(--gap-l);
}

.v-flex.vertrauen-aufbauen {
  justify-content: flex-start;
  align-items: center;
}

.v-flex.faq-headline {
  grid-column-gap: var(--gap-xs);
  grid-row-gap: var(--gap-xs);
}

.v-flex.accordions-wrapper {
  justify-content: space-between;
  align-items: flex-start;
}

.text-color-grey-bright {
  color: var(--text-grey-bright);
}

.avatars-wrapper-inner-left {
  grid-column-gap: var(--gap-m);
  grid-row-gap: var(--gap-m);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.section-leistungen {
  background-color: var(--bg-secondary);
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.leistungen-cards-wrapper {
  grid-column-gap: var(--gap-xl);
  grid-row-gap: var(--gap-xl);
  flex-flow: column;
  width: 100%;
  max-width: 100%;
  margin-top: 6rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.leistungen-card {
  border-radius: var(--radius-m);
  background-color: var(--white);
  width: 100%;
  display: flex;
}

.leistungen-card-left {
  grid-column-gap: var(--gap-xxl);
  grid-row-gap: var(--gap-xxl);
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 65%;
  padding: 3.5rem;
  display: flex;
}

.horizontal-line {
  background-color: var(--neutral-lightest);
  width: 100%;
  height: 1px;
  min-height: 1px;
  max-height: 1px;
}

.horizontal-line._50--wide, .horizontal-line.hero-section {
  display: none;
}

.horizontal-flex {
  grid-column-gap: var(--gap-m);
  grid-row-gap: var(--gap-m);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.horizontal-flex.tags-wrapper {
  grid-column-gap: var(--gap-xs);
  grid-row-gap: var(--gap-xs);
  flex-flow: wrap;
}

.horizontal-flex.logos-wrapper {
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
}

.horizontal-flex.quote-avatar {
  width: 100%;
}

.horizontal-flex.tags-wrapper-vertrauen {
  grid-column-gap: var(--gap-xl);
  grid-row-gap: var(--gap-xl);
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 3rem;
}

.horizontal-flex.sales-process {
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
}

.tag-bubble {
  border: 1px solid var(--brand-primary);
  line-height: var(--lh-100);
  border-radius: 1000px;
  justify-content: center;
  align-items: center;
  padding: .7rem 1.4rem;
  display: flex;
}

.tag-bubble.inner-1rem {
  padding-left: 1rem;
  padding-right: 1rem;
}

.tag-bubble.big {
  padding: .75rem 2.1rem;
}

.tag-bubble.big.same-size {
  width: 180px;
  padding-left: .5rem;
  padding-right: .5rem;
}

.tag-text {
  font-family: var(--font-primary);
  font-size: var(--text-m);
}

.tools-logo {
  object-fit: contain;
  width: auto;
  height: 22px;
}

.tools-logo.smaller {
  height: 20px;
}

.leistungen-right {
  width: 35%;
  position: relative;
}

.case-study-grid {
  z-index: 1;
  box-sizing: border-box;
  grid-column-gap: 6rem;
  grid-row-gap: 2rem;
  object-fit: fill;
  flex: 1;
  grid-template-rows: 100%;
  grid-template-columns: .7fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  align-content: space-between;
  place-items: center stretch;
  width: 100%;
  height: 100%;
  display: grid;
  position: relative;
}

.case-study-tags-wrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: wrap;
  margin-top: 1rem;
  display: flex;
}

.case-study-gradient {
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
}

.flex-vertical-left-top-3 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 0;
  display: flex;
}

.section-portfolio {
  border-radius: var(--radius-full);
  background-color: #1d2025;
  padding: 8rem 0;
}

.case-studies-wrapper {
  grid-column-gap: var(--gap-xl);
  grid-row-gap: var(--gap-xl);
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  padding-top: 10rem;
  padding-bottom: 10rem;
  display: flex;
  position: relative;
}

.case-study-mockup {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.tag-case-study-wrapper {
  border: 1px solid #fff;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  padding: .4rem 1.75rem;
  display: flex;
}

.case-study-image-mobile {
  width: 100%;
  height: 100%;
  display: none;
}

.case-study-image-mobile.tablet-on {
  display: none;
}

.tag-case-study {
  color: #fff;
  font-size: var(--text-s);
}

.section-cta {
  background-color: var(--bg-secondary);
  padding-top: 5rem;
  padding-bottom: 8rem;
}

.cta-wrapper {
  border-radius: var(--radius-m);
  background-image: url('../images/cta.avif');
  background-position: 50%;
  background-size: cover;
  padding: 4.5rem 2.5rem;
}

.section-who-we-are {
  background-color: var(--bg-secondary);
  padding-top: 8rem;
  padding-bottom: 5rem;
}

.who-we-are-grid {
  grid-column-gap: 8rem;
  grid-row-gap: 8rem;
  grid-template-rows: auto;
  grid-template-columns: 1.25fr 1fr;
  grid-auto-columns: 1fr;
  align-content: end;
  width: 100%;
  display: grid;
}

.text-span-3 {
  color: var(--text-grey);
}

.who-we-are-img-wrapper {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  display: flex;
}

.who-we-are-img-wrapper.mobile-only {
  display: none;
}

.who-we-are-img {
  border-radius: var(--radius-l);
  vertical-align: baseline;
  object-fit: cover;
  min-width: 100%;
}

.who-we-are-cards-wrapper {
  grid-column-gap: var(--gap-l);
  grid-row-gap: var(--gap-l);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 6rem;
  display: grid;
}

.who-we-are-card {
  grid-column-gap: var(--gap-m);
  grid-row-gap: var(--gap-m);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-m);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 2rem;
  display: flex;
}

.quote-link-wrapper {
  z-index: 2;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  width: 100%;
  font-size: var(--text-s);
  grid-template-rows: auto;
  grid-template-columns: .75fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-end;
  display: grid;
  position: relative;
}

.quote-box {
  grid-column-gap: var(--gap-m);
  grid-row-gap: var(--gap-m);
  border-radius: var(--radius-m);
  background-color: #fff3;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 2rem;
  display: flex;
}

.avatar-img {
  width: 65px;
  min-width: 65px;
  height: 65px;
  min-height: 65px;
}

.text-client-name {
  color: var(--text-grey);
  font-size: var(--text-s);
  font-weight: var(--fw-600);
}

.text-client-role {
  color: var(--text-grey);
  font-size: var(--text-s);
  font-weight: var(--fw-300);
}

.case-study-link {
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: inline-flex;
}

.case-study-link-text {
  color: var(--text-grey);
  text-decoration: none;
}

.btn-arrow {
  object-fit: contain;
  width: 14px;
  height: 14px;
}

.btn-arrow.crm-arrow-mobile {
  display: none;
}

.btn-arrow.left {
  opacity: 0;
  position: absolute;
  left: 0%;
}

.cta-1-wrapper {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 12rem;
  display: flex;
}

.facts-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border: 1px solid var(--brand-primary);
  border-radius: 10000px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 80%;
  margin-top: 3rem;
  padding: 4.5rem 2.5rem;
  display: grid;
  position: relative;
}

.facts-inner-w {
  grid-column-gap: var(--gap-xs);
  grid-row-gap: var(--gap-xs);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.ai-automation-wrapper {
  z-index: 1;
  grid-column-gap: var(--gap-xxl);
  grid-row-gap: var(--gap-xxl);
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1.25fr 1fr;
  grid-auto-columns: 1fr;
  align-content: center;
  padding-top: 7rem;
  padding-bottom: 7rem;
  display: flex;
  position: relative;
}

.ai-automation-img-wrapper {
  width: 45%;
  height: 500px;
  display: flex;
}

.ai-automation-img {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  object-fit: cover;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  height: 100%;
}

.accordion-body__contents {
  opacity: 1;
  margin-top: 12px;
}

.accordion-body__contents.more-top-padding {
  color: #666;
  margin-top: 24px;
}

.accordion-header.mobile-flex-h.js-accordion-header {
  cursor: pointer;
  cursor: pointer;
  cursor: pointer;
  justify-content: space-between;
  align-items: flex-start;
}

.about-accordions-wrapper {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: column;
  width: 100%;
  margin-top: 3rem;
  display: flex;
}

.faq-question-text {
  flex: 1;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 26px;
  font-weight: 600;
}

.accordion__item.js-accordion-item {
  background-color: #fff0;
  border-bottom-color: #eee;
  border-left: 1.5px #000;
  padding: 2.5rem 0 1.5rem .5rem;
}

.services-flow-wrapper {
  z-index: 1;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 7rem;
  padding-bottom: 7rem;
  display: flex;
  position: relative;
}

.big-number {
  font-family: var(--font-primary);
  color: #b2b2b2;
  letter-spacing: 1px;
  font-size: 28px;
  font-weight: 200;
}

.sales-process-bg {
  z-index: -1;
  opacity: .3;
  object-fit: fill;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.crm-cricle-wrapper {
  justify-content: center;
  align-items: center;
  width: 650px;
  height: 650px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  position: relative;
}

.crm-cricle {
  z-index: 20;
  grid-column-gap: var(--gap-m);
  grid-row-gap: var(--gap-m);
  border-radius: 10000px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 550px;
  height: 550px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.crm-circle-abs-s {
  z-index: 1;
  border: 1px solid #959595;
  border-radius: 1000px;
  width: 600px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: auto 0%;
}

.crm-circle-abs-m {
  background-color: var(--white);
  border: 1px solid #c3c3c3;
  border-radius: 1000px;
  width: 650px;
  height: 650px;
  position: absolute;
  inset: auto;
}

.secondary-button {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: inline-flex;
  position: relative;
}

.footer {
  aspect-ratio: auto;
  background-color: var(--bg-alt);
  border-top-left-radius: 150px;
  border-top-right-radius: 150px;
  padding-top: 5rem;
  padding-bottom: 5rem;
  position: relative;
  overflow: hidden;
}

.footer-gradient {
  z-index: -1;
  width: 65%;
  display: inline-block;
  position: absolute;
  inset: auto 0% -165%;
}

.footer-grid {
  grid-column-gap: var(--gap-l);
  grid-row-gap: var(--gap-l);
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.footer-links-grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.footer-links-inner {
  grid-column-gap: var(--gap-m);
  grid-row-gap: var(--gap-m);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.footer-link {
  font-family: var(--font-secondary);
  color: var(--bg-grey);
  font-size: var(--text-m);
  text-decoration: none;
}

.hero-main-wrapper {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.hero-logo-inner-circle {
  z-index: 1;
  border: 1px solid var(--neutral-light);
  border-radius: 1000px;
  justify-content: center;
  align-items: center;
  width: 275px;
  height: 275px;
  display: block;
  position: relative;
}

.hero-logo-box {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  border-radius: var(--radius-s);
  background-color: #eee;
  background-image: linear-gradient(#edf0f9, #ececed);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  display: flex;
  position: relative;
  box-shadow: 4px 5px 5px #0000001a;
}

.logo-hero {
  object-fit: contain;
  max-width: 32px;
  height: 25px;
}

.code-embed {
  display: none;
}

.hero-logo-box-middle {
  grid-column-gap: var(--gap-xs);
  grid-row-gap: var(--gap-xs);
  border-radius: var(--radius-s);
  background-color: #eee;
  background-image: linear-gradient(#edf0f9, #ececed);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 4px 5px 5px #0000001a;
}

.navbar-wrapper {
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 100%;
  display: flex;
}

.nav-link {
  color: #fff;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 44px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s;
}

.nav-link:hover {
  color: var(--brand-gold);
}

.nav-link.hide {
  display: none;
}

.navbar-bg {
  z-index: -1;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #00000073;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  inset: 0%;
}

.hamburger-icon-wrapper {
  z-index: 1001;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 17px;
  display: flex;
  position: relative;
}

.navbar-logo-wrapper {
  z-index: 40;
  width: 220px;
  display: inline-block;
}

.hamburger-middle-line-desktop {
  background-color: #000;
  border-radius: 2px;
  width: 2.5rem;
  height: 2px;
  display: none;
}

.navbar-logo {
  width: auto;
  max-width: 100%;
}

.hamburger-top-line {
  background-color: #000;
  border-radius: 2px;
  width: 2.5rem;
  height: 2px;
}

.mobile-menu--2 {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.hamburger-nav-menu {
  z-index: 90;
  background-image: linear-gradient(to bottom, var(--brand-primary), var(--brand-primary));
  width: 55%;
  height: 100%;
  min-height: 100vh;
  padding: 6rem 2rem 2rem 4rem;
  display: none;
  position: fixed;
  inset: 0% 0% 0% auto;
  overflow: hidden;
  box-shadow: -40px 30px 30px #0000001a;
}

.navbar-cstm {
  z-index: 1000;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 6rem;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.mobile-menu {
  border: 2px #000;
  justify-content: center;
  align-items: center;
  display: flex;
}

.social-media-icons-flex {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: center;
  align-items: flex-end;
  padding: 0;
  display: flex;
}

.hamburger-bottom-line {
  background-color: #000;
  border-radius: 2px;
  width: 2.525rem;
  height: 2px;
}

.navbar-links-wrapper {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  color: #000;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.hero-logo-outer-circle {
  z-index: 0;
  background-image: url('../images/outer-circle-hero.svg');
  background-position: 50%;
  background-size: cover;
  justify-content: center;
  align-items: center;
  width: 560px;
  height: 560px;
  position: relative;
  inset: auto;
}

.hero-outter-circle-img {
  width: 100%;
  height: 100%;
  display: none;
}

.hero-logo-box-sm {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  width: 60px;
  height: 60px;
  box-shadow: none;
  background-color: #eee;
  background-image: linear-gradient(#edf0f9, #ececed);
  border-radius: 10px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  inset: 0% auto auto 0%;
}

.logo-hero-sm {
  object-fit: contain;
  max-width: 28px;
  height: 24px;
}

.hero-tools-names {
  color: var(--brand-primary);
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
  font-size: 10px;
  line-height: 100%;
}

.navbar-opened-gradient {
  position: absolute;
  inset: auto -24% -30% auto;
}

.button-icon-wrapper-dark {
  background-color: var(--brand-primary);
  border-radius: 1000px;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  display: flex;
}

.tools-logos-wrapper {
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.tools-logos-wrapper.tags-wrapper {
  grid-column-gap: var(--gap-xs);
  grid-row-gap: var(--gap-xs);
}

.tools-logos-wrapper.logos-wrapper {
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
}

.tools-logos-wrapper.quote-avatar {
  width: 100%;
}

.tools-logos-wrapper.tags-wrapper-vertrauen {
  grid-column-gap: var(--gap-xl);
  grid-row-gap: var(--gap-xl);
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 3rem;
}

.tools-logos-wrapper.sales-process {
  grid-column-gap: var(--gap-m);
  grid-row-gap: var(--gap-m);
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
}

.services-tags-wrapper {
  grid-column-gap: var(--gap-xs);
  grid-row-gap: var(--gap-xs);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.services-tags-wrapper.tags-wrapper {
  grid-column-gap: var(--gap-xs);
  grid-row-gap: var(--gap-xs);
  flex-flow: wrap;
}

.services-tags-wrapper.logos-wrapper {
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
}

.services-tags-wrapper.quote-avatar {
  width: 100%;
}

.services-tags-wrapper.tags-wrapper-vertrauen {
  grid-column-gap: var(--gap-xl);
  grid-row-gap: var(--gap-xl);
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 3rem;
}

.services-tags-wrapper.sales-process {
  grid-column-gap: var(--gap-m);
  grid-row-gap: var(--gap-m);
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
}

.leistungen-gradient-img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.ai-animation-wrapper {
  position: static;
  inset: 0% 10% 0% auto;
}

.ai-animation-code {
  display: block;
}

.hero-animation-wrapper {
  justify-content: center;
  align-items: center;
  width: 560px;
  height: 560px;
  display: flex;
  position: relative;
}

.hero-inner-circle-wrapper, .hero-outer-circle-wrapper {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.headline-wrapper-process {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.headline-wrapper-process.centered {
  justify-content: flex-start;
  align-items: center;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.headline-wrapper-process.width-70 {
  width: 70%;
}

.headline-wrapper-process.width-100 {
  grid-column-gap: var(--gap-l);
  grid-row-gap: var(--gap-l);
  width: 100%;
}

.headline-wrapper-process.hero {
  grid-column-gap: 2.75rem;
  grid-row-gap: 2.75rem;
  width: 40%;
}

.tag-bubble-wrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  margin-top: 2rem;
}

.tag-wrapper-vertrauen {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  margin-top: 2rem;
}

.arrow-flex {
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
  justify-content: flex-start;
  align-items: center;
}

.box-arrow {
  object-fit: contain;
  width: 14px;
  height: 14px;
}

.box-arrow.crm-arrow-mobile {
  display: none;
}

.box-arrow.left {
  opacity: 0;
  position: absolute;
  left: 0%;
}

.service-process-wrapper {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 4rem;
  position: relative;
}

.vertrauen-flex {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-start;
  align-items: center;
}

.bubble-process {
  border: 1px solid var(--brand-primary);
  width: 180px;
  line-height: var(--lh-100);
  border-radius: 1000px;
  justify-content: center;
  align-items: center;
  padding: .7rem .5rem;
  display: flex;
}

.bubble-process.inner-1rem {
  padding-left: 1rem;
  padding-right: 1rem;
}

.bubble-process.big {
  padding: .75rem 2.1rem;
}

.bubble-process.big.same-size {
  width: 180px;
  padding-left: .5rem;
  padding-right: .5rem;
}

.process-headings {
  font-size: 46px;
  font-weight: var(--fw-500);
}

.triangle-dot-line {
  opacity: .3;
  object-fit: fill;
  height: 100px;
}

.dot-line-overflow {
  height: 100%;
  overflow: hidden;
}

.dot-line-height {
  height: 100px;
}

.connect-line-height {
  background-color: var(--neutral-lighter);
  width: 1.5px;
  height: 75px;
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.arrow-overflow {
  height: 100%;
  overflow: hidden;
}

.arrow-height {
  height: 80px;
}

.arrow-line {
  opacity: .3;
  height: 80px;
}

.result-wrapper {
  z-index: 2;
  width: 100%;
  max-width: 90rem;
  margin-top: 9rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.result-wrapper.vertical-flex {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 90rem;
  display: flex;
}

.result-wrapper.up-4rem {
  margin-top: 4rem;
}

.result-wrapper.up-8rem {
  margin-top: 8rem;
}

.result-wrapper._95 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 80rem;
  display: flex;
}

.ai-anim-text {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.headline-wrapper-in-box {
  grid-column-gap: 1.75rem;
  grid-row-gap: 1.75rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 75%;
  display: flex;
}

.headline-wrapper-in-box.centered {
  justify-content: flex-start;
  align-items: center;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.headline-wrapper-in-box.width-70 {
  width: 70%;
}

.headline-wrapper-in-box.width-100 {
  width: 100%;
}

.headline-wrapper-in-box.hero {
  grid-column-gap: 2.75rem;
  grid-row-gap: 2.75rem;
  width: 40%;
}

.headline-wrapper-in-box.gap-2rem {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
}

.contrast-dot {
  background-image: linear-gradient(270deg, #0000, var(--brand-gold) 79%, #fff0);
  border-radius: 100px;
  width: 120px;
  height: 1px;
  display: none;
}

.contrast-dot._2 {
  background-image: linear-gradient(270deg, #0000, var(--brand-gold) 54%, #fff0);
}

.contrast-dot._3 {
  background-image: linear-gradient(270deg, #0000, var(--brand-gold) 27%, #fff0);
}

.founders-names {
  font-size: var(--text-s);
}

.problem-grid-top {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 5rem;
  display: grid;
}

.h3-xl {
  font-size: var(--h3-xl);
  line-height: var(--lh-s);
}

.gap-1-5rem {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
}

.crm-animation {
  background-color: var(--white);
  padding-top: 2rem;
  position: sticky;
}

.scroll-track {
  height: 200vh;
}

.crm-box.dark {
  border-style: none;
  border-color: var(--neutral-dark);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #00000017;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}

.crm-cricle-bg {
  z-index: 18;
  background-color: #1d2025;
  border-radius: 10000px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 550px;
  height: 550px;
  position: absolute;
  overflow: hidden;
}

.crm-anim-box {
  z-index: 30;
  grid-column-gap: var(--gap-l);
  grid-row-gap: var(--gap-l);
  border-radius: var(--radius-m);
  background-color: #1d2025;
  background-image: radial-gradient(circle farthest-corner at 0% 100%, #9fafcd33, var(--bg-primary));
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 30%;
  padding: 0 0 3rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.crm-anim-box.dark {
  border-style: none;
  border-color: var(--neutral-dark);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #00000017;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}

.crm-anim-box.left {
  top: -150px;
}

.crm-anim-box.middle {
  background-image: radial-gradient(circle farthest-corner at 0% 100%, #9fafcd33, var(--bg-primary));
}

.crm-anim-box.right {
  top: -150px;
}

.crm-boxes-flex {
  justify-content: space-between;
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: -100px;
}

.animation-content {
  width: 100%;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.crm-bg-img {
  z-index: 2;
  width: 550px;
  height: 550px;
  position: absolute;
  inset: 0%;
}

.crm-box-text {
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
  padding-left: 2rem;
  padding-right: 2.5rem;
}

.js-accordion-header {
  justify-content: space-between;
  width: 100%;
  display: flex;
}

.js-accordion-item {
  border-bottom: 1px solid var(--neutral-light);
  width: 100%;
  padding-bottom: 1.5rem;
}

.js-accordion-icon-plus {
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  margin-top: 8px;
  display: flex;
  position: relative;
}

.js-icon-line-vertical {
  background-color: var(--brand-primary);
  width: 1.5px;
  height: 100%;
  position: absolute;
}

.js-icon-line-horizontal {
  background-color: var(--brand-primary);
  width: 100%;
  height: 1.5px;
  position: absolute;
}

.case-study-card-bg-1 {
  z-index: 0;
  background-image: radial-gradient(circle, #f0b60c4d, #0000 69%);
  border-radius: 15px;
  width: 900px;
  height: 900px;
  position: absolute;
  inset: 5% auto auto 5%;
}

.case-study-card-bg-2 {
  z-index: 0;
  background-image: radial-gradient(circle, #b1fbff4d, #0000 69%);
  border-radius: 15px;
  width: 900px;
  height: 900px;
  position: absolute;
  inset: auto -5% -5% auto;
}

.anim-text-fadein {
  color: var(--white);
}

.crm-lottie-animation {
  min-width: 100%;
}

.text-color-blue {
  color: #9fafcd;
}

.case-study-image-wrapper-desktop {
  width: 100%;
  height: 100%;
}

.case-study-image-wrapper-desktop.tablet-on {
  display: none;
}

.footer-headings {
  color: var(--white);
}

.footer-headings.heading-3-s {
  line-height: 140%;
}

.footer-headings.z-index {
  z-index: 5;
  position: relative;
}

.hero-tablet {
  display: none;
}
/* ==========================================================================
   CRM-Szene – gepinnte Scroll-Animation (Rebuild der Webflow-Hauptanimation)
   Ablauf beim Scrollen: der dunkle Kreis wächst, bis er den weißen Hintergrund
   füllt (Ringe faden weg) → danach erscheinen die drei Kacheln versetzt.
   Gesteuert von js/crm-scene.js. Ohne JS / bei reduzierter Bewegung bleibt
   die Sektion ein statisches, lesbares Layout.
   ========================================================================== */
.crm-animation {
  position: relative;
  background-color: var(--white);
  padding: 0;
}

.scroll-track {
  position: relative;
  height: auto;
}

.animation-content {
  position: static;
  overflow: hidden;
}

/* Versatz der Kacheln (links/rechts höher, Mitte tiefer) – wie im Original */
.crm-anim-box.left,
.crm-anim-box.right {
  top: -150px;
}

.crm-boxes-flex {
  top: 0;
  margin-top: 3rem;
}

/* ---- Aktive Szene: nur mit JS und erlaubter Bewegung -------------------- */
.js-anim .scroll-track {
  height: 220vh;
}
.js-anim .animation-content {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.js-anim .crm-cricle-wrapper {
  flex: none;
  margin-top: 7vh;
}
.js-anim .crm-cricle-bg {
  will-change: transform;
}
.js-anim .crm-boxes-flex {
  position: absolute;
  left: 50%;
  bottom: 5vh;
  transform: translateX(-50%);
  width: 100%;
  max-width: 90rem;
  margin: 0;
  padding: 0 1.5rem;
}
.js-anim .crm-anim-box {
  opacity: 0;
  will-change: transform, opacity;
}

/* ==========================================================================
   Accordion ("Wer wir sind") – ersetzt die jQuery-Variante aus dem Export
   ========================================================================== */
.js-accordion-header {
  cursor: pointer;
  align-items: flex-start;
}

.js-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.js-icon-line-vertical {
  transition: height 0.3s ease;
}

.js-accordion-item.active .js-icon-line-vertical {
  height: 0;
}

/* ==========================================================================
   Hamburger-Menü – Zustände (ersetzt die Inline-Styles aus dem Export)
   ========================================================================== */
.hamburger-icon-wrapper {
  width: 2.5rem;
  cursor: pointer;
}

.hamburger-top-line,
.hamburger-bottom-line {
  transition: transform 0.2s ease, background-color 0.2s ease;
  transform-origin: center;
}

.hamburger-icon-wrapper.active .hamburger-top-line {
  transform: translateY(7px) rotate(45deg);
  background-color: var(--white);
}

.hamburger-icon-wrapper.active .hamburger-bottom-line {
  transform: translateY(-8px) rotate(-45deg);
  background-color: var(--white);
}

.hamburger-nav-menu {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.hamburger-nav-menu.active {
  display: block;
  opacity: 1;
}

/* ==========================================================================
   Button-Varianten – lesbare Modifier statt Webflow "w-variant-*"
   ========================================================================== */
.primary-button.white-bg {
  background-color: var(--white);
}

.primary-button.white-bg .button-text-wrapper p {
  color: var(--brand-primary);
}

.primary-button.absolute {
  display: inline-flex;
  position: absolute;
  inset: 0% auto auto 50%;
  transform: translate(-50%, -32px);
}

/* ==========================================================================
   "AI & Automation"-Trennlinie (war im Export ein Inline-Embed)
   ========================================================================== */
.custom-ai-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 500px;
}

.custom-ai-line {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #f1a58e 20%,
    #f1a58e 80%,
    transparent 100%
  );
  animation: growLine 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.custom-ai-text {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 1.75rem;
  font-weight: 200;
  letter-spacing: 0.02em;
  line-height: 30px;
  padding: 32px 16px;
  background-color: #1b1b1b;
}

@keyframes growLine {
  0%   { clip-path: inset(0% 0% 100% 0%); opacity: 0; }
  5%   { opacity: 1; }
  75%  { clip-path: inset(0% 0% 0% 0%); opacity: 1; }
  88%  { clip-path: inset(0% 0% 0% 0%); opacity: 1; }
  97%  { clip-path: inset(0% 0% 0% 0%); opacity: 0; }
  99%  { clip-path: inset(0% 0% 100% 0%); opacity: 0; }
  100% { clip-path: inset(0% 0% 100% 0%); opacity: 0; }
}

/* ==========================================================================
   Animationen – Rebuild der Webflow-IX2-Interaktionen (ohne GSAP)
   Aktiv nur, wenn JS läuft und der Nutzer keine reduzierte Bewegung wünscht
   (Klasse .js-anim wird im <head> gesetzt → kein Flash unanimierter Inhalte).
   ========================================================================== */

/* --- Scroll-Reveal: Inhalte faden + gleiten herein ----------------------- */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.js-anim .reveal.in-view {
  opacity: 1;
  transform: none;
}

/* --- Scroll-Scrub: Prozess-Sequenz (Punktlinie → 01 → Linie → 02 → 03 → Pfeil)
   Startzustände; die Werte treibt js/scroll-scene.js live per Scrollposition.
   Bewusst ohne transition – die Bewegung hängt am Scrollen, nicht an der Zeit. */
.js-anim .service-process-wrapper .big-number {
  opacity: 0;
}
.js-anim .service-process-wrapper .triangle-dot-line,
.js-anim .service-process-wrapper .connect-line-height,
.js-anim .service-process-wrapper .arrow-line {
  transform: scaleY(0);
  transform-origin: top center;
}

/* --- Hover-Microinteractions (Pfeil-Nudge, Button-Lift) ------------------ */
.box-arrow,
.btn-arrow {
  transition: transform 0.2s ease;
}
.outline-box:hover .box-arrow {
  transform: translateX(8px);
}
.secondary-button:hover .btn-arrow.right {
  transform: translateX(8px);
}
.case-study-link:hover .btn-arrow {
  transform: translate(4px, -4px);
}
.primary-button:not(.absolute) {
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.primary-button:not(.absolute):hover {
  transform: translateY(-2px);
}
.footer-link {
  transition: color 0.2s ease;
}
.footer-link:hover {
  color: var(--white);
}