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


.content{
    letter-spacing:0pt !important;
	padding: 0px 1em 2em 1em;
    text-align:center;
    line-height:210%;
}

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

/* Content — kein Padding hier */
.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%;
}

/* Padding auf das innere Element — kein Sprung */
.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;
}

/* CSS for Demo */
.accordion-container {
  max-width: 900px;
  margin: 0 auto;
}

 
/* Inneres Element — overflow:hidden + min-height:0 sind Pflicht */
.accordion-content > *,
.accordion-content-product > * {
  overflow: hidden;
  min-height: 0;
}

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



/* ─── left_menu.css ─── */
/* Left Menu */
.left-menu {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  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); }


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



/* Menu Button */
.left-menu-top { position: absolute; top: var(--space-5); left: 0; width: 100%; display: flex; justify-content: center; z-index: 101; }
.menu-btn { width: 30px; height: 20px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; background: transparent; border: none; padding: 0; }
.menu-btn span { display: block; width: 100%; height: 2px; background-color: var(--color-text); transition: transform var(--transition-medium), opacity var(--transition-medium); }
body.menu-expanded .menu-btn span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body.menu-expanded .menu-btn span:nth-child(2) { opacity: 0; }
body.menu-expanded  .menu-btn span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }


/* Section Nav */
.section-nav {
  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: center;
  padding-left: var(--menu-collapsed-width); padding-right: var(--space-5); background-color: #111;
}


.section-nav .toggle-wrapper{
	justify-content: space-between;
}

.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 ─── */



.title { text-transform:uppercase; z-index:9; font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: var(--space-4); letter-spacing: -0.03em; line-height: 1.3; font-weight: 700; color: var(--color-text); }
.title.tiny, .title-tiny { text-transform:uppercase; z-index:9; font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.5rem);  margin-bottom: var(--space-6); letter-spacing: -0.03em; line-height: 1.3; font-weight: 700; color: var(--color-text); }
.title.small, .title-small { text-transform:uppercase; z-index:9; font-family: var(--font-display); font-size: clamp(1.5rem, 5vw, 2.5rem);  margin-bottom: var(--space-2); letter-spacing: -0.03em; line-height: 1.3; font-weight: 700; color: var(--color-text); }
.title.med, .title-med { text-transform:uppercase; z-index:9; font-family: var(--font-display); font-size: clamp(2.5rem, 10vw, 5rem); margin-bottom: var(--space-6); letter-spacing: -0.03em; line-height: 1.3; font-weight: 700; color: var(--color-text); }



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


.section_title_mega{
	margin-top:30vh;
}

@media (orientation:portrait){
    .section_title_mega{
    	margin-top:0vh;
    }
}

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



.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 */