/* Mel's Foto Studio — Rechtsseiten (teilt das Design der Startseite) */
:root {
  --bg: #FAF8F5;
  --surface: #F3EEE7;
  --ink: #2A2623;
  --ink-soft: #6B645D;
  --rule: #D9D2C8;
  --accent: #C9A9A0;
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 300; -webkit-font-smoothing: antialiased; line-height: 1.7; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.serif { font-family: var(--serif); font-weight: 300; letter-spacing: -0.01em; }

.wrap { max-width: 820px; margin: 0 auto; padding: 0 24px; }

/* ---------- NAV ---------- */
header.nav {
  position: sticky; top: 0; z-index: 50;
  padding: 18px 48px;
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
}
.logo img { height: 48px; width: auto; display: block; }
.nav-back { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; transition: color .3s; }
.nav-back:hover { color: var(--accent); }
@media (max-width: 860px) { header.nav { padding: 16px 24px; } .logo img { height: 40px; } }

/* ---------- HEADER ---------- */
.page-head { padding: 96px 0 56px; border-bottom: 1px solid var(--rule); }
.page-head .label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); font-weight: 400; }
.page-head h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 7vw, 76px); line-height: 1.0; letter-spacing: -0.02em; margin-top: 20px; }
.page-head .updated { font-size: 13px; color: var(--ink-soft); margin-top: 24px; }

/* ---------- CONTENT ---------- */
.legal { padding: 56px 0 100px; }
.legal section { margin-bottom: 48px; }
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; letter-spacing: -0.01em; margin-bottom: 18px; }
.legal h3 { font-size: 15px; font-weight: 500; letter-spacing: 0.02em; margin: 28px 0 10px; }
.legal p { font-size: 16px; color: var(--ink); margin-bottom: 16px; max-width: 68ch; }
.legal p.muted { color: var(--ink-soft); font-size: 14px; }
.legal ul { list-style: none; margin: 0 0 16px; }
.legal ul li { font-size: 16px; padding-left: 20px; position: relative; margin-bottom: 8px; }
.legal ul li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }
.legal a.inline { color: var(--ink); border-bottom: 1px solid var(--accent); transition: color .3s; }
.legal a.inline:hover { color: var(--accent); }

/* placeholder chips the owner must fill in */
.fill { background: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 3px; padding: 1px 7px; font-weight: 400; color: var(--ink); white-space: nowrap; }

.note { background: var(--surface); border-left: 2px solid var(--accent); padding: 18px 22px; margin: 32px 0; font-size: 14px; color: var(--ink-soft); }
.note strong { color: var(--ink); font-weight: 500; }

.addr { font-style: normal; font-size: 16px; line-height: 1.9; }

/* ---------- FOOTER ---------- */
footer.legal-foot { border-top: 1px solid var(--rule); padding: 40px 0; }
footer.legal-foot .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
footer.legal-foot a, footer.legal-foot span { font-size: 12px; letter-spacing: 0.08em; color: var(--ink-soft); }
footer.legal-foot nav { display: flex; gap: 24px; }
footer.legal-foot nav a:hover { color: var(--accent); }