/* ============================================================ GoByrdie · Rechtsseiten (Impressum & Datenschutz) Ergänzt styles.css — nur Layout/Typo für Rechtstexte. Reihenfolge im : styles.css -> legal.css ============================================================ */ /* Fallback-Tokens, falls legal.css ohne styles.css geladen wird */ :root { --ivory: #F8FFD1; --olive: #96A139; --lime: #ABC130; --grass: #6C7D47; --twilight: #464259; --deep-night: #1F1D28; --deep-night-2: #16151d; --rule: rgba(248,255,209,0.18); --rule-soft: rgba(248,255,209,0.08); --display: "Cormorant Garamond", "Times New Roman", serif; --body: "Manrope", system-ui, -apple-system, "Helvetica Neue", sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; } /* Grund-Setup, falls styles.css fehlt (schadet sonst nicht) */ body.legal { background: var(--deep-night); color: var(--ivory); font-family: var(--body); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ---------- Bearbeitungshinweis (vor Veröffentlichung entfernen) ---------- */ .edit-banner { position: relative; z-index: 95; background: repeating-linear-gradient(-45deg, rgba(171,193,48,0.14) 0 14px, rgba(171,193,48,0.06) 14px 28px); border-bottom: 1px solid var(--lime); color: var(--ivory); font-family: var(--mono); font-size: 12px; line-height: 1.6; padding: 12px 24px; text-align: center; } .edit-banner strong { color: var(--lime); letter-spacing: 0.08em; text-transform: uppercase; } /* ---------- Legal Nav (schlicht, gleiche Sprache wie Haupt-Nav) ---------- */ .legal-nav { position: sticky; top: 0; z-index: 90; backdrop-filter: blur(14px); background: rgba(31,29,40,0.82); border-bottom: 1px solid rgba(248,255,209,0.08); } .legal-nav .inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 40px; gap: 24px; } .legal-nav .brand { display: flex; align-items: center; gap: 12px; } .legal-nav .brand svg, .legal-nav .brand img { width: 26px; height: 26px; object-fit: contain; } .legal-nav .brand .wordmark { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: 0.04em; } .legal-nav .links { display: flex; align-items: center; gap: 26px; font-size: 13px; letter-spacing: 0.04em; font-weight: 500; } .legal-nav .links a { opacity: 0.72; transition: opacity .2s, color .2s; } .legal-nav .links a:hover { opacity: 1; color: var(--olive); } .legal-nav .links a.active { opacity: 1; color: var(--olive); } /* ---------- Header ---------- */ .legal-hero { max-width: 1080px; margin: 0 auto; padding: 90px 40px 40px; border-bottom: 1px solid var(--rule); } .legal-hero .kicker { font-family: var(--body); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive); } .legal-hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(52px, 9vw, 108px); line-height: 0.92; letter-spacing: -0.01em; margin: 18px 0 0; } .legal-hero .meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: rgba(248,255,209,0.5); margin-top: 20px; } /* ---------- Body ---------- */ .legal-body { max-width: 1080px; margin: 0 auto; padding: 56px 40px 120px; display: grid; grid-template-columns: 1fr; } .legal-prose { max-width: 760px; } .legal-prose section { padding: 34px 0; border-bottom: 1px solid var(--rule-soft); } .legal-prose section:first-of-type { padding-top: 6px; } .legal-prose section:last-of-type { border-bottom: 0; } .legal-prose h2 { font-family: var(--display); font-weight: 500; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 18px; display: flex; align-items: baseline; gap: 14px; } .legal-prose h2 .num { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--olive); letter-spacing: 0.06em; flex-shrink: 0; } .legal-prose h3 { font-family: var(--body); font-weight: 600; font-size: 16px; letter-spacing: 0.01em; color: var(--ivory); margin: 26px 0 8px; } .legal-prose p, .legal-prose li { font-size: 15.5px; line-height: 1.75; color: rgba(248,255,209,0.82); margin: 0 0 14px; } .legal-prose ul { margin: 0 0 14px; padding-left: 0; list-style: none; } .legal-prose ul li { position: relative; padding-left: 22px; margin-bottom: 8px; } .legal-prose ul li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--olive); } .legal-prose a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(171,193,48,0.4); } .legal-prose a:hover { text-decoration-color: var(--lime); } .legal-prose strong { color: var(--ivory); font-weight: 600; } /* Adressblock / Kontaktzeilen */ .legal-prose .addr { font-family: var(--body); font-size: 15.5px; line-height: 1.9; color: var(--ivory); font-style: normal; margin: 4px 0 16px; } /* Platzhalter, die noch ausgefüllt werden müssen */ .ph { display: inline-block; background: rgba(171,193,48,0.12); border: 1px dashed var(--lime); color: var(--lime); padding: 1px 8px; border-radius: 6px; font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.02em; white-space: nowrap; } /* Info-Callout (z. B. Datenschutz-Hinweise) */ .callout { background: var(--deep-night-2); border: 1px solid var(--rule); border-left: 3px solid var(--olive); border-radius: 10px; padding: 18px 20px; margin: 18px 0; } .callout p { margin: 0; font-size: 14.5px; color: rgba(248,255,209,0.78); } .callout .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive); display: block; margin-bottom: 8px; } /* ---------- Footer ---------- */ .legal-foot { border-top: 1px solid var(--rule); max-width: 1080px; margin: 0 auto; padding: 40px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(248,255,209,0.5); } .legal-foot .fl a { color: rgba(248,255,209,0.7); margin-left: 20px; letter-spacing: 0.06em; } .legal-foot .fl a:hover { color: var(--olive); } @media (max-width: 640px) { .legal-nav .inner, .legal-hero, .legal-body, .legal-foot { padding-left: 22px; padding-right: 22px; } .legal-nav .links { gap: 16px; font-size: 12px; } .legal-hero { padding-top: 70px; } .legal-prose h2 { flex-direction: column; gap: 4px; } }