.demo-invitation { --demo-ink:#302e32; --demo-muted:#655b55; --demo-accent:#805b18; background:linear-gradient(180deg,#ffffff 0%,#fffaf0 38%,#f9eddd 76%,#f4dfd0 100%); color:var(--demo-ink); padding-block:var(--space-9) var(--space-8); scroll-margin-top:88px; }
.demo-invitation-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:start; gap:var(--space-7) var(--space-9); }
.demo-invitation .demo-invitation-copy h2 { font-family:var(--font-display); font-size:clamp(2rem,3.2vw,3rem); font-weight:600; line-height:1.13; letter-spacing:-.03em; margin:0 0 var(--space-5); color:var(--demo-ink); }
.demo-invitation-copy { max-width:580px; }
.demo-invitation-copy h2 span { color:var(--demo-accent); }
.demo-invitation .demo-invitation-copy>p { max-width:48ch; font-size:1rem; line-height:1.7; color:var(--demo-muted); margin:0 0 var(--space-6); }
.demo-invitation .demo-invitation-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:var(--space-5); min-height:var(--touch-target); padding:var(--space-4) var(--space-5); border-radius:var(--radius-control); background:var(--gold); color:#1d1d1f; font-weight:600; text-decoration:none; line-height:1.4; }
.demo-invitation svg { width:20px; height:20px; flex:none; }
.demo-invitation .demo-invitation-copy>.demo-invitation-note { margin:var(--space-4) 0 0; font-size:.8125rem; }
.demo-invitation-products { grid-column:1/-1; grid-row:2; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-6); padding-top:var(--space-6); border-top:1px solid #ddcbb5; }
.demo-invitation-products>a { display:flex; align-items:flex-start; gap:var(--space-3); min-height:var(--touch-target); color:var(--demo-ink); text-decoration:none; }
.demo-invitation-products img { margin-top:var(--space-1); flex:none; }
.demo-invitation-products strong { display:block; font-size:.9375rem; font-weight:600; margin-bottom:var(--space-1); }
.demo-invitation-products a>span>span { display:block; color:var(--demo-muted); font-size:.875rem; line-height:1.5; }
.demo-invitation-person { grid-column:2; grid-row:1; padding:var(--space-2) 0 var(--space-2) var(--space-7); border-left:1px solid #ddcbb5; }
.demo-invitation-profile { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-5); }
.demo-invitation-profile img { display:block; width:80px; height:80px; object-fit:cover; border-radius:50%; flex:none; }
.demo-invitation-profile strong { display:block; color:var(--demo-ink); font-size:.9375rem; }
.demo-invitation-profile span { display:block; color:var(--demo-muted); font-size:.75rem; margin-top:var(--space-1); }
.demo-invitation .demo-invitation-person h3 { font:600 1.25rem/1.3 var(--font-display); color:var(--demo-ink); margin:0 0 var(--space-3); }
.demo-invitation .demo-invitation-person p { color:var(--demo-muted); font-size:.9375rem; line-height:1.6; margin:0 0 var(--space-5); }
.demo-invitation-contact { border-top:1px solid #e3d4bc; padding-top:var(--space-4); display:grid; gap:var(--space-2); }
.demo-invitation-contact a { display:flex; align-items:center; gap:var(--space-2); min-height:var(--touch-target); color:var(--demo-ink); text-decoration:none; font-size:.9375rem; overflow-wrap:anywhere; }
.demo-invitation-contact svg { color:var(--demo-accent); width:16px; height:16px; }
.demo-invitation a:focus-visible { outline:2px solid var(--demo-accent); outline-offset:var(--space-1); }
.demo-invitation a:active { transform:scale(.97); }
@media(hover:hover) and (pointer:fine) { .demo-invitation-products a:hover strong,.demo-invitation-contact a:hover { color:var(--demo-accent); } .demo-invitation-cta:hover { filter:brightness(.95); } }
@media(max-width:1100px) { .demo-invitation-grid { gap:var(--space-7); grid-template-columns:1.2fr 1fr; } .demo-invitation-person { padding-left:var(--space-6); } .demo-invitation-products { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .demo-invitation { padding-block:var(--space-7); } .demo-invitation-grid { grid-template-columns:minmax(0,1fr); gap:var(--space-7); } .demo-invitation-person { grid-column:1; grid-row:2; padding:var(--space-6) 0 0; border-left:0; border-top:1px solid #ddcbb5; } .demo-invitation-products { grid-row:3; grid-template-columns:minmax(0,1fr); gap:var(--space-5); } .demo-invitation-profile img { width:72px; height:72px; } }
@media(prefers-reduced-motion:reduce) { .demo-invitation a:active { transform:none; } }

/* The warm contact canvas becomes the illustration's evening sky. */
body:has(.demo-invitation) .wiesn-footer .night-landscape { background:#f4dfd0; }
body:has(.demo-invitation) .wiesn-footer .night-landscape::before { height:38%; background:linear-gradient(180deg,#f4dfd0 0%,rgba(244,223,208,.9) 20%,rgba(244,223,208,0) 100%); }
.demo-invitation ::selection { background:#fdc525; color:#302e32; }

/* A continuous evening canvas in the dark theme. */
[data-theme=dark] .demo-invitation { --demo-ink:var(--ink); --demo-muted:var(--muted); --demo-accent:var(--accent-text); background:linear-gradient(180deg,var(--canvas),#09131d); }
[data-theme=dark] .demo-invitation-person,[data-theme=dark] .demo-invitation-products,[data-theme=dark] .demo-invitation-contact { border-color:var(--line); }
[data-theme=dark] body:has(.demo-invitation) .wiesn-footer .night-landscape { background:#09131d; }
[data-theme=dark] body:has(.demo-invitation) .wiesn-footer .night-landscape::before { background:linear-gradient(180deg,#09131d 0%,rgba(9,19,29,.9) 20%,rgba(9,19,29,0) 100%); }