/* Gottlieber — same calm palette as the Honold V3 template (black, warm cream, chocolate brown).
   The template's own colours do the work; this layer only handles logos and the AI campaign photography. */
.hero-logo-overlay{display:none!important}

/* Why now: framed photos, no tinted stage */
.why .rennweg-stage,.why .rennweg-stage[data-why-mode]{background:transparent!important}
.why .why-image-shell{overflow:hidden!important;aspect-ratio:4/3!important;width:min(82%,600px)!important;border-radius:18px!important;background:#2a1a14!important}
.why .why-image-art,.why .brand-shell .why-image-art{filter:none!important;padding:0!important;object-fit:cover!important;background:none!important}

/* Wordmark on light vs dark surfaces */
.brand-cues-copy .brandworld-logo.gl-logo{filter:none;width:clamp(150px,13vw,200px)!important}
#conceptCanvas:not([data-concept="heritage"]) .gl-logo{filter:brightness(0)!important;opacity:.85}
.web-topline>img.gl-logo{width:auto!important;height:42px!important}
.communication-main > img.communication-signoff{filter:none!important}

/* Photography fills every slot */
.hero-scene{object-position:50% 55%!important}
.transition-product img{filter:none!important;animation:none!important;width:min(600px,42vw)!important;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:0 30px 70px rgba(40,25,15,.16)}
.web-product-pic{padding:0!important;overflow:hidden;aspect-ratio:4/3!important}
.web-product-pic img{object-fit:cover!important;width:100%!important;height:100%!important;filter:none!important}
.brand-cues-visual img,#conceptImage,#campaignImage,.concept-social-grid .tile.image img{object-fit:cover!important}
.web-copy-panel h4{overflow-wrap:normal!important;word-break:normal!important;font-size:clamp(40px,3.9vw,68px)!important}

/* Social text tiles in the template's warm tones */
.concept-social-grid .tile:nth-child(4){background:linear-gradient(150deg,#7a2a1e,#4e1a12)!important}
.concept-social-grid .tile:nth-child(8){background:linear-gradient(150deg,#3a2a20,#211710)!important}
.concept-social-grid .tile.monogram-tile{background:linear-gradient(150deg,#d4b06a,#a3803f)!important}
.concept-social-grid .tile-mark{color:#2a1a14!important}

/* Light photo (Swiss Edition): dark text for legibility */
.moments-editorial .moment-card:nth-child(1) .moment-image-wash{background:linear-gradient(180deg,rgba(255,255,255,.25) 0%,rgba(255,255,255,0) 30%,rgba(0,0,0,0) 60%,rgba(255,255,255,.35) 100%)!important}
.moments-editorial .moment-card:nth-child(1) .moment-caption-overlay h3,.moments-editorial .moment-card:nth-child(1) .moment-caption-overlay p,.moments-editorial .moment-card:nth-child(1) .moment-caption-overlay>span{color:#1f1a16!important;text-shadow:none!important}

/* Published viewer adds img{max-width:100%}; oversized parallax images must keep their full width */
.parallax-media,.parallax-object,.moment-media>img,.season-photo,.why-image-art{max-width:none!important}

@media(max-width:760px){
  .why .why-image-shell{width:auto!important;left:6%!important;right:6%!important}
  .transition-section .transition-product img{width:88vw!important;max-width:none}
}

/* ===== Feedback 12.10 — photography fits its frames ===== */
/* 1. Hero: photo melts into the black background */
.hero-stage-image{background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
.hero-scene{-webkit-mask-image:radial-gradient(70% 70% at 55% 50%,#000 45%,transparent 100%);mask-image:radial-gradient(70% 70% at 55% 50%,#000 45%,transparent 100%);object-position:50% 50%!important}
.hero-stage-wash{display:none!important}

/* 2. Why now: deep warm black instead of brown */
.why.section-brown{background:#0f0d0c!important}
.why.section-brown::before{background:radial-gradient(55% 50% at 72% 50%,rgba(255,236,214,.06),transparent 70%)!important}
.why .why-image-shell{background:#0f0d0c!important;box-shadow:0 30px 80px rgba(0,0,0,.45)!important}

/* 3. Moments: frames take the photos' own 16:9 shape, whole product visible, centred */
@media(min-width:761px){
  .moments-editorial .moment-media{height:auto!important;min-height:0!important;aspect-ratio:16/9!important;transform:none!important}
  .moments-editorial .moment-card:nth-child(1){width:min(82vw,1240px)!important}
  .moments-editorial .moment-card:nth-child(2){width:min(70vw,1060px)!important}
  .moments-editorial .moment-card:nth-child(3){width:min(70vw,1060px)!important}
}
.moments-editorial .moment-media>img.parallax-media{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important;transform:none!important}
.moment-caption-overlay h3{max-width:min(40%,460px)!important}
.moment-caption-overlay p{max-width:min(34%,400px)!important}

/* 4. "Wir zeigen lieber": bigger, blends into the cream page */
.transition-product img,.transition-section .transition-product img{width:min(760px,48vw)!important;aspect-ratio:16/9;border-radius:0!important;box-shadow:none!important;
  -webkit-mask-image:radial-gradient(72% 70% at 50% 50%,#000 50%,transparent 100%);mask-image:radial-gradient(72% 70% at 50% 50%,#000 50%,transparent 100%)}
.transition-product::before{display:none!important}

/* 5. Communication: full photo, centred, text on a soft shade */
@media(min-width:761px){.communication-main{min-height:0!important;aspect-ratio:16/9}}
.communication-main img#campaignImage{position:absolute!important;inset:0!important;right:auto!important;bottom:auto!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important;opacity:1!important;filter:none!important;z-index:0!important}
.communication-main:after{background:linear-gradient(90deg,rgba(10,8,7,.72) 0%,rgba(10,8,7,.35) 42%,rgba(10,8,7,0) 70%)!important}

/* 6. Seasons: frames match the photos (16:10), no zoom */
@media(min-width:761px){.season-scene{height:auto!important;min-height:0!important;aspect-ratio:16/10}.season-scenes{gap:8vh!important;padding-top:14vh!important;padding-bottom:14vh!important}}
.season-photo-stage .season-photo,.season-photo{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important;transform:none!important}
.season-ghost-overlay{font-size:clamp(48px,6vw,110px)!important}

/* Other frames: centred crops */
.brand-cues-visual img,#conceptImage,.why .why-image-art,.web-product-pic img,.concept-social-grid .tile.image img{object-position:50% 50%!important}
@media(max-width:760px){
  .moments-editorial .moment-media{aspect-ratio:4/5!important}
  .moment-caption-overlay h3,.moment-caption-overlay p{max-width:none!important}
  .transition-product img,.transition-section .transition-product img{width:96vw!important}
  .season-scene{aspect-ratio:4/5!important}
  .communication-main{aspect-ratio:auto}
}

.season-ghost-overlay{font-size:clamp(34px,3.6vw,64px)!important;left:28px!important;top:24px!important}


/* ===== Seamless photography: the section takes the photo's own background colour ===== */
/* Hero: photo fills the right side and dissolves into a background of the same black */
.hero{background:#050507!important}
.hero:after{display:none!important}
@media(min-width:761px){
  .hero-stage,.hero-stage-image{position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:64%!important;height:auto!important;min-height:0!important;margin:0!important;transform:none!important;z-index:1!important}
  .hero-scene{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%);mask-image:linear-gradient(90deg,transparent 0%,#000 32%);object-position:62% 50%!important}
  .hero-copy{position:relative;z-index:3}
}

/* Why now: photo full-bleed on the right, section colour follows the active photo */
.why.section-brown{transition:background-color .6s ease!important;background:#140404!important}
.why.section-brown:has([data-why-mode="digital"]){background:#341d10!important}
.why.section-brown:has([data-why-mode="content"]){background:#060704!important}
.why.section-brown:has([data-why-mode="retail"]){background:#201109!important}
.why.section-brown::before{display:none!important}
.why .why-image-shell,.why .brand-shell,.why .digital-shell,.why .content-shell,.why .retail-shell{
  position:absolute!important;inset:0!important;left:0!important;right:0!important;top:0!important;width:auto!important;height:auto!important;aspect-ratio:auto!important;
  transform:none!important;border-radius:0!important;box-shadow:none!important;outline:0!important;background:transparent!important}
.why .why-image-art{width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%);mask-image:linear-gradient(90deg,transparent 0%,#000 28%)}
@media(min-width:761px){.why.section-brown{padding:0 0 0 var(--mx)!important;min-height:min(92vh,820px)!important;align-items:stretch!important}.why .why-copy{align-self:center!important;padding:110px 0!important}.why .rennweg-stage{min-height:100%!important;margin:0!important}}
.why .why-visual-label{left:auto!important;right:28px!important}

/* "Wir zeigen lieber": section takes the photo's cream, photo dissolves in */
.transition-section{background:#eeddcc!important}
.transition-product img,.transition-section .transition-product img{width:min(860px,52vw)!important;-webkit-mask-image:radial-gradient(75% 75% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(75% 75% at 50% 50%,#000 55%,transparent 100%)}

/* Moments: larger, calmer cards */
@media(min-width:761px){
  .moments-editorial .moment-card:nth-child(n){width:min(86vw,1320px)!important;margin-left:auto!important;margin-right:auto!important}
  .moments-editorial .moment-media{border-radius:14px!important}
}

@media(max-width:760px){
  .hero-stage,.hero-stage-image{aspect-ratio:4/3!important;margin-top:20px!important}
  .hero-scene{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%)}
  .why .rennweg-stage{min-height:320px!important;border-radius:0!important;margin:0 -20px!important}
  .why .why-image-art{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 25%);mask-image:linear-gradient(180deg,transparent 0%,#000 25%)}
  .transition-section .transition-product img{width:100vw!important}
}

.why .rennweg-stage{box-shadow:none!important;border:0!important;border-radius:0!important;overflow:hidden!important}
.why .rennweg-stage::after{display:none!important}


@media(max-width:760px){.transition-section{display:flex!important;flex-direction:column!important;overflow:hidden}.transition-copy{min-width:0;max-width:100%!important}.transition-section .transition-product{width:100%;display:flex;justify-content:center}.transition-section .transition-product img{width:100%!important}}


/* ===== Soft overlays: photos melt in on every edge ===== */
/* Hero: shadow on top, bottom and left in the hero's own black */
.hero-stage{isolation:isolate}
.hero-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,#050507 0%,rgba(5,5,7,0) 18%,rgba(5,5,7,0) 78%,#050507 100%),
             linear-gradient(90deg,#050507 0%,rgba(5,5,7,.6) 18%,rgba(5,5,7,0) 42%)}
/* Why now: same idea in the colour of the active photo */
.why.section-brown{--why-bg:#140404}
.why.section-brown:has([data-why-mode="digital"]){--why-bg:#341d10}
.why.section-brown:has([data-why-mode="content"]){--why-bg:#060704}
.why.section-brown:has([data-why-mode="retail"]){--why-bg:#201109}
.why .why-image-shell::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,var(--why-bg) 0%,transparent 16%,transparent 80%,var(--why-bg) 100%),
             radial-gradient(120% 90% at 65% 50%,transparent 55%,var(--why-bg) 100%)}

/* Light product photos: bigger product, background dissolved into the page */
/* "Wir zeigen lieber" (Hüppen Collection on cream) */
.transition-section .transition-product{position:relative;width:min(900px,54vw);aspect-ratio:4/3;overflow:hidden;
  -webkit-mask-image:radial-gradient(70% 68% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(70% 68% at 50% 50%,#000 55%,transparent 100%)}
.transition-section .transition-product img{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;aspect-ratio:auto!important;
  object-fit:cover!important;object-position:52% 52%!important;transform:scale(1.55)!important;transform-origin:52% 52%;-webkit-mask-image:none!important;mask-image:none!important}
/* Moment 01 (Swiss Edition on white): page colour matches the photo, product larger */
@media(min-width:761px){
  .moments-editorial .moment-card:nth-child(1) .moment-media{border-radius:0!important;background:transparent!important;
    -webkit-mask-image:radial-gradient(75% 80% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(75% 80% at 50% 50%,#000 60%,transparent 100%)}
}
.moments-editorial .moment-card:nth-child(1) .moment-media>img.parallax-media{transform:scale(1.35)!important;transform-origin:50% 48%;object-position:50% 48%!important}
.moments-editorial .moment-card:nth-child(1) .moment-image-wash{background:none!important}
.moments{background:linear-gradient(180deg,#f2eee7 0%,#f6f3ef 12%,#f2eee7 40%)!important}

@media(max-width:760px){
  .transition-section .transition-product{width:100%}
  .transition-section .transition-product img{transform:scale(1.4)!important}
  .moments-editorial .moment-card:nth-child(1) .moment-media>img.parallax-media{transform:scale(1.15)!important}
}

.moments-editorial .moment-card:nth-child(1) .moment-media>img.parallax-media{transform:scale(1.22)!important;transform-origin:50% 56%!important}
@media(min-width:761px){.moments-editorial .moment-card:nth-child(1) .moment-media{-webkit-mask-image:radial-gradient(62% 70% at 50% 52%,#000 62%,transparent 100%)!important;mask-image:radial-gradient(62% 70% at 50% 52%,#000 62%,transparent 100%)!important}}


/* Why now: no hard edge between text side and photo side */
.why .rennweg-stage::before,.why .rennweg-stage::after{content:none!important;display:none!important;background:none!important}
.why .rennweg-stage{overflow:visible!important;background:none!important}
@media(min-width:761px){
  .why .why-image-shell,.why .brand-shell,.why .digital-shell,.why .content-shell,.why .retail-shell{left:-30%!important;right:0!important}
  .why .why-image-art{-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 48%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 48%)}
  .why .why-image-shell::after{background:linear-gradient(180deg,var(--why-bg) 0%,transparent 14%,transparent 84%,var(--why-bg) 100%)!important}
  .why .why-copy{position:relative;z-index:3!important}
}
.why.section-brown{overflow:hidden!important}

/* Why now v3: feathered on every side (no edges anywhere), products at one consistent size */
@media(min-width:761px){
  .why .why-image-shell,.why .brand-shell,.why .digital-shell,.why .content-shell,.why .retail-shell{left:-22%!important;right:-4%!important;top:-6%!important;bottom:-6%!important}
  .why .why-image-art{
    -webkit-mask-image:radial-gradient(ellipse 46% 52% at 62% 52%,#000 40%,rgba(0,0,0,.6) 62%,transparent 100%)!important;
            mask-image:radial-gradient(ellipse 46% 52% at 62% 52%,#000 40%,rgba(0,0,0,.6) 62%,transparent 100%)!important}
  .why .why-image-shell::after{display:none!important}
  .why .brand-shell .why-image-art{transform:scale(.86)!important;transform-origin:62% 55%}
  .why .digital-shell .why-image-art{transform:scale(1.28)!important;transform-origin:63% 52%}
  .why .content-shell .why-image-art{transform:scale(.92)!important;transform-origin:62% 46%}
  .why .retail-shell .why-image-art{transform:scale(1.12)!important;transform-origin:62% 50%}
}
@media(max-width:760px){
  .why .why-image-art{-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 52%,#000 45%,transparent 100%)!important;mask-image:radial-gradient(ellipse 60% 55% at 50% 52%,#000 45%,transparent 100%)!important}
  .why .digital-shell .why-image-art{transform:scale(1.25)}
  .why .retail-shell .why-image-art{transform:scale(1.1)}
}

@media(min-width:761px){.why .why-image-art{-webkit-mask-image:radial-gradient(ellipse 52% 58% at 62% 52%,#000 22%,rgba(0,0,0,.85) 38%,rgba(0,0,0,.5) 58%,rgba(0,0,0,.18) 78%,transparent 100%)!important;mask-image:radial-gradient(ellipse 52% 58% at 62% 52%,#000 22%,rgba(0,0,0,.85) 38%,rgba(0,0,0,.5) 58%,rgba(0,0,0,.18) 78%,transparent 100%)!important}.why .brand-shell .why-image-art{transform:scale(.8)!important}}


/* Moment 01: text stays solid, whole product visible, only the photo's edges fade into the page */
.moments-editorial .moment-card:nth-child(1) .moment-media{-webkit-mask-image:none!important;mask-image:none!important;background:transparent!important;border-radius:0!important;overflow:visible!important}
.moments-editorial .moment-card:nth-child(1) .moment-media>img.parallax-media{transform:none!important;object-fit:contain!important;object-position:50% 50%!important;
  -webkit-mask-image:radial-gradient(ellipse 58% 62% at 52% 50%,#000 55%,rgba(0,0,0,.6) 75%,transparent 100%);mask-image:radial-gradient(ellipse 58% 62% at 52% 50%,#000 55%,rgba(0,0,0,.6) 75%,transparent 100%)}
.moments-editorial .moment-card:nth-child(1) .moment-caption-overlay{z-index:5!important}
.moments-editorial .moment-card:nth-child(1) .moment-caption-overlay h3,.moments-editorial .moment-card:nth-child(1) .moment-caption-overlay p{opacity:1!important;color:#1f1a16!important}

/* ===== Real Gottlieber logos ===== */
.brand-cues-copy .brandworld-logo.gl-logo{width:clamp(170px,14vw,230px)!important;height:auto!important;margin:24px 0 40px!important}
#conceptCanvas[data-concept="editorial"] .brandworld-logo.gl-logo{content:url(assets/logos/sweets-coffee-black.png);filter:none!important;opacity:1!important}
.web-topline>img.gl-logo{height:52px!important}
.communication-main > img.communication-signoff{width:clamp(110px,8vw,150px)!important;height:auto!important}
.social-avatar{background:transparent!important;border:0!important;overflow:visible!important}
.social-avatar .honold-mark,.concept-social-grid .tile-mark{-webkit-mask:none!important;mask:none!important;background:url(assets/logos/gottlieber-cartouche.png) center/contain no-repeat!important;aspect-ratio:416/480!important}
.social-avatar .avatar-mark{width:100%!important;height:100%!important}
.concept-social-grid .tile-mark{width:52%!important}

/* ===== Product symmetry: every product sits at the same height and a similar size ===== */
@media(min-width:761px){
  .why .brand-shell .why-image-art{transform:translateY(-14%) scale(.95)!important;transform-origin:50% 67%!important}
  .why .digital-shell .why-image-art{transform:translateY(0%) scale(.98)!important;transform-origin:50% 53%!important}
  .why .content-shell .why-image-art{transform:translateY(6%) scale(.8)!important;transform-origin:55% 47%!important}
  .why .retail-shell .why-image-art{transform:translateY(-4%) scale(.8)!important;transform-origin:50% 57%!important}
}
/* Moments and seasons: slight zoom gives room to centre each product vertically */
.moments-editorial .moment-card:nth-child(2) .moment-media>img.parallax-media{transform:scale(1.08) translateY(-1%)!important}
.moments-editorial .moment-card:nth-child(3) .moment-media>img.parallax-media{transform:scale(1.12) translateY(-4.5%)!important}
.season-scene:nth-child(1) .season-photo{transform:scale(1.14) translateY(5%)!important}
.season-scene:nth-child(2) .season-photo{transform:scale(1.14) translateY(3%)!important}
.season-scene:nth-child(3) .season-photo{transform:scale(1.14) translateY(-3%)!important}
.season-scene:nth-child(4) .season-photo{transform:scale(1.14) translateY(-6%)!important}
.hero-scene{object-position:50% 57%!important}