/* ─── base.css ─── */


*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


a:link {
	color: white;
	text-decoration: none;
}

a:visited {
	color: white;
	text-decoration: none;
}

a:active {
	color: white;
	text-decoration: none;
}

a:hover {
	color: white;
	text-decoration: none;
}

/* Horizontal scrolling box */
.scrolling-wrapper{
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  width: auto;
}

.scrolling-wrapper {
  -webkit-overflow-scrolling: touch;
}

.scrolling-wrapper {
  &::-webkit-scrollbar {
    display: none;
  }
}


.page-container
{
	max-width:100vw;
	height:auto;
	/* overflow-x:hidden; */ /* KILLT STICKY !!!  */
}


#main_content{
	max-width:100vw;
	width:100vw;
	/* overflow:hidden; */ /* KILLT STICKY !!!  */
	/* overflow-x:hidden;  */
}


.body_side_filter_open{
    margin-left: 0%;
    width: 100%;
}


.flexbox_fix{ z-index:0 !important; }

.flexbox_flex{
    width:100%;
    z-index: 2;
    background:transparent;

    transition: all 0.5s ease;
    -ms-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;
}


.flexbox_fix.filter_open{
width:var(--filter_width);
z-index:9 !important;
}

.content{
	position:relative;
    letter-spacing:0pt !important;
	padding: 0px 1em 2em 1em;
    text-align:center;
    line-height:210%;
    font-size: var(--test-base);
    font-weight: 300;
}

.content.content_flex_center{
	display: flex;
    position: relative;
    align-content: center;
    align-items: center;
    justify-content: center;
    height:100%;
    z-index:2; /* über bg-wrapper__overlay */
}

.content .inner{
    max-width:800px;
    margin:0 auto;
    font-size:var(--base)
}


/* breiter contetnt ohne padding links und rechts */
.content_wide{
    max-width:var(--max_content_width) !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.content section h3{
    /* text-align:left !important; */
}

.content section h3{
    line-height: 130%;
    font-weight: bold;
    /* margin-left: 2em; */
}

.content ul{
    padding-inline-start: 3em;
}

.content ul, li{
    list-style-type: none;
    margin-block-start: 0em;
    margin-block-end: 1.5em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0em;
    line-height: 160%;
}

.content ul .content_list_decimal {
    list-style-type: decimal;
}

.content ul .content_list_disc {
    list-style-type: disc;
}

.content > p{
	line-height:160%;
	max-width:800px;
	margin:0 auto;
	margin-bottom: 30px;
	font-size:var(--text-lg);
}





/* SECTION WRAPPER ------------------------------------ */
.vorteile-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
  padding: 3rem 0;
  width: 100%;
  margin: 0 auto;
  
}

/* TITEL ----------------------------------------------- */
.vorteile-title {
  padding-top: 3em;
  font-size: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.vorteile-sub {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-family: var(--font-display);
  color: var(--color-accent);
  margin-bottom: .5rem;
}

/* BESCHREIBUNG ---------------------------------------- */
.vorteile-desc {
  max-width: 100%;
  line-height: 1.6;
  font-size: 1.55rem;
  color: var(--color-text);
  padding:25px 50px;
}

/* LISTE ----------------------------------------------- */
.vorteile-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

/* EINZELNER VORTEIL ----------------------------------- */
.vorteil-item {
  padding: 1rem 1.3rem;
    border-radius: 14px;
    color: var(--color-text);
    font-size: 1.55rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    transition: background .25s 
	ease, transform .25s 
	ease, box-shadow .25s 
	ease;
	    justify-content: center;
}

/* SMALL ICON / BULLET */
.vorteil-item::before {
  content: "✔";
  color: var(--color-accent);
  font-size: 2rem;
  opacity: 0.9;
}




.scroll_panel .content{
    width: 100%;
    max-width: 100vw;
    position: relative;
    background-color: transparent;
    /* inset: 0; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding:0px;
    margin:0px;
    z-index:9;
}


/* Contact */




/* Accordeon container ... FAQ etc. */


/* === FAQ === */

/*
.accordion-container .accordion-title {
    display: flex;
    font-weight: bold;
    border-bottom: 1px solid #ffffff50;
    position: relative;
    margin: 0;
    background-color: #010101 !important;
    font-size: var(--text-base);
    color: #fff !important;
    cursor: pointer;
    text-align: left;
    align-content: center;
    align-items: center;
     padding: 1em 50px 1em 0.8em;
}

.accordion-content{
	font-size: var(--text-base);
}

#detail_wrapper .accordion-container .accordion-title {
    
    font-weight: normal;
    border: 0px;
    background-color: rgba(0,0,0,0.2) !important;
    backdrop-filter:unset !important;
}

#detail_wrapper .accordion-container .accordion-title:hover {
    background-color: rgba(0,0,0,0.4) !important;
}



.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-title.open {
  background-color: #f3f3f3;
}


.accordion-container .accordion-title::after {
    position: absolute;
    right: 25px;
    transition: all .3s ease;
    content: "\2771";
    transform: rotate(90deg);
}


.accordion-container .accordion-title.open::after {
  transform: rotate(-90deg);
}

.accordion-content {
    border: 1px solid rgba(0,0,0,0.8);
    display: none;
    text-align: left;
    background:rgba(0,0,0,0.3);
    backdrop-filter:blur(20px);
}

.accordion-content,
.accordion-content-product {
  display: grid;
  grid-template-rows: 0fr;
  transition: all 0.3s ease;
  height:0px;
}

.accordion-content.open,
.accordion-content-product.open {
  grid-template-rows: 1fr;
  height:100%;
}

.accordion-content > * {
	
  overflow: hidden;
  min-height: 0;
  padding: 2.3125em; 
}

.accordion-content-inner{
	padding:0px;
	transition: all 0.3s ease;
}

.accordion-content-inner p{
	padding:3em;
}

.accordion-container {
  max-width: 900px;
  margin: 0 auto;
}

 
.accordion-content > *,
.accordion-content-product > * {
  overflow: hidden;
  min-height: 0;
}
*/

/* Accordeon container ende ... FAQ etc. */




#flexbox_main{
    padding-top: 30px;
    width: 100%;
    display:flex;
    max-width: var(--max_body_width);
    margin: 0 auto;
    flex-direction: row;
}


.flexbox_content {
    width: 100%;
    display:flex;
    /* max-width: var(--max_body_width); */
    flex-direction: column;
    transition:1s ease;
    align-content: center;
    justify-content: flex-start;
}


.flexbox_fix{
    transition: all 1.7s ease;
    -ms-transition: 1.7s ease;
    -webkit-transition: 1.7s ease;
    -moz-transition: 1.7s ease;
    -o-transition: 1.7s ease;

    width:0px;
}


.flexbox_flex{
    width:100%;
    z-index: 2;
    background:transparent;

    transition: all 1.5s ease;
    -ms-transition: 1.5s ease;
    -webkit-transition: 1.5s ease;
    -moz-transition: 1.5s ease;
    -o-transition: 1.5s ease;
}


.flexbox_flex{
    transition:1s ease;
    position:relative;
}

.flexbox_flex.filter_open{
    /* margin-left: 0 !important;
    width: calc(100vw - var(--filter_width)) */
}


.flexbox_flex.filter_open{
    /* margin-left: 0 !important; **/
    width:100vw;
    /*margin-left: var(--filter_width);*/

}


/* LARgE DESKTOP SCREEN */
@media screen and (min-width: 2100px) {

    :root{
        --filter_width: 300px; /* desktop */
        
    }

    #flexbox_main {
        max-width: var(--max_body_width);
    }

    .flexbox_fix{
        max-width: var(--filter_width);
    }

    .flexbox_flex{
        width:100%;
        float:left;
        z-index: 2;
    }

    #flexbox_flex.filter_open{
        /* margin-left: 0 !important; */
        width: calc(var(--max_body_width) - var(--filter_width));
    }


}


.range_box_outer {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 20px;
}



.title {
    text-align: center;
    margin: 0 auto;
}

.title, .word {
    hyphens: auto;
    /* hyphens: unset; */
    word-break: normal;
    overflow-wrap: normal;
}


.image-wrapper {
    position: absolute;
    /* inset: -5%; */
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.rg-button-wrapper{
	text-align:center;
}

.rg-button-wrapper a{
	margin:0 auto;
}




section {
    position: relative;
    overflow: hidden;
}



.scroll_panel {
    height: 100vh;
    width: 100%;
}


.placeholder-box {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.placeholder-box.loaded {
    height: auto !important;
    overflow: visible !important;
}



/* ─── left_menu.css ─── */
/* Left Menu */
.left-menu {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--menu-collapsed-width);
  background-color: #111;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--color-border);
  transition: width var(--transition-slow);
  overflow: hidden;
  
}

.left-menu.expanded { width: var(--menu-width); box-shadow: 0 0 25px rgba(0,0,0,0.25); }

.left-menu ul, li {
    list-style-type: none;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 1rem;
    margin-inline-end: 0;
    padding-inline-start: 0em;
    line-height: 160%;
}





body.menu-expanded .page-container { 
position: relative; 
/* left: var(--menu-width);  */
transform: translateX(var(--menu-width));
}





/* Section Nav */
.section-nav {
  padding-top: 100px;
  white-space: nowrap;
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  opacity: 0; 
  visibility: hidden;
  transition: opacity var(--transition-medium), visibility var(--transition-medium);
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; 
  justify-content: flex-start;
  padding-left: var(--menu-collapsed-width); 
  padding-right: var(--space-5); 
  background-color: #111;
}


.section-nav .toggle-wrapper{
	justify-content: space-between;
    padding-top: 2rem;
    padding-left: 0;
}


.left-menu.expanded .section-nav { 
	
    opacity: 1;
    visibility: visible;
    overflow-y: scroll;
    z-index:999;
}



#section_white_bg_logo {
    width: 90vw;
    height: auto;
}
    
    
.section-nav-item {
	padding-left: 0.5em;
  font-family: var(--font-display); font-weight: 600; color: var(--color-text); text-decoration: none;
  margin: var(--space-3) 0; font-size: var(--text-left-nav); opacity: 0; cursor: pointer;
  transition: opacity var(--transition-slow), transform var(--transition-slow), color var(--transition-fast);
  transform: translateX(-20px); display: flex; align-items: center; width: 100%;
}
.section-nav-item.animate-in { opacity: 0.7; transform: translateX(0); transition-timing-function: var(--ease-out-back); }
.section-nav-item:hover, .section-nav-item.active { opacity: 1 !important; color: var(--color-accent); }
.section-nav-item-number {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); opacity: 0.6;
  margin-right: var(--space-3); min-width: 20px; transform: translateX(-10px);
  transition: transform var(--transition-medium), opacity var(--transition-medium);
}
.section-nav-item.animate-in .section-nav-item-number,
.section-nav-item:hover .section-nav-item-number { transform: translateX(0); opacity: 0.8; }


/* ─── typography.css ─── */






.content h1,
.content h2,
.content h3,
.content h4,
.content h5 {
	font-family: var(--font-display);
    /* padding-top: 3rem; */
}




.content h1 { font-size: clamp(2.5rem, 6vw, var(--h1)); line-height:120%; }
.content h2 { font-size: clamp(2rem,  4vw, var(--h2)); line-height:150%; }
.content h3 { font-size: clamp(1.5rem, 3vw, var(--h3)); line-height:150%; }
.content h4 { font-size: clamp(1.2rem, 2vw, var(--h4)); line-height:150%; }
.content h5 { font-size: clamp(1rem,   1.5vw, var(--h5)); line-height:150%;}


.hero_section .content h1 { font-size: var(--text-title-mega-hero); line-height:120%; }
.hero_section .content h2 { font-size: clamp(2rem,  2.5vw, var(--h2)); line-height:150%; }


@media(width <= 1024px){

    .hero_section .content h1 { font-size: calc(var(--text-title-mega-hero) * 0.8); line-height:120%; }
    .hero_section .content h2 { font-size: clamp(1.6rem,  2vw, var(--h2)); line-height:150%; }
}

.content .chapter, 
.content .chapter h1, 
.content .chapter h2, 
.content .chapter h3, 
.content .chapter h4, 
.content .chapter h5 
{ text-transform: uppercase; margin-bottom: 15px; font-size: var(--text-chapter); letter-spacing: -0.03em; color: var(--color-accent); }




.content > p{
	line-height:168%;
	margin:0 auto;
	margin-bottom: 30px;
	font-size: var(--text-base);
}


.content .inner{
    max-width:800px;
    margin:0 auto;
    font-size:var(--text-base)
}


.section_content,
.content .inner p,
.content .inner ul li, 
.content .inner.section_content p,
.content .inner.section_content ul li
{
    font-size:var(--text-lg);
     line-height:180%;
}


.content .inner p,
.content .inner ul li
{
    font-size:var(--text-base);
     line-height:180%;
}

.content .inner p
{
    padding-bottom:3rem;
}


.accordion-title{
	font-family: var(--font-primary) !important;
	font-weight:normal !important;
}



.title,
.word{
	hyphens: auto; 
	/* hyphens: unset;*/
    word-break: normal;
    overflow-wrap: normal;
}

/* .title.no-break, */
.title.no-break,
.line .no-break,
.caption .no-break,
.mask-title.no-break,
.no-break .word{
	hyphens: none !important; 
    word-break: unset !important; 
    overflow-wrap: unset !important; 
    white-space: nowrap;
}

.no-word-break{
	hyphens: none !important; 
    word-break: unset !important; 
    overflow-wrap: unset !important; 
}


.text-shadow, 
.text-shadow span { filter: drop-shadow(1px 4px 10px rgba(0,0,0,0.9)); }

.hero_title.text-shadow, 
.hero_title.text-shadow span { filter: drop-shadow(1px 4px 60px rgba(0,0,0,0.36)); }



.text-shadow-light, 
.text-shadow-light span { filter: drop-shadow(1px 4px 10px rgba(0,0,0,0.45)); }




/* ── START TITEL ── */
.hero-title-start {
    position: absolute; 
    top: 140px; 
    z-index: 3;
    text-align: center;
    width: 100%;
    opacity: 1;
    transform: translateY(0px) scale(1);
}
.hero-title-start .title-top {
    padding-left:1rem;
}

@media(orientation: landscape){
	.hero-title-start .title-top {
	    padding-left:2rem;
	}
}

.hero-title-start .title-top,
.hero-title-start .title-sub {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-title-hero);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 90%;
    font-size: var(--text-title-hero-top);
}

.hero-title-start .title-sub {
    font-size: var(--text-title-hero-sub);
    letter-spacing: -.05em;
}



.mask-layer .mask-title {
  font-family: var(--font-display);
  /* RENDER FIX: font-size klein → große scale ohne Texture-Clipping */
  font-size: clamp(32px, 5.5vw, 64px);
  font-weight: 800;
  letter-spacing: -.03em; 
  line-height: .92;
  text-align: center; color: #fff;
  text-transform: uppercase;
  user-select: none;
}


.mask-layer .mask-title .mask-alex-zerr {
  font-family: var(--font-display);
  /* RENDER FIX: font-size klein → große scale ohne Texture-Clipping */
  font-size: var(--text-title-hero-alex-zerr);
  font-weight: 800;
  letter-spacing: -.03em; line-height: .82;
  text-align: center; color: #fff;
  text-transform: uppercase;
  user-select: none;
}




#hero .content .title{
	position:absolute;
	top: calc((100vh * 0.382) - calc(100% * (var(--phi) / 10)));
    line-height: calc(100% * var(--phi) * var(--line-height-reduce));
    font-size: var(--text-title-hero);
}



/* ab Tablet/Desktop */
@media (min-width: 992px) {   
	
	#hero .content .title{
		position:absolute;
		top:23%;
	    line-height: 168%;
	    font-size: var(--text-title-hero);
	}
}

#hero .content .title .alex-zerr-mask{
    font-size: var(--text-title-hero-alex-zerr);
}


#hero .content .title-top{
	line-height: calc(100% * var(--phi) * var(--line-height-reduce));
    font-size: var(--text-title-hero-top);
}

#hero .content .title .title-sub{
	font-size:  var(--text-title-hero-sub);
}




#hero .content .title .layer-start-title{
    position:absolute;
    top:23%;
    line-height: calc(100% * 1.618 / 3.14);
    transform:translate(0, -12.5%);
}



#hero .content .title-top,
#hero .content .title-sub {
	opacity:1;
	display: block !important;
	text-shadow: 0px 9px 30px rgba(0, 0, 0, 0.3);
	line-break: unset;
    white-space: nowrap;
  /*  will-change: transform, opacity, filter; */
}

/* WICHTIG: Nach der Animation wieder sichtbar machen */
#hero .content .title.intro-done .title-top,
#hero .content .title.intro-done .title-sub {
    opacity: 1 !important;
}


#hero .mask-layer{
    opacity:0;
}


.mobile-break {
    display: block;
    width: 0;
    height: 0px;
}

@media (min-width: 992px) {
    .mobile-break {
        display: inline-block;
        width: 1rem;
        height: 0px;
    }
}




/* .scroll_panel .content .title.title_mega, */
.title.title_mega{
    font-size: var(--text-title-mega);
}

.title.title_mega_xxl_art{
    font-size: var(--text-title-mega-xxl-art);
}

.title.title_mega_med{
    font-size: var(--text-title-mega-med);
}

.title.title_mega_teaser{
    font-size: var(--text-title-mega-teaser);
}

.title.title_mega_teaser_sub{
    font-size: var(--text-xl);
}

.title.title_mega_hero_originale{
    font-size: var(--text-hero-originale-mega);
}

.title.title_mega_hero_drucke{
    font-size: var(--text-hero-drucke-mega);
}


.title.title_mega_small{
	padding:0px;
    font-size: var(--text-title-mega-small);
}

.content .inner .title.title_mega_small{
	padding:0px;
    font-size: var(--text-title-mega-small-top);
}


.text-greeting{
	font-size: var(--text-xl);
}


.text,
.content .text{
	font-size: var(--text-lg);
    font-weight: normal;
    line-height: 160%;
    color: var(--color-text);
    padding:30px;
    max-width:800px;
    margin: 0 auto;
}



.content .chapter, 
.content .chapter h1, 
.content .chapter h2, 
.content .chapter h3, 
.content .chapter h4, 
.content .chapter h5 
{ text-transform: uppercase; margin-bottom: 15px; font-size: var(--text-chapter); letter-spacing: -0.03em; color: var(--color-accent); }




.content > p{
	line-height:168%;
	margin:0 auto;
	margin-bottom: 30px;
	font-size: var(--text-base);
}


.content .inner{
    max-width:800px;
    margin:0 auto;
    font-size:var(--text-base)
}


.section_content,
.content .inner p,
.content .inner ul li, 
.content .inner.section_content p,
.content .inner.section_content ul li
{
    font-size:var(--text-lg);
     line-height:180%;
}


.content .inner p,
.content .inner ul li
{
    font-size:var(--text-base);
     line-height:180%;
}

.content .inner p
{
    padding-bottom:3rem;
}



/* GOLD TEXT */
.goldBG{
  background: var(--gradient-gold);
  background-size: 400% 100%;
  background-position: 0 0;
}

.goldText{
  background-clip: text;
  color:transparent !important;
  animation: AnimationName 15s linear infinite;
}

@keyframes AnimationName {
  0%   { background-position: 0% 0% }
  50%  { background-position: 100% 0% }  /* ← Mitte hinzufügen */
  100% { background-position: 0% 0% }    /* ← zurück zum Start */
}
/* END GOLD TEXT */