@charset "UTF-8";

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

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

: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.6772rem + 0.2985vw, 1.125rem); /* Display 390 - 2400 */
    --step_300: clamp(0.6875rem, 0.6269rem + 0.2488vw, 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 */
    
    --fs_price_small: clamp(0.625rem, 0.5765rem + 0.199vw, 0.875rem); /* 10px - max 14px /// Sterntext */
    --fs_price_67: clamp(1.6875rem, 1.2024rem + 1.99vw, 4.1875rem); /* 27px - max 67px /// je Standort... */
    --fs_price_100: clamp(2.5625rem, 1.847rem + 2.9353vw, 6.25rem); /* 41px - max 100px /// ab */
    --fs_price_169: clamp(4.3125rem, 3.0998rem + 4.9751vw, 10.5625rem); /* 69px - max 169px /// XX € */

    --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: 2rem;
   --header_padding_inline: 1rem;
   --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 */


   --x_factor_navbar: 0.75;
    /* ------------------
		color
	------------------ */    
   --gradient_bg_n1: transparent linear-gradient(301deg, #485A77 0%, #2B3545 100%) 0% 0% no-repeat padding-box;
   --gradient_bg_sd: transparent linear-gradient(128deg, #2B3545 0%, #1E7E6B 100%) 0% 0% no-repeat padding-box;
   --gradient_bg_pm: transparent linear-gradient(128deg, #2B3545 0%, var(--colorAppPM) 100%) 0% 0% no-repeat padding-box;
   --gradient_bg_sm: transparent linear-gradient(128deg, #2B3545 0%, var(--colorAppSB) 100%) 0% 0% no-repeat padding-box;
   --gradient_bg_ma: transparent linear-gradient(128deg, #2B3545 0%, var(--colorAppMA) 100%) 0% 0% no-repeat padding-box;
   --gradient_bg_po: transparent linear-gradient(128deg, #2B3545 0%, var(--colorAppPO) 100%) 0% 0% no-repeat padding-box;
   --gradient_bg_bc: transparent linear-gradient(128deg, #2B3545 0%, var(--colorAppBC) 100%) 0% 0% no-repeat padding-box;
   
   --gray_bg_fluid: #D5DDE5;

   --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(--n1Blue);
   --cc_checkbox_button_color: #fff;
   --cc_btn_text_color: #fff;
   --cc_btn_border_color: var(--cc_color_active_indicator);

    /* ------------------
		style
	------------------ */
   --nav_level: 100; /* z-index */
   --section_level: 20; /* z-index */
   --footer_level: 100; /* z-index */

   --borderRadius: 8px;
}

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


/* ******************** 
        General
 ******************** */
 html {
	scroll-behavior: smooth;
}
 body {
   font-family: regular;
   font-size: var(--fs_450);
   color: var(--n1Blue);
   padding: 0;
   margin: 0;
   /* background-color: var(--n1Blue); */
   overflow-x: hidden; /*for Intersection Animations*/
}

ul {
	list-style: none; 
}  
/* ul li::before {
	content: "\2022";
    color: var(--colorApp);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    font-size: 1.5rem;
    position: relative;
    top: 0.1rem;
    left: 0.4rem; 
} */

.font-light{
   font-size: var(--fs_300);
}

.btn {
   display: inline-block;
   font-family: semi-bold;
   font-size: var(--fs_400);
   line-height: var(--lh_1);
   text-transform: uppercase;
   text-decoration: none;
   color: hsl(0, 0%, 100%);
   border: 2px solid var(--n1Blue);
   border-radius: var(--borderRadius);
	background-color: var(--n1Blue);
	padding: 0.75rem 1.5rem;
	outline: none;
	transition: all 0.3s ease-in-out;
   cursor: pointer;
}
.btn-ghost {
   border: 2px solid #fff;
   background-color: transparent;
}
.btn-white {
   color: var(--n1Blue);
   border: 2px solid #fff;
   background-color: #fff;
}
.btn-header {
   font-size: 1rem; /* max 16px */
   transform: scale(var(--x_factor_navbar));
}
.btn-fluid {
   display: block;
   text-align: center;
}
.btn-ghost-neg {
   color: var(--n1Blue);
   border: 2px solid var(--n1Blue);
   background-color: transparent;
}
.btn-ghost-neg.active,
.btn-ghost-neg:hover,
.btn-ghost-neg:focus,
.btn-white.active,
.btn-white:hover,
.btn-white:focus {
   color: #fff;
   border: 2px solid var(--n1Blue);
   background-color: var(--n1Blue);
}

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

.btn-price-xl {
   --btn_height: 3rem;
   
   display: grid;
   align-items: center;
   height: var(--btn_height);
   font-size: calc(var(--btn_height) / 2.5);
   line-height: 1;
   text-align: center;
   padding: 0;
}

.btn-blue.active,
.btn-blue:hover,
.btn-blue:focus {
   color: #fff !important;
   border: 2px solid var(--n1BlueHover) !important;
   background-color: var(--n1BlueHover) !important;
}

.btn.disabled, .btn:disabled {
   cursor: not-allowed;
   opacity: .35;
}

.modal-dialog .btn {
   font-size: var(--fs_300);
	padding: 0.5rem 1rem;
}

.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(--n1BlueHover);
}
.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;
}

.plantmanager .btn-price-xl {
   color: var(--n1Blue);
   border: 1px solid #fff;
   background-color: #fff;
}
.plantmanager .btn-price-xl:hover,
.plantmanager .btn-price-xl:focus,
.plantmanager .btn-price-xl:active {
   color: #fff;
   border: 1px solid var(--n1Blue);
   background-color: var(--n1Blue);
}

.blue-bg {
   background-color: var(--n1Blue);
   color: #fff;
}
.subpage-bg-target {
   background-color: purple;
   color: #fff;
}

.align-center {
   text-align: center !important;
}

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

/* .rounded {
   --rounded_radius: 3.125rem;
   
   border-top-right-radius: var(--rounded_radius);
   border-bottom-right-radius: var(--rounded_radius);
} */


.tab-links-with-text p {
   color: #fff;
   text-transform: none;
}

.main .tabs-nav ul.rounded {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1rem;
   padding: 0;
   margin: 0;
}
.main .tabs-nav ul.rounded a {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: var(--fs_400);
   text-transform: uppercase;
   text-decoration: none;
   border: 1px solid #fff;
   border-radius: 1.25rem;
   aspect-ratio: 1;
   padding: 1rem;
   transition: all 300ms ease-in-out;
}
.main .tabs-nav ul.rounded a[aria-selected="true"],
.main .tabs-nav ul.rounded a:active,
.main .tabs-nav ul.rounded a:focus,
.main .tabs-nav ul.rounded a:hover {
   background-color: #fff;
   color: var(--n1Blue);
   text-decoration: none;
}
.main .tabs-nav ul.rounded svg {
   display: block;
   font-size: 3rem;
   margin-bottom: calc(var(--spacer_32) / 2);
}

main {
   position: relative;
}
main > section {
   max-width: var(--max_content_width);
   padding-inline: var(--content_padding_inline);
   margin-inline: auto;
   margin-bottom: var(--spacer_240);
}
section.founder {
   position: relative;
}
main > section#jumpto-intro {
   margin-bottom: var(--spacer_120);
}
section.with-box {
   max-width: 100%;
   padding: var(--content_padding_inline);
   background: var(--gradient_bg_box);
}
section.has-gray-bg,
section.with-box.with-tiles {
   background: transparent;
   background-color: var(--gray_bg_fluid);
   color: var(--n1Blue);
   padding: var(--content_padding_inline);
}

section{
   scroll-margin-top: calc(var(--main_header_height) + 2rem);
}

.formrow {
   --label_width: 13rem;
   --bottom_gap: 1rem;

   display: grid;
   grid-template-columns: 1fr;
   margin-bottom: var(--spacer_56);
}
.formrow label {
   cursor: pointer;
}
.formrow select,
.formrow input,
.formrow textarea {
   font-size: var(--fs_400);
   accent-color: #fff;
   border: none;
   border-bottom: 1px solid #fff;
   color: #fff;
   background-color: transparent;   
}
.formrow option {
   color: var(--n1Blue); 
}

.inputrow {
   --label_with: 6.5rem;
   --transition: all 500ms ease-in-out;
   
   display: grid;
   grid-template-columns: var(--label_with) 1fr;
   align-items: center;
   position: relative;
   padding: 0.5rem;
   border-bottom: 1px solid var(--colorBorder);
   transition: var(--transition);
}
.inputrow:has(input:focus-within),
.inputrow input:focus-within,
.inputrow:has(textarea:focus-within),
.inputrow textarea:focus-within,
.inputrow:has(select:focus-within),
.inputrow:has(span.select2-container:focus-within),
.inputrow .select2-container:focus-within,
.inputrow .select2-container:focus-within .select2-selection {
   color: #fff;
   background-color: var(--n1Blue);
   outline: none;
}
.inputrow .select2-container:focus-within .select2-selection__placeholder,
.inputrow .select2-container:focus-within .select2-selection--single .select2-selection__rendered {
   color: #fff;
}
.inputrow .select2-container .select2-selection--single .select2-selection__arrow b {
   border-color: var(--n1Blue) transparent transparent transparent;
   transition: var(--transition);
}
.inputrow .select2-container:focus-within .select2-selection--single .select2-selection__arrow b {
   border-color: #fff transparent transparent transparent;
}
.inputrow input,
.inputrow textarea,
.inputrow .select2-container,
.inputrow .select2-selection,
.inputrow .select2-selection__placeholder {
   font-size: var(--fs_450);
   border: none;   
   transition: var(--transition);
}
.inputrow:has(textarea) label {
   align-self: flex-start;
}
.inputrow .select2-container:focus-within {
   
}
#myn1-contact .inputrow .select2-container--default .select2-selection--single {
   border: none;
}
#myn1-contact .inputrow .select2-container--open {
   display: block;
   top: auto !important;
   bottom: 0 !important;
   left: 0 !important;
   width: 100% !important;
}
#myn1-contact .inputrow .select2-container--open .select2-dropdown {
   display: block;
   width: 100% !important;
   color: #fff;
   background-color: var(--n1Blue);
   border: 1px solid var(--n1Blue);
   transition: var(--transition);
}
#myn1-contact .inputrow .select2-container--default .select2-results__option--highlighted[aria-selected] {
   color: var(--n1Blue);
   background-color: #fff;
}

#myn1-contact .message-row,
#myn1-contact .confirm-row,
#myn1-contact .confirm-row label {
   font-size: var(--fs_300);
}

#myn1-contact .confirm-row {
   margin: 0 0 var(--spacer_48) 0;
}

.confirm-row {
   margin: var(--spacer_56) 0;
}

.action-row {
   text-align: center;
}

.message-row{
   text-align: center;
   margin-bottom: var(--spacer_56);
}

.captcha-row {
   margin-left: 1.7rem;
}
.grecaptcha-badge { visibility: hidden; }

.formrow:last-child {
   margin-bottom: 2rem;
}

#myn1-contact .has-scrollbar{
   height: 5rem;
   overflow-y: auto;
   padding-right: 1rem;
   margin-block: var(--spacer_48);
}

.bi-checkbox {
	--checkbox_fontsize: var(--fs_400);
	--checkbox_lineheightFactor: 1.2;
	--checkbox_spacer: 0.5rem;
	--checkbox_lineheight: calc(var(--checkbox_fontsize) * var(--checkbox_lineheightFactor));
	--checkbox_size: calc(var(--checkbox_lineheight) - var(--checkbox_borderWidth) * 2);
   --checkbox_bgColor: transparent;
	--checkbox_accentColor: #fff;
	--checkbox_checkColor: var(--n1Blue);
	--checkbox_borderWidth: 1px;
	--checkbox_borderRadius: 0.25rem;
	
	display: grid;
   grid-template-columns: calc(var(--checkbox_size) + var(--checkbox_spacer)) 1fr;
   align-items: start;
	font-size: var(--checkbox_fontsize);
	line-height: var(--checkbox_lineheight);
}
.bi-checkbox-container {
	display: inline-block;
	position: relative;
	width: var(--checkbox_size);
	height: var(--checkbox_size);
	font-size: var(--checkbox_fontsize);
}
.bi-checkbox-container > input {
	display: block;
	position: absolute;
	top: 0;
    right: 0;	
	width: 100%;
	height: 100%;
	opacity: 0;
}
.bi-checkbox-container > span {
	display: block;
	position: absolute;
	top: 0;
    right: 0;
    bottom: 0;
    left: 0;	
	width: calc(var(--checkbox_lineheight) - var(--checkbox_borderWidth)* 2);
	border: var(--checkbox_borderWidth) solid var(--checkbox_accentColor);
	border-radius: var(--checkbox_borderRadius);
	background-color: var(--checkbox_bgColor);
	pointer-events: none;
}
.bi-checkbox-container > span::after {
	content: '\2714';
	display: flex;
    align-items: center;
    justify-content: center;
	position: absolute;
	width: 100%;
	height: 100%;
	font-size: calc(var(--checkbox_fontsize) * 0.8);
	background-color: var(--checkbox_accentColor);
	color: var(--checkbox_checkColor);
	opacity: 0;
	transition: all 0.3s ease-in;
}
.bi-checkbox-container input:checked ~ span::after {
	width: 100%;
	height: 100%;
	opacity: 1;
}
.bi-checkbox > label,
.bi-checkbox-container > span,
.bi-checkbox-container > input {
	cursor: pointer;
}
label ~ .bi-checkbox-container,
.bi-checkbox-container ~ label {
	margin-left: var(--checkbox_spacer);
}

.contactform a,
.blue-bg a {
   color: #fff;
}
.modal-dialog .confirm-row a{
   color: var(--n1Blue)
}

.hide-close .modal-dialog-times button {
   display: none;
}
.modal-dialog-times button:focus,
.modal-dialog-times button:focus-visible{
   outline: none;
}
.modal-dialog-content {
   padding: var(--spacer_64);
}
.modal-dialog-content h2 {
   margin-bottom: 0;
}
.modal-body {
   margin-block: var(--spacer_64);
}
.modal-body .formrow select, 
.modal-body .formrow input, 
.modal-body .formrow textarea,
.modal-body .select2-container--default .select2-selection--single {
   accent-color: var(--n1Blue);
   border: none;
   border-bottom: 1px solid var(--n1Blue);
   border-radius: 0;
   color: var(--n1Blue);
}
.modal-body .bi-checkbox {
   --checkbox_bgColor: #fff;
   --checkbox_accentColor: var(--n1Blue);
   --checkbox_checkColor: #fff;
   --checkbox_borderRadius: 0.125rem;
}
.modal-body .action-row {
   display: none;
}

img[data-zoom]{
   cursor: pointer;
}
img.alternativeImage{
   display: none;
}

.formrow.has-error input, 
.bi-checkbox.has-error > span, 
.formrow.has-error .select2-container .select2-selection, 
.has-error .custom--radio--label input[type="radio"] + span:before {
   border: 1px solid var(--colorError) !important;
}

 /* ******************** 
       Typographie
 ******************** */

p {
   font-family: regular;
   font-size: var(--fs_450);
   line-height: var(--lh_15);
}
b {
   font-family: semi-bold;
}
a {
   color: var(--n1Blue);
}

.full-width-split > .contact-info p,
.full-width-split > .contactform p,
.full-width-split > .contactform label,
.tabs-panels p,
.article.card p,
.copy-small {
   font-size: var(--fs_400);
}
.targetgroup-wrappper li {
   font-family: semi-bold;
}

h1, .h1 {
   font-family: bold;
   line-height: 1.05;
}

h2, .h2,
.legally-relevant h1 {
   font-family: semi-bold;
   font-size: var(--fs_700);
   line-height: var(--lh_11);
   text-transform: uppercase;
   margin-bottom: var(--spacer_48);
}
h3, .h3 {
   font-family: semi-bold;
   font-size: var(--fs_600);
   line-height: var(--lh_115);
   text-transform: uppercase;
}

.quote-container h3 span,
.founder-info h3 span,
.contacts-item h3 span {
   font-size: var(--fs_450);
}

h4, .h4 {
   font-family: semi-bold;
   font-size: var(--fs_500);
   line-height: var(--lh_115);
   text-transform: uppercase;
}

.bulletpoint {
   font-family: regular;
   font-size: var(--fs_500);
   line-height: var(--lh_13);
   color: #fff;

   list-style: none;
   padding: 0;
   margin: 0;

   margin-bottom: var(--spacer_48);
}

.overheadline {
   display: block;
   font-family: regular;
   font-size: var(--fs_600);
   color: #fff;
   margin-bottom: 0.5rem;
}
.hero-box .overheadline {
   margin-bottom: 0.5rem;
}

.hero-box h1 {
   
}
.hero-box .higher-zindex p {
   
}

.main .overheadline {
   color: #808C97;
}

.price-box-wrap .fs-67 {
   display: block;
   font-size: var(--fs_price_67);
   margin-bottom: var(--spacer_96);
}
.price-box-wrap .fs-100 {
   font-size: var(--fs_price_100);
   line-height: 1;
}
.price-box-wrap .fs-169 {
   font-family: 'bold';
   font-size: var(--fs_price_169);
   line-height: 1;
   margin-right: var(--spacer_32);
}
.price-box-wrap .small {
   font-size: var(--fs_price_small);
}

.price-box-wrap .fs-600 {
   font-size: var(--fs_600);
   line-height: var(--lh_11);   
}
.price-box-wrap .fs-800 {
   font-size: var(--fs_800);
   line-height: var(--lh_11);
}
.price-box-inner h2 {
   font-family: regular;
}

p {
    font-family: regular;
    font-size: var(--fs_450);
    line-height: var(--lh_15);
}

.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;
}

#register-modal p,
#register-modal .cc-body-p, 
#register-modal .cc-checkbox-label, 
#register-modal .cc-checkbox-info, 
#register-modal .cc-checkbox-head, 
#register-modal .cc-cookie-detailinfo, 
#register-modal .cc-cookie-detailinfo-col1,
#register-modal label {
    font-family: regular;
    font-size: var(--fs_300);
    line-height: var(--lh_15);
}

#register-modal select,
#register-modal input,
#register-modal .select2-container {
   width: 100% !important;
   max-width: 25rem !important;
}

.legal {

}

 /* ******************** 
        Structure
 ******************** */
.main, .about, .partner, .jobs,
.magazine-card.bg-n1 {
   --gradient_bg_box: var(--gradient_bg_n1);
}
.sitedepot,
.magazine-card.bg-sd {
   --gradient_bg_box: var(--gradient_bg_sd);
}
.salesmanager,
.magazine-card.bg-sm {
   --gradient_bg_box: var(--gradient_bg_sm);
}
.matchmanufacturer,
.magazine-card.bg-ma {
   --gradient_bg_box: var(--gradient_bg_ma);
}
.plantorder,
.magazine-card.bg-po {
   --gradient_bg_box: var(--gradient_bg_po);
}
.plantmanager,
.magazine-card.bg-pm {
   --gradient_bg_box: var(--gradient_bg_pm);
}
.magazine-card.bg-bc {
   --gradient_bg_box: var(--gradient_bg_bc);
}
.manufacturer,
.magazine-card.bg-manufacturer {
   --gradient_bg_box: transparent linear-gradient(125deg, #0087BB 0%, #0087BB 12%, #9F197D 100%) 0% 0% no-repeat padding-box;
}
.constructor,
.magazine-card.bg-constructor {
   --gradient_bg_box: transparent linear-gradient(125deg, #0087BB 0%, #0087BB 12%, var(--colorAppSD) 100%) 0% 0% no-repeat padding-box;
}

#cookie-confirmation.hidden {
   display: none;
}

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

aside video {
   display: none;
}

.main-navbar {
   display: grid;
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   color: #fff;
   height: var(--main_header_height);
   padding-inline: var(--header_padding_inline);
   transition: all 500ms ease-in-out;
   z-index: var(--nav_level);
}
.main-navbar.nav-is-open {    
   padding-inline: var(--header_padding_inline);
}

.header-bg {
   position: absolute;
   top: -10rem;
   width: 100%;
   height: var(--main_header_height);
   background-color: var(--n1Blue);   
   box-shadow: var(--boxShadow);
   transition: all 300ms ease-in-out;
   z-index: calc(var(--nav_level) - 10);
}
.permanent-header .header-bg,
.main-navbar.scrolled .header-bg {
   top: 0;
}

.main-navbar a{
   color:  var(--n1Blue);
   border-color: var(--n1Blue);
}
.main-navbar .primary-navtoggle span{
   background-color: var(--n1Blue);
}

.white-header .main-navbar a,
.main-navbar.scrolled a,
.main-navbar.nav-is-open a{
   color: #fff;
   border-color: #fff;
}
.white-header .main-navbar .primary-navtoggle span,
.main-navbar.scrolled .primary-navtoggle span,
.main-navbar.nav-is-open .primary-navtoggle span{
   background-color: #fff;
}

.header-wrapper {
   position: relative;
   z-index: var(--nav_level);
 }

.header-wrapper,
.interaction {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

.header-wrapper a.logo {
   display: grid;
    grid-template-columns: calc(var(--main_header_height) - 1rem) 1fr;
    gap: 0.5rem;
    align-items: center;
    font-size: clamp(0.75rem, 0.6045rem + 0.597vw, 1.5rem); /* 390 bis 2400 */
    text-decoration: none;
}
.header-wrapper a.logo:hover,
.header-wrapper a.logo:focus,
.header-wrapper a.logo:active {
   color: #fff;
   text-decoration: none;
}

.logo-img { /* show neg img by default */
   display: none;
}
body:not(.white-header) .main-navbar:not(.scrolled):not(.nav-is-open) .logo-img {
   display: block;
}
body:not(.white-header) .main-navbar:not(.scrolled):not(.nav-is-open) .logo-img-neg {
   display: none;
}

.interaction > * {
   margin-right: 1rem;
 }
.interaction > *:last-child {
   margin-right: 0;
 }

 .language-dropdown {
   transform: scale(var(--x_factor_navbar));
 }

.primary-nav {    
   --logo_width: 2rem;
   --li_margin_bottom: 2rem;
   
   position: fixed;
   top: 0;
   right: 0; 
   left: 0;
   height: 0;
   padding: 0 var(--header_padding_inline);
   background-color: var(--n1Blue);
   color: #fff;
   overflow: hidden;
   box-shadow: var(--boxShadow);
   transition: all 300ms ease-in-out;
   z-index: calc(var(--nav_level) - 2);
}
.main-navbar.nav-is-open .primary-nav {    
   height: 100%;
   padding: calc(var(--main_header_height) * 1.5) var(--header_padding_inline) var(--main_header_height);
}
.primary-nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
.primary-nav ul li {
  margin-bottom: var(--li_margin_bottom);
}
.primary-nav ul li:last-child {
  margin-bottom: 0;
}

.primary-nav a {
   font-size: 0.938rem;
   color: #fff;
   text-decoration: none;
}
.primary-nav a:hover,
.primary-nav a:active,
.primary-nav a:focus {
   color: #fff;
   text-decoration: none;
}
.primary-nav .animateLeft,
.primary-nav .animateRight{
   transition: all 600ms ease;
}

.primary-navtoggle {
   --burger_lineheight: 4px;
   --burger_spacing: 12px;
   --burger_height: 28px;
   --burger_width: 30px;

   width: var(--burger_width);
   height: var(--burger_height);
   position: relative;
   top: calc(var(--burger_spacing) / 3);
   cursor: pointer;
   display: inline-block;
   transform: scale(var(--x_factor_navbar));
}
.primary-navtoggle span{
   background-color: #fff;
   position: absolute;
   border-radius: 2px;
   transition: .3s cubic-bezier(.8, .5, .2, 1.4);
   width: 100%;
   height: var(--burger_lineheight);
   transition-duration: 500ms
}
.primary-navtoggle span:nth-child(1){
   top:0px;
   left: 0px;
}
.primary-navtoggle span:nth-child(2){
   top: var(--burger_spacing);
   left: 0px;
   opacity:1;
}
.primary-navtoggle span:nth-child(3){
   bottom:0px;
   left: 0px;
}
.primary-navtoggle:not(.open):hover span:nth-child(1){
   transform: rotate(-3deg) scaleY(1.1);
}
.primary-navtoggle:not(.open):hover span:nth-child(2){
   transform: rotate(3deg) scaleY(1.1);
}
.primary-navtoggle:not(.open):hover span:nth-child(3){
   transform: rotate(-4deg) scaleY(1.1);
}
.primary-navtoggle.open span:nth-child(1){
   transform: rotate(45deg);
   top: 13px;
}
.primary-navtoggle.open span:nth-child(2){
   opacity:0;
}
.primary-navtoggle.open span:nth-child(3){
   transform: rotate(-45deg);
   top: 13px;
}

.primary-nav .nav-left-col {
   padding: 0 var(--content_padding_inline) 0;
   margin-bottom: var(--spacer_64);
}
.primary-nav .nav-left-col a svg {
   display: none;
 }

.primary-nav .nav-right-col {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem;   
   padding: 0 var(--content_padding_inline) var(--spacer_64);
}
.primary-nav .nav-right-col > div:first-child {
   display: none;
}
.primary-nav .divider {
   height: 0.1rem;
   background-color: #fff;
   margin: 0 var(--content_padding_inline) var(--spacer_64);
}
.primary-nav .nav-applink > svg {
   display: none;
 }
.primary-nav .nav-applink a {
   display: grid;
   grid-template-columns: var(--logo_width) 1fr;
   gap: 0.5rem;
   align-items: center;
}
.primary-nav .nav-applink .app-logo {
   width: var(--logo_width);
}

.primary-nav .nav-applink div {
   font-family: semi-bold;
   font-size: 0.938rem;
}
.primary-nav .nav-applink div span {
   display: none;
   font-family: regular;
   font-size: 0.813rem;
   opacity: 0.5;
}

.moving-bg {
   display: none;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

.fixed-actions {
   --action_pos_top: 70%;
   --img_size: clamp(3.1875rem, 2.587rem + 0.942vw, 4rem); /* 1020 bis 2400 */
   --img_padding_right: clamp(1rem, 0.6304rem + 0.5797vw, 1.5rem); /* 1020 bis 2400 */
   
   display: none;
   position: fixed;   
   right: -50rem;
   color: #fff;
   z-index: calc(var(--nav_level) - 10);
   align-items: center;
   padding: 0.5rem 1rem;
   border-radius: 20px 0 0 20px;
   box-shadow: var(--boxShadow);
   background-color: var(--n1Blue);
}
.fixed-actions .cta-text a{
   font-family: semi-bold;
   font-size: var(--fs_700); 
   line-height: 1;
   text-decoration: none;
   text-transform: uppercase;
   color: #fff;
}
.fixed-actions .cta-icon {
   display: grid;
   align-items: center;
   justify-content: center;
   padding-right: var(--img_padding_right);
   cursor: pointer;
}
.fixed-actions .cta-icon img {
   width: var(--img_size);
}
.fixed-actions.cta-contact {
   top: var(--action_pos_top);
}
.fixed-actions.cta-date {   
   top: calc(var(--action_pos_top) + 5rem);
}
.fixed-actions.cta-date svg,
.fixed-actions.cta-contact svg {   
   font-size: clamp(2.4375rem, 2.1603rem + 0.4348vw, 2.8125rem); /* 1020 bis 2400 */
}
.fixed-actions.cta-date .cta-icon,   
.fixed-actions.cta-contact .cta-icon {   
   padding-block: 0.4rem;
}

.hero-wrapper {
   position: relative;
   height: 100vh;
   margin-bottom: var(--spacer_240);
   z-index: 1;
}
.about .hero-wrapper {
   background-image: url(../img/Hero_Image_ueberuns.jpg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}
.circular-magazine-list .hero-wrapper {
   background-image: url(../img/Circular_Magazine.jpg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.hero-wrapper > .video-bg {
   height: 100vh;
}
.productpage .hero-wrapper {
   background: url(../img/Stage.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}
.hero-positioning {
   position: relative;
   height: 100vh;
}
.hero-positioning > * {
   z-index: calc(var(--section_level) + 5);
}
.hero-box {
   --icon_width: 3rem;
   
   height: 100vh;
   box-shadow: var(--boxShadow);  
   overflow: hidden;
}
.about .hero-box {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   width: 90%;
   height: auto;
   margin-inline: auto;
}
.hero-box-landing {
   display: grid;
   align-items: center;
   position: absolute;
   left: 2rem;
   right: 2rem;
   top: 50%;
   transform: translateY(-50%);
}
.hero-box-main,
.hero-box-products,
.hero-box-targetgroup {
   display: grid;
   align-items: center;
   background: var(--gradient_bg_box);
}
.hero-box:not(.hero-box-main) .video-bg {
   position: absolute;
   top: 0;
   left: 0;
   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%;
}
.circular-magazine-list .hero-box-content {
   padding-top: 80%;
}
.hero-box-content > * {    
   color: #fff;
}
.main .hero-box-content img {    
   width: 5.5rem;
   margin-bottom: 1rem;
}
.hero-box-content h1 {
   margin-bottom: 0.5rem;
}
.hero-content-logo,
.hero-p {
  margin-bottom: var(--spacer_56);
}
.hero-p {
  line-height: 1.2;
}
.hero-content-logo img {
   height: 2.313rem;
}
.hero-actions {
   display: grid;
}
.hero-box-content .hero-actions a {
   display: grid;
   align-items: center;
   justify-content: center;
}
.hero-box-content .hero-actions a:first-child {
   margin-bottom: 0.5rem;
}

.hero-wrapper .video-bg,
.hero-img {
   display: none;
}
.targetgrouppage .hero-wrapper .pattern-bg {
   background: url(../img/3px-tile.png) repeat scroll left top;
   position: absolute;
   opacity: 0.5;
   width: 100%;
   height: 100%;
}

.sitedepot #jumpto-intro,
.manufacturer .bundles-intro {
   margin-bottom: var(--spacer_120);
}

.mobile-only {
   display: block;
}
.desktop-only {
   display: none;
}

.img-col {
   display: grid;
   align-items: center;
   justify-content: center;
}

.price-wrap * {
   color: #fff;
}

.price-box-wrap {
   background: var(--gradient_bg_box);  
   color: #fff; 
}
.price-box-wrap .fs-100 {
   margin-right: 0.5rem;
}
.price-cta > div:first-of-type {
   margin-bottom: var(--spacer_48);
}
.price-cta > div:last-of-type {
   margin-bottom: var(--spacer_96);
}
.price-cta > div:last-of-type div {
   margin-bottom: var(--spacer_48);
}
.price-box .small {
   margin-bottom: var(--spacer_120);
}

.gradient-bg-gray {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;  
}
.gradient-bg-box {
   background: var(--gradient_bg_box);  
   color: #fff; 
}
.article.card {
   background: var(--gradient_bg_n1);  
   color: #fff; 
   display: flex;
   flex-direction: column;
}
.article.card p{
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   flex-grow: 1;
}
/* .gradient-bg-box,
.nav-col.rounded {
   padding: var(--box_padding_block) calc(var(--section_margin_inline) / 2) var(--box_padding_block) var(--section_margin_inline);
} */
.contactform.gradient-bg-box {
   padding: var(--box_padding_block) var(--section_margin_inline) var(--box_padding_block) calc(var(--section_margin_inline) / 2);
}
.gradient-bg-gray {
   background: var(--gradient_bg_gray);   
}

.video-bg-main {
   display: none;
}

.user-img {
   border-radius: 50%;
}

.yourcontact {
   display: grid;
   grid-template-columns: 5rem 1fr;
   gap: 2rem;
   align-items: center;
}

.articles {
   --article-cols: 1;
   
   display: grid;
   grid-template-columns: repeat(var(--article-cols), 1fr);
   gap: 1rem;
}
.article.card {
   padding: var(--spacer_64) var(--spacer_48); 
}
.article.card h3 {
   margin-bottom: var(--spacer_32);
}
.article.card p {
   margin-bottom: var(--spacer_56);
}

/* Tab Nav */
.tabs-nav h2 {
   margin-bottom: var(--spacer_80);
}
.tabs-nav-itemcontainer {
   font-family: regular;
   font-size: var(--fs_500);
   line-height: var(--lh_13);
   text-transform: uppercase;
   padding: 0.2rem 1rem;
   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;
   text-decoration: none;
   transition: all 300ms ease-in-out;
}
.tabs-nav-item,
.tabs-nav-item:hover,
.tabs-nav-item:focus,
.tabs-nav-item:active {
   color: #fff;
}
.tabs-nav-item {
   border-bottom: 1px solid transparent;
}    
.tabs-nav-item[aria-selected="true"],
.tabs-nav-item:hover,
.tabs-nav-item:focus,
.tabs-nav-item:active {
   border-bottom: 1px solid #fff;
}
.tabs-nav-itemcontainer:has(a[aria-selected="false"]),
.tab-links-with-text a[aria-selected="false"] {
   border-left: 4px solid transparent;
}
.tabs-nav-itemcontainer:has(a[aria-selected="true"]),
.tab-links-with-text a[aria-selected="true"] {
   border-left: 4px solid #fff;
}
.tab-links-with-text .tabs-nav-itemcontainer:has(a[aria-selected="false"]),
.tab-links-with-text .tabs-nav-itemcontainer:has(a[aria-selected="true"]) {
   border-left: none;
}
.tab-links-with-text .tabs-nav-itemcontainer {
   padding: 0;
}

.rounded .tabs-nav-itemcontainer {
   border: none !important;
   padding: 0 !important;
   margin: 0 !important;
}


.subpage-no-hero {
   padding-top: calc(var(--main_header_height) * 2);
}

#partner-slider-controls {
   display: none;
}
.tns-nav {
   text-align: center;
   margin-top: var(--spacer_32);
}
.tns-nav button {
   /* width: 1rem;     */
   aspect-ratio: 1;
   border: none;
   border-radius: 50%;
   background-color: #ccc;
   margin-right: 0.5rem;
}
.tns-nav button:last-child {
   margin-right: 0;
}
.tns-nav button:hover,
.tns-nav button:active,
.tns-nav button:focus,
.tns-nav button.tns-nav-active {
   background-color: var(--n1Blue);
}

.mobile-only .content-col p {
   margin-bottom: var(--spacer_64);
}

.slider.mobile-only {
   color: #fff;
}
.slider.mobile-only > h2 {
   margin-bottom: var(--spacer_64);
}
.slider.mobile-only .slider-item  > h3 {
   margin-bottom: 0.2rem;
}
.slider.mobile-only .slider-item > div > h3 {
   font-family: semi-bold;
   font-size: var(--fs_450);
}

.main-navbar .language-dropdown {
   --input_height: 2rem;
   --arrow_wrap_width: 1.5rem;
}
.main-navbar .language-dropdown .select2-selection {
   height: var(--input_height) !important;
   border: 1px solid transparent !important;
   color: var(--n1Blue) !important;
   background-color: transparent !important;
}
.main-navbar .language-dropdown .select2-selection__rendered {
   color: var(--n1Blue) !important;
   line-height: var(--input_height) !important;
   padding: 0 var(--arrow_wrap_width) 0 0.5rem !important;
}
.main-navbar.scrolled .language-dropdown .select2-selection,
.main-navbar.nav-is-open .language-dropdown .select2-selection {
   color: #fff !important;
}
.main-navbar.scrolled .language-dropdown .select2-selection__rendered,
.main-navbar.nav-is-open .language-dropdown .select2-selection__rendered {
   color: #fff !important;
}
.main-navbar .language-dropdown .select2-selection__arrow {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   top: 0 !important;
   right: 0 !important;
   width: var(--arrow_wrap_width) !important;
   height: var(--input_height) !important;
   line-height: 1 !important;
   pointer-events: none !important;
   background-repeat: no-repeat !important;
   background-position: center center !important;  
   transition: 0.3s !important;
}
.main-navbar .language-dropdown .select2-selection__arrow b {
   display: none;
   border-color: #fff transparent transparent transparent !important;
   border-style: solid;
   border-width: 5px 4px 0 4px !important;
}
.main-navbar .language-dropdown .select2-selection__arrow::before {
   background: url(../img/Chevron_blau.svg) no-repeat;
   content: "";
   cursor: pointer;
   height: 7px;
   width: 12px;
   transition: all 0.2s;
}
.main-navbar.scrolled .language-dropdown .select2-selection__arrow::before,
.main-navbar.nav-is-open .language-dropdown .select2-selection__arrow::before {
   background: url(../img/Chevron_weiss.svg) no-repeat;
}
.main-navbar .language-dropdown .select2-selection[aria-expanded="true"] .select2-selection__arrow::before {
   background: url(../img/Chevron_blau.svg) no-repeat;
   content: "";
   transform: rotate(-180deg);
}
.main-navbar.scrolled .language-dropdown .select2-selection[aria-expanded="true"] .select2-selection__arrow::before,
.main-navbar.nav-is-open .language-dropdown .select2-selection[aria-expanded="true"] .select2-selection__arrow::before {
   background: url(../img/Chevron_weiss.svg) no-repeat;
}
.main-navbar .language-select-dropdown {
   top: 0;
   left: 0;
   border-radius: 0;
   box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
   max-width: 6rem;
   min-width: 6rem;
   padding: 0.25rem;
}
.main-navbar .language-select-dropdown .select2-results__option--highlighted {
   background-color: var(--n1Blue) !important;
}

.full-width-split > .tabs-nav h2,
.full-width-split > .nav-col h2,
.full-width-split > .mission-list h2,
.full-width-split > .mission-text h2,
.full-width-split > .mission-text p,
.full-width-split > .benefits-list h2,
.full-width-split > .benefits-list p {
   color: #fff;
}
.full-width-split > .contactform h3 {
   margin-bottom: var(--spacer_80);
}

.quote-container  {
   --sd_company_img_width: 10rem;
   --sd_user_img_width: 10rem;
}
.quote-container img {
   display: block;
   width: var(--sd_user_img_width);       
   margin: 0 0 var(--spacer_48);
}
.quote-container img.user-img {
   aspect-ratio: 1;
}
.quote-container h3 {
   margin-bottom: var(--spacer_48);
}

.legally-relevant section a:not(.btn) {
   color: var(--n1Blue);
   text-decoration: underline;
}
.legally-relevant section a:hover,
.legally-relevant section a:focus,
.legally-relevant section a:active {
   color: var(--n1Blue);
   text-decoration: underline;
}
.legally-relevant h1 {
   margin-bottom: var(--spacer_48);
}
.legally-relevant h1:has(+section[itemscope]) {
   margin-bottom: 0;
}
.legally-relevant h4 {
   margin-bottom: 0.5rem;
}
.legally-relevant h6,
.legally-relevant p  {
   font-family: regular;
   font-size: var(--fs_400);
   margin-bottom: var(--spacer_24);
}
/* .legally-relevant p[itemprop="address"] span {
   display: block;
} */
.legally-relevant section {
   margin-bottom: var(--spacer_56);
}
.legally-relevant article,
.legally-relevant h6 {
   margin-bottom: var(--spacer_48);
}
.legally-relevant main > *:last-child {
   margin-bottom: var(--main_header_height);
}
.legally-relevant article > *:last-child {
   margin-bottom: 0;
}
.legally-relevant article.contact p {
   margin-bottom: 0;
}
.legally-relevant main ul {
   list-style: disc;
}

.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);
}

ul:has(.bulletpoint) {
   padding: 0;
   margin: 0 0 2rem 0;
   padding-left: 2rem;
}
li.bulletpoint {
   position: relative;
}
li.bulletpoint svg {
   /* display: none; */
   position: absolute;
   top: 0;
   left: -1.8rem;
   color: #fff;
   font-size: 1.5rem;
}
li.bulletpoint:last-child {
   margin-bottom: 0;
}

.targetgroup-grid {
   position: relative;
   min-height: 35rem;
}
.targetgroup-grid-item {
   width: var(--width);  
}
.targetgroup-grid-item header {
   margin-bottom: 0;
}
.targetgroup-grid-item h4 {
   width: calc(var(--width) / 1.2);
   line-height: var(--lh_12);
   margin-bottom: -0.5rem;
}
.targetgroup-grid-item hr {
   width: 100%;
   height: 0.3rem;
   border: none;
}
.targetgroup-grid-item header > div {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 1rem;
   align-items: center;
}
.targetgroup-grid-item header svg {
   font-size: 2.5rem;
}
.targetgroup-grid-item p {
   width: calc(var(--width) / 1.3);
   font-family: regular;
   font-size: var(--fs_400);
   line-height: var(--lh_13);
   margin-bottom: var(--spacer_32);
}
.targetgroup-grid-item a {
   font-family: semi-bold;
   font-size: var(--fs_500);
   color: var(--n1Blue);
   text-transform: uppercase;
   text-decoration: none;
}
.targetgroup-grid-item a:hover,
.targetgroup-grid-item a:active,
.targetgroup-grid-item a:focus {
   text-decoration: underline;
}
.targetgroup-grid-item.manufacturer,
.targetgroup-grid-item.recycler,
.targetgroup-grid-item.construction,
.targetgroup-grid-item.communes {
   --width: 100%;

   margin-bottom: var(--spacer_64);
}
.targetgroup-grid-item.construction {
   margin-bottom: var(--spacer_80);
}
.targetgroup-grid-item.recycler h4 {   
   width: calc(var(--width) / 1.5);
}
.targetgroup-grid-item.rightside * {
   text-align: right;
}
.targetgroup-grid-item.rightside header > div {
   grid-template-columns: auto 1fr;
}
.targetgroup-grid-item.rightside h4,
.targetgroup-grid-item.rightside p {
   margin-left: auto;
}
.targetgroup-grid-item.rightside a {
   display: block;
}
.targetgroup-grid-item.manufacturer hr {   
   background: transparent linear-gradient(270deg, #9F187D 0%, #1474A0 100%) 0% 0% no-repeat padding-box;
}
.targetgroup-grid-item.recycler hr {   
   background: transparent linear-gradient(270deg, #FF4B4B 0%, #FF7355 100%) 0% 0% no-repeat padding-box;
}
.targetgroup-grid-item.construction hr {   
   background: transparent linear-gradient(90deg, #1E7E6B 0%, #1474A0 100%) 0% 0% no-repeat padding-box;
}
.targetgroup-grid-item.communes hr {   
   background: transparent linear-gradient(90deg, #6ABFA3 0%, #1474A0 100%) 0% 0% no-repeat padding-box;
}

.benefits-list,
.mission-list {
   margin-bottom: var(--spacer_56);
}

.benefits-chart.benefits-sl{
   display: grid;
   grid-template-columns: 0.1fr 1fr;
   grid-template-rows: 0.1fr 0.3fr 0.3fr 0.3fr;
   align-self: start;
   height: 100%;
   position: relative;
   color: #fff;
}

.benefits-chart.benefits-sl h2{
   grid-column: 1 / 3;
   grid-row: 1;
}

.benefits-chart.benefits-sl img{
   grid-column: 1;
   z-index: 10;
}

.benefits-chart.benefits-sl img[data-order="1"]{
   grid-row: 2;
}

.benefits-chart.benefits-sl img[data-order="2"]{
   grid-row: 3;
}

.benefits-chart.benefits-sl img[data-order="3"]{
   grid-row: 4;
}

.benefits-chart.benefits-sl p{
   grid-column: 2;
   padding-left: var(--spacer_16);
}

.benefits-chart.benefits-sl .benefits-sl-gradient{
   grid-column: 1;
   grid-row-start: 2;
   grid-row-end: 4;
   height: calc(100% - 2rem);
   margin-top: 2rem;
   justify-self: center;
   width: 0.5rem;
   background: linear-gradient(180deg, var(--colorAppSD) 0%, var(--colorAppPM) 50%, var(--colorAppSB) 100%);
}

.matchmanufacturer .benefits-chart * {
   color: #fff;
}

.contact .contact-info h2 {
   margin-bottom: var(--spacer_56);
}
.contact .contact-info > b {
   display: block;
   margin-bottom: var(--spacer_24);
}
.contact .toppic-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.5rem;
   margin-bottom: var(--spacer_56);
}
.contact .toppic-actions button {
   cursor: pointer;
}
.contact .yourcontact b span {
   font-size: var(--fs_300);
}

.slider-body {
   --icon_headline_width: 3rem;
}
.slider-body .plus {
   font-size: 4rem;
   text-align: center;
   color: #fff;
   /* background : transparent linear-gradient(125deg, #0087BB 0%, #0087BB 12%, #9F197D 100%) 0% 0% no-repeat padding-box;
   -webkit-background-clip: text;
   background-clip: text; */
   /* color: transparent; */
}
.slider-body div:has(a) {
   text-align: center;
}

/* Netz mit Animation */
.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_16);
   column-gap: 1rem;
}
.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);
}

.app-logo-header {  
   display: grid;
   grid-template-columns: var(--icon_headline_width) 1fr;
   gap: 1rem;
   align-items: center;
}
.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);
}

.innovationswettbewerb {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: 2rem;
}
.innovationswettbewerb > * {
   justify-self: center;
}

.plantmanager .with-screen-bg {
   grid-column: 3 / 5 !important;
   width: 100%;
   height: 100%;
   padding: 0 !important;
   margin: 0 !important;
}
.plantmanager .screen-bg {
   width: 100%;
   height: 100%;
   background-image: url(../img/produktseiten/PM_Screenshot_Map.jpg);
   background-repeat: no-repeat;
   background-position: top right;
   background-size: cover;
}

.modal-dialog#register-modal .select2-container{
   width: 100% !important;
}
.modal-dialog#register-modal .step{
   display: none;
}
.modal-dialog#register-modal .step.active{
   display: block;
}
.modal-dialog#register-modal .modal-footer .btn-hidden{
   display: none;
}
#register-modal label {
   margin-bottom: 0.3rem;
}
#register-modal .card {
   border: 1px solid var(--colorBorder);
    background-color: var(--colorCardBG);
    min-height: 5rem;
    border-radius: 4px;
    padding: 2rem;
    margin-bottom: 1.5rem;
}
#register-modal .card-header {
   margin-bottom: 0.5rem;
}
#register-modal .step p:has(small) {
   margin-bottom: 2rem;
}
#register-modal .modal-footer  {
   position: relative;
}
#register-modal .modal-footer .small-text {
   position: absolute;
   top: -1.3rem;
   right: 0;
}
#register-modal .modal-body form#step-2 + .modal-footer .small-text,
#register-modal .modal-body form#step-4 + .modal-footer .small-text {
   display: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
   background-color: transparent;
}

.accordion-header h3 {
   padding-bottom: 0.5rem;
   margin-bottom: 0;
}
.accordion-header h3:hover {
   border-bottom: 1px solid #fff;   
}
.accordion-item .accordion-content {
   padding: 0;
   margin: 0;
}
.accordion-item.open .accordion-content {
   margin-top: 1rem;
}
.accordion-content p {
   margin: 0;
}
.accordion .accordion-item{
   border: none;
   cursor: pointer;
   margin-bottom: var(--spacer_48);
}
.accordion-wrap {
   color: #fff;
}

.accordion .accordion-item.open h3{
   position: relative;
   border-bottom: 1px solid #fff;
   padding-bottom: 0.5rem;
   margin-bottom: 0;
}

.accordion .accordion-item.open h3::before{
   content: "";
   position: absolute;
   top: 0;
   left: -1rem;
   height: 100%;
   width: 1px;
   border-left: 4px solid #fff;
}

.accordion-panels,
.sliding-panles{
   overflow: hidden;
   display: grid;
}
.accordion-panels .accordion-panels-item,
.sliding-panles .sliding-panles-item{
   grid-row: 1;
   grid-column: 1;
   opacity: 0;
   transform: translateX(30vw);
   transition: all 1000ms ease;
}
.accordion-panels .accordion-panels-item {
   align-self: center;
}
.accordion-panels .accordion-panels-item.show,
.sliding-panles .sliding-panles-item.show{
   transform: translateX(0);
   opacity: 1;
   z-index: 2;
}
.accordion-panels .accordion-panels-item.slide-out,
.sliding-panles .sliding-panles-item.slide-out{
   transform: translateX(-5vw);
   opacity: 0;
}

.slider-tabs+.tabs-panels{
   display: grid;
   overflow: hidden;
}

.slider-tabs+.tabs-panels .tabs-panels-item{
   grid-column: 1;
   grid-row: 1;
   opacity: 0;
   transform: translateX(30vw);
   transition: all 1000ms ease;
}

.slider-tabs+.tabs-panels .tabs-panels-item.show{
   opacity: 1;
   transform: translateX(0);
}

.slider-tabs+.tabs-panels .tabs-panels-item.slide-out{
   opacity: 0;
   transform: translateX(-5rem);
}

/* GrapesJS Wrapper */
.grapesjs-wrapper{
   margin-top: var(--main_header_height);
}

section.founder {
   --img_width: 8rem;
}
section.founder > div {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem;
   justify-content: center;
}
section.founder > div img {
   width: var( --img_width);
   margin-inline: auto;
}

.contacts-wrap {
   --img_width: 6rem;
   display: grid;
   gap: 1rem;
}
.contacts-wrap .contacts-item {
   display: grid;
   grid-template-columns: var(--img_width) 1fr;
   gap: 1rem;
   align-items: center;
}
.contacts-wrap .contacts-item img {
   width: var(--img_width);
}

.founder-info h3,
.contacts-item h3 {
   margin-bottom: 0.3rem;
}
.founder-info h3 span,
.contacts-item h3 span {
   text-transform: none;
}
.founder-info > span {
   display: block;
   margin-bottom: var(--spacer_48);
}

.contacts-wrap .contacts-item img,
section.founder > div img {
   border-radius: 50%;
}

.contact-img-placeholder {
   display: grid;
   align-items: flex-end;
   justify-content: center;
   width: var(--img_width);
   height: var(--img_width);
   border-radius: 50%;
   overflow: hidden;
   background-color: #ccc;   
}
.contact-img-placeholder svg {
   font-size: 5rem;
}

section.founder,
section.awards,
.founder .gradient-bg-box,
.awards .gradient-bg-box,
.gray-bg-box {
   background: var(--gray_bg_fluid);
}

.founder-info *,
.awards * {
   color: var(--n1Blue);
}

#slider-awards.tns-horizontal.tns-subpixel>.tns-item {
   vertical-align: middle;
}

.innovation-contest-bw .contest-logos img:first-of-type {
   margin-bottom: 2rem;
}
.innovation-contest-bw .contest-logos img:last-of-type {
   margin-bottom: 3rem;
}
.bundespreis-ecodesign .contest-logos,
.deutscher-innovationspreis .contest-logos,
.bauma-innovationspreis .contest-logos,
.deutscher-nachhaltigkeitspreis .contest-logos,
.german-innovation-award .contest-logos {
   text-align: center;
   margin-bottom: 3rem;
}
.bundespreis-ecodesign .contest-logos img,
.deutscher-innovationspreis .contest-logos img,
.bauma-innovationspreis .contest-logos img,
.deutscher-nachhaltigkeitspreis .contest-logos img,
.german-innovation-award .contest-logos img {
   display: inline-block;
   max-height: 16rem;
}

#awards-slider-controls {
   display: none;
}

.mission-text > div {
   margin-bottom: var(--spacer_56);
}
.mission-list ul {
   margin-bottom: 0;
}

.magazine-list,
.job-list {
   --card_height: 10rem;

   position: relative;
}
.magazine-list .magazine-filter-box,
.job-list .job-filter-box {
   margin-bottom: var(--spacer_32);
   background-color: transparent;
}
.magazine-list .magazine-filter-box > div,
.job-list .job-filter-box > div {
   padding: var(--spacer_64);
   background-color: #fff;
   box-shadow: 0px 0px 6px #00000029;
}
.magazine-list .magazine-filter-box ul,
.magazine-list .magazine-filter-box li,
.job-list .job-filter-box ul,
.job-list .job-filter-box li {
   padding: 0;
   margin: 0;
}
.magazine-list .magazine-filter-box li,
.job-list .job-filter-box li {
   font-family: medium;
   font-size: var(--fs_450);
   text-transform: uppercase;
   margin-bottom: var(--spacer_32);
}

.magazine-list .magazine-card,
.job-list .job-card {
   cursor: pointer;
   width: 100%;
   height: auto;
   margin-bottom: 2rem;
   /* overflow: hidden; */
   position: relative;
}

.magazine-list .magazine-card:has(.card-img) {
   width: 100%;
   display: block;
}
.magazine-list .magazine-card .card-img{
   height: calc(var(--card_height) * 2);
}
.magazine-list .magazine-card .card-img img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}
.magazine-list .magazine-card .card-bg,
.job-list .job-card .card-bg {
   color: #fff;
   min-height: var(--card_height);
   padding: var(--spacer_64);
   background: var(--gradient_bg_box);
}
.job-cards div.job-card:nth-child(odd) .card-bg {
   color: var(--n1Blue);
   background: var(--gray_bg_fluid);
}
.job-cards div.job-card:nth-child(even) .card-bg {
   background: #8092a3;
}
.job-list .job-card .card-bg > div {
   margin-bottom: var(--spacer_48);
}
.job-list .job-card .card-bg .job-detail {
   display: flex;
   align-items: center;
   margin-bottom: var(--spacer_24);
}
.job-list .job-card .card-bg .job-detail:last-of-type {
   margin-bottom: 0;
}
.job-list .job-card .card-bg .job-detail svg {
   font-size: 1.5rem;
   margin-right: 0.5rem;
}
.magazine-list .magazine-card .card-bg a,
.job-list .job-card .card-bg a {
   position: absolute;
   bottom: var(--spacer_64);
}
.magazine-list .app-name {
   font-family: medium;
   font-size: var(--fs_price_small);
   text-transform: uppercase;
   margin-bottom: var(--spacer_48);
}
.magazine-list h3,
.job-list h3 {
   font-size: var(--fs_500);
   margin-bottom: var(--spacer_32);
}
.magazine-list p {
   font-size: var(--fs_400);
   margin-bottom: calc(var(--spacer_48) + var(--spacer_32));
}
.magazine-list .magazine-card .card-bg a,
.magazine-list .magazine-card .card-bg a:hover,
.magazine-list .magazine-card .card-bg a:active,
.magazine-list .magazine-card .card-bg a:focus,
.job-list .job-card .card-bg a,
.job-list .job-card .card-bg a:hover,
.job-list .job-card .card-bg a:active,
.job-list .job-card .card-bg a:focus {
   font-family: semi-bold;
   color: #fff;
}
.job-cards div.job-card:nth-child(odd) .card-bg a,
.job-cards div.job-card:nth-child(odd) .card-bg a:hover,
.job-cards div.job-card:nth-child(odd) .card-bg a:active,
.job-cards div.job-card:nth-child(odd) .card-bg a:focus {
   color: var(--n1Blue);
}

.magazine-filter-box a.filter svg,
.job-filter-box a.filter svg {
   display: none;
}
.magazine-filter-box a.filter.active svg,
.job-filter-box a.filter.active svg {
   display: block;
}

.magazine-teaser > h2 {
   display: none;
}
.magazine-teaser .magazine-logo {
   margin-bottom: var(--spacer_48);
}

.mission-text > div > h3 {
   color: #fff;
}

.partner-tile {
   margin-bottom: var(--spacer_64);
}
.partner-tile > header {
   margin-bottom: var(--spacer_32);
}
.partner-tile > p a {
   color: var(--n1Blue);
}

.partner2 .slider-item > header img {
   height: 4rem;
   margin-bottom: var(--spacer_32);
}


/* Animation Stuff */
.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;
}
.animateScale:not(.appear){
   transform: scale(0);
   opacity: 0;
}

.matchmanufacturer .benefits-chart-container {
   --number_size: 5rem;
   
   display: grid;
   grid-template-columns: var(--number_size) 1fr;
   column-gap: 2rem;
   row-gap: 2rem;
   align-items: center;
   justify-content: center;
   position: relative;
}
.benefits-vertical-line {
   position: absolute;
   top: 1rem;
   bottom: 1rem;
   left: 2.25rem;
   width: 0.5rem;
   background-color: var(--colorAppMA);
}
.matchmanufacturer .benefits-chart-container .benefits-number {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   font-family: semi-bold;
   font-size: var(--step_700);  
   width: var(--number_size);
   height: var(--number_size);
   color: #fff;
   border-radius: 50%;
   background-color: var(--colorAppMA);
   z-index: 1;
}
.matchmanufacturer .benefits-chart-container .benefits-info h3 {
   margin-bottom: var(--spacer_16);
}
.matchmanufacturer .benefits-chart-container .benefits-info p {
   margin-bottom: 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;
   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);
}

.modal {
   --bs-modal-padding: 3rem;
   --bs-modal-margin: 0.5rem;
   --bs-modal-color: var(--bs-body-color);
   --bs-modal-bg: var(--bs-body-bg);
   --bs-modal-border-color: var(--bs-border-color-translucent);
   --bs-modal-border-width: var(--bs-border-width);
   --bs-modal-border-radius: 0;
   --bs-modal-box-shadow: var(--bs-box-shadow-sm);
   --bs-modal-inner-border-radius: 0;
   --bs-modal-header-padding-x: 2rem;
   --bs-modal-header-padding-y: 1rem;
   --bs-modal-header-padding: var(--bs-modal-padding) var(--bs-modal-padding) 1rem;
   --bs-modal-header-border-color: var(--bs-border-color);
   --bs-modal-header-border-width: 0;
   --bs-modal-title-line-height: var(--lh_11);
   --bs-modal-footer-gap: 0.5rem;
   --bs-modal-footer-bg: ;
   --bs-modal-footer-border-color: var(--bs-border-color);
   --bs-modal-footer-border-width: 0;

   --bs-btn-close-color: var(--n1Blue);
   --bs-btn-close-opacity: 1;
}
.modal-header {
   padding-bottom: 0;
}
.modal-body {
  padding: 0 var(--bs-modal-padding);
}
.modal-footer {
   padding-top: 0;
}
.form-check-input[type=checkbox] {
   border-radius: 0;
   border: 1px solid var(--n1Blue);
}
.form-check-input:checked {
   background-color: var(--n1Blue);
   border-color: var(--n1Blue);
}

.confirmation-info {
   cursor: pointer;
}

.captcha-row a {
   color: var(--n1Blue);
}

.accordion .accordion-item .accordion-content {
   display: none;
}

.accordion .accordion-item.open .accordion-content {
   display: block;
}
.accordion .accordion-item{
   background: transparent;
   color: white;
}

.yourcontact .user-img,
.hero-img img:not(.alternativeImage),
#slider-accordion .slider-item img:not(.alternativeImage),
.accordion-panels .accordion-panels-item img:not(.alternativeImage){
   max-width: 100%;
   height: auto;
   display: block;
   object-fit: contain;
}

#myn1-contact .btn-close {
   display: none;
}

#myn1-contact .has-scrollbar {
   margin-bottom: 0;
    height: 6rem;
}

img {
   max-width: 100%;
}

img[data-zoom] {
   cursor: initial;
}


/* ************************* */
/* ***** media queries ***** */
/* ************************* */
@media (max-width: 59em) {  /* ca 950er Auflösung */
   .with-box a {
      color: #fff;
   }
   
   .full-width-split > .contactform h3 {
      margin-bottom: var(--spacer_56);
  }
   .contact.with-box .contact-info {
      margin-bottom: var(--spacer_80);
   }
   .contact.with-box .contact-info > *,
   .contact.with-box .contactform > * {
      color: #fff;
   }
   .contact .toppic-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
  }
   .contact.with-box .toppic-actions button {
      color: #fff;
      border: 2px solid #fff;
      background-color: transparent;
   }
   .contact.with-box .toppic-actions button.active, 
   .contact.with-box .toppic-actions button:hover, 
   .contact.with-box .toppic-actions button:focus, 
   .contact.with-box .toppic-actions button:active {
      color: #fff;
      border: 2px solid var(--n1Blue);
      background-color: var(--n1Blue);
  }
  .yourcontact {
      display: grid;
      grid-template-columns: 5rem 1fr;
      gap: 1rem;
      align-items: center;
   }

   .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 */
   footer > .blue-bg {
      --footerlinks-cols: 3;
   }
}

@media (min-width: 59em) {  /* ca 950er Auflösung */
   :root {
      --header_padding_inline: 4rem;
      --section_margin_inline: clamp(10.25rem, 1.3248rem + 13.9456vw, 20.5rem); /* 1024 - 2200 * 164px bis 328px */
      --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 */
   }

   .modal-dialog .btn {
      font-size: var(--fs_400);
      padding: 0.75rem 1.5rem;
   }

   /* .primary-nav {    
      --logo_width: 3.4rem;
      --li_margin_bottom: var(--spacer_64);
      
      display: grid;
      grid-template-columns: 50% 50%;
      gap: 1rem;
   } */
   .primary-nav {    
      --logo_width: 3.4rem;
      --li_margin_bottom: var(--spacer_64);
      
      display: flex;
      gap: 1rem;
   }
   .primary-nav > * {    
      width: 50%;
   }
   .primary-nav a {
      font-size: var(--fs_600);
   }
   .primary-nav .nav-left-col,
   .primary-nav .nav-right-col {
      padding: 0;
      margin-bottom: 0;
   }
   .primary-nav .nav-left-col {
      position: relative;
      padding-left: 3.5rem;
   }
   .primary-nav .nav-left-col::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 1px;
      height: 100%;
      border-right: 1px solid #fff;
   }
   .primary-nav .nav-right-col {
      display: block;
      padding-left: var(--spacer_64);     
   }
   .primary-nav .nav-right-col > div:first-child {
      display: block; 
      font-size: var(--fs_600);
      line-height: 1;
      margin-bottom: var(--li_margin_bottom);
   }
   .primary-nav .divider {
      display: none;
   }
   .primary-nav .nav-applink {
      margin-bottom: var(--spacer_56);
   }
   .primary-nav .nav-applink div {
      font-size: var(--fs_600);
      line-height: 1;
   }
   .primary-nav .nav-applink div span {
      display: inline;
      font-size: var(--fs_450);
   }

   .primary-nav a,
   .primary-nav .nav-right-col > div:first-child,   
   .primary-nav .nav-applink div {
      font-size: var(--fs_450);
   }
   .primary-nav .nav-applink div span {
      font-size: var(--fs_400);
   }
   .primary-nav .nav-applink .app-logo {
      width: 2.6rem;
   }

   .hero-content-logo img {
       height: 2.52rem;
    }
   .hero-actions {
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
   }
   .hero-box-content .hero-actions a {
      margin-bottom: 0 !important;
   }

   .hero-box.hero-box-main{
      grid-template-columns: 50vw;
      overflow: visible;
   }

   .about .hero-box {
      position: static;
      transform: none;
      width: auto;
   }

   .circular-magazine-list .hero-box-content {
      padding: 80% 10% 10%;
  }

   main > section > .two-cols > p {
      margin-bottom: 0;
  }

   .plantmanager .btn-price-xl {
      font-size: calc(var(--btn_height) / 3);
      color: #fff;
      border: 1px solid var(--colorAppPM);
      background-color: var(--colorAppPM);
   }
   .plantmanager .btn-price-xl:hover,
   .plantmanager .btn-price-xl:focus,
   .plantmanager .btn-price-xl:active {
      border: 1px solid var(--colorAppPM);
      background-color: var(--colorAppHoverPM);
   }

   .desktop-only {
      display: block;
   }

   .hero-box-main{
      background: transparent;
      box-shadow: none;
   }
   
   body.main .hero-wrapper {
      background-color: var(--n1Blue);
   }
   body.main .hero-wrapper,
   body.partner .hero-wrapper,
   body.jobs .hero-wrapper {
      background-image: url(../img/Startseite_HG.jpg);
      background-position: top right;
      background-repeat: no-repeat;
      background-size: cover;
   }
   body.main .hero-wrapper .video-background,
   body.partner .hero-wrapper .video-background,
   body.jobs .hero-wrapper .video-background {
      position: absolute;
      height: 100%;
      top: 0;
      right: 0;
      mix-blend-mode: multiply;
      transform: translate3d(0,0,0);
   }

   .targetgrouppage .hero-wrapper .video-bg {
      overflow: hidden;
   }
   .targetgrouppage .hero-wrapper .video-background {
      max-width: 105%;
   }
   .targetgrouppage .hero-wrapper .video-background {
      position: absolute;
      right: 0;
      max-width: none;
      height: 100%;
   }

   .hero-positioning {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      width: 90%;
      margin: auto;
   }
   .targetgrouppage .hero-positioning {
      position: absolute;
      width: 100%;
      padding-inline: 5%;
   }

   .hero-box {
      height: auto;
   }

   .hero-wrapper .video-bg,
   .hero-img,
   aside video,
   .moving-bg {
      display: block;
   }
   .higher-zindex {
      position: relative;
      z-index: calc(var(--section_level) + 10);
   }

   .fixed-actions {
      display: grid;
      grid-template-columns: calc(var(--img_size) + var(--img_padding_right)) 1fr;
   }
   
   .moving-bg video {
      width: 100%;
      mix-blend-mode: multiply;
   }

   section {
      position: relative;
      z-index: var(--section_level);
   }

   section.with-box {
      padding: 0;
      background: transparent;
   }
   section.with-box.with-tiles {
      background: transparent;
      padding: 0;
  }
   
   .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.gradient-bg-box {
      grid-column: 1 / 3;
      grid-row: 1;
   }
   .full-width-split.price {
      --col50: calc(var(--max_content_width) / 2);
      
      grid-template-columns: 1fr minmax(0, var(--col50)) minmax(0, calc(var(--col50) / 3)) minmax(0, calc(var(--col50) / 3 * 2)) 1fr;
   }
   .full-width-split.price > aside.gradient-bg-box {
      grid-column: 1 / 4;
      background-image: url(../img/produktseiten/PM_Pfeil.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
   }
   .full-width-split > .tabs-nav,
   .full-width-split > .accordion-wrap,
   .full-width-split > .contact-info,
   .full-width-split > .nav-col,
   .full-width-split > .mission-text,
   .full-width-split > .benefits-list,
   .full-width-split > .price-wrap,
   .tile-row.full-width-split > div:first-of-type {
      grid-column: 2 / 3;
      grid-row: 1;
      padding: var(--spacer_120) var(--spacer_64) var(--spacer_120) var(--content_padding_inline);
      z-index: calc(var(--section_level) + 1);
   }
   .full-width-split > .tabs-panels,
   .full-width-split > .accordion-panels,
   .full-width-split > .contactform,
   .full-width-split > .content-col,
   .full-width-split > .mission-list,
   .full-width-split > .benefits-chart,
   .full-width-split > .price-cta,
   .full-width-split.width-fluid-1col > div,
   .tile-row.full-width-split > div:last-of-type {
      grid-column: 3 / 4;
      grid-row: 1;
      align-self: center;
      padding: var(--spacer_120) var(--spacer_64);
      z-index: calc(var(--section_level) + 1);
   }
   .full-width-split > .price-cta {
      grid-column: 4 / 5;
   }
   .full-width-split.width-fluid-1col > div {
      grid-column: 2 / 4;
   }
   .full-width-split > aside.gradient-bg-box.width-fluid {
      grid-column: 1 / 5;
      grid-row: 1;
   }
   .full-width-split > aside.gradient-bg-box.rightside {
      grid-column: 3 / 5;
      grid-row: 1;
   }
   .tile-row.uneven-row.full-width-split > aside {
      grid-column: 1 / 3;
      grid-row: 1;
   }
   .tile-row.even-row.full-width-split > aside {
      grid-column: 3 / 5;
      grid-row: 1;
   }
   .full-width-split:has(.width-fluid),
   .full-width-split > .contactform,
   .full-width-split > .content-col {
      color: #fff;
   } 
   .full-width-split > .contactform {
      padding: var(--spacer_120) var(--content_padding_inline) var(--spacer_120) var(--spacer_120);
   }

   .full-width-split > .mission-text h2,
   .full-width-split > .mission-text p {
      color: var(--n1Blue);
   }

   .benefits-list {
      margin-bottom: 0;
   }

   .benefits-chart.benefits-sl{
      padding-bottom: 0;
   }

   .mobile-only {
      display: none;
   }

   .two-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
   }

   .btn-price-xl {
      --btn_height: 4.5rem;
   }

   .price-box-wrap {
      display: grid;
      grid-template-columns: 60% 40%;
      gap: 1rem;
      background: transparent;  
      color: var(--n1Blue); 
   }
   .price-box-wrap .price-cta {
      position: relative;
      top: 50%;
      transform: translatey(-2rem);
      padding: 0 var(--spacer_64);
   }
   .price-cta > div:first-of-type {
      margin-bottom: var(--spacer_32);
   }
   .price-cta > div:last-of-type {
      margin-bottom: var(--spacer_96);
   }
   .price-cta > div:last-of-type div {
      margin-bottom: var(--spacer_48);
   }
   .price-box {
      color: #fff;
      background-image: url(../img/produktseiten/PM_Pfeil.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
   }
   .price-box-inner {
      padding: var(--spacer_120) var(--spacer_120) var(--spacer_120) var(--content_padding_inline);
   }
   .price-box .small {
      max-width: 80%;
      margin-bottom: 0;
   }

   .video-bg-main {
      display: block;
      position: fixed;
      top: 0;        
      right: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
      background-image: url(../../apps/site-depot-community/img/landingpage/Header_Verlauf_HG_SiteDepotCommunity.png);
      background-repeat: no-repeat;
      background-size: auto;
      background-position: top left;
   }
   .video-background-main {
      position: fixed;
      top: 0;
      right: 0;
      width: 50%;
      mix-blend-mode: multiply;
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
      opacity: 0.5;
  }

  .hl-with-ruler-and-logo {
      display: flex;
      gap: var(--spacer_48);
      position: relative;
      top: -3rem;
  }
  .ruler {
      position: relative; 
      flex: 1;
  }
  .ruler::before {
      content: "";
      position: absolute;
      top: calc(50% - 1px);
      width: 100%;
      border-bottom: 2px solid #ccc;
  }

  .articles {
      --article-cols: 3;
   }
   .articles {
      gap: clamp(1rem, 0.2609rem + 1.1594vw, 2rem);
   }

   .quote-container {
      --sd_company_img_width: 10rem;
      --sd_user_img_width: 10rem;

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

   ul:has(.bulletpoint) {
      margin-bottom: 0;
   }
   li.bulletpoint svg {
      display: block;
      top: 0.2rem;
      font-size: 1.5rem;
  }

   .main .partner.slider .tns-inner,
   .main .partner.slider .tns-inner img {
      height: 10rem;
   }

   .accordion .accordion-item:last-child {
      margin-bottom: 0;
  }

   .slider-body {
      --icon_headline_width: 4rem;
   }
   .slider-body .plus {
      background : transparent linear-gradient(125deg, #0087BB 0%, #0087BB 12%, #9F197D 100%) 0% 0% no-repeat padding-box;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
   }

   .targetgroup-grid {
      background-image: url(../img/Netzgrafik_Blank.svg);
      background-repeat: no-repeat;
      background-position: center;
   }
   .targetgroup-grid-item {
      position: absolute;
  }  
   .targetgroup-grid-item header svg {
      font-size: 4rem;
   }
   .targetgroup-grid-item h4 {
      width: calc(var(--width) / 2);
      margin-bottom: -0.5rem;
   }
   .targetgroup-grid-item header svg {
      font-size: 2.5rem;
   }
   .targetgroup-grid-item.manufacturer,
   .targetgroup-grid-item.recycler,
   .targetgroup-grid-item.construction,
   .targetgroup-grid-item.communes {
      --width: 29.2rem;
      
      margin-bottom: 0;
   }
   .targetgroup-grid-item.manufacturer {
      top: 0;
      left: 0;
   }
   .targetgroup-grid-item.recycler {
      left: 0;
      bottom: 8rem;
   }
   .targetgroup-grid-item.recycler h4 {   
      width: calc(var(--width) / 1.5);
   }
   .targetgroup-grid-item.construction {
      top: 8rem;
      right: 0;
   }
   .targetgroup-grid-item.communes {
      bottom: 2rem;
      right: 0;
   }
   .targetgroup-grid-item.communes h4 {   
      width: calc(var(--width) / 1.2);
   }

   .benefits-chart.benefits-sl{
      color: var(--n1Blue);
   }

   .app-logo-header {
      --icon_headline_width: 4rem;
   }
   .app-logo-header img {
      margin-bottom: 0;
   }
   .app-logo-header > div > h3 {
   
   }
   .app-logo-header > div > span {
      
   }

   .matchmanufacturer .benefits-chart * {
      color: initial;
   }

   .formrow {
      --label_width: 10rem;
      --bottom_gap: 1rem;
   
      display: grid;
      grid-template-columns: var(--label_width) 1fr;
      margin-bottom: var(--spacer_32);
   }
   .inputrow {
      --label_with: 7.5rem;
   }

   section.founder {
      --img_width: 18rem;
   }
   section.founder > div {
      grid-template-columns: var(--img_width) 1fr;
      gap: 2rem;
      align-items: center;
   }
   section.founder > div img {
      width: var(--img_width);
      margin-inline: 0;
   }
   
   .contacts-wrap {
      --img_width: 10rem;

      grid-template-columns: 1fr 1fr;
      gap: 2rem;
   }

   .full-width-split.width-fluid-1col > div {
      padding-inline: var(--spacer_64);
   }

   #slider-awards .slider-item-inner .centered {
      width: 80%;
      margin-inline: auto;
   }
   #slider-awards .slider-item-inner .centered {
      display: flex;
      align-items: center;
      gap: 4rem;
   }
   #slider-awards .contest-logos img {
      width: auto;
   } 

   .innovation-contest-bw .contest-logos, 
   .bundespreis-ecodesign .contest-logos, 
   .deutscher-innovationspreis .contest-logos, 
   .bauma-innovationspreis .contest-logos, 
   .deutscher-nachhaltigkeitspreis .contest-logos {
      width: 10rem;
      margin-bottom: 0;
   }  
   .bundespreis-ecodesign .contest-logos {
      width: 8rem;
   }  
   .innovation-contest-bw .contest-logos img:first-of-type {
      margin-bottom: 3rem;
   }
   .bundespreis-ecodesign .contest-logos img, 
   .deutscher-innovationspreis .contest-logos img, 
   .bauma-innovationspreis .contest-logos img, 
   .deutscher-nachhaltigkeitspreis .contest-logos img {
      max-height: initial;
   }
   .innovation-contest-bw .contest-logos img:last-of-type {
      margin-bottom: 0;
   }

   #slider-awards .contest-info {
      flex: 1;
   } 

   .magazine-list,
   .job-list {
      display: grid;
      grid-template-columns: 70% 30%;
      gap: 2rem;
   }
   .magazine-list .magazine-filter-box,
   .job-list .job-filter-box {
      /* position: absolute;
      top: 0;
      right: 0;
      width: calc(20vw - var(--content_padding_inline)); */
      grid-column: 2 / 2;
      grid-row: 1;
      margin-bottom: 0;
   }
   .magazine-filter-box a,
   .job-filter-box a {
      display: flex;
      justify-content: space-between;
   }
   .magazine-list .magazine-card,
   .job-list .job-card {
      width: 46% !important;
      min-height: var(--card_height);
   }
   .magazine-list .magazine-card .card-img {
      height: var(--card_height);
   }

   .mission-text > div > h3 {
      color: var(--n1Blue);
   }
   .full-width-split > .mission-list {
      padding-left: var(--spacer_64);
   }

   .contact-img-placeholder svg {
      font-size: 8rem;
   }

   .magazine-teaser > h2 {
      display: block;
   }
   .magazine-teaser .magazine-logo {
      width: 14rem;
      margin-bottom: 0;
   }

   .magazine-list .magazine-card .card-bg,
   .job-list .job-card .card-bg {
      padding: var(--spacer_48);
   }
   .magazine-list .magazine-card .card-bg a,
   .job-list .job-card .card-bg a {
      bottom: var(--spacer_48);
   }
   .magazine-list p {
      font-size: var(--fs_300);
      margin-bottom: calc(var(--spacer_32) + var(--spacer_32));
   }

   .partner-tile {
      align-self: flex-start !important;
      padding: var(--spacer_80) !important;
      margin-bottom: 0;
   }
   .partner-tile > header {
      margin-bottom: var(--spacer_32);
   }
   .partner-tile > p:last-of-type {
      margin-bottom: 0;
   }
      
   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 */
   .primary-nav .nav-left-col {
      padding-left: 3.8rem;
  }
  .primary-nav .nav-left-col::after {
      right: 2.5rem;
   }
   
   .targetgroup-grid-item.manufacturer, 
   .targetgroup-grid-item.recycler, 
   .targetgroup-grid-item.construction, 
   .targetgroup-grid-item.communes {
      --width: 34rem;
  }
}

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

   .primary-nav a,
   .primary-nav .nav-right-col > div:first-child,   
   .primary-nav .nav-applink div {
      font-size: var(--fs_600);
   }
   .primary-nav .nav-applink div span {
      font-size: var(--fs_450);
   }
   .primary-nav .nav-applink .app-logo {
      width: var(--logo_width);
   }

    .primary-nav .nav-left-col li {
      padding-left: calc(var(--main_header_height) - 0.5rem);
    }
    .primary-nav .nav-left-col a {
     position: relative;
    }
    .primary-nav .nav-left-col a svg {      
      transition: all 300ms ease-in-out;
    }
    .primary-nav .nav-left-col a:hover svg {
      position: absolute;
      top: 0.2rem;
      left: -1.5rem;
      display: inline-block;
    }
    .primary-nav .nav-applink {
      display: flex;
      align-items: center;
      height: var(--logo_width);
      overflow: hidden;
      transition: all 500ms ease-in-out;
    }   
    .primary-nav .nav-applink.hidden {
      /* height: 0;
      margin-bottom: 0; */
      filter: grayscale(1);
      opacity: .15;
    }   
    .primary-nav .nav-applink > svg {
      display: inline-block;
        font-size: 3rem;
        margin-left: 1rem;
        opacity: 0;
        transition: all 500ms ease-in-out;
    }
    .primary-nav .nav-applink:hover > svg {
      opacity: 1;
    }
    .primary-nav .nav-applink div {
      width: max-content;
    }

   .primary-nav .nav-left-col {
      padding-left: 0.2rem;
   }
   .primary-nav .nav-left-col::after {
      right: 1.5rem;
   }

    .main .hero-box-content img {
      width: 6rem;
   }

   .hero-content-logo {
      margin-bottom: var(--spacer_32);
   }

   .circular-magazine-list .hero-box-content {
      padding: 60% 1rem 0;
   }
   .circular-magazine-list .hero-box-content img {
      width: 34rem;
   }

   .full-width-split > .tabs-panels, 
   .full-width-split > .accordion-panels, 
   .full-width-split > .contactform, 
   .full-width-split > .content-col, 
   .full-width-split > .benefits-chart, 
   .full-width-split > .price-cta {
      padding: var(--spacer_120) var(--spacer_120) var(--spacer_120) var(--spacer_64);
   }
   .price-box-wrap .price-cta {
      padding: var(--spacer_120) 0 var(--spacer_120) var(--spacer_64);
      padding:0 var(--content_padding_inline) 0 var(--spacer_64);
   }

   .benefits-chart.benefits-sl{
      padding-bottom: 0;
   }

   .matchmanufacturer .benefits-chart-container {
      --number_size: 6rem;
      
      column-gap: 3rem;
      row-gap: 4rem;
   }
   .benefits-vertical-line {
      left: 2.75rem;
      width: 0.5rem;
   }
   .matchmanufacturer .benefits-chart-container .benefits-number {        
      font-size: var(--step_700); 
   }

   .quote-container {
      --sd_company_img_width: 12rem;
      --sd_user_img_width: 12rem;

      gap: 4rem;
   }

  .main .tabs-nav ul.rounded {
      grid-template-columns: repeat(3, 1fr);
   }

  li.bulletpoint svg {
      font-size: 1.8rem;
      left: -2.2rem;
   }

   .slider-body {
      --icon_headline_width: 4.3rem;
   }

   .targetgroup-grid-item.manufacturer {
      --width: 30rem;

      top: 0rem;
      left: 4rem;
   }
   .targetgroup-grid-item.manufacturer p,
   .targetgroup-grid-item.construction p {
      width: calc(var(--width) / 1.2);
   }
   .targetgroup-grid-item.recycler {
      --width: 30rem;

      left: 6rem;
      bottom: 4rem;
   }
   .targetgroup-grid-item.recycler h4 {   
      width: calc(var(--width) / 1.5);
   }
   .targetgroup-grid-item.construction {
      --width: 28rem;

      top: 3rem;
      right: 5rem;
   }
   .targetgroup-grid-item.communes {
      --width: 30rem;

      bottom: 4rem;
      right: 1rem;
   }
   
   .zielgruppennetz .sliding-panles{
      align-self: center;
   }
   .zielgruppennetz li svg{
      font-size: 2rem;
   }

   .app-logo-header {
      --icon_headline_width: 4.3rem;
   }

   .modal-body {
      margin-block: var(--spacer_32);
   }

   .formrow {
      --label_width: 10rem;
      --bottom_gap: 1rem;

      margin-bottom: var(--spacer_32);
   }
   .inputrow {
      --label_with: 8.5rem;

      padding: 0.8rem;
   }

   #register-modal .formrow {
      gap: 2rem;
   }
   #register-modal p,
   #register-modal .cc-body-p, 
   #register-modal .cc-checkbox-label, 
   #register-modal .cc-checkbox-info, 
   #register-modal .cc-checkbox-head, 
   #register-modal .cc-cookie-detailinfo, 
   #register-modal .cc-cookie-detailinfo-col1,
   #register-modal label {
      font-family: regular;
      font-size: var(--fs_400);
      line-height: var(--lh_15);
   }

   #register-modal .modal-footer .small-text {
      top: -1.5rem;
   }

   .contacts-wrap {
      --img_width: 12rem;
      gap: 3rem;
   }

   #slider-awards .slider-item-inner .centered {
      width: 70%;
   }
   .innovation-contest-bw .contest-logos, 
   .bundespreis-ecodesign .contest-logos, 
   .deutscher-innovationspreis .contest-logos, 
   .bauma-innovationspreis .contest-logos, 
   .deutscher-nachhaltigkeitspreis .contest-logos {
      width: 14rem;
      margin-bottom: 0;
   }
   .deutscher-innovationspreis .contest-logos,
   .bauma-innovationspreis .contest-logos {
      width: 12rem;
   } 
   .bundespreis-ecodesign .contest-logos {
      width: 8rem;
   } 
   .innovation-contest-bw .contest-logos {
      width: 18rem;
   }

   .full-width-split > .mission-list {
      padding-left: var(--spacer_120);
   }

   .contact-img-placeholder svg {
      font-size: 10rem;
   }

   .magazine-list,
   .job-list {
      --card_height: 14rem;
   }
   .magazine-list .magazine-card {
      width: 30% !important;
   }
   .job-list .job-card {
      width: 46% !important;
   }
   .magazine-list .magazine-card .card-bg {
      padding: var(--spacer_32);
   }
   .job-list .job-card .card-bg {
      padding: var(--spacer_48);
   }
   .magazine-list .magazine-card .card-bg a,
   .job-list .job-card .card-bg a {
      bottom: var(--spacer_32);
   }

   .magazine-teaser .magazine-logo {
      width: 16rem;
   }

   .tile-row div.partner-tile:first-of-type {
      padding-left: var(--content_padding_inline) !important;
   }
   .tile-row div.partner-tile:last-of-type {
      padding-right: var(--content_padding_inline) !important;
   }

   .captcha-row {
      margin-left: 2rem;
   }

   .partner2 .slider-item > header img {
      height: 5rem;
  }
        
   footer > .blue-bg {
      --mainfooter-cols: 3;
      --footerlinks-cols: 1;
   }
   footer > .blue-bg > div {
      margin-bottom: 0;
   }

}

@media (min-width: 100em) {  /* ca 1600er Auflösung */
   .main-navbar.nav-is-open,
   .main-navbar .primary-nav {
      padding-inline: calc(var(--header_padding_inline) + 2rem );
   }
  .main-navbar.nav-is-open .primary-nav {
      padding: calc(var(--main_header_height)* 1.5 + 5rem) calc(var(--header_padding_inline) + 2rem ) var(--main_header_height);
   }
   .primary-nav .nav-left-col::after {
      right: 2.5rem;
   }

   .circular-magazine-list .hero-box-content {
      padding: 55% 1rem 4rem;
   }
   .circular-magazine-list .hero-box-content img {
      width: 38rem;
   }

   .targetgroup-grid-item.manufacturer {
      --width: 33rem;
      top: 1rem;
      left: 4.5rem;
  }
  .targetgroup-grid-item.construction {
      --width: 30rem;
      top: 3rem;
      right: 5rem;
   }
   .targetgroup-grid-item.recycler {
      --width: 32rem;
      left: 2.5rem;
      bottom: 1.5rem;
  }
  .targetgroup-grid-item.communes {
      --width: 30rem;
      bottom: 4rem;
      right: 3rem;
   }

   section.founder {
      --img_width: 20rem;
   }
   .contacts-wrap {
      --img_width: 14rem;
      gap: 4rem;
   }

   .mission-list li.bulletpoint svg {
      font-size: 1.6rem;
      top: 0;
      left: -2.2rem;
   }
   .mission-list ul {
      padding-left: 2.4rem;
   }

   .contact-img-placeholder svg {
      font-size: 12rem;
   }

   .magazine-teaser .magazine-logo {
      width: 18rem;
   }

   .deutscher-nachhaltigkeitspreis .contest-logos {
      width: 13rem;
   }
   .deutscher-innovationspreis .contest-logos,
   .bauma-innovationspreis .contest-logos {
      width: 11rem;
   } 
   .bundespreis-ecodesign .contest-logos {
      width: 8rem;
   } 
   .innovation-contest-bw .contest-logos {
      width: 19rem;
   }
}

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

   .main-navbar.nav-is-open, .main-navbar .primary-nav {
      padding-inline: calc(var(--header_padding_inline) + 6rem );
   }
   .main-navbar.nav-is-open .primary-nav {
      padding: calc(var(--main_header_height)* 1.5 + 5rem) calc(var(--header_padding_inline) + 6rem) var(--main_header_height);
   }
   .primary-nav .nav-left-col::after {
      right: 4rem;
   }

   .circular-magazine-list .hero-box-content {
      padding: 55% 2rem 4rem;
   }
   .circular-magazine-list .hero-box-content img {
      width: 40rem;
   }

   .fixed-actions.cta-date {   
      top: calc(var(--action_pos_top) + 5.5rem);
   }

   .full-width-split > .tabs-nav, 
   .full-width-split > .accordion-wrap, 
   .full-width-split > .contact-info, 
   .full-width-split > .nav-col, 
   .full-width-split > .benefits-list, 
   .full-width-split > .price-wrap {
      padding: var(--spacer_120) var(--spacer_120) var(--spacer_120) var(--content_padding_inline);
   }
   .full-width-split > .tabs-panels, 
   .full-width-split > .accordion-panels, 
   .full-width-split > .contactform, 
   .full-width-split > .content-col, 
   .full-width-split > .benefits-chart, 
   .full-width-split > .price-cta {
      padding: var(--spacer_120) 0 var(--spacer_120) var(--spacer_120);
   }

   .slider-wrap {
      position: relative;
   }
   #partner-slider-controls,
   #awards-slider-controls {
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      list-style-type: none;
      padding: 0;
      margin: 0;
      z-index: -1;
   }
   #partner-slider-controls li,
   #awards-slider-controls li {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
   }
   #partner-slider-controls li.prev,
   #awards-slider-controls li.prev {
      left: -5rem;
   }
   #partner-slider-controls li.next,
   #awards-slider-controls li.next {
      right: -5rem;
   }
   #partner-slider-controls svg,
   #awards-slider-controls svg {
      font-size: 5rem;
   }
   #slider-partner-ow .tns-nav,
   #slider-partner2-ow .tns-nav,
   #slider-awards-ow .tns-nav {
      display: none;
   }

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

  .main .tabs-nav ul.rounded {
      gap: 1.5rem;
   }
  .main .tabs-nav ul.rounded svg {
      font-size: 4rem;
   }

   .targetgroup-grid-item.manufacturer {
      --width: 36rem;
      top: 0.8rem;
      left: 10rem;
  }
  .targetgroup-grid-item.construction {
      --width: 32rem;
      top: 4rem;
      right: 10rem;
   }
   .targetgroup-grid-item.recycler {
      --width: 36rem;
      left: 6rem;
      bottom: 0.5rem;
  }
  .targetgroup-grid-item.communes {
      --width: 32rem;
      bottom: 3.4rem;
      right: 12rem;
   }

   .price-box-wrap {
      --content_padding_inline: 8rem;
   }
   .price-box-inner {
      padding: var(--spacer_120) calc(var(--spacer_120) + 5rem) var(--spacer_120) var(--content_padding_inline);
   }
   .price-box-wrap .price-cta {
      padding: 0 var(--content_padding_inline) 0 var(--spacer_64);
  }

  .modal-body {
      margin-block: var(--spacer_32);
   }

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

  #register-modal .formrow {
     --label_width: 12rem;
   }

   .full-width-split.width-fluid-1col > div {
      padding-inline: 0;
   }

   section.founder {
      --img_width: 20rem;
   }
   .contacts-wrap {
      --img_width: 16rem;
      gap: 4rem;
      row-gap: 6rem;
   }
   .contacts-wrap .contacts-item {
      gap: 2rem;
   }

   #slider-awards .slider-item-inner .centered {
      width: 60%;
   }
   .deutscher-nachhaltigkeitspreis .contest-logos {
      width: 14.5rem;
   }
   .deutscher-innovationspreis .contest-logos,
   .bauma-innovationspreis .contest-logos {
      width: 11rem;
   } 
   .bundespreis-ecodesign .contest-logos {
      width: 9rem;
   } 
   .innovation-contest-bw .contest-logos {
      width: 22rem;
   }

   .article.card {
      padding: var(--spacer_80) var(--spacer_48);
   }

   .mission-list li.bulletpoint svg {
      font-size: 1.7rem;
   }

   .contact-img-placeholder svg {
      font-size: 14rem;
   }

   .magazine-teaser .magazine-logo {
      width: 20rem;
   }

   .magazine-list,
   .job-list {
      --card_height: 18rem;
   }

   .inputrow {
      --label_with: 9.5rem;

      padding: 1rem;
   }

   .benefits-vertical-line {
      left: 2.8rem;
      width: 0.5rem;
   }
   .matchmanufacturer .benefits-chart-container .benefits-number {        
      font-size: var(--step_600); 
   }

  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 {
      --x_factor_navbar: 1;
   }

   .main-navbar.nav-is-open, .main-navbar .primary-nav {
      padding-inline: calc(var(--header_padding_inline) + 14rem );
   }
   .main-navbar.nav-is-open .primary-nav {
      padding: calc(var(--main_header_height)* 1.5 + 5rem) calc(var(--header_padding_inline) + 14rem) var(--main_header_height);
   }
   .primary-nav .nav-left-col::after {
      right: 9rem;
   }

   .hero-positioning .hero-box {
      margin-left: 5rem; /* mit Björn festgelegt */
   }
   .hero-box.hero-box-main .hero-box-content{
      padding: 8%;
   }
   .hero-box.hero-box-main .hero-box-content h1{
      font-size: 60px;
   }
   .hero-box.hero-box-main .hero-box-content p{
      font-size: 32px;
   }
   
   .hero-content-logo img { /* mit Björn festgelegt */
      height: 3.5rem;
   }
   .hero-box h1 {  /* mit Björn festgelegt */
      font-family: bold;
      font-size: 45px; /* max */
      line-height: 1.05;
      margin-bottom: 0.5rem;
   }
   .hero-p { /* mit Björn festgelegt */
      margin-bottom: var(--spacer_64);
   }

   /* .hero-box-main,
   .hero-box-targetgroup,
   .hero-box-products {
      width: 60rem;
   } */  /* mit Björn festgelegt */
   .main .hero-box-content img {
      width: 10rem;
      margin-bottom: 1.5rem;
   }   

   .circular-magazine-list .hero-box .hero-box-content {
      padding: 55% 14rem 4rem;
   }
   .circular-magazine-list .hero-box .hero-box-content img {
      width: 50rem;
   }

   .targetgrouppage .hero-wrapper .video-background {
      position: absolute;
      right: 0;
      bottom: 0;
      max-width: none;
      height: auto;
   }

   .fixed-actions.cta-date {   
      top: calc(var(--action_pos_top) + 6rem);
   }

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

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

   .targetgroup-grid-item.manufacturer {
      --width: 40rem;
      top: 0.5rem;
      left: 6rem;
  }
  .targetgroup-grid-item.construction {
      --width: 32rem;
      top: 3rem;
      right: 10rem;
   }
   .targetgroup-grid-item.recycler {
      --width: 38rem;
      left: 5rem;
      bottom: 0;
  }
  .targetgroup-grid-item.communes {
      --width: 32rem;
      bottom: 0;
      right: 11rem;
   }

   .price-box-wrap {
      --content_padding_inline: 29%;
   }

   .modal-body {
      margin-block: var(--spacer_56);
  }

  #register-modal .modal-footer .small-text {
      top: -1.8rem;
   }

   section.founder > div {
      gap: 3rem;
   }

   .mission-list ul {
      padding-left: 2.8rem;
   }
   .mission-list li.bulletpoint svg {
      font-size: 2rem;
      top: 0rem;
      left: -2.5rem;
   }

   #slider-awards .slider-item-inner .centered {
      width: 70%;
   }

   .inputrow {
      --label_with: 10.5rem;
   }

   .benefits-vertical-line {
      bottom: 3rem;
   }
}