:root {
  --linen: #efe9df;
  --ivory: #fbf8f1;
  --olive-950: #2f3519;
  --olive-900: #3e4521;
  --olive-700: #56612e;
  --olive-500: #6d7140;
  --blush: #f3e0da;
  --rose: #e2b3ac;
  --rose-deep: #b9776f;
  --gold: #b39a62;
  --white: #fefefe; /* exakt der Bildhintergrund von Umschlag und Karte */
  --gutter: clamp(12px, 3vw, 24px);

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --script: 'Pinyon Script', cursive;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }
html.is-locked, html.is-locked body { overflow: hidden; }

body {
  margin: 0;
  background: var(--linen) var(--paper);
  color: var(--olive-900);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; }
.muted { color: var(--olive-700); opacity: .85; }
.script { font-family: var(--script); font-weight: 400; line-height: 1.1; }
:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 4px; }

/* ───────── 1 · Plicul ───────── */

.envelope { position: relative; height: 100svh; background: var(--white); }
.envelope.is-open { height: 260svh; }

.envelope__sticky {
  /* --shift: hebt den geschlossenen Umschlag in die optische Mitte (JS), 0 nach dem Öffnen */
  --shift: 0px;
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Umschlag + Hinweis; die Verschiebung sitzt hier, weil GSAP an Rahmen und Hinweis
   eigene Transforms setzt (und dabei die CSS-Eigenschaft translate zurücksetzt) */
.envelope__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.5vh, 28px);
  translate: 0 var(--shift);
}

/* Breite: schmaler weißer Rand links/rechts, auf großen Screens durch die Höhe begrenzt */
.envelope__frame {
  --fw: min(calc(100vw - 2 * var(--gutter)), calc((100svh - 120px) * 1122 / 1402), 820px);
  position: relative;
  width: var(--fw);
  aspect-ratio: 1122 / 1402;
  /* sichtbar, damit die Pflanze über den Bildrand hinausragen darf (der Sticky-Bereich schneidet ab) */
  overflow: visible;
  transform-origin: 50% 50%;
  will-change: transform;
}

.envelope__img,
.envelope__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.envelope__img--open { opacity: 0; }

/* Aquarell-Pflanze hinter der „Save the Date“-Karte (Koordinaten im 1122 × 1402-Bild: x 830, y 42) */
.envelope__greenery {
  position: absolute;
  left: 74%;
  top: 3%;
  width: 30%;
  height: auto;
  max-width: none;
  opacity: 0;
  transform-origin: 75% 55%; /* Bild ist gespiegelt: Ansatzpunkt rechts */
  pointer-events: none;
}

/* Eheringe vor der Umschlag-Ecke unten links (Ecke im Bild bei x 35, y 1290) */
.envelope__rings {
  position: absolute;
  /* kleiner, Mittelpunkt bleibt nahe der Umschlag-Ecke */
  left: 0;
  top: 85.5%;
  width: 22%;
  height: auto;
  max-width: none;
  opacity: 0;
  filter: drop-shadow(0 8px 10px rgba(47, 53, 25, .3));
  pointer-events: none;
}

/* Gast-Name im freien Bereich über dem geschlossenen Umschlag */
.envelope__to {
  position: absolute;
  left: 0;
  right: 0;
  top: 33%;
  z-index: 2;
  padding: 0 24px;
  font-family: var(--script);
  font-size: clamp(30px, 8vw, 46px);
  line-height: 1.1;
  text-align: center;
  color: var(--olive-900);
  pointer-events: none;
}

.envelope__seal {
  position: absolute;
  left: var(--seal-x, 50%);
  top: var(--seal-y, 75%);
  width: var(--seal-d, 14%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.envelope__ring {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 238, 232, .9);
  box-shadow: 0 0 24px rgba(255, 220, 210, .6);
  animation: ring 2.6s var(--ease-out) infinite;
  pointer-events: none;
}
.envelope__ring--late { animation-delay: 1.3s; }
@keyframes ring {
  0%   { transform: scale(.92); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.envelope__seal-lift {
  position: absolute;
  left: var(--seal-x, 50%);
  top: var(--seal-y, 75%);
  width: var(--seal-d, 14%);
  height: auto;
  max-width: none;
  translate: -50% -50%;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 18px 24px rgba(47, 53, 25, .35));
}

.envelope__flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--seal-x, 50%) var(--seal-y, 75%), #fff 0%, rgba(255, 255, 255, .9) 45%, rgba(255, 255, 255, 0) 85%);
  opacity: 0;
  pointer-events: none;
}

.envelope__hint {
  font-style: italic;
  font-size: clamp(18px, 2vw, 21px);
  letter-spacing: .02em;
  color: var(--olive-700);
}

.envelope__cue {
  position: absolute;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--olive-700);
  text-decoration: none;
  font-style: italic;
  font-size: 18px;
  animation: cue-in .9s .3s var(--ease-out) backwards;
}
@keyframes cue-in { from { opacity: 0; translate: -50% 10px; } }
.envelope__cue-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--olive-700), transparent);
  transform-origin: top;
  animation: cue 2.2s var(--ease-out) infinite;
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 1; }
  60%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

.envelope__veil {
  position: absolute;
  inset: -4px; /* überstehen, sonst blitzt bei Subpixel-Scroll eine Zeile durch */
  background: var(--white);
  opacity: 0;
  pointer-events: none;
}

/* ───────── 2 · Einladungskarte ───────── */

/* Gesamter Inhalt liegt über dem klebenden Umschlag (er überlappt dessen Ende, s. u.) */
main { position: relative; z-index: 1; }

.invitation {
  position: relative;
  background: var(--white);
  padding: clamp(24px, 5vw, 64px) var(--gutter) clamp(88px, 12vw, 160px);
}
/* Karte gleitet über den verblassenden Umschlag, solange dieser noch klebt;
   der überlappende Teil bleibt transparent, damit kein weißer Kasten darüber schiebt */
.envelope.is-open + main .invitation {
  margin-top: -110svh;
  background: linear-gradient(transparent 110svh, var(--white) 110svh);
}

/* Zitat vor der Karte: eigener ruhiger Moment, Schrift wie „Cununia religioasă“ */
.invitation__quote {
  margin: 0 auto;
  max-width: 640px;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vh, 20px);
  padding: 0 8px;
}
/* Aquarell-Pfingstrose; Weiß im Bild = Seitenweiß, daher ohne Rand */
.invitation__peony {
  width: clamp(150px, 44vw, 240px);
  height: auto;
  transform-origin: 60% 85%;
}
.invitation__quote p {
  font-family: var(--script);
  font-size: clamp(30px, 7.4vw, 52px);
  line-height: 1.3;
  text-align: center;
  color: var(--olive-950);
}
.invitation__quote .word { display: inline-block; }

.invitation__card {
  margin: 0 auto;
  width: min(100%, 600px);
}
.invitation__card img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 28px 36px rgba(47, 53, 25, .22)) drop-shadow(0 2px 3px rgba(47, 53, 25, .12));
}

/* Geschriebene Einladungskarte: Elfenbein, Bogen oben, doppelte Rosé-Linie */
.card {
  --arch: clamp(140px, 30vw, 260px);
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--arch) * .5) clamp(22px, 6vw, 64px) clamp(48px, 7vw, 68px);
  background: var(--ivory) var(--paper);
  border-radius: 50% 50% 14px 14px / var(--arch) var(--arch) 14px 14px;
  box-shadow:
    0 1px 2px rgba(47, 53, 25, .06),
    0 50px 90px -40px rgba(47, 53, 25, .4);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 4.5vw, 38px);
}
.card::before,
.card::after {
  content: '';
  position: absolute;
  border: 1px solid var(--rose);
  border-radius: inherit;
  pointer-events: none;
}
.card::before { inset: 12px; }
.card::after  { inset: 18px; opacity: .55; }

.card__names {
  font-family: var(--script);
  font-size: clamp(54px, 11vw, 92px);
  line-height: 1;
  color: var(--olive-950);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: .18em;
}
/* „Noi,“ – eigene Zeile über den Namen, gleiche Schreibschrift, kleiner und etwas heller */
.card__intro {
  flex-basis: 100%;
  font-size: .56em;
  line-height: 1;
  margin-bottom: .08em;
  color: var(--olive-700);
}
.card__amp {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: .62em;
  color: var(--rose-deep);
}

.card__lead {
  font-style: italic;
  font-size: clamp(19px, 2.4vw, 22px);
  color: var(--olive-700);
  margin-bottom: 10px;
}
.card__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  font-size: clamp(19px, 2.6vw, 23px);
  font-weight: 500;
  line-height: 1.3;
}

.card__invite {
  font-style: italic;
  font-size: clamp(19px, 2.4vw, 22px);
  line-height: 1.55;
}

.card__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
}
.card__divider span { width: 64px; height: 1px; background: currentColor; opacity: .55; }

.nowrap { white-space: nowrap; }
.card__date {
  font-family: var(--script);
  font-size: clamp(38px, 6.5vw, 52px);
  line-height: 1.1;
  color: var(--olive-950);
}

/* Beide Spalten teilen sich dieselben Zeilen (Subgrid): Icon, Titel, Ort, Adresse, Uhrzeit
   stehen sich immer genau gegenüber, auch wenn eine Seite umbricht */
.card__events {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  row-gap: 8px;
}
.card__event {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  justify-items: center;
  align-items: center;
  padding: 0 clamp(8px, 2vw, 20px);
  font-size: 18px;
  line-height: 1.4;
}
.card__event + .card__event { border-left: 1px solid var(--rose); }
.card__event h2 {
  font-family: var(--script);
  font-size: clamp(32px, 4.6vw, 40px);
  line-height: 1.15;
  color: var(--olive-950);
}
.card__time {
  font-family: var(--script);
  font-size: 32px;
  line-height: 1.1;
  margin-top: 4px;
}

.icon {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: var(--olive-900);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card__close {
  font-family: var(--script);
  font-size: clamp(36px, 5.5vw, 46px);
  line-height: 1.1;
  color: var(--olive-950);
}

@media (max-width: 480px) {
  .br-wide { display: none; }
  /* Handy: untereinander, eigene Zeilen je Block */
  .card__events { display: flex; flex-direction: column; gap: 32px; }
  .card__event { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .card__event + .card__event { border-left: 0; padding-top: 32px; border-top: 1px solid var(--rose); }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ───────── 3 · Countdown ───────── */

.countdown {
  background: var(--olive-500) var(--paper);
  color: var(--ivory);
  padding: clamp(96px, 14vw, 180px) 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(32px, 5vw, 56px);
}
.countdown h2 { font-size: clamp(48px, 8vw, 88px); }
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 980px);
}
.countdown__grid > div { display: flex; flex-direction: column; align-items: center; }
.countdown__grid span {
  font-size: clamp(42px, 11vw, 132px);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.countdown__grid small {
  margin-top: 10px;
  font-size: clamp(16px, 2vw, 20px);
  font-style: italic;
  opacity: .85;
}
.countdown__date { font-size: clamp(20px, 2.6vw, 24px); }

/* ───────── 4 · Program ───────── */

.program {
  padding: clamp(96px, 14vw, 180px) 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 6vw, 72px);
}
.program > h2 { font-size: clamp(48px, 8vw, 88px); text-align: center; }
.program__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(100%, 880px);
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 96px);
}
.program__item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(20px, 5vw, 64px);
  align-items: start;
}
.program__item .program__time {
  font-size: clamp(76px, 15vw, 168px);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.02em;
  text-align: right;
  font-variant-numeric: lining-nums;
  color: var(--olive-700);
}
.program__item h3 {
  font-family: var(--script);
  font-size: clamp(38px, 5.5vw, 52px);
  line-height: 1.15;
  color: var(--olive-950);
  margin-bottom: 6px;
}
.program__item p { font-size: clamp(19px, 2.2vw, 22px); }
.program__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* Kartenausschnitt mit Marker; ein Tipp darauf öffnet die Route */
.venue-map {
  position: relative;
  margin: 22px 0 0;
  height: clamp(220px, 30vw, 290px);
  border-radius: 14px;
  overflow: hidden;
  background: var(--blush);
  box-shadow:
    0 1px 2px rgba(47, 53, 25, .08),
    0 30px 60px -30px rgba(47, 53, 25, .4);
}
.venue-map__canvas { position: absolute; inset: 0; background: var(--linen); }
.venue-map .leaflet-tile-pane { filter: grayscale(1) sepia(.32) contrast(.88) brightness(1.06); }
.venue-map__link { position: absolute; inset: 0; z-index: 450; }
.venue-map__link:focus-visible { outline-offset: -4px; border-radius: 14px; }
.venue-map .leaflet-control-attribution {
  background: rgba(251, 248, 241, .85);
  color: var(--olive-700);
  font: 11px/1.4 var(--serif);
  border-radius: 8px 0 0 0;
}
.venue-map .leaflet-control-attribution a { color: inherit; }

.map-pin {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 0;
  background: var(--olive-900);
  transform: rotate(-45deg);
  display: grid;
  place-items: center;
  box-shadow: -4px 6px 12px rgba(47, 53, 25, .35);
}
.map-pin::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rose);
}
.map-pin__pulse {
  position: absolute;
  left: 50%;
  top: 32px; /* Ellipse mittig um die Pin-Spitze (y = 41) */
  width: 44px;
  height: 18px;
  translate: -50% 0;
  border-radius: 50%;
  border: 2px solid var(--olive-900);
  animation: pin-pulse 2.4s var(--ease-out) infinite;
}
@keyframes pin-pulse {
  0%   { transform: scale(.3); opacity: .7; }
  100% { transform: scale(1.4); opacity: 0; }
}

@media (max-width: 600px) {
  .program__item { grid-template-columns: 1fr; text-align: center; gap: 8px; }
  .program__item .program__time { text-align: center; }
  .program__actions { justify-content: center; }
}

/* ───────── Buttons ───────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 28px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--olive-900);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .03em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), transform .2s var(--ease-out);
}
.btn:hover { background: var(--olive-900); color: var(--ivory); border-color: var(--olive-900); }
.btn:active { transform: scale(.97); }
.btn--light { color: var(--ivory); }
.btn--light:hover { background: var(--ivory); color: var(--olive-900); border-color: var(--ivory); }
.btn--solid { background: var(--olive-900); color: var(--ivory); border-color: var(--olive-900); }
.btn--solid:hover { background: var(--olive-950); }

/* ───────── 5 · RSVP ───────── */

.rsvp {
  background: var(--blush) var(--paper);
  padding: clamp(96px, 14vw, 180px) 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.rsvp h2 { font-size: clamp(48px, 8vw, 88px); }
.rsvp__intro { font-size: clamp(19px, 2.4vw, 22px); font-style: italic; }
.rsvp__form {
  width: min(100%, 560px);
  margin-top: clamp(16px, 3vw, 32px);
  padding: clamp(28px, 5vw, 48px);
  background: var(--ivory) var(--paper);
  border-radius: 14px;
  box-shadow: 0 40px 80px -40px rgba(120, 70, 60, .35);
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: left;
}
.field { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; }
.field > span, .field legend { font-size: 17px; font-style: italic; color: var(--olive-700); padding: 0; }
.field em { opacity: .7; }
.field input:not([type=radio]), .field select, .field textarea {
  font: inherit;
  font-size: 21px;
  color: var(--olive-950);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(62, 69, 33, .35);
  border-radius: 0;
  padding: 8px 0;
  transition: border-color .3s;
}
.field textarea { resize: vertical; }
.field :is(input, select, textarea):focus { outline: none; border-bottom-color: var(--olive-900); }
.field--choice { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
.field--choice legend { width: 100%; margin-bottom: 6px; }
.field--choice label { display: flex; align-items: center; gap: 10px; font-size: 21px; cursor: pointer; min-height: 44px; }
.field--choice input { accent-color: var(--olive-900); width: 20px; height: 20px; }
.rsvp__form .btn { align-self: stretch; }
.rsvp__status { min-height: 1.5em; text-align: center; font-style: italic; }

/* ───────── Footer ───────── */

.footer {
  background: var(--olive-900) var(--paper);
  color: var(--ivory);
  padding: clamp(80px, 12vw, 140px) 16px clamp(64px, 9vw, 110px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.footer__seal {
  width: 128px;
  height: auto;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .4));
}
.amp {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: .62em;
  color: var(--rose);
}
.footer__replay { margin-top: 28px; gap: 10px; }
.footer__replay svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .6s var(--ease-out);
}
.footer__replay:hover svg { transform: rotate(-200deg); }
.footer__names { font-family: var(--script); font-size: clamp(48px, 7vw, 68px); line-height: 1.1; }
.footer__date { letter-spacing: .3em; font-size: 18px; opacity: .85; }

/* ───────── Musik ───────── */

.music {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 20;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--ivory);
  box-shadow: 0 10px 30px -8px rgba(47, 53, 25, .45);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.music svg { width: 22px; height: 22px; fill: none; stroke: var(--olive-900); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.music[aria-pressed="true"] svg { animation: sway 2.4s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotate(-10deg) scale(1.06); } }

/* ───────── Reveal-Startzustand (nur mit JS) ───────── */

.js [data-reveal] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .envelope__ring, .envelope__cue-line, .music svg, .map-pin__pulse { animation: none !important; }
  .js [data-reveal] { opacity: 1; }
}