@charset "UTF-8";
:root {
    /* ------------------
        typo 
    ------------------ */
    --step_800: clamp(1.375rem, 0.8414rem + 2.1891vw, 4.125rem); /* max 66px -  Display 390 - 2400 */
    --step_700: clamp(1.125rem, 0.8825rem + 0.995vw, 2.375rem); /* max 38px - Display 390 - 2400 */
    --step_600: clamp(1rem, 0.8787rem + 0.4975vw, 1.625rem); /* max 26px - Display 390 - 2400 */
    --step_500: clamp(0.875rem, 0.7537rem + 0.4975vw, 1.5rem); /* max 24px - Display 390 - 2400 */
    --step_450: clamp(0.75rem, 0.653rem + 0.398vw, 1.25rem); /* Display 390 - 2400 */    
    --step_400: clamp(0.75rem, 0.653rem + 0.398vw, 1.25rem); /* Display 390 - 2400 */
    --step_300: clamp(0.75rem, 0.7015rem + 0.199vw, 1rem); /* Display 390 - 2400 */

    --fs_800: var(--step_800); /* max 66px /// hero logo - bold/regular(light)  */
    --fs_700: var(--step_700); /* max 38px /// p in hero - regular - 1.1lh /// h2 - semi-bold 1.1lh */
    --fs_600: var(--step_600); /* max 26px /// h3 - semi-bold - 1.15lh */
    --fs_500: var(--step_500); /* max 24px /// bulletpoints - regular - 1.3lh */
    --fs_450: var(--step_450); /* max 20px /// Copy Text big - regular - 1.5lh */
    --fs_400: var(--step_400); /* max 18px /// Copy Text small - regular - 1.5lh /// Buttons */
    --fs_300: var(--step_300); /* max 16px /// Copy Text p in cards - regular - 1.5lh */

    --lh_18: 1.8; /*  */
    --lh_16: 1.6; /*  */
    --lh_15: 1.5; /*  */
    --lh_14: 1.4; /*  */
    --lh_13: 1.3; /*  */
    --lh_12: 1.2; /* */
    --lh_115: 1.15; /* */
    --lh_11: 1.1; /* */
    --lh_1: 1; /*  */

    /* Cookie Confirmation */
    --cc_body_fontSize: var(--step_300);
    
    /* ------------------
		spacing
	------------------ */
    --main_header_height: clamp(3.5rem, 3.1483rem + 1.4428vw, 5.3125rem); /* 390 bis 2400 */
    --max_content_width: 102.5rem; /* max 1640px */
    --content_padding_inline: 3rem;
    --icon_headline_width: 3rem;
    
    --spacer_360: clamp(7.5rem, 2.8864rem + 18.9274vw, 15rem); /* 390 - 1024  120 - 240px */
    --spacer_240: clamp(6rem, 5.0773rem + 3.7855vw, 7.5rem); /* 390 - 1024   96 - 120px */
    --spacer_200: clamp(5rem, 3.7697rem + 5.0473vw, 7rem); /* 390 - 1024   96 - 120px */
    --spacer_120: clamp(4rem, 2.7697rem + 5.0473vw, 6rem); /* 390 - 1024   64 - 96px */
    --spacer_96: clamp(3rem, 2.3849rem + 2.5237vw, 4rem); /* 390 - 1024   48 - 64px */
    --spacer_80: clamp(2.5rem, 1.8849rem + 2.5237vw, 3.5rem); /* 390 - 1024   32 - 48px */
    --spacer_64: clamp(2rem, 1.3849rem + 2.5237vw, 3rem); /* 390 - 1024   32 - 48px */
    --spacer_56: clamp(1.5rem, 0.8849rem + 2.5237vw, 2.5rem); /* 390 - 1024   24 - 32px */
    --spacer_48: clamp(1rem, 0.3849rem + 2.5237vw, 2rem); /* 390 - 1024   24 - 32px */
    --spacer_32: clamp(0.75rem, 0.2886rem + 1.8927vw, 1.5rem); /* 390 - 1024   12 - 24px */
    --spacer_24: clamp(0.625rem, 0.5481rem + 0.3155vw, 0.75rem); /* 390 - 1024   10 - 12px */
    --spacer_16: clamp(0.5rem, 0.4231rem + 0.3155vw, 0.625rem); /* 390 - 1024   8 - 10px */


    /* ------------------
		color
	------------------ */    
    --colorApp: var(--colorAppSDC);
    --green_light: var(--colorAppSDC);
    --green_light_hover: var(--colorAppHoverSDC);

    --gradient_bg_green: transparent linear-gradient(139deg, #2B3545 0%, #497872 23%, #69BFA2 100%) 0% 0% no-repeat padding-box;

    --cc_overlay_backgroundColor: rgba(255, 255, 255, 0.7);
    --cc_modal_backgroundColor: #fff;
    --cc_body_text_color: inherit;
    --cc_checkbox_button_backgroundColor: #a6a6a6;
    --cc_color_active_indicator: var(--colorAppSDC);
    --cc_checkbox_button_color: #fff;
    --cc_btn_text_color: #fff;
    --cc_btn_border_color: var(--cc_color_active_indicator);

    /* ------------------
		style
	------------------ */
    --boxShadow: 0px 0px 5px #0000004D;
	--borderRadius: 0.5rem; 
    
    --zindex_sections: 20;
}

@font-face {
	font-family: regular;
	font-weight: 400;
	font-style: normal;
	src: url(../../general/fonts/Montserrat/Montserrat-Regular.ttf) format("truetype");
}
@font-face {
	font-family: medium;
	font-weight: 400;
	font-style: normal;
	src: url(../../general/fonts/Montserrat/Montserrat-Medium.ttf) format("truetype");
}
@font-face {
	font-family: semi-bold;
	font-weight: 400;
	font-style: normal;
	src: url(../../general/fonts/Montserrat/Montserrat-SemiBold.ttf) format("truetype");
}
@font-face {
	font-family: bold;
	font-weight: 400;
	font-style: normal;
	src: url(../../general/fonts/Montserrat/Montserrat-Bold.ttf) format("truetype");
}

/* ------------------
	General 
------------------ */
html {
	scroll-behavior: smooth;
}
body {
    font-family: regular;
    font-size: var(--fs_450);
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

.btn.btn-ghost {
    border: 1px solid #fff;
}
.btn.btn-ghost:hover,
.btn.btn-ghost:active,
.btn.btn-ghost:focus {
    background-color: var(--n1Blue);
    color: #fff;
    border: 1px solid var(--n1Blue);
}
.btn.btn-light {
    justify-content: center;
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
}
.btn.btn-light:hover,
.btn.btn-light:active,
.btn.btn-light:focus {
    background-color: #fff;
    color: var(--n1Blue);
    border: 1px solid var(--n1Blue);
}

.main-header .btn.btn-ghost {
    background-color: #fff;
    color: var(--n1Blue);
    border: 1px solid var(--n1Blue);
}
.main-header .btn.btn-ghost:hover,
.main-header .btn.btn-ghost:active,
.main-header .btn.btn-ghost:focus {
    background-color: var(--n1Blue);
    color: #fff;
    border: 1px solid var(--n1Blue);
}

.btn.btn-blue {
    background-color: var(--n1Blue);
    color: #fff;
    border: 1px solid var(--n1Blue);
}
.btn.btn-blue:hover,
.btn.btn-blue:active,
.btn.btn-blue:focus {
    background-color: var(--n1BlueHover);
    color: #fff;
    border: 1px solid var(--n1BlueHover);
}
.btn.btn-with-height {
    font-family: semi-bold;
    font-size: var(--fs_300);
    line-height: var(--lh_1);
    text-transform: uppercase;
}

.cc-btn {
    background-color: var(--cc_color_active_indicator);
    border: 1px solid var(--cc_btn_border_color);
    color: var(--cc_btn_text_color);
 }
.cc-btn.cc-btn-default:hover {
    background-color: var(--colorAppHoverSDC);
}
.cc-btn-ghost {
    background-color: transparent;
    border: 1px solid var(--cc_color_active_indicator);
    color: var(--n1Blue);
}
.cc-btn-ghost:hover {
    background-color: var(--cc_color_active_indicator);
    border: 1px solid var(--cc_btn_border_color);
    color: var(--cc_btn_text_color);
}
 
 .cc-cookie-detailinfo-row {
    margin-bottom: 2rem;
 }

.mb-0 {
    margin-bottom: 0 !important;
}
.mb-32 {
    margin-bottom: var(--spacer_32);
}
.mb-48 {
    margin-bottom: var(--spacer_48);
}
.mb-56 {
    margin-bottom: var(--spacer_56);
}
.mb-64 {
    margin-bottom: var(--spacer_64);
}
.mb-80 {
    margin-bottom: var(--spacer_80);
}
.mb-120 {
    margin-bottom: var(--spacer_120);
}
.mb-120 {
    margin-bottom: var(--spacer_120);
}

.d-block {
    display: block !important;
}

/* ------------------
    Typo 
------------------ */
.hero-hl {
    font-family: bold;
    font-size: var(--fs_800);
    line-height: var(--lh_1);
    text-transform: uppercase;
    color: #fff;
}
.hero-hl-light {
    font-family: regular;
}
p {
    font-family: regular;
    font-size: var(--fs_450);
    line-height: var(--lh_15);
}
.hero-content p {
    font-size: var(--fs_700);
    line-height: var(--lh_11);
    color: #fff;
    margin-bottom: var(--spacer_48);
}
.hero-box-content p {
    font-size: var(--fs_700);
    line-height: var(--lh_11);
    color: #fff;
    margin-bottom: var(--spacer_48);
}
.card-item p {
    font-size: var(--fs_300);
}
.targetgroup-wrappper p,
.targetgroup-wrappper li {
    font-size: var(--fs_400);
}
.targetgroup-wrappper li {
    font-family: semi-bold;
}
h2, .h2 {
    font-family: semi-bold;
    font-size: var(--fs_700);
    line-height: var(--lh_11);
    margin-bottom: var(--spacer_48);
}
h3, .h3,
.legal h4, .imprint h4, .agb h4 {
    font-family: semi-bold;
    font-size: var(--fs_600);
    line-height: var(--lh_115);
}
.bulletpoint {
    font-family: regular;
    font-size: var(--fs_500);
    line-height: var(--lh_13);
    margin-bottom: var(--spacer_48);
}

.clr-white {
    color: #fff;
}

strong {
    font-family: bold;
}
b {
    font-family: semi-bold;
}


ul li:last-child {
    margin-bottom: 0;
}
.legal h1, .imprint h1, .agb h1 {
    margin-bottom: var(--spacer_48);
}

.cc-body-p, 
.cc-checkbox-label, 
.cc-checkbox-info, 
.cc-checkbox-head, 
.cc-cookie-detailinfo, 
.cc-cookie-detailinfo-col1 {
    font-family: regular;
    font-size: var(--cc_body_fontSize);
    line-height: var(--lh_15);
}
.cc-body-h2,
.cc-content-h2, 
.cc-checkbox-label {
   font-family: semi-bold;
   font-size: calc(var(--cc_body_fontSize) * 1.4);
   margin-bottom: var(--spacer_32);
}
.cc-content-h2, 
.cc-checkbox-label {
   font-size: calc(var(--cc_body_fontSize) * 1.2);
   margin-bottom: var(--spacer_24);
}
.cc-checkbox-label {
   margin-bottom: 0;
}
.cc-accordion-panel .cc-checkbox-label {
   font-size: var(--cc_body_fontSize);
}
.cc-checkbox-head .cc-checkbox-label {
   margin-left: 1rem !important;
}
.cc-checkbox-head .cc-checkbox-label ~ * {
   width: 2.5rem;
}
.cc-checkbox-info {
   margin-left: 3.5rem !important;
}
.cc-btn {
    margin-bottom: 0;
}

.legal * {
    font-family: regular;
    font-size: var(--fs_450);
    color: var(--n1Blue);
 }
 .legal section {
    margin-bottom: var(--spacer_56);
 }
 .legal h1 {
    font-family: semi-bold;
    font-size: var(--fs_700);
    line-height: var(--lh_11);
    text-transform: uppercase;
    margin-bottom: var(--spacer_48);
 }
 .legal h3, .legal .h3 {
    font-family: semi-bold;
    font-size: var(--fs_600);
    line-height: var(--lh_115);
    text-transform: uppercase;
 }
 .legal h4, .legal .h4 {
    font-family: semi-bold;
    font-size: var(--fs_500);
    line-height: var(--lh_115);
    text-transform: initial;
    margin-bottom: 0.5rem;
 }
 .legal h6, .legal p {
    font-family: regular;
    font-size: var(--fs_400);
    margin-bottom: var(--spacer_24);
 }
 .legal li {
    margin-bottom: var(--spacer_24);
 }
.legal strong {
    font-family: semi-bold;
}
.legal a {
    color: var(--colorAppSDC);
}
.legal a:hover {
    color: var(--colorAppHoverSDC);
}


/* ------------------
	Structure 
------------------ */
.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    width: 100%;    
    height: var(--main_header_height);
    padding-inline: 1rem;
    background-color: #fff;
    box-shadow: var(--boxShadow);
    z-index: calc(var(--zindex_sections) + 100);
}
.main-header img {
    width: clamp(9rem, 7.7072rem + 5.3039vw, 15rem);
    height: 100%;
}
.webinar-ticker {
    margin-top: var(--main_header_height);
}

.map-section {
    position: relative;
}
.map-section,
.map-container {
    height: calc(100vh - (var(--main_header_height) + var(--XspacerMainContent)));
}

.hero {
    --n1_logo_width: 10rem;
    --sd_logo_width: 3rem;
    --hero_spacer_bottom: 2rem;
    
    position: absolute;
    top: 50%;
    left: 1rem;
    right: 1rem;
    transform: translateY(-50%);  
    box-shadow: var(--boxShadow);  
    overflow: hidden;    
    z-index: calc(var(--zindex_sections) + 90);
}
.hero .video-bg {
    position: absolute;    
    background-image: url(../img/landingpage/Header_Verlauf_SiteDepotCommunity.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;    
    overflow: hidden;
}
.hero .video-bg .video-background {
    width: 100%;
    mix-blend-mode: multiply;
    transform: translate3d(0,0,0); /* bugfix for Safari (mix-blend-mode) */
}


.hero-box {
    --icon_width: 3rem;
    
    display: grid;
    align-items: center;
    position: absolute;
    left: 2rem;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: var(--boxShadow);  
    overflow: hidden;  
    z-index: calc(var(--zindex_sections) + 90);
}
.hero-box .video-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../img/landingpage/Header_Verlauf_SiteDepotCommunity.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;    
    overflow: hidden;
}
.hero-box .video-bg .video-background {
    width: 100%;
    mix-blend-mode: multiply;
    transform: translate3d(0,0,0); /* bugfix for Safari (mix-blend-mode) */
}
.hero-box-content {    
    position: relative;
    padding: 15%;
    z-index: calc(var(--zindex_sections) + 90)
}
.hero-box-content .hero-actions a {
    display: grid;
}
.hero-box-content .hero-actions a:first-child {
    margin-bottom: 0.5rem;
}


.hero-content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    position: relative;
    height: 100%;
    padding: 2rem;
}
.hero-content .n1-logo {
    width: 100%;
    text-align: right;
}
.hero-content .n1-logo img {
    width: var(--n1_logo_width);
}
.hero-content .sd-logo,
.hero-content .hero-actions {
    display: flex;
    flex-direction: row;
    color: #fff;
}
.hero-content .hero-actions {
    display: flex;
    flex-direction: column;
    color: #fff;
}
.hero-content .sd-logo {
   margin-bottom: var(--spacer_32);
}
.hero-content .sd-logo img, 
.hero-content .sd-logo strong, 
.hero-content .hero-actions a:first-child {
    margin-right: calc(var(--hero_spacer_bottom) / 4);
}
.hero-content .sd-logo img {
    width: var(--sd_logo_width);
    /* margin-bottom: calc(var(--hero_spacer_bottom) / 2); */
    margin-bottom: 0;
}

.hero-content .hero-actions a:first-child {
    margin-bottom: calc(var(--hero_spacer_bottom) / 2);
}

.white > section,
.targetgroups,
section.imprint,
section.legal,
section.agb {
   max-width: var(--max_content_width);
   padding-inline: var(--content_padding_inline);
   margin-inline: auto;
   margin-bottom: var(--spacer_240);
}
section.imprint,
section.legal,
section.agb {
   padding-top: var(--spacer_120);
}
section.imprint > section,
section.legal > section,
section.agb > section {
   margin-bottom: var(--spacer_56);
}
section.full-width-split,
section:has(.full-width-split),
section.with-bg {
    max-width: 100%;
    padding-inline: 0;
}
section:has(.targetgroups),
.targetgroups {
    margin-bottom: 0;
}

.full-width-split {
    display: grid;
}
.full-width-split > aside.with-bg {
    margin-bottom: var(--spacer_64);
}
.faq .full-width-split > aside.with-bg {
    margin-bottom: 0;
}

.full-width-split > aside.with-bg,
.full-width-split > .benefits-list, 
.full-width-split > .tabs-nav {
    grid-column: 1 / 1;
    grid-row: 1;
}
.with-bg {
    /* background-color: var(--colorApp); */
    background: var(--gradient_bg_green);
    color: #fff;
}
.targetgroups-detail aside.with-bg {
    background: var(--colorApp);
}

section.intro {
    padding: var(--spacer_200) var(--content_padding_inline) var(--spacer_120);
    margin-bottom: 0;
}


.benefits .with-bg + div,
.benefits .community-supporter {
    display: flex;
    flex-direction: column;
}
.benefits .benefits-chart {
   text-align: center;
   margin-bottom: var(--spacer_240);
}
.benefits .benefits-chart img {
   margin-bottom: var(--spacer_64);
}
.benefits .community-supporter {
   align-items: center;
}
.benefits .community-supporter b,
.benefits .community-supporter img {
   margin-bottom: var(--spacer_48);
}
.benefits .community-supporter div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.benefits .community-supporter div img {
    display: block;
}
.benefits .community-supporter div img:nth-child(1) {
    width: 21rem;
}
.benefits .community-supporter div img:nth-child(2) {
    width: 12.5rem;
}
.benefits .community-supporter div img:nth-child(3) {
    width: 4rem;
    margin-bottom: 0;
}
.benefits ul {
    padding: 0;
    margin-bottom: 0;
}
.benefits li {
    position: relative;
    padding-left: 0;
}
.benefits li::before {
    content: "";
}
.benefits li svg {
    position: absolute;
    top: 0;
    left: -1.8rem;
    color: #fff;
    font-size: 1.5rem;
}
.benefits-list,
.tabs-nav {
    padding: var(--spacer_64) var(--content_padding_inline);
    margin-bottom: var(--spacer_64);
}
.tabs-nav {
    margin-bottom: 0;
}

.card-items {
    display: grid;
    gap: var(--spacer_48);
}
.targetgroups {
    padding: var(--spacer_120) var(--content_padding_inline);
}
.targetgroups .card-item {
    background-color: #fff;
    /* transition: all 200ms ease-in-out; */
}
.targetgroups .card-item a {
    display: block;
    padding: var(--spacer_64) var(--spacer_64) 0;    
}
.targetgroups .card-item:hover {
    box-shadow: 2px 2px 6px 3px rgba(0, 0, 0, 0.25);
}
.targetgroups .card-item a > * {
    text-align: center;
}
.card-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: var(--spacer_48);
}
.card-icons svg {
    font-size: 2.5rem;
}
.card-icons img {
    width: 3rem;
}

/* Tab Nav */
[role="tablist"],
[role="tablist"] ul {
	list-style: none;
	margin: 0;
    display: block;
}
[aria-selected="true"] {
	text-decoration-thickness: 0.25rem;
	text-underline-offset: 0.5rem;
}

.overheadline {
    color: #9a9a9a;
}

.tabs-nav h2 {
    text-transform: uppercase;
}
.tabs-nav-itemcontainer {
    padding-bottom: 0.5rem;
    margin-bottom: var(--spacer_48);
}
.tabs-nav-itemcontainer:last-child {
    margin-bottom: 0;
}
.tabs-nav-itemcontainer::before {
    content: "";
    position: absolute;
}
.tabs-nav-itemcontainer,
.tabs-nav-itemcontainer a {
    display: block;
    transition: all 300ms ease-in-out;
}
.tabs-nav-item,
.tabs-nav-item:hover,
.tabs-nav-item:focus,
.tabs-nav-item:active {
    color: #fff;
}

.targetgroups-detail .tabs-nav,
.tabs-panels {
    display: none;
}

.targetgroup-wrappper,
.targetgroup-wrappper li {
    position: relative;
}
.targetgroup-wrappper .app-logo,
.slider-item .product-info header img {
    width: var(--icon_headline_width);
    margin-bottom: 1rem;
}
.targetgroup-wrappper li::before {
    content: "";
}
.targetgroup-wrappper li svg {
    position: absolute;
    top: 0.1rem;
    left: -1.1rem;
    color: var(--colorApp);
    font-size: 1rem;
}
.targetgroup-wrappper ul {

}
.tg-header {
    margin-bottom: var(--spacer_48);
}

.tg-header span,
.product-logo-text span {
    font-family: semi-bold;
    line-height: var(--lh_12);
}
.tg-img img {
    display: none;
}

.targetgroup-wrappper .btn {
    margin-bottom: var(--spacer_48);
}

.quote-container  {
    --sd_user_img_width: 10rem;
}
.quote-container img {
    display: block;
    width: var(--sd_user_img_width); 
    aspect-ratio: 1;   
    margin: 0 auto var(--spacer_48);
}
.quote-container h3 {
    margin-bottom: var(--spacer_48);
}
.quote-container h3 span {
    font-size: var(--fs_450);
}

#mobile_modal .targetgroup-wrappper strong,
.faq .targetgroup-wrappper strong {
    display: block;
    margin-bottom: var(--spacer_48);
}
#mobile_modal .targetgroup-wrappper p,
.faq .targetgroup-wrappper p {
    line-height: var(--lh_15);
}
#mobile_modal .targetgroup-wrappper p:has(+ a),
.faq .targetgroup-wrappper p:has(+ a) {
    margin-bottom: var(--spacer_64);
}
.faq .targetgroup-wrappper a:hover,
.faq .targetgroup-wrappper a:focus,
.faq .targetgroup-wrappper a:active {
    text-decoration: underline;
}

.special-with-bg {
    margin-bottom: var(--spacer_64);
}
.special-with-bg-extrabg {
    display: none;
}


.slider {
   position: relative;
}
.slider .item-grid {
    display: grid;
}
.slider .item-grid img {
    margin-bottom: var(--spacer_48);
}
.slider header {
    margin-bottom: var(--spacer_64);
}
.slider header span {
   display: block;
}
.slider .product-info ul {
    padding: 0;
    margin-bottom: var(--spacer_56);
}
.slider .product-info li {
    position: relative;
    font-family: semi-bold;
    font-size: var(--fs_400);
    padding-left: 1.3rem;
    margin-bottom: var(--spacer_32);
}
.slider .product-info li svg {
    position: absolute;
    top: 0.2rem;
    left: 0;
    color: #253645;
    font-size: 1rem;
}
.slider .controls li {
    list-style: none;
}
.slider .controls {
   position: absolute;
   top: 50%;
   right: 1rem;
   left: 1rem;
   transform: translateY(-50%);
   padding: 0;
   margin: 0;
}
.slider .controls li svg {
    font-size: 2rem;
    opacity: 0.5;
}
.slider .controls .prev {
   position: absolute;
   left: 0;
}
.slider .controls .next {
   position: absolute;
   right: 0;
}
.slider li::before {
    content: '';
}
.slider .tns-nav {
    display: none;
}
.slider .tns-nav button {
    width: 1rem;
    aspect-ratio: 1;
    border: none;
    border-radius: 50%;
    opacity: 0.5;
    color: #1A2936;
    background-color: #1A2936;
    margin-right: 0.3rem;
    transition: all 0.2s ease-in-out;
}
.slider .tns-nav button.tns-nav-active {
    opacity: 1;
}
.slider .tns-nav button:last-child {
    margin-right: 0;
}

footer {
    background-color: #fff;
}
footer .blue-bg {
    display: grid;    
    background-color: var(--n1Blue);
    color: #fff;
}
footer .white-bg {
    text-align: center;
    color: var(--n1Blue);
    padding: 0.5rem;
}
footer .white-bg a {
    color: var(--n1Blue);
    text-decoration: none;
    transition: all 200ms ease-in-out;
}
footer .white-bg a:hover,
footer .white-bg a:active,
footer .white-bg a:focus {
    color: var(--n1Blue);
    text-decoration: underline;
}

footer * {
    font-size: 0.75rem;
    font-family: medium;
    line-height: 1.4;
}
footer h6 {
    text-transform: uppercase;
}

.footer-contact > div {
    display: flex;
    margin-bottom: 1rem;
}
.footer-contact > div:last-child {
    margin-bottom: 0;
}
.footer-contact svg {
    margin-right: 0.5rem;
}

.gm-style-moc { display:none; } /* google maps - gray overlay during scroll */


/* .cc-accordion-panel {
    overflow-y: scroll;
}
.cc-accordion-active .cc-accordion-panel {
    max-height: 250px !important;
} */

/* Für Netzgrafik */
/* .mb-56 {
    margin-bottom: var(--spacer_56) !important;
} */
 .app-logo-header {  
    display: grid;
    grid-template-columns: var(--icon_headline_width) 1fr;
    gap: 1rem;
    align-items: center;
    margin-bottom: var(--spacer_48);
 }
 .app-logo-header img {
    width: var(--icon_headline_width);
    margin-bottom: 1rem;
 }
 .app-logo-header > div > h3 {
    margin-bottom: 0.25rem;
 }
 .app-logo-header > div > span {
    font-family: semi-bold;
    line-height: var(--lh_12);
 }
.sliding-panles{
   overflow: hidden;
   display: grid;
}
.sliding-panles .sliding-panles-item{
   grid-row: 1;
   grid-column: 1;
   opacity: 0;
   transform: translateX(30vw);
   transition: all 1000ms ease;
}
.sliding-panles .sliding-panles-item.show{
   transform: translateX(0);
   opacity: 1;
   z-index: 2;
}
.sliding-panles .sliding-panles-item.slide-out{
   transform: translateX(-5vw);
   opacity: 0;
}
 .zielgruppennetz ul{
    padding-left: 0;
 }
 .zielgruppennetz li::before{
    content: "";
 }
 .zielgruppennetz li{
    display: grid;
    grid-template-columns: var(--icon_headline_width) 1fr;
    margin-bottom: var(--spacer_32);
    column-gap: 1rem;
    font-size: var(--fs400);
 }
 .zielgruppennetz li svg{
    grid-column: 1;
    font-size: 1rem;
    justify-self: end;
 }
 svg [data-name="Icons"] > g{
    transition: all 300ms ease;
    cursor: pointer;
 }
 svg [data-name="Icons"] > g.selected{
    transform: scale(1.5);
 }

/* Animation Stuff */
.align-center {
    text-align: center !important;
}
.hasAnimation{
    overflow: hidden;
 }
 
.hasAnimation > *{
    transition: all 1s ease;
}

.card-item.hasAnimation > *{
    transition: all 1s ease, shadow 200ms ease-in-out;
}

.animateBG:not(.appear){
    transform: translateX(-10rem);
}
.animateLeft:not(.appear){
    transform: translateX(-100%);
    opacity: 0;
}
.animateRight:not(.appear){
    transform: translateX(100%);
    opacity: 0;
}

body > footer {
    position: relative;
    z-index: calc(var(--nav_level) - 8);
 }
 
 footer > .blue-bg {
    --mainfooter-cols: 2;
    --footerlinks-cols: 1;
       
    padding: 3rem;
    padding-inline: var(--content_padding_inline);
 }
 footer > .blue-bg * {
    font-size: var(--fs_300);
 }
 footer > .blue-bg > div {
    display: grid;
    grid-template-columns: repeat(var(--mainfooter-cols), 1fr);
    gap: 1rem;
    row-gap: 2rem;
    width: 100%;
    max-width: var(--max_content_width);   
    margin: 0 auto;
 }
 footer > .blue-bg .footer-apps,
 footer > .blue-bg .footer-links {
    display: grid;
    grid-template-columns: repeat(var(--footerlinks-cols), 1fr);
    gap: 1rem;
 }
 footer .white-bg {
    text-align: center;
    padding: 1rem;
    background-color: #fff;
 }
 footer .white-bg a {
    text-decoration: none;
    color: var(--n1Blue);
 }
 footer .white-bg a:hover,
 footer .white-bg a:focus,
 footer .white-bg a:active {
    text-decoration: underline;
 }
 footer .footer-headline{
    display: flex;
    align-items: baseline;
    gap: var(--spacer_16);
 }
 footer a{
    text-decoration: none;
 }
 footer a svg{
    margin-right: var(--spacer_16);
    transition: all 300ms ease;
 }
 footer a:hover svg{
    transform: translateX(0.5rem);
 }
 footer .col-contact > div{
    display: flex;
    align-items: flex-start;
    gap: var(--spacer_16);
    margin-bottom: var(--spacer_16);
 }

 #modalRegister .modal-footer {
    padding: 0;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: end;
}

/* ************************* */
/* ***** media queries ***** */
/* ************************* */
@media (max-width: 100em) {
    
}

@media (max-width: 59em) {  
    .white {
        background-color: #fff;
    }
    .map-container {
        position: fixed !important;
        top: 0;
        width: 100%;
    }

    .intro {
        margin-top: 100vh;
    }

    .white {
        position: relative;
        z-index: var(--zindex_sections);
        padding-bottom: var(--spacer_360);
    }

    .video-bg {
        height: 100%;
    }
    .video-bg-main {
        display: none;
    }

    .benefits-list {
        padding: var(--spacer_64) var(--content_padding_inline);
        margin-bottom: var(--spacer_64);
    }
    .benefits .benefits-chart {
        margin-bottom: 0;
    }    
    section.intro, 
    section.quotes,
    .benefits .benefits-chart {
        padding-inline: var(--content_padding_inline);
    }
    .targetgroups {
        padding: var(--spacer_120) var(--content_padding_inline);
    }
    .tabs-nav.with-bg,
    footer .blue-bg {
        padding: var(--spacer_64) var(--content_padding_inline);;
    }
    section.slider {
        margin-bottom: 0;
    }

    .cc-modal-body {
        max-height: calc(var(--cc_body_maxHeight) - 8rem);
     }
     .cc-checkbox-row {
        position: relative;
        margin-bottom: 1rem;
     }
     .cc-checkbox-head .cc-checkbox-label,
     .cc-checkbox-info {
        margin-left: 0 !important;
     }
     .cc-checkbox-head .cc-checkbox-label ~ * {
        width: 1.6rem;
     }
     .cc-btn {
        margin-bottom: 1rem;
    }
}

@media (min-width: 31em) {  /* ca 490er Auflösung */
    
}
@media (min-width: 42em) {  /* ca 670er Auflösung */
    
}

@media (min-width: 59em) {  /* ca 950er Auflösung */
    :root {
        --main_header_height: clamp(4rem, 2.9355rem + 1.7204vi, 5rem); /* Display 990 - 1920 */
        --content_padding_inline: 4rem;
        --icon_headline_width: 4rem;
        
        --spacer_360: clamp(15rem, 9.4186rem + 8.7209vw, 22.5rem); /* 1024 - 2400  240 - 360px */
        --spacer_240: clamp(7.5rem, 1.9186rem + 8.7209vw, 15rem); /* 1024 - 2400   120 - 240px */
        --spacer_200: clamp(7rem, 2.907rem + 6.3953vw, 12.5rem); /* 1024 - 2400   120 - 240px */
        --spacer_120: clamp(6rem, 4.8837rem + 1.7442vw, 7.5rem); /* 1024 - 2400   96 - 120px */
        --spacer_96: clamp(4rem, 2.5116rem + 2.3256vw, 6rem); /* 1024 - 2400   64 - 96px */
        --spacer_80: clamp(3.5rem, 2.3837rem + 1.7442vw, 5rem); /* 1024 - 2400   48 - 64px */
        --spacer_64: clamp(3rem, 2.2558rem + 1.1628vw, 4rem); /* 1024 - 2400   48 - 64px */
        --spacer_56: clamp(2.5rem, 1.7558rem + 1.1628vw, 3.5rem); /* 1024 - 2400   48 - 64px */
        --spacer_48: clamp(2rem, 1.2558rem + 1.1628vw, 3rem); /* 1024 - 2400   32 - 48px */
        --spacer_32: clamp(1.5rem, 1.1279rem + 0.5814vw, 2rem); /* 1024 - 2400   24 - 32px */
        --spacer_24: clamp(0.75rem, 0.1919rem + 0.8721vw, 1.5rem); /* 1024 - 2400   12 - 24px */
        --spacer_16: clamp(0.625rem, 0.3459rem + 0.436vw, 1rem); /* 1024 - 2400   10 - 12px */

    }

    .hero-hl:first-child {
        letter-spacing: 0.1rem;
    }

    /* .map-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
    } */
    .map-container {
        z-index: var(--zindex_sections);
    }

    .white {
        position: relative;
    }
    .video-bg-main {
        position: fixed;
        top: 0;        
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to top, #fff, #E8F0F5, #E4E8E9);
    }
    .video-background-main {
        width: 100%;
        mix-blend-mode: multiply; 
    }

    section {
        position: relative;
        z-index: var(--zindex_sections);
    }
    section.with-bg {
        padding-inline: var(--content_padding_inline);
    }
    section.with-bg:has(.targetgroups) {
        padding-inline: 0;
    }

    .hero-box {
        --spacer_block: var(--spacer_left);
        --spacer_left: clamp(3rem, -1.6667rem + 7.4667vw, 10rem); /* 1000px bis 2500px */
        --spacer_padding_inline: 5rem;
        --icon_width: 22rem;
           
        display: grid;
        align-items: center;
        position: absolute;
        top: 50%;
        left: var(--spacer_left);
        right: auto;
        transform: translateY(-50%);
        width: calc(var(--icon_width) + var(--spacer_padding_inline) * 2);
    }
    .hero-box-content {    
        padding: var(--spacer_padding_inline);
    }
    .hero-content-logo {
        width: var(--icon_width);
        margin-right: 0;
    }
    .hero-box-content .hero-actions a:first-child {
        margin-bottom: 1rem;
    }

    .btn-with-height {
        justify-content: center;
        width: 100%;
    }

    .full-width-split {
        display: grid;
        grid-template-columns: 1fr minmax(0, calc(var(--max_content_width) / 2)) minmax(0, calc(var(--max_content_width) / 2)) 1fr;
    }
    .full-width-split > aside.with-bg {
        grid-column: 1 / 3;
        grid-row: 1;
        margin-bottom: 0;
    }
    .full-width-split > .benefits-list,
    .full-width-split > .tabs-nav {
        grid-column: 2 / 3;
        grid-row: 1;
        z-index: calc(var(--zindex_sections) + 1);
    }
    .full-width-split > .benefits-list {
        justify-content: center;
    }

    .benefits-list,
    .tabs-nav {
        padding: var(--spacer_120) var(--content_padding_inline);
        margin-bottom: 0;
    }
    .benefits li svg {
        top: 0.2rem;
        font-size: 1.5rem;
    }
    .benefits > div:last-child {
        margin: auto 0;
    }
    .benefits li::marker {
        font-size: calc(var(--fs_500) + 0.5rem);
    }
    .benefits .benefits-chart {
        padding: 0;
        padding-left: var(--spacer_64);
        margin-bottom: 0;
    }
    .benefits .benefits-chart {
        padding-right: var(--content_padding_inline);
    }

    .targetgroups {
        margin-bottom: 0;
    }
    .targetgroup-wrappper .tg-img ul  {
        margin-bottom: 0;
    }
    .targetgroup-wrappper ul {
        padding: 0;
    }
    .targetgroup-wrappper li {
        padding-left: 2rem;
    }
    .targetgroup-wrappper li svg {
        left: 0rem;
        font-size: 1.8rem;
    } 
    .tg-header {
        display: flex;
        gap: 1rem;
        align-items: center;
    } 
    .tg-img {
        display: grid;
        grid-template-columns: 1fr 7rem;
        gap: 2rem;
        margin-bottom: var(--spacer_48);
    }
    .tg-img img {
        display: block;
    }
    
    .card-items {
        grid-template-columns: 1fr 1fr;
    }
    .card-icons svg {
        font-size: 3.5rem;
    }
    .card-icons img {
        width: 4rem;
    }

    .tabs-nav-itemcontainer:has(a[aria-selected="false"]) {
        border-bottom: 1px solid transparent;
    }
    .tabs-nav-itemcontainer:has(a[aria-selected="true"]),
    .tabs-nav-itemcontainer:has(a:hover),
    .tabs-nav-itemcontainer:has(a:focus),
    .tabs-nav-itemcontainer:has(a:active) {
        border-bottom: 1px solid #fff;
    }
    .tabs-nav-itemcontainer a {
        position: relative;
    }
    .tabs-nav-itemcontainer a[aria-selected="true"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: -1rem;
        height: 100%;
        width: 1px;
        border-left: 4px solid #fff;
    }

    .tabs-panels {
        display: block;
        padding: var(--spacer_120) var(--content_padding_inline) 0 var(--spacer_64);
    }
    .special-with-bg .tabs-panels {
        padding: var(--spacer_120) var(--content_padding_inline) var(--spacer_64) var(--spacer_120);
    }
    .faq .tabs-panels {
        display: grid;
        align-items: center;
    }
    .targetgroups-detail .tabs-nav {
        display: flex;
        flex-direction: column;
        justify-content: start;
    }

    .targetgroup-wrappper .app-logo,
    .slider-item .product-info header img {
        margin-bottom: 0;
    }
    
    .quote-container {
        --sd_user_img_width: 10rem;

        display: grid;
        grid-template-columns: var(--sd_user_img_width) 1fr;        
        gap: 2rem;
        align-items: center;
    }
    .quote-container img {
        margin-bottom: 0;
    }
    .quote-container p {
        margin-bottom: 0;
    }

    .faq {
        margin-bottom: var(--spacer_240);
    }

    .special-with-bg {
        position: relative;
        background: var(--gradient_bg_green);
        margin-bottom: var(--spacer_240);

    }
    .special-with-bg > section.with-bg {
        background: transparent;
    }
    .special-with-bg .targetgroups-detail aside.with-bg {
        background: transparent;
    }
    .special-with-bg .targetgroups-detail .tabs-panels {
        background-color: #fff;
    }

    .slider .item-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
    .slider .item-grid .product-info {
        padding: 0 var(--content_padding_inline) var(--spacer_32) var(--spacer_64);
    }
    .slider .item-grid img {
        justify-self: end;
        margin-bottom: 0;
    }
    .slider .product-info li {
        padding-left: 2rem;
    }
    .slider header {
        display: grid;
        grid-template-columns: var(--icon_headline_width) 1fr;
        gap: 1rem;
        align-items: center;
        margin-bottom: var(--spacer_48);
    }
    .slider .product-info li svg {
        top: 0.1rem;
        font-size: 1.8rem;
    }
    .slider .controls {
        right: 2rem;
        left: 2rem;
     }
    .slider .controls li {
        cursor: pointer;
        margin-bottom: 0;
        transition: all 0.2s ease-in-out;
    }   
    .slider .controls li svg {
        font-size: 3rem;
    }
    .slider .controls li:hover svg {
        opacity: 1;
    }
    .slider .app-logo {
        width: 3rem;
    }
    .slider .tns-outer {
        position: relative;
    }
    .slider .tns-nav {
        display: block;
        position: absolute;
        right: 25%;
    }

    /* Netzgrafik */
    .two-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        }
    .app-logo-header {
    --icon_headline_width: 4rem;
    }
    .app-logo-header img {
    margin-bottom: 0;
    }
    .app-logo-header > div > h3 {
    
    }
    .app-logo-header > div > span {
    
    }

    footer > .blue-bg {
        --mainfooter-cols: 2;
        --footerlinks-cols: 1;
     }
     footer > .blue-bg > div {
        grid-template-columns: 35% 40% 25%;
    }
}

@media (min-width: 71em) {  /* ca 1100er Auflösung */
    /* .hero {
        --hero_size: 34rem; /* max 1060px bei 2k 
    }     
    .hero-content {
        width: 24rem;
    } */

    section.intro {
        padding-bottom: var(--spacer_120);
    }
    .intro > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: baseline;
    }
    .intro > div p {
        margin-bottom: 0;
    }
}

@media (min-width: 86em) {  /* ca 1400er Auflösung */
    :root {
        --spacer_hero_padding: 8rem;
        --padding_left: 10rem;
        --content_padding_inline: 6rem;
        --icon_headline_width: 4.3rem;
    }

    /* .hero {
        --hero_size: 38rem; /* max 1060px bei 2k 
    } 
    .hero-content {
       width: 26rem;
    } */

    .hero-box {
        --icon_width: 26rem;
        --spacer_padding_inline: 6rem;
     }
    
    .btn.btn-with-height {
        height: 3rem;
    }

    .benefits li svg {
        font-size: 1.8rem;
        left: -2.2rem;
    }
    .benefits li::marker {
        font-size: calc(var(--fs_500) + 0.75rem);
    }
    
    .quote-container {
        --sd_user_img_width: 12rem;

        gap: 4rem;
    }
    .quote-container p {
        column-count: 2;
        column-gap: 2rem;
    }

    .slider .controls {
        right: 4rem;
        left: 4rem;
    }

    /* Für Netzgrafik */
    .zielgruppennetz .sliding-panles{
        align-self: center;
     }
     .zielgruppennetz li svg{
        font-size: 1.8rem;
     }

    footer > .blue-bg {
        --mainfooter-cols: 3;
        --footerlinks-cols: 1;
     }
     footer > .blue-bg > div {
        margin-bottom: 0;
     }
}

@media (min-width: 100em) {  /* ca 1600er Auflösung */
    .hero-box {
        --box_inner_width: calc(var(--icon_width) + var(--resizer) + var(--spacer_padding_inline) * 2);
        --resizer: 7rem;
        
        width: var(--box_inner_width);
     }
    .hero-box-content .hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .hero-box-content .hero-actions a {
        display: inline-flex;
    }
    .hero-box-content .hero-actions a:first-child {
        margin-bottom: 0;
    }
    
    .benefits-list,
    .tabs-nav {
        padding: var(--spacer_120) var(--spacer_120) var(--spacer_120) var(--content_padding_inline);
    }
    .benefits .benefits-chart {
        padding-left: var(--spacer_120);
    }

    .slider .item-grid img {
        max-height: 25rem;
    }
    .slider .item-grid .product-info {
        padding-bottom: var(--spacer_32);
    }
    .slider .controls li svg {
        font-size: 4rem;
    }
}

@media (min-width: 118em) {  /* ca 1890er Auflösung */
    :root {        
        --content_padding_inline: 0;
        --padding_left: var(--content_padding_inline);
   }

    .hero-box {
        --icon_width: 28rem;
        --spacer_padding_inline: 8rem;
     }

    .tabs-panels {
        display: block;
        padding: var(--spacer_120) 0 0 var(--spacer_120);
    }
    .special-with-bg .tabs-panels {
        padding: var(--spacer_120) 0 var(--spacer_64) var(--spacer_120);
    }
    .special-with-bg-extrabg {
        display: block;
        background-color: #fff;

    }
    
    .btn.btn-with-height {
        height: 3.5rem;
    }

    .benefits .community-supporter div {
        flex-direction: row;
        gap: 3rem;
    }
    .benefits .community-supporter div img {
        margin-bottom: 0;
    }

    .tg-img {
        grid-template-columns: 1fr 10rem;
        gap: 2rem;
    }

    .card-items {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .quote-container {
        --sd_user_img_width: 14rem;
    }

    .slider .item-grid img {
        max-height: 28rem;
    }
    .slider .item-grid .product-info {
        padding-bottom: 0;
    }
    .slider .controls {
        right: -4rem;
        left: -4rem;
    }
    .slider .tns-nav {
        right: calc(25% - 3rem);
    }

    .cc-accordion-wrap .cc-accordion-toggler:after {
        line-height: 1.2;
    }

    footer > .blue-bg {
        --footerlinks-cols: 2;
     }
  
     footer > .blue-bg > div {
        grid-template-columns: 35% 50% 25%;
    }
}

@media (min-width: 137em) {  /* ca 2200er Auflösung */
    :root {
       --spacer_hero_padding: 14rem;
       --padding_left: 20rem;
   }
/*     
   .hero {
        --hero_size: 66.25rem;
        --hero_spacer_bottom: 3rem;
    }
    .hero-content {
        width: 38rem;
     } 
     .hero-hl:first-child {
        letter-spacing: 0.15rem;
    } */

    .hero-box {
        --icon_width: 30rem;
        --spacer_padding_inline: 10rem;
     }

    .btn.btn-with-height {
        height: 4rem;
    }

     .benefits li svg {
        top: 0;
        left: -3.2rem;
        font-size: 2.8rem;
    }

    .card-icons svg {
        position: relative;
        font-size: 4.5rem;
    }
    .card-icons svg.fa-recycle {
        top: 0.5rem;
    }
    .card-icons img {
        width: 5.6rem;
    }

    .quote-container {
        --sd_user_img_width: 16rem;
    }

    .slider .controls {
        right: -8rem;
        left: -8rem;
    }
    .slider .controls li svg {
        font-size: 5rem;
    }
}
@media (min-width: 237em) {  /* ca 3800er Auflösung */
    .hero-box {
        --spacer_padding_inline: 20rem;
        --icon_width: 38rem;
        --spacer_left: 20rem;
    }
    .hero-box-content p {
        font-size: 3rem;
    }
}