@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Pinyon+Script&family=Sono:wght@300;400;500&display=swap');

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  margin:0;
  background:#8b9488;
  font-family:'Cormorant Garamond',Georgia,serif;
  -webkit-font-smoothing:antialiased;
  color:#4A4239;
}
a{color:#8A745A;text-decoration:none}
a:hover{color:#6f5c45}
input,textarea,button,select{font-family:inherit;font-size:inherit;color:inherit}
input:focus,textarea:focus{outline:none;border-color:rgba(127,138,114,.55)}
::placeholder{color:#a89e8f;opacity:1}
*{scrollbar-width:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
[hidden]{display:none!important}

:root{
  --w:min(430px,100vw);
  --paper:#F0E8DB;
  --sol:linear-gradient(#000,#000);
  --tb1:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%2040'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23fff'%20d='M0,15.7L16,14.4L35,21.1L56,23.6L70,28.5L88,27.9L108,23.9L126,20.7L147,21.9L161,21.3L174,20.1L186,22.1L201,23.2L217,20.9L238,18L260,18L275,14L287,12.7L301,11.8L318,9.7L328,12L346,15.6L362,14.2L373,18.5L390,19.4L407,15.8L425,18.7L445,17.2L465,20.5L476,19.4L491,27.5L506,30.6L527,31.4L540,31.3L555,29.6L566,26.8L580,27.3L593,26.7L610,25.7L630,23.4L645,28.4L663,25.3L676,27.7L691,24.1L711,17L728,18.3L737,13.7L746,13.2L767,10.2L788,16.5L803,15.8L816,15.8L836,18.7L849,15.1L867,15.1L883,14.8L892,14.8L909,17.2L928,21.5L948,24L957,25.1L975,26.6L996,27.5L1006,26.2L1017,26.4L1027,19.9L1047,17.8L1069,21.7L1089,19.5L1110,18.9L1119,20.3L1132,21.1L1146,20.3L1163,14.7L1174,13L1189,9.7L1200,20L1200,0L0,0Z'/%3E%3C/svg%3E");
  --tb2:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%2040'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23fff'%20d='M0,22.8L20,23L33,23L46,24.6L58,28.1L74,25.7L88,25.6L98,20L112,19.9L129,15.5L147,13.8L158,10.3L173,14.9L192,15.3L209,16.2L226,15.7L244,12.3L262,10.4L275,12.4L286,11.6L296,9.5L307,13.8L320,14.7L331,14.4L340,19.4L356,22.8L375,23.8L394,25.9L411,23.5L421,26.1L436,25.9L449,26.1L460,22L475,25.6L493,29.3L509,31.4L526,30.9L543,25.2L559,22.6L579,22.9L601,15.3L621,16.4L631,16.3L648,20.6L659,19.3L669,21.7L686,18.3L697,19.3L709,15.2L719,12.5L729,12.2L745,13.4L756,14.2L777,17.6L787,17.9L808,25.8L828,26L850,26.8L861,26.8L876,22.4L886,21.3L905,19.7L917,22.4L936,22.8L953,26.4L964,26.6L975,28.1L984,26.9L1006,18.5L1019,19.6L1036,13L1052,12.4L1061,8.9L1082,8.9L1097,13.5L1115,14.7L1124,14.6L1145,15.6L1167,13.3L1177,11.7L1186,9.2L1200,20L1200,0L0,0Z'/%3E%3C/svg%3E");
  --tb3:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%2040'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23fff'%20d='M0,22.5L10,21.3L22,23.7L31,24.4L42,23.4L64,24.8L79,25.1L100,22L110,22.2L131,13.3L152,12.8L163,12.4L175,10.6L195,16.3L215,15.4L225,17.8L241,12.2L261,10.7L275,9.8L293,8.6L311,8.8L326,16.6L337,17.4L348,18.1L365,21.3L379,26.2L391,27.9L404,25.9L424,21.5L436,21.6L452,24.9L465,27.3L487,30.4L508,28.7L523,29.5L536,31.7L551,29.1L564,23.8L582,20.6L593,20.2L611,15.3L631,16.8L651,19.7L662,21.7L678,18.7L700,17.9L719,15.4L728,16.3L748,10.6L767,16.8L781,18.7L797,18.9L818,26L831,25.3L843,26.1L852,24.3L866,24.1L878,22.4L896,21.6L913,23.8L927,23.9L948,27.1L969,23.9L986,22.8L995,25L1011,20.2L1032,12.7L1051,10.7L1064,11.3L1082,14.6L1095,13.3L1114,11.8L1123,14.2L1136,13.5L1154,13L1166,10.3L1182,12.8L1200,20L1200,0L0,0Z'/%3E%3C/svg%3E");
  --m1:var(--tb1),var(--sol);
  --m2:var(--tb2),var(--sol);
  --m3:var(--tb3),var(--sol);
  --ms:100% 26px,100% calc(100% - 24px);
  --mp:bottom center,top center;
  --tex:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='180'%20height='180'%20filter='url(%23n)'%20opacity='0.055'/%3E%3C/svg%3E");
}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes glitA{0%{transform:translate3d(0,-5vh,0) rotate(0deg) scale(.7);opacity:0}12%{opacity:.95}72%{opacity:.7}100%{transform:translate3d(24px,104vh,0) rotate(210deg) scale(1);opacity:0}}
@keyframes glitB{0%{transform:translate3d(0,-5vh,0) rotate(0deg) scale(.65);opacity:0}14%{opacity:.85}70%{opacity:.6}100%{transform:translate3d(-28px,104vh,0) rotate(-190deg) scale(.95);opacity:0}}

/* ---- stage ---- */
.stage-outer{
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 10%,#98a094 0%,#7d867a 60%,#6d766a 100%);
}
.stage{
  position:relative;
  width:var(--w);height:100dvh;
  overflow:hidden;
  background:var(--paper);
  box-shadow:0 34px 90px rgba(24,28,22,.5);
}
.scroll{
  position:relative;z-index:0;
  height:100%;overflow-y:auto;overflow-x:hidden;
  background:var(--paper) var(--tex);
  transform-origin:50% 46%;
  transition:transform 1.6s cubic-bezier(.22,1,.36,1) .3s;
  transform:scale(1.05);
}
.scroll.opened{transform:scale(1)}

/* ---- torn-edge sections ----
   Each section overlaps the one below it by 26px and paints ABOVE it
   (higher z-index first), so its torn bottom mask reveals the next
   section peeking through instead of the page background. */
.section{position:relative;filter:drop-shadow(0 4px 5px rgba(86,76,58,.2))}
.section+.section{margin-top:-26px}
.scroll>.section:nth-child(1){z-index:30}
.scroll>.section:nth-child(2){z-index:29}
.scroll>.section:nth-child(3){z-index:28}
.scroll>.section:nth-child(4){z-index:27}
.scroll>.section:nth-child(5){z-index:26}
.scroll>.section:nth-child(6){z-index:25}
.scroll>.section:nth-child(7){z-index:24}
.scroll>.section:nth-child(8){z-index:23}
.scroll>.section:nth-child(9){z-index:22}
.scroll>.section:nth-child(10){z-index:21}
.section--flat{filter:none}
.mask{mask-size:var(--ms);mask-position:var(--mp);mask-repeat:no-repeat}
.mask--1{mask-image:var(--m1)}
.mask--2{mask-image:var(--m2)}
.mask--3{mask-image:var(--m3)}

.s-titel{position:relative;height:100dvh;overflow:hidden;background:url('assets/aquarell-titel.jpg') center center/cover no-repeat}
.sparkle-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sparkle{position:absolute;top:0;animation-timing-function:linear;animation-iteration-count:infinite}
.sparkle.a{animation-name:glitA}
.sparkle.b{animation-name:glitB}

.s-paarfoto{aspect-ratio:1086/1448;background:url('assets/paar-meer.jpg') center center/cover no-repeat}
.s-heiraten{aspect-ratio:841/1290;background:#FFFCF4 url('assets/wir-heiraten.jpg') center top/100% 100% no-repeat}
.s-ablauf{aspect-ratio:843/1280;background:#EDE6D8 url('assets/ablauf.jpg') center top/100% 100% no-repeat}
.s-abschluss{aspect-ratio:1023/1537;background:#A2A497 url('assets/abschluss.jpg') center top/100% auto no-repeat}

/* ---- ratingen + countdown ---- */
.s-ratingen{background:#A1A396 url('assets/papier-sage.png') center top/100% 100% no-repeat;padding:64px 30px 66px;text-align:center}
.s-ratingen .eyebrow-light{font-size:11.5px;letter-spacing:.36em;text-indent:.36em;color:rgba(253,251,245,.82)}
.s-ratingen .script-heading{font-family:'Pinyon Script',cursive;font-size:44px;line-height:1.25;color:#FDFBF5;margin-top:6px}
.promenade-photo{width:84%;margin:30px auto 0;aspect-ratio:1075/484;background:url('assets/paar-promenade.jpg') center center/cover no-repeat;box-shadow:0 12px 28px rgba(52,58,46,.24)}

.countdown{display:flex;align-items:flex-start;justify-content:center;margin-top:34px}
.countdown .unit{min-width:58px;flex:none;text-align:center}
.countdown .unit .val{font-family:'Sono',ui-monospace,monospace;font-variation-settings:'MONO' 1;font-size:31px;font-weight:400;line-height:1.1;color:#FDFBF5;letter-spacing:.05em}
.countdown .unit .label{font-size:8px;font-variant:small-caps;letter-spacing:.18em;text-indent:.18em;color:rgba(253,251,245,.7);margin-top:11px}
.countdown .colon{font-family:'Sono',ui-monospace,monospace;font-variation-settings:'MONO' 1;font-size:27px;font-weight:400;line-height:1.26;color:rgba(253,251,245,.6);padding:0 6px}

/* ---- details ---- */
.s-details{background:#EFE7DA var(--tex);padding:74px 26px 76px;text-align:center}
.s-details .kicker{font-family:'Pinyon Script',cursive;font-size:50px;line-height:1.15;color:#8A745A}
.s-details .sub{font-size:16px;color:#6E6558;margin-top:10px}
.details-card{margin-top:30px;padding:34px 22px 26px;border-radius:22px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.75);box-shadow:0 18px 40px rgba(96,82,58,.09)}
.pin-icon{width:56px;height:56px;border-radius:50%;background:#FDFBF6;margin:0 auto;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(96,82,58,.08)}
.pin-icon span{width:15px;height:15px;border:1.6px solid #8A745A;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:block}
.details-card .eyebrow{font-size:13px;letter-spacing:.3em;text-indent:.3em;color:#8A7D6B;margin-top:20px}
.details-card .venue{font-size:27px;color:#4A4239;margin-top:12px}
.details-card .address{font-size:16.5px;color:#5C5346;margin-top:6px}
.details-card .when{display:flex;flex-direction:column;gap:4px;margin-top:16px;font-size:16px;color:#5C5346}
.map-frame{width:78%;margin:20px auto 0;border-radius:12px;overflow:hidden;border:1px solid rgba(120,102,74,.16);aspect-ratio:4/3;background:#e8e4dc}
.map-frame iframe{display:block;width:100%;height:100%;border:0}
.route-wrap{display:flex;justify-content:center;margin-top:18px}
.btn-route{display:flex;align-items:center;justify-content:center;height:36px;padding:0 22px;border-radius:999px;background:#A2A497;color:#FDFBF6;font-size:10.5px;letter-spacing:.24em;text-indent:.24em}
.btn-route:hover{background:#949686}

/* ---- musik ---- */
.s-musik{background:#A2A497 var(--tex);padding:72px 34px 74px;text-align:center}
.s-musik .flourish{font-size:13px;color:rgba(255,255,255,.8)}
.s-musik .kicker{font-family:'Pinyon Script',cursive;font-size:37px;line-height:1.22;color:#FDFBF5;margin-top:10px}
.s-musik .sub{font-size:15px;line-height:1.65;color:rgba(255,255,255,.88);margin-top:12px;text-wrap:pretty}
.song-form{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px}
.song-form input{width:182px;height:40px;padding:0 24px;border-radius:999px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.62);color:#3F4239;font-size:14.5px;text-align:center}
.btn-song{width:182px;height:36px;padding:0 18px;border:none;border-radius:999px;background:#6E7A63;color:#FDFBF5;font-size:10.5px;letter-spacing:.24em;text-indent:.24em;cursor:pointer}
.btn-song:hover{background:#5F6B55}
.song-list .song{margin-top:10px;font-size:15px;font-style:italic;color:#FDFBF5;opacity:.92}

/* ---- antwort ---- */
.s-antwort{background:#F1E9DD var(--tex);padding:74px 28px 76px}
.s-antwort .head{text-align:center}
.s-antwort .head .kicker{font-family:'Pinyon Script',cursive;font-size:52px;line-height:1;color:#4A4239}
.s-antwort .head .sub{font-size:16px;line-height:1.65;color:#5C5346;margin-top:12px}
.divider{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px}
.divider .rule{height:1px;width:56px;background:rgba(90,80,62,.28)}
.divider .heart{font-size:13px;color:rgba(150,124,86,.9)}

.rsvp-form{display:flex;flex-direction:column;gap:11px;margin-top:26px;width:296px;margin-left:auto;margin-right:auto}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:13.5px;color:#8A7D6B}
.field input,.field textarea{padding:0 12px;border-radius:9px;border:1px solid rgba(120,102,74,.2);background:rgba(255,255,255,.62);font-size:14px}
.field input{height:33px}
.field textarea{padding:9px 12px;font-size:13px;line-height:1.55;resize:none}
.attend-row{display:flex;gap:22px;align-items:center}
.attend-row label{display:flex;align-items:center;gap:7px;font-size:15px;color:#4A4239;cursor:pointer;min-height:28px}
.attend-row input{
  -webkit-appearance:none;appearance:none;
  width:11px;height:11px;margin:0;padding:0;flex:none;
  border:1.4px solid #7F8A72;border-radius:50%;
  background:transparent;cursor:pointer;position:relative;
}
.attend-row input:checked::after{
  content:'';position:absolute;inset:2px;border-radius:50%;background:#7F8A72;
}
.submit-wrap{display:flex;justify-content:center;margin-top:6px}
.btn-rsvp{height:38px;padding:0 24px;border-radius:999px;border:1px solid rgba(120,102,74,.28);background:rgba(255,255,255,.66);color:#6E6558;font-size:10.5px;letter-spacing:.24em;text-indent:.24em;cursor:pointer}
.btn-rsvp:hover{background:#fff}
.btn-rsvp:disabled{opacity:.6;cursor:default}
.rsvp-error{font-size:13px;color:#A15C4A;text-align:center}

.rsvp-confirm{margin-top:34px;padding:34px 22px;border-radius:18px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.75);text-align:center}
.rsvp-confirm .heart{font-size:13px;color:rgba(150,124,86,.9)}
.rsvp-confirm .kicker{font-family:'Pinyon Script',cursive;font-size:34px;line-height:1.2;color:#4A4239;margin-top:6px}
.rsvp-confirm .msg{font-size:15px;line-height:1.65;color:#5C5346;margin-top:10px}
.rsvp-confirm .echo{font-size:13.5px;font-style:italic;color:#8A7D6B;margin-top:14px}

.thanks{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:32px}
.thanks .heart{font-size:11px;color:rgba(150,124,86,.85)}
.thanks .kicker{font-family:'Pinyon Script',cursive;font-size:24px;color:#4A4239}

/* ---- finale video ---- */
.s-finale{background:#C9BAB2;padding-bottom:22px}
.s-finale video{
  display:block;width:100%;aspect-ratio:884/504;object-fit:cover;background:#C9BAB2;
  mask-image:linear-gradient(transparent,#000 34px,#000 calc(100% - 30px),transparent);
  mask-repeat:no-repeat;
}

/* ---- envelope (3D flip) ---- */
.envelope{
  position:absolute;inset:0;z-index:9;
  overflow:hidden;cursor:pointer;
  perspective:1500px;perspective-origin:50% 34%;
  transition:opacity .8s ease .62s,transform 1.5s cubic-bezier(.3,.9,.3,1) .5s,filter 1s ease .6s;
  opacity:1;transform:scale(1);filter:blur(0px);pointer-events:auto;
}
.envelope.opened{opacity:0;transform:scale(1.16);filter:blur(3px);pointer-events:none}

.envelope-inner{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  min-width:100%;min-height:100%;aspect-ratio:784/1373;
  transform-style:preserve-3d;
}
.envelope-occlusion{
  position:absolute;left:0;right:0;top:0;height:30%;
  background:linear-gradient(rgba(46,54,40,.42),rgba(46,54,40,.14) 52%,rgba(46,54,40,0));
  opacity:0;transition:opacity 1.1s ease .12s;
}
.envelope.flap .envelope-occlusion{opacity:1}

.envelope-body{
  position:absolute;inset:0;
  /* Die Silhouetten der beiden Grafiken stoßen an den Spitzenbögen nicht
     lückenlos aneinander – dort schimmerte das cremefarbene Briefpapier
     durch. Der Korpus wird deshalb unten verankert und leicht gedehnt
     (112% hoch, 102% breit): seine Oberkante liegt damit rundum sicher
     unter der Spitzenkante der Lasche, die Unterkante bleibt bündig. */
  background:url('assets/umschlag-body.svg') center bottom/102% 112% no-repeat;
}
.envelope-hint{
  position:absolute;left:0;right:0;top:74%;text-align:center;
  font-size:12.5px;letter-spacing:.3em;text-indent:.3em;color:rgba(255,255,255,.9);
  text-shadow:0 1px 8px rgba(60,70,56,.5);
  animation:breathe 3.6s ease-in-out infinite;
  opacity:1;transition:opacity .5s ease;
}
.envelope.flap .envelope-hint{opacity:0}

.envelope-flap{
  position:absolute;inset:0;
  transform-origin:top center;transform-style:preserve-3d;
  transition:transform 1.35s cubic-bezier(.58,.04,.32,1);
  transform:rotateX(0deg);
}
.envelope.nudge .envelope-flap{transform:rotateX(7deg)}
.envelope.flap .envelope-flap{transform:rotateX(174deg) translateY(-.6%)}

.envelope-flap-front{
  position:absolute;inset:0;backface-visibility:hidden;
  background:url('assets/umschlag-flap.svg') center center/100% 100% no-repeat;
  filter:drop-shadow(0 0 0 rgba(48,56,42,0));
  transition:filter 1s ease;
}
.envelope.flap .envelope-flap-front{filter:drop-shadow(0 18px 26px rgba(48,56,42,.4))}

.envelope-eyebrow{position:absolute;left:0;right:0;top:30.6%;text-align:center;font-size:min(14px,3.26vw);letter-spacing:.34em;text-indent:.34em;color:rgba(255,255,255,.88);text-shadow:0 1px 6px rgba(70,80,66,.35);white-space:nowrap}
.envelope-names{position:absolute;left:0;right:0;top:36.4%;text-align:center;font-family:'Pinyon Script',cursive;font-size:min(50px,11.63vw);line-height:1;letter-spacing:.02em;color:#FFFFFF;text-shadow:0 2px 12px rgba(64,74,58,.45);white-space:nowrap}
.envelope-sheen{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,0) 42%,rgba(64,72,58,.16));opacity:0;transition:opacity 1.35s ease}
.envelope.flap .envelope-sheen{opacity:1}

.envelope-flap-back{
  position:absolute;inset:0;backface-visibility:hidden;transform:rotateX(180deg);
}
/* Rückseite = dieselbe Lasche, vertikal gespiegelt (hebt das rotateX(180deg) auf)
   und leicht abgedunkelt, damit sie wie die Papierrückseite wirkt. */
.envelope-flap-back::before{
  content:'';position:absolute;inset:0;transform:scaleY(-1);
  background:url('assets/umschlag-flap.svg') center center/100% 100% no-repeat;
  filter:brightness(.9) saturate(.92);
}

/* ---- background-music toggle ---- */
.mute-toggle{
  position:absolute;top:16px;right:16px;z-index:40;
  display:flex;align-items:center;gap:7px;
  padding:9px 15px 9px 11px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
  background:rgba(50,54,45,.38);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  color:#FDFBF6;font-size:10.5px;letter-spacing:.22em;text-indent:.22em;
  cursor:pointer;
  opacity:0;pointer-events:none;
  transition:opacity .7s ease,background .25s ease;
}
.mute-toggle.show{opacity:1;pointer-events:auto}
.mute-toggle:hover{background:rgba(50,54,45,.55)}
.mute-toggle .dot{width:7px;height:7px;flex:none;border-radius:50%;background:rgba(255,255,255,.4);transition:background .3s ease,box-shadow .3s ease}
.mute-toggle.playing .dot{background:#D8C9A3;box-shadow:0 0 6px rgba(216,201,163,.85)}