/* ================= Seite 2 · Einladung ================= */
.view-invitation { background: var(--paper); }

/* ---------- Hero-Komposition ---------- */
.hero { position: relative; overflow-x: clip; }
.stage {
  position: relative;
  width: min(100%, 1600px);
  margin-inline: auto;
  aspect-ratio: 1440 / 1230;
  container-type: inline-size;
}
.layer {
  --k: calc(100cqw / 1440);
  position: absolute;
  left: calc(var(--x) * var(--k));
  top: calc(var(--y) * var(--k));
  width: calc(var(--w) * var(--k));
}
.l-env-back  { --x: 203; --y: 450; --w: 1025; }
.l-card      { --x: 612; --y: 118; --w: 581; }
.l-card-text { --x: 662; --y: 178; --w: 478; height: calc(540 * var(--k)); }
.l-video     { --x: 345; --y: 270; --w: 275; height: calc(370 * var(--k)); }
.l-frame     { --x: 250; --y: 165; --w: 470; }
.l-peony     { --x: 180; --y: 258; --w: 240; }
.l-heart     { --x: 505; --y: 578; --w: 430; }
.l-env-front { --x: 203; --y: 520; --w: 1025; }
.l-seal      { --x: 652; --y: 857; --w: 135; }
.l-bouquet   { --x: 965; --y: 420; --w: 345; }

.l-card-text > p {
  position: absolute;
  left: 0; right: 0;
  transform: translateY(-50%);
  text-align: center;
  color: var(--ink);
}
.card-kicker { top: calc(67 * var(--k)); font-size: calc(20 * var(--k)); letter-spacing: .03em; }
.card-name   { font-family: var(--script); font-size: calc(76 * var(--k)); line-height: 1.2; }
.card-name:nth-of-type(2) { top: calc(167 * var(--k)); }
.card-amp    { top: calc(245 * var(--k)); font-family: var(--script); font-size: calc(62 * var(--k)); line-height: 1; }
.card-name:nth-of-type(4) { top: calc(322 * var(--k)); }

.l-video { clip-path: ellipse(50% 50% at 50% 50%); background: #5f6040; }
.hero-video { display: block; width: 100%; height: 100%; object-fit: cover; }

.heart-date {
  position: absolute;
  left: 0; right: 0;
  top: calc(140 * var(--k));
  transform: translateY(-50%);
  text-align: center;
  font-weight: 500;
  font-size: calc(46 * var(--k));
  letter-spacing: .02em;
  color: var(--cream);
  text-shadow: 0 1px 1px rgba(40, 8, 10, .35);
}

/* Aufbau-Animation in drei Staffeln */
.view-invitation.is-in [data-stagger] { animation: layer-in .65s var(--ease) backwards; }
.view-invitation.is-in [data-stagger="1"] { animation-delay: .05s; }
.view-invitation.is-in [data-stagger="2"] { animation-delay: .35s; }
.view-invitation.is-in [data-stagger="3"] { animation-delay: .7s; }
@keyframes layer-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- Infotexte ---------- */
.info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: 20px;
  padding-top: max(12px, calc(27 * var(--u)));
  position: relative;
  z-index: 1;
}
.info-meet, .info-date, .info-formal { font-size: max(17px, calc(32 * var(--u))); line-height: 1.3; }
.info-venue {
  margin-top: max(10px, calc(48 * var(--u)));
  font-family: var(--script);
  font-size: max(42px, calc(88 * var(--u)));
  line-height: 1.2;
  text-wrap: balance;
}
.info-date   { margin-top: max(26px, calc(84 * var(--u))); }
.info-formal { margin-top: max(16px, calc(40 * var(--u))); }

.countdown { margin-top: max(48px, calc(143 * var(--u))); }
.cd-row { display: flex; align-items: flex-start; justify-content: center; gap: max(6px, calc(12 * var(--u))); }
.cd-unit { display: flex; flex-direction: column; align-items: center; }
.cd-num, .cd-sep {
  font-family: var(--mono);
  font-size: max(28px, calc(52 * var(--u)));
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.cd-num { min-width: 2.3ch; text-align: center; }
.cd-num[data-cd="d"] { min-width: 3.3ch; }
.cd-sep { font-weight: 700; }
.cd-label { margin-top: max(2px, calc(4 * var(--u))); font-size: max(13px, calc(20 * var(--u))); }
.cd-done { font-family: var(--script); font-size: max(36px, calc(64 * var(--u))); }

.cta {
  margin-top: max(48px, calc(150 * var(--u)));
  width: min(100%, max(300px, calc(640 * var(--u))));
  min-height: max(58px, calc(140 * var(--u)));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: max(22px, calc(40 * var(--u)));
  background: var(--olive);
  color: var(--cream);
  text-decoration: none;
  font-size: max(18px, calc(32 * var(--u)));
  line-height: 1.2;
  transition: background-color .25s ease, transform .25s var(--ease);
}
.cta:hover { background: #6a643b; transform: translateY(-2px); }
.cta:focus-visible { outline-color: var(--olive); }
.info-closing { margin-top: max(40px, calc(101 * var(--u))); font-size: max(18px, calc(34 * var(--u))); text-wrap: balance; }

/* Einblenden beim Scrollen (nur wenn JS aktiv) */
.reveal-armed [data-reveal] { transition: opacity .7s ease, transform .7s var(--ease); }
.reveal-armed [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(16px); }

/* ---------- Footer ---------- */
.love {
  margin-top: max(48px, calc(98 * var(--u)));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: max(44px, calc(63 * var(--u))) 20px max(40px, calc(67 * var(--u)));
  color: var(--cream);
  background-color: #45432b;
  background-image: linear-gradient(rgba(44, 41, 18, .42), rgba(44, 41, 18, .42)), url("../assets/svg/meadow.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.love-kicker { font-size: max(16px, calc(24 * var(--u))); }
.love-mono { margin-top: max(20px, calc(45 * var(--u))); width: max(132px, calc(210 * var(--u))); color: var(--cream); }
.love-contact { margin-top: max(20px, calc(42 * var(--u))); max-width: 36em; font-size: max(15px, calc(22 * var(--u))); line-height: 1.45; }
.love-mail { text-decoration: none; overflow-wrap: anywhere; }
.love-mail:hover { text-decoration: underline; text-underline-offset: 4px; }
.love-back {
  margin-top: max(28px, calc(56 * var(--u)));
  font-size: max(16px, calc(24 * var(--u)));
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  padding: 6px 8px;
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  /* Komposition etwas heranzoomen, Blumen dürfen rechts leicht angeschnitten sein */
  .stage { width: 124%; margin-left: -14.2%; }
}