/* Christina & Henrik · bryllupstema · design-test */
:root{font-family:Georgia,'Times New Roman',serif;color:#3b4560;background:#fbf8f4}
*{box-sizing:border-box}body{margin:0;min-height:100vh}header{display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(255,255,255,.78);border-bottom:1px solid #e8e1e9}.brand{font-size:1.65rem;letter-spacing:.13em}.brand span{color:#9c7fa9}nav{display:none}a{color:#5c6d9a}main{max-width:850px;margin:2.5rem auto;padding:0 1rem;min-height:65vh}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.77rem;color:#77738d}h1{font-size:clamp(2rem,6vw,3.4rem);font-weight:normal;margin:.5rem 0}h2{font-size:1.55rem;font-weight:normal}h3{font-size:1.15rem}p{line-height:1.6}.panel{background:rgba(255,255,255,.94);border:1px solid #e5dce9;border-radius:1rem;padding:1.5rem;margin:1rem 0;box-shadow:0 8px 28px #48516b12}.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.5rem 0}.button,button{border:0;border-radius:.6rem;background:#667aa0;color:#fff;padding:.85rem 1.2rem;cursor:pointer;font:inherit;text-decoration:none;display:inline-block}.button.secondary,button.secondary{background:#e9e8f1;color:#3e4d70}.button.danger,button.danger{background:#f7e8e8;color:#8d3232}button:disabled{opacity:.6;cursor:not-allowed}label{display:block;margin:.85rem 0 .25rem;font-weight:bold;font-size:.95rem}input[type=text],input[type=password],textarea,select{font:inherit;width:100%;padding:.75rem;border:1px solid #c9bfd0;border-radius:.5rem;background:#fff}input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #ad8bb9;outline-offset:3px}textarea{min-height:80px}.checks{display:flex;gap:1.1rem;flex-wrap:wrap;margin:.6rem 0}.checks label{font-weight:normal;margin:.2rem 0;display:flex;gap:.35rem;align-items:center}.guest{border:1px solid #ded6e5;border-radius:.7rem;padding:1rem;margin:1rem 0;background:#fcfbff}.guest h3{margin-top:0}.muted{color:#686d80}.notice{background:#fff6e4;padding:1rem;border-radius:.7rem;border-left:4px solid #b99052}.error{background:#fdeeee;padding:1rem;border-radius:.6rem;color:#8a2727}.success{background:#eaf5ec;padding:1rem;border-radius:.6rem;color:#265737}footer{text-align:center;padding:2rem;color:#7a7790;font-size:.9rem}table{border-collapse:collapse;width:100%;font-size:.9rem}th,td{padding:.6rem;border-bottom:1px solid #dbe1e5;text-align:left;vertical-align:top}.tablewrap{overflow:auto}summary{cursor:pointer}fieldset{border:0;padding:0}small{line-height:1.5}
/* Forside */
.invitation-home{background:radial-gradient(ellipse at 15% 10%,#efe8f3 0,transparent 45%),radial-gradient(ellipse at 88% 82%,#e4eaf4 0,transparent 45%),#faf7f2}.invitation-home header{background:transparent;border:0}.invitation-home main{max-width:900px;margin:0 auto;min-height:calc(100vh - 150px)}.welcome{text-align:center;padding:1.5rem 0 3rem}.welcome-kicker{font-size:.85rem;letter-spacing:.3em;color:#76738f}.welcome h1{font-size:clamp(2.7rem,7vw,5.2rem);color:#4c5579;line-height:1.2;margin:.45rem 0;font-style:italic}.welcome .amp{color:#9c7fa9}.welcome-date{font-size:1.2rem;letter-spacing:.12em;margin:.65rem 0}.welcome-motto{color:#897c9c;letter-spacing:.06em}.welcome-motto span{color:#a684aa;margin:0 .2em}.welcome-no-link{max-width:500px;margin:3rem auto}.envelope-trigger{display:block;background:none;border:0;padding:2rem 0 1rem;margin:0 auto;width:min(430px,95%);height:315px;overflow:visible;cursor:pointer;perspective:900px}.envelope-trigger:disabled{opacity:1;cursor:default}.envelope{display:block;position:relative;width:100%;height:245px;filter:drop-shadow(0 18px 20px #706b7d32)}.envelope-back{position:absolute;inset:0;background:linear-gradient(135deg,#f6eee1,#dfd1c0);border-radius:4px}.envelope-front{position:absolute;inset:0;background:linear-gradient(146deg,transparent 49.7%,#e7d9c7 50%) left/50% 100% no-repeat,linear-gradient(214deg,transparent 49.7%,#e8dac9 50%) right/50% 100% no-repeat,linear-gradient(0deg,#e9ddcc,#f4e9db);clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);z-index:4;border-radius:4px}.envelope-flap{position:absolute;inset:0;background:linear-gradient(#f7efe4,#e4d7c5);clip-path:polygon(0 0,100% 0,50% 62%);transform-origin:top center;z-index:6;transition:transform .85s ease,z-index 0s .5s}.letter{position:absolute;left:9%;right:9%;bottom:8%;height:88%;background:#fffdf9;border:1px solid #e8d9d9;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;transition:transform 1s .45s ease}.letter-monogram{font-size:2.2rem;color:#827293}.letter-caption{font-size:.8rem;text-transform:uppercase;letter-spacing:.25em;color:#7e7785}.ribbon-vertical{position:absolute;top:0;bottom:0;left:47%;width:6%;background:linear-gradient(90deg,#c9adac,#f7e4d7,#bda1a3);z-index:7;transition:opacity .3s}.ribbon-horizontal{position:absolute;top:45%;left:0;right:0;height:13%;background:linear-gradient(#c9b1ad,#f8e6d7,#c5a9a6);z-index:7;transition:opacity .3s}.bow{position:absolute;top:32%;left:50%;width:76px;height:60px;background:linear-gradient(145deg,#f5e4d8,#bda2a4);z-index:8;border:2px solid #d0b4ae;transition:transform .5s,opacity .5s}.bow-left{border-radius:80% 10% 70% 15%;transform:translateX(-95%) rotate(-25deg)}.bow-right{border-radius:10% 80% 15% 70%;transform:translateX(-5%) rotate(25deg)}.bow-knot{position:absolute;top:47%;left:50%;width:25px;height:22px;border-radius:45%;background:#d7bcb6;transform:translate(-50%,-50%);z-index:9;transition:opacity .4s}.open-hint{font-size:.88rem;color:#7c7485;font-style:italic;margin:0}.is-opening .ribbon-vertical,.is-opening .ribbon-horizontal,.is-opening .bow,.is-opening .bow-knot{opacity:0}.is-opening .bow-left{transform:translateX(-160%) rotate(-60deg)}.is-opening .bow-right{transform:translateX(60%) rotate(60deg)}.is-opening .envelope-flap{transform:rotateX(180deg);z-index:1}.is-opening .letter{transform:translateY(-105px)}
/* Formular: fast blomstret baggrund. SVG er lokalt og indlæses uden tredjepart. */
.rsvp-page{background:#f9f6f8 url('/assets/blomster.svg') center center/cover fixed no-repeat}.rsvp-page header{background:rgba(255,255,255,.85)}.rsvp-page main{max-width:790px;background:rgba(255,252,253,.91);border:1px solid #e7dce8;border-radius:1.4rem;padding:2rem clamp(1rem,4vw,2.8rem);box-shadow:0 14px 55px #414b6b22;backdrop-filter:blur(4px)}.rsvp-page main>h1{color:#5c6386}.rsvp-page footer{background:rgba(255,255,255,.6)}.admin-page{background:#f8f8fa}.admin-page main{max-width:950px}
@media(max-width:580px){main{margin:1rem auto}.panel{padding:1rem}.welcome{padding-top:.6rem}.welcome h1{font-size:clamp(2.2rem,10vw,3.2rem)}.welcome-motto{font-size:.84rem}.envelope-trigger{height:240px;padding-top:1.3rem}.envelope{height:185px}.bow{width:55px;height:45px}.rsvp-page{background-attachment:scroll;background-size:auto 100vh}.rsvp-page main{margin:1rem .65rem;padding:1.25rem .85rem}.checks{display:block}.checks label{margin:.6rem 0}}
@media(prefers-reduced-motion:reduce){.envelope-flap,.letter,.bow,.ribbon-vertical,.ribbon-horizontal,.bow-knot{transition:none!important}}


/* Version 2: klassisk kuvert med champagnefarvet silkebånd.
   Dette afsnit overskriver kun kuvertens udseende og animation. */
.invitation-home { background: radial-gradient(ellipse at 50% 24%,#fffdfa 0%,#faf5ed 72%,#f3ece5 100%); }
.envelope-trigger { width:min(570px,96%); height:390px; padding:2.5rem 0 0; perspective:1400px; -webkit-tap-highlight-color:transparent; }
.envelope-trigger:focus-visible { outline:3px solid #a38a80; outline-offset:6px; }
.envelope { width:100%; height:auto; aspect-ratio:1.72; overflow:visible; isolation:isolate; filter:drop-shadow(0 22px 21px rgba(84,64,51,.18)) drop-shadow(0 5px 5px rgba(84,64,51,.1)); transform:translateZ(0); }
.envelope-back { z-index:0; border-radius:3px; border:1px solid #e8dfd4; background:linear-gradient(115deg,#e7ddd0 0%,#fffdf6 40%,#eee5d9 100%); box-shadow:inset 0 0 30px #c9b9a54d; }
.envelope-front { z-index:4; border-radius:2px; background:linear-gradient(145deg,rgba(255,255,255,.58),transparent 55%),linear-gradient(0deg,#e9dfd1 0%,#faf5ea 78%,#fffaf0 100%); clip-path:polygon(0 0,50% 64%,100% 0,100% 100%,0 100%); box-shadow:inset 0 -9px 16px #bfae9d33; }
.envelope-front::before,.envelope-front::after { content:"";position:absolute;inset:0;pointer-events:none; }
.envelope-front::before { background:linear-gradient(145deg,#fffdf7 0%,#e7dacc 95%);clip-path:polygon(0 0,50% 64%,0 100%);filter:drop-shadow(2px 1px 1px #9f8e7e4a); }
.envelope-front::after { background:linear-gradient(220deg,#fffaf2 0%,#e8dacb 95%);clip-path:polygon(100% 0,50% 64%,100% 100%); }
.envelope-flap { z-index:6; border-radius:2px; background:linear-gradient(180deg,#fffcf6 0%,#f5ede1 64%,#dfd1bf 100%);clip-path:polygon(0 0,100% 0,50% 65%);transform-origin:50% 0%;backface-visibility:visible;transition:none;filter:drop-shadow(0 2px 2px #a38d7740); }
.letter { left:11%;right:11%;bottom:8%;height:83%;z-index:2;border:1px solid #e8ded0;background:linear-gradient(140deg,#fffef9,#f8f1e8);box-shadow:0 3px 15px #6d554a26;transform:translateY(0);transition:none;gap:.65rem; }
.letter-monogram { font-size:clamp(1.4rem,4vw,2.2rem);color:#977d77;font-style:italic; }
.letter-caption { font-size:.7rem;color:#a08b80;letter-spacing:.28em; }
.ribbon-horizontal,.ribbon-vertical { z-index:7;opacity:1;transition:none;box-shadow:0 2px 7px #755b4b38,inset 0 1px 2px #fff9ee9c,inset 0 -2px 3px #926c6240; }
.ribbon-horizontal { top:45%;height:13%;left:-1%;right:-1%;background:linear-gradient(180deg,#c89d80 0%,#e6c3a8 16%,#f8e1ca 37%,#d7aa8c 76%,#b98e78 100%); }
.ribbon-vertical { top:-1%;bottom:-1%;left:46.5%;width:7%;background:linear-gradient(90deg,#bb907a 0%,#eac8ab 19%,#ffe7cf 42%,#d4a98f 77%,#b88973 100%); }
.bow { z-index:9;top:31%;width:23%;height:28%;border:1px solid #d6ad90;background:radial-gradient(ellipse at 48% 38%,#fff0d9 0%,#f1d2b5 35%,#d3a689 77%,#ad7e67 100%);box-shadow:inset 2px 3px 9px #fff5e8b8,inset -6px -7px 12px #956e6159,0 4px 8px #73554b42;transition:none; }
.bow-left { left:50%;border-radius:72% 20% 57% 21%;transform:translateX(-94%) rotate(-24deg) skewY(4deg); }
.bow-right { left:50%;border-radius:20% 72% 21% 57%;transform:translateX(-6%) rotate(24deg) skewY(-4deg); }
.bow-left::after,.bow-right::after { content:"";position:absolute;top:65%;width:55%;height:185%;background:linear-gradient(100deg,#c3987e 0%,#f8dec3 28%,#e5bca0 58%,#bc8c74 100%);box-shadow:2px 4px 5px #72594b30;clip-path:polygon(0 0,100% 0,100% 100%,50% 87%,0 100%); }
.bow-left::after { left:10%;transform:rotate(37deg);transform-origin:top center; }
.bow-right::after { right:10%;transform:rotate(-37deg);transform-origin:top center; }
.bow-knot { z-index:10;top:49%;width:8%;height:15%;border-radius:34% 38% 37% 40%;background:linear-gradient(110deg,#b88b73,#f9dec2 35%,#d7aa8b 70%,#ad806c);box-shadow:inset 3px 0 5px #fff0d5a6,inset -4px 0 6px #8d675959,0 3px 5px #7d5c4e4a;transition:none; }
.envelope-trigger:not(:disabled):hover .envelope { filter:drop-shadow(0 27px 25px rgba(84,64,51,.23)) drop-shadow(0 6px 6px rgba(84,64,51,.12)); }
/* Tidslinje: 0-1.1s bånd, 1.1-2.25s flap, 2.25-3.1s kort synligt,
   3.1-4.2s kort løftes, 4.2-4.6s overgang. */
.is-opening .bow-left { animation:untie-left 1.15s cubic-bezier(.3,.1,.65,1) forwards; }
.is-opening .bow-right { animation:untie-right 1.15s cubic-bezier(.3,.1,.65,1) forwards; }
.is-opening .bow-knot { animation:untie-knot .9s ease-in forwards; }
.is-opening .ribbon-horizontal { animation:unwrap-horizontal 1.15s .25s ease-in-out forwards; }
.is-opening .ribbon-vertical { animation:unwrap-vertical 1.15s .25s ease-in-out forwards; }
.is-opening .envelope-flap { animation:open-flap 1.15s 1.15s cubic-bezier(.2,.05,.25,1) forwards; }
.is-opening .letter { animation:lift-letter 1.2s 2.65s cubic-bezier(.25,.1,.25,1) forwards; }
.is-opening .envelope { animation:fade-envelope .55s 4.02s ease-in forwards; }
@keyframes untie-left { 0%{transform:translateX(-94%) rotate(-24deg) skewY(4deg);opacity:1} 55%{transform:translateX(-115%) rotate(-45deg) scale(.97);opacity:1} 100%{transform:translate(-170%,30%) rotate(-70deg) scale(.85);opacity:0} }
@keyframes untie-right { 0%{transform:translateX(-6%) rotate(24deg) skewY(-4deg);opacity:1} 55%{transform:translateX(14%) rotate(45deg) scale(.97);opacity:1} 100%{transform:translate(70%,30%) rotate(70deg) scale(.85);opacity:0} }
@keyframes untie-knot { 0%,25%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,35%) scale(.65)} }
@keyframes unwrap-horizontal { 0%,15%{opacity:1;transform:scaleX(1)} 100%{opacity:0;transform:scaleX(1.2)} }
@keyframes unwrap-vertical { 0%,15%{opacity:1;transform:scaleY(1)} 100%{opacity:0;transform:scaleY(1.25)} }
@keyframes open-flap { 0%{transform:rotateX(0deg);z-index:6} 49%{z-index:6} 50%{z-index:1} 100%{transform:rotateX(180deg);z-index:1} }
@keyframes lift-letter { 0%{transform:translateY(0);z-index:2} 5%{z-index:3} 100%{transform:translateY(-62%);z-index:5} }
@keyframes fade-envelope { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.035)} }
@media(max-width:580px) { .envelope-trigger { height:auto;min-height:245px;padding:1.8rem 0 .6rem;width:min(96%,430px); } .envelope {height:auto;aspect-ratio:1.72;} .bow {width:23%;height:28%;} .open-hint {margin-top:.7rem;} }
@media(prefers-reduced-motion:reduce) { .is-opening .bow-left,.is-opening .bow-right,.is-opening .bow-knot,.is-opening .ribbon-horizontal,.is-opening .ribbon-vertical,.is-opening .envelope-flap,.is-opening .letter,.is-opening .envelope {animation:none!important;} }

/* Version 6: original akvarelbaggrund fra inspirationsbilledet. */
.rsvp-page {
  background-color: #fff;
  background-image: url('./blomster-original.png');
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (max-width: 580px) {
  .rsvp-page {
    background-image: url('./blomster-original.png');
    background-position: center center;
    background-size: 100% 100%;
    background-attachment: fixed;
  }
}

/* Version 8: tydelig original akvarelramme på begge RSVP-formularer.
   Kun formularens visuelle udtryk ændres. */
body.rsvp-page {
  background: #fff url('./blomster-original.png') center center / 100% 100% fixed no-repeat !important;
}
body.rsvp-page main {
  max-width: 690px;
  background: rgba(255,255,255,.84);
  backdrop-filter: none;
}
@media (max-width: 580px) {
  body.rsvp-page {
    background-attachment: fixed !important;
    background-size: 100% 100% !important;
  }
  body.rsvp-page main {
    margin: 1rem .75rem;
    background: rgba(255,255,255,.88);
  }
}