/* style_page.css */
/*
@import url("https://fonts.googleapis.com/css2?family=Boldonse&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
*/


:root {
	
  /* ── Phi System ─────────────────────────────── */
  --phi: 1.618;
  --scale-down: 0.618;   /* ≈ 1/φ */
  --phi-sqrt-inverse: 0.786;  /* √φ⁻¹ */
  
  --base-size: calc(1rem * var(--phi-sqrt-inverse)); /* 16px */

  /* ── Heading Scale (Phi-Kaskade) ────────────── */
  --h5: 1rem;                          /* 16px   */
  --h4: calc(var(--h5) * 1.618);      /* ~26px  */
  --h3: calc(var(--h4) * 1.618);      /* ~42px  */
  --h2: calc(var(--h3) * 1.618);      /* ~67px  */
  --h1: calc(var(--h2) * 1.618);      /* ~109px */
    
  --golden-small: 0.382;   /* φ⁻² */
  --golden-large: 0.618;   /* φ⁻¹ */

  /* ── Colors ──────────────────────────────────── */
  --color-primary: #0a0a0a;
  --color-primary-transparent: #0a0a0a50;
  --blur: 5px;
  --color-secondary: #161616;
  --color-brand: #02d0ce;
  --brand: #02d0ce;
  --color-accent: #02d0ce;
  --color-white: #fff;
  --color-text: #f5f5f5;
  --color-text-muted: rgba(245, 245, 245, 0.7);
  --color-border: rgba(255, 255, 255, 0.05);
  --color-overlay: rgba(0, 0, 0, 0.5);

  /* ── Gradients ───────────────────────────────── */
  --gradient-gold: linear-gradient(45deg, #AE8625, #F7EF8A, #D2AC47, #EDC967, #AE8625, #F7EF8A, #D2AC47, #EDC967, #AE8625, #F7EF8A);
  --gradient-gold-progress: linear-gradient(0deg, #D2AC47, #EDC967, #AE8625, #F7EF8A);
  --gradient_center:       radial-gradient(circle at 50% 50%, rgba(2, 208, 206, 0.3), transparent 100%), rgb(10 10 10);
  --gradient_top:          radial-gradient(circle at 50% 18%, rgba(2, 208, 206, 0.3), transparent 50%), rgb(10 10 10);
  --gradient_bottom:       radial-gradient(circle at 50% 82%, rgba(2, 208, 206, 0.3), transparent 50%), rgb(10 10 10);
  --gradient_left:         radial-gradient(circle at 18% 50%, rgba(2, 208, 206, 0.3), transparent 50%), rgb(10 10 10);
  --gradient_right:        radial-gradient(circle at 82% 50%, rgba(2, 208, 206, 0.3), transparent 50%), rgb(10 10 10);
  --gradient_scroll:       radial-gradient(circle at 100% 100%, rgba(2, 208, 206, 0.2), transparent 80%), rgba(2, 208, 206, 0.1);
  --gradient_top_hero:     radial-gradient(circle at 50% 80%, rgba(2, 208, 206, 0.3), transparent 80%), rgb(10 10 10);
  --gradient_bottom_hero:  radial-gradient(circle at 50% 20%, rgba(2, 208, 206, 0.3), transparent 80%), rgb(10 10 10);

  /* ── Fonts ───────────────────────────────────── */
  --font-primary: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Antonio", "Bahnschrift", "DIN Alternate", "Arial Narrow", "Helvetica Condensed", Arial, sans-serif;
  --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;

  /* ── Text Scale (Phi: φ⁻², φ⁻¹, φ⁰, φ¹, φ², φ³, φ⁴) ── */
  --text-xs:   calc(var(--base-size) * 0.382);   /* ~6px   φ⁻² */
  --text-sm:   calc(var(--base-size) * 0.618);   /* ~10px  φ⁻¹ */
  --text-base: var(--base-size);                  /* 16px   φ⁰  */
  --text-lg:   calc(var(--base-size) * 1.618);   /* ~26px  φ¹  */
  --text-xl:   calc(var(--base-size) * 2.618);   /* ~42px  φ²  */
  --text-1xl:  calc(var(--base-size) * 3.236);   /* ~52px  φ²×1.236 */
  --text-2xl:  calc(var(--base-size) * 4.236);   /* ~68px  φ³  */
  --text-3xl:  calc(var(--base-size) * 6.854);   /* ~110px φ⁴  */
  
  --text-chapter:   calc(var(--base-size) * calc(1.618 * 1.314));   /* ~26px  φ¹  */

  /* ── Fluid Text Scale ────────────────────────── */
  --text-title-mega-xxl-art:  clamp(4rem, 5rem + 18vw, 8rem);
  --text-title-mega:           clamp(2rem, 2rem + 13vw, 5rem);
  --text-title-mega-med:       clamp(2rem, 2rem + 13vw, calc(5rem * var(--scale-down)));
  --text-title-mega-small:     clamp(2rem, 2rem + 13vw, calc(5rem * var(--scale-down) * var(--scale-down)));
  
  
  --text-title-mega-xxl-art:   clamp(4rem, 5rem + 18vw, 8rem);
  --text-title-mega:           clamp(4rem, 5rem + 12vw, 8rem);
  --text-title-mega-med:       clamp(4rem, 5rem + 12vw, calc(8rem * var(--scale-down)));
  --text-title-mega-small: 	   clamp(4rem, 5rem + 12vw, calc(8rem * var(--scale-down) * var(--golden-small)));
  
  
  --text-mega:                 clamp(calc(var(--base-size) * 2.618), 2rem + 13vw, calc(var(--base-size) * 6.854));
  --text-mega-small:           clamp(calc(var(--base-size) * 1.618), 1.5rem + 13vw, calc(var(--base-size) * 4.236));
  --text-hero-mega:            clamp(calc(var(--base-size) * 6.854), 8rem + 4vw, calc(var(--base-size) * 11.09));
  --text-hero-originale-mega:  clamp(5rem, 5rem + 4vw, calc(5rem * var(--phi)));
  --text-hero-drucke-mega:     clamp(5rem, 5rem + 4vw, calc(5rem * var(--phi)));
  
  --text-left-nav:             calc(var(--base-size) * 2.618); /* ~42px φ² */
  --text-title:                clamp(calc(var(--base-size) * 2.618), 2.5rem + 5vw, calc(var(--base-size) * 4.236));
  --text-title-tiny:           clamp(var(--base-size), 1rem + 2vw, calc(var(--base-size) * 1.618));
  --text-title-small:          clamp(calc(var(--base-size) * 1.618), 2rem + 5vw, calc(var(--base-size) * 2.618));
  --text-title-med:            clamp(calc(var(--base-size) * 2.618), 2rem + 10vw, calc(var(--base-size) * 6.854));
  --text-title-hero:           clamp(6rem, 6rem + 10vw, calc(6rem * var(--phi)));
  --text-title-hero-top:       clamp(3rem, 4.5rem + 3.3vw, calc(3rem * var(--phi) * var(--phi)));
  --text-title-hero-sub:       clamp(10rem, 4rem + 5vw, calc(10rem * var(--phi)));
  --text-title-hero-alex-zerr: clamp(7.8rem, 15cqi + 1.5rem, 12rem);
  --text-title-mask-alex-zerr: clamp(12.8rem, 43cqi + 3.5rem, 30rem) ;
  --text-title-mask:           clamp(8rem, 5rem + 19vw, calc(8rem * var(--phi)));
  --text-greeting:             clamp(calc(var(--base-size) * 1.618), 1rem + 3vw, calc(var(--base-size) * 2.618));

  /* ── Spacing Scale (Fibonacci ≈ Phi) ─────────── */
  --space-1:  calc(var(--base-size) * 0.382);   /* ~6px   */
  --space-2:  calc(var(--base-size) * 0.618);   /* ~10px  */
  --space-3:  calc(var(--base-size) * 1.0);     /* 16px   */
  --space-4:  calc(var(--base-size) * 1.618);   /* ~26px  */
  --space-5:  calc(var(--base-size) * 2.618);   /* ~42px  */
  --space-6:  calc(var(--base-size) * 4.236);   /* ~68px  */
  --space-7:  calc(var(--base-size) * 6.854);   /* ~110px */
  --space-8:  calc(var(--base-size) * 11.09);   /* ~177px */
  --space-10: calc(var(--base-size) * 17.944);  /* ~287px */
  --space-12: calc(var(--base-size) * 29.034);  /* ~464px */

  /* ── Layout ──────────────────────────────────── */
  --menu-width: 350px;
  --menu-collapsed-width: 0px;
  --panel-padding: 5%;

  /* ── Transitions (Phi in ms) ─────────────────── */
  --transition-fast:   0.382s ease;   /* φ⁻¹ × 618ms */
  --transition-medium: 0.618s ease;   /* φ⁻¹          */
  --transition-slow:   1.618s ease;   /* φ             */

  /* ── Easing ──────────────────────────────────── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Misc ────────────────────────────────────── */
  --word-stagger-delay: calc(0.382s * 0.1);   /* ~0.038s — φ⁻² × 0.1 */
  --hover-saturate: 1;
  --hover-bright:   1.618;   /* ← war 1.18, jetzt φ */
  --scroll-blur:    18;
  
  /* ── SOCIAL MEDIA ICONS ────────────────────────────────────── */
 --icon-size:   		calc(var(--base-size) * 2.618);
 --icon-size-large:   	calc(var(--base-size) * 4.236);


  font-size: 100%;
  
  --line-height-reduce: var(--scale-down);
  
  --navigationHeight: 125px;
  
}

/* DESKTOP / TABLET */
@media (min-width: 769px) {
    :root {
        --phi: 1.618;
        --scale-down: 0.618;
        
        --base-size: calc(1rem); /* 16px */
        
        
        /* ── Text Scale (Phi: φ⁻², φ⁻¹, φ⁰, φ¹, φ², φ³, φ⁴) ── */
		  --text-xs:   calc(var(--base-size) * 0.382);   /* ~6px   φ⁻² */
		  --text-sm:   calc(var(--base-size) * 0.618);   /* ~10px  φ⁻¹ */
		  --text-base: calc(var(--base-size) * (1.681 * var(--phi-sqrt-inverse))); /* 16px   φ⁰  */
		  --text-lg:   calc(var(--base-size) * 1.618);   /* ~26px  φ¹  */
		  --text-xl:   calc(var(--base-size) * 2.618);   /* ~42px  φ²  */
		  --text-1xl:  calc(var(--base-size) * 3.236);   /* ~52px  φ²×1.236 */
		  --text-2xl:  calc(var(--base-size) * 4.236);   /* ~68px  φ³  */
		  --text-3xl:  calc(var(--base-size) * 6.854);   /* ~110px φ⁴  */
		  
		  

        /* ── Text Scale Desktop (Phi-basiert) ──────── */
        --text-title:       clamp(calc(var(--base-size) * 2.618), 5vw, calc(var(--base-size) * 4.236));
        --text-title-tiny:  clamp(var(--base-size), 2vw, calc(var(--base-size) * 1.618));
        --text-title-small: clamp(calc(var(--base-size) * 1.618), 5vw, calc(var(--base-size) * 2.618));
        --text-title-med:   clamp(calc(var(--base-size) * 2.618), 10vw, calc(var(--base-size) * 6.854));

        /* ── Hero ───────────────────────────────────── */
        --text-title-hero:     clamp(14rem, 6rem - 5vw, calc(14rem * var(--phi)));
        --text-title-hero-top: clamp(calc(var(--base-size) * 6.854), 11rem + 7vw, calc(var(--base-size) * 11.09));
        --text-title-hero-sub: clamp(calc(var(--base-size) * 6.854), 5rem + 26vw, calc(var(--base-size) * 23.944));

        /* ── Mega Titles ────────────────────────────── */
        --text-title-mega-xxl-art: clamp(16rem, 18rem + 8vw, calc(16rem * var(--phi)));
        --text-mega:               clamp(calc(var(--base-size) * 2.618), 2rem + 13vw, calc(var(--base-size) * 6.854));
        --text-mega-small:         clamp(calc(var(--base-size) * 1.618), 1.5rem + 13vw, calc(var(--base-size) * 4.236));
        --text-hero-mega:          clamp(calc(var(--base-size) * 6.854), 10rem + 5vw, calc(var(--base-size) * 11.09));

        /* ── Mega Scale (Phi-Kaskade) ───────────────── */
        --text-title-mega:       clamp(10rem, 12rem + 12vw, 28rem);
        --text-title-mega-med:   clamp(calc(var(--base-size) * 6.854), 7.5rem + 8vw, calc(var(--text-title-mega) * var(--scale-down)));
        --text-title-mega-small: clamp(calc(var(--base-size) * 4.236), 5rem + 6vw,   calc(var(--text-title-mega-med) * var(--scale-down)));

        /* ── Spezifisch ─────────────────────────────── */
        --text-title-hero-alex-zerr:  clamp(calc(var(--base-size) * 6.854), 8rem + 4vw, calc(var(--base-size) * 17.944));
        --text-hero-originale-mega:   clamp(13rem, 15rem + 7vw, calc(13rem * var(--phi)));
        --text-hero-drucke-mega:      clamp(13rem, 15rem + 7vw, calc(13rem * var(--phi)));
        --text-title-mask-alex-zerr:  clamp(16rem, 5rem + 25vw, calc(16rem * var(--phi)));
        --text-title-mask:            clamp(18rem, 7rem + 27vw, calc(18rem * var(--phi)));
        
        /* ── SOCIAL MEDIA ICONS ────────────────────────────────────── */
 		--icon-size:   calc(var(--base-size) * 2.618);
		--icon-size-large:   	calc(var(--base-size) * 4.236);
		
		
        /* ── Greeting ───────────────────────────────── */
        --text-greeting: clamp(calc(var(--base-size) * var(--phi) ), 2rem + 3vw, calc(var(--base-size) * var(--phi) * 2));
        
        --line-height-reduce: var(--golden-small);
        
        --navigationHeight: 125px;
    }
}



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



html, body {
    height: auto !important; /* ← nicht 100% oder 100vh */
}

html, body {
   /* width: 100vw;
     overflow-x: hidden; */
}



.load-more-btn{
	font-size: var(--text-1xl) !important;
}


/* HIER: Native Scroll + Snapping aktivieren */
/*
html {
  overflow-y: scroll; 
  height: auto; 
  -webkit-overflow-scrolling: touch; 
  width:100vw;
  overflow-x:hidden;
}
*/


/* System-Einstellung "Weniger Bewegung"
@media (prefers-reduced-motion: reduce) {
  .bg,
  [data-speed],
  .ken-burns {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
 */

/* Manuell aktivierter Low-Motion-Modus 
body.low-motion img.bg,
body.low-motion [data-speed],
body.low-motion .ken-burns {
  animation: none !important;
  transition: none !important;
  transform: none !important; 
}

body.low-motion img.bg{
  animation: none !important;
  transition: none !important;
  transform: translate(-50%, -50%) !important; 
}
*/

/* NEU */
/* Weniger Bewegung (Low Motion)
body.toggle-low-motion *
{
  animation: none !important;
  transition: none !important;
}
 




body.toggle-low-motion img.bg
{
  position:relative;
  width:100% !important;
  height:auto !important;
  left:0px !important;
  top:0px !important;
  animation: none !important;
  transition: none !important;
  transform: none !important; 
}

body.toggle-low-motion .cursor_gradient,
body.toggle-high-contrast .cursor_gradient,
body.toggle-low-motion #underlayer_logo,
body.toggle-low-motion .glow
{
  display:none !important;
}
*/

/* Hoher Kontrast */
body.toggle-high-contrast,
body.toggle-high-contrast .page_sub_nav,
body.toggle-high-contrast #detail_wrapper{
  --color-text: #ffffff !important;
  --color-primary: #000000 !important;
  --color-secondary: #111111 !important;
  background: #000 !important;
}


body.toggle-high-contrast a,
body.toggle-high-contrast button {
  text-decoration: underline !important;
}

body.toggle-high-contrast .layer_inner,
body.toggle-high-contrast .layer_inner_2{ 
  background-color:black;
}

/* stärkerer schatten */
body.toggle-high-contrast .text-shadow{ 
  text-shadow: 0px 1px 16px rgba(0,0,0,1.5) , 0px 2px 26px rgba(0,0,0,1.5), 0px 2px 26px rgba(0,0,0,1.5) !important;
  filter: drop-shadow(5px 4px 11px rgba(0,0,0,0.5)) !important;
}



#underlayer_logo{
	mix-blend-mode: color; 
	position:relative; 
	z-index:-99; 
	height:0vh !important; 
	overflow:visible;
	transition:0.5s ease;
}


#underlayer_logo.mix-blend-off{
	mix-blend-mode: unset !important; 
}




/* Optional: Systemeinstellung immer respektieren */
@media (prefers-reduced-motion: reduce) {
  .bg, 
  [data-speed], 
  .ken-burns {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-contrast: more) {
  body {
    --color-text: #ffffff !important;
    background: #000 !important;
    
  }
  
  	body.toggle-high-contrast .layer_inner, 
  	body.toggle-high-contrast .layer_inner_2{
	  background-color:black;
	}
}



/* Visueller Schalter-Stil (einfach, anpassbar)  */
.toggle-wrapper {
	display: flex;
    gap: 12px;
    font-size: 0.9rem;
    color: #aaa;
    align-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    align-items: center;
    gap:10px;
    padding-top: 1rem;
}

.toggle-wrapper input.ux-toggle {
  appearance: none;
  width: 44px;
  height: 24px;
  background: #333;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
  margin:0px;
}

.toggle-wrapper input.ux-toggle:checked {
  background: var(--color-accent);
}

.toggle-wrapper input.ux-toggle::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--color-accent);
  border-radius: 50%;
  top: 4px;
  left: 4px;
  transition: all 0.3s ease;
}

.toggle-wrapper input:checked::after {
  transform: translateX(20px);
}


input.ux-toggle:hover::after {
	content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--color-accent);
    border-radius: 50%;
    top: 2px;
    left: 2px;
}

input.ux-toggle:checked::after {
	content: "";
    position: absolute;
    background: #000000d6 !important;
}


.sliderOmni{
	height: 5px;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none;
}


.sliderOmni .slider-fill {
    background: #b2b2b2 !important;
}


.sliderOmni .handle {
    border: 1px solid rgba(0,0,0,0.75) !important;
    background-color: var(--color-accent) !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 4px !important;
    transition: transform 0.3s ease;
}


.sliderOmni .handle:hover {
    transform:scale(1.2);
}



body {
  font-family: var(--font-primary);
  background-color: var(--color-primary);
  color: var(--color-text);
  position: relative;
  min-height: 100vh; /* Min-Höhe für Body */
  overflow-x: hidden; /* Nur X hidden, Y scrollt */
}






/* Optional: Scrollbar stylen (macht sie sichtbarer, falls gewünscht) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #00b8b4;
}

/* 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));
}

/* PADDING FÜR MENU LINKS 
/*
.page-container { position: relative; left: var(--menu-collapsed-width); transition: left var(--transition-slow); will-change: transform; }
*/

/* OHNE MENU PADDING  
.page-container { position: relative; transition: left var(--transition-slow); will-change: transform; }

 .page-container { position: relative; transition: var(--transition-slow); }
 
 */
 
 .page-container {
   /* position: relative; */ /* killt backdrop filter im footer */
    /* left: var(--menu-collapsed-width); ← weg! */
    /*transform: translateX(var(--menu-collapsed-width));  ← stattdessen! */ /* killt backdrop filter im footer */
    transition: transform var(--transition-slow); /* ← transition anpassen! */
}
 
 /*
 .page-container { position: relative; left: var(--menu-collapsed-width); transition: left var(--transition-slow), width var(--transition-slow); }


.page-container {  left: var(--menu-collapsed-width); transition: left var(--transition-slow), width var(--transition-slow); }
*/
/* .ScrollSmoother-wrapper { backdrop-filter:blur(5px); } */


#underlayer_logo .logo-mask-layer{ filter:blur(5px); }

/* 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); }





.menu-label{
	opacity:1;
	top: 35px;
    position: absolute;
    transition:0.3s ease;
}

#menu_head .hamburger_icon_wrapper:hover .menu-label{
	transform:translateY(-5px);
	
}

.menu-label-close{
	opacity:0;
	transition:0.3s ease;
    position: absolute;
}
body.menu-expanded .menu-label{
	opacity:0;
	top:-3m;
}

body.menu-expanded .menu-label-close{
	opacity:1;
	left:3em;
}


/* Body hat Scroll gesperrt */
body.no-scroll {
  overflow: hidden;
  /*  height: 100vh;           verhindert, dass Body "springt" */
  /* Optional: iOS Safari Fix */
  /*position: fixed;
  width: 100%;
  top: 0;
  left: 0;
   */
}

/* Falls du den Scrollbar-Platz kompensieren willst (sehr sauber) */
body.no-scroll::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100vw;            /* 100vw statt 100% wegen Scrollbar */
  background: transparent;
  z-index: -1;
}



/* Logo */
.left-menu-middle { position: absolute; top: 50%; left: 0; width: 100%; display: flex; justify-content: center; transform: translateY(-50%); }
.logo { font-family: var(--font-display); font-weight: 700; letter-spacing: 2px; font-size: var(--text-lg); color: var(--color-text); white-space: nowrap; transform: rotate(-90deg); transition: transform var(--transition-slow), opacity var(--transition-medium); }
body.menu-expanded .logo { opacity: 0; transform: rotate(-90deg) translateY(20px); }

/* 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; }

/* Panels */
/* Panels: Snapping hinzufügen */
.panel { 
  position: relative; 
  height: 100vh; 
  overflow: hidden; 
  will-change: transform;
}

.panel-long,
.panel-full{
	display: flex;
    position: relative;
    height: auto !important;
    padding:10vh 0;
   /* margin: 3em; */
    overflow: hidden;
    will-change: transform;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
}

/* Image Wrapper */
.image-wrapper { position: absolute; /* inset: -5%; */ width: 100%; height: 100%; overflow: hidden; }
.image-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* Parallax */
.parallax { opacity: 1; transition: opacity var(--transition-medium); will-change: transform; }
.parallax.loaded { opacity: 1; }

/* Split Layouts */
.panel-split { display: flex; }
.panel-left, .panel-right { width: 50%; height: 100%; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: var(--panel-padding); }
.panel-left { background-color: #121212; }
.panel-right { background-color: var(--color-secondary); }
.editorial-split { display: grid; grid-template-columns: 0.382fr 0.618fr; height: 100%; }
.editorial-split.text-left{ grid-template-columns: 0.382fr 0.618fr; }
.editorial-split.text-right{ grid-template-columns:  0.618fr 0.382fr ; }
.editorial-content { z-index:2; padding: var(--panel-padding); display: flex; flex-direction: column; justify-content: center; background-color: var(--color-primary-transparent); backdrop-filter:blur(var(--blur));}

/* Full Background */
.panel-full { position: relative; display: flex; align-items: center; justify-content: center; }
.panel-full .image-wrapper { /* inset: -5%; */ }
.panel-full-background { filter: brightness(0.7); will-change: transform; }
.panel-full-overlay { position: absolute; inset: 0; /* background-color: var(--color-overlay); */ z-index: 2; }
.panel-full-content { position: relative; z-index: 3; width: 80%; max-width: 800px; opacity: 1; /* transform: translateY(30px); */ transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); }
.panel-fullwidth { position: relative; z-index: 3; width: 100%; max-width: 100%; opacity: 1; transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); }
.panel-fullwidth .panel-content { 
	width: 100%; opacity: 1; 
	transform: translateY(30px); 
	transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); 
	height: 100%;
    display: flex;
    align-items: center;
    align-content: space-between;
    justify-content: center;
    flex-direction: column;
    }



/* Fixed Panel */
.panel-fixed { position: relative; overflow: hidden; }
.panel-fixed .image-wrapper { inset: -5%; }
.panel-fixed-image { filter: brightness(0.7); will-change: transform; }
.panel-fixed-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(0,0,0,0.5); color: white; z-index: 2; }

/* Video Panel */
.panel-video { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.video-background { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; z-index: 1; }
.panel-video-overlay { position: absolute; inset: 0; background-color: rgba(0,0,0,0.6); z-index: 2; }
.panel-video-content { position: relative; z-index: 3; width: 80%; max-width: 800px; text-align: center; opacity: 0; transform: translateY(30px); transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); }

/* Contact */
.panel-contact { display: flex; align-items: center; justify-content: center; background-color: var(--color-primary); }
.contact-container { width: 80%; max-width: 800px; text-align: center; }
.contact-content { opacity: 1; transform: translateY(30px); transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); }
.contact-name { font-size: clamp(6rem, 15vw, 10rem); color: var(--color-text); margin-bottom: var(--space-12); line-height: 1; font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; }
.email-wrapper { color: white; position: relative; display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-radius: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: transform var(--transition-medium), background-color var(--transition-medium); }
.email-wrapper:hover { color: var(--brand);  transform: translateY(-2px); }
.email-wrapper .email { color: white;  font-family: var(--font-display); font-size: var(--text-xl); text-decoration: none; }
.email-wrapper:hover  .email{ color: white;  }


	
.copy-email { width: 2.5rem;
    height: 2.5rem; background: none; border: none; cursor: pointer; color: var(--color-text); opacity: 0.9; padding: var(--space-2); border-radius: 50%; transition: opacity var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast); }
.copy-email:hover { opacity: 1; background-color: rgba(255,255,255,0.1); transform: scale(1.1); }
.copy-tooltip { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); background-color: var(--color-accent); color: white; padding: var(--space-1) var(--space-3); border-radius: 4px; font-size: var(--text-xs); opacity: 0; visibility: hidden; transition: opacity var(--transition-medium), visibility var(--transition-medium); }
.copy-tooltip.active { opacity: 1 !important; visibility: visible; }


button.copy-email:hover{ background-color:var(--brand); }
button.copy-email{ background-color:var(--brand); }

.button{
	font-family: var(--font-display);
	font-size: var(--text-lg);
	letter-spacing:0.0218rem;
}

/* Content Animations */
.panel-content { width: 90%; opacity: 0; transform: translateY(30px); transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); }
.panel.active .panel-content,
.panel.active .panel-full-content,
.panel.active .panel-video-content,
.panel.active .contact-content { opacity: 1 !important; transform: translateY(0); }
.panel.visited .panel-content,
.panel.visited .panel-full-content,
.panel.visited .panel-video-content,
.panel.visited .contact-content { opacity: 0.7; transform: translateY(0); }
.word { display: inline-block; opacity: 1; transform: translateY(15px); transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo); }
.panel.active .word { opacity: 1 !important; transform: translateY(0); }
.panel.visited .word { opacity: 0.7; transform: translateY(0); }


.panel .panel-full-content{
	display: flex;
    height: 100%;
    position: absolute;
    /* top: -100%; */
    z-index: 3;
    width: 80%;
    max-width: 800px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
    align-content: space-around;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.panel.visited .panel-full-content{
	opacity: 0.7;
}

.panel.active .panel-full-content{
	opacity: 1;
}


.panel.force-active, 
.panel.visited.force-active,
.panel.visited.force-active .panel-content,
.panel.visited.force-active .panel-full-content,
.panel.visited.force-active .panel-video-content,
.panel.visited.force-active .contact-content,
.panel.visited.force-active .word 
{ opacity: 1 !important; }

/* Typography */
.chapter { text-transform: uppercase; margin-bottom: 15px; font-size: var(--text-chapter); letter-spacing: -0.03em; color: var(--color-accent); }
.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.1; 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.1; 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-6); letter-spacing: -0.03em; line-height: 1.1; 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.1; 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%;}



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


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


.section_title_mega{
	margin-top:30vh;
}

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

/* .title.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;
}



.space-text { font-family: var(--font-display); font-size: clamp(4rem, 14vw, 8rem); line-height: 1; font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: var(--space-6); color: var(--color-white); }
.beyond-text { font-family: var(--font-display); font-size: clamp(4rem, 14vw, 8rem); line-height: 1.4; font-weight: 900; text-transform: uppercase; color: var(--color-white); margin-bottom: var(--space-6); letter-spacing: -0.03em; }
.mega-text { font-family: var(--font-display); font-size: var(--text-mega); font-weight: 900; text-transform: uppercase; color: var(--color-white); margin-bottom: var(--space-6); letter-spacing: -0.05em; text-shadow: 0 0 20px rgba(255,255,255,0.3); }
.text { font-size: var(--text-base); font-weight:normal; line-height: 200%; color: var(--color-text); }
.text-small { font-size: var(--text-sm); font-weight:normal; line-height: 1.4; color: var(--color-text); }
.quote { font-size: var(--text-lg); margin-bottom: var(--space-5); font-weight:normal; line-height: 1.4; font-style: italic; color: var(--color-text); letter-spacing: -0.03em; }
.author { font-size: var(--text-sm); margin-bottom: var(--space-10); font-weight:normal; color: var(--color-accent); }
.image-container { width: 100%; max-width: 450px; height: 300px; margin-bottom: var(--space-6); position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border-radius: 4px; }
.image-container .image-wrapper { inset: -5%; }

/*
.text-shadow, .text-shadow span { text-shadow: 0px 5px 10px rgba(0,0,0,0.5); }
*/

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

/* DESKTOP TABLET 
@media (min-width: 769px) {
	.chapter { font-size: var(--text-2xl); }
	
	.title { font-size: var(--desktop-text-title); }
	.title.tiny, .title-tiny { font-size: var(--desktop-text-title-tiny) !important; }
	.title.small, .title-small { font-size: var(--desktop-text-title-small) !important; }
	.title.med, .title-med { font-size: var(--desktop-text-title-med); }
	
	.space-text { font-size: clamp(4rem, 14vw, 8rem);  }
	.beyond-text {font-size: clamp(4rem, 14vw, 8rem); }
	.mega-text { font-size: var(--text-mega); }
	.text { font-size: clamp(0.75rem, 1.5vw, 3.7rem); }
	.text-small { font-size: clamp(0.75rem, 1.5vw, 3.7rem);}
	.quote { font-size: var(--text-lg);  }
	.author { font-size: var(--text-sm); }
}
*/

  

#lottie-heart-outer{
    display: flex;
    margin: 0 auto;
    transform: scale(1) !important;
    overflow: hidden;
    align-items: center;
    position: relative;
    font-family: var(--font-display);
    z-index: 999;
    
}

#lottie-heart{
    display: flex;
    margin: 0 auto;
    width: 300px;
    height: 300px;
    transform: scale(1.6) !important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#lottie-heart .lottie-like-count{
    font-weight: bold;
    position: absolute;
    z-index: 9;
    padding: 0px;
    color: white;
    margin: 0px;
    margin-bottom: 1rem;
    font-size: clamp(1.5rem, 3vw, var(--h1));
    filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.5));
}


.break-text{
	/* Automatische Silbentrennung */
  -webkit-hyphens: auto; /* Safari */
  -ms-hyphens: auto;     /* IE/Edge */
  hyphens: auto;         /* Standard */
  
  /* Optional: Erzwingt Umbruch bei sehr langen Wörtern */
  overflow-wrap: break-word; 
}


strong {
	font-weight: bold !important;
}

.content{ font-size: var(--test-base); font-weight: 300; }

.split-text p{
	line-height:150%;
}



.persistent-logo-bg {
  position: fixed !important;
  inset: 0;
  z-index: -10;               /* ganz nach hinten */
  display: flex;
  pointer-events: none; 
  
 
}

/* müll.. logo zu klein und rückelt wegen transform??
.persistent-logo-bg svg {
  width: 80vmin;              
  height: auto;
  transform: scale(1);
  transition: transform 1.5s ease-out;  
}
 */


#menu_logo{
	/*position: absolute;
     left: 50%;
    transform: translate(-50%, -40%) scale(1); */
    transition:0.8s ease;
}

#menu_head.nav-up #menu_logo{
    /* transform: translate(-50%, -80%) scale(1); */
    
}

#menu_head.search_open .menu_logo_wrapper {
    /* filter:blur(20px); */
    transform: translate(-50%, -120px) scale(1);
}



#menu_head.top #menu_logo{
    /* transform: translate(-50%, -40%) scale(1); */
}

#menu_head.top .nav-indicator{
    top: 39px;
}

#menu_head.nav-down .nav-indicator{
    top: 39px;
}



#menu_head{
	position: fixed;
    display: flex;
    width: 100vw;
    height:100px;
    top: 0px;
    z-index: 100;
    color: white;
    background-color: rgba(0, 0, 0, 0.666);
    flex-direction: column;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.85);
    font-size: 0.75rem;
    
    transition: all 0.8s ease;
	-ms-transition: 0.8s ease;
	-webkit-transition: 0.8s ease;
	-moz-transition: 0.8s ease;
	-o-transition: 0.8s ease;
}

#menu_head.nav-up {
    top: -50px;
}

#menu_head .shop_button{
	background-color: white;
    color: black;
    border-radius: 50px;
    padding: 3px 12px;
}

#menu_head .hamburger_icon_wrapper{
	display: flex;
    gap: 10px;
    position: relative;
    /* top: 35px; */
    align-content: center;
    align-items: center;
    left: 0px;
    flex-direction: column;
}




#menu_head .hamburger_icon_wrapper .hamburger_icon_wrapper_inner{
	display: flex;
    gap: 10px;
    position: relative;
    /* top: 35px; */
    align-content: center;
    align-items: center;
    flex-direction: column;
    margin: 15px;
    margin-top: 25px;
    margin-left: 20px;
    transition:1.4s ease;
}



#menu_head.nav-up .hamburger_icon_wrapper .hamburger_icon_wrapper_inner{
    margin-top:-35px;
}


#menu_head a{
	color:white;
}

#menu_head a:hover{
	text-decoration:none;
}

#menu_head .header_buttons_wrapper{
	display: flex;
    gap: 12px;
    width: 100%;
    position: relative;
    padding-right: 10px;
    z-index: 999 !important;
    align-items: center;
    justify-content: flex-end;
    padding-top: 10px;
    transition:1.4s ease;
    margin-top:0px;
}


#menu_head.nav-up .header_buttons_wrapper{
    padding-top: 0px;
    margin-top:-60px;
}

#menu_head .menu_logo_wrapper{
	width: 100%;
    display: flex;
    justify-content: center;
    margin-top:0px;
    transition:1.15s ease;
}


#menu_head.nav-up .menu_logo_wrapper{
	margin-top:-50px;
}

#menu_head .menu_logo_wrapper a{
	padding-top:10px;
}


#menu_head .nav-top{
	display: flex;
    height: 60px;
    flex-direction: row;
    z-index: 1000;
    transition: 0.5s ease;
    will-change: auto;
    justify-content: space-between;
    align-items: center;
    padding-top:10px;
}

#menu_head.top{
	display:flex;
	height: 100px;
	transition:0.5s ease;
}


#menu_head.nav-up .nav-top{
	height: 60px;
	transition: 0.6s ease;
}

#menu_head .link_icon{
	position:relative;
	display:flex;
	justify-content: center;
    align-items: center;
}

#menu_head .like_icon_anz,
#menu_head .cart_icon_anz{
	position:absolute;
    font-size: 8pt;
    top: 0px;
    background-color: transparent !important;
}

#menu_head .cart_icon_anz{
    color: white !important;
    top: 0px;
	left: 4px;
}

#menu_head .like_icon_anz{
    color: black !important;
    top: 4px;
    z-index: 9;
    font-weight: bold;
}

/*
#menu_head .like_icon,
#menu_head .like_icon .like_icon_anz{
    transition:0.382s ease;
    opacity:1;
}

#menu_head .like_icon.liked{
    transform:scale(1.168);
   
}

#menu_head .like_icon.liked svg path{
    fill:#f1411c;
}

#menu_head .like_icon.liked .like_icon_anz{
    color:white !important;
}

#menu_head .like_icon.disliked{
    transform:scale(0.9);
    opacity:0.8;
}
*/

@keyframes heartbeat {
    0%   { transform: scale(1); }
    20%  { transform: scale(1.35); }
    40%  { transform: scale(1.1); }
    60%  { transform: scale(1.25); }
       85%  { transform: scale(1.19); }
	92%  { transform: scale(1.155); }
	100% { transform: scale(1.168); }
    
	 
}

@keyframes glowPulse {
    0%   { opacity: 0; transform: scale(0.8); }
    40%  { opacity: 0.25; transform: scale(1.6); }
    100% { opacity: 0; transform: scale(2.2); }
}

@keyframes dislike_alt {
    0%   { transform: scale(1.168); }
    25%  { transform: scale(0.75) rotate(-8deg); }
    60%  { transform: scale(0.9) rotate(2deg); }
    65%  { transform: scale(0.95) rotate(0); opacity: 0.8 }
    100% { transform: scale(1.0); opacity: 1; }
}


@keyframes dislike {
    0%   { transform: scale(1.168); filter: blur(0px); }
    40%  { transform: scale(0.8) translateY(3px); filter: blur(1px); }
    65% { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.0); filter: blur(0px); opacity: 1; }
}


@keyframes heartPeek {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(80px) scale(1.3); }
    60%  { transform: translateY(75px) scale(1.15); }
    80%  { transform: translateY(80px) scale(1.2); }
    100% { transform: translateY(0) scale(1); }
}

#menu_head.nav-up .like_icon.heart-peek {
    animation: heartPeek 1.618s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    z-index: 999;
}



#menu_head .like_icon,
#menu_head .like_icon .like_icon_anz {
    transition: 0.4s ease;
    opacity: 1;
}

#menu_head .like_icon.liked {
    animation: heartbeat 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

#menu_head .like_icon.liked::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(241,65,28,0.35) 0%, transparent 70%);
    animation: glowPulse 0.9s ease-out forwards;
    pointer-events: none;
}

#menu_head .like_icon.liked svg path {
    fill: #df0404;
    transition: fill 0.3s ease;
}

#menu_head .like_icon.liked .like_icon_anz {
    color: white !important;
}

#menu_head .like_icon.disliked {
    animation: dislike 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes countUp {
    0%   { transform: translateY(8px); opacity: 0; }
    100% { transform: translateY(0);   opacity: 1; }
}

#menu_head .like_icon.liked .like_icon_anz {
    animation: countUp 0.3s 0.2s ease-out both;
}





#menu_head .sub-nav{
	position: relative;
    text-transform: uppercase;
    display: flex;
    gap: 40px;
    justify-content: center;
    height: 40px;
    align-items: flex-end;
    padding-top: 20px;
}

/* Link Base */
#menu_head .sub-nav-link a{
	display: block;
    position: relative;
    font-size: 1.15rem;
    letter-spacing: 2px;
    padding-bottom: 5px;
    color: white;
    text-decoration: none;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1),
     opacity 0.3s ease;
     color:white;
}



/* Animated underline */

/* Hover animation */
#menu_head .sub-nav-link a {
    position: relative;
}

#menu_head .sub-nav-link a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;

    width: 100%;
    height: 3px;

    border-radius: 999px;

    background: linear-gradient(
        110deg,
        #8f6a1c 0%,
        #f7ef8a 20%,
        #d2ac47 40%,
        #edc967 50%,
        #f7ef8a 60%,
        #ae8625 100%
    );

    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    opacity: 0;

    transition:
        transform 0.55s cubic-bezier(.22, 1, .36, 1),
        opacity 0.35s ease;
}

#menu_head .sub-nav-link:hover a::after {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
    height: 3px;
    bottom:0px;
}

/* Active state – more presence  */
#menu_head .sub-nav-link.active a::after{
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
    bottom: 0;
    box-shadow: 0 0 8px rgba(255,255,255,0.35);
    top:27px;
}

#menu_head .sub-nav-link.active a::after{
    content: "";
    display:none;
    position: absolute;
    left: 50%;
    bottom: 0px;
    width: 100%;
    height: 3px;
    background: white;
    border-radius: 999px;
    transform-origin: center;
    opacity: 1;
    transition: transform 0.45s cubic-bezier(.4, 0, .2, 1), opacity 0.35s ease;
    background: linear-gradient(110deg, #8f6a1c 0%, #f7ef8a 20%, #d2ac47 40%, #edc967 50%, #f7ef8a 60%, #ae8625 100%);
}



/* Triangle indicator for active link */
#menu_head .sub-nav-link_xxx.active a::before{
	content: "";
    position: absolute;
    left: 50%;
    overflow: visible;
    background: transparent;
    bottom: -12px;
    width: 0;
    height: 0;
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    border-top: 10px solid;
    transform: translateX(-50%);
    opacity: 0.9;
    border-image: linear-gradient(104deg, #AE8625, #F7EF8A, #D2AC47, #EDC967, #AE8625, #F7EF8A, #D2AC47, #EDC967, #AE8625, #F7EF8A) 1;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    opacity: 0.95;
}

#menu_head .sub-nav-link.active a::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    z-index: 0;
    transform: translateX(-50%);
    width: 20px;
    height: 5px;
    /* background: linear-gradient(95deg, #8f6a1c 0%, #f7ef8a 20%, #d2ac47 40%, #edc967 50%, #f7ef8a 60%, #ae8625 100%); */
    
    /* background: linear-gradient(95deg, #e0bf5d 0%, #eede7e 100%); */
    
    background: linear-gradient(95deg, #ede0a4 0%, #fff1b5 100%);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    opacity: 0.98;
    filter: drop-shadow(0 2px 4px rgba(174, 134, 37, 0.5));
    overflow: hidden;
  
}



#menu_head .sub-nav-link:hover a{
    transform: translateY(0px);
}



#menu_head .sub-nav-link.active a{
    color: black;
	padding: 3px 13px 7px 13px;
    border-radius: 50px;
    /* background: linear-gradient(93deg, #df9f19 0%, #f7ef8a 20%, #d2ac47 40%, #edc967 50%, #f7ef8a 60%, #df9f19 100%); */
    background: linear-gradient(93deg, #d2b051 0%, #f9f1ba 50%, #cfaa47 100%);
    /* clip-path: polygon(50% 100%, 0 0, 100% 0); */
    opacity: 0.98;
    filter: drop-shadow(0 2px 4px rgba(174, 134, 37, 0.5));
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0);
    top: 4px;
    position: relative;
}


/* SINGLE INDICATOR */
#menu_head .nav-indicator{
	opacity: 0;
    position: absolute;
    bottom: 0;
	transform-origin: center;
    height: 2px;
    width: 40px;
    left: 0; 
    top:43px;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.1),
        rgba(0,0,0,1),
        rgba(0,0,0,0.1)
    );

    border-radius: 999px;
    display:none;

}

/* Transition erst aktiv, wenn JS sie setzt */
#menu_head .nav-indicator.is-animated {
	opacity: 1;
    transition:
    transform 0.8s ease,
    width 0.35s cubic-bezier(.4,0,.2,1);
}

/* Triangle 
#menu_head .nav-indicator::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);

    width: 0;
    height: 0;

    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid white;
}
*/

#menu_head .hamburger_icon  {
	display:block !important;
    position: relative;
    top: 0.35rem;
    left: 0.75rem;
    width: 30px;
    height: 30px;
    padding: 5px 0px;
    display: block;
}
#menu_head .hamburger_icon:before,
#menu_head .hamburger_icon:after {
    content: "";
    display: block;
    background: #fff;
    height: 2px;
}
#menu_head .hamburger_icon span {
    background: #fff;
    display: block;
    height: 2px;
    margin: 7px 0;
}


.app_bar_padding_top,
.app-bar-padding-top{
	padding-top:var(--navigationHeight);
}


.title_404 {
	display:flex;
    color: #ffffff;
    mix-blend-mode: difference;
    flex-direction: column;
    justify-content: center;
  	line-height: 0.8;
	padding-bottom: 3em;
}

.title_404 .large{
	font-size: 16em;
}

.title_404 .small{
	font-size: 7em;
}

#main_teaser{
	pointer-events: none;
}

#main_teaser .title {font-size: clamp(2.5rem, 7vw, 8.5rem);}


/* Start-Zustand (während Laden / js-loading) 
html.js-loading body,
html.js-loading .is-hidden {
	opacity: 0;
}
*/



/* Default für .is-hidden (unsichtbar + Transition bereit) */
.is-hidden{
  opacity: 0;
  transition: opacity 1s ease 0.3s; /* visibility erst nach Fade aus */
}

/* Wenn .loaded hinzukommt → Transition triggert */
html.loaded .is-hidden,
body.loaded .is-hidden{          /* ← je nachdem, wo du .loaded setzt */
  opacity: 1;
}


#page-loader{
  opacity: 1;
  transition: opacity 1s;
}

html.loaded #page-loader,
body.loaded #page-loader{          /* ← je nachdem, wo du .loaded setzt */
  opacity: 0;
}



.placeholder-wrapper{
	height:100vh;
}



.mega-text, .mega-text-small {
  line-height: 140%;
  font-family: var(--font-display);
  font-size: var(--text-mega);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-6);
  letter-spacing: -0.05em;
  text-shadow: 0 0 20px rgba(255,255,255, 0.3);
}

.mega-text-small {
  font-size: var(--text-mega-small);
}

.mega-text-small.shadow-black {
  text-shadow: 0 0 20px rgba(0,0,0, 0.3);
}

.title.shadow-black {
  text-shadow: 0 0 20px rgba(0,0,0, 0.3);
}

.mega-text.shadow-black {
  text-shadow: 0 0 20px rgba(0,0,0, 0.3);
}

.beyond-text.rotated {
    position: relative;
    transform: translateY(30%) rotate(-90deg);
    width: 100vh;
    height: 100vw;
    bottom: -20vh;
    left: -5vw;
    transition: 1s ease !important;
    font-size: clamp(4rem, 15vw, 13rem);
    letter-spacing: 0.03em;
    
}

.panel.active .panel-full-content .beyond-text.rotated,
.panel.visited .panel-full-content .beyond-text.rotated {
  transform: translateY(0%)  rotate(-90deg);
  opacity: 1 !important;
}


.text.next-rotated {
    position: relative;
    left: 6rem;
    margin-top: 0%;
    top: -40vh;
    max-width: 50vw;
}

.direction-label{
	font-size: clamp(1rem, 15vw, 1.5rem);
}

/* Navigation */
.navigation {
  position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--space-6); z-index: 100; color: white; mix-blend-mode: difference;
}
.nav-progress { width: 150px; height: 2px; background-color: rgba(255,255,255,0.3); position: relative; overflow: hidden; border-radius: 2px; }
.nav-progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: white; transform-origin: left; transform: scaleX(0); will-change: transform; }
.nav-text { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1px; }


/* Multi-Layer Parallax: Neue Klassen für Schichten */
.parallax-layer {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; /* Für imgs */
  will-change: transform;
  opacity: 1; transition: opacity 0.3s ease;
}
.bg-layer { /* Hintergrund: Dunkel & langsam */
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7)); /* Fallback-Textur, oder setz src */
  z-index: 1;
}
.fg-layer { z-index: 3; } /* Vordergrund */
.mg-layer { /* Mittelgrund: Optional semi-transparent */
  z-index: 2; mix-blend-mode: multiply; opacity: 0.8;
}

/* Overlay-Detail: Zentriert über FG, relative max Größe (ohne Scale) */
.overlay-detail-main-art {
  position: absolute; /* Überschreibt Layer-Absolute, falls nötig */
  top: 13% !important;
  left: 35% !important;
  transform: translate(-50%, -50%); /* Zentriert, ohne Parallax-Interferenz */
  width: 30% !important; /* Maximal relativ: 70% des Wrappers – tweak auf 50-80% */
  height: auto !important; /* Behält Proportionen */
  max-width: 70vw !important; /* Fallback: Nie breiter als 70% Viewport (für Mobile) */
  max-height: 70vh !important;
  z-index: 4 !important; /* Immer obendrauf */
  border-radius: 8px; /* Optional: Leichte Rundung für Pop */
  box-shadow: 0 8px 32px rgba(0,0,0,0.5); /* Optional: Schatten für Tiefe */
  opacity: 1; /* Leicht transparent, damit's nicht alles verdeckt */
}

/* Overlay-Detail: Zentriert über FG, relative max Größe (ohne Scale) */
.overlay-detail-ar-art {
  position: absolute; /* Überschreibt Layer-Absolute, falls nötig */
  top: 17% !important;
  left: 40% !important;
  transform: translate(-50%, -50%); /* Zentriert, ohne Parallax-Interferenz */
  width: clamp(30%, 45%, 25%); /* Maximal relativ: 70% des Wrappers – tweak auf 50-80% */
  height: auto !important; /* Behält Proportionen */
  max-width: clamp(25vw, 15vw, 60vw) !important; /* Fallback: Nie breiter als 70% Viewport (für Mobile) */
  max-height: 70vh !important;
  z-index: 4 !important; /* Immer obendrauf */
  border-radius: 8px; /* Optional: Leichte Rundung für Pop */
  box-shadow: 0 8px 32px rgba(0,0,0,0.5); /* Optional: Schatten für Tiefe */
  opacity: 1; /* Leicht transparent, damit's nicht alles verdeckt */
}

.overlay-detail-hand {
  position: absolute; /* Überschreibt Layer-Absolute, falls nötig */
  top: 40% !important;
  left: 60% !important;
  transform: translate(-50%, -50%); /* Zentriert, ohne Parallax-Interferenz */
  width: clamp(25%, 45%, 60%); /* Maximal relativ: 70% des Wrappers – tweak auf 50-80% */
  height: auto !important; /* Behält Proportionen */
   max-width: clamp(30vw, 35vw, 60vw) !important;  /* Fallback: Nie breiter als 70% Viewport (für Mobile) */
   max-height: 100vh !important; /* */
  z-index: 5 !important; /* Immer obendrauf */
  opacity: 1; /* Leicht transparent, damit's nicht alles verdeckt */
}

/* Mobile: Kleiner machen, damit's nicht überquillt */
@media (max-width: 768px) {
  .overlay-detail-art {
    width: 60% !important; /* Etwas enger auf Small-Screen */
    max-width: 60vw !important;
  }
}

/* Parallax-Update: Ignoriere Scale für Overlays (sicherstellen, dass's nicht skaliert) */
.parallax-layer.overlay-detail {
  transform-origin: center center; /* Zentrum als Pivot */
}

/* Für Panels mit Multi: Extra Tiefe */
[data-multi-parallax="true"] .image-wrapper {
  perspective: 1000px; /* 3D-Tiefe simulieren */
  transform-style: preserve-3d;
}
[data-multi-parallax="true"] .parallax-layer {
  transform: translateZ(0); /* Ermöglicht 3D-Transform */
}


#main
{
	max-width:100vw;
	height:auto;
	overflow-x:hidden;
}


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


#main_content{
	max-width:100vw;
	width:100vw;
	/* overflow:hidden; */
}



.wrapper{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.room_wrapper{
    position:relative;
    height:100vh;
    overflow:hidden;
}

.room_image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.art{
    position:absolute;
    /* left/top kommen jetzt aus JS in cm! */
    transform:translate(-50%,20%); /* Mittelpunkt-Zentrierung */
    background:red;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    font-size:24px;
    will-change:transform,opacity,width,height,left,top;
    opacity:0; /* standard unsichtbar, GSAP regelt Sichtbarkeit */
    box-shadow:0 20px 40px rgba(0,0,0,0.5);
}

.art1{background:#e63946;}
.art2{background:#1d3557;}
.art3{background:#2a9d8f;}


/* ======== VIDEO ========= */

/*
.video-wrapper {
    width: 100%;          
    max-width: 1200px;
    margin: 0 auto;
    aspect-ratio: 16 / 9; 
    
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
}
*/

.rotated-video {
    height: 100vh;          
    width: auto;
    min-width: 100%;       
    transform: rotate(0deg);  
    object-fit: cover; 
}



.video-wrapper {
	aspect-ratio: 9 / 16;   /* jetzt wieder Hochformat-Container */
}


.hero-reveal-text{
	    font-size: clamp(2.5rem, 80vw, 20rem);
}


.video-background-hero{
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -40%);
    object-fit: contain;
    z-index: 1;
}

.video-container {        /* Optional: extra Wrapper für bessere Kontrolle */
    width: 100%;
    max-width: 1200px;     /* oder was deine Content-Box breit ist */
    margin: 0 auto;
    background: black;
    aspect-ratio: 16/9;    /* oder deine gewünschte Box, z.B. 4/3, 16/10 etc. */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}





/* ROOM ZOOM */


/* HERO TITLE NAME ALEX ZERR */

#hero .content .title.title-main-name {
  white-space: nowrap;           /* verhindert normales Umbrechen */
  top:18dvh;
  /* dein scale / font-size / transform etc. kommt hier rein */
}

 /* Alternative ohne extra Leerzeichen im HTML – oft noch besser */
.mobile-break::before {
    content: "\A";
    white-space: pre;
}

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




#room_zoom .room_wrapper_zoom {
    position:relative;
    height:100vh;
    overflow:hidden;
    border:5px solid lime;
    perspective:1200px;          /* für einen leichten 3D-Effekt */
}

#room_zoom .room_inner_zoom {
    position:relative;
    width:100%;
    height:100%;
    transform-style:preserve-3d;
}

#room_zoom .room_image_zoom {
    position:absolute;
    inset:0;
    z-index:0;
}

#room_zoom .room_image_zoom  img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
    
   

.art_zoom{
    position:absolute;
    /* left/top kommen aus JS in cm (Mittelpunkt der Wandposition) */
    transform:translate(-50%,-50%);
    background:#e63946;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    font-size:24px;
    will-change:transform,opacity,width,height,left,top;
    box-shadow:0 20px 40px rgba(0,0,0,0.5);
    z-index:1;
    transform-origin:center center;
}


.buttons_start_teaser{
	position: relative;
    display: flex;
    gap: 25px;
    top: 30%;
    z-index: 10 !important;
    transition: 0.5s ease;
    will-change: position;
    flex-direction: row;
    justify-content: center;
}



.buttons_start_teaser.final{
	position: relative;
    top: -10% !important;
    z-index:10 !important;
}

/*
.buttons_start_teaser a{
	background-color: rgba(255, 255, 255, 0.5);
    font-size: 1.5em;
    color: white;
    color: black;
    padding: 1em 1.5em;
    border-radius: 50px;
    text-decoration: none;
    backdrop-filter: blur(5px);
}
*/

.pannel-button-accent{
	color: #001d1c !important;
    background-color: white;
    padding: 10px 30px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    margin-top: 2em;
    margin-bottom: 2em; /* für hover space und schatten */
    display: inline-block;
    font-size: 16pt; 
    padding: 20px 30px !important;
    padding-bottom: 23px !important;
}

.pannel-button-accent.white{
	color: black !important;
    background-color: rgba(255,255,255,0.9);
}

.pannel-button-accent.white:hover{
    background-color: rgba(255,255,255,1) !important;
}

.pannel-button-accent:hover{
    background-color: #0be0de;
}

.blur{
	filter: blur(5px);
}

.teaser_button {
	/* width:240px; */
    text-transform: uppercase;
    color: white;
    position: relative;
    padding: 20px 30px;
    display: inline-flex;
    border-radius: 100px;
    align-content: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    z-index: 1;
    transition: transform 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
    opacity: 1;
    padding-bottom: 18px;
}

/* Hover-Effekt für teaser_button selbst */
.teaser_button:hover {
    transform: translate(0px, 0px) scale(1.15); /* Kleiner Scale-Effekt */
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 1);
    opacity: 1;
}

.teaser_text_wrapper{
	position: relative;
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	justify-content: flex-start;
	top: -8.5%;
	opacity:0; /* initial load */
}

.teaser_text_wrapper_mask{
	position: relative;
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	justify-content: flex-start;
	top: -8.5%;
	opacity:0; /* initial load */
}

.signature_button_wrapper{
	width: 100%;
    bottom: 0px;
    position: absolute;
    translate: none;
    rotate: none;
    scale: none;
    z-index: 9;
    display: flex;
    transform: translate(0%, -200%);
    justify-content: center;
    align-items: stretch;
}

/* GOLDEN BUTTON */
.button-77,
.btn-77 {
	color:black !important;
    border: none;
    border-radius: 50em;
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
	font-size: 1.5rem;
    color: rgb(121, 103, 3);
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.09), 0 4px 2px rgba(0, 0, 0, 0.09), 0 8px 4px rgba(0, 0, 0, 0.09), 0 16px 8px rgba(0, 0, 0, 0.09), 0 32px 16px rgba(0, 0, 0, 0.09);
    background-size: 200% 200%;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-display);
    white-space: nowrap;
    flex-direction: column;
    overflow:hidden;
    padding: 15px 25px;
    text-transform:uppercase;
    transition:0.382s ease;
    /*** full width block ***/
    /* width: 100%; */
}

.logoIcon path {
    fill: rgb(121, 103, 3);
}

.teaser_content_outer:hover .btn-77{
    transform: scale(0.95);
    animation: gradient 7s ease infinite;
    background-position: right;
    
}

.btn-77:hover {
    animation: gradient 7s ease infinite;
    background-position: right;
    transform:scale(1.02);
}

.btn-77:active {
    transform: scale(0.95);
    animation: gradient 7s ease infinite;
    background-position: right;
    transform:scale(0.98);
}

.btn-77:disabled {
    pointer-events: none;
    opacity: .65;
    color: #7e7e7e;
    background: #dcdcdc;
    box-shadow: none;
}
/* GOLDEN BUTTON ENDE */


/* FEEBACK SECTION */

.customer-split .panel-left {
  position: relative;
  overflow: hidden;
}

.customer-split .image-wrapper {
  position: absolute;
  inset: 0;
}

.customer-split .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caption links unten */
.photo-caption {
  position: absolute;
  bottom: 6vh;
  left: 8vw;
  z-index: 2;
  color: white;
  text-align: left;
}

.photo-caption .direction-label {
  font-size: 0.9rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

.photo-caption .caption-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.photo-caption .caption-location {
  font-size: 1.1rem;
  opacity: 0.8;
  margin-top: 0.3rem;
}

/* Rechte Seite – schwarzer Block */
.customer-split .panel-right .panel-content {
  padding: 3em;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quotes-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.quote-container .quote {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.5;
  font-weight: 300;
}

.quote-container .author {
  margin-top: 1rem;
  font-size: 1.1rem;
  opacity: 0.8;
  letter-spacing: 0.05em;
}

/* Mobile – Stack */
@media (max-width: 991px) {
  .customer-split .content-wrapper,
  .customer-split .panel-left,
  .customer-split .panel-right {
    grid-column: 1 / -1;
  }
  
  .customer-split .panel-right {
    padding: 10vh 8vw;
    text-align: center;
  }
  
  .photo-caption {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
}




.social-media-wrapper{
	gap: 1rem;
    display: flex;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    height: auto;
    justify-content: center;
}

.social-media-wrapper span{
	display: flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
}

.social-media-wrapper a img {
    height: 30px !important;
    width: 30px !important;
}


/* === 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;
}

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


.bg-radial-glow-top{
	background: radial-gradient(circle at 50% 13%, rgba(2, 208, 206, 0.3), transparent 55%), rgb(10 10 10);
}

.bg-radial-glow-bottom{
	background: radial-gradient(circle at 50% 87%, rgba(2, 208, 206, 0.3), transparent 55%), rgb(10 10 10);
}

/* 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: 640px;
  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;
}

/* HOVER ------------------------------------------------ 
.vorteil-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(4px);
  box-shadow: 0 0 20px rgba(2, 208, 206, 0.15);
}*/



/* === NEWSLETTER PANEL ========================================= */



.newsletter-panel .newsletter-bg {
  width: 100%;
  height: 100%;
}

/* Grid Layout im Panel */
.newsletter-grid {
   display: flex;
   gap: 20px;
   align-items: center;
   flex-direction: column;
   max-width: 750px;
}

.newsletter-copy{
	display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.newsletter-copy .chapter {
  margin-bottom: var(--space-4);
}

.newsletter-copy .title {
  margin-bottom: var(--space-4);
}

.newsletter-copy .text-small {
  max-width: 32rem;
  margin-bottom: var(--space-4);
}

/* kleine Chips / Benefits */
.list-benefits {
  list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.list-benefits li {
  font-size: var(--text-s);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(10px);
  white-space: nowrap;
  margin-block-end: 0.5em;
}

/* Rechte Seite – Glas-Card */
.newsletter-form-wrapper {
  justify-self: flex-end;
}


.newsletter-form {
  /*
  background: rgba(0, 0, 0, 0.78);
  border-radius: 28px;
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(18px);
  max-width: 420px;
  */
}

/* Input + Button als Capsule */
.newsletter-pill {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  padding: 0px;
  border-radius: 999px;
  background: rgba(0,0,0, 0.8);
  backdrop-filter:blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin: 2em;
  box-shadow: 0 0 51px rgba(2, 208, 206, 0.52), 0 0 35px rgba(255, 255, 255, 0.26);
    
    position: relative;
    z-index: 0;
}

.newsletter-pill::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    background: conic-gradient(
        from var(--angle),
        rgba(2, 208, 206, 0.8),
        rgba(255, 255, 255, 0.4),
        rgba(2, 208, 206, 0),
        rgba(2, 208, 206, 0),
        rgba(2, 208, 206, 0.8)
    );
    z-index: -1;
    animation: rotateBorder 4s linear infinite;
}

.newsletter-pill::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 999px;
    background: rgb(0 0 0 / 80%);
    z-index: -1;
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes rotateBorder {
    to { --angle: 360deg; }
}



.newsletter-pill input[type="email"] {
  flex: 1;
  border: none;
  outline: none;
  background: #010101;
  padding: 0.85rem 1.1rem;
  color: var(--color-text);
  font-size: var(--text-base);
  font-family: var(--font-primary);
  border-radius: 100px;
  margin: 0px;
  padding: 25px;
}

.newsletter-pill input::placeholder {
  color: rgba(245, 245, 245, 0.55);
}

/* Button re-used von deiner .button-55, hier nur Feintuning */

.newsletter-button-wrapper{
	display: flex;
    padding: 0 25px 50px 25px;
    justify-content: center;
    align-items: center;
}


.newsletter-submit {
  border-radius: 999px;
  white-space: nowrap;
  padding-inline: 1.6rem;
  min-width: 150px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px 35px;
}

/* Fokus / Hover */
.newsletter-pill:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px rgba(2, 208, 206, 0.3);
}

.newsletter-meta,
.newsletter-privacy {
  font-size: var(--text-s);
  line-height: 1.5;
  color: var(--color-text-muted);
  padding:0 25px;
  text-align:center;
}

.newsletter-meta {
  margin-bottom: var(--space-2);
}

.newsletter-privacy a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(2, 208, 206, 0.4);
}

.newsletter-privacy a:hover {
  border-bottom-color: rgba(2, 208, 206, 1);
}


input.newsletter_input_email:-webkit-autofill,
input.newsletter_input_email:-webkit-autofill:hover,
input.newsletter_input_email:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #000000 inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}


input.newsletter_input_email:focus{
	border-color: unset !important;
    box-shadow: unset !important;
}

.brand_color{
	color:var(--color-brand);
}


/* Mobile Anpassungen */
@media (max-width: 900px) {
  .newsletter-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .newsletter-form-wrapper {
    justify-self: stretch;
  }

  .newsletter-form {
    max-width: 100%;
    padding: var(--space-5);
  }

  .newsletter-pill {
    flex-direction: column;
    padding: 6px;
  }

}
    

/* Hover-Bonus: Leichte horizontale Parallax auf Mouse-Move (optional, nur Desktop) */
/*
@media (min-width: 768px) {
  [data-multi-parallax="true"] .image-wrapper {
    cursor: crosshair;
  }
  [data-multi-parallax="true"] .parallax-layer {
    transition: transform 0.1s ease;
  }
}
*/


/* BG LOGO PANNEL */
.logo-wrapper-full{
	display: flex;
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow:hidden;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    justify-content: center;
    align-items: center;
}

.logo-wrapper-full svg{
	width: 90vw;
    height: auto;
    /* opacity: 0.321; */
    opacity:1;
    transition:0.5s ease;
    will-change:opacity;
}

.logo-wrapper-full.loaded svg{
    opacity:0.321 !important;
}




.logo-wrapper-loader{
	display: flex;
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.logo-wrapper-loader svg {
    width: 80vw;  /* Mobile – groß */
    height: auto;
    opacity: 1;
    transition: 0.5s ease;
    will-change: opacity;
}

@media (min-width: 768px) {
    .logo-wrapper-loader svg {
        width: 50vw;  /* Tablet */
    }
}

@media (min-width: 1200px) {
    .logo-wrapper-loader svg {
        width: 35vw;  /* Desktop – wie aktuell */
    }
}

.logo-wrapper-loader .loading_text{
	padding-top:20px;
	padding-left: 1.2rem; /* ← Platz wie von für 3 Punkte reservieren */
}

.logo-wrapper-loader .loading_text_wrapper{
	display: flex;
    /* gap: 20px; */
    flex-direction: column-reverse;
    align-content: center;
    align-items: center;
}

.logo-wrapper-loader .loading_text_wrapper .loader{
	margin-top: 30px;
}

.logo-wrapper-loader .loading_text::after {
    content: '';
    display: inline-block;
    width: 1.2rem;  /* ← Platz für 3 Punkte reservieren */
    text-align: left;
    animation: dots 1.5s steps(3, end) infinite;
}

@keyframes dots {
    0%   { content: ''; }
    33%  { content: '.'; }
    66%  { content: '..'; }
    100% { content: '...'; }
}


.logo-wrapper-loader.loaded svg{
    opacity:0.321 !important;
}



.logo-wrapper-full-products-bg{
	display: flex;
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow:hidden;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    justify-content: center;
    align-items: center;
    filter: blur(5px);
}

.logo-wrapper-full-products-bg svg{
	width: 90vw;
    height: auto;
    /* opacity: 0.321; */
    opacity:1;
    transition:0.5s ease;
    will-change:opacity;
}


/* ======== GRADIENT BG ========= */
.panel-gradient-center {
   /*  background: radial-gradient(circle at 50% 50%, rgba(2, 208, 206, 0.3), transparent 55%), rgb(10 10 10); */
    background: var(--gradient_center);
}

.panel-gradient-top {
   /*  background: radial-gradient(circle at 50% 50%, rgba(2, 208, 206, 0.3), transparent 55%), rgb(10 10 10); */
    background: var(--gradient_top);
}

.panel-gradient-top-hero {
   /*  background: radial-gradient(circle at 50% 50%, rgba(2, 208, 206, 0.3), transparent 55%), rgb(10 10 10); */
    background: var(--gradient_top_hero);
}

.panel-gradient-bottom-hero {
   /*  background: radial-gradient(circle at 50% 50%, rgba(2, 208, 206, 0.3), transparent 55%), rgb(10 10 10); */
    background: var(--gradient_bottom_hero);
}

.panel-gradient-bottom {
   /*  background: radial-gradient(circle at 50% 50%, rgba(2, 208, 206, 0.3), transparent 55%), rgb(10 10 10); */
    background: var(--gradient_bottom);
}

.panel-gradient-left {
   /*  background: radial-gradient(circle at 50% 50%, rgba(2, 208, 206, 0.3), transparent 55%), rgb(10 10 10); */
    background: var(--gradient_left);
}

.panel-gradient-right {
   /*  background: radial-gradient(circle at 50% 50%, rgba(2, 208, 206, 0.3), transparent 55%), rgb(10 10 10); */
    background: var(--gradient_right);
}

.panel-gradient-scroll {
   /*  background: radial-gradient(circle at 50% 50%, rgba(2, 208, 206, 0.3), transparent 55%), rgb(10 10 10); */
    background: var(--gradient_scroll);
}


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

/* Mobile */
@media (max-width: 768px) {
	
	/*
	html {
		scroll-snap-type: y proximity;
  	}
  	*/
  
  .panel-split, .editorial-split { flex-direction: column; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .panel-left, .panel-right { width: 100%; height: 50%; padding: var(--space-6); }
  .panel-content, .panel-full-content { width: 95%; }
  .title { font-size: var(--text-2xl); }
  .image-container { height: 180px; }
  .mega-text, .contact-name { font-size: clamp(4rem, 15vw, 8rem); }
  .email-wrapper { flex-direction: column; padding: var(--space-3); }
  .email-wrapper a.email{
    color: white;
    text-decoration: none;
	font-size: var(--text-xl); }
  .copy-email { margin-top: var(--space-2); }
}



/* ============ HORIZONTAL SCROLL ============== */

.racesWrapper{
	display: flex;
	height: 100%;
    max-height: 100vh;
    align-content: center;
    align-items: center;
}

.races {
	/* transition: none !important;  verhindert CSS-Konflikte mit GSAP */
  width:fit-content;
  display:flex;
  flex-wrap:nowrap;
  backface-visibility: hidden;
  cursor: pointer;
  
  filter: brightness(var(--hover-bright))
          saturate(var(--hover-saturate))
          blur(0px);
          
  will-change: transform, filter;
  
  transition: none !important;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  
}



.races > * {
  /* transition:0.3s ease; */
  filter: brightness(1) saturate(1) blur(var(--scroll-blur, 18px));
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, filter;
  cursor: pointer;
}

.races h2 {
  font-family: 'Boldonse', cursive;
  font-size:20vw;
  flex-shrink:0;
  padding-right:0.3em;
  padding-left:0.3em;
  color:#e10600;
  
  margin:0; 
}

.races h2:last-of-type {
  background:#e1e1ff;
}

.lightBG {
  background:#313143;
}

.space-20vh {
  height:20vh;
}

.space-30vh {
  height:30vh;
}

.space-50vh {
  height:50vh;
}

.space-100vh {
  height:100vh;
}



/* ========== IDENTISCH MIT DEINEM HORIZONTALEN CSS – NUR VERTIKAL ========== */
.races_vertical_wrapper {
  height: 100vh;
  display: flex;
  align-items: flex-start;        /* von center → flex-start */
  justify-content: center;
  padding-top: 20vh;              /* hier kommt der Zauber her! */
  box-sizing: border-box;
  flex-direction: column;
}

.races_vertical {
  width: fit-content;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 0 60px;
  will-change: transform, filter;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  filter: brightness(var(--hover-bright, 1)) saturate(var(--hover-saturate, 1)) blur(0px);
}

.races_vertical > * {
  filter: brightness(1) saturate(1) blur(var(--scroll-blur, 18px));
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, filter;
  cursor: pointer;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}

.races_vertical img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.vertical-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.vertical-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
  padding: 80px 40px 40px;
  color: white;
  text-align: center;
  transform: translateY(60px);
  opacity: 0;
  transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.vertical-caption h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
  transform: translateY(20px);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.vertical-caption p {
  font-size: 1.5rem;
  opacity: 0.9;
  margin: 0;
  transform: translateY(20px);
  transition: transform 0.9s 0.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.caption-line {
  display: block;
  width: 60px;
  height: 3px;
  background: white;
  margin: 20px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.9s 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover-Zustand */
.vertical-item:hover .vertical-caption {
  transform: translateY(0);
  opacity: 1;
}

.vertical-item:hover .vertical-caption h3,
.vertical-item:hover .vertical-caption p {
  transform: translateY(0);
}

.vertical-item:hover .caption-line {
  transform: scaleX(1);
}





/* ========== CSS – nur das hier rein ========== 
.grid-reveal-section {
  padding: 100px 0;
  background: #0a0a0a;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;     
  gap: 40px 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.grid-item {
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  will-change: transform, filter;
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
*/
/* ================= SOFT GRID REVEAL */

.soft-grid-section {
  padding: 200px 0;
  background: #000;
}

.soft-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.soft-item {
  aspect-ratio: 4 / 5;
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  will-change: transform, filter;
}

.soft-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ================= PINNED GRID */

.pinned-grid-section {
  height: 100vh;
  overflow: hidden;
  background: #000;
  position: relative;
}

.pinned-grid-wrapper {
  height: 100vh;
  position: relative;
}

.pinned-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 0 40px;
  max-width: 1600px;
  margin: 0 auto;
  height: 100%;
  align-content: start;
  padding-top: 20vh;
}

.pinned-item {
  aspect-ratio: 4 / 5;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  will-change: transform, filter;
  position: relative;
  display:flex;
  height:600px;
}

.pinned-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pinned-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.9), transparent);
  padding: 60px 30px 30px;
  color: white;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

.pinned-item:hover .pinned-caption {
  opacity: 1;
  transform: translateY(0);
}


/**************** VERTICAL PIN GRID */

.vertical_scroll_master {
  position: relative;
  isolation: isolate; /* damit z-index sauber in diesem Kontext bleibt */
  /* background: #142f2f; */
}

/* Das Logo: immer mittig im Viewport, im Hintergrund */
.logo-wrapper-full-products-bg-scroll {
    display: flex;
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    inset:0;
    justify-content: center;
    align-items: center;
    filter: blur(0px);
    opacity:0.3;
}






.logo-wrapper-full-products-bg-scroll svg{
    width: 100%;
    height: auto;
}



.visible{
	opacity: 1 !important;
}


.product_wrapper{
	width: 500px;
    max-width: 90vw;
    height: auto;
    max-height: 90vh;
    margin: 2em;
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    backdrop-filter: blur(7px);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.product_wrapper_crear_flex{
	display: flex;
    width: 500px;
    max-width: 90vw;
    margin: 2em;
    color: white;
    align-content: center;
    align-items: center;
}

.product_wrapper_crear_flex img{
	width: 100%;
    height: 100%;
    box-shadow: 0px 40px 50px rgba(0, 0, 0, 0.35);
    object-fit: cover;
}


.product_wrapper_crear_flex_vertical{
	display: flex;
    /* width: 100%; */
    max-width: 90vw;
    margin: 2em;
    color: white;
    align-content: center;
    align-items: center;
}

.product_wrapper_crear_flex_vertical img{
	width: 100%; 
    height: 100%;
    max-height:90vh;
    box-shadow: 0px 40px 50px rgba(0, 0, 0, 0.35);
    object-fit: cover;
}

.product_wrapper .price_size_box{
	display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding: 15px 25px;
}

.product_wrapper img{
	width:100%;
	height:auto;
}

.product_wrapper img::after{
	padding:100%;
}


.product_wrapper .content_wrapper{
	padding:15px;
}

.product_wrapper .button{
	display: inline-block;
    background-color: white;
    color: black;
    padding: 10px 15px;
    border-radius: 50px;
    margin: 15px;
}

.product_wrapper .description{
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-clamp: 3;
    -webkit-line-clamp: 2;
    font-size: 0.8rem;
}

.product_wrapper .size{
	font-size:1.2rem;
}


.scroll_notice_wrapper {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  
  width: 90px;
  height: 90px;
  border-radius: 50%;                /* 100 % rund */
  background: rgb(0,0,0, 0.7);
  color: white;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0,0,0, 0.8);
  z-index: 9999;
  
  animation: bounce 2s infinite;
  
  opacity:1;
}

.scroll_notice_wrapper.visible{
	opacity:1;
}

.scroll_notice_wrapper span{
	padding-bottom: 30px;
}

.scroll_notice_wrapper::after {
  content: "↓";
  margin-top: 15px;
  font-size: 2.5em;
  animation: arrow 1.4s infinite;
  position:absolute;
}



.scroll_notice_wrapper_arrow {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  
  width: 90px;
  height: 90px;
  color: white;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 9999;
  
  animation: bounce 2s infinite;
  opacity:1;
}

.scroll_notice_wrapper_arrow::after {
  content: "↓";
  margin-top: 15px;
  font-size: 4.5em;
  animation: arrow 1.4s infinite;
  position:absolute;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-15px); }
}

@keyframes arrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

.panel {
  height: 150vh;
  overflow: hidden;
  position: relative;
}

.panel-top {
  background: #000; /* falls Video nicht lädt */
}

.panel-bottom {
  height:150vh;
  background: #fff; /* oder passend zu deinem Design */
  /* Wichtig: z-index höher als obere */
  position: relative;
  z-index: 2;
}








/* NEU */

.buttons_start_teaser{
    font-size:1rem;
}


section{
  position:relative;
  overflow:hidden;
}

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

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


.scroll_panel .content-long{
    height: 100% !important;
}

/*
section img.bg,
section img.mask_bg.bg {
    filter:brightness(.55);
    height: 100%;
    width: auto;
    transform-origin:center center;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}
*/

section .bg-wrapper{
	width:100%;
	height:100%;
	position:absolute;
}


section .bg-wrapper {
  /*overflow: hidden; */
  position:absolute;
}
/*
section .bg-wrapper img.parallax {
  inset:-5%;       
 
  top:50%;
  left:50%;
  transform: scale(1.2)  translate(-50%, -50%) translateY(var(--parallax-y, 0px));
  will-change: transform;
  z-index:-1;
}
*/

/*  ALT !!! */
section .bg-wrapper img.parallax {
  position: absolute;
  inset: -5%;
  top: 50%;
  left: 50%;
  width: 110%;
  height: auto;
  object-fit: cover;
  transform: scale(1.2) translate(-50%, -50%);
  will-change: transform;
  z-index: -1;
}


.feedback .bg-wrapper.parallax img{
	top: 61.8%;
}


@media (orientation:portrait){
	section .bg-wrapper img.parallax {
	  width: auto;
	  height: 110%;
	}
}

/*
section img.bg,
section img.mask_bg.bg {
    filter:brightness(.55);
    height: 100%;
    width: auto;
    margin:0 auto;
    transform-origin:center center;
    position:relative;
	will-change: transform;
}
*/


section img.bg,
section img.mask_bg.bg {
    filter:brightness(.55);
    height: auto;
    width: 100%;
    margin:0 auto;
    transform-origin:center center;
    position:relative;
	will-change: transform;
}


section img.no-filter{
	filter:unset;
}





@media (orientation: portrait){  
	section img.bg,
	section img.mask_bg.bg {
	    width: auto;
	    height: 100%;
	}
}


section img.bg.no-gsap,
section img.mask_bg.bg.no-gsap {
    position:absolute;
    top:50%;
	left:50%;
	transform: translate(-50%, -50%) scale(1.2);
	will-change: transform;
}


section img.mask_bg.bg.no-gsap {
    position:absolute;
    top:50%;
	left:50%;
	transform: translate(-50%, -50%) scale(1.2);
	will-change: transform;
}


/* 
section img.bg {
  position: absolute;
  inset: -5%;                    
  width: 110%;
  height: 110%;
  object-fit: cover;
  animation: kenBurns 60s infinite alternate ease-in-out;
  will-change: transform;
}

@keyframes kenBurns {
  0% {
    transform: translate(-5%, -5%) scale(1.05);
  }
  100% {
    transform: translate(5%, 5%) scale(1.1);
  }
}
*/



img.no-filter {
    filter:unset !important;
}



.title{
    text-align:center;
    
}

/*
.scroll_panel .content .title{
    font-size: clamp(8rem, 9rem + 1vw, 14rem);
    font-weight: 900;
    letter-spacing: -.05em;
    text-transform: uppercase;
} 
*/

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

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


#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:0;
	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;
}



.tunnel_mask{
  position:absolute;
  inset:0;
  background:#000;
  clip-path:circle(0% at 50% 50%);
}


.text-greeting{
	font-size: var(--text-greeting);
	padding-bottom: 100px;
}

/* Optional: noch sauberer Look – erste + letzte Zeile etwas mehr Padding oben/unten 
.details-table-modern tr:first-child td,
.details-table-modern tr:last-child td {
  padding-top: 1.3em;
  padding-bottom: 1.3em;
}
 */   


.content-wrapper{
    height:100vh;
    position: relative;
}


/* MASK TITLE */


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


.title-main{
    line-break: after-white-space;
    position: relative;
    /* font-size: clamp(3em, 80vw, 6em) !important; */
    /* white-space: nowrap; */
    
    font-size: var(--text-title-main);
    
    color: #fff;
    text-align: center;
    line-height: 0.9em;
    top: -13%;
}

.title.title-main-name,
.title.title-main-mega{
   line-height:90%;
   font-size: var(--text-title-mask-alex-zerr);
   position: relative;
   transform: translate(0px, 0px);
}

.title-main-mega-med{
    font-size: var(--text-title-mega-med);
    transform: translate(0px, 0px);
}


.hidden_on_load{
	 opacity:0; 
	transition: opacity 5s ease 0.1s; 
	will-change: opacity;
}

.initialized .hidden_on_load{
	transition: opacity 5s ease 0.1s; 
	will-change: opacity;
    opacity:1;
}

.always_visible .hidden_on_load{
	/* opacity:1 !important; */
}


.scroll_panel .button-wrapper{
    display: flex;
    position: relative;
    text-align: center;
    padding: 5vh 0 5vh;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.hero_button_wrapper {
    position:absolute;
    bottom: 17%;
    z-index:9;
}



/* tablet - desktop 
@media (min-width: 900px) {

    .mask-title {
        font-size: var(--text-title-mask);
    }
    
     .title-main {
        max-width:50vw;
        font-size: clamp(3em, 80vw, 13em) !important;
    }
    
    .title-main-name,
    .title-main-mega{
        font-size: clamp(25em, 16em - 21vh, 29em) !important;
        transform: translate(0px, 0px);
    }
    
    
    .title-main-mega-med{
        font-size: clamp(19em, 16em - 21vh, 28em) !important;
        transform: translate(0px, 0px);
    }

    .buttons_start_teaser {
        position: relative;
        display: flex;
        gap: 1.5em;
        top: 30%;
        z-index: 10 !important;
        transition: 0.5s ease;
        will-change: position;
        flex-direction: row;
    }
    
    .buttons_start_teaser .teaser_button  {
        font-size: 1.8rem;
        padding-bottom: 12px;
    }
    
    .hero_button_wrapper {
        top: 70vh;
    }
    
    .buttons_start_teaser {
        gap: 1.5em;
    }

}
*/

.button-wrapper {
  text-align: center;
  padding: 5vh 0 5vh; /* Abstand oben/unten – passt den Scroll-Timing an */
  width: 100%;
  
}

.mask-wrapper .button-wrapper {
    background: transparent;
}

.bottom-gradient-black {
	bottom:-5%;
	padding-bottom:1vh;
	background: #000000;
    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%) !important;
}


.button-wrapper.absolute{
    position:absolute;
}


.cursor_gradient_wrapper {
    
    top: 0px;
    left:0px;
    width:100%;
    height:auto;
    z-index: 99999999999;
}

/*
.cursor_gradient {
    width: 500px;
    position: absolute;
    height: 100vh;
    background-image: linear-gradient(#1100ff 10%, #ff00f2);
    filter: blur(250px);
    transition: all 450ms ease-out;
    pointer-events: none;
    left: 50%;
    transform: translate(calc(-50% + 15px), -50%) translate3d(0,0,0);
    z-index: 3;
    opacity:1;
    will-change: transform;          
  	contain: paint layout style;    
  	backface-visibility: hidden;    
}
*/

.cursor_gradient {
    width: 500px;
    height: 500px;        /* ← nicht 100vh! sonst riesig */
    position: absolute;      /* ← fixed statt absolute! scrollt sonst mit */
    top: 0;
    left: 0;
    transform: none;      /* ← transform komplett aus CSS raus, JS macht das */
    background-image: linear-gradient(#1100ff 10%, #ff00f2);
    filter: blur(250px);
    pointer-events: none;
    transition: all 450ms ease-out;
    transform: translate(calc(-50% + 15px), -50%) translate3d(0,0,0); 
    z-index: 0;
    opacity: 1;
    will-change: transform;
    backface-visibility: hidden;
}


.cursor_gradient.fixed {
	opacity:0.33;
    position: fixed !important;
    z-index:0;
}

footer {
	z-index:3;
}

body * {
	z-index:3;
}


/* SCROLL DOWN BUTTON */


@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}


/* FOOTER */

.footer-wrapper{
	display:flex;
	flex-direction: column;
}

.footer-wrapper-inner{
	display:flex;
	flex-direction: row;
    justify-content: space-around;
}

.footer-wrapper-partner{
	display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.footer_links {
    list-style-type: none;
    font-size: 10pt;
    line-height: 165%;
    padding-left: 0px;
    text-align: left;
}

.footer_links a{
    color:white;
    color: rgba(255, 255, 255, 0.8);
}

.footer_links a:hover{
    color:white;
    color: rgba(255, 255, 255, 1);
}


footer h4{
    color:white;
    color: #7f7f7f;
    margin-bottom: 25px;
    text-align:left;
}


.transparent{
    background:transparent !important;
}

.transparent-blur{
    background:transparent !important;
    backdrop-filter:blur(10px) !important;
}

.transparent-black-blur{
    background-color:rgba(0,0,0,0.7) !important;
    backdrop-filter:blur(10px) !important;
}

.accordion-container .accordion-title {
    background-color:rgba(0,0,0,0.7) !important;
    backdrop-filter:blur(10px) !important;
}


.slick-prev:before, .slick-next:before {
    color: white !important;
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: #ffffff;
    font-size: 15px;
}

.slick-dots li button:before {
	transition:0.3s ease;
	font-size: 10px;
    color: rgba(255,255,255,0.85);
}


.splide__pagination__page {
    background: rgba(255,255,255,0.5) !important;
    border-radius: 50px;
    height: 10px;
    width: 10px;
    margin: 5px 10px;
    transition:0.3s ease;
}

.splide__pagination__page.is-active {
    background: rgba(255,255,255,1) !important;
    height: 15px;
    width: 15px;
}

.splide__arrows{
	/* mix-blend-mode: color-dodge; */
}

.splide__arrow{
	background: rgb(255 255 255 / 90%) !important;
    backdrop-filter: blur(10px);
    width: 60px;
    height: 60px;
    mix-blend-mode: color-dodge;
    border-radius: 100px;
    transition: 0.5s ease;
}



.splide__arrow svg,
.splide__arrow:hover:not(:disabled) svg{
    fill: rgba(0,0,0, 1);
}




/* ****************** */

.content .line {
    height: 1px;
    background: var(--gradient-gold);
    width: 0%;
    margin: 20px auto;
}

/* ******* SUBNAV*********** */




.page_sub_nav {
	left: 50%;
    position: fixed;
    background: transparent;
    --transformJS: 0px;
    --widthJS: 0px;
    width: auto;
    transform: translateX(-50%);
    z-index: 99;
    transition:1s ease;
    top: 125px;
    overflow: auto;
    max-width: 100vw;
    width:auto;
	/* overflow: visible; */ /* verhindert scrollwrapper!  */
	padding:10px;
}

@media (max-width: 440px){
	.page_sub_nav {
		left: unset;
	    transform: unset;
	}
}

.page_sub_nav.nav-down {
    top: 115px;
}


.page_sub_nav.top{
	top: 115px;
}

.page_sub_nav.nav-up{
	top: 65px;
}

.page_sub_nav ul {
    display: inline-flex;
    position: relative;
    gap: 0.4rem;
    list-style: none;
    /* padding: 0.4rem; */
    margin: 0 auto;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    /* Hier kommt der Slider rein */
  transition: opacity 0.25s ease;           /* ← neu */
}

.page_sub_nav ul:has(a:hover)::before {
  opacity: 1;
}

.page_sub_nav ul::before {
  content: "";
  position: absolute;
  inset: 0.4rem;                    /* oder top/left/bottom/right nach Bedarf */
  width: var(--widthJS, 0px);
  transform: translateX(var(--transformJS, 0px));
  border-radius: 999px;
  /* mit padding in nav box
  inset: 0.4rem; 
  top: 0.4rem;                    
 left: 0.4rem;                   
 height: calc(100% - 0.8rem);   */ 
 
 inset: 0; 
 height: calc(100%);
 
  background: rgba(255,255,255,0.3);
  opacity: 0;                       /* ← Start unsichtbar */
  transition: 
    opacity   0.22s ease,
    transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    width     0.42s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

.page_sub_nav li {
    position: relative;
    z-index: 1;
    list-style-type: none;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0em;
    line-height: 160%;
}

.page_sub_nav .sub_nav_link {
    position: relative;
    display: block;
    padding: 0px 24px;
    border-radius: 999px;
    font-size: 1rem;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease;
    z-index: 2;
    text-transform: uppercase;
}

.page_sub_nav a{
    text-decoration:none;
}

.page_sub_nav .sub_nav_link:hover {
    color: white;
}

/* Aktiver Link */
.page_sub_nav li.active a{
	
    color: #000 !important;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter:blur(10px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    text-decoration:none;
}

.page_sub_nav a.sub_nav_link.active::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 5px solid white;
    transform: translateX(-50%);
    opacity: 0.8;
    width: 20px;
    height: 5px;
}

/* DARK COLOR FOR ROOM BG WITH WHITE BACKGROUND */
.page_sub_nav.black a.sub_nav_link_xxx {
    color:black !important;
}

.page_sub_nav.black ul{
    background: rgb(0 0 0 / 40%);
}

/* -------------------------------------------- */
.sub-nav,
.page_sub_nav {
	font-family:var(--font-display);
    --transformJS: 0px;
    --widthJS: 0px;
}




.button_scroll_down{
	display: flex;
    position: absolute;
    opacity: 1;
    z-index: 5;
    bottom: -220px;
    background-color: rgba(0, 0, 0, 0.666);
    font-family: var(--font-display);
    width: 100px;
    height: 200px;
    border-radius: 100px;
    left: 50%;
    transform: translate(-50%, 0%);
    translate: none;
    rotate: none;
    padding: 25px;
    scale: none;
    justify-content: center;
    align-items: flex-start;
    transition:1s ease;
    color:white;
    font-size: 1.618rem;
}




.button_scroll_down span {
    position: absolute;
    top: -35px;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb05 1.5s infinite;
    animation: sdb05 1.5s infinite;
    box-sizing: border-box;
    font-family:var(--font-display);
}



.art-wrapper {
  position: absolute;
  overflow:hidden;
  /* die translate(-50%, -50%) bleibt hier  */
  transform: translate(-50%, -50%) scale(1);
  will-change: transform;  
  opacity:0; 
  pointer-events:none;
}



.center-absolute{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%) scale(1);
	will-change: transform;
}

.center-absolute:hover{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%) scale(1);
	will-change: transform;
}



/* MARQUE SLIDER V1 */


.marque_wrapper {
  width: 100%;
  background: transparent;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.marque_wrapper .box {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

/* DESKTOP TABLET */
@media (min-width: 991px){   
	
	.marque_wrapper .box {
	  width:50%
	}

}

.prev {
  position: absolute;
  top: 10%;
  left: 15%;
}
.next {
  position: absolute;
  top: 10%;
  right: 15%;
}
button {
  padding: 1rem 2rem 1rem 2rem;
  border: none;
  background: #555;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
}
.toggle {
  position: absolute;
  top: 10%;
}

.show-overflow {
  overflow: visible;
}



/* BENEFITS SLIDER ELEMENTS */
.benefits{
    height: 50vh !important;
    display: flex !important;
    align-items: center;
    background-color: transparent;
    color: white;
    font-size: 3em;
}


.benefits .benefit_item{
    justify-content: center !important;
    padding:0px 0px !important;
    display:flex !important;
    align-items: center !important;
    
}

.benefits .benefit_item .box_inner > span{
    padding-right: 0.5em;
    display: flex;
    margin:0px;
}

.benefits img{
    width: 100px;
    height:100px;
    filter: invert(100%) !important;
}
    

.benefits .title{
   padding-top:15px;
}

.benefits .benefit_item .box_inner{
   opacity:0.5;
   height:100%;
   display:flex;
   justify-content: center;
    align-items: center;
   transition:0.5s ease; 
   flex-direction:column;
}

.benefits .benefit_item.active .box_inner{
   color:white;
   opacity:1;
}
/* BENEFITS SLIDER ELEMENTS */



.hero_title{
	opacity:0; 
	z-index: 2; 
	overflow:visible; 
	width: 100%; 
	position: relative; 
	pointer-events: none !important; 
	padding-bottom:50px;
	left:-5px;
}

.hero_title_originale{
	top: 0px;
    width: 100vw;
    display: flex;
    justify-content: center;
    transform: translate(0px, 0px);
    translate: none;
    rotate: none;
    scale: none;
    opacity: 0;
}

.hero_title_wrapper{
	height: 100vh;
	position: absolute;
	width: 100vw; 
	top:-100vh;
	z-index: 1;
}

.hero_title_wrapper_inner{
	position: relative;
    top: 43%;
    transform: translateY(-50%);
}

.hero_title.no-split {
  opacity: 1 !important;
}

.hero_title:not(.split-text) {
  opacity: 1;
}

.absolute{
	position: absolute !important;
	overflow:hidden !important; 
}

.hero_title.visible{
	opacity:1;
}



/* Optional aber oft hilfreich */
.hero_title {
	width:100%;
  /* overflow: hidden; */                /* verhindert, dass die Wörter beim Hereingleiten sichtbar sind */
  /* oder */ 
  /* clip-path: inset(0); */      /* manchmal besser als overflow bei manchen Browsern */
}

.hero_title.mega {
	font-size:var(--text-hero-mega) !important;
	width:100%;
  /* overflow: hidden; */                /* verhindert, dass die Wörter beim Hereingleiten sichtbar sind */
  /* oder */ 
  /* clip-path: inset(0); */      /* manchmal besser als overflow bei manchen Browsern */
}

.split-text .word {
  display: inline-block;           /* super wichtig */
  vertical-align: baseline;             /* oder baseline – verhindert komische Verschiebungen */
  will-change: transform, opacity; /* Performance + verhindert manchmal Glitches */
  transform-origin: center bottom;
  white-space: nowrap;
}

/* Wichtig für die Animation – jedes Zeichen muss positioniert werden können */
.split-text {
  perspective: 1000px;          /* gibt etwas Tiefen-Gefühl */
}

.split-text .char {
  display: inline-block;
  vertical-align: baseline;
  will-change: transform, opacity;
  transform-origin: center bottom;   /* schön beim Hochgleiten */
}


.split-text .lines {
  display: inline-block;
  vertical-align: baseline;
  will-change: transform, opacity;
  transform-origin: center bottom;   /* schön beim Hochgleiten */
}

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


.left-menu ul, li .space{
    padding-inline-start: 2rem;
}



.pin-spacer-mega_title_xxl_2{
	mix-blend-mode: overlay;
}



/* INAGE VIDEO SCROLL SEQUENCE */
.image-sequence {
    /* width:100%; */
    width:auto;
    /* height:100vh; */
    height:100%;
    display:block; 
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;          /* behält Ratio, fügt ggf. Balken hinzu */
    background: #fff;
}

.section-sequence {
    width:100%;
	height: 100vh; /* */
    position: relative;           /* wichtig für absolute Positionierung */
    overflow: hidden;             /* verhindert Scroll-Probleme beim Drehen */
}

.section-sequence canvas {
    background:black;
    height: 100vh;
    width:100vw;
}

.scroll-sequence-scroll-notice,
.pause-text {
	text-align:center;
	color:white;
	text-shadow:0px 0px 0px 10px rgba(0,0,0,0.5);
	position:absolute;
	top:50vh;
	left:50%;
	transform:translate(-50%, 0%);
	font-family:var(--font-display);
	filter:drop-shadow(0px 0px 20px black);
}

/* Mobile Hochformat – normal */
.image-sequence {
  /* transform: none; */
}

/*
.image-sequence.seq1 {
    transform: translate(0%, 0%) rotate(-90deg) scale(1.8412, 1.8412) !important;
    opacity: 1;
}
*/


/* Desktop / Querformat – drehen */

/*
@media (min-width: 1024px) and (orientation: landscape) {
  .image-sequence {
     
     transform: rotate(270deg) scale(1.414);
     transform-origin: center center; 
  }
  
  .section-sequence canvas {
	    top:10%;
	    inset:unset;
	}
}
*/

@media (orientation: landscape) {
  .image-sequence.rotated {
     width: 100vh;
     height: 100vw;
     top: 25%;
     position: absolute;
     left: 50%;
     transform: translate(-50%, -50%) rotate(270deg) scale(1);
  }
  
  .section-sequence canvas {
	    
	    inset:unset;
	}
}



/* LOADER BLOB 2026 */

.loader-wrapper {
  position: absolute;
  inset: 0;
  opacity:0;
  transition:0.3s ease;
  background: transparent;
  display: flex;
  place-items: center;
  z-index: -100;
  pointer-events: all;
  pointer-events: all;
  justify-content: center;
  align-items: center;
}

.loader-wrapper.visible {
  opacity:1;
  z-index:999;
}

#loader_svg {
  width: 500px;
  height: 500px;
  pointer-events: all;
}

#loader_svg svg {
  filter:
    blur(0.3px)
    drop-shadow(0 0 50px rgba(255,0,200,0.45));
}

.title.title-line{
	margin-bottom: 4px;
}


.scroll_panel .panel_caption{
	padding-bottom: 50px;
	width:100%;
	bottom:0px;
	z-index:9;
}



/* DESCTOP / TABLET 
@media (min-width: 769px) {
	.buttons_start_teaser {
	    flex-direction: row;
	}
}

*/
.scroll_panel .text,
.scroll_panel .content .text{
	font-size: var(--text-lg);
    font-weight: normal;
    line-height: 160%;
    color: var(--color-text);
    padding:30px;
}



@media (max-width: 991px)  and (orientation: landscape){   
	
	.rotated-video {
        inset: 0;
        width: 100%; /* Bildschrim höhe für Breite wegen Rotated! */
        transform: rotate(270deg) scale(1);
         height: 111dvw;  /* Bildschrim breite für höhe wegen Rotated! */
        object-fit: contain;
    }

}
/* ############################################## DESKTOP / TABLE ####################################### /*

/* ab Tablet/Desktop */
@media (min-width: 992px) {   
    .rotated-video {
        inset: 0;
        width: 100dvh; /* Bildschrim höhe für Breite wegen Rotated! */
        transform: rotate(270deg) scale(1);
         height: 111dvw;  /* Bildschrim breite für höhe wegen Rotated! */
        object-fit: contain;
    }
    
    
    .infinite_carousel .rotated-video {
        width: 75dvh; 
        height: auto;
    }
    
    
    .video-background-hero {
	    width: 100vh;
	    height: 100vw;
	}
	.video-background-hero{
	    transform: translate(-50%, -43%);
	}
	
	#hero .content .title{
		position:absolute;
		top:23%;
	    line-height: 168%;
	    font-size: var(--text-title-hero);
	}
  
  .mobile-break::before {
	    content: " ";
	    white-space: pre;
	}

  /* Falls du willst, dass es wirklich "block-like" umbricht */
  .mobile-break {
	    display: inline-block;
	    width: 1rem;
	    height: 0px;
	}
	
	#menu_head{
		height:125px;
	}
	
	#menu_head.top {
	    height:125px;
	}
	
	 #menu_head.nav-up {
	    height:90px;
	}
	
  #menu_head .menu_logo_wrapper {
	    position: absolute;
	    width: auto;
	    transform: translate(-50%, -50%);
	    left: 50%;
	    top: 35%;
	}
	
	
	#menu_head .menu_logo_wrapper #menu_logo {
	  	transform: scale(1.75);
	}
	
	
	#menu_head .sub-nav{
	    transition:0.5s ease;
		top: 25px;
	}
	
	
	
	
	#menu_head.nav-up .sub-nav{
		top: 0px;
		height: 30px;
	}
	
	
	#menu_head.nav-top{
		height: 70px;
	}
	
	
	 #menu_head .header_buttons_wrapper{
		width: 200px;
		padding-right: 20px;
	 }
	 
	 .page_sub_nav,
	 .page_sub_nav.nav-down{
	 	top: 140px;
	 }
	 
	 
	.page_sub_nav.nav-up{
		top: 55px;
	}
 
 	.page_sub_nav .sub_nav_link {
    	padding: 5px 25px;
	}
  
  
}



.loader{
	z-index: 1;
	border: 4px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    border-top: 4px solid #00b8b6;
    width: 40px;
    height: 40px;
    
    -webkit-animation: spin 0.8s linear infinite;
    animation: spin 0.8s linear infinite;
    position: relative;
    margin-bottom: 10px;
    transition:0.3s ease;
    opacity:0;
    display:block;
}

.loader.visible{
    opacity:1;
}

.canvas_tubes {
  will-change: transform;
  transform: translateZ(0); /* GPU Layer */
  pointer-events: none;     /* Kein Hit-Testing auf Canvas */
}


.collage_gallery_button_overlay{
	position: absolute;
    bottom: calc((100% / 3) * 0.618);
    left: 50%;
    transform: translate(-50%, 0);
    display: inline-flex;
    color: white !important;
    background-color: rgb(0 0 0 / 36%) !important;
    backdrop-filter: blur(10px);
    border-radius: 100px;
    text-transform: uppercase;
    transition: 0.5s ease;
}

.collage_gallery_button_overlay:hover{
	background-color: rgb(0 0 0) !important;
    color: #ffffff !important;
}



/* GLOW ANIMATION */ 

	/* CIRCLE FÜR LOADER */
	.glow_loader_wrapper{
		width: 100px;
	    height: 100px;
	    position: absolute;
	    border-radius: 100px;
	    overflow: visible;
	    display: block;
    }
	
	.glow_circle_front{
		display: block;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.19);
	    z-index: 999999;
	    position: relative;
	    border-radius: 100px;
	    border: 5px solid rgb(255 255 255 / 60%);
	    backdrop-filter: blur(30px);
	    mix-blend-mode: overlay;
	}
	


	@property --rotate_glow {
	  syntax: "<angle>";
	  initial-value: 132deg;
	  inherits: false;
	}
	
	:root {
	  --card-height: 65vh;
	  --card-width: calc(var(--card-height) / 1.5);
	}
	
	
	.glow {
	  background: #191c29;
	  padding: 3px;
	  position: absolute;
	  border-radius: 6px;
	  justify-content: center;
	  align-items: center;
	  text-align: center;
	  display: flex;
	  font-size: 1.5em;
	  color: rgb(88 199 250 / 0%);
	  cursor: pointer;
	  font-family: cursive;
	  opacity:0;
	  z-index:-1;
	  transition:1s ease;
	}
	
	.glow.visible{
	   opacity:1 !important;
	}
	
	
	.glow:hover {
	  color: rgb(88 199 250 / 100%);
	  transition: color 1s;
	}
	
	.glow:hover:before, .glow:hover:after {
	  animation: none;
	  opacity: 0;
	}
	
	
	.glow::before {
		content: "";
	    width: 97%;
	    top: 50%;
	    overflow: visible;
	    height: 97%;
	    border-radius: 8px;
	    background-image: linear-gradient(var(--rotate_glow), #5ddcff, #3c67e3 43%, #4e00c2);
	    background-image: linear-gradient(var(--rotate_glow), #ff00ea, #00d0ff 54%, #3000ff);
	    position: absolute;
	    z-index: -8;
	    filter: blur(25px);
	    animation: spin_glow 2.5s linear infinite;
	    transform: translate(-50%, -50%);
	    top: 50%;
	    left: 50%;
	}
	
	
	
	.glow::after {
	  	position: absolute;
	    content: "";
	    top: calc(var(--card-height) / 6);
	    left: 0;
	    overflow: visible;
	    right: 0;
	    z-index: -1;
	    height: 110%;
	    width: 110%;
	    inset: 0;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%, -50%) scale(0.9);
	    margin: 0 auto;
	    /* transform: scale(0.8); */
	    filter: blur(10px);
	    background-image: linear-gradient(var(--rotate_glow), #5ddcff, #3c67e3 43%, #4e00c2);
	    background-image: linear-gradient(var(--rotate_glow), #ff00ea, #00d0ff 54%, #3000ff);
	    opacity: 1;
	    transition: opacity .5s;
	    animation: spin_glow 2.5s linear infinite;
	}
	
	
	.glow.circle,
	.glow.circle::before,
	.glow.circle::after  {
		border-radius:100px;
	}
	
	
	@keyframes spin_glow {
	  0% {
	    --rotate_glow: 0deg;
	  }
	  100% {
	    --rotate_glow: 360deg;
	  }
	}

/* END GLOW ANIMATION */


/* ── LOADER ────────────────────────────────────────── */

#loading_layer_content_outer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 2;
}

#loading_layer_content_outer > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* ── TEXT ──────────────────────────────────────────── */
.loader_label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 8pt;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.loader_title {
    color: white;
    font-size: 13pt;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ── PROGRESS BAR ──────────────────────────────────── */
.loader_progress {
    width: 120px;
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: calc(10px * 1.618);
}

.loader_progress_bar {
    height: 100%;
    background: linear-gradient(90deg, #ff00ea, #00d0ff);
    border-radius: 100px;
    filter: drop-shadow(0 0 4px #00d0ff);
    animation: progress_shimmer 1.618s ease-in-out infinite;
}

@keyframes progress_shimmer {
    0%   { width: 0%;   transform: translateX(-100%); }
    50%  { width: 60%;  }
    100% { width: 100%; transform: translateX(100%); opacity: 0; }
}



/* ── LOADER ENDE ───────────────────────────────────── */



/* ── PAGINATION STYLE ───────────────────────────────────── */

.pagination_box{
    padding-bottom: 20px;
    display:flex;
    justify-content: center;
    font-family:var(--font-display);
}

.button_pagination{
	font-family:var(--font-display);
}


.arrow-icon {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pagination-next:hover .arrow-icon {
    transform: translateX(5px);
}

.pagination_link{
	display:flex;
	gap:10px;
}


/* ── PAGINATION ENDE ───────────────────────────────────── */


.call_me_title{
	font-size:var(--text-xl);
	padding-bottom:var(--space-3);
	line-height: calc(100% * var(--phi));
}



/* ── Collage Layer Liste ─────────────────── */
.layer_collage_list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 1.618);
    padding: calc(var(--base-size) * 1.618);
}

.collage_items_grid {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 1.618);
}

/* ── Item Card ─────────────────────────────── */
.collage_item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: rgba(0,0,0,0.1);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
    transition: border-color 0.382s ease;
}

.collage_item:hover {
    border-color: var(--color-brand);
}

/* ── Bild ────────────────────────────────── */
.collage_item_image_wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
    min-height: 200px;
}

.collage_item_img {
    object-fit: contain;
    transition: transform 0.618s ease;
}

.collage_item_img.portrait {
    height: 100%;
    width: auto;
    max-width: 100%;
}

.collage_item_img.landscape {
    width: 100%;
    height: auto;
}

.collage_item:hover .collage_item_img {
    transform: scale(1.03);
}

.collage_item_badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-family: var(--font-display);
    font-size: var(--base-size);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(0,0,0,0.682);
    backdrop-filter:blur(10px);
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    pointer-events: none;
}

/* ── Body ────────────────────────────────── */
.collage_item_body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--text-lg);
    gap: calc(var(--base-size) * 0.618);
}

.collage_item_title {
    font-family: var(--font-display);
    font-size: var(--base-size);
    letter-spacing: 0.04em;
    color: var(--color-text);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Meta ────────────────────────────────── */
.collage_item_meta {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 0.382);
}


.collage_item_size {
    font-size: var(--base-size);
    color: var(--color-text-muted);
    font-family: var(--font-display);
    letter-spacing: 0.06em;
}

.collage_item_price {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: white;
    letter-spacing: 0.04em;
}

/* ── Actions ─────────────────────────────── */
.collage_item_actions {
    display: flex;
    align-items: center;
    gap: calc(var(--base-size) * 0.618);
    flex-wrap: wrap;
}

.collage_item_btn_cart {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: var(--base-size);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: transparent;
    color: var(--color-text);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50px;
    padding: 8px 14px;
    text-decoration: none;
    transition: border-color 0.382s ease, color 0.382s ease;
    white-space: nowrap;
    flex: 1;
    justify-content: center;
}

.collage_item_btn_cart:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.collage_item_like {
    flex-shrink: 0;
}

/* ── Mobile ──────────────────────────────── */
@media (max-width: 500px) {
    .collage_item {
        grid-template-columns: 1fr;
    }

    .collage_item_image_wrap {
        min-height: 250px;
    }

    .collage_item_img.portrait {
        height: 250px;
        width: auto;
    }

    .collage_item_img.landscape {
        width: 100%;
        height: auto;
    }

    .collage_item_body {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.05);
    }
}


.hidden_fadeIn{
	opacity:0;
}


.feedback_layer{
	height:100vh;
}

.feedback_layer img{
    width: 100%;
    height: auto;
    max-height: 100vh;
    object-fit: cover;
    position: relative;
}


.feedback_content {
    position: absolute;
    padding: 20px;
    text-align: center;
    bottom: 0px;
    display: flex;
    width: 100%;
    background: #000000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.618) 0%, rgba(0, 0, 0, 0) 100%);
    flex-direction: column;
    align-content: center;
    align-items: center;
}


/* SOCIAL ICONS */

.icon_circle_social{
    display: inline-block;
    margin: 0 8px;
    transition:0.381s ease;
    transform: scale(1);
    backdrop-filter:blur(10px);
}

.icon_circle_social:hover {
    transform: scale(1.0618);
    
    background-color:rgba(0,0,0,0.168);
    border-radius:100px;
}




.icon_circle_social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--icon-size-large) + var(--base-size) * 2);
    height: calc(var(--icon-size-large) + var(--base-size) * 2);
    /* margin: 1rem; */
    padding: var(--base-size);
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15);
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: color 0.382s ease, border-color 0.382s ease;
}


footer .icon_circle_social a {
    width: calc(var(--icon-size) + var(--base-size) * 2);
    height: calc(var(--icon-size) + var(--base-size) * 2);
}

.icon_circle_social a svg {
    position: relative;
    width:var(--icon-size-large);
	height:var(--icon-size-large);
    z-index: 2;
    transition: transform calc(1.618 * 0.382s) cubic-bezier(0.175, 0.885, 0.32, 1.275),
                color 0.382s ease;
}


footer .icon_circle_social a svg {
    width:var(--icon-size);
	height:var(--icon-size);
}



/* Shine Sweep */
.icon_circle_social a::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.3),
        transparent
    );
    transform: skewX(-20deg) translateX(-100%);
    transition: none;
    z-index: 1;
}

.icon_circle_social a svg {
    position: relative;
    width:var(--icon-size-large);
	height:var(--icon-size-large);
    z-index: 2;
    transition: transform calc(1.618 * 0.382s) cubic-bezier(0.175, 0.885, 0.32, 1.275),
                color 0.382s ease;
}


footer .icon_circle_social a svg {
    width:var(--icon-size);
	height:var(--icon-size);
}

/* ── Hover ───────────────────────────── */

.icon_circle_social a:hover {
    color: #fff;
    border: 1px solid rgba(2, 208, 206, 0);
}



.icon_circle_social a:hover::after {
    animation: shineSweep 0.618s ease forwards;
}

.icon_circle_social a:hover svg {
    color: #fff;
    filter: drop-shadow(0 0 6px var(--color-brand));
}

/* ── Animations ──────────────────────── */


/* Shine Sweep */
.icon_circle_social a::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 61.8%;          /* ← dicker */
    height: 200%;
    background: linear-gradient(
        78.6deg,
        transparent,
        rgba(255,255,255,0.15) 38.2%,   /* ← φ⁻² */
    	rgba(255,255,255,0.25) 61.8%,   /* ← φ⁻¹ */
    	rgba(255,255,255,0.15) 78.6%,
        transparent
    );
    transform: skewX(-38.2deg) translateX(-100%);
    transition: none;
    z-index: 1;
}

@keyframes shineSweep {
    0%   { transform: skewX(-20deg) translateX(-100%); }
    100% { transform: skewX(-20deg) translateX(400%); }
}

.icon_circle_social a:hover::after {
    animation: shineSweep 1.618s ease-in-out forwards; /* ← φ timing */
}

/* SOCIAL ICONS ENDE */