@font-face{font-family:Hurricane;src:url('fonts/Hurricane-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;--night:#151c1e;--cream:#fff4dd;--gold:#dfbb7b;--wine:#4a1d17;--hero-height:clamp(680px,67vw,1000px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:25px}
body{margin:0;background:var(--night);color:var(--cream);font-family:Georgia,'Times New Roman',serif;-webkit-text-size-adjust:100%}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
button,summary{cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:12px;z-index:100;padding:14px 18px;color:var(--wine);background:var(--cream);transform:translateY(-150%)}
.skip-link:focus{transform:none}
.site-header{position:absolute;z-index:5;top:24px;left:50%;transform:translateX(-50%);display:flex;align-items:flex-start;justify-content:space-between;gap:30px;width:min(1080px,81%)}
.brand{position:relative;display:block;flex:0 0 auto;padding:2px 24px 7px 0;font-family:Hurricane,cursive;font-size:36px;font-weight:400;line-height:.85;transform:rotate(-7deg);text-shadow:0 1px 7px #39292565}
.brand>span:first-child{display:block;padding-left:51px;font-size:.85em}
.brand-heart{position:absolute;right:0;bottom:9px;font-family:Georgia,serif;font-size:.8em}
.navigation{display:flex;align-items:center;gap:clamp(20px,2.6vw,42px);padding-top:0;font-size:clamp(12px,1.1vw,15px);text-shadow:0 1px 7px #332b2b}
.navigation a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;white-space:nowrap}
.navigation a:hover{color:var(--gold)}
.navigation a span{margin-left:7px;font-size:17px}
.menu-toggle{display:none}
.hero{position:relative;isolation:isolate;min-height:var(--hero-height);text-align:center}
.hero::before{content:'';position:absolute;inset:0;z-index:-2;background-image:url('Bilder/Hintergrund.png');background-size:max(100%,calc(var(--hero-height)*1.49271)) auto;background-position:center top;background-repeat:no-repeat}
.hero-content{width:100%;margin:0 auto;padding-top:clamp(98px,9vw,148px);padding-bottom:155px}
h1{margin:0;color:#3d1c13;font-weight:400}
.title-kicker{display:block;padding-left:6px;margin-bottom:0;font-size:clamp(21px,2.2vw,31px);line-height:1.25;letter-spacing:.23em}
.title-script{display:inline-block;position:relative;font-family:Hurricane,cursive;font-size:clamp(83px,9.5vw,142px);line-height:.94;white-space:nowrap}
.title-heart{display:inline-block;margin-left:7px;font-family:Georgia,serif;font-size:.62em;vertical-align:5px}
.motto{margin:21px 12px 0;color:#332017;font-size:clamp(12px,1.12vw,16px);letter-spacing:.19em;line-height:1.6}
.motto span+span::before{content:' · '}
.countdown-panel{width:clamp(430px,45vw,620px);margin:clamp(27px,2.7vw,41px) auto 0;padding:15px 26px 21px;border:1px solid #f4e8d596;border-radius:17px;background:#ffedcdd9;color:var(--wine);box-shadow:inset 0 0 20px #fff8eb31,0 3px 16px #2a18111a;scroll-margin-top:28px}
.countdown-heading{margin:0 0 13px;color:#3c2921;font-size:clamp(11px,1.03vw,15px);line-height:1.2;font-weight:400;letter-spacing:.12em;text-transform:uppercase}
.countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.time-unit{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:10px 6px 12px;border-radius:5px;background:#fff8e9bf}
.time-value{display:block;font-size:clamp(35px,3.8vw,55px);line-height:1.06;font-variant-numeric:tabular-nums;font-weight:700}
.time-label{display:block;margin-top:9px;color:#3c2921;font-size:clamp(11px,.95vw,13px);line-height:1;letter-spacing:.04em;text-transform:uppercase}
abbr{text-decoration:none}
.vacation-message{margin:12px 0;min-height:80px;display:grid;place-items:center;font-size:clamp(25px,3vw,41px);line-height:1.35}
.anticipation{margin:clamp(27px,2.8vw,42px) auto 0;padding:0 18px;max-width:850px;color:#fff8e9;text-shadow:0 2px 7px #05131b,0 0 18px #06131b}
.anticipation p{margin:0;font-size:clamp(14px,1.45vw,20px);line-height:1.5}
.anticipation .anticipation-title{margin-bottom:1px;font-family:Hurricane,cursive;font-size:clamp(33px,3.8vw,52px);line-height:1.1}
.inline-heart{font-size:1.6em;line-height:.6;vertical-align:-2px}
.scroll-cue{display:flex;width:48px;height:48px;margin:18px auto 0;align-items:center;justify-content:center;color:var(--gold)}
.scroll-cue span{width:18px;height:18px;border-bottom:4px solid currentColor;border-right:4px solid currentColor;transform:translateY(-4px) rotate(45deg)}
.experiences{position:absolute;bottom:0;left:0;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;width:100%;margin:0;padding:20px max(6%,calc((100% - 1040px)/2)) 23px;list-style:none;background:linear-gradient(transparent,#1e1014a6 38%,#181012b8)}
.experiences li{position:relative;min-height:103px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;font-size:clamp(13px,1.2vw,17px);line-height:1.25;color:#fff5e6;text-shadow:0 1px 5px #000}
.experiences li+li::before{content:'';position:absolute;top:13px;left:0;height:80px;width:1px;background:linear-gradient(transparent,#e5bf858c,transparent)}
.experiences svg{width:39px;height:39px;overflow:visible;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gallery-section{position:relative;isolation:isolate;background:var(--night);min-height:510px;padding:24px 0 clamp(130px,15vw,230px);border-top:1px solid #c19b635e}
.gallery-section::before,.gallery-section::after{content:'';position:absolute;left:0;right:0;z-index:-1;pointer-events:none;background-repeat:no-repeat}
.gallery-section::before{top:0;height:370px;background-image:linear-gradient(to bottom,transparent 40%,var(--night) 100%),url('Bilder/Hintergrund.png');background-size:100% 100%,100% auto;background-position:center top,center calc(-67vw)}
.gallery-section::after{bottom:0;height:clamp(210px,23vw,360px);background-image:linear-gradient(to bottom,var(--night),transparent 45%),url('Bilder/Hintergrund.png');background-size:100% 100%,100% auto;background-position:center top,center bottom}
.gallery-inner{width:min(1380px,93.5%);margin:0 auto}
.gallery-ornament{color:var(--gold);font-size:34px;height:24px;line-height:24px;text-align:center;transform:rotate(-30deg)}
.section-title{display:flex;align-items:center;justify-content:center;gap:32px;margin:12px auto 0}
.section-title h2{margin:0;color:#fff7e8;font-weight:400;font-size:clamp(20px,2.05vw,29px);letter-spacing:.17em;text-transform:uppercase;line-height:1.3;text-align:center}
.section-title>span{display:block;position:relative;height:1px;width:115px;background:linear-gradient(to right,transparent,var(--gold))}
.section-title>span:last-child{transform:rotate(180deg)}
.section-title>span::after{content:'❧';position:absolute;right:0;top:-11px;padding-left:10px;color:var(--gold);font-size:18px}
.gallery-intro{margin:13px 0 26px;font-size:clamp(13px,1.3vw,18px);line-height:1.45;text-align:center}
.gallery-intro>span{font-size:1.6em;line-height:.7;vertical-align:-2px}
.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start}
.picture-card{margin:0;min-width:0;text-align:center}
.picture-open{display:block;width:100%;min-height:44px;padding:0;overflow:hidden;border:0;border-radius:8px;background:transparent}
.card-image{display:block;width:100%;height:auto;aspect-ratio:1.57;object-fit:cover;object-position:center}
.picture-open:hover{outline:1px solid #e0b877;outline-offset:3px}
.picture-card figcaption{padding:12px 2px 0;color:#fff7e8}
.picture-card h3{margin:0 0 4px;font-size:clamp(14px,1.3vw,19px);line-height:1.25;font-weight:400}
.picture-card p{margin:0;font-size:clamp(12px,1.1vw,15px);line-height:1.35}
.letter-section{width:min(850px,100%);margin:28px auto 0;scroll-margin-top:28px}
.letter{text-align:center}
.letter summary{display:inline-flex;justify-content:center;align-items:center;min-height:46px;padding:10px 30px;gap:13px;border:1px solid var(--gold);border-radius:30px;color:#fff3dc;background:#21160dc2;box-shadow:inset 0 0 0 3px #181411,inset 0 0 0 4px #d2ab6533;font-size:12px;letter-spacing:.04em;text-transform:uppercase;list-style:none}
.letter summary::-webkit-details-marker{display:none}
.letter summary::marker{content:''}
.letter summary svg{width:20px;height:17px;fill:none;stroke:var(--gold);stroke-width:1.25}
.summary-arrow{font-size:24px;line-height:20px;color:var(--gold)}
.letter[open] .summary-arrow{transform:rotate(90deg)}
.letter-body{margin-top:24px;padding:clamp(22px,4vw,48px);border:1px solid #c9a16c73;border-radius:12px;background:#11191bf2;box-shadow:0 8px 35px #0004;color:#fff2dc;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;font-size:17px;line-height:1.85}
.lightbox{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:55px 65px;border:0;background:#0b1114f5;color:var(--cream)}
.lightbox::backdrop{background:#000d}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox figure{width:min(1200px,100%);margin:0;text-align:center}
.lightbox img{display:block;max-width:100%;width:auto;height:auto;max-height:78vh;max-height:78svh;margin:auto;object-fit:contain}
.lightbox figcaption{padding:16px 0 0;font-size:18px}
.lightbox button{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #e0bb7759;border-radius:50%;background:#142126c9;color:var(--cream);font-family:Georgia,serif;font-size:36px;line-height:1}
.lightbox-close{right:max(18px,env(safe-area-inset-right));top:max(15px,env(safe-area-inset-top))}
.lightbox-previous{left:12px;top:calc(50% - 24px)}
.lightbox-next{right:12px;top:calc(50% - 24px)}
body.gallery-open{overflow:hidden}
@media(min-width:1600px){.hero-content{padding-top:145px}}
@media(min-width:641px) and (max-width:900px){
 .site-header{width:88%}.brand{font-size:29px}.navigation{gap:14px;font-size:12px}
 .title-script{font-size:82px}.gallery-grid{gap:15px}.section-title{gap:20px}.section-title>span{width:65px}
}
@media(max-width:640px){
 :root{--hero-height:max(780px,100vh)}
 html{scroll-padding-top:18px}
 .site-header{top:max(36px,env(safe-area-inset-top));width:calc(100% - 40px);align-items:flex-start}
 .brand{font-size:36px;line-height:.84;color:#391b13;text-shadow:none;padding-top:5px}
 .brand>span:first-child{padding-left:52px}
 .menu-toggle{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;flex:0 0 44px;padding:0;border:0;background:transparent;color:#fff8e8}
 .menu-toggle span{display:block;width:21px;height:1.5px;background:currentColor}
 .navigation{position:absolute;top:59px;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;min-width:210px;padding:10px 18px;border:1px solid #d9b67880;border-radius:8px;background:#142024f2;color:var(--cream);font-size:15px;text-shadow:none}
 .navigation.is-open{display:flex}.navigation a{justify-content:flex-start;min-height:46px}
 .hero::before{background-size:auto calc(var(--hero-height)*2.23907);background-position:20% calc(var(--hero-height)*-.19)}
 .hero::after{content:'';position:absolute;z-index:-1;inset:50% 0 0;background:linear-gradient(transparent 20%,#0b10165e 75%,#11191acc)}
 .hero-content{padding:clamp(354px,44vh,430px) 0 48px}
 #page-title{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
 .motto{max-width:360px;margin:0 auto;padding:0 12px;color:#fff9e9;font-size:14px;font-weight:400;letter-spacing:.16em;line-height:1.7;text-shadow:0 1px 6px #000}
 .motto span{display:block}.motto span+span::before{content:none}
 .countdown-panel{width:min(88%,365px);margin-top:24px;padding:16px 14px 17px;border-radius:13px;background:#ffedcfed}
 .countdown-heading{margin-bottom:12px;font-size:10px;letter-spacing:.1em}
 .countdown{gap:9px}.time-unit{padding:10px 4px 11px;border-radius:3px}.time-value{font-size:35px;line-height:1.08}.time-label{margin-top:8px;font-size:10px}
 .vacation-message{min-height:80px;font-size:25px}
 .anticipation{margin-top:32px;max-width:390px;padding:0 24px}
 .anticipation .anticipation-title{margin-bottom:8px;font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.45}
 .anticipation p{font-size:17px;line-height:1.45}.inline-heart{font-size:1.6em}
 .scroll-cue{margin-top:14px;color:#fff8e9}.scroll-cue span{width:15px;height:15px;border-width:3px}
 .experiences{display:none}
 .gallery-section{padding-top:26px;padding-bottom:220px}
 .gallery-section::before{height:330px;background-size:100% 100%,780px auto;background-position:center top,center -523px}
 .gallery-section::after{height:290px;background-size:100% 100%,780px auto}
 .gallery-inner{width:calc(100% - 40px)}.gallery-ornament{font-size:30px}
 .section-title{gap:10px;margin-top:12px}.section-title>span{width:18px;flex:1 1 18px}.section-title>span::after{display:none}
 .section-title h2{flex:0 1 auto;font-size:18px;letter-spacing:.12em;white-space:nowrap}
 .gallery-intro{max-width:340px;margin:13px auto 25px;font-size:14px;line-height:1.6}
 .gallery-grid{grid-template-columns:minmax(0,1fr);gap:28px}.card-image{aspect-ratio:1.57}
 .picture-card figcaption{padding-top:11px}.picture-card h3{font-size:19px}.picture-card p{font-size:15px}
 .letter-section{margin-top:29px}.letter summary{max-width:100%;min-height:48px;padding:10px 22px;gap:11px;font-size:11px}
 .letter-body{font-size:16px;line-height:1.8}
 .lightbox{padding:65px 48px}.lightbox button{width:44px;height:44px}.lightbox-previous{left:2px}.lightbox-next{right:2px}.lightbox figcaption{font-size:15px}
}
@media(max-width:350px){.brand{font-size:31px}.motto{font-size:12px}.time-value{font-size:30px}.countdown-panel{padding-inline:11px}.section-title h2{font-size:15px}}
@supports(height:100svh){@media(max-width:640px){:root{--hero-height:max(780px,100svh)}.hero-content{padding:clamp(354px,44svh,430px) 0 48px}}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}