:root{
  --ivory:#F7F1E6;
  --ivory-deep:#EEE3CE;
  --ink:#2B2320;
  --violet:#2B1830;
  --violet-mid:#3E2440;
  --violet-soft: rgba(43,24,48,0.42);
  --gold:#B4915A;
  --gold-light:#D9C293;
  --gold-line: rgba(180,145,90,0.4);
  --shadow: rgba(43,24,48,0.16);
  --radius-hair: 1px;
  color-scheme: light;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold-light); color:var(--violet);}

h1,h2,h3,.serif{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  letter-spacing:0.01em;
  margin:0;
}
.script{font-family:'Parisienne', cursive; font-weight:400;}

.eyebrow{
  font-family:'Jost', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 14px;
}
.eyebrow--light{color:var(--gold-light);}

a{color:inherit;}
button{font-family:inherit; cursor:pointer;}

/* Sichtbarer Fokus für Tastatur-Nutzer */
a:focus-visible,
button:focus-visible{
  outline:1px solid var(--gold);
  outline-offset:4px;
}

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

/* ===================== ENVELOPE ===================== */
/* Bilder: envelope-inner.webp (offener Umschlag), envelope-flap.webp (Klappe), wax-seal.webp
   Alle drei sind exakt aufeinander zugeschnitten – Maße nicht ändern. */
body:not(.env-hidden){ overflow:hidden; }

.envelope-scene{
  position:fixed; inset:0; z-index:100;
  overflow:hidden;
}
/* Hintergrund rund um den Umschlag – wird beim Öffnen ausgeblendet,
   damit man durch die (durchsichtige) Öffnung direkt die Webseite sieht */
.env-bg{
  position:absolute; inset:0;
  background:#EEE6D9;
}
body.env-hidden .envelope-scene{ display:none; }

.envelope-card-v2{
  /* exakt mittig – funktioniert in Safari & Chrome gleich,
     auch wenn der Umschlag breiter als der Bildschirm ist */
  position:absolute; left:50%; top:calc(50% + 4svh);
  translate:-50% -50%;
  width:min(90vw, 128svh);          /* groß, aber mit Platz nach oben für die aufklappende Klappe */
  aspect-ratio:1436 / 858;          /* exakt das Format von envelope-inner.webp */
  perspective:2000px;
  transform-origin:50% 20%;         /* Zoom zielt mitten in die Öffnung */
  opacity:0;                        /* erst zeigen, wenn die Bilder geladen sind */
  transition:opacity .6s ease;
  will-change:transform;
  /* 1. weicher Schatten unter dem Umschlag
     2. riesiger "Rahmen" in Papierfarbe: deckt alles rund um den Umschlag ab
        und zoomt mit – nur durch die Öffnung sieht man die Webseite */
  box-shadow:
    0 18px 40px rgba(43,24,48,.13),
    0 0 0 120vmax #EEE6D9;
}
@media (orientation:portrait){
  /* Handy hochkant: etwas größer, nur der leere Rand links/rechts wird angeschnitten */
  .envelope-card-v2{ width:125vw; top:50%; }
}
body.env-ready .envelope-card-v2{ opacity:1; }

.env-layer{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.env-inner{ z-index:1; }

.env-flap-wrap{
  position:absolute; top:0; left:0; width:100%;
  transform-origin:50% 0%;
  transform-style:preserve-3d;
  z-index:3;
  will-change:transform;
}
.env-flap-img, .env-flap-back{
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.env-flap-img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 3px 4px rgba(60,40,30,.22));   /* Klappe liegt sichtbar auf */
}
.env-flap-back{
  position:absolute; inset:0;
  transform:rotateX(180deg);
  background:linear-gradient(to bottom, #E9DFD0, #DCCFBC 85%);
  -webkit-mask:url('../assets/images/envelope-flap.webp') center / 100% 100% no-repeat;
          mask:url('../assets/images/envelope-flap.webp') center / 100% 100% no-repeat;
}

.env-seal-btn{
  position:absolute; left:50%; top:74%;   /* sitzt genau auf der Klappenspitze */
  translate:-50% -50%;
  width:12.5%; aspect-ratio:420 / 413;
  border:0; padding:0; background:none; border-radius:50%;
  z-index:5;
  cursor:pointer;
}
.env-seal-img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 6px 10px rgba(43,24,48,.35));
  transition:transform .25s ease;
}
.env-seal-btn:hover .env-seal-img{ transform:scale(1.05); }

.env-hint{
  position:absolute; left:0; right:0;
  bottom:max(28px, env(safe-area-inset-bottom));
  margin:0; text-align:center;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold);
  transition:opacity .4s ease;
}
body.is-opening .env-hint{ opacity:0; }

/* ===================== SITE ===================== */
.site{ opacity:0; }
body.env-hidden .site{ opacity:1; }
body:not(.env-hidden) .site{ pointer-events:none; }

.container{
  max-width:1180px; margin:0 auto; padding:0 28px;
}

/* ---- nav / hero ---- */
.hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  padding:0;   /* hebt das generische section-Padding auf */
  display:flex; flex-direction:column;
  color:var(--ivory);
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0; z-index:0;
}
/* ---- Hero-Diashow ---- */
.hero-media .slide{
  position:absolute; inset:0; margin:0;
  overflow:hidden;
  opacity:0;
  transition:opacity 1.8s ease-in-out;
}
.hero-media .slide.is-active{ opacity:1; z-index:1; }
.hero-media .slide img{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* Handy (hochkant): Foto füllt den ganzen Bildschirm */
.slide-img{
  object-fit:cover;
  object-position:var(--pos, 50% 40%);
  transform-origin:var(--pos, 50% 40%);
  transform:scale(var(--zoom, 1));
}
.slide-bg{ display:none; }

/* Laptop (quer): Foto komplett & scharf in der Mitte,
   links/rechts dieselbe Aufnahme weichgezeichnet als Hintergrund */
@media (min-aspect-ratio: 5/6){
  .hero-media .slide .slide-img{ --zoom:1; }   /* Laptop zeigt immer das ganze Foto */
  .slide-bg{
    display:block;
    object-fit:cover;
    filter:blur(28px) brightness(.88) saturate(1.1);
    transform:scale(1.15);
  }
  .hero-media .slide .slide-img{
    inset:auto; top:0; left:50%;
    height:100%; width:auto;
    aspect-ratio:854 / 1280;          /* Format der Fotos */
    translate:-50% 0;
    object-fit:cover;
    transform-origin:50% 50%;
    /* weiche Kanten links/rechts – Foto geht nahtlos in den Hintergrund über */
    -webkit-mask:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
            mask:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  }
}

/* Langsamer Zoom (Ken Burns) – läuft beim Ausblenden weiter, damit nichts springt */
@media (prefers-reduced-motion: no-preference){
  .hero-media .slide.is-active .slide-img,
  .hero-media .slide.is-leaving .slide-img{
    animation:hero-zoom 9s ease-out both;
  }
}
@keyframes hero-zoom{
  from{ transform:scale(var(--zoom, 1)); }
  to  { transform:scale(calc(var(--zoom, 1) * 1.07)); }
}
.hero-media::after{
  content:"";
  position:absolute; inset:0; z-index:2;
  /* oben leicht dunkel (Navigation), Mitte frei fürs Foto,
     unten kräftig dunkel, damit die Schrift immer lesbar ist */
  background:
    linear-gradient(to bottom,
      rgba(25,14,28,0.45) 0%,
      rgba(25,14,28,0.05) 22%,
      rgba(25,14,28,0.10) 40%,
      rgba(25,14,28,0.55) 60%,
      rgba(22,12,25,0.82) 80%,
      rgba(20,10,22,0.92) 100%);
}
.hero-nav{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(24px, 6vw, 60px);
  padding:26px 28px;
  width:100%;
  max-width:none;   /* hebt die 1180px-Begrenzung von .container auf */
  color:var(--ivory);              /* Nav liegt außerhalb des Heros → Farbe selbst setzen */
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  opacity:0; pointer-events:none;  /* erscheint erst nach dem Öffnen */
  transition: opacity .9s ease .3s, background .4s ease, backdrop-filter .4s ease, padding .4s ease, box-shadow .4s ease;
}
body.env-hidden .hero-nav{ opacity:1; pointer-events:auto; }
.hero-nav a{ text-decoration:none; }
.hero-nav.scrolled{
  background:rgba(43,24,48,0.55);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  padding-top:16px;
  padding-bottom:16px;
  box-shadow:0 4px 24px rgba(0,0,0,0.15);
}
.hero-nav .mark{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.35rem;
  letter-spacing:0.04em;
  transition: letter-spacing .35s ease, color .35s ease;
  display:inline-block;
}
.hero-nav .mark:hover{
  letter-spacing:0.14em;
  color:var(--gold-light);
}

.hero-nav .links{
  display:flex; gap:clamp(14px,3vw,34px);
  font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase;
  list-style:none; margin:0; padding:0;
}
.hero-nav .links a{
  text-decoration:none; opacity:0.88; padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, opacity .3s ease;
}
.hero-nav .links a:hover{ opacity:1; border-color:var(--gold-light); }

.hero-content{
  position:relative; z-index:2;
  margin-top:auto;
  padding-bottom:clamp(34px,6vh,64px);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero-content .eyebrow{color:var(--gold-light);}

/* ---- Lesbarkeit der Schrift auf den Fotos ---- */
.hero-content{
  text-shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 18px rgba(0,0,0,.45);
}
.hero-content .eyebrow{
  font-size:clamp(.72rem, 1.2vw, .82rem);
  font-weight:500;
  color:#E8D3A6;                      /* helleres Gold – hebt sich besser ab */
}
.hero-meta{
  font-size:clamp(.8rem, 1.3vw, .92rem) !important;
  font-weight:500;
  opacity:1 !important;
}
.countdown .lbl{
  font-size:.66rem !important;
  font-weight:500;
  color:#E8D3A6 !important;
  opacity:1 !important;
}
.hero-actions .btn{
  background:rgba(20,10,22,.38);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  text-shadow:none;
  font-weight:500;
}
.hero-actions .btn:hover{ background:var(--gold-light); }
.hero-names{
  font-size:clamp(1.9rem, 5.4vw, 3.55rem);
  line-height:1.05;
  color:var(--ivory);
  margin-bottom:18px;
}
.hero-names .amp{color:var(--gold-light); font-style:italic; padding:0 0.14em;}
.hero-meta{
  display:flex; align-items:center; gap:16px;
  font-size:0.82rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ivory); opacity:0.92;
  margin-bottom:30px;
}
.hero-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gold-light); opacity:0.8;}

.countdown{
  display:flex; gap:clamp(10px,3vw,26px);
  margin-bottom:34px;
}
.countdown div{
  display:flex; flex-direction:column; align-items:center;
  min-width:56px;
}
.countdown .num{
  font-family:'Cormorant Garamond', serif; font-size:clamp(1.5rem,4vw,2.3rem);
  color:var(--ivory);
}
.countdown .lbl{
  font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-light); opacity:0.85; margin-top:4px;
}

.hero-actions{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 30px;
  font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
  border:1px solid var(--gold-light);
  background:rgba(247,241,230,0.06);
  color:var(--ivory);
  text-decoration:none;
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .2s ease;
}
.btn:hover{ background:var(--gold-light); color:var(--violet); border-color:var(--gold-light); }
.btn:active{ transform:scale(0.98); }
.btn--ghost-dark{
  border-color:var(--gold); color:var(--violet); background:transparent;
}
.btn--ghost-dark:hover{ background:var(--violet); color:var(--ivory); border-color:var(--violet); }
.btn--filled{
  background:var(--violet); color:var(--ivory); border-color:var(--violet);
}
.btn--filled:hover{ background:transparent; color:var(--violet); }

/* ---- music toggle ---- */
.music-toggle{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--gold-light);
  background:rgba(43,24,48,0.55);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--ivory);
  display:flex; align-items:center; justify-content:center;
  transition: background .3s ease, opacity .5s ease, transform .3s ease;
  opacity:0; pointer-events:none;
}
body.is-open .music-toggle{ opacity:1; pointer-events:auto; }
.music-toggle:hover{ transform:scale(1.06); }
.music-toggle svg{ width:19px; height:19px; }
.music-toggle .bar{ transition: height .18s ease; }

/* ---- generic section ---- */
section{ padding:clamp(70px,11vw,120px) 0; }
.section-head{ text-align:center; margin-bottom:clamp(40px,6vw,64px); }
.section-head h2{
  font-size:clamp(2rem,4.4vw,3rem);
}

/* ---- invitation ---- */
.invitation{ background:var(--ivory); }
.invitation-inner{
  max-width:640px; margin:0 auto; text-align:center;
}
.invitation h2{ margin-bottom:28px; }
.invitation p.lede{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  line-height:1.75;
  color:var(--ink);
  margin:0 0 40px;
}
.invitation .sign{
  font-family:'Parisienne', cursive;
  font-size:clamp(1.8rem,4vw,2.4rem);
  color:var(--violet);
}
.botanical{
  width:120px; height:auto; margin:0 auto 34px; display:block; color:var(--gold);
}

/* ---- details ---- */
.details{ background:var(--ivory-deep); }
.details-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--gold-line);
  border-bottom:1px solid var(--gold-line);
}
.details-grid > div{
  padding:40px 24px;
  text-align:center;
  border-left:1px solid var(--gold-line);
}
.details-grid > div:first-child{ border-left:none; }
.details-grid svg{ width:30px; height:30px; color:var(--gold); margin-bottom:18px; }
.details-grid h3{
  font-size:0.68rem; letter-spacing:0.28em; text-transform:uppercase;
  font-family:'Jost',sans-serif; color:var(--violet); margin-bottom:14px;
}
.details-grid .big{
  font-family:'Cormorant Garamond', serif; font-size:1.4rem; color:var(--ink); margin-bottom:4px;
}
.details-grid .sub{ font-size:0.82rem; color:var(--ink); opacity:0.65; }

@media (max-width:720px){
  .details-grid{ grid-template-columns:1fr; }
  .details-grid > div{ border-left:none; border-top:1px solid var(--gold-line); }
  .details-grid > div:first-child{ border-top:none; }
}

/* ---- venue ---- */
.venue{ background:var(--ivory); }
.venue-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px);
  align-items:center;
}
.venue-text .eyebrow{margin-bottom:8px;}
.venue-text h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); margin-bottom:22px; }
.venue-text .addr{
  font-size:0.98rem; line-height:1.9; color:var(--ink); opacity:0.85; margin-bottom:30px;
}

.venue-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.copy-address-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:none; padding:0;
  font-family:'Jost',sans-serif; font-size:0.78rem; letter-spacing:0.06em;
  color:var(--ink); opacity:0.6;
  cursor:pointer;
  transition:opacity .25s ease, color .25s ease;
}
.copy-address-btn:hover,
.copy-address-btn:focus-visible{ opacity:1; color:var(--violet); }
.copy-address-btn svg{ width:15px; height:15px; flex-shrink:0; }

.map-frame{
  position:relative; aspect-ratio:4/3.4;
  border:1px solid var(--gold);
  background:var(--ivory-deep);
  overflow:hidden;
}
.map-frame > svg{ position:absolute; inset:0; width:100%; height:100%; }   /* nur alte Deko-Grafik, nicht den Karten-Pin */
.map-pin{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-100%);
  display:flex; flex-direction:column; align-items:center;
}
.map-pin svg{ position:static; width:30px; height:30px; color:var(--violet); }
@media (max-width:820px){
  .venue-grid{ grid-template-columns:1fr; }
}

/* ---- rsvp ---- */
.rsvp{ background:var(--violet); color:var(--ivory); }
.rsvp .eyebrow{ color:var(--gold-light); }
.rsvp .section-head h2{ color:var(--ivory); }
.rsvp .section-head p{
  font-family:'Cormorant Garamond',serif; font-size:1.2rem; color:var(--ivory); opacity:0.9; max-width:480px; margin:14px auto 0;
}
.rsvp-form{
  max-width:560px;
  margin:0 auto;
  padding:0 24px;
}
.field{ margin-bottom:28px; }
fieldset.field{ border:none; padding:0; margin-inline:0; min-width:0; }
.field legend{ padding:0; }
.field label,
.field legend{
  display:block; font-size:0.64rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold-light); margin-bottom:10px;
}
.field input[type=text], .field input[type=number], .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(217,194,147,0.4);
  color:var(--ivory); font-family:'Jost',sans-serif; font-size:1rem; padding:8px 2px;
  transition:border-color .3s ease;
}
.field textarea{ resize:vertical; min-height:70px; font-family:'Cormorant Garamond',serif; font-size:1.1rem; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(247,241,230,0.4); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--gold-light); }
.attend-options{ display:flex; gap:20px; flex-wrap:wrap; }
.attend-options label{
  display:flex; align-items:center; gap:10px;
  text-transform:none; letter-spacing:0.02em; color:var(--ivory); opacity:0.9;
  font-family:'Cormorant Garamond',serif; font-size:1.15rem;
  cursor:pointer;
}
.attend-options input{ accent-color:var(--gold-light); width:16px; height:16px; }
.rsvp-submit{ text-align:center; margin-top:12px; }
.rsvp-note{
  text-align:center; font-family:'Cormorant Garamond',serif; font-size:1.2rem; color:var(--gold-light);
  margin-top:22px; display:none;
}
body.rsvp-sent .rsvp-form{ display:none; }
body.rsvp-sent .rsvp-note{ display:block; }

/* Absenden-Button im violetten RSVP-Bereich sichtbar machen */
.rsvp .btn--filled{ border-color:var(--gold-light); padding:15px 38px; }
.rsvp .btn--filled:hover{
  background:var(--gold-light);
  color:var(--violet);
  border-color:var(--gold-light);
}
.rsvp a:focus-visible,
.rsvp button:focus-visible{ outline-color:var(--gold-light); }

.stepper{
  display:flex; align-items:center; justify-content:center;
  gap:24px;
  border-bottom:1px solid rgba(217,194,147,0.4);
  padding:8px 2px;
}
.stepper input[type=number]{
  width:40px; text-align:center;
  background:transparent; border:none;
  border-bottom:none !important;
  color:var(--ivory); font-family:'Cormorant Garamond',serif; font-size:1.4rem;
  -moz-appearance:textfield;
  appearance:textfield;
}
.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button{
  -webkit-appearance:none; margin:0;
}
.stepper-btn{
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--gold-light);
  background:transparent; color:var(--gold-light);
  font-size:1.1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, color .25s ease, transform .15s ease;
}
.stepper-btn:hover{ background:var(--gold-light); color:var(--violet); }
.stepper-btn:active{ transform:scale(0.94); }

/* ---- scroll reveal (progressive enhancement) ---- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    .section-head,
    .invitation-inner > *,
    .details-grid > div,
    .venue-text,
    .map-frame,
    .event-card,
    .rsvp-form{
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }

    @keyframes reveal-up{
      from{
        opacity: 0;
        transform: translateY(50px) scale(0.94);
      }
      to{
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
  }
}

/* ---- footer ---- */
footer{
  background:var(--violet); color:var(--gold-light);
  text-align:center; padding:46px 20px 90px;
  border-top:1px solid rgba(217,194,147,0.25);
}
footer .mark{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.3rem; margin-bottom:8px; color:var(--ivory); }
footer .date{ font-size:0.68rem; letter-spacing:0.28em; text-transform:uppercase; opacity:0.8; }

@media (max-width:560px){
  .hero-nav .links{ gap:12px; font-size:0.6rem; letter-spacing:0.14em; }
  .countdown{ gap:10px; }
  .countdown div{ min-width:44px; }
}
/* Datum/Ort nicht mitten im Wort umbrechen (Handy) */
.hero-meta{ flex-wrap:wrap; justify-content:center; row-gap:6px; }
.hero-meta span{ white-space:nowrap; }
@media (max-width:420px){
  .hero-meta{ gap:10px; letter-spacing:.1em; }
}

/* iPhone: schnelles Tippen (z. B. auf + / −) soll nicht als
   "Doppeltippen zum Zoomen" erkannt werden */
button, a, label, input, textarea, .stepper{
  touch-action:manipulation;
}
.stepper-btn{
  -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none;
}

/* =====================================================================
   SEITEN MIT MEHREREN FEIERN (celebration.html / family.html)
   ===================================================================== */

/* ---- Sprachumschalter EN / தமிழ் ---- */
.lang-toggle{
  position:relative;
  display:flex; gap:2px; padding:2px;
  border:1px solid rgba(217,194,147,.55); border-radius:999px;
}
/* goldene Markierung, die zur gewählten Sprache gleitet */
.lang-pill{
  position:absolute; top:2px; bottom:2px; left:0;
  width:0; border-radius:999px;
  background:var(--gold-light);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:transform .5s cubic-bezier(.65,0,.35,1), width .5s cubic-bezier(.65,0,.35,1);
  pointer-events:none;
}
.lang-toggle button{
  position:relative; z-index:1;
  background:none; border:0; color:var(--ivory);
  font-size:.62rem; letter-spacing:.14em; line-height:1;
  padding:6px 10px; border-radius:999px; opacity:.8;
  transition:color .45s ease, opacity .45s ease;
}
.lang-toggle button[data-set-lang="ta"]{ letter-spacing:0; font-family:'Noto Sans Tamil', sans-serif; font-size:.7rem; }
.lang-toggle button[aria-pressed="true"]{ color:var(--violet); opacity:1; }
.lang-toggle:not(:has(.lang-pill)) button[aria-pressed="true"]{ background:var(--gold-light); }  /* Fallback ohne JS */

/* Sprachwechsel: Texte blenden weich aus und in der neuen Sprache wieder ein */
html.lang-anim [data-de], html.lang-anim [data-ta]{
  transition:opacity .26s ease, filter .26s ease !important;
}
html.lang-out [data-de], html.lang-out [data-ta]{
  opacity:0 !important;
  filter:blur(4px);
}

/* ---- Ablauf / Timeline ---- */
.events{ background:var(--ivory-deep); }
.timeline{ max-width:860px; margin:0 auto; display:grid; gap:26px; }
.event-card{
  display:grid; grid-template-columns:120px 1fr; gap:32px;
  background:var(--ivory);
  border:1px solid var(--gold-line);
  padding:36px 38px;
  box-shadow:0 10px 30px rgba(43,24,48,.05);
}
.event-date{
  text-align:center;
  border-right:1px solid var(--gold-line);
  padding-right:28px;
}
.event-date .day{
  display:block;
  font-family:'Cormorant Garamond', serif; font-size:3.4rem; line-height:1;
  color:var(--violet);
}
.event-date .month{
  display:block; margin-top:8px;
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
}
.event-date .weekday{ display:block; margin-top:4px; font-size:.78rem; color:var(--ink); opacity:.6; }
.event-body .eyebrow{ margin-bottom:6px; }
.event-body h3{
  font-size:clamp(1.7rem, 3vw, 2.2rem);
  color:var(--violet); margin-bottom:14px;
}
.event-body h4{
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size:1.45rem; color:var(--violet); margin:0 0 10px;
}
.event-meta{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:7px; font-size:.95rem; }
.event-meta li{ display:flex; gap:10px; align-items:flex-start; line-height:1.5; }
.event-meta svg{ width:16px; height:16px; color:var(--gold); flex-shrink:0; margin-top:3px; }
.event-meta strong{ font-weight:500; }
.event-tag{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 20px; padding:7px 14px;
  border:1px solid var(--gold-line); border-radius:999px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--violet);
  background:rgba(217,194,147,.14);
}
.event-tag svg{ width:14px; height:14px; color:var(--gold); }
.event-sub{
  margin:4px 0 22px; padding-top:20px;
  border-top:1px dashed var(--gold-line);
}
.event-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.btn--small{ padding:11px 20px; font-size:.64rem; }
.btn--ghost-dark.btn--small{ border-color:var(--gold-line); }

@media (max-width:640px){
  .event-card{ grid-template-columns:1fr; gap:18px; padding:28px 22px; }
  .event-date{
    display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
    text-align:left; border-right:0; border-bottom:1px solid var(--gold-line);
    padding:0 0 14px;
  }
  .event-date .day{ font-size:2.6rem; }
  .event-date .month, .event-date .weekday{ margin-top:0; }
}

/* ---- RSVP: eine Zusage pro Feier ---- */
.event-rsvp{ padding-bottom:22px; border-bottom:1px solid rgba(217,194,147,.22); }
.event-rsvp legend .when{
  display:block; margin-top:4px;
  font-family:'Cormorant Garamond', serif; font-size:1.05rem;
  letter-spacing:0; text-transform:none; color:var(--ivory); opacity:.75;
}

/* ---- Tamil: passende Schrift, kein gesperrter Großbuchstaben-Look ---- */
html[lang="ta"] body{ font-family:'Noto Sans Tamil', 'Jost', sans-serif; }
html[lang="ta"] h2, html[lang="ta"] h3, html[lang="ta"] h4,
html[lang="ta"] .lede,
html[lang="ta"] .rsvp .section-head p, html[lang="ta"] .rsvp-note,
html[lang="ta"] .attend-options label{
  font-family:'Noto Serif Tamil', 'Cormorant Garamond', serif;
}
html[lang="ta"] .eyebrow, html[lang="ta"] .lbl, html[lang="ta"] .btn,
html[lang="ta"] .hero-meta, html[lang="ta"] .links, html[lang="ta"] .field label,
html[lang="ta"] .field legend, html[lang="ta"] .event-tag, html[lang="ta"] .env-hint,
html[lang="ta"] .event-date .month, html[lang="ta"] footer .date{
  letter-spacing:.03em !important;
}
html[lang="ta"] .section-head h2{ font-size:clamp(1.6rem,3.6vw,2.4rem); line-height:1.35; }
html[lang="ta"] .event-body h3{ font-size:clamp(1.35rem,2.6vw,1.8rem); line-height:1.35; }
html[lang="ta"] .lede{ font-size:clamp(1rem,1.9vw,1.25rem); line-height:1.9; }
html[lang="ta"] .btn{ font-size:.74rem; }

/* Navigation auf schmalen Handys: alles passt in eine Zeile */
.hero-nav .mark{ white-space:nowrap; }
@media (max-width:420px){
  .hero-nav{ gap:14px; padding-left:12px; padding-right:12px; }
  .hero-nav .mark{ font-size:1.15rem; }
  .hero-nav .links{ gap:10px; letter-spacing:.08em; }
  .lang-toggle button{ padding:5px 8px; }
}

/* Sehr schmale Handys (z. B. 360 px): mit 3 Sprachen wird es eng */
@media (max-width:440px){
  .hero-nav:has(.lang-toggle) .mark{ display:none; }   /* „C & S“ ausblenden, Rest passt */
}
@media (max-width:380px){
  .hero-names{ font-size:1.75rem; }
  .hero-content{ padding-left:18px; padding-right:18px; }
}

/* =====================================================================
   ANIMIERTE FEIER-KARTEN  (Ringe · Blüte · Discokugel)
   Animationen laufen nur, solange die Karte sichtbar ist (.is-visible)
   ===================================================================== */
.event-card{ position:relative; overflow:hidden; isolation:isolate; }
.event-date, .event-body{ position:relative; z-index:1; }
.event-ambient{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.event-card:not(.is-visible) .event-ambient *,
.event-card:not(.is-visible) .emblem *{ animation-play-state:paused !important; }

.emblem{ display:block; width:78px; height:auto; margin:20px auto 0; overflow:visible; }

/* ---------- Standesamt: Ringe ---------- */
.emblem-rings .ring{
  fill:none; stroke:var(--gold); stroke-width:2.6; stroke-linecap:round;
  stroke-dasharray:107; stroke-dashoffset:107;
  animation:ring-draw 1.6s cubic-bezier(.65,0,.35,1) forwards;
}
.emblem-rings .r2{ animation-delay:.45s; stroke:#C9A86A; }
.emblem-rings .ring-shine{
  fill:none; stroke:#FFF6DF; stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:10 97; stroke-dashoffset:0; opacity:0;
  animation:ring-shine 3.2s linear 2.1s infinite;
}
.emblem-rings .s2{ animation-delay:2.7s; }
.emblem-rings .gem{
  fill:#FFFDF7; stroke:var(--gold); stroke-width:1;
  opacity:0; transform-box:fill-box; transform-origin:50% 100%;
  animation:gem-pop .6s cubic-bezier(.34,1.56,.64,1) 1.5s forwards;
}
.spark{ fill:var(--gold-light); transform-box:fill-box; transform-origin:center; opacity:0;
  animation:twinkle 2.6s ease-in-out infinite; }
.spark.k2{ animation-delay:.9s; } .spark.k3{ animation-delay:1.7s; }

@keyframes ring-draw{ to{ stroke-dashoffset:0; } }
@keyframes ring-shine{
  0%{ stroke-dashoffset:0; opacity:0; } 10%{ opacity:.9; }
  60%{ opacity:.9; } 100%{ stroke-dashoffset:-107; opacity:0; }
}
@keyframes gem-pop{ from{ opacity:0; transform:scale(.3); } to{ opacity:1; transform:scale(1); } }
@keyframes twinkle{ 0%,100%{ opacity:0; transform:scale(.4) rotate(0deg); } 50%{ opacity:1; transform:scale(1) rotate(45deg); } }

.amb-sparkle i{
  position:absolute; left:var(--x); top:var(--y);
  width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle, #FFF6DF 0 30%, rgba(217,194,147,.6) 31%, transparent 70%);
  animation:twinkle 3.4s ease-in-out var(--d) infinite; opacity:0;
}

/* ---------- Thaali: Blüte + rieselnde Blütenblätter ---------- */
.emblem-flower .petal{ fill:#C9879A; }
.emblem-flower .petal.p1, .emblem-flower .petal.p3, .emblem-flower .petal.p5, .emblem-flower .petal.p7{ fill:#D9A5B3; }
.emblem-flower .petal-in{ fill:#FFFDF7; stroke:var(--gold-light); stroke-width:.8; }
.emblem-flower .core{ fill:var(--gold); }
.emblem-flower .petal, .emblem-flower .petal-in{
  transform-box:fill-box; transform-origin:50% 100%;   /* wächst vom Blütenkern nach außen */
  transform:scale(0); opacity:0;
  animation:petal-open .8s cubic-bezier(.34,1.4,.64,1) forwards;
}
.emblem-flower .core{ transform-box:fill-box; transform-origin:center; transform:scale(0); animation:gem-pop .5s ease 1.3s forwards; }
.emblem-flower .bloom{ transform-box:fill-box; transform-origin:50% 50%; animation:bloom-turn 40s linear 1.6s infinite; }
.emblem-flower .p0{ animation-delay:.05s } .emblem-flower .p1{ animation-delay:.15s }
.emblem-flower .p2{ animation-delay:.25s } .emblem-flower .p3{ animation-delay:.35s }
.emblem-flower .p4{ animation-delay:.45s } .emblem-flower .p5{ animation-delay:.55s }
.emblem-flower .p6{ animation-delay:.65s } .emblem-flower .p7{ animation-delay:.75s }
.emblem-flower .petal-in{ animation-delay:.9s !important; }
@keyframes petal-open{ to{ transform:scale(1); opacity:1; } }
@keyframes bloom-turn{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

.amb-petals i{
  position:absolute; top:-24px; left:var(--x);
  width:calc(11px * var(--s)); height:calc(15px * var(--s));
  background:var(--c);
  border-radius:80% 0 80% 0;
  box-shadow:inset -1px -1px 2px rgba(0,0,0,.06);
  opacity:.75;
  animation:petal-fall var(--t) linear var(--d) infinite;
}
@keyframes petal-fall{
  0%  { transform:translate(0,0) rotate(0deg); opacity:0; }
  8%  { opacity:.75; }
  25% { transform:translate(22px,25cqh) rotate(70deg); }
  50% { transform:translate(-14px,50cqh) rotate(160deg); }
  75% { transform:translate(18px,75cqh) rotate(250deg); }
  92% { opacity:.6; }
  100%{ transform:translate(-6px,calc(100cqh + 30px)) rotate(340deg); opacity:0; }
}
.amb-petals{ container-type:size; }

/* ---------- Reception: Abendstimmung, Discokugel, Lichtkegel ---------- */
.event-card--disco{
  background:radial-gradient(120% 140% at 20% 0%, #4A2A4E 0%, #2B1830 55%, #1E1022 100%);
  border-color:rgba(217,194,147,.35);
  color:var(--ivory);
}
.event-card--disco .event-date{ border-color:rgba(217,194,147,.3); }
.event-card--disco .event-date .day,
.event-card--disco .event-body h3{ color:var(--ivory); }
.event-card--disco .event-date .weekday{ color:var(--ivory); opacity:.7; }
.event-card--disco .eyebrow, .event-card--disco .event-date .month{ color:var(--gold-light); }
.event-card--disco .event-meta svg{ color:var(--gold-light); }
.event-card--disco .btn--ghost-dark{ color:var(--ivory); border-color:rgba(217,194,147,.6); }
.event-card--disco .btn--ghost-dark:hover{ background:var(--gold-light); color:var(--violet); border-color:var(--gold-light); }
.event-card--disco a:focus-visible, .event-card--disco button:focus-visible{ outline-color:var(--gold-light); }

.emblem-disco .string{ stroke:var(--gold-light); stroke-width:1; opacity:.7; }
.emblem-disco .facets line, .emblem-disco .lat{ stroke:rgba(90,60,30,.45); stroke-width:.9; }
.emblem-disco .facets{ animation:ball-spin 3.5s linear infinite; }
.emblem-disco .ball-rim{ fill:none; stroke:rgba(255,246,223,.5); stroke-width:.8; }
.emblem-disco{ transform-origin:50% 0; animation:ball-sway 6s ease-in-out infinite; }
@keyframes ball-spin{ from{ transform:translateX(0); } to{ transform:translateX(-7px); } }
@keyframes ball-sway{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(3deg); } }

.amb-disco b{
  position:absolute; top:-10%; left:var(--x);
  width:140px; height:130%;
  margin-left:-70px;
  background:linear-gradient(to bottom, rgba(255,246,223,.22), rgba(217,194,147,.08) 55%, transparent 85%);
  clip-path:polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  transform-origin:50% 0;
  mix-blend-mode:screen;
  animation:beam-sweep var(--t) ease-in-out var(--d) infinite alternate;
}
@keyframes beam-sweep{ from{ transform:rotate(calc(var(--r) - 22deg)); } to{ transform:rotate(calc(var(--r) + 22deg)); } }

.amb-disco i{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--sz); height:var(--sz); border-radius:50%;
  background:var(--c); filter:blur(5px);
  animation:orb-float var(--t) ease-in-out var(--d) infinite;
}
@keyframes orb-float{
  0%,100%{ transform:translate(0,0) scale(1); opacity:.35; }
  50%{ transform:translate(14px,-18px) scale(1.25); opacity:.9; }
}

/* ---------- Handy: Emblem rechts neben dem Datum ---------- */
@media (max-width:640px){
  .event-date .emblem{ width:52px; margin:0 0 0 auto; align-self:center; }
}

/* ---------- Bewegung reduzieren: alles direkt fertig, ohne Animation ---------- */
@media (prefers-reduced-motion: reduce){
  .event-ambient{ display:none; }
  .emblem *, .emblem{ animation:none !important; }
  .emblem-rings .ring{ stroke-dashoffset:0; }
  .emblem-rings .gem, .emblem-flower .petal, .emblem-flower .petal-in{ opacity:1; transform:none; }
  .emblem-flower .core{ transform:none; }
}

/* ---------- Standesamt: Kapelle + aufsteigende Hochzeitstauben ---------- */
.amb-doves{ container-type:size; --bw:180px; }
.amb-doves .chapel{
  position:absolute; right:5%; bottom:0;
  width:var(--bw); height:auto; overflow:visible;
  fill:none; stroke:var(--gold); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;
  opacity:.55;
}
.amb-doves .chapel *{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:chapel-draw 1.8s cubic-bezier(.65,0,.35,1) .2s forwards;
}
@keyframes chapel-draw{ to{ stroke-dashoffset:0; } }

.amb-doves i{
  position:absolute;
  /* Start: Kapellentür (Mitte der Kapelle, unten) */
  left:calc(95% - var(--bw) / 2 - 27px);
  bottom:6px;
  width:calc(54px * var(--s)); height:calc(32px * var(--s));
  opacity:0;
  animation:dove-rise var(--t) cubic-bezier(.3,.1,.4,1) var(--d) infinite;
}
.amb-doves svg:not(.chapel){ width:100%; height:100%; overflow:visible; filter:drop-shadow(0 2px 3px rgba(43,24,48,.18)); }
.amb-doves .body{ fill:#FFFFFF; stroke:#C9A86A; stroke-width:.8; }
.amb-doves .wing{ stroke:#C9A86A; stroke-width:.8; transform-box:fill-box; transform-origin:50% 100%;
  animation:wing-flap var(--f) ease-in-out infinite alternate; }
.amb-doves .wing.near{ fill:#FFFFFF; }
.amb-doves .wing.far{ fill:var(--ivory-deep); animation-delay:calc(var(--f) * -.4); }
.amb-doves .eye{ fill:var(--violet); }
@keyframes wing-flap{ from{ transform:scaleY(1); } to{ transform:scaleY(-.6); } }

/* steigen schräg nach oben, werden dabei etwas kleiner (Entfernung) und verblassen oben */
@keyframes dove-rise{
  0%  { transform:translate(0, 0) scaleX(var(--flip)) rotate(-40deg) scale(.55); opacity:0; }
  6%  { opacity:1; }
  35% { transform:translate(calc(var(--dx) * .3), -38cqh) scaleX(var(--flip)) rotate(-28deg) scale(.95); }
  70% { transform:translate(calc(var(--dx) * .7), -78cqh) scaleX(var(--flip)) rotate(-18deg) scale(.85); opacity:.9; }
  100%{ transform:translate(var(--dx), -118cqh) scaleX(var(--flip)) rotate(-12deg) scale(.7); opacity:0; }
}

@media (max-width:640px){
  .amb-doves{ --bw:120px; }
  .amb-doves .chapel{ opacity:.4; }
}

/* Karte: Quellenangabe dezent (kleines „i“ unten rechts), MapLibre-Logo aus */
.map-frame .maplibregl-ctrl-logo{ display:none !important; }
.map-frame .maplibregl-ctrl-attrib{ font-size:10px; background:rgba(247,241,230,.8); }
.map-frame .maplibregl-ctrl-attrib-button{ opacity:.6; }

/* =====================================================================
   RECEPTION-SEITE: „Details“ in Abendstimmung (wie die Reception-Karte)
   ===================================================================== */
.details--disco{
  position:relative; overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 120% at 50% 0%, #4A2A4E 0%, #2B1830 55%, #1E1022 100%);
  color:var(--ivory);
}
.details--disco > .container{ position:relative; z-index:1; }
.details--disco .event-ambient{ z-index:0; }
.details--disco .section-head .eyebrow{ color:var(--gold-light); }
.details--disco .section-head h2{ color:var(--ivory); }
.details--disco .details-grid{ border-color:rgba(217,194,147,.3); }
.details--disco .details-grid > div{ border-color:rgba(217,194,147,.3); }
.details--disco .details-grid svg{ color:var(--gold-light); }
.details--disco .details-grid h3{ color:var(--gold-light); }
.details--disco .details-grid .big{ color:var(--ivory); }
.details--disco .details-grid .sub{ color:var(--ivory); opacity:.7; }
.details-emblem{ width:84px; margin:0 auto 18px; }
.details--disco:not(.is-visible) .event-ambient *,
.details--disco:not(.is-visible) .emblem *{ animation-play-state:paused !important; }
/* breitere Lichtkegel für die ganze Sektion */
.details--disco .amb-disco b{ width:220px; margin-left:-110px; }
@media (max-width:640px){
  .details-emblem{ width:64px; }
  .details--disco .amb-disco b{ width:150px; margin-left:-75px; }
}

/* ---- Karte: Umschalter „Karte | Satellit“ ---- */
.map-frame .map-switch{
  position:relative; display:flex; gap:2px; padding:3px;
  margin:12px 0 0 12px;
  background:rgba(247,241,230,.94);
  border:1px solid var(--gold-line); border-radius:999px;
  box-shadow:0 4px 14px rgba(43,24,48,.15);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  pointer-events:auto;
}
.map-switch-pill{
  position:absolute; top:3px; bottom:3px; left:0; width:0;
  border-radius:999px; background:var(--violet);
  transition:transform .5s cubic-bezier(.65,0,.35,1), width .5s cubic-bezier(.65,0,.35,1);
  pointer-events:none;
}
.map-switch button{
  position:relative; z-index:1;
  background:none; border:0; border-radius:999px;
  padding:7px 14px;
  font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--violet); cursor:pointer;
  transition:color .45s ease;
}
.map-switch button[aria-pressed="true"]{ color:var(--ivory); }
html[lang="ta"] .map-switch button{ letter-spacing:0; font-family:'Noto Sans Tamil',sans-serif; font-size:.66rem; }
/* Pin auf Luftbild gut sichtbar: feiner heller Rand */
.map-frame .maplibregl-marker svg{ filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 3px 5px rgba(0,0,0,.3)); }




/* =====================================================================
   HERO – KOMPAKT: gleiche Schrift & Farben (Gold/Weiß), aber kleiner,
   damit mehr vom Foto zu sehen ist
   ===================================================================== */
.hero-media::after{
  background:
    linear-gradient(to bottom, rgba(25,14,28,.40) 0%, rgba(25,14,28,0) 18%),
    linear-gradient(to top, rgba(20,10,22,.85) 0%, rgba(22,12,25,.55) 24%, rgba(25,14,28,.12) 46%, rgba(25,14,28,0) 60%) !important;
}
.hero-content{ padding-bottom:clamp(26px, 5vh, 52px); }
.hero-content .eyebrow{ font-size:clamp(.62rem, 1vw, .72rem) !important; margin-bottom:10px; }
.hero-names{ font-size:clamp(1.65rem, 4.2vw, 2.9rem); margin-bottom:12px; }
.hero-meta{ font-size:clamp(.72rem, 1.1vw, .82rem) !important; margin-bottom:20px; }
.countdown{ margin-bottom:22px; gap:clamp(8px, 2.4vw, 22px) !important; }
.countdown div{ min-width:46px; }
.countdown .num{ font-size:clamp(1.25rem, 3.2vw, 1.9rem) !important; }
.countdown .lbl{ font-size:.56rem !important; margin-top:2px; }
.hero-actions{ gap:10px; }
.hero-actions .btn{ padding:11px 22px; font-size:.64rem !important; }
@media (max-width:560px){
  .hero-names{ font-size:1.6rem; }
  .hero-actions .btn{ padding:10px 18px; }
}
@media (min-width:900px){
  .hero-content .eyebrow{ font-size:.74rem !important; }
  .hero-names{ font-size:3.1rem; }
  .hero-meta{ font-size:.86rem !important; }
  .countdown .num{ font-size:2rem !important; }
  .countdown .lbl{ font-size:.6rem !important; }
  .hero-actions .btn{ padding:13px 28px; font-size:.7rem !important; }
}

/* Alle Buttons rund (Pillenform) – Hero, RSVP, Karten, Route */
.btn{ border-radius:999px; }
.hero-actions .btn{ padding-left:26px; padding-right:26px; }
.rsvp .btn--filled{ padding:15px 42px; }


/* ---------- Personenzahl pro Feier (invite / welcome) ---------- */
.event-guests{
  margin-top:14px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  opacity:0; transform:translateY(-6px);
  transition:opacity .35s ease, transform .35s ease;
}
.event-guests.is-open{ opacity:1; transform:none; }
.event-guests[hidden]{ display:none; }
.event-guests > label{ margin:0; }
@media (prefers-reduced-motion: reduce){ .event-guests{ transition:none; } }