/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

:root {

  /* ----------------------------------------------------------
     Schriftgewichte
     ---------------------------------------------------------- */
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-bold:    700;


  /* ----------------------------------------------------------
     Farb-Primitive – Türkis
     ---------------------------------------------------------- */
  --color-turkis-100: #cceeee;
  --color-turkis-200: #99dedd;
  --color-turkis-300: #66cdcb;
  --color-turkis-400: #33bdba;
  --color-turkis-500: #00aca9; /* Default */
  --color-turkis-600: #008a87;
  --color-turkis-700: #006765;
  --color-turkis-800: #004544;
  --color-turkis-900: #002222;

  /* Farb-Primitive – Petrol */
  --color-petrol-50:  #f8fdff;
  --color-petrol-100: #ced9dd;
  --color-petrol-200: #9cb3bb;
  --color-petrol-300: #6b8e98;
  --color-petrol-400: #396876;
  --color-petrol-500: #084254; /* Default */
  --color-petrol-600: #063543;
  --color-petrol-700: #052832;
  --color-petrol-800: #031a22;
  --color-petrol-900: #020d11;

  /* Farb-Primitive – Neutral */
  --color-white:      #ffffff;
  --color-black:      #000000;
  --color-gray-50:    #f1f1f1;
  --color-gray-100:   #e7e7e7;
  --color-gray-200:   #cfcfcf;
  --color-gray-300:   #b7b7b7;
  --color-gray-400:   #9f9f9f;
  --color-gray-500:   #888888;
  --color-gray-600:   #707070;
  --color-gray-700:   #585858;
  --color-gray-800:   #404040;
  --color-gray-900:   #282828;

  /* Farb-Primitive – Error / Success */
  --color-error-300:   #f8b3b3;
  --color-error-400:   #f16666;
  --color-error-500:   #ea1616;
  --color-error-600:   #9a0f0f;
  --color-error-700:   #4d0808;
  --color-success-300: #c6efba;
  --color-success-400: #8ee075;
  --color-success-500: #53cf2d;
  --color-success-600: #37891e;
  --color-success-700: #1b440f;


  /* ----------------------------------------------------------
     Semantische Farb-Tokens – Text
     ---------------------------------------------------------- */
  --text-headings-primary:    var(--color-turkis-500);   /* #00aca9 */
  --text-headings-secondary:  var(--color-petrol-700);   /* #052832 */
  --text-headings-on-color:   var(--color-white);        /* #ffffff */
  --text-body-primary:        var(--color-petrol-900);   /* #020d11 */
  --text-body-on-color:       var(--color-white);        /* #ffffff */
  --text-body-highlighted:    var(--color-turkis-500);   /* #00aca9 */
  --text-action:              var(--color-turkis-500);   /* #00aca9 */
  --text-action-hover:        var(--color-turkis-400);   /* #33bdba */
  --text-action-on-color:     var(--color-white);        /* #ffffff */
  --text-disabled:            var(--color-gray-600);     /* #707070 */
  --text-alert-warning:       var(--color-error-500);    /* #ea1616 */
  --text-alert-success:       var(--color-success-500);  /* #53cf2d */


  /* ----------------------------------------------------------
     Semantische Farb-Tokens – Surface (Hintergründe)
     ---------------------------------------------------------- */
  --surface-dark:                var(--color-petrol-800); /* #031a22 */
  --surface-white:               var(--color-white);      /* #ffffff */
  --surface-gray-light:          var(--color-gray-50);    /* #f1f1f1 */
  --surface-color-light:         var(--color-petrol-50);  /* #f8fdff */
  --surface-action-light:        var(--color-turkis-600); /* #008a87 */
  --surface-action-light-hover:  var(--color-turkis-500); /* #00aca9 */
  --surface-action-dark:         var(--color-petrol-600); /* #063543 */
  --surface-action-dark-hover:   var(--color-petrol-400); /* #396876 */
  --surface-disabled:            var(--color-gray-400);   /* #9f9f9f */
  --surface-alert-error:         var(--color-error-300);  /* #f8b3b3 */
  --surface-alert-success:       var(--color-success-300);/* #c6efba */


  /* ----------------------------------------------------------
     Semantische Farb-Tokens – Border
     ---------------------------------------------------------- */
  --border-color-default:             var(--color-gray-100);   /* #e7e7e7 */
  --border-color-action-light:        var(--color-turkis-500); /* #00aca9 */
  --border-color-action-light-hover:  var(--color-turkis-400); /* #33bdba */
  --border-color-action-dark:         var(--color-petrol-500); /* #084254 */
  --border-color-action-dark-hover:   var(--color-petrol-300); /* #6b8e98 */
  --border-color-focus:               var(--color-turkis-500); /* #00aca9 */
  --border-color-disabled:            var(--color-gray-300);   /* #b7b7b7 */
  --border-color-error:               var(--color-error-400);  /* #f16666 */
  --border-color-success:             var(--color-success-400);/* #8ee075 */


  /* ----------------------------------------------------------
     Semantische Farb-Tokens – Icon
     ---------------------------------------------------------- */
  --icon-primary:              var(--color-turkis-500); /* #00aca9 */
  --icon-secondary:            var(--color-petrol-700); /* #052832 */
  --icon-on-color:             var(--color-white);      /* #ffffff */
  --icon-action-light:         var(--color-turkis-500); /* #00aca9 */
  --icon-action-dark:          var(--color-petrol-500); /* #084254 */
  --icon-disabled:             var(--color-gray-600);   /* #707070 */


  /* ----------------------------------------------------------
     Abstands-Skala
     ---------------------------------------------------------- */
  --space-0:    0px;
  --space-25:   1px;
  --space-50:   2px;
  --space-100:  4px;
  --space-150:  6px;
  --space-200:  8px;
  --space-300:  12px;
  --space-400:  16px;
  --space-500:  20px;
  --space-600:  24px;
  --space-700:  28px;
  --space-800:  32px;
  --space-900:  40px;
  --space-1000: 48px;
  --space-1100: 56px;
  --space-1200: 64px;
  --space-1300: 72px;
  --space-1400: 80px;


  /* ----------------------------------------------------------
     Ecken-Radien
     ---------------------------------------------------------- */
  --radius-none:  0px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-round: 9999px;


  /* ----------------------------------------------------------
     Rahmen-Breiten
     ---------------------------------------------------------- */
  --border-width-none: 0px;
  --border-width-sm:   1px;
  --border-width-md:   2px;
  --border-width-lg:   4px;


  /* ----------------------------------------------------------
     Typografie – Desktop (1440px)
     Variablen-Namen entsprechen den Figma-Token-Namen
     ---------------------------------------------------------- */

  /* h-xxxl */
  --h-xxxl-font-size:        112px;
  --h-xxxl-line-height:      112px;
  --h-xxxl-paragraph-spacing: 64px;
	
  /* h-xxl */
  --h-xxl-font-size:        72px;
  --h-xxl-line-height:      84px;
  --h-xxl-paragraph-spacing: 64px;
	
  /* h-xl */
  --h-xl-font-size:        60px;
  --h-xl-line-height:      72px;
  --h-xl-paragraph-spacing: 64px;

  /* h-lg */
  --h-lg-font-size:        48px;
  --h-lg-line-height:      56px;
  --h-lg-paragraph-spacing: 48px;

  /* h-md */
  --h-md-font-size:        40px;
  --h-md-line-height:      48px;
  --h-md-paragraph-spacing: 32px;

  /* h-sm */
  --h-sm-font-size:        32px;
  --h-sm-line-height:      40px;
  --h-sm-paragraph-spacing: 28px;

  /* h-xs */
  --h-xs-font-size:        24px;
  --h-xs-line-height:      32px;
  --h-xs-paragraph-spacing: 20px;

  /* h-xxs */
  --h-xxs-font-size:       20px;
  --h-xxs-line-height:     28px;
  --h-xxs-paragraph-spacing: 20px;

  /* p-x-large */
  --p-x-large-font-size:        24px;
  --p-x-large-line-height:      32px;
  --p-x-large-paragraph-spacing: 20px;

  /* p-large */
  --p-large-font-size:        20px;
  --p-large-line-height:      28px;
  --p-large-paragraph-spacing: 20px;

  /* p-medium */
  --p-medium-font-size:        16px;
  --p-medium-line-height:      20px;
  --p-medium-paragraph-spacing: 20px;

  /* p-small */
  --p-small-font-size:        12px;
  --p-small-line-height:      16px;
  --p-small-paragraph-spacing: 20px;

  /* p-x-small */
  --p-x-small-font-size:        10px;
  --p-x-small-line-height:      14px;
  --p-x-small-paragraph-spacing: 20px;

}


/* ============================================================
   MOBILE OVERRIDES (640px)
   ============================================================ */

@media (max-width: 640px) {
  :root {
	  
	/* h-xxxl */
	--h-xxxl-font-size:        48px;
	--h-xxxl-line-height:      56px;
	
	  
	/* h-xxl */
	--h-xxl-font-size:        32px;
	--h-xxl-line-height:      40px;
	
	  
    /* h-xl → 48 / 56 */
    --h-xl-font-size:    32px;
    --h-xl-line-height:  40px;

    /* h-lg → 40 / 48 */
    --h-lg-font-size:    32px;
    --h-lg-line-height:  40px;

    /* h-md → 32 / 40 */
    --h-md-font-size:    24px;
    --h-md-line-height:  32px;

    /* h-sm → 24 / 32 */
    --h-sm-font-size:    20px;
    --h-sm-line-height:  28px;

    /* h-xs → 20 / 24 */
    --h-xs-font-size:    20px;
    --h-xs-line-height:  28px;

    /* h-xxs → 20 / 24 */
    --h-xxs-font-size:   18px;
    --h-xxs-line-height: 28px;

    /* p-x-large → 20 / 24 */
    --p-x-large-font-size:   18px;
    --p-x-large-line-height: 28px;

    /* p-large → 18 / 28 */
    --p-large-font-size:   18px;
    --p-large-line-height: 28px;

    /* p-medium → 14 / 18 */
    --p-medium-font-size:   18px;
    --p-medium-line-height: 28px;

    /* p-small → unverändert 12 / 16 */
    /* p-x-small → unverändert 10 / 14 */
  }
}


/* ============================================================
   TYPOGRAFIE-KLASSEN
   Fertige, wiederverwendbare Klassen für Entwickler
   ============================================================ */

/* --- Überschriften (Gilroy Bold) --- */

.h-xxxl,
.h-xxxl :is(h1, h2, h3, h4, h5, h6) {
  font-size:     var(--h-xxxl-font-size) !important;
  line-height:   var(--h-xxxl-line-height) !important;
  font-style:    normal !important;
  letter-spacing: 0 !important;
}

.h-xxl,
.h-xxl :is(h1, h2, h3, h4, h5, h6) {
  font-size:     var(--h-xxl-font-size) !important;
  line-height:   var(--h-xxl-line-height) !important;
  font-style:    normal !important;
  letter-spacing: 0 !important;
}

.h-xl,
.h-xl :is(h1, h2, h3, h4, h5, h6) {
  font-size:     var(--h-xl-font-size) !important;
  line-height:   var(--h-xl-line-height) !important;
  font-style:    normal !important;
  letter-spacing: 0 !important;
}

.h-lg,
.h-lg :is(h1, h2, h3, h4, h5, h6) {
  font-size:     var(--h-lg-font-size) !important;
  line-height:   var(--h-lg-line-height) !important;
  font-style:    normal !important;
  letter-spacing: 0 !important;
}

.h-md,
.h-md :is(h1, h2, h3, h4, h5, h6) {
  font-size:     var(--h-md-font-size) !important;
  line-height:   var(--h-md-line-height) !important;
  font-style:    normal !important;
  letter-spacing: 0 !important;
}

.h-sm,
.h-sm :is(h1, h2, h3, h4, h5, h6) {
  font-size:     var(--h-sm-font-size) !important;
  line-height:   var(--h-sm-line-height) !important;
  font-style:    normal !important;
  letter-spacing: 0 !important;
}

.h-xs,
.h-xs :is(h1, h2, h3, h4, h5, h6) {
  font-size:     var(--h-xs-font-size) !important;
  line-height:   var(--h-xs-line-height) !important;
  font-style:    normal !important;
  letter-spacing: 0 !important;
}

.h-xxs,
.h-xxs :is(h1, h2, h3, h4, h5, h6) {
  font-size:     var(--h-xxs-font-size) !important;
  line-height:   var(--h-xxs-line-height) !important;
  font-style:    normal !important;
  letter-spacing: 0 !important;
}


/* --- Fließtext (Inter) --- */

.p-xl,
.p-xl p {
  font-size:    var(--p-x-large-font-size) !important;
  line-height:  var(--p-x-large-line-height) !important;
  letter-spacing: 0 !important;
}

.p-lg,
.p-lg p {
  font-size:    var(--p-large-font-size) !important;
  line-height:  var(--p-large-line-height) !important;
  letter-spacing: 0 !important;
}

.p-md,
.p-md p {
  font-size:    var(--p-medium-font-size) !important;
  line-height:  var(--p-medium-line-height) !important;
  letter-spacing: 0 !important;
}

.p-sm,
.p-sm p {
  font-size:    var(--p-small-font-size) !important;
  line-height:  var(--p-small-line-height) !important;
  letter-spacing: 0 !important;
}

.p-xs,
.p-xs p {
  font-size:    var(--p-x-small-font-size) !important;
  line-height:  var(--p-x-small-line-height) !important;
  letter-spacing: 0 !important;
}


/* --- Schriftgewicht-Hilfklassen --- */

.font-light   { font-weight: var(--font-weight-light); }
.font-regular { font-weight: var(--font-weight-regular); }
.font-bold    { font-weight: var(--font-weight-bold); }


/* --- Textfarben (semantisch) --- */

.text-heading-primary    { color: var(--text-headings-primary); }
.text-heading-secondary  { color: var(--text-headings-secondary); }
.text-heading-on-color   { color: var(--text-headings-on-color); }
.text-body-primary       { color: var(--text-body-primary); }
.text-body-on-color      { color: var(--text-body-on-color); }
.text-highlighted        { color: var(--text-body-highlighted); }
.text-action             { color: var(--text-action); }
.text-disabled           { color: var(--text-disabled); }


  /* ----------------------------------------------------------
     Links
     ---------------------------------------------------------- */
.footer-link a {
	color: #ffffff;
}

.footer-link a:hover {
	color: #99DEDD;
}

  /* ----------------------------------------------------------
     Backgrounds
     ---------------------------------------------------------- */
.bg-icon-small > div{
	background-position-x: 20px!important;
}

.home-hero{
	margin: 20px -10px!important;
}

.hero-mobile-video-bg video {
/*	transform: translateX(-50%)!important;
	top: -20%!important;*/
	width: 100%!important;
}

.overlay-header {
  position: absolute !important;
  top: 20px!important;
  left: 0!important;
  width: 100%;
  z-index: 9999!important;
}

.height-100 > img{
	height: 100!important%;
	width: auto!important;
}

/* Icon drehen */
.btn-rotate i.fa-arrow-right {
  transform: rotate(-45deg); /* nach rechts oben */
  display: inline-block;
  transition: transform 0.3s ease; /* optional: sanfte Animation */
  padding: 5px;
  border-radius: 100%;
	color: #ffffff!important;
}

.btn-rotate.dark-btn i.fa-arrow-right {
	background-color: #063543!important;
}

.btn-rotate.light-btn i.fa-arrow-right {
	background-color: #008a87!important;
}

.btn-nav:hover {
	background-color: #66CDCB;
}

.btn {
	width: 320px !important;
	justify-content: space-between !important;
}



.contact-form-input-field {
	margin: 0 0 16px 0!important;
}

.contact-form-input-field > input,
.contact-form-input-field > textarea{
	background-color: #ffffff!important;
	border-radius: 0!important;
	border: none!important;
	border-bottom: 1px solid #00aca9!important;
}

.contact-form-consent-field .fusion-form-checkbox > label{
	color: #ffffff !important;
}

.contact-form-consent-field .fusion-form-checkbox label:before{
  	align-items: flex-start!important;
	top: 0!important;
	transform: none!important;
	margin-right: 0px!important;
	border-color: #99DEDD;
}

.contact-form-consent-field .fusion-form-checkbox label:after{
  	align-items: flex-start!important;
	top: 4px!important;
	transform: none!important;
	margin-right: 0px!important;
		border-color: #99DEDD;
}

.custom-toggle h2{
	width: 80%!important;
}

.custom-toggle .panel-title a .fa-fusion-box:before {
    font-size: 40px !important;
}

.custom-toggle-btn {
	text-decoration: underline;
}

.fusion-slider-container .flex-control-paging {
    display: flex!important;
    flex-direction: column!important;  
    gap: 10px!important;
    
    position: absolute!important;
    right: 0px!important;
    top: 50%!important;
    transform: translateY(-50%)!important;
    width: auto!important;
	justify-content: center!important;
}

/* Grundstyling alle Dots */
.fusion-slider-container .flex-control-paging li a {
    width: 20px!important;
    height: 20px!important;
    border-radius: 50%!important;
    background: transparent!important;
    border: 2px solid #00aca9!important;
    box-shadow: none!important;
}

/* Aktiver Dot */
.fusion-slider-container .flex-control-paging li a.flex-active {
    background: #00aca9!important;
    border: 1px solid #00aca9!important;
}


/* Basis - Liste zurücksetzen */
.custom-list ul {
    list-style: none!important;
    padding-left: 0!important;
    margin-left: 0!important;
}

.custom-list ul li {
    display: flex!important;
    align-items: center!important;
    gap: 10px!important;
    margin-bottom: 8px!important;
}

/* SVG Bullet als Pseudo-Element */
.custom-list ul li::before {
    content: ""!important;
    display: inline-block!important;
    width: 6px!important;
    height: 6px!important;
    min-width: 6px!important;
    border-radius: 50%!important;
    background: transparent!important;
}

/* Farbe 1 - Türkis */
.custom-list.bullet-color-secondary ul li::before {
    border: 3px solid #052832!important;
}

/* Farbe 2 - Weiß */
.custom-list.bullet-color-white ul li::before {
    border: 3px solid #ffffff!important;
}

@media (max-width: 1024px) {
	.image-rotate{
		transform: rotate(90deg)!important;
	}

	/* ----------------------------------------------------------
     Column Order
     ---------------------------------------------------------- */

    .tablet-col-order-1 { order: 1 !important; } 
    .tablet-col-order-2 { order: 2 !important; } 
    .tablet-col-order-3 { order: 3 !important; } 
    .tablet-col-order-4 { order: 4 !important; } 

}
@media only screen and (max-width: 640px) {
    .max-height-200 .fusion-builder-row-inner {
		max-height: 200px!important;
	}
	.custom-toggle h2{
	width: auto!important;
  }
	
	.home-hero{
	margin: 0px!important;
	}
	
	.btn {
		width: 280px!important;
	}
}


	/* ----------------------------------------------------------
     Custom Accordeon
     ---------------------------------------------------------- */

.custom-accordeon-toggle-more {
	text-decoration: underline;
}

#custom-accordeon-toggle {    cursor: pointer;} .custom-accordeon-toggle-more {    text-decoration: underline;}

.invisible {
	display: none!important;
}