/* ═══════════════════════════════════════════════════════════════════════════ bytefret — styles/legal.css ─────────────────────────────────────────────────────────────────────────── Legal-Pages-only Stiles (imprint.html + privacy.html): - .legal-body Sprach-Toggle (DE/EN via html[lang]) - .legal-area + .legal-page (Card-Layout) - .legal-body Typografie (h2/h3/h4, p, ul, code, strong, a) - .legal-meta + .legal-card (Imprint-Section) - .legal-footer Selektoren sind ALLE legal-page-spezifisch (.legal-* Prefix oder .legal-page-Scope). Pre-Audit (Phase 1) bestätigt: keine dieser Klassen taucht in index.html DOM auf — safe für globales Loading. Phase 9 (defer): per-page-Subset könnte legal.css NUR auf legal-pages laden + sheet/footer-cockpit/playback raus. Aktuell: alle 7 Files auf allen 3 Pages (Plan-Default). Dependencies: base.css (var(--…)), topbar.css (button defaults). ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Legal pages (imprint, privacy) ──────────────────────────────────────── */ /* Sprach-Toggle: nur der Block mit lang-Attribut, das zu passt, wird gezeigt. Spart hunderte data-i18n-Keys für Legal-Body. */ .legal-body { display: none; } html[lang="de"] .legal-body[lang="de"] { display: block; } html[lang="en"] .legal-body[lang="en"] { display: block; } /* Fallback: wenn html lang weder de noch en, zeig EN */ html:not([lang="de"]):not([lang="en"]) .legal-body[lang="en"] { display: block; } /* Brand als Link zurück zur App */ .brand-link { text-decoration: none; color: inherit; display: flex; align-items: center; gap: .8rem; border-radius: var(--radius); padding: .25rem .35rem; margin: -.25rem -.35rem; transition: background .15s var(--ease); } .brand-link:hover { background: var(--secondary-soft); } .brand-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Legal area */ .legal-area { flex: 1; display: flex; justify-content: center; padding: 2.5rem 1.5rem 4rem; } /* Legal-Page reuses the sheet-card visual but with reading-friendly typography */ .legal-page { width: 100%; max-width: 760px; padding: 2.5rem 2.5rem 2rem; background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-page-2) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: .95rem; line-height: 1.65; color: var(--text); position: relative; } .legal-page::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-glow), transparent); } .legal-body h2 { margin: 0 0 .25rem; font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; color: var(--text); } .legal-body h3 { margin: 2rem 0 .75rem; font-size: 1.15rem; font-weight: 600; letter-spacing: -.005em; color: var(--accent); border-bottom: 1px solid var(--border-soft); padding-bottom: .35rem; } .legal-body h4 { margin: 1.5rem 0 .5rem; font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); } .legal-body p, .legal-body li { margin: 0 0 .9rem; color: var(--text); } .legal-body ul { margin: 0 0 1rem; padding-left: 1.4rem; } .legal-body li { margin-bottom: .35rem; } .legal-body a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .legal-body a:hover { color: var(--accent-hover); } .legal-body code { background: var(--bg-sunken); border: 1px solid var(--border-soft); padding: 1px 6px; border-radius: 3px; color: var(--accent); font-size: .82em; font-family: "JetBrains Mono", "Fira Code", monospace; } .legal-body strong { font-weight: 600; } .legal-meta { font-size: .75rem; color: var(--text-subtle); letter-spacing: .04em; text-transform: uppercase; margin: .25rem 0 1.5rem !important; } /* Address-card */ .legal-card { display: block; margin: 1.25rem 0 1.5rem; padding: 1.1rem 1.25rem; background: var(--bg-sunken); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: var(--radius); font-style: normal; } .legal-card-eyebrow { margin: 0 0 .35rem !important; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); font-weight: 600; } .legal-card-name { margin: 0 0 .35rem !important; font-size: 1.05rem; font-weight: 600; color: var(--text); } .legal-card-address { display: block; font-style: normal; margin: 0 0 .35rem; color: var(--text-muted); line-height: 1.55; } .legal-card-contact { margin: 0 !important; font-size: .9rem; } /* Legal footer (different from main editor footer) */ .legal-footer { text-align: center; padding: 1.25rem 1rem 1.75rem; color: var(--text-muted); font-size: .78rem; border-top: 1px solid var(--border-soft); background: var(--bg-footer); } .legal-footer a { color: var(--text-muted); text-decoration: none; transition: color .15s var(--ease); } .legal-footer a:hover { color: var(--accent); } .legal-footer span { margin: 0 .35rem; color: var(--text-subtle); } /* (Pre-Refactor existierten hier `.legal-links`-Selektoren für die alte Footer-Info-Zeile. Legal-Links sitzen jetzt direkt sichtbar in der Cockpit-Meta-Sektion (`.cockpit-meta .meta-link` / `.link-btn` / `.meta-sep`, weiter unten definiert) — Pflicht-Links nach §5 TMG müssen unmittelbar erreichbar sein, deswegen kein verstecktes ⋯-Menü.) */