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

/* ---------- Schriften (liegen auf der eigenen Seite – keine Verbindung zu Google) ---------- */
/* Leerzeichen (auch das feste) kommen aus den arabischen Dateien – gleiche Breite; so muss für arabischen Text
   keine lateinische Datei mitgeladen werden */
@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+0020, U+00A0, 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-001F, U+0021-009F, U+00A1-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+0020, U+00A0, 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-001F, U+0021-009F, U+00A1-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+0020, U+00A0, 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-001F, U+0021-009F, U+00A1-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+0020, U+00A0, 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-001F, U+0021-0025, U+0027-009F, U+00A1-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; }
/* nur „&“ (Namen am Tor): 1 KB statt der ganzen lateinischen Schrift – schnelleres erstes Bild */
@font-face { font-family: 'Aref Ruqaa'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/aref-ruqaa-700-amp.woff2') format('woff2'); unicode-range: U+0026; }
@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+0020, U+00A0, 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-001F, U+0021-009F, U+00A1-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+0020, U+00A0, 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-001F, U+0021-009F, U+00A1-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+0020, U+00A0, 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-001F, U+0021-009F, U+00A1-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+0020, U+00A0, 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-001F, U+0021-009F, U+00A1-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: #6a5460;                     /* auf dem ganzen hellen Verlauf ≥ 4,9 : 1 Kontrast */

  /* heller Bereich: Creme → warmes Champagner → zartes Rosé → leichtes Gold-Beige → warmer Ton */
  --cream: #fcf6ee;
  --champagne: #f7ebdc;
  --rose: #f6e2df;
  --goldbeige: #f2e3cc;
  --warm: #edd7c2;
  --brown: #5b4033;
  --rose-d: #8f4458;                    /* Rosé für Schrift – ≥ 4,8 : 1 */
  --gold-d: #785522;                    /* dunkles Gold für Schrift – ≥ 4,8 : 1 */
  --card: rgba(255, 252, 247, .8);
  --card-line: rgba(201, 164, 92, .45);
  --card-shadow: 0 18px 38px -24px rgba(122, 86, 44, .42), 0 2px 8px -4px rgba(122, 86, 44, .1);
  /* mattes Gold (ohne Glanz): ruhiger, weicher Verlauf und eine feine dunklere Goldlinie als Rand */
  --gold-btn: linear-gradient(180deg, #e3c68a 0%, #d6b46f 50%, #c9a35c 100%);
  --gold-ring: inset 0 0 0 1px rgba(124, 88, 30, .3);

  --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 {
  color-scheme: only light;             /* Dunkelmodus des Handys (z. B. Samsung Internet) färbt die Seite nicht um */
  -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; }
/* feine Zeichen statt Emojis (goldenes Herz, Ortsnadel, Häkchen) – auf jedem Handy gleich, mitten in der Zeile */
svg.ico { display: inline-block; width: .9em; height: .9em; margin: 0 .2em; vertical-align: -.1em; overflow: visible; }
.i-heart-gold { filter: drop-shadow(0 1px 1.5px rgba(150, 105, 40, .3)); }
.i-check { color: var(--gold-d); }
.btn svg.ico { width: 19px; height: 19px; margin: 0 0 0 6px; vertical-align: -4px; }

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

/* ---------- iPad/Desktop: unscharfer Hintergrund außen herum ----------
   Das Bild ist schon weichgezeichnet und abgedunkelt (garten_blur.webp, 4 KB) – dasselbe Aussehen wie vorher
   „blur(28px) saturate(1.1) brightness(.72)“ auf dem großen Gartenbild, aber ohne Rechenarbeit für das Gerät */
.backdrop { display: none; }
@media (min-width: 520px) {
  .backdrop {
    display: block;
    position: fixed;
    top: -60px; right: -60px; bottom: -60px; left: -60px;
    inset: -60px;
    z-index: 0;
    background: #3b2a2c url("assets/garten_blur.webp") center / cover no-repeat;
  }
  .backdrop::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(251, 244, 248, .1), rgba(43, 29, 36, .55));
  }
}

/* ---------- Schaltflächen: Pillen in mattem Gold – feiner Goldrand und weicher Schatten, kein Glanz.
   Dunkle Schrift: ≥ 5,8 : 1 Kontrast auf jedem Goldton ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 13px 28px;
  border: 0;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: #33200f;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: var(--gold-btn);
  box-shadow: var(--gold-ring), 0 10px 22px -10px rgba(140, 98, 34, .55), 0 2px 5px -2px rgba(140, 98, 34, .28);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .25s ease;
}
.btn svg { width: 19px; height: 19px; flex: none; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); box-shadow: var(--gold-ring), 0 14px 26px -10px rgba(140, 98, 34, .6), 0 3px 7px -2px rgba(140, 98, 34, .3); }
  .btn-ghost:hover { box-shadow: inset 0 0 0 1px rgba(170, 128, 52, .85), inset 0 0 0 3px rgba(252, 247, 238, .95), inset 0 0 0 4px rgba(201, 164, 92, .4),
    0 12px 22px -12px rgba(140, 98, 34, .5); }
}
.btn:active { transform: translateY(1px) scale(.985); box-shadow: var(--gold-ring), 0 5px 12px -8px rgba(140, 98, 34, .55); }
.btn[disabled] { opacity: .7; pointer-events: none; }
.btn-sm { min-height: 46px; padding: 11px 14px; font-size: 15.5px; }
.btn-sm svg { width: 17px; height: 17px; }
/* Zweitknopf: Creme mit doppelter feiner Goldlinie, wie ein Rahmen auf einer gedruckten Karte */
.btn-ghost {
  color: var(--gold-d);
  background: rgba(252, 247, 238, .95);
  box-shadow: inset 0 0 0 1px rgba(184, 142, 64, .7), inset 0 0 0 3px rgba(252, 247, 238, .95), inset 0 0 0 4px rgba(201, 164, 92, .3),
    0 8px 18px -12px rgba(140, 98, 34, .45);
}
.btn-ghost:active { box-shadow: inset 0 0 0 1px rgba(170, 128, 52, .85), inset 0 0 0 3px rgba(252, 247, 238, .95), inset 0 0 0 4px rgba(201, 164, 92, .4),
  0 4px 10px -8px rgba(140, 98, 34, .5); }
.btn:focus-visible, .music-btn:focus-visible, .scroll-cue:focus-visible, .tap-layer:focus-visible, .link-btn:focus-visible {
  outline: 2px solid var(--focus, var(--lila-l));
  outline-offset: 3px;
}

/* ---------- ✿-Trenner ---------- */
.sep { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 26px; }
.sep i { display: block; width: 74px; height: 1px; background: linear-gradient(90deg, rgba(201, 164, 92, 0), rgba(201, 164, 92, .85)); }
.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;
  font-weight: 500;                     /* wie der Klopf-Hinweis – am Tor wird keine weitere Schriftdatei gebraucht */
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  width: var(--col);
  margin-left: auto; margin-right: auto;
  margin-inline: auto;
  overflow: hidden;
  background: #2b1d24;
  /* solange das Torbild lädt: warmer, dunkler Schimmer statt einer schwarzen Fläche (danach liegt das Tor darüber) */
  background: radial-gradient(ellipse 85% 60% at 50% 45%, #4a2d3b 0%, #2b1d24 75%);
}
.intro.is-gone { display: none; }

.gate { position: absolute; top: 0; right: 0; bottom: 0; left: 0; 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; top: 0; right: 0; bottom: 0; left: 0; 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; top: 0; right: 0; bottom: 0; left: 0; 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;
  top: -.5%; right: -.7%; bottom: 0; left: -.7%;
  inset: -.5% -.7% 0;
  overflow: hidden;
  border-radius: 50% 50% 0 0 / calc(var(--arch) * 1%) calc(var(--arch) * 1%) 0 0;
  /* falls das Gartenbild im ersten Moment noch nicht gezeichnet ist: warmes Sonnenlicht statt einer weißen Fläche */
  background: radial-gradient(ellipse 60% 55% at 50% 48%, #fff1d6 0%, #e8c690 45%, #b8874f 100%);
  opacity: .01;            /* unsichtbar, aber schon fertig gezeichnet – beim Öffnen blitzt nichts Weißes auf */
}
.door-view img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  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;
  top: -25%; right: -25%; bottom: -25%; left: -25%;
  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%);
  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; top: 0; right: 0; bottom: 0; left: 0; 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-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%);
  opacity: 0;
}

.gate-rays {
  position: absolute;
  left: calc((var(--tx) + var(--tb) / 2) * 1%);
  top: calc((var(--ty) + var(--th) * .44) * 1%);
  width: 170%;              /* kleinere Fläche, die beim Öffnen größer wird – gleich weit, aber viel leichter */
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  /* weiche, breite Lichtbahnen (wie Sonnenstrahlen im Dunst) – ohne harte Kanten */
  background: repeating-conic-gradient(from 0deg, rgba(255, 246, 226, 0) 0deg, rgba(255, 243, 220, .34) 7deg, rgba(255, 246, 226, 0) 14deg, rgba(255, 246, 226, 0) 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .5) 20%, transparent 48%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .5) 20%, transparent 48%);
  opacity: 0;
  pointer-events: none;
}

/* Alle Lichter beim Öffnen mischen sich normal (keine „Screen“-Überblendung): gemessen das Stocken
   beim Aufgehen der Tür – ohne sichtbaren Unterschied im Licht. */
/* Das Licht des Gartens: Beim Öffnen leuchtet es rund um die Tür auf, strahlt auf Wand und Rosen,
   und zuletzt überstrahlt es alles. Nur Deckkraft und Größe ändern sich – das bleibt auch auf Handys flüssig. */
.door-bloom {
  position: absolute;
  left: calc((var(--tx) + var(--tb) / 2) * 1%);
  top: calc((var(--ty) + var(--th) * .5) * 1%);
  width: calc(var(--sw, 480px) * var(--tb) * .012);
  height: calc(var(--sw, 480px) * var(--tb) * .012);
  margin: calc(var(--sw, 480px) * var(--tb) * -.006) 0 0 calc(var(--sw, 480px) * var(--tb) * -.006);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 212, .85) 0%, rgba(255, 228, 184, .5) 28%, rgba(255, 220, 170, .2) 50%, rgba(255, 216, 165, 0) 71%);
  opacity: 0;
  transform: scale(.7);
  pointer-events: none;
}
/* warmes Licht über dem ganzen Bild (die Augen gewöhnen sich ans Helle) … */
.gate-glow {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at var(--dox, 50%) var(--doy, 46%), rgba(255, 249, 236, .95), rgba(255, 238, 212, .55) 45%, rgba(255, 232, 200, .3) 100%);
  opacity: 0;
  pointer-events: none;
}
/* … und zuletzt ein Lichtball, der aus der Tür heraus den ganzen Bildschirm füllt */
.gate-flash {
  position: absolute;
  left: var(--dox, 50%);
  top: var(--doy, 46%);
  width: 70vmin;
  height: 70vmin;
  margin: -35vmin 0 0 -35vmin;
  border-radius: 50%;
  background: radial-gradient(circle, #fffaf0 0%, #fff5e6 32%, rgba(255, 242, 224, .85) 46%, rgba(255, 238, 218, 0) 70%);
  opacity: 0;
  transform: scale(.08);
  pointer-events: none;
}

/* Vorbereitet, solange die Tür noch zu ist: Lichtflächen und Flügel sind schon fertig gezeichnet (unsichtbar),
   damit das Handy beim Aufgehen nichts mehr neu malen muss – gemessen: deutlich weniger Stocken im ersten Moment */
.gate-rays, .door-bloom, .gate-glow, .gate-flash, .door-light, .door-spill { opacity: .001; will-change: transform, opacity; }
.leaf { will-change: transform; }

/* Vor dem Öffnen: mit jedem Klopfen wird es unter der Tür ein wenig heller – als käme jemand mit Licht */
.knock-1 .door-spill, .knock-2 .door-spill { transition: opacity .8s ease; }
.knock-1 .door-spill { opacity: .22; }
.knock-2 .door-spill { opacity: .42; }

/* Öffnen */
.is-opening .leaf-l { transform: rotateY(84deg); }
.is-opening .leaf-r { transform: rotateY(-84deg); }
/* „Tür ganz auf“ (config medien.tuerGanzAuf): die schweren Flügel setzen langsam an, schwingen weit auf und lösen
   sich dabei sanft ins Licht auf – es bleibt kein schmaler Flügelrand stehen, die Türöffnung ist danach ganz frei.
   Der rechte Flügel einen Hauch später, wie von Hand geöffnet. Nur transform/opacity – flüssig auf jedem Handy. */
.tuer-ganz .leaf { transition: transform 2.6s var(--ease-door) .3s, opacity .9s cubic-bezier(.4, 0, .6, 1) 1.85s; will-change: transform, opacity; }
.tuer-ganz .leaf-r { transition-delay: .37s, 1.92s; }
.tuer-ganz.is-opening .leaf { opacity: 0; }
.tuer-ganz.is-opening .leaf-l { transform: rotateY(100deg); }
.tuer-ganz.is-opening .leaf-r { transform: rotateY(-100deg); }
.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-light { opacity: .75; 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-opening .door-bloom { opacity: .45; transform: scale(1.3); transition: opacity 2.4s ease .6s, transform 3s var(--ease) .6s; }
.is-opening .gate-glow { opacity: .28; transition: opacity 2.6s ease .7s; }
.is-flooding .door-light { opacity: 1; transform: scale(2.4); transition: opacity .9s ease, transform 1.5s ease-in; }
.is-flooding .door-bloom { opacity: 1; transform: scale(2.8); transition: opacity .7s ease, transform 1.6s ease-in; }
.is-flooding .gate-glow { opacity: .8; transition: opacity 1s ease-in; }
.is-flooding .gate-flash { opacity: 1; transform: scale(6); transition: opacity .5s ease .2s, transform 1.5s cubic-bezier(.5, 0, .75, .4) .2s; }
.is-flooding .gate-motes .mote { --o2: 1; }
@keyframes rays-in {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(.85); }
  45% { opacity: .85; }
  100% { opacity: .9; transform: translate(-50%, -50%) rotate(18deg) scale(1.85); }
}

/* Lichtstaub + Rosenblätter im Intro */
.gate-motes, .intro-petals { position: absolute; top: 0; right: 0; bottom: 0; left: 0; 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; }

.gate-veil {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  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: .3; }
.is-flooding .gate-veil { opacity: 0; }

/* Tipp-Fläche + Lichtring */
.tap-layer {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  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;
  top: 26px; right: 26px; bottom: 26px; left: 26px;
  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; }
}
/* goldene Funken beim Klopfen */
.kspark {
  position: absolute;
  z-index: 3;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbea 0%, rgba(255, 228, 170, .9) 40%, rgba(255, 220, 160, 0) 72%);
  pointer-events: none;
  animation: kspark .8s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes kspark {
  from { transform: translate3d(0, 0, 0) scale(var(--ks, 1)); opacity: 1; }
  to { transform: translate3d(var(--kx), var(--ky), 0) scale(.2); opacity: 0; }
}

/* Beim Öffnen: goldener Lichtstaub und Blütenblätter wehen aus dem Spalt auf den Gast zu (script.js: doorBurst) */
.door-burst {
  position: absolute;
  left: calc((var(--tx) + var(--tb) / 2) * 1%);
  top: calc((var(--ty) + var(--th) * .55) * 1%);
  width: 0;
  height: 0;
  pointer-events: none;
}
.bdust, .bpetal {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  animation: burst-fly var(--bd, 2s) cubic-bezier(.16, .6, .3, 1) var(--bdl, 0s) both;
}
.bdust {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf2 0%, rgba(255, 236, 196, .85) 35%, rgba(255, 228, 180, 0) 70%);
}
.bpetal { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.bpetal > i { display: block; width: 100%; height: 100%; animation: spin 1.6s linear infinite; }
.bpetal svg { width: 100%; height: 100%; }
@keyframes burst-fly {
  0% { transform: translate3d(0, 0, 0) scale(.25) rotate(0deg); opacity: 0; }
  14% { opacity: 1; }
  70% { opacity: .95; }
  100% { transform: translate3d(var(--bx), var(--by), 0) scale(var(--bs)) rotate(var(--br)); 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; }
/* langsames Netz: ist das Tor nach 1,5 s noch nicht da, erscheinen Namen und Klopf-Hinweis schon – nie ein leerer
   Bildschirm (bei normalem Netz ist das Tor vorher da, dann sieht man hiervon nichts) */
.intro:not(.is-ready) .intro-ui { animation: ui-early .9s var(--ease) 1.5s forwards; }
@keyframes ui-early { to { opacity: 1; transform: none; } }
.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: 48px;                      /* ältere Browser ohne clamp() */
  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: 18px;
  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;
  top: -1.6px; right: -1.6px; bottom: -1.6px; left: -1.6px;
  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;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  width: var(--col);
  margin-left: auto; margin-right: auto;
  margin-inline: auto;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 46%, #fffefb 0%, #fff8ee 38%, #fbeee0 72%, #f6e4d2 100%);   /* warmes Licht */
}
.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-left: auto; margin-right: auto;
  margin-inline: auto;
  background: var(--cream);
  overflow: hidden;
}
/* solange das Tor lädt: die Einladung dahinter noch nicht aufbauen – so lädt das Handy zuerst nur Tor, Namen und
   Klopf-Hinweis (ihre Schriften und Bilder kommen danach, während die Gäste das Tor ansehen) */
.app-wartet .app { display: none; }
@media (min-width: 520px) { .app { box-shadow: 0 0 90px rgba(0, 0, 0, .45); } }

/* Nach dem Öffnen der Tür: Der Garten steht still im Hintergrund, die Texte gleiten darüber –
   oben die Einladung der Eltern (Seite 1), darunter Titel, Namen, Datum und Uhrzeit (Seite 2) */
.hero {
  position: relative;
  z-index: 2;
  background: #3a2733;
  color: #fff;
  /* Garten, Schleier und Effekte nur innerhalb dieses Bereichs zeigen. Unten 2 px weniger: Endet die Seite
     zwischen zwei Bildpunkten, blitzte dort sonst eine Zeile des dunklen Gartens als Strich durch –
     darunter liegt dasselbe Creme wie am Ende des Übergangs */
  -webkit-clip-path: inset(0 0 2px 0);
  clip-path: inset(0 0 2px 0);
}
/* fest am Bildschirm statt mitzuscrollen – flüssig auf jedem Handy, auch beim langsamen Gleiten */
.hero-bg, .hero-veil, .hero-fx {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: var(--col);
  height: 100vh;
  margin-left: auto; margin-right: auto;
  margin-inline: auto;
  pointer-events: none;
}
.hero-bg { 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);
  opacity: 0;                       /* erst sichtbar, wenn ganz geladen (script.js: is-loaded) */
  transition: opacity 1s ease;
}
.hero-stage > img.is-loaded { opacity: 1; }
.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; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.hero-vid.is-playing { opacity: 1; }

.hero-veil {
  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; top: 0; right: 0; bottom: 0; left: 0; 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; } }
/* Übergang vom Garten in den hellen Bereich: unter Seite 2 verblasst der Garten langsam ins Creme – ohne Linie
   (sanft auslaufender Verlauf; endet genau in der Anfangsfarbe des hellen Bereichs) */
.hero::after {
  content: "";
  position: relative;
  z-index: 4;
  display: block;
  height: 190px;
  background: linear-gradient(180deg,
    rgba(252, 246, 238, 0) 0%,
    rgba(252, 246, 238, .1) 16%,
    rgba(252, 246, 238, .27) 32%,
    rgba(252, 246, 238, .48) 48%,
    rgba(252, 246, 238, .7) 64%,
    rgba(252, 246, 238, .88) 80%,
    rgba(252, 246, 238, .97) 92%,
    var(--cream) 100%);
  pointer-events: none;
}

.hero-fx { z-index: 2; overflow: hidden; }
.fx-sparkles, .fx-butterflies, .fx-petals { position: absolute; top: 0; right: 0; bottom: 0; left: 0; 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;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  width: var(--col);
  margin-left: auto; margin-right: auto;
  margin-inline: auto;
  pointer-events: none;
}
.bf-canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; 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)); } }
/* jedes Blatt taumelt um seine eigene Achse (script.js: --ax, --ay) – natürlicher als alle gleich */
@keyframes spin { from { transform: rotate3d(var(--ax, 1), var(--ay, .5), .3, 0deg); } to { transform: rotate3d(var(--ax, 1), var(--ay, .5), .3, 360deg); } }

/* zwei „Seiten“, jede mindestens bildschirmhoch; der Inhalt steht in der Mitte */
.hero-page {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(14px + var(--safe-t)) 14px calc(14px + var(--safe-b));
  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);
}
/* Seite 1 erscheint, sobald die Tür offen ist; Seite 2, sobald sie ins Bild gleitet */
.hero.is-live .hero-invite .hx, .hero-inner.is-in .hx { opacity: 1; transform: none; }
.hero-inner .hx { transition-delay: calc(var(--d) * .2s + .1s); }

/* ---------- Seite 1: Einladungskarte der Eltern auf dem Garten ---------- */
/* unten Platz für den ♪-Knopf, damit er nie auf der Karte liegt (im Querformat steht er daneben) */
.hero-invite { padding-bottom: calc(76px + var(--safe-b)); }
/* Querformat auf dem Handy (sehr wenig Höhe): Abstände in der Karte etwas enger, damit sie ganz hineinpasst */
@media (orientation: landscape) and (max-height: 520px) {
  .hero-invite { padding-top: calc(8px + var(--safe-t)); padding-bottom: calc(8px + var(--safe-b)); }
  .invite-card { padding-top: 16px; padding-bottom: 16px; }
  .hero .invite-card .sep { margin: 6px auto 2px; }
  .ic-host { margin-top: 8px; }
}
.invite-card {
  position: relative;
  width: 100%;
  max-width: 410px;
  padding: 26px 18px 26px;
  border-radius: 28px;
  /* klares, getöntes Glas ohne Weichzeichner: der Garten bleibt auch hinter der Karte scharf, nur etwas
     abgedunkelt – so ist die Mitte so klar wie das Bild ringsherum und die Schrift trotzdem gut lesbar */
  background: linear-gradient(180deg, rgba(58, 24, 44, .68) 0%, rgba(42, 17, 32, .72) 100%);
  border: 1px solid rgba(246, 228, 184, .5);
  box-shadow: 0 26px 60px -26px rgba(16, 6, 12, .75), inset 0 1px 0 rgba(255, 255, 255, .14);
  zoom: var(--fit-card, 1);            /* script.js: auf kleinen Bildschirmen nur so viel kleiner wie nötig */
}
/* feiner goldener Innenrahmen wie bei einer gedruckten Karte */
.invite-card::before {
  content: "";
  position: absolute;
  top: 7px; right: 7px; bottom: 7px; left: 7px;
  inset: 7px;
  border: 1px solid rgba(246, 228, 184, .26);
  border-radius: 22px;
  pointer-events: none;
}
.invite-card p, .invite-card h2 { text-shadow: 0 1px 8px rgba(20, 8, 12, .5); }
.ic-bismillah { font-family: var(--f-cal); font-size: 24px; line-height: 1.5; color: #f6e4b8; }
.ic-verse { margin-top: 4px; font-family: var(--f-cal); font-size: 20.5px; line-height: 1.8; color: #fffaf2; text-wrap: balance; }
.hero .invite-card .sep { margin: 10px auto 4px; }
.ic-title { font-family: var(--f-cal); font-size: 30px; font-weight: 700; line-height: 1.4; color: #fff; }
.ic-text { margin-top: 2px; font-family: 'Amiri', serif; font-size: 19.5px; line-height: 1.85; color: #fbeed8; }
.ic-text span { display: block; }          /* zwei Zeilen, Umbruch nach dem Komma (script.js) */
.ic-host { margin-top: 12px; font-family: var(--f-cal); font-size: 22px; line-height: 1.5; color: #f6e4b8; }
.ic-names { margin-top: 2px; font-family: var(--f-cal); font-size: 44px; font-weight: 700; line-height: 1.4; color: #fff; text-shadow: 0 3px 18px rgba(20, 8, 12, .6), 0 1px 3px rgba(20, 8, 12, .4); }
.ic-names .amp { font-size: .6em; }
/* die beiden Väter: gleich breite Spalten, das Herz genau in der Mitte */
.invite-card .fathers { margin: 6px auto 0; max-width: 380px; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); }
.invite-card .father-name { font-size: 25px; font-size: clamp(21px, 6.6vw, 27px); line-height: 1.55; color: #fff; }   /* gut lesbar */
.invite-card .fathers-heart { margin-top: 0; filter: drop-shadow(0 2px 8px rgba(215, 38, 61, .45)); }
.father-label:empty { display: none; }

/* ---------- Seite 2: Namen, Datum, Uhrzeit – unten der Hinweis „nach unten“ ---------- */
.hero-inner { padding-bottom: calc(110px + var(--safe-b)); }
.hero-names {
  position: relative;
  /* deutlich höher (bis 80 px, auf kleinen Handys entsprechend weniger, damit oben nichts verschwindet):
     der lange Bogen des zweiten Namens hat viel Luft zum Trenner – Datum, Uhrzeit und Satz bleiben genau an ihrem Platz */
  top: -64px;
  top: calc(clamp(40px, 18vw, 80px) * -1);
  top: calc(clamp(40px, min(18vw, 8.5svh), 80px) * -1);
  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: 74px; font-size: clamp(60px, 19vw, 84px); color: #fff; }
/* sehr kurze Bildschirme (kleines iPhone mit großer Schrift): dort ist oben kein Platz zum Hochschieben –
   die Namen bleiben an ihrem Platz, sonst würde der erste Name oben abgeschnitten */
@media (max-height: 560px) { .hero-names { top: 0; } }
.hero-names .amp { margin: -2px 0 4px; font-size: 31px; 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: 19.5px; font-weight: 700; color: #fff; text-shadow: 0 2px 10px rgba(20, 8, 12, .8); }
.hero-time { margin-top: 2px; font-size: 18px; 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: 23px;
  font-size: clamp(20px, 5.9vw, 24px);
  line-height: 1.6;
  color: #fff;
  text-shadow: 0 2px 14px rgba(20, 8, 12, .85);
}

/* Hinweis „nach unten“: gut lesbare Glas-Kapsel, auch auf dem hellen Gartenweg */
.scroll-cue {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(30px + var(--safe-b));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-left: -78px;
  width: 156px;
  padding: 6px 0 4px;
  border: 1px solid rgba(236, 206, 146, .82);          /* feine Goldfassung mit zweiter Linie innen */
  border-radius: 22px;
  background: rgba(60, 26, 48, .44);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  backdrop-filter: blur(8px) saturate(1.15);
  box-shadow: inset 0 0 0 2px rgba(60, 26, 48, .15), inset 0 0 0 3px rgba(236, 206, 146, .3),
    0 6px 18px rgba(30, 10, 22, .3), 0 0 14px rgba(236, 206, 146, .12);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(20, 8, 12, .6);
}
.cue-text { display: inline-flex; align-items: center; gap: 8px; }
.cue-text svg { width: 13px; height: 13px; color: #f6e4b8; }
.cue-arrow { font-size: 21px; line-height: 1; color: #f6e4b8; animation: hop 1.8s ease-in-out infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* unsichtbar = Pause: hinter dem geschlossenen Tor (vor dem Öffnen) und weggescrollt laufen die Effekte nicht mit */
.hero:not(.is-live) .spark, .hero:not(.is-live) .petal, .hero:not(.is-live) .petal i, .hero:not(.is-live) .cue-arrow,
.hero.is-off .spark, .hero.is-off .petal, .hero.is-off .petal i, .hero.is-off .cue-arrow { animation-play-state: paused; }

/* =====================================================================
   Heller Bereich
   ===================================================================== */
/* ein einziger weicher Verlauf über den ganzen Bereich – die Abschnitte haben keinen eigenen Hintergrund,
   deshalb gibt es zwischen ihnen keine Kanten. Darüber zarte Aquarell-Wolken in Rosé und Gold, die abwechselnd
   von links und rechts hereinfließen (die Mitte mit dem Text bleibt ruhig und hell) */
.content {
  --focus: #a07a35;
  position: relative;
  padding: 50px 22px calc(120px + var(--safe-b));
  background:
    radial-gradient(70% 9% at 0% 6%, rgba(244, 196, 204, .5), rgba(244, 196, 204, 0) 70%),
    radial-gradient(65% 8% at 100% 19%, rgba(238, 206, 148, .42), rgba(238, 206, 148, 0) 70%),
    radial-gradient(70% 9% at 0% 34%, rgba(240, 192, 206, .42), rgba(240, 192, 206, 0) 70%),
    radial-gradient(65% 8% at 100% 50%, rgba(244, 212, 166, .45), rgba(244, 212, 166, 0) 70%),
    radial-gradient(70% 9% at 0% 66%, rgba(238, 196, 198, .42), rgba(238, 196, 198, 0) 70%),
    radial-gradient(65% 8% at 100% 82%, rgba(236, 204, 150, .42), rgba(236, 204, 150, 0) 70%),
    radial-gradient(80% 7% at 50% 97%, rgba(232, 190, 170, .4), rgba(232, 190, 170, 0) 70%),
    linear-gradient(180deg, var(--cream) 0%, var(--champagne) 24%, var(--rose) 50%, var(--goldbeige) 76%, var(--warm) 100%);
  text-align: center;
}
/* die Blüten in den Trennern atmen ganz leicht */
.content .sep svg { animation: bloom 7s ease-in-out infinite alternate; }
@keyframes bloom { from { transform: rotate(-10deg) scale(.95); } to { transform: rotate(12deg) scale(1.07); } }

/* zarte Blütenzweige am Rand: ein kleines Bild, mehrfach (auch gespiegelt) verwendet – nur neben den Trennern,
   nie hinter Text; erst nach dem Öffnen der Tür geladen; im Leicht-Modus ohne Wiegen */
.deko-r, .deko-l, .deko-lr { position: relative; }
.deko-r::after, .deko-l::after, .deko-lr::before, .deko-lr::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  width: 125px; height: 75px; margin-top: -45px;     /* ältere Browser ohne clamp() */
  width: clamp(112px, 32vw, 160px);
  height: clamp(67px, 19.2vw, 96px);
  margin-top: calc(clamp(67px, 19.2vw, 96px) * -.6);
  background: no-repeat center / contain;
  opacity: .6;
  pointer-events: none;
  transform-origin: 90% 40%;                 /* dort kommt der Zweig herein – um diesen Punkt wiegt er sich */
  animation: sway-r 8s ease-in-out infinite alternate;
}
body:not(.is-locked) .deko-r::after, body:not(.is-locked) .deko-l::after,
body:not(.is-locked) .deko-lr::before, body:not(.is-locked) .deko-lr::after { background-image: url("assets/bluetenzweig.webp"); }
/* der Zweig kommt von außen herein: das Bild reicht etwas über den Rand der Seite hinaus;
   links gespiegelt (an derselben Stelle – daher die Verschiebung um 80 %) */
.deko-r::after, .deko-lr::after { right: -34px; right: calc(-22px - clamp(112px, 32vw, 160px) * .1); }
.deko-l::after, .deko-lr::before { left: -34px; left: calc(-22px - clamp(112px, 32vw, 160px) * .1); transform: translateX(-80%) scaleX(-1); animation-name: sway-l; }
/* sanft im Wind – jeder Zweig in seinem eigenen Takt */
@keyframes sway-r { from { transform: rotate(-1.8deg); } to { transform: rotate(1.8deg); } }
@keyframes sway-l { from { transform: translateX(-80%) scaleX(-1) rotate(-1.8deg); } to { transform: translateX(-80%) scaleX(-1) rotate(1.8deg); } }
#secProgramm .deko-l::after { animation-duration: 8.8s; animation-delay: -6s; opacity: .52; }
#secHinweise .deko-r::after { animation-duration: 9.4s; animation-delay: -3s; }
#secKalender .deko-l::after { animation-duration: 7.6s; animation-delay: -2.5s; opacity: .55; }
#secOrt .deko-r::after { animation-duration: 7.2s; animation-delay: -5s; }
#secRsvp .deko-l::after { animation-duration: 9.2s; animation-delay: -7s; opacity: .52; }
#secGaestebuch .deko-r::after { animation-duration: 8.6s; animation-delay: -1.5s; }
.deko-lr::before { animation-duration: 7.8s; animation-delay: -4s; }
.deko-lr::after { animation-duration: 9s; animation-delay: -2s; }
/* Leicht-Modus: die Zweige bleiben, wiegen sich aber nicht (keine dauernd bewegten Bild-Ebenen) */
.low-power .deko-r::after, .low-power .deko-l::after, .low-power .deko-lr::before, .low-power .deko-lr::after { animation: none; }
.soft-petals {
  position: fixed;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: var(--col);
  margin-left: auto; margin-right: auto;
  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,
.content.hero-cover .soft-petals .spark,
.content.hero-cover .soft-petals .spark svg,
.content.hero-cover .soft-petals .bokeh,
.content.hero-cover .note-bell svg { animation-play-state: paused; }
/* weiche Lichtpunkte (Bokeh) in Rosé und Gold – schweben langsam und atmen; ganz hinten, hinter allem */
.bokeh {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--bk) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  animation: drift var(--d, 18s) ease-in-out var(--dl, 0s) infinite alternate, mote-glow var(--t, 7s) ease-in-out var(--dl, 0s) infinite alternate;
}
/* Glitzer im hellen Bereich: golden statt weiß (auf Creme sichtbar) */
.soft-petals .spark { color: #cfa253; filter: drop-shadow(0 0 3px rgba(214, 170, 86, .55)); }
.sec { position: relative; z-index: 1; padding-bottom: 64px; }          /* viel Luft zwischen den Abschnitten */
.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: 10px auto 28px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(201, 164, 92, 0), var(--gold), rgba(201, 164, 92, 0));
}
/* Karten im hellen Bereich: leicht durchscheinendes Creme, feiner goldener Rand, weicher Schatten
   (ohne Weichzeichner dahinter – das hält das Scrollen auch auf älteren Handys flüssig) */
.cd-cell, .note-card, .cal, .rsvp-card, .gb-card, .wish {
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: var(--card-shadow);
}
.card-sub { margin: -4px 0 20px; text-align: center; font-size: 16.5px; font-weight: 500; color: var(--muted); }
.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);
}

/* 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;
}
.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; top: 0; right: 0; bottom: 0; left: 0; 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: 14.5px; font-weight: 500; color: var(--rose-d); }
.cd-done { font-family: var(--f-cal); font-size: 34px; color: var(--rose-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(201, 164, 92, 0), rgba(201, 164, 92, .8) 10%, rgba(201, 164, 92, .8) 90%, rgba(201, 164, 92, 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: 70px;
}
.tl-time { text-align: end; font-size: 17px; font-weight: 700; color: var(--rose-d); opacity: 0; transform: translateX(14px); }
.tl-event { text-align: start; font-size: 18.5px; 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(200, 118, 140, .35)); }
.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 auf der Einladungskarte (Seite 1) */
/* 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: 19px; 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: 4px auto 26px; max-width: 320px; font-size: 16.5px; color: var(--muted); }
.btn-map { min-height: 54px; padding: 14px 24px; font-size: 17px; }
.maps-alt {
  display: table;
  margin: 16px auto 0;
  padding: 8px 12px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--gold-d);
  text-decoration: underline;
  text-decoration-color: rgba(201, 164, 92, .6);
  text-underline-offset: 4px;
}
.maps-alt[hidden] { display: none; }

/* Anmeldung + Glückwunschbuch: Karten mit feinem goldenen Innenrahmen wie eine gedruckte Karte */
.rsvp-card, .gb-card {
  position: relative;
  max-width: 360px;
  margin: 0 auto;
  padding: 28px 22px 28px;
  border-radius: 24px;
  text-align: start;
}
.rsvp-card::before, .gb-card::before {
  content: "";
  position: absolute;
  top: 6px; right: 6px; bottom: 6px; left: 6px;
  inset: 6px;
  border: 1px solid rgba(201, 164, 92, .24);
  border-radius: 19px;
  pointer-events: none;
}
.rsvp-form, .gb-form { position: relative; display: flex; flex-direction: column; gap: 8px; }
.rsvp-form[hidden], .rsvp-done[hidden], .rsvp-count[hidden], .form-error[hidden], .card-sub[hidden], .rsvp-wa[hidden],
.gb-form[hidden], .gb-thanks[hidden], .gb-more[hidden], .gb-note[hidden] { display: none; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.field-label { font-size: 15.5px; font-weight: 700; color: var(--brown); }
.field {
  width: 100%;
  min-height: 50px;
  margin-bottom: 14px;
  padding: 12px 16px;
  font: 500 16px/1.4 var(--f-body);          /* 16 px: das iPhone zoomt beim Tippen nicht hinein */
  color: var(--plum);
  background: rgba(255, 255, 255, .88);
  border: 1.5px solid rgba(201, 164, 92, .5);
  border-radius: 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder { color: #8f7d74; }
.field:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 164, 92, .22); }

/* zwei große Auswahl-Knöpfe „حاضر“ / „غير حاضر“ – gleiche Pillen wie alle Knöpfe:
   offen = Creme mit doppelter Goldlinie, gewählt = Blattgold mit Häkchen */
.rsvp-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(252, 247, 238, .95);
  box-shadow: inset 0 0 0 1px rgba(184, 142, 64, .62), inset 0 0 0 3px rgba(252, 247, 238, .95), inset 0 0 0 4px rgba(201, 164, 92, .26),
    0 6px 14px -10px rgba(140, 98, 34, .4);
  font-size: 18px;
  font-weight: 700;
  color: var(--brown);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .2s var(--ease);
}
.choice input:active + span { transform: scale(.985); }
.choice input:checked + span {
  color: #33200f;
  background: var(--gold-btn);
  box-shadow: var(--gold-ring), 0 10px 22px -10px rgba(140, 98, 34, .62), 0 2px 5px -2px rgba(140, 98, 34, .3);
}
.choice input:checked + span::before {
  content: "";
  width: 15px;
  height: 15px;
  margin-left: 7px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6l4.3 4.3L19.2 7' fill='none' stroke='%2333200f' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.choice input:focus-visible + span { outline: 2px solid var(--focus, var(--gold)); outline-offset: 3px; }

/* Personenzahl – erscheint sanft, sobald „حاضر“ gewählt ist */
.rsvp-count { animation: count-in .4s var(--ease); }
@keyframes count-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.rsvp-count .field-label { display: block; margin-bottom: 8px; }
.select-wrap { position: relative; display: block; margin-bottom: 14px; }
.select-wrap .field { margin-bottom: 0; padding-left: 44px; cursor: pointer; }
.select-wrap::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--gold-d);
  border-bottom: 2px solid var(--gold-d);
  transform: rotate(45deg);
  pointer-events: none;
}
.form-error { text-align: center; font-size: 15px; font-weight: 700; color: #a03e57; }
.rsvp-send { width: 100%; margin-top: 10px; }
/* Ersatzweg, wenn Google nicht erreichbar ist: Bestätigung per WhatsApp (Creme-Knopf über „إعادة المحاولة“) */
.rsvp-wa { width: 100%; margin-top: 4px; white-space: normal; line-height: 1.3; }
.rsvp-done { position: relative; padding: 6px 0 2px; text-align: center; }
.rsvp-thanks, .gb-thanks { position: relative; font-family: var(--f-cal); font-size: 24px; line-height: 1.6; text-align: center; color: var(--plum); }
/* kleiner Text-Knopf („تعديل الرد“): goldene Schrift mit feiner Goldlinie darunter */
.link-btn {
  margin-top: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: 700 15.5px/1.4 var(--f-body);
  letter-spacing: .01em;
  color: var(--gold-d);
  text-decoration: underline;
  text-decoration-color: rgba(201, 164, 92, .7);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  cursor: pointer;
  transition: background .25s ease;
}
.link-btn:active { background: rgba(201, 164, 92, .12); }

/* Glückwunschbuch */
.gb-text { min-height: 118px; margin-bottom: 4px; line-height: 1.65; resize: vertical; }
.gb-count { align-self: flex-end; margin-top: -2px; font-size: 14px; font-weight: 500; color: var(--muted); }
.gb-count.is-full { color: var(--rose-d); }
.gb-send { align-self: center; min-width: 150px; margin-top: 12px; }
.gb-list { display: flex; flex-direction: column; gap: 14px; max-width: 360px; margin: 24px auto 0; text-align: start; }
.gb-list:empty { display: none; }
.wish { padding: 14px 18px 15px; border-radius: 18px; }
.wish.is-new { animation: wish-in .7s var(--ease) both; }
@keyframes wish-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.wish-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wish-name { min-width: 0; font-size: 16.5px; font-weight: 700; color: var(--plum); word-break: break-word; overflow-wrap: anywhere; }
.wish-date { flex: none; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.wish-text { margin-top: 6px; font-family: 'Amiri', serif; font-size: 18.5px; font-style: italic; line-height: 1.75; color: var(--brown); word-break: break-word; overflow-wrap: anywhere; }
.gb-more { margin-top: 20px; }
.gb-note { margin-top: 24px; font-family: var(--f-cal); font-size: 21px; line-height: 1.6; color: var(--rose-d); }

/* 7) Hinweise */
.note-card {
  position: relative;
  max-width: 340px;
  margin: 38px auto 4px;
  padding: 40px 22px 24px;
  border-radius: 24px;
}
.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: 15px; font-weight: 700; color: var(--rose-d); }
.note-text { margin-top: 6px; font-size: 21px; font-weight: 700; line-height: 1.6; color: var(--plum); }
.note-text .nl { display: block; }          /* zwei ausgewogene Zeilen (script.js) */
/* mehrere Hinweise: gleicher Stil, dazwischen ein kurzer goldener Strich */
.note-text + .note-text { margin-top: 12px; }
.note-text + .note-text::before {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin: 0 auto 12px;
  background: linear-gradient(90deg, rgba(201, 164, 92, 0), var(--gold), rgba(201, 164, 92, 0));
}
.note-sign { display: inline-block; margin-left: 7px; font-size: .78em; vertical-align: .06em; }

/* 8) Kalender */
.cal {
  width: 300px;
  max-width: 100%;
  width: min(100%, 300px);
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
}
.cal-top {
  position: relative;
  padding: 20px 12px 12px;
  font-size: 18px;
  font-weight: 700;
  color: #4a3020;
  background: linear-gradient(180deg, #ead39b, #d4b06a);
}
.cal-ring { position: absolute; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 1px 2px rgba(60, 36, 10, .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(--rose-d); }
.cal-day {
  font-size: 78px;
  font-weight: 800;
  line-height: 1.05;
  background: linear-gradient(180deg, #a87e38, #7d5a24);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.cal-time { margin-top: 4px; font-size: 16.5px; font-weight: 500; color: var(--plum); }
.cal-foot { padding: 12px 14px 16px; border-top: 1px dashed rgba(201, 164, 92, .55); }
.cal-cap { margin-bottom: 14px; font-size: 15px; color: var(--muted); }
.cal-btns { display: flex; justify-content: center; gap: 8px; }
.cal-btns .btn { flex: 1 1 0; padding-left: 10px; padding-right: 10px; padding-inline: 10px; }

/* 9) Abschluss */
.closing { padding-top: 8px; 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: 20px 0 12px; }
.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-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: 16px; font-weight: 700; color: var(--rose-d); }

/* kleine, dezente Widmung ganz am Ende (klein, aber noch gut lesbar: ≥ 4,9 : 1) */
.gift {
  position: relative;
  z-index: 1;
  margin: 40px auto 0;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--muted);
}

/* Musik-Knopf – unten rechts */
.music-btn {
  font-weight: 500;                     /* (nur Zeichen, kein Text – so lädt am Tor keine weitere Schriftdatei) */
  position: fixed;
  z-index: 40;
  right: 16px;                          /* ältere Browser ohne max() */
  right: max(16px, calc(50vw - 224px));
  bottom: calc(16px + var(--safe-b));
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  /* mattes Creme mit doppelter feiner Goldlinie */
  background: #f7eedd;
  color: var(--gold-d);
  box-shadow: inset 0 0 0 1px rgba(170, 128, 52, .75), inset 0 0 0 3px #f7eedd, inset 0 0 0 4px rgba(201, 164, 92, .35),
    0 10px 24px -10px rgba(90, 60, 20, .5), 0 2px 6px -2px rgba(90, 60, 20, .25);
  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; }
/* sehr schmale Bildschirme (unter 300 px, z. B. Galaxy Fold zugeklappt, stark vergrößerte Systemschrift):
   Knopf etwas kleiner und näher an den Rand – sonst deckt er den Hinweis „nach unten“ ab */
@media (max-width: 299px) { .music-btn { right: 6px; width: 48px; height: 48px; } }
.music-btn[hidden] { display: none; }
.mb-disc { position: absolute; top: 7px; right: 7px; bottom: 7px; left: 7px; inset: 7px; display: grid; place-items: center; border-radius: 50%; border: 1px dashed rgba(184, 142, 64, .5); }
.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; }

/* ---------- Leicht-Modus („low-power“): iPad, In-App-Browser (Instagram, WhatsApp, Facebook, Telegram …),
   schwache oder alte Handys, Datensparmodus – oder wenn die Seite anfangs ruckelt (script.js). Fast dasselbe Bild,
   aber viel weniger Arbeit für das Gerät ---------- */
/* halb so viele Blüten, Funken und Lichtpunkte (die Schmetterlinge halbiert script.js) */
.low-power .petal:nth-child(2n),
.low-power .spark:nth-child(2n),
.low-power .mote:nth-child(2n),
.low-power .bokeh:nth-child(2n) { display: none; }
.low-power .content .sep svg { animation: none; }
/* kein Weichzeichner hinter dem Hinweis „nach unten“ – feste, halbdurchsichtige Fläche */
.low-power .scroll-cue { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(64, 28, 52, .62); }
/* keine Leuchtfilter auf bewegten Funken, kein Überblend-Modus und kein Pulsieren beim Licht über dem Garten */
.low-power .spark, .low-power .soft-petals .spark { filter: none; }
.low-power .hero-veil::before { mix-blend-mode: normal; animation: none; opacity: .85; }
/* Tor: die großen, sich drehenden Lichtbahnen weglassen; die übrigen Lichtflächen werden erst beim ersten Klopfen
   vorbereitet (vorher keine dauerhaften Grafik-Ebenen, die Speicher belegen) */
.low-power .gate-rays { display: none; }
.low-power .intro:not(.knock-1) .door-bloom, .low-power .intro:not(.knock-1) .gate-glow, .low-power .intro:not(.knock-1) .gate-flash,
.low-power .intro:not(.knock-1) .door-light, .low-power .intro:not(.knock-1) .door-spill { opacity: 0; will-change: auto; }
.low-power .intro:not(.knock-1) .leaf { will-change: auto; }

/* ---------- Für alle: was man nicht sieht, ruht ---------- */
/* Garten weit weggescrollt (script.js: is-off, 200 px Vorlauf): fester Hintergrund, Schleier und Effekte gar nicht zeichnen */
.hero.is-off .hero-bg, .hero.is-off .hero-veil, .hero.is-off .hero-fx { visibility: hidden; }
.hero:not(.is-live) .hero-veil::before, .hero.is-off .hero-veil::before { animation-play-state: paused; }
/* Blüten des hellen Bereichs: solange der Garten den Bildschirm füllt, ganz ausgeblendet */
.content.hero-cover .soft-petals { visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }

/* ---------- Ältere Handys (iOS 14.0–14.4, Android-Browser vor 2021): gleiches Bild auf anderem Weg ----------
   Vor „inset“, „margin-inline“ und „padding-inline“ stehen deshalb überall dieselben Werte noch einmal einzeln.
   Moderne Browser lesen keine dieser Regeln hier. */
/* Abstände ohne „gap“ (dieselben Maße als Außenabstand; Schrift läuft von rechts nach links) */
@supports not (inset: 0) {
  .btn, .sep, .knocks, .cue-text, .cd, .father, .rsvp-form, .gb-form, .gb-list, .wish-head, .cal-btns, .closing-orn { gap: 0; }
  .btn > * + *, .cue-text > * + *, .cal-btns > * + * { margin-right: 8px; }
  .sep > * + *, .cd > * + * { margin-right: 10px; }
  .knocks > * + * { margin-right: 14px; }
  .closing-orn > * + * { margin-right: 6px; }
  .father > * + * { margin-top: 6px; }
  .rsvp-form > .field-label ~ *, .gb-form > .field-label ~ * { margin-top: 8px; }
  .rsvp-form > .rsvp-send, .gb-form > .gb-send { margin-top: 16px; }
  .gb-list > * + * { margin-top: 14px; }
  .wish-head > * + * { margin-right: 10px; }
}
/* Spaltenbreite ohne min(): Handy = ganze Breite, ab 520 px die 480-px-Spalte */
@supports not (width: min(1px, 2px)) {
  :root { --col: 100vw; }
}
@supports not (width: min(1px, 2px)) {
  @media (min-width: 520px) { :root { --col: 480px; } }
}
/* Lichtstrahlen am Tor: quadratisch auch ohne „aspect-ratio“ */
@supports not (aspect-ratio: 1) {
  .gate-rays { height: 0; padding-top: 170%; }
}
/* Glitzer steigt auch ohne die Eigenschaft „translate“: Aufsteigen außen, Funkeln innen – dieselbe Bewegung */
@supports not (translate: 0) {
  .spark { opacity: 1; animation: rise-alt var(--r, 9s) linear var(--dl, 0s) infinite; }
  .spark svg { opacity: 0; animation: twinkle var(--t, 2.6s) ease-in-out var(--dl, 0s) infinite; }
  .hero:not(.is-live) .spark svg, .hero.is-off .spark svg { animation-play-state: paused; }
  @keyframes rise-alt { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -60px, 0); } }
}

/* ---------- 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; }
}