:root{--ink: #28241f;--soft: #6c645b;--gold: #a98655;--cream: #f6f1e9;--paper: #fffdf9;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{min-width:320px;background:var(--cream)}body{min-width:320px;min-height:100vh;margin:0;background:radial-gradient(circle at 12% 10%,#fff,transparent 34rem),linear-gradient(145deg,#fffdf9,#f1eadf);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}.page-shell{display:grid;grid-template-rows:1fr auto;width:min(100%,1600px);min-height:100svh;margin:0 auto;padding:clamp(18px,3vw,48px)}.hero{display:grid;grid-template-columns:minmax(0,.94fr) minmax(430px,1.06fr);min-height:min(840px,calc(100svh - 125px));overflow:hidden;border:1px solid rgba(255,255,255,.8);border-radius:clamp(28px,3vw,48px);background:#fffdf9e0;box-shadow:0 30px 80px #3b2d1e24;isolation:isolate}.portrait{position:relative;order:2;min-height:100%;margin:0;overflow:hidden;animation:image-in 1.1s cubic-bezier(.2,.75,.25,1) both}.portrait:before{position:absolute;inset:0 auto 0 0;z-index:1;width:24%;background:linear-gradient(90deg,var(--paper),transparent);content:"";pointer-events:none}.portrait:after{position:absolute;inset:auto 0 0;z-index:1;height:16%;background:linear-gradient(0deg,rgba(255,253,249,.72),transparent);content:"";pointer-events:none}.portrait img{width:100%;height:100%;min-height:inherit;display:block;object-fit:cover;object-position:49% 52%}.portrait figcaption{position:absolute;z-index:2;right:26px;bottom:22px;color:#2d27209e;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase}.content{z-index:2;order:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(46px,6.5vw,105px);animation:copy-in .85s cubic-bezier(.2,.75,.25,1) both}.eyebrow{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(24px,4vh,40px);color:#896c43;font-size:.69rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase}.heart-divider{display:flex;align-items:center;gap:9px;width:106px}.heart-divider i{width:34px;height:1px;background:#896c434d}.heart-divider b{font-size:.54rem;font-style:normal}h1{max-width:680px;margin:0 0 clamp(28px,4.5vh,48px);font-family:Georgia,Times New Roman,serif;font-size:clamp(4rem,7vw,7.6rem);font-weight:400;line-height:.87;letter-spacing:-.065em}h1 em{color:var(--gold);font-size:.64em;font-weight:400}.message{max-width:540px;color:var(--soft);font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.72}.message p{margin:0 0 1.1em}.message .signature{margin:1.6em 0 0}.signature strong{color:var(--ink);font-family:Georgia,Times New Roman,serif;font-size:1.06em;font-weight:400;font-style:italic}.action{margin-top:clamp(26px,4vh,42px)}.action--mobile{display:none}.gallery-button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-width:224px;min-height:60px;padding:16px 24px 16px 28px;border:1px solid #2b2823;border-radius:999px;color:#fff;background:#2b2823;box-shadow:0 12px 28px #2b28232e;font-size:.94rem;font-weight:650;text-decoration:none;transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease}.gallery-button:hover{background:#161411;box-shadow:0 17px 36px #2b282342;transform:translateY(-2px)}.gallery-button:focus-visible{outline:3px solid rgba(169,134,85,.55);outline-offset:5px}.arrow{font-size:1.12rem;transition:transform .22s ease}.gallery-button:hover .arrow{transform:translate(2px,-2px)}.hint{margin:12px 0 0;color:#847b71;font-size:.74rem;text-align:center}.hint span{margin-right:4px;color:#896c43}footer{display:flex;justify-content:center;gap:8px;padding:24px 12px 0;color:#817970;font-size:.72rem;letter-spacing:.025em}footer p{margin:0}@keyframes copy-in{0%{opacity:0;transform:translateY(16px)}}@keyframes image-in{0%{opacity:0;transform:scale(1.02)}}@media(max-width:1080px){.page-shell{padding:24px}.hero{grid-template-columns:minmax(0,.98fr) minmax(370px,1.02fr)}.content{padding:clamp(40px,5vw,64px)}h1{font-size:clamp(3.8rem,7vw,5.6rem)}}@media(max-width:780px){.page-shell{display:block;padding:0}.hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh;border:0;border-radius:0;color:#fff;background:linear-gradient(180deg,#14120f1a,#14120f2e 28%,#14120fc7 76%,#14120fe6),url(/assets/janna-dennis-hochzeit-2026.jpg) center 44% / cover no-repeat;box-shadow:none}.portrait{display:none}.content{order:1;padding:clamp(110px,18vh,190px) clamp(24px,7vw,54px) 26px}.eyebrow{color:#f0d4aa;text-shadow:0 1px 18px rgba(0,0,0,.24)}.heart-divider i{background:#ffffff6b}h1{margin-bottom:34px;font-size:clamp(3.7rem,16vw,6rem)}h1 em{color:#e6c18d}.message{color:#ffffffe6;font-size:1rem;text-shadow:0 1px 20px rgba(0,0,0,.3)}.signature strong{color:#fff}.action--desktop{display:none}.action--mobile{z-index:2;display:block;order:3;width:100%;margin:0;padding:18px clamp(24px,7vw,54px) 48px;background:transparent}.gallery-button{width:100%}.gallery-button{border-color:#fff;color:var(--ink);background:#fffffff0;box-shadow:0 14px 34px #0000003d}.gallery-button:hover{color:var(--ink);background:#fff}.hint{color:#ffffffc7;text-shadow:0 1px 12px rgba(0,0,0,.35)}.hint span{color:#f0d4aa}footer{flex-wrap:wrap;padding:28px 22px;background:var(--cream);line-height:1.55;text-align:center}}@media(max-width:430px){h1{font-size:clamp(3.25rem,16vw,4.4rem)}footer span{display:none}footer p{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}