/* v1 — 2026-05-07 — Shared Legal-Page Styling für Dolce Freddo Cream-Espresso-Gold-Look (matched Brand-DNA), Fraunces + Inter Tight, lesefokussiertes Long-Form-Layout. Pattern adaptiert von Calice. ========================================================== */ /* Fonts kommen via Google Fonts CSS-Link im der Legal-Pages. Keine lokalen Font-Files — synchron mit index.html. */ :root { --bg: #F4ECDB; /* cream */ --text: #0B0807; /* espresso */ --text-mut: #574328; /* warm-brown */ --text-dim: #8A7A66; /* faded brown */ --gold: #B8945A; /* gold */ --line: rgba(11, 8, 7, 0.10); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter Tight', system-ui, sans-serif; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--gold); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } a:hover { border-bottom-color: var(--gold); } /* Mini-Header */ .legal-header { border-bottom: 1px solid var(--line); padding: 24px 32px; } .legal-header__inner { max-width: 920px; margin-inline: auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; } .legal-header img { height: 40px; opacity: 0.94; } .legal-header a { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mut); } .legal-header a:hover { color: var(--gold); } /* Main */ .legal-main { max-width: 720px; margin: clamp(48px, 9vw, 96px) auto; padding: 0 24px; } .legal-main h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 350; font-size: clamp(34px, 5vw, 56px); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 12px; } .legal-main h1 em { font-style: italic; color: var(--gold); } .legal-main .lead { color: var(--text-mut); font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 56px; } .legal-main h2, .legal-main h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; letter-spacing: -0.005em; color: var(--text); line-height: 1.25; } .legal-main h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 56px 0 14px; } .legal-main h3 { font-size: clamp(18px, 2vw, 22px); margin: 36px 0 10px; } .legal-main h4 { font-family: 'Inter Tight', system-ui, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; margin: 28px 0 8px; } .legal-main p { color: var(--text-mut); font-size: 15px; line-height: 1.75; margin: 0 0 16px; } .legal-main p strong { color: var(--text); font-weight: 500; } .legal-main ul, .legal-main ol { color: var(--text-mut); font-size: 15px; line-height: 1.75; padding-left: 22px; margin: 0 0 18px; } .legal-main li { margin-bottom: 6px; } .legal-main hr { border: none; height: 1px; background: var(--line); margin: 56px 0; } /* Mini-Footer */ .legal-footer { border-top: 1px solid var(--line); padding: 32px 24px; text-align: center; font-size: 12px; color: var(--text-dim); letter-spacing: 0.05em; } .legal-footer .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin: 0 8px 1px; vertical-align: middle; } .legal-footer a { color: var(--gold); } /* 404 spezifisch */ .legal-404 { text-align: center; padding: clamp(60px, 12vw, 140px) 24px; } .legal-404 .eyebrow { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .legal-404 h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 350; font-size: clamp(48px, 9vw, 96px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 24px; } .legal-404 h1 em { font-style: italic; color: var(--gold); } .legal-404 p { color: var(--text-mut); font-size: 17px; max-width: 50ch; margin: 0 auto 36px; } .legal-404 .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--gold); color: #000; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: none; transition: transform 0.2s ease, background 0.2s ease; } .legal-404 .btn:hover { background: #e8c777; transform: translateY(-2px); }