/* =====================================================================
   Digitale Hochzeitseinladung „باب الفرح“
   ===================================================================== */

/* ---------- Schriften (liegen auf der eigenen Seite – keine Verbindung zu Google) ---------- */
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/amiri-400-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/amiri-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/amiri-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/amiri-700-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/amiri-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/amiri-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Aref Ruqaa'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/aref-ruqaa-400-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Aref Ruqaa'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/aref-ruqaa-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Aref Ruqaa'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/aref-ruqaa-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Aref Ruqaa'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/aref-ruqaa-700-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Aref Ruqaa'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/aref-ruqaa-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Aref Ruqaa'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/aref-ruqaa-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/tajawal-400-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/tajawal-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/tajawal-500-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/tajawal-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/tajawal-700-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/tajawal-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('assets/fonts/tajawal-800-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('assets/fonts/tajawal-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg1: #fbf4f8;
  --bg2: #f1e6f3;
  --lila: #8e6cc4;
  --lila-l: #b39ddb;
  --lila-d: #7556ab;
  --gold: #c9a45c;
  --plum: #4a3550;
  --muted: #7a6680;

  --f-cal: 'Aref Ruqaa', 'Amiri', serif;
  --f-body: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-door: cubic-bezier(.55, .05, .2, 1);
  --col: min(100vw, 480px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #2b1d24;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--plum);
  background: #2b1d24;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; height: 100%; }
html:has(body.is-locked) { overflow: hidden; }

img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
p, h1, h2 { margin: 0; }
svg { display: block; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.noscript { position: fixed; z-index: 100; inset: auto 16px 40px; padding: 14px; text-align: center; background: var(--bg1); border-radius: 14px; }

/* ---------- Desktop: unscharfer Hintergrund außen herum ---------- */
.backdrop { display: none; }
@media (min-width: 520px) {
  .backdrop {
    display: block;
    position: fixed;
    inset: -60px;
    z-index: 0;
    background: url("assets/garten.webp") center / cover no-repeat;
    filter: blur(28px) saturate(1.1) brightness(.72);
  }
  .backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(251, 244, 248, .1), rgba(43, 29, 36, .55));
  }
}

/* ---------- Schaltflächen ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(180deg, #a184d4 0%, #8e6cc4 55%, #7c5bb7 100%);
  box-shadow: 0 12px 24px -12px rgba(110, 76, 170, .75), inset 0 1px 0 rgba(255, 255, 255, .32);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-sm { min-height: 42px; padding: 10px 16px; font-size: 14.5px; }
.btn-sm svg { width: 17px; height: 17px; }
.btn-ghost {
  color: var(--lila-d);
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 0 0 1.5px rgba(142, 108, 196, .5), 0 8px 18px -12px rgba(110, 76, 170, .5);
}
.btn:focus-visible, .music-btn:focus-visible, .scroll-cue:focus-visible, .tap-layer:focus-visible {
  outline: 2px solid var(--lila-l);
  outline-offset: 3px;
}

/* ---------- ✿-Trenner ---------- */
.sep { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 22px; }
.sep i { display: block; width: 74px; height: 1px; background: linear-gradient(90deg, rgba(179, 157, 219, 0), var(--lila-l)); }
.sep i:last-child { transform: scaleX(-1); }
.sep svg { width: 18px; height: 18px; }
.sep-light i { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 246, 230, .85)); }

/* =====================================================================
   1–2) Das Tor
   ===================================================================== */
.intro {
  position: fixed;
  z-index: 50;
  inset: 0;
  width: var(--col);
  margin-inline: auto;
  overflow: hidden;
  background: #2b1d24;
}
.intro.is-gone { display: none; }

.gate { position: absolute; inset: 0; }
.gate.knock { animation: knock .34s cubic-bezier(.36, .07, .19, .97); }
@keyframes knock {
  0%, 100% { transform: none; }
  20% { transform: translate3d(-2.5px, 0, 0) rotate(-.25deg); }
  45% { transform: translate3d(2.5px, 0, 0) rotate(.22deg); }
  70% { transform: translate3d(-1.2px, 0, 0); }
}
.gate-cam { position: absolute; inset: 0; transform-origin: 50% 55%; }

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sw, 100%);
  height: var(--sh, 100%);
  transform: translate(-50%, -50%);
  direction: ltr;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.intro.is-ready .stage { opacity: 1; }
.stage-img, .stage-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-img { animation: breathe-in 18s ease-in-out infinite alternate; transform-origin: 50% 55%; }
@keyframes breathe-in { from { transform: scale(1); } to { transform: scale(1.025); } }
.stage-vid { opacity: 0; transition: opacity .8s ease; }
.stage-vid.is-playing { opacity: 1; }
.is-opening .stage-img { animation: none; }
.is-opening .stage-vid { opacity: 0; transition-duration: .25s; }

.door {
  position: absolute;
  left: calc(var(--tx) * 1%);
  top: calc(var(--ty) * 1%);
  width: calc(var(--tb) * 1%);
  height: calc(var(--th) * 1%);
  perspective: calc(var(--sw, 480px) * 1.6);
  perspective-origin: 50% 46%;
}
.door-view {
  position: absolute;
  inset: -.5% -.7% 0;
  overflow: hidden;
  border-radius: 50% 50% 0 0 / calc(var(--arch) * 1%) calc(var(--arch) * 1%) 0 0;
  background: #fff6ea;
  opacity: 0;
}
.door-view img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--gfocus, 50% 56%);
  transform-origin: 50% 56%;
  transform: scale(1.14);
}
.door-light {
  position: absolute;
  inset: -25%;
  background: radial-gradient(ellipse 40% 44% at 50% 46%, #fffefb 0%, rgba(255, 250, 240, .92) 28%, rgba(255, 242, 226, .5) 56%, rgba(255, 236, 220, 0) 80%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(.4);
}
.leaf {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: var(--sw) var(--sh);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 2.2s var(--ease-door) .3s;
}
.leaf-l {
  left: 0;
  transform-origin: 0 50%;
  border-top-left-radius: 100% calc(var(--arch) * 1%);
  background-position: calc(var(--sw) * var(--tx) / -100) calc(var(--sh) * var(--ty) / -100);
}
.leaf-r {
  right: 0;
  transform-origin: 100% 50%;
  border-top-right-radius: 100% calc(var(--arch) * 1%);
  background-position: calc(var(--sw) * (var(--tx) + var(--tb) / 2) / -100) calc(var(--sh) * var(--ty) / -100);
}
.leaf-shade { position: absolute; inset: 0; opacity: 0; transition: opacity 2s ease .5s; }
.leaf-l .leaf-shade { background: linear-gradient(90deg, rgba(255, 240, 220, .12), rgba(28, 12, 4, .55)); }
.leaf-r .leaf-shade { background: linear-gradient(270deg, rgba(255, 240, 220, .12), rgba(28, 12, 4, .55)); }
.door-seam {
  position: absolute;
  left: 50%;
  top: 1%;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 250, 240, 0), #fffaf0 10%, #fff3dc 90%, rgba(255, 243, 220, 0));
  box-shadow: 0 0 16px 6px rgba(255, 240, 210, .85);
  opacity: 0;
  transform: scaleY(.3);
}
.door-spill {
  position: absolute;
  left: calc((var(--tx) - 14) * 1%);
  width: calc((var(--tb) + 28) * 1%);
  top: calc((var(--ty) + var(--th) - 2) * 1%);
  height: 18%;
  background: radial-gradient(ellipse 50% 70% at 50% 0%, rgba(255, 249, 236, .95), rgba(255, 238, 214, .45) 45%, rgba(255, 232, 205, 0) 72%);
  mix-blend-mode: screen;
  opacity: 0;
}

.gate-rays {
  position: absolute;
  left: calc((var(--tx) + var(--tb) / 2) * 1%);
  top: calc((var(--ty) + var(--th) * .44) * 1%);
  width: 250%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 247, 228, 0) 0deg 7deg, rgba(255, 244, 222, .55) 9.5deg 11deg, rgba(255, 247, 228, 0) 13.5deg 21deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .5) 15%, transparent 42%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .5) 15%, transparent 42%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

/* Öffnen */
.is-opening .leaf-l { transform: rotateY(84deg); }
.is-opening .leaf-r { transform: rotateY(-84deg); }
.is-opening .leaf-shade { opacity: 1; }
.is-opening .door-view { opacity: 1; transition: opacity .15s linear .3s; }
.is-opening .door-view img { transform: none; transition: transform 4.6s cubic-bezier(.3, .1, .3, 1) .3s; }
.is-opening .door-seam { animation: seam 1.4s ease-out forwards; }
.is-opening .door-light { opacity: .6; transform: scale(1.05); transition: opacity 1.4s ease .3s, transform 2.4s var(--ease) .3s; }
.is-opening .door-spill { transition: opacity 2s ease .8s; opacity: 1; }
.is-opening .gate-rays { animation: rays-in 5s ease-out .5s forwards; }
.is-flooding .door-light { opacity: 1; transform: scale(2.4); transition: opacity .9s ease, transform 1.5s ease-in; }
.is-flooding .gate-motes .mote { --o2: 1; }
@keyframes rays-in {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(.6); }
  45% { opacity: .85; }
  100% { opacity: .95; transform: translate(-50%, -50%) rotate(16deg) scale(1.1); }
}

/* Lichtstaub + Rosenblätter im Intro */
.gate-motes, .intro-petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.intro-petals { z-index: 1; }
.mote {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 251, 238, .95) 0%, rgba(255, 238, 204, .45) 42%, rgba(255, 232, 196, 0) 70%);
  animation: drift var(--d, 9s) ease-in-out var(--dl, 0s) infinite alternate, mote-glow var(--t, 3s) ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--dx, 20px), var(--dy, -40px), 0); } }
@keyframes mote-glow { from { opacity: var(--o1, .2); } to { opacity: var(--o2, .85); } }
.mote.gold { background: radial-gradient(circle, rgba(222, 186, 112, .95) 0%, rgba(222, 186, 112, .4) 45%, rgba(222, 186, 112, 0) 72%); }
.is-opening .intro-petals { opacity: 0; transition: opacity .8s ease; }
@keyframes seam {
  0% { opacity: 0; transform: scaleY(.3); }
  22% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1) scaleX(8); }
}

.gate-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(25, 12, 18, .4) 100%),
    linear-gradient(180deg, rgba(25, 12, 18, .25) 0%, rgba(25, 12, 18, 0) 16%, rgba(25, 12, 18, 0) 58%, rgba(25, 12, 18, .5) 84%, rgba(25, 12, 18, .62) 100%);
  transition: opacity .8s ease;
}
.is-opening .gate-veil { opacity: .45; }

/* Tipp-Fläche + Lichtring */
.tap-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.is-opening .tap-layer { pointer-events: none; }
.ring {
  position: absolute;
  z-index: 3;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid rgba(255, 236, 196, .95);
  box-shadow: 0 0 18px 4px rgba(255, 226, 170, .55), inset 0 0 14px 2px rgba(255, 236, 196, .45);
  animation: ring 0.75s var(--ease) forwards;
}
.ring::after {
  content: "";
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 235, .95), rgba(255, 236, 196, 0) 70%);
}
@keyframes ring {
  0% { transform: scale(.3); opacity: 1; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Namen + Hinweis + Punkte */
.intro-ui {
  position: absolute;
  z-index: 3;
  left: 18px;
  right: 18px;
  bottom: calc(8.5vh + var(--safe-b));
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.intro.is-ready .intro-ui { opacity: 1; transform: none; transition-delay: .5s; }
.intro.is-opening .intro-ui { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .6s var(--ease); transition-delay: 0s; }
.intro-names {
  font-family: var(--f-cal);
  font-size: clamp(40px, 12.5vw, 54px);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 3px 16px rgba(20, 8, 4, .75), 0 1px 3px rgba(20, 8, 4, .6);
}
.amp { display: inline-block; margin: 0 .3em; font-size: .7em; color: #f6e4b8; }
.intro-hint {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 500;
  color: #fffaf2;
  text-shadow: 0 2px 10px rgba(20, 8, 4, .85);
}
.knocks { display: flex; justify-content: center; gap: 14px; margin-top: 14px; }
.knocks i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.6px solid rgba(255, 250, 240, .9);
  box-shadow: 0 1px 6px rgba(20, 8, 4, .5);
  position: relative;
}
.knocks i::after {
  content: "";
  position: absolute;
  inset: -1.6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffaf0, #f2d9a6 70%);
  box-shadow: 0 0 12px 3px rgba(255, 226, 170, .75);
  opacity: 0;
  transform: scale(.3);
  transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.knocks i.on::after { opacity: 1; transform: scale(1); }

/* Überblendung ins cremige Rosa */
.whiteout {
  position: fixed;
  z-index: 60;
  inset: 0;
  width: var(--col);
  margin-inline: auto;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 46%, #fffefb 0%, #fdf5f2 38%, #f9e9f1 72%, #f3dfee 100%);
}
.whiteout.on { opacity: 1; transition: opacity 1.15s cubic-bezier(.5, 0, .7, .3); }
.whiteout.off { opacity: 0; transition: opacity 1.5s var(--ease); }

/* Justier-Modus (?justieren) */
.is-debug .door { outline: 2px dashed #0ff; }
.is-debug .leaf { opacity: .55; outline: 1px solid #f0f; }
.is-debug .door-view { opacity: .35; }

/* =====================================================================
   3) Hero
   ===================================================================== */
.app {
  position: relative;
  z-index: 1;
  width: var(--col);
  margin-inline: auto;
  background: var(--bg1);
  overflow: hidden;
}
@media (min-width: 520px) { .app { box-shadow: 0 0 90px rgba(0, 0, 0, .45); } }

.hero {
  position: relative;
  z-index: 2;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: #3a2733;
  color: #fff;
}
.hero-bg { position: absolute; inset: -4% 0 -12%; overflow: hidden; }
.hero-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hw, 100%);
  height: var(--hh, 100%);
  margin-left: calc(var(--hw, 100%) / -2);
  margin-top: calc(var(--hh, 100%) / -2);
  transform-origin: var(--hox, 50%) var(--hoy, 55%);
  transform: scale(var(--hz, 1.5));
}
.hero-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: var(--hox, 50%) var(--hoy, 55%);
  transform: scale(1.08);
}
.hero.is-live .hero-stage img { animation: settle 14s cubic-bezier(.2, .6, .3, 1) forwards; }
@keyframes settle { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.hero-vid.is-playing { opacity: 1; }

.hero-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 40% at 50% 40%, rgba(40, 18, 34, .36), rgba(40, 18, 34, 0) 72%),
    linear-gradient(180deg, rgba(40, 18, 34, .5) 0%, rgba(40, 18, 34, .1) 24%, rgba(40, 18, 34, .06) 58%, rgba(40, 18, 34, .42) 86%, rgba(40, 18, 34, .3) 100%);
}
/* warmes, goldenes Licht in der Mitte + dunklere Ränder (Kino-Look) */
.hero-veil::before, .hero-veil::after { content: ""; position: absolute; inset: 0; }
.hero-veil::before {
  background: radial-gradient(ellipse 60% 46% at 50% 47%, rgba(255, 214, 150, .34), rgba(255, 200, 130, .1) 55%, rgba(255, 200, 130, 0) 75%);
  mix-blend-mode: screen;
  animation: glow 7s ease-in-out infinite alternate;
}
.hero-veil::after {
  background: radial-gradient(ellipse 95% 80% at 50% 48%, rgba(30, 12, 20, 0) 52%, rgba(30, 12, 20, .5) 100%);
}
@keyframes glow { from { opacity: .7; } to { opacity: 1; } }
.hero::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54px;
  background: linear-gradient(180deg, rgba(251, 244, 248, 0), var(--bg1));
  pointer-events: none;
}

.hero-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.fx-sparkles, .fx-butterflies, .fx-petals { position: absolute; inset: 0; }
.spark {
  position: absolute;
  width: var(--s, 10px);
  height: var(--s, 10px);
  color: #fff6dc;
  filter: drop-shadow(0 0 4px rgba(255, 236, 190, .9));
  animation: twinkle var(--t, 2.6s) ease-in-out var(--dl, 0s) infinite, rise var(--r, 9s) linear var(--dl, 0s) infinite;
  opacity: 0;
}
.spark svg { width: 100%; height: 100%; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}
@keyframes rise { from { translate: 0 0; } to { translate: 0 -60px; } }

/* Schmetterlinge: WebGL-Leinwand (Intro-Überlagerung und hinter dem Hero-Text) */
.flutter-layer {
  position: fixed;
  z-index: 65;
  inset: 0;
  width: var(--col);
  margin-inline: auto;
  pointer-events: none;
}
.bf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.petal { position: absolute; top: -30px; left: var(--x); animation: fall var(--dur) linear var(--delay) infinite; }
.petal i { display: block; }
.petal .p-sway { animation: sway var(--sd) ease-in-out infinite alternate; }
.petal .p-spin { width: var(--size); height: var(--size); animation: spin var(--spin) linear infinite; opacity: var(--op, .9); }
.petal svg { width: 100%; height: 100%; }
@keyframes fall { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(100vh + 80px), 0); } }
@keyframes sway { from { transform: translateX(calc(var(--sx) * -1)); } to { transform: translateX(var(--sx)); } }
@keyframes spin { from { transform: rotate3d(1, .5, .3, 0deg); } to { transform: rotate3d(1, .5, .3, 360deg); } }

.hero-inner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(12.5vh + var(--safe-t)) 24px 0;
  text-align: center;
}
.hx {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.2s var(--ease), transform 1.3s var(--ease);
  transition-delay: calc(var(--d) * .26s + .35s);
}
.hero.is-live .hx { opacity: 1; transform: none; }
.hero-kicker {
  font-family: var(--f-cal);
  font-size: 24px;
  font-weight: 700;
  color: #fbeed8;
  text-shadow: 0 2px 10px rgba(20, 8, 12, .7);
  margin-bottom: 8px;
}
.hero-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--f-cal);
  font-weight: 700;
  line-height: 1.15;
  text-shadow: 0 4px 24px rgba(20, 8, 12, .6), 0 1px 3px rgba(20, 8, 12, .45);
}
.hero-names .nm { font-size: clamp(60px, 19vw, 84px); color: #fff; }
.hero-names .amp { margin: -2px 0 4px; font-size: clamp(28px, 8vw, 36px); color: #f6e4b8; }
.hero .sep { margin: 14px auto 12px; }
.hero .sep svg { filter: drop-shadow(0 0 6px rgba(255, 240, 220, .8)); }
.hero-date { font-size: 18px; font-weight: 700; color: #fff; text-shadow: 0 2px 10px rgba(20, 8, 12, .8); }
.hero-time { margin-top: 2px; font-size: 16.5px; font-weight: 700; color: #fff4e2; text-shadow: 0 2px 10px rgba(20, 8, 12, .9), 0 0 2px rgba(20, 8, 12, .6); }
.hero-sub {
  margin-top: 18px;
  font-family: var(--f-cal);
  font-size: clamp(19px, 5.6vw, 23px);
  line-height: 1.6;
  color: #fff;
  text-shadow: 0 2px 14px rgba(20, 8, 12, .85);
}

.scroll-cue {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(46px + var(--safe-b));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-left: -100px;
  width: 200px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  text-shadow: 0 2px 10px rgba(20, 8, 12, .85);
}
.cue-text { display: inline-flex; align-items: center; gap: 8px; }
.cue-text svg { width: 13px; height: 13px; }
.cue-arrow { font-size: 22px; line-height: 1; animation: hop 1.8s ease-in-out infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

.hero.is-off .spark, .hero.is-off .petal, .hero.is-off .petal i, .hero.is-off .cue-arrow { animation-play-state: paused; }

/* =====================================================================
   Heller Bereich
   ===================================================================== */
.content {
  position: relative;
  padding: 50px 22px calc(120px + var(--safe-b));
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  text-align: center;
}
.soft-petals {
  position: fixed;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: var(--col);
  margin-inline: auto;
  pointer-events: none;
  overflow: hidden;
}
.soft-petals { transition: opacity .6s ease; }
.content.hero-cover .soft-petals { opacity: 0; }
.content.hero-cover .soft-petals .petal,
.content.hero-cover .soft-petals .petal i,
.content.hero-cover .soft-petals .mote { animation-play-state: paused; }
.sec { position: relative; z-index: 1; padding-bottom: 40px; }
.title {
  font-family: var(--f-cal);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--plum);
}
.title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 8px auto 24px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(179, 157, 219, 0), var(--lila-l), rgba(179, 157, 219, 0));
}
.glass {
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(179, 157, 219, .45);
}

/* Bismillah + Vers */
.sec-verse { padding-top: 4px; }
.bismillah { font-family: var(--f-cal); font-size: 26px; font-weight: 400; line-height: 1.6; color: var(--plum); }
.verse-orn { width: 18px; height: 18px; margin: 12px auto 10px; }
.verse {
  max-width: 370px;
  margin: 0 auto;
  font-family: var(--f-cal);
  font-size: clamp(22px, 6.4vw, 27px);
  line-height: 1.8;
  color: #6e5490;
}

/* Einladungskarte */
.invite-text {
  max-width: 350px;
  margin: 0 auto;
  font-family: 'Amiri', serif;
  font-size: 19.5px;
  line-height: 2.05;
  color: var(--plum);
}

/* 4) Countdown */
.cd { display: flex; justify-content: center; gap: 10px; }
.cd-cell {
  flex: 1 1 0;
  max-width: 78px;
  padding: 14px 4px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(179, 157, 219, .45);
  box-shadow: 0 14px 28px -16px rgba(110, 76, 170, .45), inset 0 1px 0 #fff;
}
.cd-num {
  position: relative;
  height: 42px;
  perspective: 160px;
  font-size: 31px;
  font-weight: 800;
  line-height: 42px;
  color: var(--plum);
}
.cd-num span { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cd-num .in { animation: flip-in .55s var(--ease) both; }
.cd-num .out { animation: flip-out .4s ease-in both; }
@keyframes flip-in { from { transform: rotateX(-88deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes flip-out { from { transform: none; opacity: 1; } to { transform: rotateX(88deg); opacity: 0; } }
.cd-lab { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 500; color: var(--lila); }
.cd-done { font-family: var(--f-cal); font-size: 34px; color: var(--lila-d); }

/* 5) Programm */
.tl { position: relative; max-width: 360px; margin: 0 auto; }
.tl-line {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 1.5px;
  margin-left: -.75px;
  background: linear-gradient(180deg, rgba(179, 157, 219, 0), var(--lila-l) 10%, var(--lila-l) 90%, rgba(179, 157, 219, 0));
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 1.6s var(--ease);
}
.tl.in .tl-line { transform: none; }
.tl-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  align-items: center;
  min-height: 66px;
}
.tl-time { text-align: end; font-size: 16px; font-weight: 700; color: var(--lila-d); opacity: 0; transform: translateX(14px); }
.tl-event { text-align: start; font-size: 17px; font-weight: 700; color: var(--plum); opacity: 0; transform: translateX(-14px); }
.tl-dot { justify-self: center; width: 26px; height: 26px; opacity: 0; transform: scale(.2) rotate(-120deg); }
.tl-dot svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 6px rgba(142, 108, 196, .45)); }
.tl-row > * { transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i) * .22s + .25s); }
.tl-row .tl-dot { transition: opacity .5s ease, transform .9s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i) * .22s + .1s); }
.tl-row.in > * { opacity: 1; transform: none; }

/* Väter unter dem Einladungstext */
/* zwei exakt gleich breite Spalten, Herz genau in der Mitte – gespiegelt wie links und rechts */
.fathers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  align-items: start;
  max-width: 360px;
  margin: 28px auto 0;
}
.father { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.father-label { font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--lila); }
.father-name { display: flex; flex-direction: column; align-items: center; font-family: var(--f-cal); font-size: clamp(17px, 5vw, 19.5px); line-height: 1.7; color: var(--plum); }
.father-name span { white-space: nowrap; }
.fathers-heart {
  justify-self: center;
  align-self: center;
  width: 22px;
  height: 22px;
  margin-top: 25px;                        /* mittig auf Höhe der Namen (unter den Titeln) */
  color: #d7263d;
  filter: drop-shadow(0 3px 6px rgba(215, 38, 61, .28));
}
.fathers-heart svg { width: 100%; height: 100%; }

/* 6) Ort */
.venue-name { font-family: var(--f-cal); font-size: 32px; font-weight: 700; line-height: 1.45; color: var(--plum); }
.venue-addr { margin: 2px auto 22px; max-width: 320px; font-size: 15.5px; color: var(--muted); }
.btn-map { min-height: 52px; padding: 14px 26px; font-size: 16.5px; }
.maps-alt {
  display: table;
  margin: 14px auto 0;
  padding: 8px 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--lila-d);
  text-decoration: underline;
  text-decoration-color: rgba(142, 108, 196, .45);
  text-underline-offset: 4px;
}
.maps-alt[hidden] { display: none; }

/* Anmeldung (Netlify Forms) */
.rsvp-card {
  max-width: 360px;
  margin: 0 auto;
  padding: 22px 20px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .64);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(179, 157, 219, .5);
  box-shadow: 0 18px 36px -20px rgba(110, 76, 170, .5);
  text-align: start;
}
.rsvp-sub { margin: -4px 0 16px; text-align: center; font-size: 15px; color: var(--muted); }
.rsvp-form { display: flex; flex-direction: column; gap: 8px; }
.rsvp-form[hidden], .rsvp-thanks[hidden], .rsvp-error[hidden], .rsvp-sub[hidden] { display: none; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rsvp-label { font-size: 14.5px; font-weight: 700; color: var(--plum); }
.rsvp-input {
  width: 100%;
  min-height: 50px;
  margin-bottom: 8px;
  padding: 12px 16px;
  font: 500 16px/1.4 var(--f-body);
  color: var(--plum);
  background: rgba(255, 255, 255, .92);
  border: 1.5px solid rgba(179, 157, 219, .6);
  border-radius: 16px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.rsvp-input::placeholder { color: #a596aa; }
.rsvp-input:focus { border-color: var(--lila); box-shadow: 0 0 0 3px rgba(142, 108, 196, .18); }
.rsvp-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 999px;
  border: 1.5px solid rgba(142, 108, 196, .5);
  background: rgba(255, 255, 255, .88);
  font-size: 17px;
  font-weight: 700;
  color: var(--lila-d);
}
.choice input:checked + span {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, #a184d4 0%, #8e6cc4 55%, #7c5bb7 100%);
  box-shadow: 0 12px 24px -12px rgba(110, 76, 170, .75), inset 0 1px 0 rgba(255, 255, 255, .32);
}
.choice input:focus-visible + span { outline: 2px solid var(--lila-l); outline-offset: 3px; }
.rsvp-error { text-align: center; font-size: 14px; font-weight: 700; color: #a8455c; }
.rsvp-send { width: 100%; margin-top: 8px; }
.rsvp-send[disabled] { opacity: .7; pointer-events: none; }
.rsvp-thanks { padding: 10px 4px 4px; text-align: center; font-family: var(--f-cal); font-size: 24px; line-height: 1.6; color: var(--lila-d); }

/* 7) Hinweise */
.note-card {
  position: relative;
  max-width: 340px;
  margin: 34px auto 20px;
  padding: 40px 22px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .64);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(179, 157, 219, .55);
  box-shadow: 0 18px 36px -20px rgba(110, 76, 170, .5);
}
.note-bell {
  position: absolute;
  top: -28px;
  left: 50%;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #f7e9c4, #c9a45c 68%, #a9843f);
  box-shadow: 0 10px 20px -8px rgba(150, 110, 40, .7), 0 0 0 5px rgba(255, 255, 255, .8);
}
.note-bell svg { width: 27px; height: 27px; transform-origin: 50% 12%; animation: bell 4s ease-in-out infinite; }
@keyframes bell { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); } 86% { transform: rotate(7deg); } 92% { transform: rotate(-4deg); } }
.note-kick { display: block; font-size: 13.5px; font-weight: 700; color: var(--lila); }
.note-text { margin-top: 6px; font-size: 21px; font-weight: 700; line-height: 1.6; color: var(--plum); }
.note-text span { display: block; }
.note-list { max-width: 340px; margin: 0 auto; padding: 0; list-style: none; }
.note-list li { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 0; font-size: 16px; font-weight: 500; color: #5d4a63; }
.note-list li + li { border-top: 1px dashed rgba(179, 157, 219, .45); }
.note-list svg { width: 15px; height: 15px; flex: none; }

/* 8) Kalender */
.cal {
  width: min(100%, 300px);
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(179, 157, 219, .5);
  box-shadow: 0 24px 44px -24px rgba(90, 60, 140, .55);
}
.cal-top {
  position: relative;
  padding: 20px 12px 12px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #a184d4, #8e6cc4);
}
.cal-ring { position: absolute; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.cal-ring:nth-child(1) { right: 26%; }
.cal-ring:nth-child(2) { left: 26%; }
.cal-body { display: flex; flex-direction: column; align-items: center; padding: 14px 10px 12px; }
.cal-wd { font-size: 18px; font-weight: 700; color: var(--lila-d); }
.cal-day {
  font-size: 78px;
  font-weight: 800;
  line-height: 1.05;
  background: linear-gradient(180deg, #a184d4, #7556ab);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.cal-time { margin-top: 4px; font-size: 15.5px; font-weight: 500; color: var(--plum); }
.cal-foot { padding: 12px 14px 16px; border-top: 1px dashed rgba(179, 157, 219, .6); }
.cal-cap { margin-bottom: 12px; font-size: 14px; color: var(--muted); }
.cal-btns { display: flex; justify-content: center; gap: 8px; }
.cal-btns .btn { flex: 1 1 0; padding-inline: 10px; }

/* 9) Abschluss */
.closing { padding-top: 6px; padding-bottom: 10px; }
.closing-text { font-family: var(--f-cal); font-size: 34px; font-weight: 700; line-height: 1.55; color: var(--plum); }
.closing-orn { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 10px; }
.closing-orn i { display: block; width: 52px; height: 1px; background: linear-gradient(90deg, rgba(201, 164, 92, 0), var(--gold)); }
.closing-orn i:last-child { transform: scaleX(-1); }
.closing-orn svg { width: 13px; height: 13px; }
.closing-orn svg.big { width: 22px; height: 22px; }
.closing-names { font-family: var(--f-cal); font-size: 30px; font-weight: 700; line-height: 1.5; color: var(--lila-d); }
.closing-names .amp { color: var(--gold); }
.closing-families { margin-top: 10px; font-family: 'Amiri', serif; font-size: 19px; line-height: 1.7; color: var(--plum); }
.closing-hashtag { margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--lila); }

/* kleine Widmung ganz am Ende */
.gift {
  position: relative;
  z-index: 1;
  margin: 26px auto 0;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--muted);
  opacity: .85;
}

/* Musik-Knopf – unten rechts */
.music-btn {
  position: fixed;
  z-index: 40;
  right: max(16px, calc(50vw - 224px));
  bottom: calc(16px + var(--safe-b));
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(179, 157, 219, .8);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--lila-d);
  box-shadow: 0 10px 24px -10px rgba(74, 53, 80, .55);
  cursor: pointer;
  opacity: 0;
  transform: scale(.6);
  pointer-events: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.music-btn.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.music-btn[hidden] { display: none; }
.mb-disc { position: absolute; inset: 4px; display: grid; place-items: center; border-radius: 50%; border: 1px dashed rgba(142, 108, 196, .55); }
.mb-disc svg { grid-area: 1 / 1; width: 22px; height: 22px; }
.mb-off { opacity: .6; }
.music-btn.is-playing .mb-off, .music-btn:not(.is-playing) .mb-on { display: none; }
.music-btn.is-playing .mb-disc { animation: turn 7s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }

/* Weiches Einblenden beim Scrollen */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Sparmodus: nur auf Geräten, die ruckeln (wird automatisch gemessen) ---------- */
.low-power .petal:nth-child(2n),
.low-power .spark:nth-child(2n),
.low-power .mote:nth-child(2n) { display: none; }
.low-power .note-card, .low-power .cal, .low-power .rsvp-card, .low-power .cd-cell, .low-power .music-btn {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(255, 255, 255, .9);
}

/* ---------- Weniger Bewegung gewünscht ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal, .hx, .tl-row > *, .intro-ui, .stage { transition-duration: .3s !important; transition-delay: 0s !important; transform: none !important; }
  .reveal, .tl-row > * { opacity: 1; }
  .fx-butterflies, .flutter-layer, .fx-petals, .fx-sparkles, .soft-petals { display: none; }
}