/* ================= Prosito · Festmomente (festmomente.js, Oli 24.10.2026) ================= */
@property --folie-auto{syntax:"<percentage>";inherits:true;initial-value:0%}
/* ---------- Umschlag mit Wachssiegel (über der Startseite, z 97) ---------- */
#llumschlag{position:fixed;inset:0;z-index:97;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,.25),rgba(0,0,0,.7));
  opacity:0;transition:opacity .45s ease;cursor:pointer;-webkit-tap-highlight-color:transparent;perspective:1100px}
#llumschlag.da{opacity:1}
/* Startseite darunter wartet still, bis der Umschlag offen ist (kein Text unter dem Umschlag) */
body.umschlag-an #splash>*:not(.sl-deko){opacity:0!important;transition:none}#llumschlag.weg{opacity:0}
.um-buehne{display:flex;flex-direction:column;align-items:center;gap:22px}
.um-env{position:relative;width:min(82vw,400px);aspect-ratio:10/7;transform:translateY(24px) scale(.94);transition:transform .9s cubic-bezier(.2,.9,.2,1);transform-style:preserve-3d}
#llumschlag.da .um-env{transform:none}
.um-env>div{position:absolute;left:0;right:0}
.um-hinten{inset:0;border-radius:6px;overflow:hidden;box-shadow:0 26px 50px rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.3)}
.um-hinten svg,.um-vorne svg,.um-klappe svg{width:100%;height:100%;display:block}
.um-karte{left:6%!important;right:6%!important;top:6%;height:88%;border-radius:4px;background:var(--um-karte);color:var(--um-karte-t);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8%;
  box-shadow:0 2px 10px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.08);transition:transform 1s cubic-bezier(.2,.8,.2,1) .95s;z-index:1;padding:6%;text-align:center}
.um-karte img{max-width:62%;max-height:34%;object-fit:contain}
.um-karte b{font:700 clamp(15px,4.4vw,22px)/1.15 "Playfair Display",Georgia,serif;letter-spacing:.01em}
.um-stern{font-size:28px;opacity:.9}
.um-vorne{inset:0;z-index:2;border-radius:0 0 6px 6px;overflow:hidden}
.um-vorne svg path:first-child{filter:drop-shadow(0 -2px 3px rgba(0,0,0,.12))}
.um-fuer{position:absolute;left:0;right:0;bottom:12%;text-align:center;font:400 clamp(26px,8vw,40px)/1 "Great Vibes",cursive;color:var(--um-tinte)}
.um-klappe{top:0;height:66%;z-index:3;transform-origin:50% 0;transition:transform .75s cubic-bezier(.5,0,.3,1) .35s,z-index 0s linear .7s;transform-style:preserve-3d}
/* Außen- und Innenseite der Klappe wechseln in der Mitte der Drehung (ohne backface-visibility – robust auch in Safari) */
.um-klappe>svg{filter:drop-shadow(0 3px 3px rgba(0,0,0,.18));transition:opacity 0s linear .72s}
.um-klappe-innen{position:absolute;inset:0;transform:scaleY(-1);opacity:0;transition:opacity 0s linear .72s}
#llumschlag.auf .um-klappe>svg{opacity:0}#llumschlag.auf .um-klappe-innen{opacity:1}
.um-siegel{left:50%!important;right:auto!important;top:66%;width:22%;aspect-ratio:1;transform:translate(-50%,-58%);z-index:4;transition:transform .45s ease,opacity .45s ease;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.um-siegel svg{width:100%;height:100%;display:block}
#llumschlag.auf .um-siegel{transform:translate(-50%,-58%) scale(1.25) rotate(-14deg);opacity:0}
#llumschlag.auf .um-klappe{transform:rotateX(180deg);z-index:0}
#llumschlag.auf .um-karte{transform:translateY(-58%)}
#llumschlag.mit-design.auf .um-karte{transform:translateY(-70%)}
.um-tipp{margin:0;color:rgba(255,255,255,.82);font:600 14px/1 system-ui,-apple-system,sans-serif;letter-spacing:.04em;text-shadow:0 1px 3px rgba(0,0,0,.6);transition:opacity .4s}
#llumschlag.auf .um-tipp{opacity:0}
@media (prefers-reduced-motion:reduce){#llumschlag{display:none}}

/* ---------- Goldfolie im Titel ---------- */
body.fx-folie .buehne .b-titel{background:linear-gradient(105deg,var(--fo1) 0%,var(--fo2) 22%,var(--fo3) 34%,var(--fo2) 46%,var(--fo1) 62%,var(--fo2) 80%,var(--fo1) 100%);background-size:280% 100%;
  background-position:calc(var(--folie-auto) + var(--neigung,0) * 38%) 50%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35)) drop-shadow(0 2px 12px rgba(0,0,0,.3));animation:folieSchimmer 7s ease-in-out infinite alternate}
body.b-hellgrund.fx-folie .buehne .b-titel{filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
:root.neigung-echt body.fx-folie .buehne .b-titel{animation:none;--folie-auto:50%}
@keyframes folieSchimmer{from{--folie-auto:10%}to{--folie-auto:90%}}
/* Der Name (eigene Ebene wegen der Schreib-Animation) bekommt denselben Folienglanz */
body.fx-folie .buehne .b-titel .b-name{background:inherit;background-size:280% 100%;background-position:inherit;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@media (prefers-reduced-motion:reduce){body.fx-folie .buehne .b-titel{animation:none;--folie-auto:45%}}

/* ---------- Handschrift: Name wird geschrieben ---------- */
.b-name{font-family:"Great Vibes",cursive;font-weight:400;font-size:1.28em;line-height:.9;display:inline-block;padding:0 .08em .06em;vertical-align:-.04em}
.b-name.schreibt{clip-path:inset(-20% 100% -30% 0);animation:nameSchreiben 1.9s cubic-bezier(.45,.05,.4,1) .55s forwards}
@keyframes nameSchreiben{to{clip-path:inset(-20% -6% -30% 0)}}
@media (prefers-reduced-motion:reduce){.b-name.schreibt{animation:none;clip-path:none}}

/* ---------- Eleganter Countdown ---------- */
.b-chip.b-count{display:inline-flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums;padding-left:14px;padding-right:14px}
.b-count b{font:700 16px/1 "Playfair Display",Georgia,serif;letter-spacing:.02em}
.b-count small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.86;margin-right:1px}
.b-count i{font-style:normal;opacity:.5;margin:0 1px}
@media (max-width:350px){.b-count b{font-size:14px}.b-count small{font-size:9.5px}.b-chip.b-count{gap:3px;padding-left:10px;padding-right:10px}}

/* ---------- Papier mit Prägung (Kartenstil „Papier“) ---------- */
:root[data-karten=papier] body.gast .karte{background-image:var(--papier),linear-gradient(170deg,rgba(255,255,255,.05),rgba(0,0,0,.05));background-blend-mode:overlay,normal;background-size:220px 220px,auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.04),0 12px 30px rgba(0,0,0,.28);-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-karten=papier] body.gast:not(.b-hellgrund) .karte h2{text-shadow:0 -1px 0 rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.12)}
:root[data-karten=papier] body.gast.b-hellgrund .karte h2{text-shadow:0 1px 0 rgba(255,255,255,.8),0 -1px 0 rgba(0,0,0,.12)}