/* Gemeinsames Aussehen für Impressum und Datenschutz */
:root { color-scheme: dark; --bg: #15111f; --line: #342b4a; --cream: #f6efdf; --muted: #a69cbc; --cyan: #41dcf0; --magenta: #f2459b; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--cream); font: 1.0625rem/1.65 "Hanken Grotesk", system-ui, sans-serif; }
.wrap { max-width: 760px; margin: 0 auto; padding: 32px max(20px, env(safe-area-inset-left, 0px)) 80px; }
.back { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); text-decoration: none; font-weight: 500; }
.back img { width: 32px; height: 32px; border-radius: 50%; }
.back:hover { color: var(--cream); }
h1 { font-family: "Bungee", "Arial Black", sans-serif; font-weight: 400; font-size: clamp(2rem, 7vw, 3rem); line-height: 1; margin: 48px 0 32px; text-transform: uppercase; }
h2 { font-family: "Bungee", "Arial Black", sans-serif; font-weight: 400; font-size: 1.15rem; margin: 40px 0 10px; color: var(--cyan); }
p, li { color: var(--muted); }
p strong, li strong { color: var(--cream); font-weight: 700; }
a { color: var(--cream); }
a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.todo { background: rgba(242, 69, 155, .18); color: var(--cream); border-bottom: 2px solid var(--magenta); padding: 0 4px; }
.hint { border-left: 3px solid var(--magenta); padding: 12px 16px; background: #1f1930; border-radius: 0 10px 10px 0; color: var(--muted); font-size: .95rem; }
footer { border-top: 1px solid var(--line); margin-top: 64px; padding-top: 20px; color: var(--muted); font-size: .9rem; }
footer a { color: var(--muted); }