/* ==========================================================================
   PALAIS – GRAND HÔTEL (Theme royal_velvet)
   Die Rezeption eines Grandhotels an Heiligabend: Lobby, Begrüßungskarte,
   Mahagoni-Postfachschrank, Silbertablett. Gehört zu static/js/palais-hotel.js
   ========================================================================== */

.ph-scene {
  --ph-arch: 50% 50% 6px 6px / 34% 34% 6px 6px;
  --ph-gold: #e2bf74;
  --ph-gold-hi: #f8e3a8;
  --ph-gold-lo: #8a6326;
  --ph-lacquer: #7c1022;
  --ph-lacquer-deep: #3e0710;
  --ph-brass: linear-gradient(145deg, #f7e2a6 0%, #c79a4b 28%, #8d6427 52%, #e3c27c 74%, #9c7333 100%);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

.recipient-page.theme-royal_velvet { position: relative; }
.recipient-page.theme-royal_velvet .calendar-preview-bar,
.recipient-page.theme-royal_velvet .calendar-bottom,
.recipient-page.theme-royal_velvet .mobile-preview-dock { position: relative; z-index: 3; }
.recipient-page.theme-royal_velvet .mobile-preview-dock { position: fixed; }
/* Vorschau-Leiste des Erstellers in einem dunklen Streifen wie die Kopfzeile */
.recipient-page.theme-royal_velvet.is-creator-view .calendar-preview-bar {
  margin-bottom: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 235, 180, .15), 0 0 0 100vmax #170d10;
  clip-path: inset(-42px -100vmax -22px -100vmax);
}

/* ---------- Lobby im Hintergrund ---------- */
.ph-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 38% at 50% -6%, rgba(255, 214, 150, .34), transparent 70%),
    radial-gradient(circle at 12% 30%, rgba(255, 170, 90, .16) 0 4%, transparent 9%),
    radial-gradient(circle at 86% 22%, rgba(255, 196, 120, .14) 0 3%, transparent 8%),
    radial-gradient(circle at 78% 64%, rgba(214, 60, 60, .14) 0 5%, transparent 11%),
    radial-gradient(circle at 20% 76%, rgba(255, 190, 110, .12) 0 4%, transparent 10%),
    radial-gradient(circle at 92% 86%, rgba(255, 220, 160, .12) 0 3%, transparent 8%),
    radial-gradient(circle at 6% 92%, rgba(190, 40, 50, .14) 0 6%, transparent 13%),
    radial-gradient(ellipse 120% 80% at 50% 40%, #3a1712 0%, #1d0b09 55%, #0d0505 100%);
}
.ph-backdrop-img,
.ph-backdrop-shade { display: none; }
.ph-scene.has-lobby .ph-backdrop { background: #1a0c08; overflow: hidden; }
.ph-scene.has-lobby .ph-backdrop-img,
.ph-scene.has-lobby .ph-backdrop-shade { display: block; position: absolute; inset: 0; }
/* Die Lobby mit Tiefenschärfe: identisch zum Endzustand des Scroll-Einstiegs (LOBBY_END in JS) */
.ph-backdrop-img,
.ph-intro-lobby {
  background: var(--ph-lobby) center / cover no-repeat;
  transform-origin: 50% 55%;
}
.ph-backdrop-img { transform: scale(1.22); filter: blur(4px) brightness(.78); }
.ph-backdrop-shade,
.ph-intro-shade {
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 50%, rgba(0, 0, 0, .55) 100%),
    linear-gradient(180deg, rgba(14, 6, 5, .5) 0%, rgba(14, 6, 5, .2) 35%, rgba(14, 6, 5, .62) 100%);
}
.has-lobby .ph-backdrop::after { display: none; }
@media (max-aspect-ratio: 3/4) {
  .ph-backdrop-img,
  .ph-intro-lobby { background-image: var(--ph-lobby-portrait, var(--ph-lobby)); }
}
.ph-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
.ph-chandelier {
  position: absolute;
  left: 50%;
  top: -40px;
  width: 380px;
  height: 260px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 236, 190, .35), transparent 65%);
  filter: blur(6px);
  animation: phBreath 7s ease-in-out infinite;
}
.has-lobby .ph-chandelier, .has-lobby .ph-tree-glow { display: none; }
.ph-tree-glow {
  position: absolute;
  right: -6vw;
  bottom: -10vh;
  width: 42vw;
  height: 80vh;
  background:
    radial-gradient(circle at 40% 30%, rgba(255, 210, 120, .5) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 48%, rgba(255, 90, 80, .45) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 62%, rgba(255, 220, 150, .5) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 70%, rgba(255, 200, 110, .5) 0 2px, transparent 3px),
    radial-gradient(ellipse 50% 60% at 50% 60%, rgba(40, 70, 40, .35), transparent 70%);
  filter: blur(14px);
  opacity: .8;
}

.ph-dust {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

/* ---------- Scroll-Einstieg mit Drehtür ---------- */
.ph-intro {
  position: relative;
  height: 330vh;
  width: 100vw;
  margin: -42px calc(50% - 50vw) 0;
}
.ph-intro-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.ph-intro-lobby,
.ph-intro-shade,
.ph-intro-entrance,
.ph-intro-flash { position: absolute; inset: 0; }
.ph-intro-lobby { transform: scale(1.08); will-change: transform, filter; }
.ph-intro-shade { opacity: 0; }
.ph-intro-entrance {
  background: var(--ph-entrance) center / cover no-repeat;
  transform-origin: 50% 61%;
  will-change: transform, opacity;
}
.ph-intro-flash {
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 58%, rgba(255, 236, 196, 1), rgba(255, 196, 120, .7) 45%, rgba(255, 170, 90, 0) 80%);
}
@media (max-aspect-ratio: 3/4) {
  .ph-intro-entrance { background-image: var(--ph-entrance-portrait, var(--ph-entrance)); transform-origin: 50% 58%; }
}
.ph-intro-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 26vh;
  display: grid;
  gap: 8px;
  text-align: center;
  color: #fff6e2;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .7);
  isolation: isolate;
}
/* Weicher dunkler Lichthof hinter der Begrüßung, damit die feine Schreibschrift
   sich vom hellen Vordach abhebt, ohne dass ein sichtbarer Kasten entsteht */
.ph-intro-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(1100px, 96vw);
  height: clamp(150px, 19vw, 280px);
  transform: translate(-50%, -48%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14, 7, 3, .8) 0, rgba(14, 7, 3, .62) 45%, rgba(14, 7, 3, .25) 75%, transparent);
  filter: blur(8px);
  pointer-events: none;
}
.ph-intro-hotel {
  font-family: "Cinzel", serif;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--ph-gold-hi);
}
.ph-intro-welcome {
  font-family: "Pinyon Script", "Cormorant Garamond", serif;
  font-size: clamp(34px, 10.5vw, 104px);
  line-height: 1.05;
  color: #fff8ea;
  /* Haarstriche minimal kräftiger, enge dunkle Kontur + weiche Tiefe */
  -webkit-text-stroke: .012em rgba(255, 248, 234, .9);
  text-shadow:
    0 0 1px rgba(20, 10, 4, .9),
    0 1px 2px rgba(20, 10, 4, .85),
    0 2px 10px rgba(20, 10, 4, .75),
    0 0 34px rgba(20, 10, 4, .6),
    0 0 60px rgba(255, 214, 150, .18);
}
.ph-intro-cue {
  position: absolute;
  left: 50%;
  bottom: 5vh;
  transform: translateX(-50%);
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 238, 200, .95);
  text-shadow: 0 1px 2px rgba(20, 10, 4, .9), 0 0 14px rgba(20, 10, 4, .8);
  animation: phCue 2.4s ease-in-out infinite;
}
.ph-intro-cue::after { content: "⌄"; display: block; text-align: center; font-size: 22px; letter-spacing: 0; }

/* ---------- Begrüßungskarte ---------- */
.ph-welcome {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 14px auto 64px;
  padding: 9px;
  border-radius: 3px;
  background: linear-gradient(135deg, #f6e1a6, #9c7130 26%, #f8e7b4 50%, #8a6128 78%, #ebd190);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 60px rgba(255, 200, 120, .12);
  transform: none;
}
.ph-welcome-inner {
  position: relative;
  padding: 40px clamp(22px, 6vw, 60px) 30px;
  text-align: center;
  color: #3f0b14;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .9), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120, 90, 50, .025) 0 1px, transparent 1px 3px),
    #f8f0de;
}
.ph-welcome-inner::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(166, 124, 53, .55);
  outline: 1px solid rgba(166, 124, 53, .25);
  outline-offset: 3px;
  pointer-events: none;
}
.ph-cameo {
  width: 124px;
  height: 152px;
  margin: -78px auto 16px;
  padding: 5px;
  border-radius: 50%;
  background: var(--ph-brass);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
  box-sizing: border-box;
}
.ph-cameo-frame {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #2a0d10;
  border: 2px solid #5a1b20;
  box-sizing: border-box;
  position: relative;
}
.ph-cameo-frame img,
.ph-cameo > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  background: #2a0d10;
  transition: transform 0.2s ease;
}
.ph-crest {
  width: 76px;
  height: 76px;
  margin: -78px auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #b8263a, #6e0c1a 60%, #3f0610);
  box-shadow: 0 0 0 4px #c69a4e, 0 0 0 6px #6b4a1c, 0 12px 26px rgba(0, 0, 0, .5);
}
.ph-crest span {
  font-family: var(--cal-font-accent, "Pinyon Script", serif);
  font-size: 46px;
  line-height: 1;
  color: var(--ph-gold-hi);
  transform: translateY(4px);
}
.ph-eyebrow {
  margin: 0 0 10px;
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #9a7432;
}
.ph-headline {
  margin: 0 auto;
  text-align: center;
  font-family: var(--cal-font-headline, "Cormorant Garamond", "Playfair Display", serif);
  font-weight: 600;
  font-size: clamp(38px, 5.8vw, 64px);
  line-height: 1.16;
  letter-spacing: -.01em;
  color: #3f0b14;
  display: block;
}
.ph-headline span {
  display: inline-block;
  font-style: italic;
  font-family: var(--cal-font-accent, inherit);
  padding: 0 0.14em;
  background: linear-gradient(100deg, #8a5d1d 0%, #d7ac55 30%, #f6dc95 45%, #b5852f 62%, #7a5016 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ph-greeting {
  margin: 14px 0 0;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  color: #6c5444;
}
.ph-note {
  margin: 24px auto 0;
  padding-top: 18px;
  max-width: 520px;
  border-top: 1px solid rgba(166, 124, 53, .35);
}
.ph-note-label {
  display: block;
  margin-bottom: 6px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #9a7432;
}
.ph-note-text {
  margin: 0;
  font-family: var(--cal-font-note, "Pinyon Script", "Cormorant Garamond", serif);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.35;
  color: #5a1820;
}
.ph-stay {
  margin-top: 24px;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.ph-stay-label {
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #7a1726;
}
.ph-stay-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 320px; }
.ph-stay-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(166, 124, 53, .22);
}
.ph-stay-dots i.is-on { background: linear-gradient(145deg, #f2d48c, #a7782f); }
.ph-stay-dots i.is-today { background: #c0213a; box-shadow: 0 0 0 2px rgba(192, 33, 58, .25), 0 0 10px rgba(192, 33, 58, .6); }

/* ---------- Der Mahagoni-Schrank ---------- */
.ph-cabinet-wrap {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto 36px;
  padding: 0 64px;
}
.ph-cabinet { position: relative; }

.ph-pediment {
  position: relative;
  height: 128px;
  margin: 0 -14px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.ph-pediment::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 6px;
  bottom: 20px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background:
    repeating-linear-gradient(92deg, rgba(255, 190, 140, .04) 0 2px, transparent 2px 10px),
    linear-gradient(180deg, #6a2c19, #401709);
  box-shadow: inset 0 3px 0 #c9a25a, inset 0 6px 0 #3a1509, inset 0 7px 0 rgba(240, 205, 140, .45), 0 -6px 26px rgba(0, 0, 0, .35);
}
.ph-pediment::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #d9b56c 0 3px, #5c2414 3px 9px, #43190b 9px 20px, #c9a25a 20px 22px, #2e0f07 22px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.ph-pediment[style*="background-image"]::before,
.ph-pediment[style*="background-image"]::after { display: none; }
.ph-medallion {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 6px;
  width: 92px;
  height: 92px;
  transform: translateX(-50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ph-brass);
  box-shadow: inset 0 0 0 4px rgba(90, 58, 18, .55), inset 0 0 0 8px rgba(255, 236, 190, .4), 0 8px 22px rgba(0, 0, 0, .5);
}
.ph-medallion span {
  font-family: "Pinyon Script", serif;
  font-size: 56px;
  line-height: 1;
  color: #4b2c0a;
  text-shadow: 0 1px 0 rgba(255, 240, 200, .7);
  transform: translateY(6px);
}
.ph-garland {
  position: absolute;
  z-index: 3;
  left: -3%;
  right: -3%;
  bottom: -40px;
  height: 78px;
  pointer-events: none;
}
.ph-garland svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45)); }
.ph-garland i {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff1c9;
  box-shadow: 0 0 6px 2px rgba(255, 210, 120, .9), 0 0 18px 6px rgba(255, 180, 80, .35);
  animation: phTwinkle 3s ease-in-out infinite;
}
.ph-garland b {
  position: absolute;
  top: 14%;
  width: 34px;
  height: 22px;
  margin: -10px 0 0 -17px;
  background:
    radial-gradient(ellipse 30% 45% at 26% 50%, #c41d34 60%, transparent 62%),
    radial-gradient(ellipse 30% 45% at 74% 50%, #c41d34 60%, transparent 62%),
    radial-gradient(circle at 50% 50%, #8e0f20 22%, transparent 24%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
}

.ph-cabinet-body {
  position: relative;
  padding: clamp(28px, 3.6vw, 46px) clamp(16px, 3vw, 38px) clamp(22px, 3vw, 34px);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .38), transparent 5%, transparent 95%, rgba(0, 0, 0, .38)),
    repeating-linear-gradient(94deg, rgba(255, 190, 140, .035) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 200, 140, .1), transparent 70%),
    linear-gradient(180deg, #5a2516, #3b160c 60%, #2a0e07);
  box-shadow:
    inset 0 0 0 3px #b8904a,
    inset 0 0 0 5px #3a170c,
    inset 0 0 0 6px rgba(240, 205, 140, .45),
    inset 0 30px 60px rgba(0, 0, 0, .35),
    0 50px 100px rgba(0, 0, 0, .65);
}
.ph-plinth {
  height: 30px;
  margin: 0 -14px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #c9a25a 0 2px, #3a1509 2px 6px, #5b2414 6px 18px, #2a0d06 18px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .55);
}

/* Wandleuchter mit Kerzenflamme */
.ph-sconce {
  position: absolute;
  top: 300px;
  width: 40px;
  height: 120px;
  z-index: 3;
  pointer-events: none;
}
.ph-sconce-l { left: 6px; }
.ph-sconce-r { right: 6px; }
.ph-sconce::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 26px;
  height: 64px;
  transform: translateX(-50%);
  border-radius: 50% 50% 40% 40%;
  background: var(--ph-brass);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .5);
}
.ph-sconce::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 34px;
  width: 10px;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: linear-gradient(90deg, #e9dcc4, #fffaf0 45%, #d8c9ad);
}
.ph-sconce i {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 10px;
  height: 20px;
  margin-left: -5px;
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 70%, #fff, #ffd77a 45%, #ff9a2e 80%, transparent 82%);
  box-shadow: 0 0 18px 6px rgba(255, 190, 90, .55), 0 0 80px 40px rgba(255, 170, 70, .16);
  animation: phFlicker 2.6s ease-in-out infinite;
  transform-origin: 50% 90%;
}
.ph-sconce-r i { animation-delay: -1.1s; }

/* ---------- Postfächer ---------- */
.ph-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px) clamp(12px, 1.8vw, 20px);
}
.ph-box {
  position: relative;
  aspect-ratio: 3 / 4;
  perspective: 900px;
}
.ph-box::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: var(--ph-arch);
  background: var(--ph-brass);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(60, 30, 5, .5);
}
.ph-niche {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--ph-arch);
  background-color: #3a0710;
  background-size: cover;
  background-position: center 60%;
  box-shadow: inset 0 12px 26px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(0, 0, 0, .6);
  cursor: pointer;
}
.ph-niche-light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 55% at 50% 8%, rgba(255, 228, 170, .55), transparent 70%);
  opacity: .45;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .6s ease;
}
/* Plakette mit Tagesnummer in der geöffneten Nische */
.ph-niche-day {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px 1px;
  min-width: 26px;
  border-radius: 2px;
  background: linear-gradient(135deg, #fce5a3 0%, #d4a74a 45%, #8f651c 85%, #d9b15b 100%);
  border: 1px solid #ffe9b5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .6);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
}
.ph-niche-day span {
  font-family: "Cinzel", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #3d1b06;
  text-shadow: 0 1px 0 rgba(255, 250, 220, .8);
  line-height: 1.1;
}
.ph-box.is-opened .ph-niche-day,
.ph-grand.is-opened .ph-niche-day {
  opacity: 1;
}
.ph-niche-day-grand {
  top: 14px;
  padding: 4px 12px 3px;
}
.ph-niche-day-grand span {
  font-size: 15px;
  letter-spacing: .1em;
}
.ph-box.is-opened .ph-niche:hover .ph-niche-light,
.ph-grand.is-opened .ph-grand-niche:hover .ph-niche-light { opacity: .9; }
.ph-box.is-lit .ph-niche-light,
.ph-grand.is-lit .ph-niche-light { animation: phLightBurst 1.6s ease-out; }
.ph-box::after,
.ph-grand::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 214, 140, .55), rgba(255, 190, 100, .16) 40%, transparent 68%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 4;
}
.ph-box.is-lit::after,
.ph-grand.is-lit::after { animation: phSpill 1.6s ease-out; }

.ph-read-tag {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%) rotate(-3deg);
  padding: 3px 8px 2px;
  white-space: nowrap;
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: .08em;
  color: #6a2a22;
  background: #f8f0dd;
  border: 1px solid #c9a25a;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
}
.ph-read-tag[hidden] { display: none; }

/* Türblatt */
.ph-door {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transition: transform 1.15s cubic-bezier(.3, .72, .18, 1);
  -webkit-tap-highlight-color: transparent;
}
.ph-door-front,
.ph-door-back {
  position: absolute;
  inset: 0;
  border-radius: var(--ph-arch);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ph-door-front {
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .0) 30%, rgba(255, 235, 220, .16) 42%, rgba(255, 255, 255, 0) 54%),
    radial-gradient(ellipse 90% 60% at 30% 20%, rgba(255, 120, 130, .18), transparent 60%),
    linear-gradient(165deg, #9a1a2c 0%, var(--ph-lacquer) 40%, #580a17 75%, var(--ph-lacquer-deep) 100%);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 150, .35), inset 0 -24px 30px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 200, 200, .25);
}
.ph-door-front[style*="background-image"] .ph-filigree { display: none; }
.ph-door-back {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(90deg, rgba(255, 190, 140, .05) 0 2px, transparent 2px 8px),
    linear-gradient(90deg, #2d0d07, #4a1a0e 60%, #2d0d07);
  box-shadow: inset 0 0 0 2px #8d6427;
}
.ph-filigree {
  position: absolute;
  inset: 9%;
  border-radius: var(--ph-arch);
  border: 1.5px solid rgba(232, 196, 120, .9);
  box-shadow: inset 0 0 0 3px var(--ph-lacquer), inset 0 0 0 4px rgba(232, 196, 120, .45), 0 0 0 3px rgba(80, 6, 16, .6), 0 0 0 4px rgba(232, 196, 120, .3);
}
.ph-filigree::before {
  content: "❦";
  position: absolute;
  left: 50%;
  top: 9%;
  transform: translateX(-50%) rotate(90deg);
  font-size: clamp(10px, 1.3vw, 16px);
  color: var(--ph-gold);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
.ph-filigree::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 196, 120, .8), transparent);
  box-shadow: 0 -4px 0 rgba(232, 196, 120, .25);
}
.ph-plaque {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 56%;
  aspect-ratio: 1.7;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ph-brass);
  box-shadow: inset 0 0 0 2px rgba(90, 58, 18, .55), inset 0 0 0 4px rgba(255, 236, 190, .35), 0 3px 8px rgba(0, 0, 0, .55);
}
.ph-plaque span {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(14px, 2vw, 26px);
  line-height: 1;
  color: #3b1d08;
  text-shadow: 0 1px 0 rgba(255, 240, 200, .65);
  transform: translateY(1px);
}
.ph-knob {
  position: absolute;
  right: 11%;
  top: 60%;
  width: clamp(8px, 1vw, 12px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c8, #d1a454 45%, #6f4b17 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}
.ph-tassel {
  position: absolute;
  left: 50%;
  top: 70%;
  width: 6px;
  height: clamp(18px, 2.4vw, 28px);
  margin-left: -3px;
  transform-origin: 50% 0;
  animation: phTassel 4.5s ease-in-out infinite;
}
.ph-tassel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 40%;
  background: #e2bf74;
}
.ph-tassel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  bottom: 0;
  border-radius: 40% 40% 2px 2px;
  background:
    linear-gradient(180deg, #e2bf74 0 18%, transparent 18%),
    repeating-linear-gradient(90deg, #a5142a 0 1px, #6e0a18 1px 2px);
}

/* Zustände */
.ph-box.is-opened .ph-door { transform: rotateY(-104deg); }
.ph-box.is-opened { z-index: 1; }
.ph-box.is-opened .ph-door { pointer-events: none; }
.ph-box.is-current::before {
  animation: phPulse 2.4s ease-in-out infinite;
}
.ph-box.is-current .ph-door:hover,
.ph-box.is-locked .ph-door:hover { transform: rotateY(-7deg); }
.ph-box.is-locked .ph-door-front { filter: saturate(.9) brightness(.92); }
.ph-box.is-rattling .ph-door { animation: phRattle .45s ease-in-out; }

/* Seidenschleife an der heutigen Tür */
.ph-ribbon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
  transition: transform .4s ease-in, opacity .4s ease-in;
}
.ph-bow {
  position: absolute;
  left: 50%;
  top: -6%;
  width: 66%;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .5));
  transition: transform .4s ease-in, opacity .4s ease-in;
  animation: phBowIdle 3s ease-in-out infinite;
}
.ph-bow svg { display: block; width: 100%; height: auto; }
.is-untying .ph-ribbon { transform: translateY(40%); opacity: 0; }
.is-untying .ph-bow { animation: none; transform: translate(-50%, -30%) scale(.4) rotate(-25deg); opacity: 0; }
.ph-box.is-opened .ph-ribbon,
.ph-box.is-opened .ph-bow,
.ph-grand.is-opened .ph-grand-bow { display: none; }

/* Concierge-Glocke */
.ph-concierge {
  position: relative;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: var(--ph-arch);
  background:
    radial-gradient(ellipse 80% 50% at 50% 20%, rgba(255, 210, 150, .14), transparent 70%),
    linear-gradient(180deg, #4b1d10, #2b0f07);
  box-shadow: 0 0 0 5px #a98340, 0 6px 14px rgba(0, 0, 0, .55), inset 0 10px 24px rgba(0, 0, 0, .6);
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  -webkit-tap-highlight-color: transparent;
}
.ph-concierge-plate {
  align-self: center;
  margin-top: 16%;
  padding: 6px 8px 5px;
  font-family: "Cinzel", serif;
  font-size: clamp(8px, 1vw, 11px);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #3b1d08;
  background: var(--ph-brass);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  max-width: 86%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-bell {
  position: relative;
  width: 54%;
  aspect-ratio: 1.3;
  margin-bottom: 14%;
}
.ph-bell-base {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18%;
  border-radius: 50%;
  background: linear-gradient(180deg, #3a3a3e, #121214);
  box-shadow: 0 4px 6px rgba(0, 0, 0, .6);
}
.ph-bell-dome {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 9%;
  height: 58%;
  border-radius: 50% 50% 8% 8% / 100% 100% 10% 10%;
  background: linear-gradient(100deg, #8c6a2c, #f6e2a6 28%, #fff7da 36%, #c79a4b 56%, #7a5520 82%, #d9b56c);
  transform-origin: 50% 100%;
}
.ph-bell-plunger {
  position: absolute;
  left: 50%;
  top: 6%;
  width: 12%;
  height: 34%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #8c6a2c, #f6e2a6, #8c6a2c);
  border-radius: 40% 40% 2px 2px;
}
.ph-concierge:hover .ph-bell-dome { filter: brightness(1.12); }
.ph-concierge.is-ringing .ph-bell-dome { animation: phBellRing .7s ease-out; }
.ph-concierge.is-ringing .ph-bell-plunger { animation: phPlunger .25s ease-out; }

/* ---------- Doppeltür 24 ---------- */
.ph-grand {
  --ph-grand-arch: 50% 50% 8px 8px / 40% 40% 8px 8px;
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1.3;
  margin: clamp(30px, 4vw, 44px) auto 30px;
  perspective: 1200px;
}
.ph-grand::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: var(--ph-grand-arch);
  background: var(--ph-brass);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 200, 110, .15);
}
.ph-grand-niche {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--ph-grand-arch);
  cursor: pointer;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 210, 150, .35), transparent 70%),
    repeating-linear-gradient(100deg, rgba(0, 0, 0, .08) 0 6px, rgba(255, 255, 255, .03) 6px 12px),
    radial-gradient(ellipse at 50% 70%, #8f1426, #4a0612 70%, #2a030a);
  box-shadow: inset 0 14px 30px rgba(0, 0, 0, .75);
}
.ph-cloche-scene {
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 10%;
  height: 72%;
}
.ph-cloche-scene .ph-css-tray { position: absolute; left: 0; right: 0; bottom: 0; }
.ph-cloche-scene .ph-css-cloche { position: absolute; left: 13%; width: 74%; bottom: 13%; }

.ph-grand-door {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}
.ph-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  transform-style: preserve-3d;
  transition: transform 1.3s cubic-bezier(.3, .72, .18, 1);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 235, 220, .14) 44%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(165deg, #9a1a2c 0%, var(--ph-lacquer) 40%, #580a17 75%, var(--ph-lacquer-deep) 100%);
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 150, .35), inset 0 -24px 30px rgba(0, 0, 0, .35);
  backface-visibility: hidden;
}
.ph-leaf-l { left: 0; transform-origin: 0 50%; border-radius: 100% 0 0 8px / 40% 0 0 8px; }
.ph-leaf-r { right: 0; transform-origin: 100% 50%; border-radius: 0 100% 8px 0 / 0 40% 8px 0; background-position: right center; }
.ph-leaf .ph-filigree { inset: 10% 12%; }
.ph-leaf-l .ph-filigree { border-radius: 100% 0 0 4px / 36% 0 0 4px; }
.ph-leaf-r .ph-filigree { border-radius: 0 100% 4px 0 / 0 36% 4px 0; }
.ph-leaf[style*="background-image"] .ph-filigree { display: none; }
.ph-leaf .ph-knob { top: 58%; }
.ph-leaf-l .ph-knob { right: 7%; }
.ph-leaf-r .ph-knob { right: auto; left: 7%; }
.ph-leaf-back {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  background: linear-gradient(90deg, #2d0d07, #4a1a0e 60%, #2d0d07);
  box-shadow: inset 0 0 0 2px #8d6427;
}
.ph-wreath {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 44%;
  width: 38%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, #d4223a 0 3%, transparent 3.5%),
    radial-gradient(circle at 74% 30%, #d4223a 0 3%, transparent 3.5%),
    radial-gradient(circle at 20% 66%, #d4223a 0 3%, transparent 3.5%),
    radial-gradient(circle at 80% 72%, #d4223a 0 3%, transparent 3.5%),
    radial-gradient(circle at 50% 88%, #e8c06a 0 2.5%, transparent 3%),
    radial-gradient(circle at 50% 12%, #e8c06a 0 2.5%, transparent 3%),
    radial-gradient(circle, transparent 52%, #1e3d22 53%, #2f5a32 64%, #173019 74%, transparent 75%);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55));
  transition: opacity .5s ease, transform .6s ease;
  pointer-events: none;
}
.ph-plaque-grand { width: 64%; top: 50%; }
.ph-plaque-grand span { font-size: clamp(18px, 2.4vw, 28px); }
.ph-grand-bow { position: absolute; inset: 0; pointer-events: none; }
.ph-grand-bow .ph-bow { top: -12%; width: 38%; }
.ph-grand-caption {
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ph-gold);
  opacity: .85;
}
.ph-grand.is-opened .ph-leaf-l { transform: rotateY(-100deg); }
.ph-grand.is-opened .ph-leaf-r { transform: rotateY(100deg); }
.ph-grand.is-opened .ph-wreath { opacity: 0; transform: translate(-50%, -80%) scale(.6); }
.ph-grand.is-opened .ph-grand-door { pointer-events: none; }
.ph-grand.is-current::before { animation: phPulse 2.4s ease-in-out infinite; }
.ph-grand.is-current .ph-grand-door:hover .ph-leaf-l,
.ph-grand.is-locked .ph-grand-door:hover .ph-leaf-l { transform: rotateY(-6deg); }
.ph-grand.is-current .ph-grand-door:hover .ph-leaf-r,
.ph-grand.is-locked .ph-grand-door:hover .ph-leaf-r { transform: rotateY(6deg); }
.ph-grand.is-rattling .ph-grand-door { animation: phRattle .45s ease-in-out; }
.ph-grand .ph-ribbon { inset: 0; }

/* ---------- Silbertablett & Cloche aus CSS (bis die Flow-Bilder da sind) ---------- */
.ph-css-tray {
  display: block;
  width: 100%;
  aspect-ratio: 3.2;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 46% 40% at 50% 46%, #f4f5f7 0%, #c4c8ce 55%, #9097a1 80%, transparent 82%),
    radial-gradient(ellipse at 50% 40%, #fdfdfd, #cfd2d7 40%, #868c96 72%, #e9ebee 76%, #6a707a 100%);
  box-shadow: 0 16px 26px rgba(0, 0, 0, .55), inset 0 -3px 6px rgba(0, 0, 0, .3), inset 0 2px 2px rgba(255, 255, 255, .8);
}
.ph-css-cloche {
  position: relative;
  display: block;
  aspect-ratio: 1.45;
  border-radius: 50% 50% 6% 6% / 100% 100% 8% 8%;
  background:
    radial-gradient(ellipse 30% 22% at 30% 26%, rgba(255, 255, 255, .85), transparent 70%),
    radial-gradient(ellipse 60% 40% at 70% 80%, rgba(255, 196, 120, .28), transparent 70%),
    linear-gradient(100deg, #6e737c 0%, #e9ecf0 22%, #ffffff 30%, #b9bec6 48%, #7d838c 70%, #d6d9de 88%, #8c919a 100%);
  box-shadow: inset 0 -8px 12px rgba(0, 0, 0, .25), 0 12px 22px rgba(0, 0, 0, .4);
}
.ph-css-cloche::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -3%;
  height: 9%;
  border-radius: 50%;
  background: linear-gradient(180deg, #f2f3f5, #8b919a);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .4);
}
.ph-css-cloche-knob {
  position: absolute;
  left: 50%;
  top: -11%;
  width: 13%;
  aspect-ratio: 1.2;
  transform: translateX(-50%);
  border-radius: 50% 50% 30% 30%;
  background: radial-gradient(circle at 35% 30%, #fff, #c3c7cd 50%, #7a808a);
  box-shadow: 0 3px 4px rgba(0, 0, 0, .35);
}

/* ---------- Zoom ins Fach ---------- */
.ph-zoom-veil {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(8, 4, 6, .88);
  pointer-events: none;
}
.ph-zoom-ghost {
  --ph-arch: 50% 50% 6px 6px / 34% 34% 6px 6px;
  --ph-grand-arch: 50% 50% 8px 8px / 40% 40% 8px 8px;
  position: fixed;
  z-index: 9998;
  margin: 0;
  transform-origin: 50% 50%;
  pointer-events: none;
  box-shadow: 0 0 0 4px #c9a25a, 0 30px 80px rgba(0, 0, 0, .7);
}
.ph-zoom-ghost .ph-niche-light { opacity: .9; }
.ph-zoom-ghost .ph-read-tag { display: none; }

/* ---------- Brief-Modal: Überreichung auf dem Silbertablett ---------- */
.ph-letter .unboxing-interactive-unit { padding-bottom: 70px; }
/* Anschrift liegt über der Umschlagklappe (sonst verdeckt die Klappe den Namen) */
.ph-letter .envelope-calligraphy-badge { position: relative; z-index: 6; }
/* Der Brief bleibt im Umschlag, bis das Siegel gebrochen ist */
.ph-letter .unboxing-interactive-unit.is-sealed .luxury-passepartout-card,
.ph-letter .unboxing-interactive-unit.is-breaking .luxury-passepartout-card {
  animation: none;
  opacity: 0;
  visibility: hidden;
}
.ph-letter .unboxing-interactive-unit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -120px;
  width: 760px;
  max-width: 140%;
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 214, 150, .22), transparent 70%);
  pointer-events: none;
  transition: opacity .6s ease;
}
.ph-letter .unboxing-interactive-unit.is-opened::before { opacity: 0; }
.ph-tray {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 340px;
  width: min(620px, 116%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
  animation: phTrayIn .6s cubic-bezier(.16, 1, .3, 1) backwards;
}
.ph-tray img { display: block; width: 100%; height: auto; }
.ph-letter .envelope-sealed-front {
  transform: scale(.8) rotate(-2.5deg);
  animation: phEnvelopeOnTray .8s .15s cubic-bezier(.16, 1, .3, 1) backwards;
  box-shadow: 0 26px 30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 235, 175, .35), inset 0 0 40px rgba(0, 0, 0, .7);
}
.ph-letter .unboxing-interactive-unit.is-breaking .envelope-sealed-front { transform: scale(.8) rotate(-2.5deg); }
.ph-letter .unboxing-interactive-unit.is-opening .envelope-sealed-front { transform: translateY(40px) scale(.7); opacity: 0; }
.ph-letter .unboxing-interactive-unit.is-opening .ph-tray,
.ph-letter .unboxing-interactive-unit.is-opened .ph-tray { opacity: 0; transform: translate(-50%, -20%) scale(.92); }
.ph-letter .unboxing-interactive-unit.is-opened .ph-tray { display: none; }

.ph-letter .ph-under-cloche .envelope-sealed-front { opacity: 0; pointer-events: none; animation: none; }
.ph-letter .unboxing-interactive-unit:not(.ph-under-cloche) .envelope-sealed-front { transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.ph-cloche {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 352px;
  width: min(480px, 88%);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translate(-50%, -100%);
  transition: transform 1.1s cubic-bezier(.5, 0, .2, 1), opacity .9s ease .2s;
  animation: phClocheIn .8s cubic-bezier(.16, 1, .3, 1) backwards;
  -webkit-tap-highlight-color: transparent;
}
.ph-cloche img,
.ph-cloche .ph-css-cloche { display: block; width: 100%; }
.ph-cloche:hover { filter: brightness(1.06); }
.ph-cloche-hint {
  position: absolute;
  left: 50%;
  top: calc(100% + 110px);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--ph-gold-hi, #f8e3a8);
  background: rgba(30, 10, 12, .8);
  border: 1px solid rgba(226, 191, 116, .5);
  animation: phCue 2.4s ease-in-out infinite;
  transition: opacity .3s ease;
}
.ph-cloche.is-lifting { transform: translate(-50%, -175%) rotate(-7deg); opacity: 0; pointer-events: none; }
.ph-cloche.is-lifting .ph-cloche-hint { opacity: 0; }

/* ---------- Animationen ---------- */
@keyframes phBreath { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes phCue { 0%, 100% { opacity: .55; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, 4px); } }
@keyframes phTwinkle { 0%, 100% { opacity: 1; } 45% { opacity: .55; } 55% { opacity: .9; } }
@keyframes phFlicker {
  0%, 100% { transform: scale(1, 1) rotate(0); opacity: 1; }
  20% { transform: scale(.94, 1.06) rotate(-2deg); }
  40% { transform: scale(1.04, .95) rotate(1deg); opacity: .92; }
  65% { transform: scale(.97, 1.04) rotate(2deg); }
  80% { transform: scale(1.02, .97) rotate(-1deg); opacity: .96; }
}
@keyframes phPulse {
  0%, 100% { box-shadow: 0 6px 14px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 230, 160, .6), 0 0 16px rgba(255, 200, 110, .35); }
  50% { box-shadow: 0 6px 14px rgba(0, 0, 0, .55), 0 0 0 2px rgba(255, 236, 180, .9), 0 0 34px rgba(255, 200, 110, .7); }
}
@keyframes phRattle {
  0%, 100% { transform: rotateY(0); }
  20% { transform: rotateY(-5deg); }
  40% { transform: rotateY(1deg); }
  60% { transform: rotateY(-3deg); }
  80% { transform: rotateY(.5deg); }
}
@keyframes phTassel { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } }
@keyframes phBowIdle { 0%, 100% { transform: translateX(-50%) rotate(-1.5deg); } 50% { transform: translateX(-50%) rotate(1.5deg); } }
@keyframes phLightBurst { 0% { opacity: .45; } 18% { opacity: 1; } 100% { opacity: .45; } }
@keyframes phSpill { 0% { opacity: 0; transform: scale(.6); } 22% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes phBellRing {
  0% { transform: rotate(0); }
  15% { transform: rotate(-6deg); }
  35% { transform: rotate(5deg); }
  55% { transform: rotate(-3deg); }
  75% { transform: rotate(1.5deg); }
  100% { transform: rotate(0); }
}
@keyframes phPlunger { 0%, 100% { transform: translate(-50%, 0); } 40% { transform: translate(-50%, 30%); } }
@keyframes phTrayIn { from { opacity: 0; transform: translate(-50%, -30%) scale(.94); } }
@keyframes phEnvelopeOnTray { from { opacity: 0; transform: translateY(-60px) scale(.76) rotate(-6deg); } }
@keyframes phClocheIn { from { opacity: 0; transform: translate(-50%, -112%); } }

/* ---------- Tablet & Handy ---------- */
@media (max-width: 1080px) {
  .ph-cabinet-wrap { padding: 0 52px; }
}
@media (max-width: 900px) {
  .ph-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ph-cabinet-wrap { padding: 0 4px; }
  .ph-sconce { display: none; }
  .ph-plaque span { font-size: clamp(14px, 3.4vw, 24px); }
}
@media (max-width: 600px) {
  .ph-welcome { margin: 40px 2px 52px; transform: none; }
  .ph-welcome-inner { padding: 34px 20px 24px; }
  .ph-cameo { width: 104px; height: 128px; margin-top: -66px; }
  .ph-crest { width: 64px; height: 64px; margin-top: -66px; }
  .ph-crest span { font-size: 38px; }
  .ph-headline { font-size: clamp(36px, 11vw, 48px); }
  .ph-pediment { height: 92px; margin: 0 -6px; }
  .ph-pediment::before { left: 10%; right: 10%; }
  .ph-medallion { width: 66px; height: 66px; }
  .ph-medallion span { font-size: 40px; }
  .ph-garland { height: 56px; bottom: -30px; }
  .ph-garland i { width: 5px; height: 5px; margin: -2px 0 0 -2px; }
  .ph-garland b { transform: scale(.75); }
  .ph-plinth { margin: 0 -6px; }
  .ph-cabinet-body { padding: 30px 12px 20px; }
  .ph-grid { gap: 12px 9px; }
  .ph-box::before { inset: -3px; }
  .ph-filigree { inset: 8%; }
  .ph-filigree::before { display: none; }
  .ph-plaque { width: 66%; }
  .ph-plaque span { font-size: clamp(13px, 4.2vw, 20px); }
  .ph-read-tag { font-size: 7px; padding: 2px 4px 1px; letter-spacing: 0; }
  .ph-concierge-plate { font-size: 7px; letter-spacing: .06em; padding: 4px 4px 3px; }
  .ph-grand { width: 78%; }
  .ph-intro { height: 280vh; margin-top: -35px; }
  .ph-tray { width: 104%; }
  .ph-letter .envelope-sealed-front,
  .ph-letter .unboxing-interactive-unit.is-breaking .envelope-sealed-front { transform: scale(.86) rotate(-2deg); }
}
@media (max-width: 359px) {
  .ph-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Rezeption mit Flow-Bildern: Theke im Vordergrund, Kamin, Bild-Türen
   ========================================================================== */
.ph-reception {
  --ph-in: 1;
  --ph-base: 26px;                 /* Bodenlinie: Unterkante der Theke */
  position: relative;
  z-index: 2;
  padding-bottom: 24px;
}
/* Kein harter Rand mehr: nur die ganze Seite schneidet seitlich ab, nicht die Szene */
.recipient-page.theme-royal_velvet { overflow-x: clip; }
.recipient-page.theme-royal_velvet .ph-scene { overflow-x: visible; }

/* Gemeinsamer polierter Marmorboden über die volle Breite, auf dem alles steht */
.ph-floor {
  position: absolute;
  z-index: 0;
  left: 50%;
  width: 100vw;
  bottom: calc(-1 * var(--ph-tail, 24px));
  height: calc(var(--ph-tail, 24px) + var(--ph-base) + 190px);
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 30% at 50% calc(100% - var(--ph-tail, 24px) - var(--ph-base)), rgba(255, 214, 150, .1), transparent 70%),
    linear-gradient(180deg, rgba(22, 12, 12, 0) 0, rgba(24, 13, 12, .55) 30%, rgba(20, 11, 11, .86) 62%, rgba(15, 8, 9, .96) 100%);
  opacity: var(--ph-in);
}
/* feine Marmoräderung, sehr zurückhaltend */
.ph-floor::before {
  content: "";
  position: absolute;
  inset: 34% 0 0;
  background:
    repeating-linear-gradient(100deg, transparent 0 140px, rgba(255, 236, 205, .025) 140px 142px, transparent 142px 300px),
    repeating-linear-gradient(80deg, transparent 0 220px, rgba(255, 236, 205, .02) 220px 221px, transparent 221px 410px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%);
  mask-image: linear-gradient(180deg, transparent, #000 40%);
}

/* Rezeptionstheke: steht vor dem Schrank und deckt nur den Sockel ab */
.ph-counter {
  --ph-counter-w: min(1040px, 118vw);
  position: relative;
  z-index: 5;
  left: 50%;
  width: var(--ph-counter-w);
  margin-top: calc(var(--ph-counter-w) * -0.05 - 40px);
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .5));
  pointer-events: none;
}
.ph-counter img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-box-reflect: below -3px linear-gradient(transparent 76%, rgba(0, 0, 0, .2));
}
/* Kontaktschatten direkt am Boden */
.ph-counter::after, .ph-set::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 4%;
  right: 4%;
  bottom: -14px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 45%, transparent 72%);
}
.ph-counter-bell {
  position: absolute;
  left: 13.2%;
  top: 0;
  width: 8%;
  height: 17%;
  padding: 0;
  border: 0;
  border-radius: 50% 50% 8px 8px;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 226, 150, .35), transparent 65%);
  cursor: pointer;
  pointer-events: auto;
  animation: phBellHint 3.2s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
.ph-counter-bell.is-ringing { animation: phBellFlash .7s ease-out; }

/* Baum und Kamin stehen etwas weiter hinten im Raum, hinter Schrank und Theke,
   und bleiben immer ganz im Bild */
.ph-set {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: var(--ph-in);
  transform: translateY(calc((1 - var(--ph-in)) * 40px));
}
.ph-set img { display: block; width: 100%; height: auto; }
.ph-tree {
  right: calc(50% + 360px);
  bottom: calc(var(--ph-base) + 30px);
  width: clamp(200px, calc(50vw - 376px), 440px);
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .45)) brightness(.9) saturate(.95);
}
.ph-tree img { -webkit-box-reflect: below -4px linear-gradient(transparent 82%, rgba(0, 0, 0, .16)); }
.ph-tree::after { left: 8%; right: 8%; bottom: -10px; height: 26px; }
.ph-fireplace {
  left: calc(50% + 380px);
  bottom: calc(var(--ph-base) + 58px);
  width: clamp(200px, calc(50vw - 396px), 460px);
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .45)) brightness(.78) sepia(.12) saturate(1.05);
}
.ph-fireplace img { -webkit-box-reflect: below -2px linear-gradient(transparent 80%, rgba(0, 0, 0, .18)); }
.ph-fireplace::after { left: 0; right: 0; bottom: -12px; }
.ph-fire-glow {
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 6%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 70%, rgba(255, 170, 70, .55), transparent 70%);
  mix-blend-mode: screen;
  animation: phFire 1.8s ease-in-out infinite;
}
/* Feuerschein, der vor dem Kamin auf den Boden fällt */
.ph-fire-floor {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -46px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 160, 70, .32), transparent 70%);
  mix-blend-mode: screen;
  animation: phFire 2.3s ease-in-out infinite;
}
@media (max-width: 1180px) {
  .ph-set { display: none; }
}

/* ---------- Schrank, Türen und Fächer als Fotos ---------- */
.ph-scene.ph-img { --ph-arch: 50% 50% 3px 3px / 33% 33% 3px 3px; }
.ph-img .ph-cabinet-wrap { max-width: 980px; }
.ph-img .ph-pediment {
  height: auto;
  aspect-ratio: 1700 / 894;           /* mit seitlich herabhängenden Girlanden-Enden */
  margin: 0 -15.63%;
  background-size: 100% 100%;
  container-type: inline-size;
  z-index: 1;
}
.ph-img .ph-garland { display: none; }
.ph-img .ph-sconce { display: none; }
.ph-img .ph-medallion {
  top: 66.4%;
  width: 20.59%;
  height: auto;
  aspect-ratio: 1.36;
  transform: translate(-50%, -50%);
  background: none;
  box-shadow: none;
}
.ph-img .ph-medallion span {
  font-size: 56px;
  font-size: 10.7cqw;
  color: #5b3a0e;
  text-shadow: 0 1px 0 rgba(255, 244, 205, .75), 0 -1px 0 rgba(70, 40, 6, .45);
  transform: translateY(4%);
}
.ph-img .ph-cabinet-body {
  margin-top: -1px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .4), transparent 6%, transparent 94%, rgba(0, 0, 0, .4)),
    repeating-linear-gradient(94deg, rgba(255, 190, 140, .035) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 200, 140, .12), transparent 70%),
    linear-gradient(180deg, #4e1f12, #36130a 60%, #260c06);
}
.ph-img .ph-box { aspect-ratio: .66; container-type: inline-size; }
.ph-img .ph-box::before { inset: 3% 2% 0; background: none; box-shadow: 0 10px 18px rgba(0, 0, 0, .55); }
.ph-img .ph-niche {
  background-color: transparent;
  background-size: 100% 100%;
  box-shadow: none;
}
.ph-img .ph-niche-light { opacity: .25; }
.ph-img .ph-door-front {
  background-color: transparent;
  background-size: 100% 100%;
  box-shadow: none;
}
.ph-img .ph-door-back { inset: 1.5% 3% 0; }
.ph-img .ph-plaque {
  top: 71.8%;
  width: 28%;
  aspect-ratio: 2.1;
  border-radius: 2px;
  background: none;
  box-shadow: none;
}
.ph-img .ph-plaque span {
  font-size: 13px;
  font-size: 12.5cqw;
  font-weight: 700;
  color: #4a2a08;
  text-shadow: 0 1px 0 rgba(255, 244, 205, .7), 0 -1px 0 rgba(60, 32, 4, .35);
}
.ph-img .ph-read-tag { bottom: 11%; }
.ph-img .ph-concierge {
  aspect-ratio: .66;
  container-type: inline-size;
  margin-top: 3%;
  box-shadow: 0 0 0 3px #b48b45, 0 0 0 5px #4a1d0e, 0 10px 18px rgba(0, 0, 0, .55), inset 0 14px 28px rgba(0, 0, 0, .65);
}
.ph-img .ph-concierge-plate { font-size: 10px; font-size: 10cqw; letter-spacing: .05em; padding: 4px 7px 3px; }

.ph-img .ph-grand {
  --ph-grand-arch: 4px;
  width: min(100%, 340px);
  aspect-ratio: 1200 / 1183;
}
.ph-img .ph-grand::before { inset: 1%; background: none; box-shadow: 0 14px 30px rgba(0, 0, 0, .6), 0 0 50px rgba(255, 200, 110, .14); }
.ph-img .ph-leaf {
  background-color: transparent;
  background-size: 100% 100%;
  box-shadow: none;
  border-radius: 0;
}
.ph-img .ph-leaf-back { inset: 2% 0 0; }
.ph-img .ph-wreath {
  top: 38.5%;
  width: 22%;
  background: none;
  filter: none;
}
.ph-img .ph-plaque-grand {
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ph-brass);
  box-shadow: inset 0 0 0 2px rgba(90, 58, 18, .55), 0 2px 6px rgba(0, 0, 0, .5);
}
.ph-img .ph-plaque-grand span { font-size: clamp(13px, 1.6vw, 18px); }
.ph-img .ph-grand-niche { inset: 2% 1.5% 0; }
.ph-grand-cloche {
  position: absolute;
  left: 7%;
  width: 86%;
  bottom: 9%;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .55));
}

/* Zoom-Geist im Bild-Modus: das Fach bringt seinen eigenen Goldrahmen mit */
.ph-img-ghost {
  --ph-arch: 50% 50% 3px 3px / 33% 33% 3px 3px;
  --ph-grand-arch: 4px;
  background-color: transparent;
  background-size: 100% 100%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
.ph-img-ghost.ph-grand-niche { box-shadow: 0 0 0 4px #8d6427, 0 30px 80px rgba(0, 0, 0, .7); }

/* ---------- Cloche als Foto im Brief-Modal ---------- */
.ph-under-cloche .ph-tray { z-index: 12; pointer-events: auto; }
.ph-under-cloche .ph-tray > img { opacity: 0; transition: opacity .5s ease; }
.ph-under-cloche .ph-tray.is-revealed > img { opacity: 1; }
.ph-cloche.ph-cloche-photo {
  left: 0;
  top: auto;
  bottom: 0;
  width: 100%;
  aspect-ratio: 1200 / 737;
  transform: none;
  transition: none;
  animation: phClochePhotoIn .8s cubic-bezier(.16, 1, .3, 1) backwards;
}
.ph-cloche-photo img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.ph-cloche-photo .ph-cloche-full { transition: opacity .35s ease .1s; }
.ph-cloche-photo .ph-cloche-dome {
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .35));
  transition: transform 1.1s cubic-bezier(.5, 0, .2, 1), opacity .7s ease .4s;
}
.ph-cloche-photo .ph-cloche-hint { top: calc(100% + 24px); }
.ph-cloche.ph-cloche-photo.is-lifting { transform: none; opacity: 1; }
.ph-cloche-photo.is-lifting .ph-cloche-full { opacity: 0; }
.ph-cloche-photo.is-lifting .ph-cloche-dome { transform: translateY(-115%) rotate(-6deg); opacity: 0; }

@keyframes phClochePhotoIn { from { opacity: 0; transform: translateY(-14%); } }
@keyframes phBellHint { 0%, 70%, 100% { opacity: .2; } 85% { opacity: 1; } }
@keyframes phBellFlash { 0% { opacity: 1; transform: rotate(-6deg); } 40% { transform: rotate(5deg); } 100% { opacity: .2; transform: rotate(0); } }
@keyframes phFire { 0%, 100% { opacity: .7; transform: scale(1); } 40% { opacity: 1; transform: scale(1.06, 1.1); } 70% { opacity: .8; transform: scale(.97, 1.02); } }

@media (max-width: 600px) {
  .ph-img .ph-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
  .ph-img .ph-cabinet-body { padding: 26px 14px 18px; }
  .ph-img .ph-pediment { margin: 0 -15.63%; height: auto; }
  .ph-img .ph-plinth { margin: 0 -2%; }
  .ph-img .ph-read-tag { font-size: 8px; }
  .ph-img .ph-grand { width: 86%; }
  .ph-counter { --ph-counter-w: 124vw; margin-top: calc(var(--ph-counter-w) * -0.05 - 26px); }
}

/* ---------- Gemischtes Raster: 5 Spalten, die 24 groß in der Mitte ---------- */
.ph-scene .ph-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row dense; }
.ph-grid > .ph-grand {
  grid-column: 2 / span 3;
  grid-row: 3 / span 2;
  width: auto;
  margin: 0;
  aspect-ratio: auto;
}
.ph-box.is-spotlit::before,
.ph-grand.is-spotlit::before { animation: phSpot 1.1s ease-in-out 3; }
.ph-box.is-spotlit .ph-niche-light,
.ph-grand.is-spotlit .ph-niche-light { opacity: .9; }
@keyframes phSpot {
  0%, 100% { box-shadow: 0 10px 18px rgba(0, 0, 0, .55); }
  50% { box-shadow: 0 0 0 3px rgba(255, 226, 150, .95), 0 0 44px 12px rgba(255, 205, 110, .75); }
}
@media (max-width: 600px) {
  .ph-scene .ph-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-grid > .ph-grand { grid-column: 1 / span 3; grid-row: 5 / span 2; aspect-ratio: 1200 / 1183; }
}

/* Geöffnete Türen schwingen fast rechtwinklig auf und bleiben schmal in der Fuge,
   damit sie weder Nachbarfächer noch die große 24 überdecken */
.ph-img .ph-box { perspective: 2200px; }
.ph-img .ph-box.is-opened .ph-door { transform: rotateY(-93deg); }
.ph-grid > .ph-grand { perspective: 4200px; }
.ph-img .ph-grand.is-opened .ph-leaf-l { transform: rotateY(-93deg); }
.ph-img .ph-grand.is-opened .ph-leaf-r { transform: rotateY(93deg); }

/* ==========================================================================
   Geöffneter Brief als Hotel-Briefpapier (nur Palais)
   ========================================================================== */
/* Die Lobby schimmert hinter dem Brief, statt eines schwarzen Hintergrunds */
.modal-root.ph-modal { background: #120806; isolation: isolate; }
.modal-root.ph-modal::before,
.modal-root.ph-modal::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.modal-root.ph-modal::before {
  background: var(--ph-lobby) center / cover no-repeat;
  filter: blur(14px) brightness(.5) saturate(1.1);
  transform: scale(1.12);
}
.modal-root.ph-modal::after {
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 196, 120, .12), transparent 60%),
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, .6) 100%);
}

.ph-snow { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; filter: blur(.4px); }
.modal-root.ph-modal > .letter-unboxing-stage { z-index: 1; }

/* Papier: dicker Karton mit Goldfolien-Doppellinie, ohne dunklen Rahmen */
.ph-letter .passepartout-outer-frame {
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .7), 0 12px 24px rgba(0, 0, 0, .35);
}
.ph-letter .stationery-paper-sheet {
  border-radius: 3px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 255, 255, .7), transparent 70%),
    repeating-linear-gradient(0deg, rgba(120, 90, 50, .018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120, 90, 50, .014) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #fffdf7 0%, #faf4e8 60%, #f4ecdc 100%);
  box-shadow: inset 0 0 0 1px rgba(150, 110, 50, .25);
}
.ph-letter .stationery-paper-sheet::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(196, 156, 84, .85);
  box-shadow: 0 0 0 4px #fbf6ec, 0 0 0 5px rgba(196, 156, 84, .5);
  pointer-events: none;
}

/* Briefkopf: geprägtes Monogramm statt rotem Wachssiegel */
.ph-letter .stationery-crest-header {
  padding: 46px 40px 22px;
  background: none;
  border-bottom: 0;
}
.ph-letter .stationery-crest-header::after {
  content: "";
  display: block;
  width: 120px;
  height: 9px;
  margin: 18px auto 0;
  background:
    radial-gradient(circle, #b8904a 0 2px, transparent 2.5px) center / 9px 9px no-repeat,
    linear-gradient(90deg, transparent, rgba(184, 144, 74, .8) 30%, transparent 46%, transparent 54%, rgba(184, 144, 74, .8) 70%, transparent) center / 100% 1px no-repeat;
}
.ph-letter .stationery-crest-seal.ph-emboss {
  width: 74px;
  height: 58px;
  margin-bottom: 14px;
  border: 0;
  border-radius: 50%;
  color: #b8904a;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(150, 110, 50, .1) 70%, transparent 72%);
  box-shadow: inset 0 0 0 1.5px rgba(184, 144, 74, .9), inset 0 0 0 4px #fbf6ec, inset 0 0 0 5px rgba(184, 144, 74, .45);
}
.ph-letter .ph-emboss .crest-seal-symbol {
  font-family: "Pinyon Script", "Cormorant Garamond", serif;
  font-size: 40px;
  line-height: 1;
  color: #a77f3a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(120, 85, 30, .35);
  transform: translateY(3px);
}
.ph-letter .stationery-crest-seal.ph-emboss:hover { transform: scale(1.04); }
.ph-letter .letter-crest-tag { color: #9e7431; letter-spacing: .34em; font-size: 10px; }
.ph-letter .letter-day-pill { color: #7d1a25; font-size: 16px; }

/* Text */
.ph-letter .letter-body { padding: 8px 52px 46px; }
.ph-letter .letter-title {
  font-family: "Cormorant Garamond", var(--serif);
  font-weight: 500;
  color: #5a0f1a;
  letter-spacing: .01em;
}
.ph-letter .letter-title[hidden] { display: none; }
.ph-letter .letter-message-content { color: #3a2620; }

/* Gutschein: gravierte Karte mit Abrissstreifen */
.ph-letter .letter-voucher-box {
  margin: 4px 0 30px;
  padding: 30px 92px 30px 30px;
  border: 0;
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent calc(100% - 72px), rgba(125, 26, 37, .045) calc(100% - 72px)),
    linear-gradient(135deg, #fffefb 0%, #f8f0de 100%);
  box-shadow:
    inset 0 0 0 1px rgba(184, 144, 74, .7),
    inset 0 0 0 5px #fffcf4,
    inset 0 0 0 6px rgba(184, 144, 74, .4),
    0 14px 30px rgba(70, 35, 15, .14),
    0 2px 4px rgba(70, 35, 15, .08);
  text-align: center;
}
.ph-letter .letter-voucher-box::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 72px;
  border-left: 2px dotted rgba(184, 144, 74, .7);
}
.ph-letter .voucher-ticket-notch {
  position: absolute;
  width: 18px;
  height: 18px;
  top: -9px;
  bottom: auto;
  left: auto;
  right: 63px;
  border-radius: 50%;
  background: #f7efe0;
  box-shadow: inset 0 0 0 1px rgba(184, 144, 74, .5);
}
.ph-letter .voucher-ticket-notch.notch-right { top: auto; bottom: -9px; }
.ph-letter .voucher-ribbon-tag { color: #9e7431; letter-spacing: .36em; font-size: 10px; margin-bottom: 14px; }
.ph-letter .voucher-title {
  font-family: var(--cal-font-note, "Pinyon Script", "Cormorant Garamond", serif) !important;
  font-size: clamp(30px, 4.6vw, 40px) !important;
  line-height: 1.15;
  color: #6a1220 !important;
  margin-bottom: 14px !important;
}
.ph-letter .voucher-content { font-style: italic; font-size: 17px !important; color: #4a332c !important; }
.ph-voucher-stub {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 72px;
  display: grid;
  place-items: center;
}
.ph-voucher-stub b {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "Cinzel", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3em;
  color: #7d1a25;
}

/* Unterschrift in Handschrift */
.ph-letter .letter-signature-block { margin-top: 26px; }
.ph-letter .signature-intro { color: #8a6a55; }
.ph-letter .signature-name {
  font-family: var(--cal-font-signature, "Pinyon Script", "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
  color: #5a0f1a;
}

/* Antwortkarte: Messingknöpfe */
.ph-letter .stamp-header-label { font-family: "Cinzel", serif; font-style: normal; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: #9e7431; }
.ph-letter .stamp-header-rule { background: linear-gradient(90deg, transparent, rgba(184, 144, 74, .7), transparent); }
.ph-letter .stamp-seal-disc {
  width: 54px;
  height: 54px;
  border: 0;
  background: radial-gradient(circle at 50% 45%, #fffaf0 0 52%, transparent 54%), var(--ph-brass, linear-gradient(145deg, #f7e2a6, #c79a4b 30%, #8d6427 55%, #e3c27c 78%, #9c7333));
  box-shadow: 0 4px 10px rgba(70, 35, 10, .25), inset 0 0 0 1px rgba(90, 58, 18, .45);
}
.ph-letter .stamp-reaction-badge:hover .stamp-seal-disc { transform: scale(1.06); box-shadow: 0 8px 18px rgba(125, 26, 37, .22), inset 0 0 0 1px rgba(90, 58, 18, .45); }
.ph-letter .stamp-reaction-badge.reacted .stamp-seal-disc,
.ph-letter .reaction-btn.reacted .stamp-seal-disc {
  background: radial-gradient(circle at 50% 45%, #8e1426 0 52%, transparent 54%), linear-gradient(145deg, #f7e2a6, #c79a4b 30%, #8d6427 55%, #e3c27c 78%, #9c7333) !important;
  border: 0 !important;
}
.ph-letter .stamp-seal-caption { font-family: "Cormorant Garamond", var(--serif); color: #5a3a2c; }

@media (max-width: 600px) {
  .ph-letter .stationery-paper-sheet::before { inset: 9px; }
  .ph-letter .stationery-crest-header { padding: 36px 24px 16px; }
  .ph-letter .letter-body { padding: 6px 26px 34px; }
  /* style.css setzt am Handy padding mit !important; die Lasche rechts braucht ihren Platz */
  .ph-letter .letter-voucher-box {
    padding: 24px 62px 24px 18px !important;
    background:
      linear-gradient(90deg, transparent calc(100% - 48px), rgba(125, 26, 37, .045) calc(100% - 48px)),
      linear-gradient(135deg, #fffefb 0%, #f8f0de 100%);
  }
  .ph-letter .letter-voucher-box::after { right: 48px; }
  .ph-letter .voucher-ticket-notch { right: 39px; }
  .ph-voucher-stub { width: 48px; }
  .ph-voucher-stub b { font-size: 12px; letter-spacing: .2em; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-scene *, .ph-scene *::before, .ph-scene *::after,
  .ph-letter *, .ph-letter *::before, .ph-letter *::after { animation: none !important; transition-duration: .01s !important; }
}

/* Türnummern wie im Original: gravierte, rechteckige Messingplakette an derselben Stelle wie im Türbild,
   aber über dem Geschenkband, damit die Zahl nicht verdeckt wird. Das runde Schild der großen Tür 24 bleibt unverändert. */
.ph-img .ph-plaque:not(.ph-plaque-grand) {
  z-index: 4;
  width: 30%;
  border-radius: 2px;
  background: linear-gradient(180deg, #f1d58c 0%, #d7b061 48%, #b98c3c 100%);
  box-shadow: inset 0 0 0 1px rgba(92, 60, 18, .75), inset 0 0 0 2.5px rgba(255, 236, 190, .35), 0 1px 3px rgba(0, 0, 0, .45);
}
.ph-img .ph-plaque:not(.ph-plaque-grand) span {
  font-size: 13px;
  font-size: 14cqw;
  color: #3a1f06;
  text-shadow: 0 1px 0 rgba(255, 244, 205, .75), 0 -1px 0 rgba(60, 32, 4, .3);
}