/* Rebuild-specific CSS: replaces slick slideshow behaviour and provides
   image placeholders until the real images are generated. */

/* slideshow: in-flow, full viewport, slides stacked + fading like slick */
.slideshow{position:relative;width:100vw;height:100vh;overflow:hidden;background:#000;z-index:0}
.slideshow .slick-list{position:relative;height:100%}
.slideshow .StartContentGrid{position:absolute;inset:0;opacity:0;transition:opacity .5s;z-index:1}
.slideshow .StartContentGrid.slick-current{opacity:1;z-index:2}
.slideshow .StartContentGrid img{height:100vh;width:100vw;object-fit:cover;background:#000}
.slideshow .StartContentGrid .img-ph{height:100vh;width:100vw}

/* image placeholders (no images yet) */
.img-ph{display:block;background:#d8d8d8;position:relative;overflow:hidden}
.img-ph::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;font-family:UnionBold,Helvetica,Arial,sans-serif;font-size:11px;line-height:1.2;color:#8a8a8a}
/* the real slides are bright studio shots – use a light placeholder */
.slideshow .img-ph{background:linear-gradient(160deg,#f2f0ee,#dcd9d6)}
.slideshow .img-ph::after{color:#b0aca8;font-size:13px}

/* grid placeholders behave like .IndexGrid img (height:270px;width:auto) */
.IndexGrid .img-ph{height:270px}
@media screen and (max-width:805px){
  .IndexGrid .img-ph{height:auto;width:100%!important;aspect-ratio:var(--ph-ratio,0.7)}
}
.IndexItem.Shadow .img-ph{box-shadow:1px -1px 8px #b4b4b4}

/* ---- sub pages (danke, zitat, products) ---- */
.subpage{min-height:60vh}
.subhead{padding:2px 0 var(--vertical-margin-2);border-bottom:0}
.subhead .space{margin-left:6px}
.subcontent{margin-top:var(--vertical-margin-3)}
.subcontent h1{font-size:var(--font-size-1);margin-bottom:var(--vertical-margin-2)}
.subcontent p{margin-bottom:var(--vertical-margin-1)}

/* ---- product page ---- */
.ProductPage{display:grid;grid-template-columns:1fr 1fr;grid-gap:24px;margin-top:var(--vertical-margin-2)}
@media screen and (max-width:805px){.ProductPage{grid-template-columns:1fr}}
.ProductPage .pimg img{width:100%;height:auto;display:block}
.ProductInfo h1{font-size:var(--font-size-1);margin-bottom:var(--vertical-margin-1)}
.ProductInfo .pprice{margin-bottom:var(--vertical-margin-2)}
.ProductInfo .pdesc{font-size:var(--font-size-2);line-height:var(--line-height-2);margin-bottom:var(--vertical-margin-2);max-width:46ch}
.buybox{margin-top:var(--vertical-margin-2)}
.buybox input[type=email]{width:60%;max-width:320px;border:2.5px solid #cb3cb8!important}
.buybox input[type=email]::placeholder{color:#cb3cb8;opacity:1}
.buyhint{font-size:var(--font-size-2);color:#7a7a7a;margin-top:6px}
@media screen and (max-width:805px){.buybox input[type=email]{width:100%}}

/* ---- quote (Marcus Aurelius) page ---- */
.zitatwrap{max-width:760px;margin:var(--vertical-margin-3) auto;text-align:center}
.zitatwrap .marcus{width:360px;max-width:80%;height:auto;display:block;margin:0 auto var(--vertical-margin-2)}
.zitatwrap blockquote{font-family:UnionBold;font-size:var(--font-size-1);line-height:var(--line-height-2);margin-bottom:var(--vertical-margin-1)}
.zitatwrap .who{color:#7a7a7a;font-size:var(--font-size-2)}