/* * legal.css — shared stylesheet for /impressum, /datenschutz, /agb, /widerruf * * Loads after tokens.css. Light reading canvas (white bg, navy text, blue accents). * Per /autoplan Phase 2 design review (dual-voice consensus): light canvas, NOT * dark slabs. Main site hero is dark, but its READING surface is white — legal * pages mirror that. * * Voice split: * → Impressum, Datenschutz (Jiggi summary at top) * → AGB, Widerruf (formal opener, §-numbering) */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Anchor offset so #target landings clear the fixed top-nav (~76px). */ scroll-padding-top: calc(76px + 1rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: 'Poppins', sans-serif; font-size: 17px; line-height: 1.7; color: var(--navy); background: var(--white); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Long German compounds (Auftragsverarbeitungsvertrag, Streitbeilegungsverordnung) * must not break narrow viewports. */ word-break: break-word; hyphens: auto; } /* The sitewide top-nav is position:fixed, so legal-page content needs top * padding to clear it. On home, the hero section's clamp padding handles this. * Scoped to data-legal-mode so home isn't affected. */ body[data-legal-mode] { padding-top: 76px; } /* skip-link, top-nav, and legal-footer rules moved to /components.css * (sitewide canonical chrome, identical on home + 4 legal pages). */ /* === Main column ============================================================ */ main { max-width: 720px; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3rem) clamp(1.25rem, 4vw, 1.5rem) 4rem; } /* Back-to-home link above H1 — preserves the existing impressum.html "← Zurück" * pattern but in brand colors and mid-flow rather than fixed. */ .back-link { display: inline-block; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; /* v0.10.25 (B3): --blue (#467ff7) on white is ~3.7:1, fails AA. */ color: var(--blue-text); text-decoration: none; margin-bottom: 1.5rem; } .back-link:hover { text-decoration: underline; } h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 700; letter-spacing: -0.01em; color: var(--navy); margin-bottom: 0.5rem; } /* Top stamp = currency check ("is this current?"). Lawyers + compliance users * want to see this before reading. */ .meta-stamp { font-size: 0.85rem; /* v0.10.25 (B3): --gray-light (#9ca3af) on white is ~2.8:1, fails AA. --gray (#6b7280) is ~4.83:1, passes AA. */ color: var(--gray); margin-bottom: 2rem; } /* === Summary block (variant A: Jiggi voice; variant B: formal opener) ======= * Same chrome on all 4 pages so the visual rhythm stays parallel. * Per /autoplan Phase 2 design review: --off-white card with eyebrow, max * 3 sentences / 280 chars body. Variant A says KURZ GESAGT, variant B says * WORUM ES HIER GEHT. */ .summary-block { background: var(--off-white); border-radius: 12px; padding: 1.5rem clamp(1.25rem, 3vw, 1.75rem); margin: 0 0 2.5rem; } .summary-block .eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; /* v0.10.25 (B3): --blue on --off-white is ~3.6:1, fails AA. */ color: var(--blue-text); margin-bottom: 0.5rem; } .summary-block p { font-size: 1.05rem; line-height: 1.6; color: var(--navy); } /* === ToC ==================================================================== *

collapsed mobile, open desktop. * Per /autoplan Phase 2 design review: German legal terms compound fast — must * NOT explode on 320px. */ .toc { background: transparent; border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 2.5rem; } .toc summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--navy); letter-spacing: 0.02em; list-style: none; user-select: none; } .toc summary::-webkit-details-marker { display: none; } .toc summary::after { content: ' ▾'; color: var(--gray); font-size: 0.85rem; } .toc[open] summary::after { content: ' ▴'; } .toc ol { list-style: none; margin-top: 1rem; padding-left: 0; display: grid; gap: 0.5rem; } .toc ol a { display: block; padding: 0.4rem 0; font-size: 0.95rem; color: var(--navy); text-decoration: none; overflow-wrap: anywhere; transition: color 0.15s; } .toc ol a:hover { color: var(--blue-text); text-decoration: underline; } /* Monospace section number prefix — ties to existing .no1 pattern in main site. */ .toc ol .num, section h2 .num { display: inline-block; min-width: 2.25rem; margin-right: 0.5rem; font-variant-numeric: tabular-nums; font-weight: 400; color: var(--gray); } @media (min-width: 641px) { .toc summary { display: none; } .toc { padding: 1.25rem 1.5rem; } } /* === Numbered sections ====================================================== */ section { margin-top: 2.5rem; padding-top: 1rem; } section h2 { font-size: clamp(1.15rem, 3vw, 1.4rem); font-weight: 600; letter-spacing: -0.005em; color: var(--navy); margin-bottom: 0.75rem; /* Anchor landings clear the fixed top-nav (~76px). */ scroll-margin-top: calc(76px + 1rem); } /* :target highlight — when a deep link lands on a section, the heading flashes * blue so the user knows "this is what you asked for". Per /autoplan Phase 2. */ section h2:target { background: var(--blue-light); border-radius: 6px; padding: 0.25rem 0.5rem; margin-left: -0.5rem; } section p, section li { margin-bottom: 0.85rem; font-size: 1rem; color: var(--navy); } section ul, section ol { padding-left: 1.5rem; margin-bottom: 1rem; } section li { margin-bottom: 0.4rem; } section h3 { font-size: 1.05rem; font-weight: 600; color: var(--navy); margin-top: 1.25rem; margin-bottom: 0.5rem; } section strong { font-weight: 600; } /* === Inline links (body) ==================================================== * UNDERLINED by default (color alone fails cognitive a11y per /autoplan Phase 2). * Different token on dark surfaces (none yet on legal pages, but available). */ section a, .summary-block a, .legal-footer-meta a { color: var(--link-on-light); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } section a:hover { text-decoration-thickness: 2px; color: var(--blue-hover); } /* === Between-section back-to-top link ====================================== * Per /autoplan Phase 2: NOT a fixed FAB (would collide with chat-bar on home; * legal pages drop chat-bar but consistency wins). Plain text link after each * section's last paragraph. */ .back-to-top { display: inline-block; margin-top: 1.5rem; font-size: 0.85rem; color: var(--gray); text-decoration: none; } .back-to-top:hover { color: var(--blue-text); text-decoration: underline; } /* === Bottom stamp ========================================================== */ .meta-stamp--bottom { margin-top: 4rem; margin-bottom: 0; padding-top: 2rem; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--gray); } /* legal-footer + children rules moved to /components.css. */ /* === Focus states (a11y) =================================================== * Per /autoplan Phase 2: main site has no global :focus-visible. Adding one here * for legal pages — keyboard nav is the primary interaction for many users. */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; } /* === Formal-mode override (AGB, Widerruf) ================================== * Tighter contract feel: §-numbering instead of "01.", tighter line-height, * no blue accent bar. Per /autoplan Phase 3 (Claude C13). */ body[data-legal-mode="formal"] section h2 .num { /* §1 marker is part of the heading text, not a numeric prefix block. */ display: none; } body[data-legal-mode="formal"] section h2 { font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 0.4rem; } body[data-legal-mode="formal"] { line-height: 1.55; } body[data-legal-mode="formal"] section p, body[data-legal-mode="formal"] section li { font-size: 0.95rem; line-height: 1.55; } body[data-legal-mode="formal"] .summary-block .eyebrow { /* Slightly less playful for binding pages. */ letter-spacing: 0.18em; } /* === Print ================================================================= * Legal pages occasionally get printed (lawyer review, customer dispute). * Print stylesheet is small but real. */ @media print { nav.top-nav, .legal-footer, .skip-link, .back-link, .toc summary, .back-to-top { display: none; } body { color: #000; background: #fff; font-size: 11pt; padding-top: 0; } main { max-width: 100%; padding: 0; } a { color: #000; text-decoration: underline; } section h2 { page-break-after: avoid; } }