html,body{margin:0}
img{max-width:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* Layout: deep bordeaux ground (the Klinker, darkened to wine) inside a champagne hairline border; text column left, the facade as a framed plate right, set like an engraved invitation. Single dark look by design. */
:root{
  --ground:#111a2b;       /* midnight navy, the cool counterpart to the red Klinker */
  --ground-2:#1c2a42;
  --champagne:#d9c6a3;
  --champagne-dim:rgba(217,198,163,.55);
  --text:#efe6d8;
  --text-muted:rgba(239,230,216,.72);
  --display:"Italiana","Didot","Bodoni 72",Georgia,serif;
  --italic:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --body:"Manrope","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  background:
    radial-gradient(120% 90% at 85% 40%, var(--ground-2) 0%, transparent 60%),
    var(--ground);
  color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
  padding-block:16px;
}
.frame{
  position:relative;min-height:100%;overflow:hidden;
  border:1px solid var(--champagne-dim);
  outline:1px solid rgba(217,198,163,.18);outline-offset:-7px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:center;gap:clamp(28px,5vw,80px);
  padding-block:clamp(36px,7vh,80px);
  padding-inline:clamp(24px,6vw,96px);
}
.text{display:flex;flex-direction:column;gap:30px;min-width:0}
.eyebrow{
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--champagne);
}
.place{
  font-family:var(--display);font-weight:400;margin:0;
  font-size:clamp(40px,5.8vw,96px);line-height:.95;letter-spacing:.05em;overflow-wrap:normal;
  text-transform:uppercase;color:var(--text);
}
.rule{display:flex;align-items:center;gap:14px;width:min(280px,80%)}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--champagne-dim)}
.rule span{width:6px;height:6px;border:1px solid var(--champagne);transform:rotate(45deg)}
.soon{
  font-family:var(--italic);font-style:italic;font-weight:400;margin:0;
  font-size:clamp(30px,3.3vw,46px);line-height:1.15;color:var(--champagne);
}
.lede{font-size:15px;line-height:1.8;font-weight:300;color:var(--text-muted);max-width:42ch;margin:0}
.facts{
  list-style:none;margin:8px 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--text);
}
.facts li{display:flex;align-items:center;gap:20px}
.facts li+li::before{content:"";width:4px;height:4px;background:var(--champagne);transform:rotate(45deg)}

.plate{margin:0;position:relative;padding:12px;border:1px solid var(--champagne-dim);min-width:0;max-width:100%}
.plate::before{content:"";position:absolute;inset:5px;border:1px solid rgba(217,198,163,.22);pointer-events:none}
.stage{position:relative;width:100%;aspect-ratio:4/3.2;max-width:100%;overflow:hidden;background:var(--ground-2)}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  filter:saturate(.94) contrast(1.02);opacity:0;transform:scale(1.05);
  transition:opacity 1.8s ease, transform 8s linear}
.stage img.on{opacity:1;transform:scale(1)}
.dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:12px;z-index:2}
.dots button{width:8px;height:8px;padding:0;border:1px solid var(--champagne);background:rgba(17,26,43,.25);transform:rotate(45deg);cursor:pointer;transition:background .4s}
.dots button[aria-current="true"]{background:var(--champagne)}
.dots button:focus-visible{outline:1px solid var(--text);outline-offset:4px}
.text>*{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.text>*:nth-child(2){animation-delay:.12s}.text>*:nth-child(3){animation-delay:.24s}
.text>*:nth-child(4){animation-delay:.36s}.text>*:nth-child(5){animation-delay:.48s}.text>*:nth-child(6){animation-delay:.6s}
@keyframes rise{from{opacity:.01;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.text>*{animation:none}.stage img{transition:opacity .4s;transform:none}}

.closing{
  grid-column:1/-1;display:flex;align-items:center;gap:22px;margin-top:clamp(8px,3vh,32px);
}
.closing{justify-content:center}
.closing::before,.closing::after{display:none;content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--champagne-dim))}
.closing::after{background:linear-gradient(90deg,var(--champagne-dim),transparent)}
.mark{display:flex;flex-direction:column;align-items:center;gap:8px}
.sail{width:32px;height:32px;fill:none;stroke:var(--champagne);stroke-width:1;stroke-linejoin:round;stroke-linecap:round}
.closing p{
  margin:0;text-align:center;text-wrap:balance;max-width:44ch;
  font-family:var(--italic);font-style:italic;font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--text-muted);
}
.postcard{
  position:absolute;left:0;top:0;z-index:0;pointer-events:none;
  background:url("assets/postkarte-lokstedt.jpg") center/100% 100% no-repeat;
  opacity:.085;mix-blend-mode:screen;filter:blur(.4px);
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.frame>*:not(.postcard){position:relative;z-index:1}
@media (max-width:860px){
  .closing{gap:14px}
  .frame{grid-template-columns:minmax(0,1fr);padding-inline:clamp(18px,5vw,40px)}
  .plate{order:-1}
  .text{gap:24px}
}
@media (max-width:560px){
  .facts{flex-wrap:nowrap;gap:0 12px;font-size:clamp(9px,2.6vw,11px);letter-spacing:.2em;white-space:nowrap}
  .facts li{gap:12px}
}