/*
 Theme Name:   SuS Data Shield
 Theme URI:    https://www.neckarmedia.com
 Description:  SuS Data Shield WordPress child theme
 Author:       Neckarmedia
 Author URI:   https://www.neckarmedia.com
 Template:     sus
 Version:      1.0
*/

/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lato-v23-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/lato-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/lato-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/lato-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/lato-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/lato-v23-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/lato-v23-latin-700.eot'); /* IE9 Compat Modes */
  src: url('fonts/lato-v23-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/lato-v23-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/lato-v23-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/lato-v23-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/lato-v23-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}
/* catamaran-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/catamaran-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/catamaran-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/catamaran-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/catamaran-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/catamaran-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/catamaran-v17-latin-regular.svg#Catamaran') format('svg'); /* Legacy iOS */
}
/* catamaran-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/catamaran-v17-latin-600.eot'); /* IE9 Compat Modes */
  src: url('fonts/catamaran-v17-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/catamaran-v17-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/catamaran-v17-latin-600.woff') format('woff'), /* Modern Browsers */
       url('fonts/catamaran-v17-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/catamaran-v17-latin-600.svg#Catamaran') format('svg'); /* Legacy iOS */
}
/* catamaran-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/catamaran-v17-latin-800.eot'); /* IE9 Compat Modes */
  src: url('fonts/catamaran-v17-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/catamaran-v17-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/catamaran-v17-latin-800.woff') format('woff'), /* Modern Browsers */
       url('fonts/catamaran-v17-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/catamaran-v17-latin-800.svg#Catamaran') format('svg'); /* Legacy iOS */
}

:root{
  --primary-color: #A2525D;
  --black: #2B2118;
  --light-grey: #F5F5F5;
  --box-shadow: 0 10px 50px rgb(0 0 0 / 15%), 0 5px 10px rgb(0 0 0 / 5%);
}

/* @link https://utopia.fyi/type/calculator?c=375,16,1.2,1660,20,1.25,5,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--1: clamp(0.83rem, calc(0.78rem + 0.21vw), 1.00rem);
  --step-0: clamp(1.00rem, calc(0.93rem + 0.31vw), 1.25rem);
  --step-1: clamp(1.20rem, calc(1.09rem + 0.45vw), 1.56rem);
  --step-2: clamp(1.44rem, calc(1.29rem + 0.64vw), 1.95rem);
  --step-3: clamp(1.73rem, calc(1.52rem + 0.89vw), 2.44rem);
  --step-4: clamp(2.07rem, calc(1.79rem + 1.22vw), 3.05rem);
  --step-5: clamp(2.49rem, calc(2.10rem + 1.65vw), 3.82rem);
}

:root{
    --space-xl-xl: clamp(3.00rem, calc(2.78rem + 0.93vw), 3.75rem);
    --space-xl-2xl: clamp(3.00rem, calc(2.42rem + 2.49vw), 5.00rem);
    --space-xl-3xl: clamp(3.00rem, calc(1.69rem + 5.60vw), 7.50rem);
}


/* =======================================================================================================================================
Typo
======================================================================================================================================= */
html{-webkit-tap-highlight-color: transparent;}
body{-webkit-font-smoothing: antialiased;}
body,p{font-family: 'Lato', sans-serif; font-size: var(--step-0); line-height: 1.6}
h1,h2,h3,h4,h5,h6{font-family: 'Catamaran', 'Lato', sans-serif; letter-spacing: 0 !important; font-weight: 400; line-height: 1.1; margin: 0 0 .5em 0 !important; text-transform: inherit !important; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; float: unset !important;}
small{display: inline-block; font-size: 70%}

#top .main_color p a{color: var(--primary-color); font-weight: 700}
#top .alternate_color p a{color: #ffabb6; font-weight: 700}
#top .special_amp{color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;}
#top .special-heading-border{display: none;}

#top h1, .h1{font-size: var(--step-5);}
#top h2, .h2{font-size: var(--step-4);}
#top h3, .h3{font-size: var(--step-2);}
#top h4, .h4{font-size: var(--step-1);}

#top h1 b, #top h1 strong{font-weight: 800}
#top h2 b, #top h2 strong{font-weight: 800}

#top .av-special-heading.__line .av-special-heading-tag:after{content: ''; width: 3em; height: .1em; background: var(--primary-color); display: block; margin: .5em 0}
#top .av-special-heading.__line.modern-centered .av-special-heading-tag:after{margin-left: auto; margin-right: auto;}


#top .avia_textblock p:first-of-type{margin-top: 0;}

/* Buttons */
#top .avia-button-wrap{display: block;}
#top .avia-button{
    font-size: var(--step--1); 
    text-transform: uppercase; 
    background: var(--primary-color); 
    border: 2px solid var(--primary-color) !important;
    color: #fff;
    padding: 1em 3em;
    border-radius: .5em;
    font-weight: 700;
    letter-spacing: .05em;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    margin: 1em 1em 1em 0;
    -webkit-transition: .2s ease;
    -o-transition: .2s ease;
    transition: .2s ease;
}
#top .avia-button span{position: relative;}
#top .avia-button.avia-color-dark{color: var(--primary-color);}
#top .avia-button.avia-color-dark:hover{color: #fff}
#top .avia-button.avia-color-light{border-color: #fff !important}

#top .avia-button:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: hsl(352deg 33% 33%);
    -webkit-transform: skewX(45deg) translateX(-90%);
        -ms-transform: skewX(45deg) translateX(-90%);
            transform: skewX(45deg) translateX(-90%);
    opacity: 0;
    -webkit-transition: .2s ease;
    -o-transition: .2s ease;
    transition: .2s ease;
}
#top .avia-button:hover{opacity: 1}
#top .avia-button:hover:before{
    opacity: 1; 
    -webkit-transform: skewX(0) translateX(0);
    -ms-transform: skewX(0) translateX(0);
    transform: skewX(0) translateX(0);
}


/* =======================================================================================================================================
Header
======================================================================================================================================= */
#top #header_main{border-bottom: 1px solid var(--light-grey);}

@media only screen and (max-width: 989px){ 
    #top #header{height: 80px !important; background: #fff}
    #top #wrap_all .av-logo-container,
    #top #header_main > .container .main_menu .av-main-nav > li > a{height: 80px !important; line-height: 80px !important;}
}

@media only screen and (min-width: 990px) and (max-width: 1439px){
    #top #header_main > .container{height: 140px !important;}
}

/* Logo */
@media only screen and (max-width: 989px){ 
    #header_main .inner-container > .logo{
        position: absolute;
        width: 120px !important;
        height: 120px !important;
        background: #fff;
        -webkit-box-shadow: 0 5px 15px rgb(0 0 0 / 10%);
                box-shadow: 0 5px 15px rgb(0 0 0 / 10%);
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        display: -ms-grid;
        display: grid;
        place-content: center;
    }
    #header_main .inner-container > .logo a svg{height: auto; width: 100px}
}

@media only screen and (min-width: 990px){
    #header_main .inner-container > .logo,
    #header_main .inner-container > .logo a{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
    #header_main .inner-container > .logo a svg{width: 120px}
}

@media only screen and (min-width: 1440px){
    #header_main .inner-container > .logo a svg{width: 200px}
}

/* Navigation */
@media only screen and (min-width: 990px){
    #header_main .inner-container > nav.main_menu{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; height: 60%; top: unset; bottom: 0;}
    #header_main .inner-container > nav.main_menu > div,
    #header_main .inner-container > nav.main_menu ul#avia-menu{height: 100%;}
    #header_main .inner-container > nav.main_menu ul#avia-menu > li:not(.av-burger-menu-main){height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
    #header_main .inner-container > nav.main_menu ul#avia-menu > li > a{text-transform: uppercase; font-weight: 700; font-size: 12px; padding: 0 1em; line-height: unset !important; height: unset !important; -webkit-transition: .1s ease; -o-transition: .1s ease; transition: .1s ease}
    #header_main .inner-container > nav.main_menu ul#avia-menu > li > a:hover{color: var(--primary-color);}
    #header_main .inner-container > nav.main_menu ul#avia-menu > li.current-menu-item > a:before{content: ''; height: .4em; width: calc(100% - 1.5em); background: var(--primary-color); position: absolute; bottom: 0; left: 50%; translate: -50% 0}
    #header_main .inner-container > nav.main_menu ul#avia-menu > li.dropdown_ul_available > a .avia-menu-text:after{content: '\e873'; font-family: 'entypo-fontello'; display: inline-block; margin: 0 0 0 .75em}
    #header_main .inner-container > nav.main_menu ul#avia-menu > li > ul.sub-menu{border-radius: 1rem; overflow: hidden; padding: .5em 0; top: calc(100% - 1em); width: auto;}
    #header_main .inner-container > nav.main_menu ul#avia-menu > li > ul.sub-menu > li a{border: 0; font-size: var(--step--1); padding: .5em 1.5em; font-weight: 700; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-transition: .1s ease; -o-transition: .1s ease; transition: .1s ease}
    #header_main .inner-container > nav.main_menu ul#avia-menu > li > ul.sub-menu > li a:before{content: '\e875'; font-family: 'entypo-fontello'; display: inline-block; margin: 0 .75em 0 0; color: var(--primary-color);}
}

@media only screen and (min-width: 1440px){
   #header_main .inner-container > nav.main_menu ul#avia-menu > li > a{font-size: 16px} 
}

@media only screen and (min-width: 1920px){
   #header_main .inner-container > nav.main_menu{padding-right: 5%}
   #header_main .inner-container > nav.main_menu ul#avia-menu > li > a{font-size: 18px; padding: 0 1.5em} 
}

/* Burger menu */
.av-burger-overlay-inner, 
.av-burger-overlay-bg{text-align: left;}
.av-burger-overlay-bg{background: var(--primary-color); opacity: 1}
.av-burger-overlay-inner, .av-burger-overlay-bg{min-height: inherit;}
#top #wrap_all #header #av-burger-menu-ul{vertical-align: top; padding-top: 6rem !important}
#top #wrap_all #header #av-burger-menu-ul li{padding: 0}
#top #wrap_all #header #av-burger-menu-ul li a:focus,
#top #wrap_all #header #av-burger-menu-ul li a:hover{opacity: 1 !important}
#top #wrap_all #header #av-burger-menu-ul > li > a{padding: .5em 1em; line-height: 1.6; font-size: var(--step-2);}
#top #wrap_all #header #av-burger-menu-ul > li > ul{padding: 0 0 0 1em;}
#top #wrap_all #header #av-burger-menu-ul > li > ul > li > a{font-size: var(--step-1);}
#top #wrap_all #header #av-burger-menu-ul > li > a .av-submenu-indicator{opacity: 1; font-size: 20px}
#top #wrap_all #header #av-burger-menu-ul > li > a .av-submenu-indicator:before{content: "\E875";}

/* Header Meta Info */
#top #header_meta_info{display: none;}

@media only screen and (min-width: 990px){
    #top #header_meta_info{position: absolute; right: 0; height: 40%; line-height: 1.1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
    #top #header_meta_info .__wrap ul{display: -webkit-box;display: -ms-flexbox;display: flex; margin: 0;}
    #top #header_meta_info .__wrap ul > li > a{font-size: var(--step--1); padding-left: 1em; margin-left: 1em; border-left: 1px solid var(--primary-color); font-weight: 700; color: #6E6E5D}
    #top #header_meta_info .__wrap ul > li > a:hover{color: var(--primary-color);}
    #top #header_meta_info .__wrap ul > li.__h > a{color: var(--primary-color);}
    #top #header_meta_info .__wrap ul > li.__h > a i{margin: 0 1em; display: inline-block; -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);}
    #top #header_meta_info .__wrap ul > li:first-child > a{border: 0}
}

@media only screen and (min-width: 1920px){
    #top #header_meta_info{padding-right: calc(30px + 5%)}
}


/* =======================================================================================================================================
Misc
======================================================================================================================================= */
/* Layout */
#top .avia-section-default .container .content{padding: var(--space-xl-xl) 0}
#top .avia-section-huge .container .content{padding: var(--space-xl-3xl) 0}

@media only screen and (max-width: 767px){
    .responsive #top #wrap_all .container{width: 90%; max-width: 90%;}
}

/* Images */
#top .image-overlay{display: none !important;}

/* Arrow list */
#top ul.__arrow{list-style: none; margin: 0}
#top ul.__arrow > li{margin: 0; padding: 0 0 0 2em; position: relative;}
#top ul.__arrow > li:before{content: '\e802'; font-family: 'sus-fontello'; position: absolute; left: 0; color: var(--primary-color);}

/* Icon list */
#top ul.__icon--list{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#top ul.__icon--list > li{position: relative; padding-left: 2em}
#top ul.__icon--list > li:before{content: '\e875'; font-family: 'entypo-fontello'; position: absolute; left: 0; width: 1.5em; text-align: center;}
#top ul.__icon--list > li.__map:before{content: '\e842'}
#top ul.__icon--list > li.__clock:before{content: '\e862'}
#top ul.__icon--list > li.__email:before{content: '\e805'}
#top ul.__icon--list > li.__phone:before{content: '\e8ac'}

@media only screen and (min-width: 768px){
    #top ul.__icon--list{gap: 1em}
}

/* Avia Icon List */
#top ul.avia-icon-list li{margin: 1em 0;}
#top ul.avia-icon-list li .av_iconlist_title{font-weight: 700}
#top .main_color ul.avia-icon-list li .iconlist-char{color: var(--primary-color);}

/* Toggle */
#top .single_toggle .toggler{font-weight: 700; margin: 0 0 1em 0; border: 1px solid #B2B2B2; border-radius: .5em; padding: 5% 5rem 5% 5%; background: transparent}
#top .single_toggle .toggler:after{content: '\e807'; font-family: 'sus-fontello'; position: absolute; right: 2em; top: 2em; color: var(--primary-color); scale: 1.5; -webkit-transition: .2s ease; -o-transition: .2s ease; transition: .2s ease}
#top .single_toggle .toggler:hover{background: transparent;}
#top .single_toggle .toggler.activeTitle:after{rotate: 45deg}
#top .single_toggle .toggler .toggle_icon{display: none;}
#top .single_toggle .toggle_content{margin: 0 0 2em 0; border: 0; padding: 0 5% 0; background: transparent;}
#top .single_toggle .toggle_content p,
#top .single_toggle .toggle_content ul{font-size: var(--step--1);}

#top .alternate_color .single_toggle .toggler{border-color: #ffabb6}
#top .alternate_color .single_toggle .toggler:after{color: #fff}

/* Swiper Global */
#top .swiper-pagination-bullet-active{background: var(--primary-color);}
#top .swiper-button-next,
#top .swiper-button-prev{color: var(--black);}

/* Tippy JS */
#top [data-tippy-content]{cursor: pointer;}


/* =======================================================================================================================================
Magnific Popup 
======================================================================================================================================= */
.mfp-box{
    background: white;
    padding: 20px 30px;
    text-align: left;
    max-width: 600px;
    margin: 40px auto;
    position: relative;
}
.mfp-box p{font-size: var(--step--1);}
.mfp-box *{color: #000}

.my-mfp-zoom-in .zoom-anim-dialog {
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
    -webkit-transform: scale(0.8); 
    -moz-transform: scale(0.8); 
    -ms-transform: scale(0.8); 
    -o-transform: scale(0.8); 
    transform: scale(0.8); 
}
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
    opacity: 1;
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    transform: scale(1); 
}
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
    -webkit-transform: scale(0.8); 
    -moz-transform: scale(0.8); 
    -ms-transform: scale(0.8); 
    -o-transform: scale(0.8); 
    transform: scale(0.8); 
    opacity: 0;
}
.my-mfp-zoom-in.mfp-bg {
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-out; 
    -moz-transition: opacity 0.3s ease-out; 
    -o-transition: opacity 0.3s ease-out; 
    transition: opacity 0.3s ease-out;
}
.my-mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 0.8;
}
.my-mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0;
}


/* =======================================================================================================================================
Contact Form
======================================================================================================================================= */
/* Form Style */
#top form{
    --form-color: #000; 
    --form-border-color: var(--primary-color); 
    --form-font-family: 'Lato';
}
#top .alternate_color form{
    --form-color: #fff; 
    --form-border-color: #fff; 
}

#top form a{color: var(--primary-color)}
#top form p{font-size: var(--step--1);}
#top form input:not([type="checkbox"]),
#top form select,
#top form textarea{
    padding: 1em !important; 
    border-radius: .25em !important; 
    border: 1px solid var(--form-border-color) !important; 
    color: var(--form-color) !important; 
    font-size: 1rem !important; 
    margin: 0 !important; 
    background-color: transparent !important;
    font-family: var(--form-font-family) !important;
    height: auto;
}

#top form label{
    font-size: var(--step--1); 
    font-weight: 700; 
    margin: 0 0 .25em .75em;
    color: var(--black);
}

#top form [type="submit"]{
    font-size: var(--step--1);
    text-transform: uppercase;
    background: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
    color: #fff !important;
    padding: 1em 3em !important;
    border-radius: 0.5em;
    font-weight: 700;
    letter-spacing: .05em;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    margin: 0;
    -webkit-transition: .2s ease;
    -o-transition: .2s ease;
    transition: .2s ease;
}

#top form span.frm_required{color: var(--primary-color); font-weight: 700}
#top .frm_message p{margin: 0 !important;}


/* =======================================================================================================================================
Footer
======================================================================================================================================= */
#footer{padding: var(--space-xl-2xl) 0; font-weight: 700}
#footer .widget{margin: 0}
#footer h3.widgettitle{font-size: var(--step-2); margin: 0 0 1em 0 !important; position: relative;}
#footer h3.widgettitle:after{content: ''; width: 5rem; height: 4px; background: var(--primary-color); display: block; margin: 1em 0 0 0}
#footer .widget_nav_menu ul.menu > li > a{font-size: var(--step-0); font-weight: 700; padding: 0}

#footer .container{display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 2rem}
#footer .container .flex_column{margin: 0 !important; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: 100%; min-width: 100%}

@media only screen and (min-width: 768px){
    #footer h3.widgettitle{margin: 0 0 2em 0 !important;}
    #footer .container .flex_column:nth-child(1){border-bottom: 1px solid var(--primary-color); margin-bottom: 1rem; padding-bottom: 1rem}
    #footer .container .flex_column:nth-child(2),
    #footer .container .flex_column:nth-child(3){width: auto; min-width: unset;}
}

@media only screen and (min-width: 990px){
    #footer .container .flex_column:nth-child(1){width: auto; min-width: unset; border: 0; margin: 0; padding: 0}
}

#socket{border: 0; font-size: var(--step--1); padding: 1rem 0; font-weight: 700}

#scroll-top-link{display: none;}


/* =======================================================================================================================================
Hero 
======================================================================================================================================= */
#top .__hero .content{padding-top: calc( 2 *  var(--space-xl-2xl) ) !important;}
#top .__hero .__hero-teaser{margin-top: var(--space-xl-2xl);}
#top .__hero h1{font-size: var(--step-3);}

@media only screen and (min-width: 990px){
    #top .__hero{position: relative;}
    #top .__hero:before{
        content: '';
        width: 25%;
        height: 20%;
        border-top: 1rem solid #E2E2E2;
        background: #F5F5F5;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    #top .__hero:after{
        content: '';
        background-image: url('img/hero/hero-larissa.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom left;
        width: 40%;
        height: 100%;
        position: absolute;
        left: 60%;
        top: 0;
        bottom: 0;
    }
    #top .__hero .__hero-teaser{margin-bottom: -100px}
    #top .__hero h1{font-size: var(--step-5)}
}


/* =======================================================================================================================================
Hero Teaser shortcode [hero-teaser]
======================================================================================================================================= */
#top .__hero-teaser{}
#top .__hero-teaser > section{
    max-width: 1280px;
    overflow-x: scroll; 
    -ms-scroll-snap-type: x mandatory; 
        scroll-snap-type: x mandatory;
    scrollbar-width: none; 
    -ms-overflow-style: none;
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    gap: 2px;
    background: var(--light-grey);
    border-top-left-radius: .5rem; 
    border-top-right-radius: .5rem; 
    border-bottom: 1rem solid #E2E2E2;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
}
#top .__hero-teaser > section::-webkit-scrollbar{display: none;}
#top .__hero-teaser > section > article{
    background: #fff; 
    padding: clamp(30px, 5vw, 60px); 
    -ms-flex-preferred-size: 0; 
    flex-basis: 0; 
    -webkit-box-flex: 1; 
    -ms-flex-positive: 1; 
    flex-grow: 1; 
    min-width: 280px;
    scroll-snap-align: start;
}
#top .__hero-teaser > section > article > span{color: #e2e2e2; font-size: var(--step-2); text-decoration: underline; text-decoration-color: var(--primary-color); text-underline-offset: .5em; display: inline-block; line-height: 1; margin: 0 0 .5em 0; font-weight: 700}
#top .__hero-teaser > section > article > p{font-weight: 700;}
#top .__hero-teaser > section > article > a{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8%}
#top .__hero-teaser > section > article > a i{font-size: var(--step-5); color: var(--primary-color);}
#top .__hero-teaser > section > article > a b{color: var(--primary-color); text-decoration: underline; text-underline-offset: .5em; text-decoration-thickness: 0.05em; margin: .5em 0 0 0; display: inline-block; font-size: var(--step--1); text-transform: uppercase;}

@media only screen and (min-width: 1440px){
    #top .__hero-teaser > section > article > p{font-size: var(--step-1);}
}


/* =======================================================================================================================================
Section after Hero 
======================================================================================================================================= */
@media only screen and (min-width: 990px){
    #top .__section--after--hero{position: relative;}
    #top .__section--after--hero:before{
        content: '';
        width: 25%;
        height: 100%;
        background: #F5F5F5;
        position: absolute;
        bottom: 0;
        left: 0;
    }
}


/* =======================================================================================================================================
Styled section - 1 shortcode [styled-section-1]
======================================================================================================================================= */
#top .__styled--section--1 .__wrap > figure{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-width: 420px}
#top .__styled--section--1 .__wrap > figure img{border-radius: var(--step--1); -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow)}
#top .__styled--section--1 .__wrap > figure img:nth-child(1){max-width: 80%; -ms-flex-item-align: end; -ms-grid-row-align: end; align-self: end; margin-bottom: -40%;}
#top .__styled--section--1 .__wrap > figure img:nth-child(2){max-width: 60%}

#top .__styled--section--1 .__wrap .__text--bg{position: relative; margin: var(--space-xl-2xl) 0}
#top .__styled--section--1 .__wrap .__text--bg:before{content: '0%'; position: absolute; left: 0; top: 50%; translate: 0 -50%; font-family: 'Catamaran'; font-weight: 800; line-height: 1; color: var(--light-grey); font-size: calc( 4 * var(--step-5) ); z-index: -1}
#top .__styled--section--1 .__wrap .__text--bg p{margin: 0; border-left: 4px solid var(--primary-color); padding-left: 1em; font-weight: 700; line-height: 1.1}
#top .__styled--section--1 .__wrap .__text--bg h3{font-size: var(--step-4); margin: .25em 0 0 0 !important}



#top .__styled--section--1 .__wrap .__highlight--block > div:nth-child(2) b{color: #fff; background: #27213C; padding: 1em .5em; font-size: var(--step-2); display: inline-block; border-top-left-radius: 1rem; font-weight: 600; font-family: 'Catamaran'; line-height: 1.2; position: relative; max-width: 100px}
#top .__styled--section--1 .__wrap .__highlight--block > div:nth-child(2) b:before{content: ''; width: 100%; height: 100%; background: #E2E2E2; position: absolute; top: -.5em; left: -.5em; z-index: -1; border-top-left-radius: 1rem;}
#top .__styled--section--1 .__wrap .__highlight--block > div:nth-child(2) p{font-size: 12px; text-transform: uppercase; line-height: 1.2; font-weight: 700;}

@media only screen and (min-width: 768px){
    #top .__styled--section--1 .__wrap .__highlight--block{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
    #top .__styled--section--1 .__wrap .__highlight--block > div{-ms-flex-preferred-size: 0;flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1}
    #top .__styled--section--1 .__wrap .__highlight--block .avia-icon-list-container{padding-right: 2em; border-right: 4px solid var(--primary-color);}
    #top .__styled--section--1 .__wrap .__highlight--block > div:nth-child(2){display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5% 0}
    #top .__styled--section--1 .__wrap .__highlight--block > div:nth-child(2) p{text-align: center;}
}

@media only screen and (min-width: 990px){
    #top .__styled--section--1 .__wrap{display: -webkit-box;display: -ms-flexbox;display: flex; gap: 4%; -ms-flex-wrap: wrap; flex-wrap: wrap;}
    #top .__styled--section--1 .__wrap > *{-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0;}
}


/* =======================================================================================================================================
Leistungen shortcode [leistungen]
======================================================================================================================================= */
#top .__leistungen > section{display: -webkit-box;display: -ms-flexbox;display: flex; gap: 1rem; overflow-x: scroll; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;}
#top .__leistungen > section::-webkit-scrollbar{display: none;}
#top .__leistungen > section > article{min-height: clamp(280px, 20vw, 480px); min-width: 280px; background: var(--primary-color); border-radius: .5rem; overflow: hidden; scroll-snap-align: start;}
#top .__leistungen > section > article a{display: block; height: 100%}
#top .__leistungen > section > article figure{width: 100%; position: relative; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; -webkit-box-align: end; -ms-flex-align: end; align-items: end}
#top .__leistungen > section > article figure img{position: absolute; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: .2s ease; -o-transition: .2s ease; transition: .2s ease}
#top .__leistungen > section > article figure:hover img{scale: 1.05; opacity: .8}
#top .__leistungen > section > article figure h3{position: relative; color: var(--primary-color); font-size: var(--step-0); background: #fff; padding: 1em 3em 1em 1em; margin: 5rem 0 0 0 !important; width: 90%; max-width: 680px; font-weight: 600}
#top .__leistungen > section > article figure h3:after{content: '\e802'; font-family: 'sus-fontello'; position: absolute; right: 1em; top: 50%; translate: 0 -50%;}
#top .__leistungen > section > article figure:hover h3{color: var(--black);}

@media only screen and (min-width: 990px){
    #top .__leistungen > section{display: -ms-grid;display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem}
    #top .__leistungen > section > article:nth-child(4){-ms-grid-column-span: 2;grid-column: span 2}
    #top .__leistungen > section > article:nth-child(4) figure,
    #top .__leistungen > section > article:nth-child(5) figure{-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
}

@media only screen and (min-width: 1440px){
    #top .__leistungen > section > article figure h3{font-size: var(--step-1)}
}


/* =======================================================================================================================================
Notfall Hotline shortcode [notfall-hotline]
======================================================================================================================================= */
#top .__notfall--hotline .__wrap{display: -webkit-box;display: -ms-flexbox;display: flex; gap: var(--step-1);}
#top .__notfall--hotline .__wrap > i{font-size: var(--step-4); line-height: 1; color: var(--primary-color);}
#top .__notfall--hotline .__wrap > div{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
#top .__notfall--hotline .__wrap > div small{text-transform: uppercase; color: var(--primary-color); font-size: var(--step--1); line-height: 1.1}
#top .__notfall--hotline .__wrap > div a{font-size: var(--step-3); font-weight: 800; font-family: 'Catamaran', sans-serif; color: var(--black); line-height: 1.1}


/* =======================================================================================================================================
Blog
======================================================================================================================================= */
#top .fullsize .template-blog .post .entry-content-wrapper {
    text-align: inherit;
    font-size: inherit;
    line-height: inherit;
    max-width: inherit;
    margin: inherit;
    overflow: inherit;
}
#top .fullsize .template-blog .post-title{font-weight: 700; text-align: left;}


/* =======================================================================================================================================
Blog shortcode [blog]
======================================================================================================================================= */
#top .__blog > section{
    display: -ms-grid;
    display: grid;
    grid-gap: 2rem;
    -ms-grid-columns: grid-template-columns: (1fr)[1];
    grid-template-columns: grid-template-columns: repeat(1, 1fr);;
}
@media only screen and (min-width: 990px){
    #top .__blog > section{-ms-grid-columns: (1fr)[2];grid-template-columns: repeat(2, 1fr);}
}

@media only screen and (min-width: 1160px){
    #top .__blog > section{-ms-grid-columns: (1fr)[3];grid-template-columns: repeat(3, 1fr);}
}

#top .__blog > section::-webkit-scrollbar{display: none;}
#top .__blog > section > article{min-width: 280px; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-shadow: 0 0 8px rgb(0 0 0 / 8%); box-shadow: 0 0 8px rgb(0 0 0 / 8%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; scroll-snap-align: start;}
#top .__blog > section > article > figure{padding-bottom: 56.25%; position: relative; background: var(--primary-color); overflow: hidden;}
#top .__blog > section > article > figure a{width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0}
#top .__blog > section > article > figure img{width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; left: 0; -webkit-transition: .2s ease; -o-transition: .2s ease; transition: .2s ease}
#top .__blog > section > article > figure:hover img{scale: 1.05; opacity: .8}
#top .__blog > section > article > div{padding: 0 0 8% 0; display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; position: relative; background: #fff}
#top .__blog > section > article > div .__date{display: inline-block; background: var(--primary-color); color: #fff; font-weight: 700; padding: .25em .5em; font-size: var(--step--1); margin: -1em 0 2em;}
#top .__blog > section > article > div a{width: 100%}
#top .__blog > section > article > div a h3{font-weight: 600; text-align: center; font-size: var(--step-1); padding: 0 8%;}
#top .__blog > section > article > div a h3:hover{color: var(--primary-color);}
#top .__blog > section > article > div p{text-align: center; margin-top: 0; padding: 0 8%; width: 100%; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
#top .__blog > section > article > div a.__read--more{color: var(--primary-color); text-transform: uppercase; font-size: var(--step--1); font-weight: 700; margin-top: auto; width: auto;}
#top .__blog > section > article > div a.__read--more:after{content: '\e802'; font-family: 'sus-fontello'; margin-left: .5em; -webkit-transition: .2s ease; -o-transition: .2s ease; transition: .2s ease; display: inline-block;}
#top .__blog > section > article > div a.__read--more:hover:after{translate: .25em 0}


/* =======================================================================================================================================
Wiki shortcode [wiki]
======================================================================================================================================= */
#top .__wiki > section{
    display: -ms-grid;
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));´
}
#top .__wiki > section > article{
    -webkit-box-shadow: 0 3px 6px rgb(0 0 0 / 18%);
        box-shadow: 0 3px 6px rgb(0 0 0 / 18%);
    background: #f2f2f2;
    padding: 5%;
}
#top .__wiki > section > article h4{font-weight: 700; font-size: var(--step-0);}
#top .__wiki > section > article p{font-size: var(--step--1);}
#top .__wiki > section > article a.__read--more{font-size: var(--step--1); color: var(--primary-color);}


/* =======================================================================================================================================
Tools shortcode [tools]
======================================================================================================================================= */
#top .__tools .toolsSwiper{padding: 0 4rem;}
#top .__tools .toolsSwiper:after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    background: -webkit-gradient(linear, left top, right top, from(rgba(245,245,245,1)), color-stop(10%, rgba(245,245,245,0)), color-stop(89%, rgba(245,245,245,0)), to(rgba(245,245,245,1)));
    background: -o-linear-gradient(left, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 10%, rgba(245,245,245,0) 89%, rgba(245,245,245,1) 100%);
    background: linear-gradient(90deg, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 10%, rgba(245,245,245,0) 89%, rgba(245,245,245,1) 100%);
}
#top .__tools .toolsSwiper .swiper-slide{width: auto;}
#top .__tools .toolsSwiper .swiper-slide figure{-webkit-filter: grayscale(1);filter: grayscale(1); opacity: .5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
#top .__tools .toolsSwiper .swiper-slide figure > img{height: 4rem; width: 12rem; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; display: block;}
#top .__tools .toolsSwiper .swiper-slide > p{font-weight: 700; background: #ffffff; padding: 0.2em 1.2em; border-radius: 0.2em;}

@media only screen and (max-width: 767px){
    #top .__tools .toolsSwiper .swiper-button-next,
    #top .__tools .toolsSwiper .swiper-button-prev{display: none;}
}


/* =======================================================================================================================================
Rezensionen shortcode [rezensionen]
======================================================================================================================================= */
#top .__rezensionen .rezensionenSwiper{padding: var(--space-xl-xl) 0}
#top .__rezensionen .rezensionenSwiper .swiper-slide{background: #fff; padding: 4em 5% 2em; position: relative;}
#top .__rezensionen .rezensionenSwiper .swiper-slide:before{
    content: '\e806';
    font-family: 'sus-fontello';
    position: absolute;
    top: -1.5rem;
    left: var(--space-xl-xl);
    font-size: 2.5rem;
    width: 5rem;
    height: 5rem;
    display: -ms-grid;
    display: grid;
    place-content: center;
    line-height: 1;
    background: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    border-top-right-radius: 0;
}
#top .__rezensionen .rezensionenSwiper .swiper-slide h3{font-size: var(--step-1); font-weight: 600}
#top .__rezensionen .rezensionenSwiper .swiper-slide.swiper-slide-active{-webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);}

@media only screen and (min-width: 990px){
    #top .__rezensionen .rezensionenSwiper{padding: var(--space-xl-xl);}
    #top .__rezensionen .rezensionenSwiper .swiper-slide.swiper-slide-next{-webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);}
}


/* =======================================================================================================================================
Datenschutzmanagements shortcode [datenschutzmanagements]
======================================================================================================================================= */
#top .__datenschutzmanagements .datenschutzmanagementsSwiper{margin: 2rem 0 0 0}
#top .__datenschutzmanagements .datenschutzmanagementsSwiper .swiper-slide{width: 90%; padding: 0 3rem 0 0}
#top .__datenschutzmanagements .datenschutzmanagementsSwiper .swiper-slide h4{font-weight: 700}
#top .__datenschutzmanagements .datenschutzmanagementsSwiper .swiper-slide p{font-size: var(--step--1); color: #6E6E5D}
#top .__datenschutzmanagements .datenschutzmanagementsSwiper .swiper-slide ul{margin: 2rem 0; list-style: none; padding: 0 0 0 1rem; border-left: 1px solid var(--primary-color); font-size: var(--step--1);}
#top .__datenschutzmanagements .datenschutzmanagementsSwiper .swiper-slide ul li{margin: 0 0 1rem 0; background: rgb(162 82 93 / 10%); border-radius: 0.5em; padding: 0.5em 1em;}

@media only screen and (min-width: 520px){
    #top .__datenschutzmanagements .datenschutzmanagementsSwiper .swiper-slide{width: 45%}
}

@media only screen and (min-width: 990px){
    #top .__datenschutzmanagements .datenschutzmanagementsSwiper .swiper-slide{width: 30%}
}

@media only screen and (min-width: 1280px){
    #top .__datenschutzmanagements .datenschutzmanagementsSwiper .swiper-slide{width: 25%}
}


/* =======================================================================================================================================
Besonderheiten der Bundesländer shortcode [besonderheiten]
======================================================================================================================================= */
#top .__besonderheiten{max-width: 1280px; position: relative;}
#top .__besonderheiten img.__bg{position: absolute; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; opacity: .5; scale: 1.5; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom;}
#top .__besonderheiten .besonderheitenSwiper{margin: 0; padding: clamp(3rem, 8vh, 6rem) 0 clamp(6rem, 16vh, 8rem)}
#top .__besonderheiten .besonderheitenSwiper .swiper-slide article{display: -webkit-box;display: -ms-flexbox;display: flex; gap: 1rem}
#top .__besonderheiten .besonderheitenSwiper .swiper-slide article div:nth-child(1){min-width: 80px; max-width: 80px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;}
#top .__besonderheiten .besonderheitenSwiper .swiper-slide article div:nth-child(1) figure{padding-bottom: 100%; position: relative; width: 100%}
#top .__besonderheiten .besonderheitenSwiper .swiper-slide article div:nth-child(1) img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center;}
#top .__besonderheiten .besonderheitenSwiper .swiper-slide article h4{font-weight: 600}
#top .__besonderheiten .besonderheitenSwiper .swiper-pagination{text-align: left; display: -webkit-box; display: -ms-flexbox; display: flex; gap: clamp(4px, 1vw, 16px);}
#top .__besonderheiten .besonderheitenSwiper .swiper-pagination .swiper-pagination-bullet{width: 100%; height: 6px; max-width: 5rem; display: inline-block; border-radius: 3px; margin: 0 !important;}

@media only screen and (max-width: 480px){
    #top .__besonderheiten .besonderheitenSwiper .swiper-slide article{flex-direction: column;}
    #top .__besonderheiten .besonderheitenSwiper .swiper-slide article div{-webkit-hyphens: auto;hyphens: auto;}
}