/* —— Hero: Flex + fluid Viewport (min-height 100svh, kein fixed height) —— */
/* Landing: statischer Header vor #dc-root – fixed, damit Inhalt nicht darüber scrollt */
html:has(body.has-landing-static-hero),
body.has-landing-static-hero {
  height: auto !important;
  min-height: 100%;
  background: #3A241C;
}

body.has-landing-static-hero > .dc-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 200;
}

body.has-landing-static-hero > .dc-hero-collage {
  position: relative;
  z-index: 0;
  min-height: 100svh;
}

body.has-landing-static-hero #dc-root,
body.has-landing-static-hero #dc-root > .sc-host {
  position: relative;
  height: auto !important;
  min-height: 0;
  background: #FFFFFF;
}

.dc-hero-collage{
  position:relative;
  width:100%;
  padding:0;
  margin:0;
  background:#3A241C;
  overflow:visible;
  min-height:100vh;
  min-height:calc(100svh - var(--dc-header-h, 124px));
  height:auto;
  display:flex;
  flex-direction:column;
}
.dc-hero-collage-inner{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  width:100%;
  min-height:inherit;
  margin:0;
  max-width:none;
}
.dc-hero-collage-main{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
  width:100%;
  min-height:inherit;
  gap:clamp(1rem, 3vh, 2.5rem);
  padding:clamp(1.25rem, 5vh, 4rem) clamp(1rem, 5vw, 3rem) clamp(3.5rem, 9vh, 5.5rem);
  box-sizing:border-box;
  overflow:hidden;
  background:#3A241C;
  text-align:center;
}
.dc-hero-collage-media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.dc-hero-collage-media__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
.dc-hero-collage-main::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top,rgba(20,12,8,0.72) 0%,rgba(20,12,8,0.28) 48%,rgba(20,12,8,0.18) 100%);
  pointer-events:none;
}
.dc-hero-collage-logo{
  display:flex;
  position:relative;
  z-index:2;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:min(56rem, 100%);
  padding:0 clamp(1rem, 4vw, 2.5rem);
  box-sizing:border-box;
  pointer-events:none;
}
.dc-hero-collage-logo-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
}
.dc-hero-collage-logo-stage{
  position:relative;
  width:100%;
  min-height:clamp(7rem, 18vw, 12rem);
  display:flex;
  align-items:center;
  justify-content:center;
}
.dc-hero-collage-logo-stage::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:clamp(24rem, 56vw, 44rem);
  max-width:100%;
  aspect-ratio:220 / 52;
  background:#E7D7B6;
  -webkit-mask-image:url('/assets/logo.png');
  mask-image:url('/assets/logo.png');
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  opacity:1;
  visibility:visible;
  pointer-events:none;
}
.dc-hero-collage-logo-tagline{
  display:none;
  margin:0;
  font-family:'Monsieur La Doulaise',cursive;
  font-weight:400;
  font-size:clamp(2rem, 10vw, 2.75rem);
  line-height:1.05;
  letter-spacing:0;
  color:#E7D7B6;
  text-align:center;
}
@media (prefers-reduced-motion:reduce){
  .dc-hero-collage-copy,
  .dc-hero-collage-deferred{
    transition:none !important;
  }
  .dc-hero-collage:not(.dc-hero-collage--revealed) .dc-hero-collage-deferred{
    opacity:1;
    visibility:visible;
    max-height:none;
    overflow:visible;
    transform:none;
    pointer-events:auto;
  }
}
.dc-hero-collage:not(.dc-hero-collage--revealed) .dc-hero-collage-deferred{
  opacity:0;
  visibility:hidden;
  max-height:0;
  overflow:hidden;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  pointer-events:none;
  transform:translateY(14px);
}
.dc-hero-collage--revealed .dc-hero-collage-deferred{
  opacity:1;
  visibility:visible;
  max-height:40rem;
  overflow:visible;
  transform:translateY(0);
  pointer-events:auto;
  transition:opacity 0.55s ease, transform 0.55s ease, max-height 0.55s ease, visibility 0s linear 0s;
}
.dc-hero-collage-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(0.75rem, 2vh, 1.5rem);
  width:min(56rem, 100%);
  max-width:56rem;
  margin:0;
  padding:0;
  color:#FFFBF7;
  box-sizing:border-box;
  text-align:center;
  pointer-events:auto;
}
.dc-hero-collage-copy > *{
  flex:0 0 auto;
  width:100%;
}
.dc-hero-collage-title{
  margin:0 auto;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.2em;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:var(--dc-fs-h2);
  line-height:1.15;
  letter-spacing:-0.01em;
  color:#FFFBF7;
  text-align:center;
  text-wrap:balance;
  max-width:46rem;
}
.dc-hero-collage-title__accent{
  display:block;
  font-family:'Monsieur La Doulaise',cursive;
  font-weight:400;
  font-size:clamp(2.75rem, 6vw, 4.5rem);
  line-height:1.05;
  letter-spacing:0;
  color:#E7D7B6;
}
.dc-hero-collage-title__line{
  display:block;
  font-family:'Fraunces',serif;
  font-weight:300;
}
.dc-hero-collage-lead{
  margin:0 auto;
  padding:0;
  font-family:'Inter Tight',sans-serif;
  font-weight:400;
  font-size:var(--dc-fs-lead);
  line-height:1.7;
  color:rgba(255,251,247,0.9);
  text-align:center;
  text-wrap:balance;
  max-width:60ch;
}
.dc-hero-collage-ctas{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(0.75rem, 2vw, 1.5rem);
  width:100%;
}
.dc-hero-collage-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.55em;
  text-align:center;
  box-sizing:border-box;
  border-radius:3px;
  font-weight:600;
  line-height:1.35;
  text-decoration:none !important;
  max-width:100%;
  width:auto;
  padding:clamp(14px, 1.4vw, 18px) clamp(20px, 2vw, 28px);
  font-size:clamp(15px, 1.15vw, 18px);
  pointer-events:auto;
  position:relative;
  z-index:1;
}
.dc-hero-collage-cta::after{
  content:"";
  display:inline-block;
  width:0.45em;
  height:0.45em;
  margin-left:0.15em;
  border-right:2px solid currentColor;
  border-top:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  flex-shrink:0;
  transition:transform 0.18s ease;
}
.dc-hero-collage-cta:hover::after{
  transform:rotate(45deg) translate(2px, -3px);
}
.dc-hero-collage-cta--primary{
  background:transparent !important;
  color:#FFFBF7 !important;
  border:1px solid rgba(231,215,182,0.65) !important;
}
.dc-hero-collage-cta--ghost{
  border:1px solid rgba(255,251,247,0.9) !important;
  color:#FFFBF7 !important;
  background:rgba(20,12,8,0.28) !important;
}
.dc-hero-collage-cta--primary:hover,
.dc-hero-collage-cta--primary:focus-visible{
  background:transparent !important;
  color:#E7D7B6 !important;
  border-color:#E7D7B6 !important;
}
.dc-hero-collage-cta--ghost:hover{
  background:#FFFBF7 !important;
  color:#3A241C !important;
}
.dc-hero-collage-side,
.dc-hero-collage-mobile-thumbs{display:none !important;}

@media (max-height:500px){
  .dc-hero-collage,
  .dc-hero-collage-inner,
  .dc-hero-collage-main{
    min-height:auto;
  }
  .dc-hero-collage-main{
    padding-block:2rem;
    gap:clamp(0.75rem, 2vh, 1.25rem);
  }
  .dc-hero-collage-logo-stage::after{
    width:clamp(16rem, 44vw, 28rem);
  }
}

@media (min-width:1600px){
  .dc-hero-collage-cta{
    font-size:18px;
    padding:18px 30px;
  }
}

@media (min-width:1920px){
  .dc-hero-collage-cta{
    font-size:19px;
    padding:20px 34px;
  }
}

@media (max-width:768px){
  .dc-hero-collage:not(.dc-hero-collage--revealed) .dc-hero-collage-deferred,
  .dc-hero-collage .dc-hero-collage-deferred{
    opacity:1 !important;
    visibility:visible !important;
    max-height:none !important;
    overflow:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    transition:none !important;
  }
  .dc-hero-collage{
    height:auto !important;
    min-height:0 !important;
    overflow:visible;
    background:#333333 !important;
  }
  .dc-hero-collage-inner,
  .dc-hero-collage-main{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    gap:0 !important;
    padding:0 !important;
  }
  .dc-hero-collage-media{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 / 1;
  }
  .dc-hero-collage-media__video{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover;
    object-position:center center;
  }
  .dc-hero-collage-main::after{
    display:block !important;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    aspect-ratio:1 / 1;
    height:auto;
    inset:auto;
    z-index:1;
    background:rgba(20,12,8,0.28);
    pointer-events:none;
  }
  .dc-hero-collage-logo{
    display:flex !important;
    position:absolute !important;
    top:0;
    left:0;
    width:100%;
    aspect-ratio:1 / 1;
    height:auto;
    z-index:2;
    flex-direction:column !important;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    padding:0 20px 10% 20px;
    box-sizing:border-box;
  }
  .dc-hero-collage-logo-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(0.5rem, 2.5vw, 1rem);
    width:100%;
    max-width:min(56rem, 100%);
  }
  .dc-hero-collage-logo-stage{
    min-height:0;
    width:100%;
  }
  .dc-hero-collage-logo-tagline{
    display:block;
    width:100%;
    max-width:20rem;
    text-wrap:balance;
  }
  .dc-hero-collage-logo-stage::after{
    width:clamp(12rem, 72vw, 37.5rem);
    position:relative;
    left:auto;
    top:auto;
    transform:none;
  }
  .dc-hero-collage-copy{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:none !important;
    gap:clamp(0.75rem, 2vh, 1.25rem);
    padding:28px var(--dc-page-gutter, 20px) 36px !important;
    box-sizing:border-box;
    background:#333333 !important;
    color:#F5F3EF !important;
    z-index:3;
  }
  .dc-hero-collage-title{
    color:#F5F3EF !important;
    max-width:none;
  }
  .dc-hero-collage-title__accent{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }
  .dc-hero-collage-lead{
    color:rgba(245,243,239,0.82) !important;
    max-width:60ch;
  }
  .dc-hero-collage-ctas{
    flex-direction:column !important;
    align-items:center !important;
    gap:clamp(1rem, 2.5vw, 1.5rem);
  }
  .dc-hero-collage-cta{
    width:auto;
    max-width:100%;
    color:#F5F3EF !important;
  }
  .dc-hero-collage-cta--primary{
    background:transparent !important;
    border:1px solid rgba(231,215,182,0.65) !important;
    color:#FFFBF7 !important;
  }
  .dc-hero-collage-cta--ghost{
    background:transparent !important;
    border:none !important;
    border-bottom:1px solid #B8A07A !important;
    color:#F5F3EF !important;
  }
  .dc-hero-collage-cta--primary:hover,
  .dc-hero-collage-cta--primary:focus-visible{
    background:transparent !important;
    color:#E7D7B6 !important;
    border-color:#E7D7B6 !important;
  }
  .dc-hero-collage-cta--ghost:hover,
  .dc-hero-collage-cta--ghost:focus-visible{
    background:transparent !important;
    color:#E7D7B6 !important;
    border-bottom-color:#E7D7B6 !important;
  }
}
.dc-hero-collage .dc-hero-scroll{display:none;}
@media (min-width:769px){
  .dc-hero-collage .dc-hero-scroll{
    position:absolute;left:50%;bottom:clamp(0.75rem,2vh,1.25rem);z-index:3;
    display:flex;flex-direction:column;align-items:center;gap:8px;
    transform:translateX(-50%);color:rgba(255,251,247,0.85);
    text-decoration:none;transition:color 0.2s ease,opacity 0.2s ease;
  }
  .dc-hero-collage .dc-hero-scroll:hover,.dc-hero-collage .dc-hero-scroll:focus-visible{color:#E7D7B6;outline:none;}
  .dc-hero-collage .dc-hero-scroll__line{display:block;width:1px;height:22px;background:currentColor;opacity:0.7;transform-origin:top center;animation:dc-hero-scroll-line 1.8s ease-in-out infinite;}
  .dc-hero-collage .dc-hero-scroll__icon{width:22px;height:22px;animation:dc-hero-scroll-chevron 1.8s ease-in-out infinite;}
}
@keyframes dc-hero-scroll-line{0%,100%{transform:scaleY(0.55);opacity:0.35;}50%{transform:scaleY(1);opacity:0.85;}}
@keyframes dc-hero-scroll-chevron{0%,100%{transform:translateY(0);opacity:0.55;}50%{transform:translateY(4px);opacity:1;}}