/*
Theme Name: Landeseiten
Theme URI:
Author: Dominique Rademacher
Author URI:  https://landeseiten.de
Version: 1.1.0

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* =================================================================== */
/* LANDESEITEN FORM - CHILD THEME CUSTOMIZATION
/* -------------------------------------------------------------------
/* Use this section to easily override the default form styles.
/* Just change the values below to match your theme's branding.
/* =================================================================== */

.cs-landeseiten-form {
  /* --- 🎨 Key Colors --- */
  --landeseiten-form-accent-color: linear-gradient(-80deg, var(--e-global-color-a753f82) 0%, var(--e-global-color-2749687) 100%); /* Main brand color for buttons and selections */
  --landeseiten-form-accent-contrast: #ffffff; /* Text color on top of the accent color (e.g., button text) */
  --landeseiten-form-text-color: #222222; /* General text for labels and inputs */
  --landeseiten-form-border-color: #d1d1d1; /* Border color for text fields */

  /* --- 📏 Sizing & Spacing --- */
  --landeseiten-form-input-height: 45px; /* Height of text boxes and selection buttons */
  --landeseiten-form-field-vertical-padding: 35px; /* Space between each question (field) */
  --landeseiten-form-input-border-radius: 4px; /* How rounded the corners are for text inputs */
  --landeseiten-form-button-border-radius: 4px; /* How rounded the corners are for Next/Submit buttons */
  --landeseiten-form-choice-border-radius: 99px; /* Border radius for radio/checkbox "pill" buttons */

  /* --- ✒️ Typography --- */
  --landeseiten-form-label-font-size: 26px; /* Font size for the main question/label */
  --landeseiten-form-input-font-size: 16px; /* Font size for the user's input text */
}

/*==============================
=          GENERAL            =
==============================*/

html,
body {
  overflow-x: hidden;
}

body p { 
  margin: 0;
}

.gform_validation_errors {
  display: none !important;
}

span.gfield_required.gfield_required_custom {
  font-size: 16px !important;
}


.elementor.elementor-4055 {
	overflow:hidden;
}


/*==============================
=          COOKIES            =
==============================*/

.cc-animate.cc-revoke.cc-bottom,
.cc-revoke {
  display: none !important;
}


/*==============================
=        PARALLAX BG          =
==============================*/

.cs-parallax-container {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
}


/*==============================
=      TEST STYLES (TMP)      =
==============================*/

.cs-test-border {
  border: 10px solid red;
}


/*==============================
=     GRADIENT BORDER BOX     =
==============================*/

.cs-gradient-border {
  position: relative;
  z-index: 1;
  background: #fff;
	opacity:.9;
  border-radius: 40px;
}

.cs-gradient-border::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(-80deg, var(--e-global-color-primary), var(--e-global-color-0b855bb));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}


/*==============================
=         RING PROGRESS       =
==============================*/

.cs-ring-progress {
  position: relative;
  display: inline-block;
  width: 160px;
  height: 160px;
}

.cs-ring-progress svg {
  width: 100%;
  height: 100%;
}

.cs-ring-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Public Sans", Sans-serif;
  font-size: 55px;
  font-weight: bold;
  color: #000;
  z-index: 2;
}


/*==============================
=      MISTAKE CARD STYLE     =
==============================*/

.cs-mistakte-card {
  max-width: 880px;
}

.cs-mistakte-card .elementor-icon-box-title {
  margin-bottom: 10px;
}

.cs-mistakte-card .elementor-icon-box-icon {
  position: absolute !important;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}


/*==============================
=       PRIMARY BUTTON        =
==============================*/

.cs-primary-button a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 65px;
  z-index: 1;
  overflow: hidden;
  transition: transform 0.3s ease-out;
}

.cs-primary-button a::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: linear-gradient(-80deg, var(--e-global-color-a753f82), var(--e-global-color-2749687));
  transition: transform 0.6s ease-in-out;
  z-index: -1;
}

.cs-primary-button a:hover {
  transform: scale(1.05);
}

.cs-primary-button a:hover::before {
  transform: rotate(180deg);
}


/*==============================
=     BACKGROUND ACCENTS      =
==============================*/

.cs-left-accent,
.cs-right-accent {
  isolation: isolate;
}

.cs-left-accent::after,
.cs-right-accent::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 120vw;
  opacity: 0.12;
  z-index: -1;
  background-image: linear-gradient(to right, var(--e-global-color-primary), var(--e-global-color-0b855bb));
}

.cs-left-accent::after {
  right: -40px;
  border-top-right-radius: 1000px;
  border-bottom-right-radius: 1000px;
}

.cs-right-accent::after {
  left: -40px;
  border-top-left-radius: 1000px;
  border-bottom-left-radius: 1000px;
}


/*==============================
=        MYTHOS TABS          =
==============================*/

.cs-mythos-accordion .eael-tab-nav-item:not(.active) img {
  filter: saturate(0);
}

.cs-mythos-accordion .eael-tab-item-trigger:not(:last-of-type) {
  margin-right: 25px;
}

.cs-mythos-accordion .eael-tab-content-item {
  padding: 0 !important;
}

.cs-mythos-content {
  margin: 50px auto 0 auto !important;
}


/*==============================
=         RESPONSIVE          =
==============================*/

@media (max-width: 767px) {
	
	/*This is small helper class that helps us to have different text layout on mobile and desktop*/
	.cs-desktop-break{
		display:none;
	}
	
	.cs-steps-container::after {
		display:none !important;
	}

  .cs-mistakte-card .elementor-icon-box-icon {
    top: 100%;
    right: 50%;
    transform: translate(50%, -50%);
  }

  .cs-mythos-content {
    margin: 0 auto 25px auto !important;
  }

  .cs-mythos-accordion .eael-tab-item-trigger {
    margin: 0 !important;
    margin-bottom: 25px !important;
  }

  .cs-mythos-accordion .eael-tabs-content {
    display: none !important;
  }

  .cs-mythos-accordion .accordion-mode .eael-tab-content-item {
    display: none;
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
  }

  .cs-mythos-accordion .accordion-mode .eael-tabs-nav > ul > li:last-of-type {
    border-bottom: none;
  }

  .cs-mythos-accordion .eael-tab-top-icon li::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -15px;
    height: 70%;
    width: 120vw;
    transform: translateY(-50%);
    border-top-right-radius: 1000px;
    border-bottom-right-radius: 1000px;
    background-image: linear-gradient(to right, var(--e-global-color-primary), var(--e-global-color-0b855bb));
    opacity: 0.12;
    z-index: -1;
  }

  .cs-mythos-accordion .eael-tab-top-icon li:nth-of-type(2)::before {
    content: '';
    left: -15px;
    right: initial;
    width: 120vw;
    border-top-left-radius: 1000px;
    border-bottom-left-radius: 1000px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-image: linear-gradient(to right, var(--e-global-color-primary), var(--e-global-color-0b855bb));
    opacity: 0.12;
    z-index: -1;
  }

  .cs-left-accent::after {
    right: -20px;
  }

  .cs-right-accent::after {
    left: -20px;
  }
}

.cs-steps-container.cs-left-path::after {
    content: "";
    position: absolute;
    z-index: 2;
    height: 100px;
    width: 50%;

    top:calc(100% - 40px);
    left: 210px;
    border-left:dashed 1px #3186AB;
       border-bottom:dashed 1px #3186AB;
}


.cs-steps-container.cs-right-path::after {
    content: "";
    position: absolute;
    z-index: 2;
    height: 100px;
    width: 50%;

    top:calc(100% - 40px);
    right: 210px;
    border-right:dashed 1px #3186AB;
       border-bottom:dashed 1px #3186AB;
}

.cs-home-faq .eael-accordion-list {
  position: relative;
  z-index: 1;
  padding: 32px !important;
  margin-bottom: 16px;
  border-radius: 40px;
  background: #fff !important;
}

.cs-home-faq .eael-accordion-list::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(-80deg, var(--e-global-color-primary), var(--e-global-color-0b855bb));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

.cs-home-faq .eael-accordion-header {
  flex-direction: row-reverse;
  padding: 0 !important;
  border: none !important;
}



.cs-home-faq .eael-advanced-accordion-icon-closed,
.cs-home-faq .eael-advanced-accordion-icon-opened {
  position: relative;
  width: 40px;
  height: 40px;
}


.cs-home-faq  .eael-accordion-content {
	margin-top:16px;
	max-width:960px;
}

.cs-home-faq  .fa-accordion-icon  {
	 color: #808080 !important;
}

.cs-home-faq .eael-advanced-accordion-icon-closed i,
.cs-home-faq .eael-advanced-accordion-icon-opened i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
}