/* Hochzeitsseite (Gästeansicht) — von Paar-Vorschau und Gast-Perspektive gemeinsam genutzt.
   Theme-Werte kommen als Custom Properties am .wsite-Element (--w-paper, --w-accent). */
.wsite { --w-paper: var(--paper); --w-accent: var(--accent-ink); --w-ink: var(--ink); --w-muted: var(--ink-muted); --w-card: var(--sheet); --w-line: var(--line); background: var(--w-paper); color: var(--w-ink); font-family: var(--font-text); position: relative; }
.wsite.dark { --w-ink: var(--ivory); --w-muted: var(--ivory-muted); --w-card: var(--night-2); --w-line: rgba(243, 234, 214, 0.16); }
.wsite .w-hero { text-align: center; padding: 26px 22px 30px; position: relative; }
.wsite .w-hero .w-art { width: 64%; max-width: 250px; margin: 0 auto 6px; aspect-ratio: 1; object-fit: contain; }
.wsite .w-hero .w-art.tall { aspect-ratio: 0.82; width: 52%; }
.wsite .w-eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--w-muted); font-weight: 600; }
.wsite .w-names { font-family: var(--font-display); font-size: 2.6rem; line-height: 1.02; margin: 10px 0 10px; letter-spacing: -0.015em; }
.wsite .w-names em { font-style: italic; color: var(--w-accent); font-size: 0.8em; display: block; margin: 2px 0; }
.wsite .w-date { font-family: var(--font-display); font-size: 1.15rem; }
.wsite .w-place { color: var(--w-muted); font-size: var(--fs-s); margin-top: 2px; }
.wsite .w-personal { margin: 18px auto 0; max-width: 300px; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--w-accent); }
.wsite .w-cta { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wsite .w-cta .btn { background: var(--w-accent); color: var(--sheet); min-width: 220px; }
.wsite.dark .w-cta .btn { background: var(--night-accent); color: var(--night); }
.wsite .w-cta small { color: var(--w-muted); font-size: var(--fs-xs); }
.wsite .w-orn { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--accent-2); margin: 4px 0; }
.wsite .w-orn::before, .wsite .w-orn::after { content: ''; height: 1px; width: 48px; background: currentColor; opacity: 0.7; }
.wsite .w-sec { padding: 26px 22px; border-top: 1px solid var(--w-line); }
.wsite .w-sec h2 { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.15; margin: 6px 0 12px; }
.wsite .w-sec p { line-height: 1.6; color: var(--w-ink); }
.wsite .w-sec .w-k { display: flex; gap: 8px; align-items: center; color: var(--w-accent); }
.wsite .w-tl { list-style: none; margin: 4px 0 0; padding: 0; position: relative; }
.wsite .w-tl::before { content: ''; position: absolute; left: 52px; top: 8px; bottom: 8px; width: 1px; background: var(--w-line); }
.wsite .w-tl li { display: grid; grid-template-columns: 44px 18px 1fr; gap: 0 8px; align-items: start; padding: 7px 0; }
.wsite .w-tl .t { font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--fs-s); padding-top: 1px; }
.wsite .w-tl .d { width: 9px; height: 9px; border-radius: 50%; background: var(--w-paper); border: 2px solid var(--w-accent); margin: 5px 0 0 4px; position: relative; z-index: 1; }
.wsite .w-tl .now .d { background: var(--w-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-accent) 22%, transparent); }
.wsite .w-tl b { font-weight: 600; display: block; line-height: 1.3; }
.wsite .w-tl span { color: var(--w-muted); font-size: var(--fs-s); }
.wsite .w-map { margin-top: 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--w-line); background: var(--paper-2); position: relative; }
.wsite .w-map > svg { display: block; width: 100%; height: auto; }
.wsite .w-map .w-map-cta { position: absolute; right: 10px; bottom: 10px; }
.wsite .w-photo { margin-top: 14px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; }
.wsite .w-photo img { width: 100%; height: 100%; object-fit: cover; }
.wsite details { border-top: 1px solid var(--w-line); }
.wsite details:last-child { border-bottom: 1px solid var(--w-line); }
.wsite summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 0; font-weight: 600; cursor: pointer; min-height: 48px; }
.wsite summary::-webkit-details-marker { display: none; }
.wsite summary .icon { transition: transform 0.2s; color: var(--w-muted); }
.wsite details[open] summary .icon { transform: rotate(180deg); }
.wsite details p { padding: 0 0 14px; color: var(--w-muted); }
.wsite .w-gift { display: flex; gap: 12px; align-items: flex-start; background: var(--w-card); border: 1px solid var(--w-line); border-radius: 14px; padding: 14px; margin-top: 12px; }
.wsite .w-foot { text-align: center; padding: 26px 20px 110px; color: var(--w-muted); font-size: var(--fs-xs); border-top: 1px solid var(--w-line); }
.wsite .w-foot .wm { font-family: var(--font-display); font-size: 1rem; color: var(--w-ink); }
.wsite .w-foot .wm em { color: var(--accent); font-style: normal; }
.wsite .w-sticky { position: sticky; bottom: 0; padding: 12px 16px 14px; background: linear-gradient(to top, var(--w-paper) 70%, transparent); display: flex; gap: 10px; z-index: 2; }
.wsite .w-sticky .btn { flex: 1; background: var(--w-accent); color: var(--sheet); }
.wsite.dark .w-sticky .btn { background: var(--night-accent); color: var(--night); }
.wsite .w-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--success-wash); color: var(--success); border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; padding: 5px 11px; }
.wsite .hl { outline: 2px dashed var(--accent); outline-offset: -6px; border-radius: 10px; animation: hl 1.4s ease; }
@keyframes hl { 0% { background: var(--accent-wash); } 100% { background: transparent; } }
.wsite .w-missing { border: 1.5px dashed var(--line-strong); border-radius: 12px; padding: 14px; color: var(--ink-muted); font-size: var(--fs-s); display: flex; gap: 10px; align-items: center; }