/* Weihnachts-Startbild der Startseite. Erzeugt von werkzeuge/startbild_bauen.py, nicht von Hand ändern.
   Höhe: Fensterhöhe abzüglich Menüleiste (89 px gemessen am 13.11.2026), mindestens 560, höchstens 1000 px.
   Das Titelbild steht rechts in voller Höhe und in seinem Seitenverhältnis 1371:1600, also unbeschnitten. Der Himmel
   links ist auf den linken Bildrand abgestimmt (#0d1120, am Original gemessen). Funkeln nur per CSS. */
.p-startbild{--h:clamp(560px,calc(100svh - 89px),1000px);position:relative;height:var(--h);overflow:hidden;margin:0;
  background:linear-gradient(rgba(13,17,32,.84),rgba(13,17,32,.84)),url(himmel.webp) 30% 50%/cover,#0d1120;font-family:'Jost',sans-serif;text-align:left}
.p-startbild::before{content:"";position:absolute;inset:0;background:linear-gradient(270deg,#0d1120 0%,#0d1120 calc(var(--h)*.8),rgba(13,17,32,.5) calc(var(--h)*1.2),rgba(13,17,32,0) 85%)}
.p-startbild .bild{position:absolute;top:0;right:0;bottom:0;aspect-ratio:1371/1600;z-index:1}
.p-startbild .bild img{display:block;width:100%;height:100%;max-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 3%,rgba(0,0,0,.8) 6.5%,#000 9.5%),linear-gradient(180deg,transparent 0%,#000 7%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 3%,rgba(0,0,0,.8) 6.5%,#000 9.5%),linear-gradient(180deg,transparent 0%,#000 7%);mask-composite:intersect}
.p-startbild .himmel,.p-startbild .himmel-m,.p-startbild .himmel-b{position:absolute;inset:0;z-index:2;pointer-events:none}
.p-startbild .himmel-m,.p-startbild .himmel-b{display:none}
.p-startbild .txt{position:absolute;left:0;top:0;bottom:0;z-index:3;width:calc(100% - var(--h)*.82);max-width:52%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:40px 3% 40px 8%}
.p-startbild img.m{height:44px;width:auto;max-width:100%;align-self:flex-start;margin:0 0 34px;filter:drop-shadow(0 2px 10px rgba(10,20,32,.55))}
.p-startbild.p-startbild h1{font-family:'Jost',sans-serif;font-size:11px;font-weight:500;font-style:normal;letter-spacing:.3em;text-transform:uppercase;color:#AAA59D;margin:0 0 26px;padding:0;line-height:1.6}
.p-startbild .ov{display:flex;align-items:center;gap:.8rem;font-size:11px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:#C9A96E;margin:0 0 22px;line-height:1.4;white-space:nowrap}
.p-startbild .ov i{display:block;width:46px;height:1px;background:linear-gradient(90deg,#C9A96E,transparent)}
.p-startbild .ov i:first-child{display:none}
.p-startbild .h{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(44px,4.3vw,64px);line-height:1.04;color:#E5CCAA;margin:0 0 24px;letter-spacing:0}
.p-startbild .h em{font-style:italic;color:#C9A96E}
.p-startbild .t{font-size:17px;line-height:1.65;font-weight:300;color:#E7E4DF;opacity:.92;margin:0 0 36px;max-width:29em}
.p-startbild .kn{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.p-startbild.p-startbild a.b{display:inline-block;background:#C9A96E;border:1px solid #C9A96E;border-radius:0;color:#0A1420;font-size:11px;font-weight:600;letter-spacing:.22em;line-height:1.4;text-transform:uppercase;padding:17px 34px;text-decoration:none;transition:background .2s,color .2s}
.p-startbild.p-startbild a.b:hover,.p-startbild.p-startbild a.b:focus-visible{background:transparent;color:#C9A96E}
.p-startbild .n{font-size:12px;letter-spacing:.06em;line-height:1.5;color:#AAA59D;margin:24px 0 0}
.p-startbild .n br{display:none}   /* Umbruch nach „Partner-Juwelieren“ nur bis 900 px (Robert 13.11.2026) */
/* Funkeln */
.p-startbild .st{position:absolute;transform:rotate(var(--d));opacity:var(--o);animation:p-sb-glimmen 5s ease-in-out infinite}
@keyframes p-sb-glimmen{0%,100%{opacity:calc(var(--o)*.72);transform:rotate(var(--d)) scale(.96)}50%{opacity:1;transform:rotate(var(--d)) scale(1.05)}}
.p-startbild .lp{position:absolute;border-radius:50%;background:#FFF1CF;box-shadow:0 0 6px 2px rgba(255,226,160,.55),0 0 14px 4px rgba(201,169,110,.25);animation:p-sb-funkeln 4s ease-in-out infinite}
@keyframes p-sb-funkeln{0%,100%{opacity:.12;transform:scale(.6)}45%{opacity:1;transform:scale(1.25)}60%{opacity:.75;transform:scale(1)}}
.p-startbild .gl{position:absolute;margin:-8px 0 0 -8px;filter:drop-shadow(0 0 6px rgba(255,226,160,.9));animation:p-sb-blitzen 7s ease-in-out infinite;opacity:0}
@keyframes p-sb-blitzen{0%,78%,100%{opacity:0;transform:scale(.2) rotate(0deg)}86%{opacity:1;transform:scale(1.15) rotate(20deg)}92%{opacity:.5;transform:scale(.7) rotate(35deg)}}
@media(prefers-reduced-motion:reduce){.p-startbild .st,.p-startbild .lp,.p-startbild .gl{animation:none}.p-startbild .lp{opacity:.6}}
/* Tablet hoch und Handy: Bild oben in voller Breite, Text darunter */
@media(max-width:900px){
 .p-startbild{height:auto;background:#0d1120}
 .p-startbild::before,.p-startbild .himmel,.p-startbild img.m{display:none}
 .p-startbild .n br{display:inline}
 .p-startbild .bild{position:relative;width:100%;max-width:560px;margin:0 auto}
 .p-startbild .bild img{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 92%,transparent 100%);-webkit-mask-composite:source-over;mask-image:linear-gradient(180deg,#000 0%,#000 92%,transparent 100%);mask-composite:add}
 .p-startbild .txt{position:relative;width:auto;max-width:none;padding:10px 24px 44px;text-align:center;align-items:center;
   background:linear-gradient(rgba(13,17,32,.88),rgba(13,17,32,.92)),url(himmel.webp) center/cover}
 .p-startbild .himmel-m,.p-startbild .himmel-b{display:block}
 /* Schriftzug am Handy oben im Bild wie auf der Katalogseite (.masthead dort: links oben, Höhe clamp(34px,11vw,50px), weicher
    dunkler Schleier darunter, Schatten). Robert 13.11.2026. Steht als letztes Element der Ebene über den Lichtpunkten. */
 .p-startbild .himmel-b::before{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(180deg,rgba(10,20,32,.5) 0%,rgba(10,20,32,.28) 45%,rgba(10,20,32,.08) 75%,rgba(10,20,32,0) 100%)}
 .p-startbild .bild .himmel-b img.fm{position:absolute;top:18px;left:20px;width:auto;height:clamp(34px,11vw,50px);max-width:calc(100% - 40px);object-fit:contain;-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 2px 10px rgba(10,20,32,.55))}
 .p-startbild.p-startbild h1{font-size:10px;letter-spacing:.24em;margin-bottom:18px}
 .p-startbild .ov{margin-bottom:14px}.p-startbild .ov i:first-child{display:block;background:linear-gradient(270deg,#C9A96E,transparent)}
 .p-startbild .h{font-size:36px;margin-bottom:14px}.p-startbild .t{font-size:16px;margin-bottom:24px}
 .p-startbild .kn{justify-content:center;gap:20px;flex-direction:column}.p-startbild .n{margin-top:22px}
}