/* 
Theme Name: Schwarz+Matt Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Schwarz+Matt Child is a child theme of Hello Elementor, created by the Elementor team and modified by Schwart+Matt.
Author: Schwarz+Matt Team
Author URI: https://www.schwarz-matt.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: schwarz+matt-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}

.elementor-widget-text-editor h2, .elementor-widget-text-editor h3 {
    color: var(--color-midnight);
    font-size: var(--text-24);
    line-height: var(--lh-150);
    font-weight: 600;
    padding-top: var(--space-16);
}

.elementor-icon-wrapper {
  line-height: 0;
}

.slider-visible .slick-list {
  overflow: visible;
}

.jet-tabs-icon svg path {
    fill: currentColor;
}

.aspect-1-1 img {
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.aspect-16-9 img {
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.full-height.elementor-widget-image {
  height: auto;
}

.full-img-height .elementor-widget.elementor-widget-image {
  height: 100%;
}

/* Elementor Texteditor – letzten Absatz unten bündig machen */
.elementor-widget-text-editor .elementor-widget-container > *:last-child{
  margin-bottom: 0 !important;
}

/* Sicherheit: falls nur p verwendet wird */
.elementor-widget-text-editor .elementor-widget-container p:last-child{
  margin-bottom: 0 !important;
}

.erfolg-slider.elementor-widget-n-carousel .swiper-pagination-bullet {
    height: 2px;
    width: 48px;
    border-radius: 0;
}

.uppercase {
    text-transform: uppercase;
}

/* typography
----------------------------------------*/
:root{
  --font-primary: "HubotSans", sans-serif;
}

/* wrapper
----------------------------------------*/

:root{
  --space-wrapper: clamp(1.5rem, 0.3rem + 6vw, 7.5rem);
}

.wrapper{
  padding-inline: var(--space-wrapper);
}


/* font-sizes
----------------------------------------*/
:root {
    --text-12: clamp(0.625rem, 0.6rem + 0.125vw, 0.75rem);
    --text-14: clamp(0.75rem, 0.725rem + 0.125vw, 0.875rem);
  --text-16: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
  --text-18: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
  --text-24: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);
  --text-32: clamp(1.25rem, 1.1rem + 0.75vw, 2rem);
    --text-40: clamp(1.375rem, 1.15rem + 1.125vw, 2.5rem);
  --text-48: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
  --text-56: clamp(1.75rem, 1.4rem + 1.75vw, 3.5rem);
  --text-64: clamp(2rem, 1.6rem + 2vw, 4rem);
    --text-72: clamp(2.25rem, 1.8rem + 2.25vw, 4.5rem);
  --text-88: clamp(2.5rem, 1.9rem + 3vw, 5.5rem);
    --text-96: clamp(2.75rem, 2.05rem + 4vw, 6rem);
}

/* line-height
----------------------------------------*/
:root{
  --lh-100: 1.0;
  --lh-110: 1.1;
  --lh-120: 1.2;
  --lh-130: 1.3;
  --lh-140: 1.4;
  --lh-150: 1.5;
  --lh-160: 1.6;
}

/* spacing
----------------------------------------*/
:root {
--space-8: clamp(0.25rem, 0.1875rem + 0.3125vw, 0.5rem);
--space-16: clamp(0.5rem, 0.375rem + 0.625vw, 1rem);
--space-24: clamp(1rem, 0.875rem + 0.625vw, 1.5rem);
--space-32: clamp(1.5rem, 1.375rem + 0.625vw, 2rem);
--space-48: clamp(1.75rem, 1.4375rem + 1.5625vw, 3rem);
--space-64: clamp(2rem, 1.5rem + 2.5vw, 4rem);
--space-80: clamp(2.5rem, 1.875rem + 3.125vw, 5rem);
--space-96: clamp(2.75rem, 1.9375rem + 4.0625vw, 6rem);
--space-112: clamp(4.5rem, 3.25rem + 6.25vw, 7rem);
--space-128: clamp(5rem, 3.5rem + 7.5vw, 8rem);
--space-144: clamp(5.5rem, 3.75rem + 8.75vw, 9rem);
--space-160: clamp(6rem, 4rem + 10vw, 10rem);
--space-180: clamp(6.75rem, 4.5rem + 11.25vw, 11.25rem);
--space-192: clamp(4rem, 2rem + 10vw, 12rem);
--space-240: clamp(5rem, 2.5rem + 12.5vw, 15rem);
--space-272: clamp(6rem, 3.25rem + 13.75vw, 17rem);
}

/* colors
----------------------------------------*/
:root{

  /* ===== Brand Colors ===== */
  --color-midnight:#051932;
  --color-midnight-10:rgba(5, 24, 50, 0.1);
  --color-green: #A8E943;   
  --color-green-80:rgba(168, 233, 67, 0.8);  
  --color-blue:#497592;


  /* ===== Base ===== */
  --color-white: #FFFFFF;
  --color-black: #000000;


  /* ===== Neutral / Slate Scale ===== */
  --color-slate-50:  #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-300-10: rgba(203, 213, 225, 0.1);
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

}

/* =========================================================
   BUTTON SYSTEM (Elementor) – one arrow principle for ALL variants
   ========================================================= */

/* Base */
.elementor-button{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font-primary);
  font-size: var(--text-16);
  font-weight: 500;
  line-height: var(--lh-100);
  text-align: center;

  border-radius: 100px;
  padding: 14px 24px 16px 24px;
  border: solid 1px;

  transform-origin: center center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.elementor-button-content-wrapper{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
}

.elementor-button-text{
  display: block;
  text-align: left;
  padding-right: 22px;
}

.elementor-button .elementor-button-icon{
  display: none !important;
}

/* Arrow asset */
:root{
  --icon-arrow-diagonal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12'%3E%3Cpath fill='white' d='M10.7803 10.75H9.28027V3.06055L1.06055 11.2803L0 10.2197L8.71973 1.5H0.0302734V0H10.7803V10.75Z'/%3E%3C/svg%3E");
}

/* Global arrow (masked + color via variable) */
.elementor-button::after{
  content:"";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);

  width: 12px;
  height: 12px;

  background-image: none !important;

  -webkit-mask-image: var(--icon-arrow-diagonal);
  mask-image: var(--icon-arrow-diagonal);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  background-color: var(--btn-arrow-color, currentColor);

  transition: transform .35s cubic-bezier(.25,.8,.25,1), background-color .25s ease;
}

.elementor-button:hover::after{
  transform: translateY(-50%) rotate(45deg) translateX(-2px);
}

.btn-small .elementor-button {
  padding: 8px 24px 10px 16px;
}

.btn-small .elementor-button::after {
  right: 16px; 
}

/* Variants */
.btn-primary .elementor-button{
  background-color: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-midnight);
  --btn-arrow-color: var(--color-midnight);
}

.btn-primary .elementor-button:hover,
.btn-primary .elementor-button:focus{
  background-color: var(--color-green-80);
  border-color: var(--color-green-80);
  color: var(--color-midnight);
  --btn-arrow-color: var(--color-midnight);
}

.btn-secondary-dark .elementor-button{
  background-color: transparent;
  border-color: var(--color-midnight);
  color: var(--color-midnight);
  --btn-arrow-color: var(--color-midnight);
}

.btn-secondary-dark .elementor-button:hover,
.btn-secondary-dark .elementor-button:focus{
  background-color: var(--color-midnight-10);
  border-color: var(--color-midnight);
  color: var(--color-midnight);
  --btn-arrow-color: var(--color-midnight);
}

.btn-secondary-dark .elementor-button{
  background-color: transparent;
  border-color: var(--color-midnight);
  color: var(--color-midnight);
  --btn-arrow-color: var(--color-midnight);
}

.btn-secondary-dark .elementor-button:hover,
.btn-secondary-dark .elementor-button:focus{
  background-color: var(--color-midnight-10);
  border-color: var(--color-midnight);
  color: var(--color-midnight);
  --btn-arrow-color: var(--color-midnight);
}

.btn-secondary-blue .elementor-button{
  background-color: transparent;
  border-color: var(--color-blue);
  color: var(--color-blue);
  --btn-arrow-color: var(--color-blue);
}

.btn-secondary-blue .elementor-button:hover,
.btn-secondary-blue .elementor-button:focus{
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
  --btn-arrow-color: var(--color-white);
}

.btn-secondary-light .elementor-button{
  background-color: transparent;
  border-color: var(--color-slate-300);
  color: var(--color-slate-300);
  --btn-arrow-color: var(--color-slate-300);
}

.btn-secondary-light .elementor-button:hover,
.btn-secondary-light .elementor-button:focus{
  background-color: var(--color-midnight-10);
  border-color: var(--color-slate-300);
  color: var(--color-slate-300);
  --btn-arrow-color: var(--color-slate-300);
}

.btn-secondary-light-white .elementor-button{
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
  --btn-arrow-color: var(--color-white);
}

.btn-secondary-light-white .elementor-button:hover,
.btn-secondary-light-white .elementor-button:focus{
  background-color: var(--color-slate-300-10);
  border-color: var(--color-white);
  color: var(--color-white);
  --btn-arrow-color: var(--color-white);
}

.btn-third .elementor-button{
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
  --btn-arrow-color: var(--color-white);
}

.btn-third .elementor-button:hover,
.btn-third .elementor-button:focus{
  background-color: rgba(203, 213, 225, 0.104);
  border-color: var(--color-white);
  color: var(--color-white);
  --btn-arrow-color: var(--color-white);
}

.btn-cta .elementor-button{
  background-color: transparent;
  border: none;
  color: var(--color-midnight);
  padding: 0;
  --btn-arrow-color: var(--color-midnight);
}

.btn-cta .elementor-button::after{
  right: 0;
}

.btn-cta .elementor-button:hover,
.btn-cta .elementor-button:focus{
  background-color: transparent;
}

.btn-listing .elementor-button {
    font-size: var(--text-24);
}

.btn-listing .elementor-button::after {
    right: 0px;
    width: 16px;
    height: 16px;
}

.btn-listing .elementor-button-text{
    padding-right: 28px; /* 16px Icon + 12px Abstand */
}

.btn-light .elementor-button {
  color: var(--color-white) !important;
  --btn-arrow-color: var(--color-white);
}

.btn-light:hover .elementor-button {
  --btn-arrow-color: var(--color-white);
}

.span-btn {
    width: fit-content;
}

.span-btn::after{
  content:"";
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 12px;
  height: 12px;
  background-image: none !important;

  -webkit-mask-image: var(--icon-arrow-diagonal);
  mask-image: var(--icon-arrow-diagonal);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  background-color: var(--color-white);

  transition: transform .35s cubic-bezier(.25,.8,.25,1), background-color .25s ease;
}

.span-btn:hover::after{
  transform: translateY(-50%) rotate(45deg) translateX(-2px);
}

.card:hover .span-btn::after{
  transform: translateY(-50%) rotate(45deg) translateX(-2px);
}

/* support color elementor-icon-widget
----------------------------------------*/

.elementor-widget-icon svg path{
    fill: currentColor;
}

/* hero v1
------------------------------*/

.hero-v1 {
  background-color: var(--color-midnight);
}


@media (min-width: 768px) {
  .hero-v1 {
    background-color: var(--color-midnight);
    clip-path: none;
    /* height: 100vh; */
  }
}

.hero-v1 .hero-content {
  padding-inline: var(--space-wrapper);
  padding-top: var(--space-48);
}

@media (min-width: 768px) {
  .hero-v1 .hero-content {
    background-color: transparent;
    padding: 0;
  }
}

.hero-v1 .hero-v1-background-v1 {
  height: 35vh;
  clip-path: polygon(0 0, 100% 0%, 100% 90%, 0% 100%);
}

@media (min-width: 768px) {
  .hero-v1 .hero-v1-background-v1 {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    width: 55%;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
  }

}

.hero-v1 .hero-v1-background-v1 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hero-v1 .hero-v1-background-v2 {
  height: 35vh;
  clip-path: polygon(0 0, 100% 0%, 100% 90%, 0% 100%);
}

@media (min-width: 768px) {
  .hero-v1 .hero-v1-background-v2 {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    width: 45%;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
  }

}

.hero-v1 .hero-v1-background-v2 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hero-v1  .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) figure {
    height: 100vh;
}


.blur {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.blur>div>div {
  position: absolute;
  background-color: var(--color-green);
  border-radius: 40%;
  filter: blur(100px);
}

.blur-mint>div>div {
  width: 50%;
  height: 30vh;
  left: 40%;
  bottom: 0%;
}

@media (min-width: 768px) {
  .blur-mint>div>div {
    width: 300px;
    height: 500px;
    left: 40%;
    bottom: -20%;
    border-radius: 40%;
    filter: blur(100px);
  }
}

.hero-v1 .hero-content {
  width: 100%;
}

@media (min-width: 768px) {
  .hero-v1 .hero-content {
    width: 40%;
    background-color: transparent;
    padding: 0;
  }
}


@media (min-width: 1920px) {
  .hero-v1 .hero-content {
    width: 50%;
  }
}


/* hero v3
------------------------------*/

.hero-v3 {
  background-color: var(--color-midnight);
}


@media (min-width: 768px) {
  .hero-v3 {
    background-color: var(--color-midnight);
    clip-path: none;
    height: 70vh;
  }
}

.hero-v3 .hero-content {
  width: 100%;
}

@media (min-width: 768px) {
  .hero-v3 .hero-content {
    background-color: transparent;
    padding: 0 var(--space-48) 0 0;
    position: absolute;
    right: 0;
    width: 45%;
  }
}

.hero-v3 .hero-v3-background-v1 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hero-v3 .hero-v3-background-v1 {
  height: 35vh;
  clip-path: polygon(0 0, 100% 0%, 100% 90%, 0% 100%);
}

@media (min-width: 768px) {
  .hero-v3 .hero-v3-background-v1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 52%;
    height: 100%;
    clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%);
}

.hero-v3 .hero-v3-background-v1 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
}

.hero-subpage {
        padding-top: var(--space-240);
        padding-bottom: var(--space-240);
        height: 80vh;
}

@media (max-width: 1680px) {
    .hero-subpage {
        height: 80vh;
        padding-top: 0;
        padding-bottom: 0;
    }
}
    
@media (max-width: 767px) {
    .hero-subpage {
        height: auto;
        padding-top: 0;
        padding-bottom: 0;
    }
}


/* hero get 100vh
------------------------------*/

:root{
    --header-height: 96px;
    --adminbar-height: 32px;
}


/*-- eingelogt - wp admin-bar --*/

@media (min-width: 783px){
    :root{
        --header-height: 46px;
    }
}


/*-- header height --*/
@media (min-width: 677px){
    :root{
        --header-height: 100px;
    }
}

.hero_full-vh{
    height: calc(100vh - (var(--header-height)));
}

body.logged-in .hero_full-vh{
    height: calc(100vh - ((var(--header-height)) + (var(--adminbar-height))));
}

/* =========================================================
   PROCESS – FINAL (39 Ticks + 6 Steps, baseline-based)
   Elementor Klassen:
   - Section (optional):  process-section
   - Wrapper:             wrapper process
   - Rail Container:      process-rail
   - Texte (Widgets):     process-text top|bottom text-1..6
   HTML (1x in .process-rail):
   <div class="process-scale"> ... 39 spans ... </div>
   ========================================================= */

:root{
  --process-bg:#071326;
  --process-purple: var(--color-green, #A8E943);

  --rail-pad: 0px;
  --tick-h: 44px;      /* Höhe der weißen Balken */
  --marker-h: 135px;   /* Höhe der lila Marker */
  --text-gap: 32px;    /* Abstand Text zum Marker-Ende */
  --rail-y: 260px;     /* Baseline-Position der Tick-Leiste im Rail-Container */
}

/* --- nichts darf clippen --- */
.process-section,
.process,
.process-rail,
.process *{
  overflow: visible !important;
}

/* --- Background: Section ODER Wrapper --- */
.elementor-section.process-section,
.e-con.process-section,
.wrapper.process{
  background-color: var(--process-bg) !important;
  background-image:
  radial-gradient(1100px 620px at 12% 92%, rgba(120,95,255,.55) 0%, rgba(7,19,38,0) 62%),
  radial-gradient(900px 520px at 92% 6%, rgba(60,170,150,.55) 0%, rgba(7,19,38,0) 58%) !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  color:#fff;
}

/* --- Wrapper Spacing --- */
.process{
  position:relative;
  padding-block: clamp(72px, 8vw, 150px);
}

/* =========================================================
   RAIL (Baseline statt Center)
   ========================================================= */
   
   /* Elementor HTML-Widget Wrapper darf NICHT das Positioning übernehmen */
   .process-rail .elementor-widget-html,
   .process-rail .elementor-widget-html .elementor-widget-container{
   position: static !important;
   transform: none !important;
   }
   
.process-rail{
  position:relative;
  margin-top: 140px;             /* Abstand von Headline */
  padding-top: var(--rail-y);    /* Raum über der Leiste */
  padding-bottom: var(--rail-y); /* Raum unter der Leiste */
  isolation:isolate;
}

/* dünne Startlinie links */
.process-rail::after{
  content:"";
  position:absolute;
  left: calc(-1 * var(--rail-pad));
  top: var(--rail-y);
  width:2px;
  height:120px;
  background: rgba(168, 233, 67, 0.7);
  transform: translateY(30px); /* leicht nach unten wie im Design */
  opacity:.8;
  z-index: 1;
}

/* =========================================================
   SCALE: 39 Ticks (HTML-Widget)
   ========================================================= */
.process-scale{
   position:absolute;
   top: var(--rail-y);
   
   /* statt left/right -> width erzwingen */
   left: 50%;
   transform: translateX(-50%);
   
   width: calc(100% + (2 * var(--rail-pad)));
   height: var(--tick-h);
   
   display:flex;
   justify-content: space-between;
   align-items:center;
   
   z-index: 2;
   pointer-events:none;	
   }

.process-scale .tick{
  position:relative;
  height: var(--tick-h);
  background: rgba(255,255,255,.95);
  border-radius: 2px;

  /* Breite wächst 1px -> 18px über i=1..39 */
  width: clamp(1px, calc(1px + (var(--i) - 1) * 0.447368px), 18px);
}

/* Steps: Tick wird lila + bekommt Marker */
.process-scale .tick.is-step{ background: var(--process-purple); }

/* Exakte Step-Tick-Breiten (deine Vorgaben) */
.process-scale .step-1{ width: 1px; }
.process-scale .step-2{ width: 5px; }
.process-scale .step-3{ width: 8px; }
.process-scale .step-4{ width: 12px; }
.process-scale .step-5{ width: 16px; }
.process-scale .step-6{ width: 18px; }

/* Marker entsteht aus Step-Tick (gleiche Breite wie Tick) */
.process-scale .tick.is-step::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height: var(--marker-h);

  /* an Tick-Mitte andocken */
  top: calc(var(--tick-h) / 2);

  background: var(--process-purple);
  box-shadow: 0 0 18px rgba(168, 233, 67, 0.28);
  transform-origin: top;
}

.process-scale .tick.up::after{   transform: translateY(-100%); }
.process-scale .tick.down::after{ transform: translateY(0%); }

/* =========================================================
   TEXT: 32px Abstand zum Marker-Ende (Baseline-basiert)
   ========================================================= */
.process-text{
  position:absolute;
  width:242px;
  max-width:34vw;
  z-index: 5;

  font-size:16px;
  line-height:1.55;
  color:rgba(235,240,255,.92);

  transform: translateX(-50%);
}

/* oben: Baseline - Marker - Gap */
.process-text.top{
  top: calc(var(--rail-y) - var(--marker-h));
}

/* unten: Baseline + Marker + Gap */
.process-text.bottom{
  top: calc(var(--rail-y) + var(--marker-h));
}

/* Typo (optional, wenn du spans nutzt) */
.process-text .kicker{
  display:block;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(168, 233, 67, 0.95);
  margin-bottom:10px;
  font-weight:600;
}
.process-text .title{
  display:block;
  font-size:18px;
  font-weight:700;
  color:#fff;
  margin-bottom:10px;
}
.process-text .desc{
  display:block;
  font-size:16px;
  color:rgba(235,240,255,.9);
}

/* 32px Abstand zwischen Marker-Ende und Text-Inhalt */
.process-text.top .desc{
  margin-top: var(--text-gap);
}

.process-text.bottom .desc{
  margin-bottom: var(--text-gap);
}

/* X-Positionen (du kannst die feinjustieren) */
.text-1{ left:14%; }
.text-2{ left:30%; }
.text-3{ left:46%; }
.text-4{ left:64%; }
.text-5{ left:78%; }
.text-6{ left:94%; }

/* =========================================================
   MOBILE (simpel & stabil)
   ========================================================= */
@media (max-width: 767px){

  :root{
  --rail-pad: 0px;
  --rail-y: 0px;
  }

  .process-rail{
  margin-top: 40px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 40px;
  }

  .process-rail::after{ display:none; }

  /* vertikale Skala */
  .process-scale{
  position:absolute;
  top: var(--rail-y);
  left: 0;
  right: 0;
  
  height: var(--tick-h);
  display:flex;
  justify-content: space-between;
  align-items:center;
  
  z-index: 2;
  pointer-events:none;
  }

  .process-scale .tick{
  width: 6px !important;
  height: 10px;
  border-radius: 3px;
  }

  .process-scale .tick.is-step::after{
  left: 50%;
  width: 6px;
  height: 44px;
  top: 0;
  transform: translateX(-50%);
  }

  /* Texte werden normal untereinander */
  .process-text{
  position:relative;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  width:auto;
  max-width: 560px;
  margin-left: 40px;
  margin-bottom: 44px;
  }
}

/* ---------- DESKTOP (Standard) : vertikale Linie ---------- */
.about-divider{
  position: absolute;
  pointer-events: none;

  /* vertikal */
  top: 0;
  bottom: 0;

  width: 1.5px;
  height: auto;

  background: var(--color-slate-300);
}


/* ---------- TABLET & MOBILE : horizontale Linie ---------- */
@media (max-width: 1024px){

  .about-divider{
    /* nicht mehr links neben dem Text */
    left: 0;
    right: 0;

    /* horizontal */
    width: 100%;
    height: 1.5px;

    background: var(--color-slate-300);
  }
}

/* Elementor Form Start
 -------------------------------- */

/*-- select field custom icon --*/

.elementor-field.elementor-select-wrapper .select-caret-down-wrapper svg {
  display: none;
}

.elementor-form input[type=date],
.elementor-form input[type=email],
.elementor-form input[type=number],
.elementor-form input[type=password],
.elementor-form input[type=search],
.elementor-form input[type=tel],
.elementor-form input[type=text],
.elementor-form input[type=url],
.elementor-form select,
.elementor-form textarea {
  padding: 13px 20px;
}

.elementor-field.elementor-select-wrapper .select-caret-down-wrapper:before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 511.9 272' viewBox='0 0 511.9 272'%3E%3Cpath d='M256 272c-4.2 0-8.2-1.6-11.4-4.6l-240-240c-6.2-6.2-6.2-16.3 0-22.6s16.3-6.2 22.6 0L256 233.5 484.7 4.7c6.2-6.2 16.3-6.2 22.6 0 6.2 6.2 6.2 16.3 0 22.6l-240 240c-3.1 3.1-7.1 4.7-11.3 4.7z' style='fill:%23111'/%3E%3C/svg%3E");
  width: 15px;
  height: 8px;
  display: block;
  background-size: contain;
  position: absolute;
  right: 12px;
  top: 4px;
}

.eicon-caret-down:before {
  content: "" !important;
}

/*-- dse checkbox --*/

.elementor-form .elementor-field-type-acceptance .elementor-field-option {
  display: flex;
  gap: .5rem;
  cursor: pointer;
}

/* reset checkbox */
.elementor-form .elementor-field-type-acceptance input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-color: transparent !important;
}

.elementor-element.elementor-widget-form .elementor-form .elementor-field-type-acceptance label {
  font-size: var(--text-14);
  line-height: var(--lh-150);
  cursor: pointer;
}

.elementor-form .elementor-field-type-acceptance label a {
  color: var(--color-slate-600);
  text-decoration: underline;
}

.elementor-field-subgroup.elementor-subgroup-inline {
  gap: 32px;
}

body .elementor-19 .elementor-element.elementor-element-e1087f3 .elementor-labels-above .elementor-field-group > label {
  padding-top: 24px;
}

.elementor-field-type-acceptance.elementor-field-group.elementor-column.elementor-field-group-field_d22b590.elementor-col-100 {
  margin-top: 12px;
}

.elementor-field-type-acceptance.elementor-field-group.elementor-column.elementor-field-group-field_80c99cf.elementor-col-100 {
  margin-bottom: 48px;
}

/* check box */
.elementor-form .elementor-field-type-acceptance input:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 0;
  border: 1px solid var(--color-slate-600);
  background-color: transparent;
}

/* checked icon */
.elementor-form .elementor-field-type-acceptance input:after {
  content: "";
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-right-style: solid;
  border-right-width: 1px;
  border-color: var(--color-slate-600);
  display: inline-block;
  position: absolute;
  height: 10px;
  width: 5px;
  left: 6px;
  top: 4px;
  transform: rotate(45deg);
  opacity: 0;
  transition: .125s;
}

.elementor-form .elementor-field-type-acceptance input:checked:after {
  opacity: 1;
}

/* =========================================================
   ELEMENTOR CHECKBOX – CUSTOM (Haken pro Box korrekt)
   ========================================================= */

/* Wrapper optional */
.elementor-field-type-checkbox > div{
  display: grid;
  gap: 12px; /* Abstand zwischen den Optionen */
}

/* Native Checkbox "unsichtbar", aber klickbar/accessible */
.elementor-field-type-checkbox > div input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Label als Positionierungs-Container */
.elementor-field-type-checkbox > div label{
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin: 0;            /* deine 1em macht oft komische Abstände */
  user-select: none;
}

/* Checkbox-Kästchen */
.elementor-field-type-checkbox > div label:before{
  content: "";
  width: 15px;
  height: 15px;
  margin-right: 16px;
  border: 1px solid var(--color-slate-600);
  background: transparent;
  border-radius: 0;
  box-sizing: border-box;
  display: inline-block;
  flex: 0 0 15px;
  transition: border-color .2s ease, background-color .2s ease;
}

/* Hover auf dem jeweiligen Feld */
.elementor-field-type-checkbox > div label:hover:before{
  border-color: var(--color-slate-600);
}

/* Haken (an das jeweilige Label gebunden) */
.elementor-field-type-checkbox > div input[type="checkbox"]:checked + label:after{
  content: "";
  position: absolute;
  /* Position innerhalb des 15x15 Kästchens */
  left: 5px;
  top: 50%;
  width: 5px;
  height: 10px;
  transform: translateY(-90%) rotate(45deg);

  border-right: 1px solid var(--color-slate-600);
  border-bottom: 1px solid var(--color-slate-600);

  opacity: 1;
  transition: opacity .125s ease;
}

input#form-field-akzeptanz {
  padding: 0 16px 8px 0;
}

/* Elementor Form End
 -------------------------------- */
 
 /* Card Start
   -------------------------------- */
  
  .card:hover .card-sub-headline {
       color: var(--color-black);
   }
   
   .card:hover .elementor-button::after{
     transform: translateY(-50%) rotate(45deg) translateX(-2px);
   }
   
   .card:hover img {
       transform: scale(1.05);
   }
   
   .card img {
       transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .card-bg {
     position: relative;
     overflow: hidden !important;
   }
   
   /* Background Image (zoomt) */
   .card-bg::after{
     content: "";
     position: absolute;
     inset: 0;
     background: inherit;
     background-size: cover;
     background-position: right center;
     background-repeat: no-repeat;
     transform: scale(1);
     transition: transform .4s ease;
     z-index: 0;
     pointer-events: none;
   }
   
   .card-bg:hover::after{
     transform: scale(1.05);
   }
   
   /* Overlay */
   .card-bg::before{
     content: "";
     position: absolute;
     inset: 0;
     background-image: linear-gradient(
       180deg,
       rgba(255,255,255,0) 0%,
       var(--e-global-color-text) 100%
     );
     opacity: 0.5;
     z-index: 1;
     pointer-events: none;
   }
   
   /* Content über allem */
   .card-bg > *{
     position: relative;
     z-index: 2;
   }
   
   /* Listing Arrow Icon Hover */
   .card .arrow .elementor-icon svg {
       transition: transform .4s ease;
   }
   
   .card:hover .arrow .elementor-icon svg {
       transform: rotate(45deg);
       transition: transform .4s ease;
   }
   
   /* Card End
   -------------------------------- */
   
   
   /* Team Card Start
    -------------------------------- */
   .contact-reveal{
          display:flex;
          align-items:center;
          gap:12px;
          background:var(--color-green);
          border-radius:999px;
          padding:16px;
          width:48px;
          height:48px;
          overflow:hidden;
          transition:all .35s ease;
          cursor:pointer;
      }
      
      .contact-reveal .elementor-widget-heading{
          opacity:0;
          white-space:nowrap;
          transform:translateX(-10px);
          transition:all .35s ease;
      }
      
      .contact-reveal:hover{
          width:fit-content;
          padding-right:16px;
      }
      
      .contact-reveal:hover .elementor-widget-heading{
          opacity:1;
          transform:translateX(0);
      }
      
      @media (max-width: 767px){
       .contact-reveal{
           width:48px;
           padding:16px;
       }
   
       .contact-reveal .elementor-widget-heading{
           display:none;
       }
   }
   
   @media (max-width: 1366px) and (min-width: 1024px){
       .elementor-1000 .elementor-element.elementor-element-f12c628 > .elementor-widget-container > .jet-listing-grid > .jet-listing-grid__items{
           --columns: 3;
       }
   }
   
   @media (max-width: 768px) and (min-width: 600px){
        .elementor-1000 .elementor-element.elementor-element-f12c628 > .elementor-widget-container > .jet-listing-grid > .jet-listing-grid__items{
            --columns: 2;
        }
    }
   
   /* Team Card End
   -------------------------------- */
   
   
   :root{
       --tables_gap: 56px;
	   --white-gap: 24px;
       --color_standard: var(--color-slate-100);
       --color_standard-plus: var(--color-slate-300);
       --color_individual: var(--color-green);
   }
   
 
   .price-list span.price-sub,
 	.price-list span.price-nr{
       font-size: 12px;
   }

.price-list .price-sub{
	    display: flex;
    flex-direction: row;
}
   
.price-list .price-sub .price-nr{
	 
    display: contents;
}
   

   

   
   .price-list table td{
       position: relative;
   }
   
	.price-list table thead th{
		padding: var(--text-24) 8px!important;
	}
  

   .price-list table thead th:nth-child(2){
       background-color: var(--color_standard)!important;
   }

   .price-list table thead th:nth-child(3){
       background-color: var(--color_standard-plus)!important;
   }
   .price-list table thead th:nth-child(4){
       background-color: var(--color_individual)!important;
   }
  
.price-list .long-name{
	display: none;
}



.price-list.allgemein table.table-sticky-active thead {
    position: fixed;
    top: 102px; /* Höhe des Sticky-Headers */
    z-index: 100;
    background: #fff;
	width: calc(100% - (( var(--space-wrapper)) * 2));
	 opacity: 1;
    transform: translateY(0);
}

  /* Startbereich */
  .price-list table.table-sticky-fade-in thead  {
    opacity: 0;
     transform:translateY(-6px);
    animation:fadeTableIn .25s ease forwards;
  }

  /* Endbereich */
  .price-list table.table-sticky-fade-out thead  {
     opacity:1;
    transform:translateY(0);
    animation:fadeTableOut .25s ease forwards;
  }

@keyframes fadeTableIn{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeTableOut{
    to{
        opacity:0;
        transform:translateY(-6px);
    }
}

}

/* optional: verhindert Durchscheinen beim Scrollen */
	.price-list.allgemein table.table-sticky-active thead{
		background: #fff;
		    transition: opacity 0.5s ease, transform 0.25s ease;
		transition-delay: .5s;
}

@media (min-width: 601px) {
	.price-list.allgemein table.table-sticky-active thead {
		top: 149px;
	}
}



@media (min-width: 768px){
		.price-list table thead th,
	.price-list table tbody td{
		padding: var(--text-24)!important;
	}
  
	.price-list .short-name{
	display: none;
}
	
	.price-list .long-name{
	display: contents;
}

	   .price-list span.price-sub {
       font-size: var(--text-18);
   }
   
   .price-list span.price-nr {
       font-size: var(--text-32);
   }
	
	.price-list table tbody tr td:nth-child(2){
		background-color: var(--color_standard)!important;
   }

  
   .price-list table tbody tr td:nth-child(3){
       background-color: var(--color_standard-plus)!important;
   }
  
   .price-list table tbody tr td:nth-child(4){
       background-color: var(--color_individual)!important;
   }
	
	.price-list .jet-dynamic-table-wrapper {
		padding-top: var(--space-48);
	}
	
	.price-list table tr:last-child td:nth-child(2):after,
	.price-list table tr:last-child td:nth-child(3):after,
	.price-list table tbody tr:last-child td:nth-child(4):after{
		content: "";
		width: 100%;
		height: var(--tables_gap);
		position: absolute;
		left: 0;
		top: 100%;
		z-index: -1;
	}

	
   
  .price-list table tr:last-child td:nth-child(2):after{
       background-color: var(--color_standard)!important;
   }
   

  .price-list table tr:last-child td:nth-child(3):after{
     background-color: var(--color_standard-plus)!important;
   }
   

   
   .price-list table tbody tr:last-child td:nth-child(4):after{
       background-color: var(--color_individual)!important;
   }
	
	.price-list table tr:last-child td:nth-child(2):after,
	.price-list table tr:last-child td:nth-child(3):after{
		border-right: var( --white-gap) #ffffff solid;
	}
	
	table thead th,
	table tbody tr td{
		position: relative;
	}

	table thead th:nth-child(2):before,
	table tbody tr td:nth-child(2):before,
	table thead th:nth-child(3):before,
	table tbody tr td:nth-child(3):before{
		content: "";
		width: var( --white-gap);
		height: 100%;
		background-color: #ffffff;
		position: absolute;
		right: 0;
		top: 0;
	}

}

@media (max-width: 768px){
	
	.price-list .jet-dynamic-table__row {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	/* erstes td über alle Spalten */

	
	.price-list .jet-dynamic-table__row > td:first-child {
		grid-column: 1 / -1;
		padding: 32px 0px 8px 0px!important;
		border-color: #64748B!important;
		
	}
	
	.price-list .jet-dynamic-table__row > td:first-child .elementor-widget-container{
		text-align: center;
	}

	/* restliche drei gleich breit */
	.price-list .jet-dynamic-table__row > td:nth-child(2),
	.price-list .jet-dynamic-table__row > td:nth-child(3),
	.price-list .jet-dynamic-table__row > td:nth-child(4) {
		text-align: center!important;
		padding: 12px 4px!important;
		border-color: #64748B!important;
	}
	
	.price-list .jet-dynamic-table__row > td:not(:first-child) span{
		font-size: 14px!important;
	}
	
	.price-list .jet-dynamic-table__row > td:not(:first-child) .e-con-inner{
		    justify-content: center;
	}
}

     /*
   th.jet-dynamic-table__col span.service, 
   th.jet-dynamic-table__col span.funktionsumfang,
   th.jet-dynamic-table__col span.zusaetzliche-funktion,
   th.jet-dynamic-table__col span.zusaetzlicher-service {
       display: none;
   }
    
   @media (max-width:1024px) {
        th.jet-dynamic-table__col span.service, 
          th.jet-dynamic-table__col span.funktionsumfang,
          th.jet-dynamic-table__col span.zusaetzliche-funktion,
          th.jet-dynamic-table__col span.zusaetzlicher-service {
            display: block;
        }
   }

   .zusaetzlicher-service table tbody tr:last-child td:nth-child(2)::after,
   .zusaetzlicher-service table tbody tr:last-child td:nth-child(3)::after,
   .zusaetzlicher-service table tbody tr:last-child td:nth-child(4)::after{
       height: var(--space-80)
   }*/
   


   
   /* table
   ------------------------*/ 
   /*
   @media (min-width: 768px) {
     .jet-dynamic-table__header th:first-child {
       width: 30%;
     }
     
     span.allgemein {
         display: none;
     }
     
     .jet-dynamic-table__header th:not(:first-child){
       width: 15%;
     }
     
     .price-list .jet-dynamic-table .jet-dynamic-table__header tr th svg{
       display: none;
     }
   }
   */
   /*
   @media (max-width: 768px) {
     
     .elementor-element .jet-dynamic-table .jet-dynamic-table__header .jet-dynamic-table__col{
       padding-bottom: 0 !important;
     }
     
     span.allgemein {
         display: block;
     }
     
     table tbody tr:last-child td:nth-child(2):after, table tbody tr:last-child td:nth-child(3):after, table tbody tr:last-child td:nth-child(4):after{
     display: none;
     }
     
     .price-list .jet-dynamic-table{
       display: flex;
       flex-direction: column;
     }
     
     .price-list .jet-dynamic-table .jet-dynamic-table__header tr th:first-child{
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
       justify-content: space-between;
       width: 100%;
     }
     
     .price-list .jet-dynamic-table .jet-dynamic-table__header tr th svg{
       width: 1rem;
       transition: .25s;
     }
     
     .price-list.jet-table-accordion--open .jet-dynamic-table .jet-dynamic-table__header tr th svg{
       transform: rotate(180deg);
     }
     
     .price-list{
       padding: 1.25rem 1.5rem;
       border: solid 1px var(--color-slate-300);
       border-radius: 16px;
     }
     
     .price-list tbody{
       padding-top: 16px;
     }
     
     .price-list tbody tr:not(:last-child) {
       border-bottom: 1px solid var(--color-slate-300);
       padding-bottom: 1rem;
       margin-bottom: 1rem;
     }
     
     .jet-dynamic-table__header th:first-child{
       border: none !important;
       padding: 0;
     }
     
     .jet-dynamic-table__header th:not(:first-child) {
       display: none;
     }
   
     .jet-dynamic-table__header th:first-child {
       width: 100%;
     }
   
     .jet-dynamic-table__row td.jet-dynamic-table__col--standardbrab32euromonat,
     .jet-dynamic-table__row td.jet-dynamic-table__col--standardplusbrab35euromonat,
     .jet-dynamic-table__row td.jet-dynamic-table__col--individualbrab45euromonat {
       display: inline-block;
       padding: 0;
       border: 0;
       vertical-align: top;
     }
   
     .jet-dynamic-table__header th:not(:first-child) {
       display: none;
     }
   
     .jet-dynamic-table,
     .jet-dynamic-table tbody,
     .jet-dynamic-table tr {
       display: block;
       width: 100%;
     }
   
     .jet-dynamic-table__row td.jet-dynamic-table__col--standardbrab32euromonat,
     .jet-dynamic-table__row td.jet-dynamic-table__col--standardplusbrab35euromonat,
     .jet-dynamic-table__row td.jet-dynamic-table__col--individualbrab45euromonat {
       display: inline-block;
       padding: 0;
       border: 0;
     }
     
     .price-list tr td.jet-dynamic-table__col--standardbrab32euromonat .elementor-icon:after{
       content: "Standard";
     }
     
     .price-list tr td.jet-dynamic-table__col--standardplusbrab35euromonat .elementor-icon:after{
       content: "Standard Plus";
     }
     
     .price-list tr td.jet-dynamic-table__col--individualbrab45euromonat .elementor-icon:after{
       content: "Individual";
     }
     
     .price-list tbody td .elementor-element .elementor-icon{
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: .25rem;
     }
     
     .price-list tr td .elementor-icon:after{
       font-size: 12px;
     }
     
     .price-list tr td.jet-dynamic-table__col--standardbrab32euromonat .elementor-icon svg,
     .price-list tr td.jet-dynamic-table__col--standardplusbrab35euromonat .elementor-icon svg,
     .price-list tr td.jet-dynamic-table__col--individualbrab45euromonat .elementor-icon svg{
       height: 14px !important;
     }
     
     .price-list tbody td:not(:first-child) .elementor-widget-icon{
       margin-right: .5rem;
     }
   }
   */
   /* Language Switcher
   -------------------------------- */
   
   .trp-shortcode-switcher {
     padding: 0 !important;
     margin-top: 8px;
   }
   
   .trp-language-item-name {
       color: var(--color-slate-500);
       font-size: var(--text-18);
       line-height: 1.2;
       font-family: var(--font-primary);
       font-weight: 500;
   }
   
   .trp-language-item {
     padding: 8px 8px !important;
   }
   
   svg.trp-shortcode-arrow {
       margin-top: -4px !important;
   }
   
   .trp-shortcode-overlay {
     z-index: 10 !important;
   }
   
   /* Filter
   -------------------------------- */
   
   select.jet-select__control {
         width: fit-content;
         margin-right: 20px !important;
     }
     
   .jet-select__control {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.642' height='8' viewBox='0 0 13.642 8'%3E%3Cpath id='Pfad_4732' data-name='Pfad 4732' d='M1081.507,212.185a1.19,1.19,0,0,1-.847-.351l-5.61-5.625a1.2,1.2,0,0,1,0-1.689l5.61-5.626a1.2,1.2,0,1,1,1.693,1.689l-4.769,4.782,4.769,4.781a1.2,1.2,0,0,1-.847,2.04' transform='translate(-198.543 1082.703) rotate(-90)' fill='%23212121'/%3E%3C/svg%3E%0A");
       background-repeat: no-repeat;
       background-position-x: 90%;
       background-position-y: 17px;
     }

.benefits svg path {
         fill: var(--color-green);
     }
     
     @media (max-width: 767px) {
        .elementor-3448 .elementor-element.elementor-element-199fabe0 > .elementor-widget-container > .jet-tabs > .jet-tabs__control-wrapper > .jet-tabs__control.active-tab, .elementor-3448 .elementor-element.elementor-element-199fabe0 > .elementor-widget-container > .jet-tabs > .jet-tabs__control-wrapper > .jet-tabs__control:hover {
           border-radius: var(--space-32) !important;
         } 
     }
     
     .aspect-img img {
         aspect-ratio: 689/472;
         object-fit: cover;
         object-position: center center;
     }