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

html {
  scroll-behavior: smooth; 
}

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



/*
html  { scroll-behavior: smooth; } */

body {
  background: var(--bg); 
  color:#fff; 
  font-family:var(--font-primary); 
  overflow-x:hidden;
  font-family: var(--font-primary);
  background-color: var(--color-primary);
  color: var(--color-text);
  max-width:100vw;
  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;
}


.app_bar_padding_top,
.app-bar-padding-top{
	/* padding-top:var(--navigationHeight); */
	/*padding-top:0px !important;*/
}

.signature_scroll_wrapper{
    height:var(--signature_scroll_wrapper_height);
}

.signature_scroll_wrapper_inner{
    height:var(--signature_scroll_wrapper_height);
    position:relative; z-index: 9999999;
}


/* ── STICKY WRAPPER (ScrollLite macht das automatisch) ── */
.hero-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}


.content a{
	color: var(--link-color);
}

.content a:visited{
	color: var(--link-color-visited);
}


/* ── MASK CONTAINER ── */
/* ScrollLite setzt automatisch: position:absolute inset:0
   background:#000 mix-blend-mode:multiply overflow:hidden */
.mask-layer {
  /* Diese Klasse ist nur für deine CSS-Übersicht —
     ScrollLite ergänzt alles Technische per JS */
}


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

.title_product_type{
    font-size:14pt;
    text-align:center;
}


.caption .title a h2.truncate,
.truncate{
    padding-bottom: 0px;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    hyphens: auto;
    white-space: normal;
    line-height: 2;
    overflow: hidden;
    margin-bottom: var(--space-1);
}


/* ── SCROLL HINT ── */
.scroll-hint {
  position: absolute; 
  bottom: 5vh;          /* Fallback */
  bottom: 5svh;         /* Modern — überschreibt */ 
  left: 50%; 
  transform: translateX(-50%);
  z-index: 4; font-family: var(--font-mono);
  font-size: 1.2rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.68);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events:none !important;
}

.scroll-hint-line {
  width:1px; height:44px;
  background: linear-gradient(var(--gold-soft),transparent);
  animation: scroll_pulse 2s ease-in-out infinite;
}
@keyframes scroll_pulse { 0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top} 50%{transform:scaleY(1);opacity:1;transform-origin:top} }

@media(orientation:portrait){
    .scroll-hint {
      bottom: 15vh;          /* Fallback */
      bottom: 15svh;         /* Modern — überschreibt */ 
    }
}

/* 
.scroll-cue{
  position:absolute; left:50%; bottom:3.2vh; transform:translateX(-50%);
  z-index:4; font-size:.68rem; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(239,233,223,.5); display:flex; flex-direction:column; align-items:center; gap:.8rem;
}
.scroll-cue span{ width:1px; height:42px; background:linear-gradient(var(--gold-soft),transparent); animation:cue 2.4s ease-in-out infinite; }
@keyframes cue{ 0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top} 50%{transform:scaleY(1);opacity:1;transform-origin:top} }
*/ 


/* ── AFTER HERO ── */
.after-hero {
  background: transparent; min-height: 100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:80px 48px; text-align:center;
}
.after-hero h2 {
  font-family: var(--font-display);
  font-size: clamp(32px,5vw,64px); color:#fff;
}
.after-hero p {
  font-size: 16px; line-height:1.7;
  color: rgba(255,255,255,.45); max-width:480px;
}


#signature_wrapper_outer{
    position: absolute;
    max-height:100vh;
    height:100%;
    width:100%;
}


#signature-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    overflow: visible;
    
    /* Größe per CSS — kein JS nötig, immer korrekt */
    width: 80vw;
    height: 40vh;
}

@media (max-width: 980px) {
    #signature-svg {
        width: 95vw;
        height: 50vh;
    }
}

/************** MASK */


.mask-track {
  height: 500vh;
  position: relative;
  /* KEIN overflow — würde sticky brechen */
}

.mask-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow:hidden;
  /* Nur diese drei Properties — sonst nichts */
}

/* Layer 1: Echtes Foto — liegt HINTER dem Mask-Container */
.photo-layer {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden;
}
.photo-layer picture,
.photo-layer img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top; /* Portrait: Gesicht oben */
  display: block;
}

/*
  Layer 2: Der Apple-Trick.

  background: #000  →  schwarz außerhalb der Buchstaben
  mix-blend-mode: multiply:
    schwarz (0,0,0) × Foto = (0,0,0) = schwarz  → Foto versteckt
    weiß  (1,1,1) × Foto = Foto                 → Foto sichtbar

  overflow: hidden  →  clippt den skalierten Text
    ABER: bricht sticky NICHT weil .mask-sticky der sticky-Parent ist,
    nicht .mask-container. overflow:hidden nur auf Kinder = safe.
*/
.mask-container {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: #fff;             /* schwarz = multiply → versteckt Foto */
  mix-blend-mode: lighten;     /* der eigentliche Trick */
  overflow: hidden;             /* clippt den Text beim Skalieren — ok hier */
  pointer-events: none;
  will-change: transform;     /* ← GPU-Layer für den Container */
  transform-origin: 50% 50%;  /* wird per JS auf Zielbuchstaben gesetzt */
}

/* Der Text: WEISS. Weiß × Foto = Foto sichtbar. */



.mask-text {
  flex-shrink: 0;              /* wichtig — sonst wird Text beim Scale geclippt */
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(90px, 17vw, 210px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .89;
  color: #000;                  /* WEISS — das ist alles */
  user-select: none;
  transform-origin: center center;
   /* will-change: transform;       will-change auf dem animierten Element = safe */
}

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



/* Caption die am Ende erscheint */
.mask-caption {
  position: absolute; bottom: 40px; left: 0; right: 0; z-index: 3;
  text-align: center;
  font-family: var(--mono); font-size: 11px;
  color: rgba(240,237,230,1);
  opacity: 0;
}

.ml-bar {
  position: absolute; bottom: 0; left: 0;
  height: 1px; width: 0%; background: var(--accent); z-index: 10;
}



.hidden{
	display:none;
}


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


.logo-mask-layer{
  height:100vh;
  position: fixed;
  inset: 0;
  /* background: #000;        /* SCHWARZ */
  mix-blend-mode: overlay; /* WICHTIG */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity:0;
}

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


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


/* NAVIGATION */



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


#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%; */
	padding-left:10px;
    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,
#desk-nav-wrap .link_icon{
	position:relative;
	display:flex;
	justify-content: center;
    align-items: center;
}

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

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

#menu_head .like_icon_anz,
#desk-nav-wrap .like_icon_anz{
    color: black !important;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    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) translateX(-50%); }
    25%  { transform: translateY(80px) translateX(-50%) scale(1.3); }
    60%  { transform: translateY(75px) translateX(-50%) scale(1.15); }
    80%  { transform: translateY(80px) translateX(-50%) scale(1.2); }
    100% { transform: translateY(0) translateX(-50%) scale(1); }
}

/* wird nicht genutzt */
#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,
#desk-nav-wrap .like_icon.liked {
    animation: heartbeat 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

#menu_head .like_icon.liked::after,
#desk-nav-wrap .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,
#desk-nav-wrap .like_icon.liked svg path {
    fill: #df0404;
    transition: fill 0.3s ease;
}

#menu_head .like_icon.liked .like_icon_anz,
#desk-nav-wrap .like_icon.liked .like_icon_anz  {
    color: white !important;
}

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

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

#menu_head .like_icon.liked .like_icon_anz,
#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;
}



/* ******* 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 clamp(15px, 4vw, 20px);
    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;
}

@media (min-width:790px){
	.page_sub_nav .sub_nav_link {
	    padding: 0px 24px;
	}
}

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

/* -------------------------------------------- */


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


.left-menu {
  display:none;
}

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


/* VIDEO HERO */



.hero-video-wrap{
	display: flex;
    align-items: center;
    height: 100vh;
    
    position: absolute; inset: 0; z-index: 0;
}

/*
.hero-video-wrap video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
*/


.hero-video-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.5) 100%);
}




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

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


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

}


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


/* BUTTON */

.button {
    position:relative;
    display: inline-flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 25px;
    background-color: var(--brand-color);
    width: auto;
    padding: var(--button-padding);
    font-size: 16pt;
    color: var(--button-text-color);
    text-decoration: none !important;
    cursor: pointer;
    font-weight: normal;
    white-space: nowrap;
    -webkit-box-shadow: 0px 3px 19px -10px rgba(0,0,0,0.66);
    -moz-box-shadow: 0px 3px 19px -10px rgba(0,0,0,0.66);
    box-shadow: 0px 3px 19px -10px rgba(0,0,0,0.66);
    border-radius:100px;
    border: none;
    margin: 0 auto;
    font-family: var(--font-display);
    font-size: 1.5rem;
}

.button:hover {
	background-color: var(--button-color-hover);
	-webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    /* text-shadow: 0px 1px 4px rgba(0,0,0,0.3); */
}

.button:active {
	background-color: var(--button_color_active);
    -webkit-box-shadow: inset 0px 1px 7px -3px rgba(0,0,0,0.66);
    -moz-box-shadow: inset 0px 1px 7px -3px rgba(0,0,0,0.66);
    box-shadow: inset 0px 1px 7px -3px rgba(0,0,0,0.66);
}


.parallax {
    /* transition: transform 0.3s ease-out; */
}


/* 
.parallax {
  position: absolute;
  top:-125px;
}


.parallax img{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: calc(100% + 250px);
  object-fit: cover;
  object-position: center center;
  will-change: transform;
  transform: translateY(0) translateZ(0);
}

.parallax img.ken-burns-active{
    top: 50%;
    left: 50%;
}
*/



/* ── START TITEL ── */
.hero-title-start {
    position: absolute;
    top: -10%;
    display: flex;
    height: 100dvh;
    z-index: 3;
    text-align: center;
    width: 100%;
    opacity: 1;
    transform: translateY(0px) scale(1);
    flex-direction: column;
    justify-content: center;
}
.hero-title-start .title-top {
    padding-left:1rem;
}

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

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

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




/* */
.parallax img{
    position: absolute;
    /* transition:all 1s ease; */
    width: 100%;
    height:auto;
    object-position: center top;
}

/* Zentrierte img Für breite Parallax Bilder damit die 100% höhe ausfüllen */
.parallax.full_height_center_absolute img{
    position: absolute;
    width: auto;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}



.hero .bg-wrapper img,
.page-teaser .bg-wrapper img{
	height: 100%;
    width: 100%;
    object-fit: cover;
    position: relative;
    overflow: hidden;
    object-position: center 25%;
}


.hero.full-height .bg-wrapper img,
.page-teaser.full-height .bg-wrapper img{
   object-position: center center;
}

/* */

@media(orientation:portrait){

    .parallax img{
        position: absolute;
        /* transition:all 1s ease;
       /* width: auto;
        height:100%; */
        object-position: center top;
    }
    
    /*
    .bg-wrapper img{
    	width:auto;
    	height:100%;
    	position:absolute;
    	left:50%;
    	transform:translateX(-50%);
    }
    */
    
    .hero_image_section,
    .hero_image_section .bg-wrapper.parallax img{
        height: auto;
        width: 100%;
        object-fit: cover;
        max-height:calc(100dvh - var(--navHeight))
    }
    
    
    
    
    .hero_image_section .bg-wrapper.parallax.full_height_center_absolute img{
        height: 100%;
        width: auto;
        object-fit: cover;
        max-height:calc(100dvh - var(--navHeight));
        left: 50%;
        transform: translateX(-50%);
    }
    
    
    .hero_image_section{
        height: 100dvh;
    }
    
    

}

.bottom_no_padding{
    padding-bottom:0px !important;
}

/*
.parallax {
    position: absolute;
    transition:all 1s ease;
    width: 100%;
}
*/

/* */

.visible_on_load,
.splide.visible_on_load{
    visibility: visible !important;
}


.content-section.page_title{
    padding: 1rem 2rem;
}

.content-section.page_title h1.title,
.content-section.page_title h1.title.title_mega_small {
    padding: 0px;
}

.content-section.page_title .content-section__body {
   
    padding-top: 1.5rem;
}






.bunt {
    background: black; /* not working, let's see some red */

    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left top,  #ff2c2c , #feff00, #ee63fd, cyan, #f88c8c, violet); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left top,  #ff2c2c , #feff00, #ee63fd, cyan, #f88c8c, violet); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left top,  #ff2c2c , #feff00, #ee63fd, cyan, #f88c8c, violet); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to left top,  #ff2c2c , #feff00, #ee63fd, cyan, #f88c8c, violet); /* Standard syntax (must be last) */

    background: -webkit-linear-gradient(left top, #ff2c2c , #feff00, #ee63fd, cyan, #f88c8c, violet);

}
.sw, .schwarz-weiss {

    border: 0px solid rgba(255,255,255,0.8);

	 /* border:0px !important;*/
    background: black; /* not working, let's see some red */
    background: -moz-linear-gradient( top ,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 49%,
        rgba(255, 255, 255, 1) 51%,
        rgba(255, 255, 255, 1) 100%);
    background: -webkit-gradient(linear,  left top,  right bottom,
        color-stop(0%, rgba(0, 0, 0, 1)),
        color-stop(49%, rgba(0, 0, 0, 1)),
        color-stop(51%, rgba(255, 255, 255, 1)),
        color-stop(100%, rgba(255, 255, 255, 1)));
}
.gold {
    background: white; /* not working, let's see some red */
    background: -moz-linear-gradient( top ,
        rgba(255, 255, 0, 1) 0%,
        rgba(255, 255, 0, 1) 4%,
        rgba(251, 252, 0, 1) 10%,
        rgba(251, 252, 0, 1) 20%,
        rgba(255, 202, 0, 1) 40%,
        rgba(255, 252, 0, 1) 55%,
        rgba(255, 252, 0, 1) 60%,
        rgba(252, 252, 107, 1) 70%,
        rgba(252, 252, 107, 1) 85%,
        rgba(255, 196, 0, 1) 100%);
    background: -webkit-gradient(linear,  left top,  right bottom,
        color-stop(0%, rgba(255, 255, 0, 1)),
        color-stop(4%, rgba(255, 255, 0, 1)),
        color-stop(10%, rgba(251, 252, 0, 1)),
        color-stop(20%, rgba(251, 252, 0, 1)),
        color-stop(40%, rgba(255, 202, 0, 1)),
        color-stop(55%, rgba(255, 252, 0, 1)),
        color-stop(60%, rgba(255, 252, 0, 1)),
        color-stop(70%, rgba(252, 252, 107, 1)),
        color-stop(85%, rgba(252, 252, 107, 1)),
        color-stop(100%, rgba(255, 196, 0, 1)));
}

.silber {
    background: white; /* not working, let's see some red */
    background: -moz-linear-gradient( top ,
        rgba(172, 172, 172, 1) 10%,
        rgba(255, 255, 255, 1) 15%,
        rgba(140, 140, 140, 0.8) 40%,
        rgba(140, 140, 140, 0.6) 50%,
        rgba(228, 228, 228, 1) 66%,
        rgba(172, 172, 172, 1) 100%);
    background: -webkit-gradient(linear,  left top,  right bottom,
        color-stop(10%, rgba(172, 172, 172, 1)),
        color-stop(15%, rgba(255, 255, 255, 1)),
        color-stop(40%, rgba(140, 140, 140, 0.8)),
        color-stop(50%, rgba(140, 140, 140, 0.6)),
        color-stop(66%, rgba(228, 228, 228, 1)),
        color-stop(100%, rgba(172, 172, 172, 1)));
}

/* TEASER STYLE */

.page-teaser {
    position: relative;
    width: 100%;
    max-height: 66vh;
    overflow: hidden;
    background: #111;
    display: flex;
    align-items: flex-end;
    min-height: 50vh;
}


body.has-breadcrumb .page-teaser {
    padding-top:var(--dn-bc-h);
}


.page-teaser.full-height {
    height: calc(100svh - var(--navHeight));
    max-height: 100svh;
}


.page-teaser.bg-left {
    align-items: flex-end;
    justify-content: flex-end;
}



    
.hero.page-teaser{
    margin-bottom: 0rem;
}

/*
.hero.page-teaser .bg-wrapper img{
    top:0%;
    height: auto;
    width: 100%;
}
*/

.hero.page-teaser .bg-wrapper,
.page-teaser .bg-wrapper{
    position: absolute;
    inset: 0;
    overflow: visible;
}

.page-teaser.bg-left .bg-wrapper{
    left:-10%;
}

.page-teaser__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(0,0,0,.78) 0%, rgba(0,0,0,.0) 50%, transparent 100%),
        linear-gradient(to top,   rgba(0,0,0,.65) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.page-teaser.align-center .page-teaser__overlay {
    background:
        linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.3) 100%, transparent 100%);
}




.page-teaser.bg-right .page-teaser__overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 1.78) 25%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}


.page-teaser.bg-left .page-teaser__overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 1.78) 33%, rgba(0, 0, 0, -0.7) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}



.hero.page-teaser .page-teaser__content {
    max-width: 100vw;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}


.hero.page-teaser.align-center .page-teaser__content {
    align-items: center;
}

.hero.page-teaser.align-bottom .page-teaser__content {
    justify-content: flex-end;
}


/* */
.hero.page-teaser.align-center .page-teaser__h1{
    text-align:center;
}



.hero.page-teaser.full-height .page-teaser__content {
    height: auto;
    gap: 2rem;
    justify-content: space-between;
}

    
.page-teaser .page-teaser__content {
    position: relative;
    z-index: 2;
    padding: 1.5rem 1.5rem;
    width:100%;
    max-width:100vw;
}


.hero .page-teaser__content-wrap  {
    gap: 0rem;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    padding-bottom: 2rem;
}


.hero.page-teaser__content {
    position: relative;
    z-index: 2;
    padding: 1.5rem 1.5rem;
    width:100%;
    max-width:50vw;
}


.page-teaser__content-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.hero.page-teaser.align-center,
.page-teaser.align-center .page-teaser__content,
.page-teaser.align-center .page-teaser__usp-wrapper {
    align-items: center !important;
}

.page-teaser.align-center .page-teaser__usp-wrapper {
    align-items: center !important;
}



.page-teaser.align-center .page-teaser__usp-wrapper {
    justify-content: center !important;
}


.page-teaser__h1 {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(33px, 10vw, 85px);
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -.01em;
    text-transform: uppercase;
    margin: 0 0 20px;
    max-width: 100vw;
    line-height: 120%;
    text-align:left;
    line-height: 1 !important;
}
.page-teaser__h2 {
    font-family: var(--font-display, sans-serif);
    font-size: var(--text-xl);
    font-weight: 300;
    color: white;
    line-height: 1.5;
    margin: 0;
    max-width: 800px;
    opacity: 1;
    transform: translateY(12px);
    transition: opacity .6s .35s, transform .6s .35s;
}

.page-teaser__description{
    line-height:160%;
    font-size: var(--text-base);
    max-width:680px;
}

.page-teaser.align-center .page-teaser__description{
    text-align:center;
}

.page-teaser__eyebrow {
    font-size: var(--text-lg);
    color:var(--gold);
    padding-bottom: 0.5rem;
}

.page-teaser.align-center .page-teaser__eyebrow {
    text-align:center;
}


.page-teaser.is-visible .page-teaser__h1,
.page-teaser.is-visible .page-teaser__h2 {
    opacity: 1;
    transform: translateY(0);
}
.page-teaser-btn__wrapper {
    position: absolute;
    top: 28px;
    right: 28px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
@media (max-width: 768px) {
    .page-teaser { height: clamp(260px, 60vh, 650px); }
    
    .hero.page-teaser { height: clamp(300px, 22vh, 638px); }
    
    .hero.page-teaser.full-height,
    .page-teaser.full-height 
    { 
        height: clamp(100svh - var(--navHeight)); 
    }
    
    
    .page-teaser__overlay {
        background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
    }
    
    .page-teaser__content {
        max-width:100vw;
        width:100vw;
    }
    
}


.page-teaser__usp-wrapper{
    padding-top: 1.5rem;
    width: 100%;
    margin: 0 auto;
    max-width: 600px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    
}








@media(orientation:portrait) {

    /*
    .page-teaser .bg-wrapper img{ 
        top:0%; 
        left:0;
        width:100%;
        transform:none;
    }
    */
    
    .hero.page-teaser .page-teaser__content,
    .page-teaser .page-teaser__content{
       height: 100%;
        max-width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    
    /*
    .hero.page-teaser .bg-wrapper img{
       top:0%;
       height:100%;
       width:auto;
    }
    
    
    .page-teaser .bg-wrapper img{
        top: 0% ;
        width: auto;
        height: 100%;
        left: 50% ;
        transform: translateX(-50%) ;
    }
    */
    
    
    .page-teaser{
        display:flex;
        justify-content: flex-start;
    }
    
    .page-teaser .page-teaser__overlay{
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        pointer-events: none;
        z-index: 1;
    }
    
    .page-teaser__content {
        width:100%;
        max-width:100vw;
    }

}



.page-teaser__button-wrapper{
    display:flex;
    gap: 2rem;
}

.page-teaser__button-wrapper .button{
    margin:0;
    font-size:var(--text-base)
}

.page-teaser__usp{
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
}


.usp_icon svg.icon-print{
    top: -3px;
    position: relative;
}

.usp_icon svg.icon-signature{
    top: -5px;
    position: relative;
    width: 70px;
    height: 70px;
    transform: scale(1.3);
}

.page-teaser__usp-icon{
    display: inline-flex;
}

.page-teaser__usp-icon svg{
    width:48px;
    height:48px;
}

.page-teaser__usp-text{
    font-size:var(--text-s);
    padding-left:5px;
    width: 100px;
    text-align:center;
}



@media (min-width: 768px) {
    .page-teaser__usp-text{
        font-size:var(--text-s);
    }
}

@media (min-width: 1024px) {
    
    .page-teaser{
        height: 66vh;
    }
    
    
    .page-teaser__h1 {
        text-align:left;
    }

    
    .page-teaser.full-height{
        height: calc(100svh - var(--navHeight));
    }
    
    
    .page-teaser .page-teaser__content {
        position: relative;
        z-index: 2;
        padding: 1.5rem 1.5rem;
        width: 100%;
        max-width: 100vw;
    }
    
    
    .page-teaser .page-teaser__content,
    .page-teaser.bg-right .page-teaser__content ,
    .page-teaser.bg-left .page-teaser__content {
        padding: 1.5rem 2.5rem;
        margin:unset;
        width:100%;
        max-width:36vw;
    }
    
    
    
    .page-teaser__usp-text{
        text-align:left;
    }
}


.hero.page-teaser .bg-wrapper.released img{
   top:0%;
}

.hero.page-teaser .bg-wrapper.released.landscape img{
   width:100%;
}



.hero.page-teaser .bg-wrapper.released.portrait img{
   width:100%;
   height:auto;
}


.hero.page-teaser .bg-wrapper.released img.absolute.cover{
   position:absolute;
   object-fit:cover;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
   width:100%;
   height:100%;
}

.hero.page-teaser {
    min-height: unset;
    height:auto;
}



.hero.page-teaser.full-height{
    min-height: unset;
    height:calc(100svh - var(--navHeight));
}


/* USP BALLER */

.usp_banner{
    display: grid;
    gap: 20px;
    padding-top: 1.5rem;
    width: 100%;
    max-width:1300px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 auto;
    justify-items: center;
}

.usp_box{
    display:flex;
    gap: 1.5rem;
    flex-direction: column;
    max-width: 250px;
    align-items: center;
}

.usp_icon_wrapper{
    
}

.usp_icon{
    background-color: #c9a54e;
    border-radius: 100px;
    height: 70px;
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.usp_icon svg{
    fill:black;
    width:48px;
    height:48px;
}

.usp_text_wrapper{
    display: flex;
    font-size: var(--text-s);
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.usp_title{
    font-weight:bold;
    text-transform:uppercase;
    padding-bottom:10px;
    color: #c9a64f;
    text-align:center;
}

.usp_text{
    line-height:150%;
    opacity:0.85;
    text-align:center;
}

@media (min-width: 967px) {
   .usp_box {
        flex-direction: row;
    }
}

@media (min-width: 968px) {

    .usp_banner{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media(orientation:portrait){
    
    
    
    
    

}
svg.icon-print{
    top: -3px;
    position: relative;
}



@media (min-width: 1024px) {
   .usp_banner{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1300px) {
   .usp_box {
        flex-direction: row;
    }
}
    
#pagination_progress{
    overflow: hidden;
    border-radius: 5px;
    display: flex;
    margin-top: 15px;
    margin: 15px auto;
    width: 90%;
    height: 5px;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

#pagination_progress .bar{
    float: left;
    width: 20%;
    height: 5px;
    background-color: #00b8b6;
}    





.discount_timer_box{
    font-weight: bold;
    display: flex;
    border-radius: 10px;
    border: 10p;
    background-color: transparent;
    margin: 15px 0;
    padding: 10px;
    padding-top: 20px;
    width: 100%;
    color: #ffffff;
    text-align: center;
    flex-direction: column;
}

.discount_timer_box svg{
    fill: #ce0000;
}

.discount_timer_box .countdown{
    background-color: transparent;
    color: #ce0000;
    font-size: 20pt;
    margin-top: 1rem;
    border-radius: 50px;
    display: inline-block;
    width: auto;
}


/* TABLE */

.table-modern {
      width: 100%;
      font-family: system-ui, -apple-system, BlinkMacOSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #f0f0f5;
      font-size: var(--text-base-s);
      line-height: 1.55;
      border-collapse: separate;
      border-spacing: 0 0.5em;
}

.table-modern tr {
      background: rgba(30, 30, 45, 0.45);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,0.25);
      transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.table-modern tr:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

.table-modern td {
      padding: 1.1em 1.4em;
      border: none;
}

.table-modern .label {
      width: 110px;
      font-weight: 500;
      color: #bbbbcc;
      text-align: right;
      white-space: nowrap;
      padding-right: 1.6em;
}

.table-modern .value {
      color: #ffffff;
      font-weight: 400;
}

.table-modern .highlight .value {
      color: #d0c0ff;
      font-weight: 600;
}

.table-modern .price-row .value {
      font-size: 1.28rem;
      font-weight: 700;
      background: linear-gradient(90deg, #b794f4, #9f7aea);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
}

/* CONTENT SPLIT  */

.content-split{
    display:flex;
    flex-direction: column-reverse;
}



.content-split.text-right{
    display:flex;
    flex-direction: column-reverse;
}

.content-split.text-left{
    display:flex;
    flex-direction: column;        
}


.content-split .content-text{
    width: 100vw;
    padding: 2rem;
    height: auto;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}

.content-split .content-text.center{
    justify-content: center;
}




.content-split .content-text .title{
    padding-bottom:2rem;
}

.content-split .content-text .text{
    text-align:center;
    max-width: 600px;
    padding:0px;
    font-size: var(--text-base);
}

.content-split .content-text .text.align-left,
.content-split .content-text .text.align-left .title{
    text-align:left;
}

.content-split .content-text .text.align-left{
    text-align:left;
    padding-left: 0rem;
}





.content-split .content-text .eyebrow{
    font-size:var(--text-base);
    text-transform:uppercase;
    padding-bottom: 1.5rem;
}

.content-split .content-text p{
    padding-bottom:1.5rem;
}

.content-split .image-wrapper{
    position:relative;
    width:100%;
    height: auto;
    height: 70vh;
    
}

.content-split .image-inner{
    height:100%;
}


.content-split .image-inner span.label{
    position: absolute;
    display: block;
    font-size: var(--text-base);
    padding: 0.5rem 0;
    bottom: 0px;
    margin: auto;
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
}
    

.content-split .image-inner img{
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
    object-fit: cover;
}


.content-split .image-inner img.contain{
    object-fit: contain;
}

.content-split .image-inner img.full-height{
    height:100%;
    width:auto;
}

.content-split .page-teaser__usp-wrapper{
    display: flex;
    gap: 20px;
    padding-top: 1.5rem;
    flex-wrap: wrap;
    justify-content: space-around;
    width: auto;
    flex-direction:row;
}

.content-split .page-teaser__usp{
    display: flex;
    gap: 20px;
    padding-top: 1.5rem;
    /* flex-wrap: wrap; */
    justify-content: space-around;
    width: auto;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.content-split .page-teaser__usp .page-teaser__usp-text{
    max-width:150px;
    text-align:center;
}




.content-split .page-teaser__usp-icon svg {
    width: 48px;
    height: 48px;
}





@media(min-width:1024px){
    .content-split{
        flex-direction: row;
    }
    
    .content-split .content-text{
        width: 50vw;
    }
    
    .content-split.text-right{
        flex-direction: row !important;
    }
    
    .content-split.text-left{     
        flex-direction: row-reverse !important;
    }
    
    .content-split .image-wrapper{
        width:50vw;
    }
    
    .content-split .image-wrapper{
        height: auto;
    }
    
    
    .content-split .image-inner img {
        height:100%;
        object-position: bottom;
    }
    
    
    .content-split .image-inner img.contain {
        height:auto;
        object-position: bottom;
    }
    
    
    

}




/* SPLIDE STYLES */

.splide-detail-carousel{
    height:auto;
}

@media(min-width:1024px){
   .splide-detail-carousel{
        height: calc(100dvh - var(--navHeight));
    }
    
    .splide-detail-carousel .splide__track{
        height:100%;
    }
    
    .splide-detail-carousel .content-split{
        height:100%;
    }

}


/* Mobile Anpassung */
@media (max-width: 480px) {
	
	#detail_wrapper .content{
		padding: 15px;
	}
	
	
	.table-modern {
	  border-spacing: 0 0.7rem;
	}
	.table-modern td {
	  /* display: block; */
	  padding: 0.9rem 1.2rem;
	}
	.table-modern .label {
	  width: auto;
	  text-align: left;
	  color: #cccccc;
	  font-size: var(--text-base-s);
	  padding-bottom: 0.3rem;
	}
	.table-modern .price-row .value {
	  font-size: 1.38rem;
	}
}
    
    
.table-modern tr:first-child,
.table-modern tr:last-child {
  background: rgba(30, 30, 45, 0.45);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

/* Erste und letzte Zeile ohne zusätzlichen vertikalen Abstand nach außen */
.table-modern tr:first-child {
  margin-top: 0;
}

.table-modern tr:last-child {
  margin-bottom: 0;
}


/* CHAT ICON */

.kb-star {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform, opacity;
}

@keyframes kb-spark {
    0%, 100% { transform: rotate(0deg) scale(.75); opacity: .55; }
    50%      { transform: rotate(90deg) scale(1);  opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    .kb-star {
        animation: kb-spark 3.4s ease-in-out infinite;
    }

    .kb-star--sm {
        animation-duration: 2.8s;
        animation-delay: .75s;
    }
}


.section_padding{
    padding:3rem 0;
}




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




#art.hide_shadow{
    box-shadow: 0 0 0 rgba(0,0,0,0) !important;
}

.art_shadow_short{
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
0 2px 2px rgba(0,0,0,0.11),
0 4px 4px rgba(0,0,0,0.11),
0 6px 8px rgba(0,0,0,0.11),
0 8px 16px rgba(0,0,0,0.11);
}

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

.art_shadow_long:hover{
box-shadow: 0 2px 1px rgba(0,0,0,0.04),
0 4px 12px rgba(0,0,0,0.04),
0 8px 14px rgba(0,0,0,0.04),
0 16px 18px rgba(0,0,0,0.04),
0 32px 26px rgba(0,0,0,0.04);
}

.art_shadow_long_light{
box-shadow: 0 2px 1px rgba(0,0,0,0.03),
0 4px 2px rgba(0,0,0,0.03),
0 8px 4px rgba(0,0,0,0.03),
0 16px 8px rgba(0,0,0,0.03),
0 32px 16px rgba(0,0,0,0.03);
}

.art_shadow_long_right{
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),
32px 15px 16px rgba(0,0,0,0.09),
16px 8px 16px rgba(0,0,0,0.09),
4px 2px 10px rgba(0,0,0,0.09),
5px 0px 8px rgba(0,0,0,0.09);
}

/* Hover-Version rechts – halbe Opacity */
.art_shadow_long_right_hover,
.art_shadow_long_right:hover {
  box-shadow:
    0 2px 1px rgba(0,0,0,0.045),
    0 4px 2px rgba(0,0,0,0.045),
    0 8px 4px rgba(0,0,0,0.045),
    0 16px 8px rgba(0,0,0,0.045),
    0 32px 16px rgba(0,0,0,0.045),
    32px 15px 16px rgba(0,0,0,0.045),
    16px 8px 16px rgba(0,0,0,0.045),
    4px 2px 10px rgba(0,0,0,0.045),
    5px 0px 8px rgba(0,0,0,0.045);
  transition: box-shadow 0.35s ease; /* smooth Übergang */
}

.art_shadow_long_left {
  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),
    -32px 15px 16px rgba(0,0,0,0.09),   /* ← gespiegelt */
    -16px 8px 16px rgba(0,0,0,0.09),     /* ← gespiegelt */
    -4px 2px 10px rgba(0,0,0,0.09),      /* ← gespiegelt */
    -5px 0px 8px rgba(0,0,0,0.09);       /* ← gespiegelt */
}

/* Hover-Version links – halbe Opacity */

.art_shadow_long_left_hover,
.art_shadow_long_left:hover {
  box-shadow:
    0 2px 1px rgba(0,0,0,0.045),
    0 4px 2px rgba(0,0,0,0.045),
    0 8px 4px rgba(0,0,0,0.045),
    0 16px 8px rgba(0,0,0,0.045),
    0 32px 16px rgba(0,0,0,0.045),
    -32px 15px 16px rgba(0,0,0,0.045),
    -16px 8px 16px rgba(0,0,0,0.045),
    -4px 2px 10px rgba(0,0,0,0.045),
    -5px 0px 8px rgba(0,0,0,0.045);
  transition: box-shadow 0.35s ease;
}



#page_loader_circle{
    position:fixed !important;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    z-index: 999999 !important;
}

.page_loader_circle_spinner{
    -webkit-animation: spin 0.8s linear infinite !important;
    animation: spin 0.8s linear infinite !important;
    border: 4px solid #efefef;
    border-radius: 50%;
    border-top: 4px solid #00b8b6;
    width: 100px;
    height: 100px;
}



/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes spin_centered {
  0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); }
  100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spin_centered {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}


/* INPUT UND  TEXTFIELDS */



input[type=radio] {
    border: 0px;
    width: 2rem;
    height: 2rem;
}
input[type=checkbox] {
    border: 0px;
    width: 2rem;
    height: 2rem;
    margin:0px;
}


.input_textfield_edit{
	width: 100%;
	background-color: #dadada;
	border-radius: 5px;
	font-weight:normal;
	/* border: 2px solid #ccc; */
}

.input_textfield_edit select:focus-visible,
.input_textfield_edit select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--theme-color);  
}



/* remove standard-styles */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
  font-size: 1em;
  width: 100%
}

/* styling */
select {
  width:100%;
  border: 1px solid #bbb;
  padding:.75em 1em .5em 1em;
  /* box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2); */
  background-color:white;
  background-image:url(https://www.xxl-art.de/images/select_arrow.png);
  background-position: right;
  background-repeat: no-repeat;
}


select:focus,
select:focus-visible,
select:focus-within,
select:active {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--theme-color);
}


.textfield_box{
padding: 10px 0;
}

.textfield_title{
    margin-bottom: 5px;
    font-size: 14pt;
}


.textfield_error_icon {
    top: 9px;
    right: 10px;
    position: absolute;
    display:none;
}

.textfield_error_icon.visible {
    top: 9px;
    right: 10px;
    position: absolute;
    display:block;
}

.textfield_error_icon svg{
    width:24px;
    height:24px;
}


.filter_invert{
    filter:invert(1);
}

a.button_logout{
    background: white;
    display: block;
    color: black !important;
    padding: 10px 20px;
    border-radius: 100px;
}



/* TOP button temporär ausgeschaltet */
.cd-top{
    display:none;
}



/* Kunstdruck Layer Größen */
.print_size_box{
    padding: 20px 20px;
    border-bottom: 1px solid #464646;
}

.crop_layer_content_inner svg{
    filter:invert(1);
}


.splide__track {
    touch-action: pan-y;
}

.is-touch-dragging .splide__list { transition: none !important; }


.artist-box-wrapper{
				    
}

.artist-foto-wrapper{
}

.artist-foto{

    width: min(290px, 80vw);
    object-fit: cover;
}

.artist-caption{
    position: relative;
    top: -50px;
}

.artist-caption-title{
    font-family: var(--font-display);
	font-size: var(--text-xl);
    text-transform: uppercase;
    color: white;
}

.artist-box-wrapper h3.artist-caption-name{
	font-size: var(--text-mega-small);
    text-transform: uppercase;
    color: white;
    padding:0px;
}



 .signature_wrapper{
    overflow:visible; 
    padding-top: 50px;
    padding-bottom:150px;
}

.signature_wrapper_inner{
    height:53vh;
}

@media(orientation:portrait){
    .signature_wrapper{
        padding-bottom:20px;
    }
    
    .signature_wrapper_inner{
        height:40vh;
    }
}

.sale_badge{
	position: absolute;
    z-index: 9;
    top: 1rem;
    left: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--sale-red);
}

.relative{
	position:relative;
}

.sale_badge svg{
	color:var(--sale-red);
}

.whitespace-nowrap{
    white-space: nowrap;
}


.countdown{
    display: block;
    font-size: 3em;
    font-family: var(--font-display);
    color:var(--sale-red);
}



.voucher_active_box{
    justify-content: center;
    color: #fff !important;
    display: flex !important;
    padding: 10px 20px;
    border-radius: 50px;
    margin-bottom: 10px;
    font-size: 12pt !important;
}

.voucher_active_box svg{
    width:20px;
    height:20px;
}

.voucher_hint{
    display:block;
    font-size:var(--text-base); 
    margin-top:10px;
    text-align:right;
    color: #e44545;
}

.voucher_hint.small{
    font-size:var(--text-base-s); 
}

.voucher_hint.center{
    text-align:center;
}

.voucher_hint.right{
    text-align:right;
}

.voucher_hint.left{
    text-align:left;
}


.success_msg{
    display: flex;
    align-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px;
}




/* ============================================================
   ART CAROUSEL
   MOBILE PORTRAIT ROOM CARDS

   KEIN JavaScript.
   KEIN Resize.
   KEIN vh / dvh.
   KEIN aspect-ratio nötig.

   Klassischer Padding-Ratio-Trick:
   Höhe entsteht ausschließlich aus der Card-Breite.
   ============================================================ */

@media (max-width: 767px) and (orientation: portrait) {

    /*
     * Die Card selbst bekommt KEINE feste Höhe.
     *
     * Ihre Höhe entsteht automatisch durch .sl-card__img.
     */
    .splide-art-carousel .sl-card {
        height: auto !important;
        overflow: hidden;
    }


    /*
     * 1 : 1.618
     *
     * padding-bottom in Prozent bezieht sich auf die BREITE.
     *
     * Beispiel:
     * 300px breit
     * -> 485.4px hoch
     *
     * Funktioniert auch in sehr altem Chrome.
     */
    .splide-art-carousel .sl-card__img {
        position: relative;

        width: 100%;
        height: 0 !important;

        padding-bottom: 161.8%;

        overflow: hidden;
    }


    /*
     * Falls ImageTag ein <picture> erzeugt.
     */
    .splide-art-carousel .sl-card__img picture {
        position: absolute;

        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;
        height: 100%;

        display: block;
    }


    /*
     * Room-Bild füllt das Portrait-Fenster.
     *
     * Das ursprüngliche 4:3-Raumbild wird gecroppt,
     * NICHT verzerrt.
     */
    .splide-art-carousel .sl-card__img-el {
        position: absolute;

        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        display: block;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover;
        object-position: center;
    }

}


/*
 ═══════════════════════════════════════════════════════════════════
 SUCHLEISTE unter der Navigation
 ═══════════════════════════════════════════════════════════════════

 Sitzt zwischen .desk-nav-bar (z 500) und .dn-breadcrumb (z 495).

 Sie faehrt mit der Navigation weg — ohne Aenderung an der bestehenden
 Scroll-Logik: hideNav() setzt body.nav-hidden, das CSS haengt sich dran.

 body.has-searchbar schiebt den Breadcrumb nach unten. Wird die Leiste
 weggeklickt, faellt die Klasse weg und alles sitzt wieder wie vorher —
 kein Aufraeumen noetig.
*/

:root {
    --dn-sb-h: 52px;
}

.dn-searchbar {
    position: fixed;
    top: var(--dn-bar-h);
    left: 0; right: 0;
    z-index: 498;

    height: var(--dn-sb-h);
    display: flex;
    align-items: center;
    padding: 0;

    background: rgba(8, 8, 12, 0.78);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 0.5px solid var(--dn-border);

    /* Dieselbe Kurve wie die Navi — sonst laufen sie auseinander. */
    transition: transform 0.75s ease, opacity 0.3s ease;
}

/* Navi weg -> Leiste mit weg. Sie muss ihre EIGENE Hoehe UND die der
   Navi zuruecklegen, sonst bliebe sie oben kleben. */
body.nav-hidden .dn-searchbar {
    transform: translateY(calc(-1 * (var(--dn-bar-h) + var(--dn-sb-h))));
}

/* Breadcrumb rutscht nach unten, solange die Leiste da ist. */
body.has-searchbar .dn-breadcrumb { top: calc(var(--dn-bar-h) + var(--dn-sb-h)); }

/* Die Leiste bleibt IMMER. Kein Wegklicken — sie ist der zentrale
   Einstieg, und ein X waere die Einladung, ihn zu verstecken. */

/* Seiteninhalt rutscht mit, sonst liegt der Header drueber */
body.has-searchbar {
    --navigationHeight: calc(var(--dn-bar-h) + var(--dn-sb-h));
    --nav-height:       calc(var(--dn-bar-h) + var(--dn-sb-h));
}

/* Suche laeuft AUS DER LEISTE -> Leiste bleibt sichtbar und ueber dem
   Overlay. Sie IST das Suchfeld, der Kunde tippt durchgehend hier.
   Das Eingabefeld IM Overlay wird dafuer ausgeblendet, sonst haette man
   zwei. */
body.searchbar-driven .dn-searchbar {
    z-index: 100000;
}
body.searchbar-driven #dn-search-overlay .dn-search-inner {
    display: none;
}

/* Die Ergebnisse ruecken hoch, wo vorher das Overlay-Feld sass. */
body.searchbar-driven #dn-search-overlay .dn-search-results {

}


.dn-searchbar__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 685px;
    margin: 0 auto;
    padding: 0 20px;
}



@media (min-width: 968px) {

    .dn-searchbar {
        padding: 0 48px;
    }
    .dn-searchbar__inner {
        padding: 0 20px;
        padding-left:60px;
    }
}

.dn-searchbar__inner svg {
    stroke: rgb(0 0 0);
}


/* ── Das Feld ──────────────────────────────────────────── */

.dn-searchbar__field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    height: 38px;
    padding: 0 16px;
    padding-right: 2px;
    border: 0.5px solid var(--dn-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--dn-text);
    font-family: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: text;
    transition: border-color var(--dn-trans), background var(--dn-trans);
}

.dn-searchbar__field:hover {
    border-color: rgba(200, 169, 110, 0.4);
    background: rgba(255, 255, 255, 1);
}

.dn-searchbar__icon  { flex: none; opacity: .6; }

/* Input + Platzhalter liegen uebereinander */
.dn-searchbar__wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.dn-searchbar__input {
    width: 100%;
    height: 36px;
    border: none;
    background: transparent;
    outline: none;
    color: #000;
    font-family: inherit;
    font-size: 13.5px;
    position: relative;
    z-index: 2;
}
.dn-searchbar__input::placeholder { color: transparent; }

.dn-searchbar__ph {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity .2s ease;
}
.dn-searchbar__ph.is-hidden { display: none; }

/* Feld hat Fokus -> Platzhalter samt blinkendem Cursor KOMPLETT weg.
   Nur den Text zu leeren reicht nicht: das ::after (der Cursor) bleibt
   sonst stehen und blinkt weiter. */
.dn-searchbar.is-focused .dn-searchbar__ph,
.dn-searchbar.is-settled .dn-searchbar__ph-rot::after,
.dn-searchbar.is-focused .dn-searchbar__ph-rot::after {
    display: none;
}

.dn-searchbar.is-focused .dn-searchbar__field {
    border-color: rgba(200, 169, 110, 0.55);
    background: rgba(255, 255, 255, 1);
}

/* Rotation vorbei -> Cursor weg */
.dn-searchbar.is-settled .dn-searchbar__ph-rot::after { display: none; }

.dn-searchbar__ph-static { flex: none; color: black; }

/* Der rotierende Teil — golden, damit das Auge ihm folgt. */
.dn-searchbar__ph-rot {
    color: var(--dn-gold);
    color:black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cursor hinter dem Beispiel: es sieht aus, als tippe da gerade jemand. */
.dn-searchbar__ph-rot::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1em;
    margin-left: 2px;
    background: var(--dn-gold);

    background: black;

    vertical-align: text-bottom;
    animation: dnSbCaret 1s steps(2) infinite;
}
@keyframes dnSbCaret { 50% { opacity: 0 } }

.dn-searchbar__hint {
    flex: none;
    opacity: 1;
    font-size: var(--text-s);
}
.dn-searchbar__hint kbd {
    gap: 5px;
    font-family: var(--font-primary);
    border: 0.5px solid var(--dn-border);
    border-radius: 22px;
    padding: 6px 15px;
    color: black;
    transition:0.3s ease;
    
    border-color: none;
    background: none;
    
    cursor: pointer;
    display: flex;
    align-items: center;
}

.dn-searchbar__hint kbd.active{
    border-color: #02d0ce;
    background: #02d0ce;
}

.dn-searchbar__hint svg {
    padding-top:1px;
}

.dn-searchbar__hint kbd:hover {
    background: #2ee1e0;
}


/* ── Der Chat-Punkt ───────────────────────────────────────

 Das Markup rendert ihn (navigation_searchbar.php). Er ist AUS.

 Er stammt aus einem Entwurf, in dem die Suchleiste zum Chatfeld werden
 sollte. Das ist verworfen: der Berater hat sein EIGENES Eingabefeld.
 Die Leiste hat genau eine Aufgabe — suchen. Ein Feld, das mal dies und
 mal das tut, muss der Kunde erraten.

 Ohne diese Regel staende der Punkt sichtbar NEBEN der Lupe.
*/
.dn-searchbar__chatdot { display: none; }


/* ── Wegklicken ───────────────────────────────────────── */

/*
 Das X erscheint NUR, wenn es etwas zu schliessen gibt — waehrend der
 Suche oder solange das Feld Fokus hat. Sonst sitzt dort ein Knopf ohne
 Aufgabe.

 Deshalb steht display:none im Grundzustand. Die opacity daneben ist der
 Hover-Uebergang, nicht der Schalter.
*/
.dn-searchbar__close {
    display: none;

    flex: none;
    width: 28px; height: 28px;
    align-items: center; justify-content: center;

    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
    color: var(--dn-text);

    cursor: pointer;
    opacity: 0;
    transition: opacity var(--dn-trans), color var(--dn-trans), background var(--dn-trans);
}

.dn-searchbar__close svg {
    stroke: rgb(0 0 0);
}

body.searchbar-driven .dn-searchbar__close,
body.dn-search-panel  .dn-searchbar__close,
.dn-searchbar.is-focused .dn-searchbar__close {
    display: flex;
    opacity: .55;
}
.dn-searchbar__close:hover {
    opacity: 1 !important;
    color: var(--dn-text-h);
    background: rgba(255,255,255,.9);
}



body.dn-search-panel #dn-mega-box,
body.dn-search-panel .dn-backdrop {
    top: calc(var(--dn-bar-h) + var(--dn-sb-h));
}


body.dn-search-panel {
    overflow: hidden;
}



body.dn-search-panel #dn-mega-box {
    max-height: calc(100dvh - var(--dn-bar-h) - var(--dn-sb-h));
}


/* Ueber Backdrop (497) und Box (496), unter der Bar (500). */
body.dn-search-panel .dn-searchbar {
    z-index: 499;
}

/* Das Feld sieht aktiv aus, solange der Startscreen offen ist — auch wenn
   der Fokus kurz woanders hinspringt (Chip-Klick). */
body.dn-search-panel .dn-searchbar__field {
    border-color: rgba(200, 169, 110, 0.55);
    background: rgba(255, 255, 255, 1);
}




/* ═══════════════════════════════════════════════════════════
   DAS LAYOUT: RAIL LINKS, WAND RECHTS
   ═══════════════════════════════════════════════════════════ */

.dn-search-start {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    align-items: stretch;

    /*
     VOLLE HOEHE — bis zum unteren Bildschirmrand.

     Die 60px sind kein Schaetzwert: .dn-panel-config .dn-mega-inner hat
     padding: 28px 48px 32px (navigation_desktop.php, Z. 448). Oben 28,
     unten 32. Aendert sich das Padding, aendert sich diese Zahl mit.

     Weil die Hoehe damit am VIEWPORT haengt und nicht am Inhalt, steht sie
     schon fest, bevor das erste Bild geladen ist. Deshalb braucht das Panel
     kein data-fixed-height mehr und springt nach dem Ajax nicht.

     transition: die Auffahrt macht die Mega-Box (height). Hier animiert nur
     der Wechsel in den Vollbild-Chat.
    */
    /* height: calc(100dvh - var(--dn-bar-h) - var(--dn-sb-h) - 60px); */
    
    height:100%;

    transition: grid-template-columns var(--dn-trans),
                height var(--dn-trans);
}


/* ── Die Rail ─────────────────────────────────────────────

 DREI ANSICHTEN UEBEREINANDER, nicht nacheinander.

 Wuerde man sie austauschen, aendert sich die Hoehe der Rail — und damit
 die Hoehe des Panels, weil dnInitPanelContent() nachmisst. Der Kunde
 saehe bei jedem Klick auf "Filter" einen Sprung.

 Uebereinander gelegt kann sich nichts verschieben. Und der Filter behaelt
 seinen Zustand: wer ihn schliesst und wieder oeffnet, findet seine Haken
 wieder. Genau so macht es dein Mega-Menue schon (.dn-mega-content).
*/
.dn-rail {
    position: relative;
    min-width: 0;
    padding-right: 28px;
    border-right: 0.5px solid var(--dn-border);
}

.dn-rail__view {
    position: absolute;
    inset: 0;
    right: 0px;

    display: flex;
    flex-direction: column;

    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);

    /* Dieselbe Kurve wie das Mega-Menue. Zwei Kurven auf einer Seite
       sieht man sofort, auch wenn man nicht weiss, warum. */
    transition: opacity  var(--dn-trans),
                transform var(--dn-trans);
}

.dn-rail[data-rail="start"]  .dn-rail__view[data-view="start"],
.dn-rail[data-rail="filter"] .dn-rail__view[data-view="filter"],
.dn-rail[data-rail="chat"]   .dn-rail__view[data-view="chat"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}





.dn-rail__label {
    font-size: var(--text-base-s);
    text-transform: uppercase;
    color: var(--dn-gold);
    margin-bottom: 12px;
    flex: none;
    padding:0 1rem;
}

.dn-rail__chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    flex: none;
}


.dn-button-wrapper{
    display: flex;
    gap: 1rem;
    padding-top: 0.5rem;
}


/* .dn-suggestion steht schon in navigation_desktop.php — sie ist dort fuer
   <a> geschrieben. Als <button> fehlen ihr nur diese drei Zeilen. */
button.dn-suggestion {
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 16px;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.12s;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
}


/* ── Knoepfe: Filter auf, Filter zu ───────────────────── */

.dn-rail__open {
    display: flex;
    align-items: center;
    gap: 8px;

    width: 100%;
    padding: 10px 14px;

    border: 0.5px solid var(--dn-border);
    border-radius: 8px;
    background: rgba(255,255,255,0.03);

    color: var(--dn-text);
    font: inherit;
    font-size: 12.5px;

    cursor: pointer;
    flex: none;
    transition: border-color var(--dn-trans), background var(--dn-trans), color var(--dn-trans);
}
.dn-rail__open:hover {
    border-color: rgba(200,169,110,0.45);
    background: rgba(255,255,255,0.06);
    color: var(--dn-text-h);
}

/*
 "Filter schliessen" statt eines nackten X.

 Ein X waere eine Sackgasse — der Kunde wuesste nicht, was danach kommt.
 Der Knopf sagt, wohin er fuehrt.
*/
.dn-rail__top{
    display: flex;
    text-transform: uppercase;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    padding: 0 15px;
    font-family: var(--font-display);
    font-size: var(--text-base);
}


.dn-rail__back {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 10px;
    margin-right: 0px;
    right: 0px;
    border: none;
    background: none;
    color: var(--dn-gold);
    font: inherit;
    flex: none;
    opacity: .85;
    transition: opacity var(--dn-trans);
    align-content: center;
    justify-content: flex-end;
}

.dn-rail__back button{
   
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    color: rgba(255,255,255,0.6);
    font: inherit;
    opacity: .85;
    transition: opacity var(--dn-trans);
    cursor:pointer;
}

.dn-rail__back button svg{
    width:24px;
    height:24px;
}

.dn-rail__back button:hover { color: var(--dn-gold); opacity: 1; }

.dn-rail__back--inline { margin-bottom: 0; }

.dn-rail__sep {
    height: 0.5px;
    background: var(--dn-border);
    margin: 18px 0;
    flex: none;
}

#dn-mega-box .filter_box_head{
    display:none;
}



/* ── Scroll-Flaechen in der Rail ──────────────────────────

 Filter und Chat koennen laenger werden als die Rail hoch ist. Sie
 scrollen dann in sich — nicht die Seite, nicht das Panel.

 data-lenis-prevent steht im Markup. Ohne das faengt Lenis das Rad ab
 und overflow-y:auto bleibt wirkungslos.
*/
.dn-rail__scroll {
    flex: 1;
    min-height: 0;          /* OHNE DAS scrollt ein Flex-Kind nie. */
    overflow-y: auto;
    overscroll-behavior: contain;
}


/* ── Chat-Kopf ───────────────────────────────────────── */

.dn-rail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 0.5px solid var(--dn-border);
    flex: none;
}
.dn-rail__brand { display: flex; align-items: center; gap: 9px; }
.dn-rail__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #02d0ce;
    box-shadow: 0 0 8px rgba(2,208,206,.6);
    flex: none;
}
.dn-rail__brand-t { font-size: 12.5px; color: var(--dn-text-h); }
.dn-rail__brand-s { font-size: 10px;   color: var(--dn-text); opacity: .7; }


/* ── Platzhalter (Filter / Chat) ──────────────────────── */

.dn-rail__ph {
    padding: 18px;
    border: 0.5px dashed var(--dn-border);
    border-radius: 8px;
}
.dn-rail__ph-txt {
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--dn-text);
    opacity: .75;
    margin-bottom: 16px;
}
.dn-rail__ph-txt code {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--dn-gold);
}
.dn-rail__ph-bar {
    height: 30px;
    border-radius: 6px;
    background: rgba(255,255,255,0.045);
    margin-bottom: 8px;
}


/* ── Die Berater-Karte ────────────────────────────────── */

.dn-kb-card {
    position: relative;
    padding: 20px 18px 18px;

    border: 0.5px solid rgba(2,208,206,0.22);
    border-radius: 10px;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(2,208,206,0.10), transparent 60%),
        rgba(255,255,255,0.02);

    flex: none;
}

.dn-kb-card__orb { width: 34px; height: 34px; margin-bottom: 12px; }
.dn-kb-card__orb svg { width: 100%; height: 100%; }

.dn-kb-card__eyebrow {
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #02d0ce;
    margin-bottom: 6px;
}
.dn-kb-card__title {
    font-size: 15px;
    font-weight: 300;
    color: var(--dn-text-h);
    margin-bottom: 5px;
}
.dn-kb-card__sub {
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--dn-text);
    margin-bottom: 15px;
}

.dn-kb-card__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    padding: 9px 13px;

    border: 0.5px solid rgba(2,208,206,0.35);
    border-radius: 7px;
    background: rgba(2,208,206,0.08);

    color: var(--dn-text-h);
    font: inherit;
    font-size: 12px;

    cursor: pointer;
    transition: background var(--dn-trans), border-color var(--dn-trans);
    gap: 5px;
}

.dn-kb-card__btn svg{
    padding-top:1px;
}

body.dn-search-panel .dn-kb-card__btn:hover {
    border-color: rgba(2,208,206,0.55);
    background: rgb(2 208 206 / 52%);
    color: #ffffff;
}
.dn-kb-card__arr { transition: transform var(--dn-trans); }
.dn-kb-card__btn:hover .dn-kb-card__arr { transform: translateX(3px); }


/* ── Die Wand ─────────────────────────────────────────── */

.dn-search-start__wall {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.dn-search-start__wall-label { margin-bottom: 12px; }

/*
 Der Scroll-Container der Wand.

 flex:1 + min-height:0 — OHNE min-height:0 scrollt ein Flex-Kind NIE.
 Es waechst stattdessen ueber den Container hinaus, und man sucht den
 Fehler im overflow.

 Das overflow steht hier und NICHT im style-Attribut: inline schluege
 jede CSS-Regel.
*/
#dnc-search .dn-panel-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Randlos bis an die Panel-Kante, wie in den Nav-Panels. */
    margin: 0 -48px 0 0;
    padding: 0 48px 0 0;
}

/* Dezente Leiste — die dicke Default-Scrollbar zerhackt das Panel. */
#dnc-search .dn-panel-content::-webkit-scrollbar,
.dn-rail__scroll::-webkit-scrollbar              { width: 6px; }
#dnc-search .dn-panel-content::-webkit-scrollbar-track,
.dn-rail__scroll::-webkit-scrollbar-track        { background: transparent; }
#dnc-search .dn-panel-content::-webkit-scrollbar-thumb,
.dn-rail__scroll::-webkit-scrollbar-thumb        {
    background: rgba(255,255,255,0.14);
    border-radius: 3px;
}
#dnc-search .dn-panel-content::-webkit-scrollbar-thumb:hover,
.dn-rail__scroll::-webkit-scrollbar-thumb:hover  { background: rgba(255,255,255,0.26); }


/* Der Skeleton sitzt in der Wand, nicht ueber der ganzen Breite. */
#dnc-search .dn-panel-loader { flex: none; }


/* Schmaler Bildschirm: die Rail wird schmaler, bevor die Wand leidet.
   Unter 1150px rechnet masonry_grid.js ohnehin nur noch 4 Spalten
   (gedeckelt auf 3), da ist der Platz knapp. */
@media (max-width: 1250px) {
    .dn-search-start { grid-template-columns: 260px 1fr; gap: 24px; }
    .dn-rail         { padding-right: 20px; }
    .dn-rail__view   { right: 20px; }
}


/* ═══════════════════════════════════════════════════════════
   DER VOLLBILD-CHAT
   ═══════════════════════════════════════════════════════════

 Kein neuer Layer. DASSELBE Panel — es waechst nur nach oben aus der
 Navigation heraus und schiebt die Rail breit.

 Das ist der Unterschied zwischen "ein Fenster geht auf" und "der Raum
 veraendert sich". Ein zweiter Layer haette bedeutet: Panel schliessen,
 Overlay oeffnen, Zustand doppelt halten, und beim Zurueck alles wieder
 zusammensuchen. So bleibt der Kunde die ganze Zeit im selben Element.

 Was passiert:

   top      52+52px  ->  0        deckt Navigation UND Suchleiste zu
   height   Rest     ->  100dvh
   z-index  496      ->  1000     ueber die Bar (500) und die Leiste (499)
   Rail     320px    ->  460px    der Chat bekommt Platz
   Wand     bleibt              die Empfehlungen sind das Ergebnis

 Die Wand bleibt mit Absicht stehen. Der Berater EMPFIEHLT — ohne die
 Werke daneben redet er ins Leere. Genau so ist navigation_berater.php
 auch gebaut (Chat links, Galerie rechts).
*/

body.dn-chat-full #dn-mega-box {
    top: 0;
    z-index: 1000;

    /*
     !important, und das ist hier kein Pfusch:

     dnOpen() setzt die Hoehe als INLINE-Style (box.style.height = h + 'px').
     Inline schlaegt jede normale CSS-Regel. Ohne !important bliebe die Box
     auf ihrer gemessenen Hoehe stehen und das Vollbild waere nur oben offen.

     Die Alternative waere gewesen, ins JS zu greifen und die Hoehe dort
     umzuschreiben — dann haette die Navigation eine zweite Stelle, an der
     Hoehen entstehen. Eine Zeile !important ist billiger als das.
    */
    height: 100dvh !important;
    max-height: 100dvh;
}

/* Die Leiste verschwindet MIT der Navigation. Im Chat wird nicht gesucht —
   dafuer gibt es das Feld in der Rail. Zwei Eingaben nebeneinander waeren
   genau die Verwirrung, die wir vermeiden wollen. */
body.dn-chat-full .dn-searchbar {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dn-trans);
}

body.dn-chat-full .dn-search-start {
    /* Die Rail wird zur Chat-Saeule. 460px ist Lesebreite — darueber
       zerfasern die Zeilen, darunter wird jeder Satz zum Absatz. */
    grid-template-columns: 460px 1fr;
    height: calc(100dvh - 60px);
}

/* Chips, Filter und Berater-Karte haben im Vollbild nichts verloren.
   Sie liegen ohnehin unsichtbar unter der Chat-Ansicht (data-rail),
   aber die Trennlinie der Rail wuerde sonst mitten im Nichts stehen. */
body.dn-chat-full .dn-rail { border-right-color: transparent; }


/* ── Der Chat-Composer in der Rail ────────────────────────

 EIGENES Feld. Nicht die Suchleiste.

 flex:none — er sitzt unten fest, der Verlauf darueber scrollt. Ein
 Eingabefeld, das beim Tippen wegwandert, ist unbenutzbar.
*/
.dn-rail__composer {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 12px;
    padding: 0 4px 0 14px;

    border: 0.5px solid rgba(2,208,206,0.28);
    border-radius: 999px;
    background: rgba(255,255,255,0.03);

    flex: none;
    transition: border-color var(--dn-trans), background var(--dn-trans);
}
.dn-rail__composer:focus-within {
    border-color: rgba(2,208,206,0.55);
    background: rgba(255,255,255,0.05);
}

.dn-rail__input {
    flex: 1;
    min-width: 0;
    height: 38px;

    border: none;
    background: transparent;
    outline: none;

    color: var(--dn-text-h);
    font: inherit;
    font-size: 12.5px;
}
.dn-rail__input::placeholder { color: var(--dn-text); opacity: .7; }

.dn-rail__send {
    flex: none;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;

    border: none;
    border-radius: 50%;
    background: rgba(2,208,206,0.14);
    color: #02d0ce;

    cursor: pointer;
    transition: background var(--dn-trans);
}
.dn-rail__send:hover { background: rgba(2,208,206,0.26); }


/* ── Der Filter in der Rail ───────────────────────────────

 Im Shop ist der Filter ein Seitenlayer (position:absolute ueber
 #filter_side_layer). Diese ID wird im Such-Scope GAR NICHT gerendert
 (shopping_filter.php: $filter_scope === 'main' ? id=... : '') — das
 Shop-CSS greift hier also nicht, und der Filter fliesst von selbst.

 .filter-inline ist der Haken fuer den Rest: was in filter.css ueber
 .filter-top laeuft und trotzdem positioniert, wird hier zurueckgeholt.

 GEPRUEFT WERDEN MUSS: ob filter.css irgendwo ueber .filter-top statt
 ueber die ID positioniert. Dann kommen hier ein, zwei Zeilen dazu.
*/
.filter-inline {
    position: static !important;
    width: 100%;
    max-width: none;
    height: auto;
    box-shadow: none;
    background: transparent;
}

/* Der Filter laedt nach: die Wand wird blass, statt zu verschwinden.

   Ein Skeleton waere hier falsch. Der Kunde HAT schon Werke gesehen —
   sie wegzunehmen und durch graue Kaesten zu ersetzen fuehlt sich an wie
   ein Rueckschritt. Blass heisst "gleich mehr", leer heisst "weg". */
#dnc-search .dn-panel-content.is-reloading {
    opacity: .45;
    pointer-events: none;
    transition: opacity .18s ease;
}








/* ─────────────────────────────────────────────────────────────
   Content Section — Reiner Text Block
───────────────────────────────────────────────────────────── */

.content-section {
  width: 100%;
  padding: 4rem 2rem;
}

.content-section--center .content-section__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.content-section--left .content-section__inner {
  max-width: 800px;
  text-align: left;
}

.content-section__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold, #c8a96e);
  margin-bottom: 1.68rem;
  opacity: 0.85;
}

.content-section__title {
  font-family: var(--font-display, sans-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.38;
  text-transform: uppercase;
  color: var(--sl-fg);
  text-align:center;
  margin-bottom: 1.68rem;
}


.content-section__sub {
  font-size: var(--text-xl);
  color: rgba(255,255,255,.8);
  line-height: 1.6;
  margin-bottom: 1.68rem;
}

.content-section__body {
  font-size: var(--text-base);
  color: white;
  line-height: 1.8;
  max-width: 600px;
}

.content-section--center .content-section__body {
  margin: 0 auto;
}



/* ─────────────────────────────────────────────────────────────
   Story Section — Reiner Text Block
───────────────────────────────────────────────────────────── */

.story-reveal{
  background:#0a0a0b;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:8vh 8vw;
  justify-content: center;
  flex-direction: column;
}
.story-reveal-inner{
  max-width:600px;
  text-align:center;
}

.story-reveal-title{
    font-family: var(--font-display);
    font-size: var(--text-xl);
    opacity: 0.7;
    white-space: nowrap;
    padding-bottom:4rem;
}

.story-block{
  font-family:"Fraunces",Georgia,serif;
  font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.6rem);
  line-height:1.45;
  letter-spacing:-.005em;
  color:rgba(255,255,255,.85);
}
.story-signature{
  font-family:"Fraunces",Georgia,serif;
  font-style:italic; font-weight:300;
  font-size:clamp(1.1rem,2.4vw,1.7rem);
  line-height:1.4;
  margin-top:1.6em;
  color:rgba(212,175,124,.85);
}
@media (max-width:768px){
  .story-reveal{ padding:6vh 7vw; }
  .story-reveal-inner{ max-width:26ch; }
}







/* ══ HERO PRODUCT LAYOUT ══════════════════════════════════════
   Mobile First: Base = Mobil → Tablet → Desktop
   ══════════════════════════════════════════════════════════ */

/* ── Wrapper ──────────────────────────────────────────────── */
.product_hero_wrapper {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
    overflow: hidden;
    position: relative;
    background: transparent;
    width: 100vw;
    margin-top: 0px;
    justify-content: center;
}

/* ── Gallery Column ───────────────────────────────────────── */
.product_hero_gallery {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-height: 1000px;
    overflow: visible;
    position: relative;
}

/* ── Gallery Wrap ─────────────────────────────────────────── */
.hero-gallery-wrap {
    display: flex;
    flex-direction: column;
    height: calc(100% - var(--navHeight));
    height: calc(100svh - (var(--dn-bar-h) + var(--dn-sb-h) + var(--dn-bc-h)));
}

body.has-breadcrumb.has-searchbar .hero-gallery-wrap {
    display: flex;
    flex-direction: column;
    max-height: calc(100svh - (var(--dn-bar-h) + var(--dn-sb-h) + var(--dn-bc-h)));
    height:auto;
}

/* */
body.has-breadcrumb .product_hero_wrapper {
   padding-top:var(--dn-bc-h);
}



/* ── Haupt-Slider ─────────────────────────────────────────── */
.hero-gallery-main {
    min-height: 0;
    height: auto;
    overflow: visible;
}

.hero-gallery-main .splide__track {
    height: auto;
    max-height: calc(100vh - 260px);
}

.hero-gallery-main .splide__list {
    height: auto;
    max-height: calc(100vh - 260px);
}

.hero-gallery-main .splide__slide {
    width: 100%;
    display: flex;
}

.hero-gallery-slide {
    height: auto;
    overflow: visible;
    width:100%;
    object-position: center top;
}

.hero-gallery-slide.is-active a {
    overflow: visible;
}

.hero-gallery-link {
    display: block;        /* ← kein flex, kein inline */
   
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    position: relative;
    background: transparent;
    cursor: zoom-in;
    overflow: hidden;
    height: auto;
    
}

.hero-gallery-img {
    width: 100vw;
    height: auto;
    object-fit: contain;
    object-position: center center;
    display: block;
    background: transparent;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}


.hero-gallery-img.released {
    width: 100vw;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    background: transparent;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}



 

.splide__slide img.hero-gallery-img {
    height: auto;
    max-width:100%;
    /* width: 100%; */
    vertical-align: bottom;
    width: 100%;
    margin: 0 auto;
 } 
 
 .splide__slide img.hero-gallery-img.released{
    height: 100%;
    width:100%;
    object-fit: contain;
    vertical-align: bottom;
    margin: 0 auto;
 } 
 
 
  /*
 .splide__slide img.hero-gallery-img.landscape {
    width: 100%;
    height: auto;
 }
 

 .splide__slide img.hero-gallery-img.portrait {
    height: 100%;
    width: auto;
 } 
 */
 
 .splide__slide img.hero-gallery-img {
    height: 100%;
    max-width:100%;
    object-fit: cover;
    vertical-align: bottom;
    width: 100%;
    margin: 0 auto;
 } 
 
/*
 @media(orientation:portrait){
    .splide__slide img.hero-gallery-img {
        height: 100%;
        max-width:100%;
        object-fit: cover;
        vertical-align: bottom;
        width: 100%;
        margin: 0 auto;
     } 
 }
 */
 
/*
.hero-gallery-link:hover .hero-gallery-img {
    transform: scale(1.02);
}
*/


/* ── Zoom Icon ────────────────────────────────────────────── */
.hero-gallery-zoom-icon {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.hero-gallery-zoom-icon svg {
    width: 18px;
    height: 18px;
    color: #fff;
}

.hero-gallery-link:hover .hero-gallery-zoom-icon {
    opacity: 1;
    transform: scale(1);
}

/* ── Badge ────────────────────────────────────────────────── */
.hero-slide-badge {
    display: none;
    position: absolute;
    top: 16px;
    left: 16px;
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
    padding: 4px 10px;
    border-radius: 99px;
    border: .5px solid rgba(255,255,255,.1);
}

/* ── Splide Arrows (mobile) ───────────────────────────────── */
.hero-gallery-main .splide__arrow {
    background: rgba(10,10,10,0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    width: 36px;
    height: 36px;
    opacity: 1;
    transition: background .2s, border-color .2s, transform .2s;
}

.hero-gallery-main .splide__arrow svg {
    fill: #fff;
    width: 13px;
    height: 13px;
}

.hero-gallery-main .splide__arrow--prev { left: 10px; }
.hero-gallery-main .splide__arrow--next { right: 10px; }

/* ── Thumbnails (mobile) ──────────────────────────────────── */
.hero-gallery-thumbs {
    flex-shrink: 0;
    padding: 8px 10px;
    background: transparent;
    overflow: hidden;
    backdrop-filter: blur(8px);
    visibility:hidden;
}


.hero-gallery-thumbs.is-initialized{
    visibility:visible !important;
}


.hero-gallery-thumbs .splide__track {
    padding: 2px 0;
}

.hero-thumb-slide {
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    opacity: 0.45;
    transform: scale(0.95);
    transition: border-color .25s ease, opacity .25s ease, transform .25s ease;
    width:80px;
    height:80px;
    margin-right: 6px;
}

.hero-thumb-slide.thumb-selected {
    border-color: #c8a96e;
    opacity: 1;
    transform: scale(1);
}

.hero-thumb-slide:hover:not(.thumb-selected) {
    opacity: 0.75;
    transform: scale(0.98);
}

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

.hero-thumb-video-wrap { position: relative; }

.hero-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    background: rgba(0,0,0,0.4);
}

/* ── Video Haupt ──────────────────────────────────────────── */
.hero-gallery-video-wrap {
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-gallery-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Cart Box (mobile) ────────────────────────────────────── */
.product_hero_cart_box {
    height: auto;
    overflow: visible;
    padding: 0 20px;
    max-width: 100%;
    min-width: unset;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.product_hero_cart_box::-webkit-scrollbar       { width: 4px; }
.product_hero_cart_box::-webkit-scrollbar-track  { background: transparent; }
.product_hero_cart_box::-webkit-scrollbar-thumb  {
    background: rgba(255,255,255,0.12);
    border-radius: 99px;
}

.product_hero_cart_box .title.title_product_type {
    font-size: clamp(1rem, 1.3vw, 1.6rem);
    padding: 20px 0;
    padding-bottom: 20px;
    margin: 0;
    letter-spacing: 1px;
    hyphens: unset;
    overflow: hidden;
    line-break: auto;
    text-transform: unset;
    text-align: left;
    line-height: 160%;
}

/* ── Misc ─────────────────────────────────────────────────── */
.label_available {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-content: center;
    align-items: center;
    color: #89c106;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.label_available svg{
    width:24px;
    height:24px;
}

.label_available .checkmark {
    background-color: transparent;
    width: 25px;
    height: 25px;
    top: 0px;
    stroke-width: 0 !important;
    animation: checkmark_green .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    fill: rgb(137 193 6);
}

.label_available .checkmark svg {
    fill: rgba(0,0,0,0.7);
    stroke: unset;
    width: 25px;
    height: 25px;
    stroke-width: 0 !important;
    stroke: #89c106;
}

.label_available .checkmark svg path {
    filter: none !important;
    fill: rgb(68 77 46);
}

.title.eyebrow {
    font-size: 1rem;
    padding: 0;
    padding-top: 30px;
    margin: 0;
    letter-spacing: 0.3rem;
    text-align:center;
}

/*
.splide__track ul,
.splide__track ul li {
    display: flex;
    list-style-type: disc;
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding-inline-start: 0px;
    unicode-bidi: isolate;
    
}

*/


/* ══ LANDSCAPE (Mobile / kleines Tablet) ════════════════════ 
@media (orientation: landscape) and (max-width: 1024px) {
    .product_hero_gallery {
        height: 100svh;
        min-height: unset;
    }

    .hero-gallery-thumbs {
        padding: 6px 12px;
    }
}
*/

.splide.hero-gallery-thumbs .splide__track {
    padding: 1rem !important;
}

@media (orientation: portrait){
    .hero-gallery-slide,
    .hero-gallery-link{
        max-height: 50vh;
    }
}


/* ══ TABLET  min-width: 769px ════════════════════════════════ */
@media (min-width: 769px) {
    .product_hero_gallery {
        /* height: 70vh; */
        min-height: 400px;
    }

    .hero-gallery-thumbs {
        padding: 1rem;
        backdrop-filter: none;
    }

    .product_hero_cart_box {
        padding: 0 30px;
    }

    
    .hero-gallery-wrap {
        height: auto;
    }
    
    .hero-thumb-slide {
        width:100px;
        height:100px;
        margin-right: 8px;
    }
    
}


/* ══ DESKTOP  min-width: 1025px ══════════════════════════════ */
@media (min-width: 1025px) {

    

    /* Wrapper: side-by-side */
    .product_hero_wrapper {
        flex-direction: row;
        height: auto;
    }

    /* Gallery: linke Spalte */
    .product_hero_gallery {
        height: calc(100vh - var(--navHeight));
        max-height: 1000px;
        max-width: 1000px;
        width: calc(100% - 33vw);
        /* margin: 0 auto; */
        overflow: visible;
        min-height: unset;
    }

    /* Slider: volle Höhe wieder aktivieren */
    .hero-gallery-main {
        overflow: hidden;
    }

    .hero-gallery-main .splide__track,
    .hero-gallery-main .splide__list {
        height: 100%;
    }

    .hero-gallery-slide {
        height: 100%;
        height: auto; /* original hatte beides */
    }
    
    .hero-gallery-slide {
        aspect-ratio: unset; /* Desktop hat feste Höhe vom Parent */
        height: 100%;
    }
    .hero-gallery-link {
        aspect-ratio: unset;
        height: auto;
        overflow: hidden;
        width:100%;
    }

    .hero-gallery-img {
        width: auto;
        height: 100%;
        object-position: center;
    }

    /* Arrows: größer */
    .hero-gallery-main .splide__arrow {
        width: 44px;
        height: 44px;
    }

    .hero-gallery-main .splide__arrow:hover {
        background: rgba(200,169,110,0.2);
        border-color: rgba(200,169,110,0.5);
    }

    .hero-gallery-main .splide__arrow--prev { left: 16px; }
    .hero-gallery-main .splide__arrow--next { right: 16px; }

    /* Cart Box: rechte Spalte, scrollbar */
    .product_hero_cart_box {
        overflow-y: auto;
        overflow-x: hidden;
        min-width: 430px;
        max-width: unset;
        padding: 0 30px;
    }

    
    .hero-gallery-wrap {
        height: calc(100vh);
        max-height:1000px;
    }
}



.button_cart {
    background-color: var(--button_cart_color)  !important;
    text-align: center;
    display: flex !important;
    width: 100%;
    padding: var(--button-padding);
}

.button_cart:hover {
	background-color: var(--button_cart_color_hover)  !important;
}

.button-cart a:visited {
	color:white !important;
}

.button_cart svg {
	transition:0.382s ease;
}

.button_cart:hover svg{
	transform:translateX(5px);
}

.button_cart:active {
	background-color: var(--button_cart_color_active)  !important;
}


.button_cart_icon{
    margin-right: 15px;
    width: 40px;
    height: 40px;
}


.button.inactive{
    opacity:0.5;
}


.button-77, .btn-77 {
    color: black !important;
    border: none;
    border-radius: 0;
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1rem;
    color: #796703;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 1px rgb(0 0 0 / .09), 0 4px 2px rgb(0 0 0 / .09), 0 8px 4px rgb(0 0 0 / .09), 0 16px 8px rgb(0 0 0 / .09), 0 32px 16px rgb(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: var(--button-padding);
    text-transform: uppercase;
    transition: 0.382s ease;
}

.button-55, .btn-55 {
    box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 8px rgb(0 0 0 / .06), 0 8px 20px rgb(0 0 0 / .05);
    transition: 0.382s ease;
    transform: scale(1) translate3d(0, 0, 0);
}


.button-secondary.button-77, 
.button-secondary.btn-77 {
    color: #ffffff !important;
    border: 1px solid white;
    border-radius: 0;
    background: transparent;
    backdrop-filter:blur(10px);
}


.payment_logos_cart_header{
    opacity: 0.5;
    text-transform: uppercase;
    padding:15px;
    font-size: 0.7rem;
}

.payment_logos_cart{
    display: flex;
    gap: 30px;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
    opacity: 0.8;
    height:60px;
}

.payment_logos_cart img{
    width:auto;
    max-width:115px;
    height:auto;
    margin: 10px 0;
}

.splide{
    visibility:visible;
}

.splide__slide img {
    width: 100%;
    vertical-align: bottom;
}



/* Ungeladene lazy-Bilder: unsichtbar aber im Layout */
.hero-gallery-img[data-splide-lazy],
.hero-gallery-img[src=""] {
    opacity: 0;
}

/* Geladenes Bild: smooth einfaden */
.hero-gallery-img {
    transition: opacity 0.25s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}




.checkout_vorteile{
	gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom:20px;
}




.checkout_vorteile .vorteile_element{
	width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    padding-top: 1rem;
}

.cart_vorteile_title{
    font-weight:bold;
}

.cart_vorteile_sub{
    padding-top:5px;
}

.checkout_vorteile .icon_svg svg,
.checkout_vorteile .icon_svg img{
	width: 60px;
    height: 60px;
    padding: 0px;
    margin: 0px;
    filter:invert(1);
    opacity:0.7;
}


.checkout_vorteile .cart_vorteile_text{
	font-size: var(--text-small);
    text-align: left;
    padding-left: 10px;
    max-width: 350px;
    color:rgba(255,255,255,0.5);
}

@media screen and (min-width: 739px) {
    .checkout_vorteile{
        padding-bottom:0px !important;
    }
}



.cart_vorteile_crop{
	gap: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom:20px;
    justify-content: space-around;
}


.cart_vorteile_crop .vorteile_element{
	display:flex;
	flex-direction: column;
}

.cart_vorteile_crop .icon_svg svg,
.cart_vorteile_crop .icon_svg img{
	width: 60px;
    height: 60px;
    padding: 0px;
    margin: 0px;
    filter:invert(1);
}


.cart_vorteile_crop .cart_vorteile_text{
	font-size: 0.75em;
    padding-top: 5px;
    max-width: 350px;
}

@media screen and (min-width: 739px) {
    .cart_vorteile_crop{
       /* padding-bottom:0px !important; */
    }
}



.button-like{
    display: flex;
    color: white;
    gap: 1rem;
    overflow: hidden;
    text-transform: uppercase;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: column;
}

.product_hero_cart_box .button-like{
    padding-top:1.5rem;
}


.button-like button.icon{
  margin: 0em 1em;
  background: transparent;
  border: 0px;
  cursor:pointer;
}

.button-like .button-like-label{
  padding: 0px;
  margin: 0px;
  top: -10px;
  position: relative;
}

.button-like button.icon{
  margin: 0em 1em;
  background: transparent;
}


.svg_icon_box {
  display:block;
  width:40px;
  height:40px;
}

.svg_icon_box svg.svg_like_icon path{
  fill:white;
  transition:0.3s ease;
}

.svg_icon_box svg.svg_like_icon:hover path{
  fill:red;
  
}


.product_hero_gallery .gallery_room_button{
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 99px;
    backdrop-filter: blur(5px);
    text-transform: uppercase;
    font-size: var(--text-s);
    transition:0.3s ease;
}

.product_hero_gallery .gallery_room_button:hover{
    background: rgba(0, 0, 0, 0.7);
    transform: translateX(-50%) scale(1.05);
}








/* ═══════════════════════════════════════════════════════════════════
  IMAGE TAB SECTIONbackground
   ═══════════════════════════════════════════════════════════════════ */
 
.cl-section{
  --cl-radius:24px;
  padding:clamp(4rem,8vh,7rem) 0;
  color:#fff;
}
.cl-head{ text-align:center; max-width:800px; margin:0 auto clamp(2.5rem,5vh,4rem); padding:0 6vw; }
.cl-head__eyebrow{
  font-family:var(--font-primary);
  font-weight:600; font-size:.72rem; line-height:1;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-soft,#d4a853); margin-bottom:1rem;
}
.cl-head__title{
  font-family:var(--font-serif);
  font-weight:300;
  font-size:clamp(2rem,5vw,3.4rem); line-height:1.1; letter-spacing:-.01em;
}
 
.cl-stage{
  position:relative;
  width:100%;
  padding:0 clamp(1rem,3vw,2.5rem);
}
.cl-viewer{
  position:relative;
  width:100%;
  height:calc(100vh - 8rem);
  max-height:920px;
  min-height:480px;
  border-radius:var(--cl-radius);
  overflow:hidden;
  background:#15110d;
}
.cl-slide{
  position:absolute; inset:0;
  opacity:0; transform:scale(1.04);
  transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.cl-slide.is-active{ opacity:1; transform:scale(1); pointer-events:auto; }
.cl-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.cl-slide picture{ display:block; width:100%; height:100%; }
.cl-slide__ph{ width:100%; height:100%; }
.cl-slide::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(8,8,10,.78) 0%, rgba(8,8,10,.35) 28%, transparent 55%);
}
 
/* ── Tabs ── */
.cl-tabs-wrap{
  position:absolute; z-index:3;
  left:clamp(1.25rem,3vw,3rem); top:clamp(1.5rem,4vh,3rem);
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  --cl-tab-h:3.34rem;
  --cl-tab-gap:.4rem;
  --cl-n:var(--cl-tabs-visible, 7);
}
.cl-tabs{
  position:relative; z-index:3;
  display:flex; flex-direction:column; gap:var(--cl-tab-gap,.4rem);
  max-height:calc(var(--cl-n) * var(--cl-tab-h) + (var(--cl-n) - 1) * var(--cl-tab-gap) + .5rem);
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none;
  padding-right:2px;
}
.cl-tabs::-webkit-scrollbar{ width:0; height:0; display:none; }
 
/* Während der Stagger-Animation: overflow sichtbar, damit die Pills von WEIT LINKS
   hereinfliegen können. Da die Tab-Anzahl auf tabs_visible begrenzt ist (PHP array_slice),
   entsteht KEIN Überlauf → keine Arrows → kein Sprung. visible = smooth. */
.cl-tabs-wrap.cl-stagger:not(.stagger-done) .cl-tabs{
  overflow:visible;
}
 
.cl-tabs-wrap{ --cl-arrow-space:3.6rem; }
.cl-tabs-wrap.cl-tabs-wrap--overflow{
  padding-top:var(--cl-arrow-space);
}
.cl-tabs-wrap.cl-tabs-wrap--overflow .cl-tabs{
  margin-bottom:var(--cl-arrow-space);
}
 
.cl-tabs-nav{
  position:absolute; left:50%; transform:translateX(-50%);
  z-index:5;
  display:inline-flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; padding:0; cursor:pointer;
  color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:100px;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:background .3s ease, opacity .3s ease;
  opacity:1;
}
.cl-tabs-nav--up{ top:-.4rem; }
.cl-tabs-nav--down{ top:calc(var(--cl-n,7) * var(--cl-tab-h,3.34rem) + (var(--cl-n,7) - 1) * var(--cl-tab-gap,.4rem) - 1.6rem); }
.cl-tabs-nav:hover{ background:rgba(255,255,255,.2); }
.cl-tabs-nav--down:hover{ transform:translateX(-50%) translateY(2px); }
.cl-tabs-nav--up:hover{ transform:translateX(-50%) translateY(-2px); }
.cl-tabs-nav[hidden]{ display:none; }
 
.cl-tabs-link{
  display:none; align-items:center; gap:.4rem;
  margin-top:.2rem; padding:.5rem .3rem;
  font-family:var(--font-primary);
  font-weight:600; font-size:.92rem; line-height:1;
  color:var(--gold-soft,#d4a853); text-decoration:none;
  transition:gap .25s ease, opacity .25s ease;
}
.cl-tabs-wrap--overflow .cl-tabs-link,
.cl-tabs-wrap.has-more .cl-tabs-link{ display:inline-flex; }
.cl-tabs-link:hover{ gap:.65rem; opacity:.85; }
.cl-tabs-link__arrow{ transition:transform .25s ease; display:inline-block; }
.cl-tabs-link:hover .cl-tabs-link__arrow{ transform:translateX(3px); }
.cl-tab{
  appearance:none; border:0; cursor:pointer;
  flex:0 0 auto;
  text-align:left; padding:.8rem 1.4rem;
  font-family:var(--font-primary);
  font-weight:500; font-size:clamp(1.05rem,1.5vw,1.35rem); line-height:1.2;
  color:rgba(255,255,255,.9);
  border-radius:100px;
  background:rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
  position:relative;
  transition:color .3s ease, background .3s ease, border-color .3s ease;
}
 
/* ══ Apple-Style Reveal: Kugel → breit → Text → Stagger nach unten ══ */
.cl-tabs-wrap.cl-stagger{ --cl-stack-h:3.74rem; --cl-pill-circle:3.34rem; }
 
.cl-tabs-wrap.cl-stagger .cl-tab{
  opacity:0;
  max-width:var(--cl-pill-circle);
  padding-left:0; padding-right:0;
  overflow:hidden; white-space:nowrap;
  transform:translate(-110px, calc(var(--cl-i, 0) * (var(--cl-stack-h) * -1)));
  transform-origin:left center;
  z-index:calc(var(--cl-n-total, 20) - var(--cl-i, 0));
  transition:
    color .3s ease, background .3s ease, border-color .3s ease,
    opacity .35s ease,
    transform .6s cubic-bezier(.34,1.56,.64,1),
    max-width .5s cubic-bezier(.22,1,.36,1),
    padding .5s cubic-bezier(.22,1,.36,1);
  transition-delay:
    0s, 0s, 0s,
    calc(var(--cl-i, 0) * .08s),
    calc(var(--cl-i, 0) * .08s),
    calc(.4s + var(--cl-i, 0) * .08s),
    calc(.4s + var(--cl-i, 0) * .08s);
  will-change:transform, opacity, max-width;
}
.cl-tabs-wrap.cl-stagger .cl-tab__label{
  display:inline-block;
  opacity:0;
  transform:translateX(8px);
  transition:opacity .4s ease, transform .4s ease;
  transition-delay:0s;
}
 
.cl-tabs-wrap.cl-stagger.is-revealed .cl-tab{
  opacity:1;
  max-width:320px;
  padding-left:1.4rem; padding-right:1.4rem;
  transform:translate(0,0);
}
.cl-tabs-wrap.cl-stagger.is-revealed .cl-tab__label{
  opacity:1;
  transform:translateX(0);
  transition-delay:calc(.95s + var(--cl-i, 0) * .08s);
}
.cl-tabs-wrap.cl-stagger.stagger-done .cl-tab{
  max-width:none;
  transition:color .3s ease, background .3s ease, border-color .3s ease;
}
.cl-tabs-wrap.cl-stagger.stagger-done .cl-tab__label{
  transition:none;
}
 
@media (prefers-reduced-motion: reduce){
  .cl-tabs-wrap.cl-stagger .cl-tab,
  .cl-tabs-wrap.cl-stagger .cl-tab__label{ opacity:1; transform:none; max-width:320px; padding-left:1.4rem; padding-right:1.4rem; transition:color .3s ease, background .3s ease, border-color .3s ease; }
}
.cl-tab:hover{ color:#fff; background:rgba(255,255,255,.14); }
.cl-tab.is-active{
  color:#1a1410; font-weight:600;
  background:var(--gold-soft,#d4a853);
  border-color:transparent;
}
 
.cl-slide__cap{
  position:absolute; left:220px; right:0; bottom:0; z-index:4;   /* immer eingerückt → Pill-Spalte links frei */
  padding:clamp(2rem,5vw,4rem) clamp(2rem,5vw,4.5rem);
  transition:left .4s cubic-bezier(.4,0,.2,1);
}
.cl-slide__cap > *{ max-width:680px; }
 
.cl-slide__title{
  font-family:var(--font-serif); 
  font-weight:400;
  font-size:var(--text-2xl); 
  
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.cl-slide__text{
  font-family:var(--font-primary);
  font-weight:400; 
  font-size: var(--text-base);
  line-height:1.55;
  max-width:48ch; 
  opacity:1;
  margin-bottom:.4em;
  text-shadow:0 1px 16px rgba(0,0,0,.55);
}
.cl-slide__link{
  display:inline-block; margin-top:1.2rem;
  font-family:var(--font-primary);
  font-weight:600; font-size:1rem; line-height:1;
  color:var(--gold-soft,#d4a853); text-decoration:none;
}
.cl-slide__link::after{ content:" →"; }
 
.cl-slide__product{
  position:absolute; right:clamp(1.5rem,3vw,3rem); top:clamp(1.5rem,4vh,3rem);
  z-index:5;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1.2rem;
  font-family:var(--font-primary);
  font-weight:600; font-size:.9rem; line-height:1;
  color:#fff; text-decoration:none;
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:100px;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.cl-slide__product:hover{
  background:var(--gold-soft,#d4a853); color:#1a1410;
  border-color:transparent; transform:translateY(-2px);
}
.cl-slide__product-icon{ display:inline-flex; }
 
@media (max-width:820px){
  .cl-viewer{ height:min(72vh, 620px); min-height:480px; }
 
  .cl-tabs-wrap.cl-stagger{ 
    --cl-stack-w:6rem; 
    --cl-arrow-space: 0.3rem;
  }
  .cl-tabs-wrap.cl-stagger .cl-tab{
    transform:translate(calc(var(--cl-i, 0) * (var(--cl-stack-w) * -1)), 0);
  }
  .cl-tabs-wrap.cl-stagger.is-revealed .cl-tab{
    transform:translate(0, 0);
  }
 
  .cl-tabs-wrap{
    left:0; right:0; bottom:0; top:auto;
    max-height:none; width:100%; gap:0;
    z-index:6;
  }
 
  .cl-tabs{
    flex-direction:row; gap:.5rem;
    max-height:none; 
    max-width:none; 
    width:100% !important; /* HIER IMPORTANT, Sonst geht der scrolling wrapper nicht bei mobile */
    overflow-x:auto; 
    overflow-y:hidden;
    padding:0 0 1.1rem 0;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .cl-tabs::-webkit-scrollbar{ display:none; }
  .cl-tabs::before, .cl-tabs::after{
    content:""; flex:0 0 clamp(1rem,4vw,1.5rem);
  }
  .cl-tab{ flex:0 0 auto; padding:.6rem 1.1rem; font-size:.95rem; }
 
  .cl-tabs-nav, .cl-tabs-link{ display:none; }
 
  .cl-slide__cap{ left:0; max-width:none; padding:2rem 1.5rem 6.5rem; }   /* Mobile: volle Breite (Tabs unten als Leiste) */
 
  .cl-slide__product{ right:1.25rem; top:1.25rem; padding:.55rem 1rem; font-size:.8rem; }
}