/*
 * Styling for the hand-written content pages (impressum.html, privacy.html).
 *
 * These are NOT generated from the Claude Design page — they are legal text
 * that has to be edited as text, and they are the only hand-maintained HTML in
 * this directory. The tokens mirror the ones the generated landing page inlines,
 * so the pages look like part of the same site; if the design's palette changes,
 * this file has to be updated by hand to match.
 */
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/geist-sans-400.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/geist-sans-500.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/geist-sans-600.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/geist-sans-700.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/geist-mono-400.woff2") format("woff2")}

:root{
  --ink:oklch(0.16 0.012 270);--ink-2:oklch(0.42 0.01 270);--ink-3:oklch(0.58 0.008 270);
  --paper:oklch(0.985 0.003 80);--paper-2:#ffffff;--line:oklch(0.91 0.005 80);
  --accent:oklch(0.52 0.14 264);
  --sans:"Geist",ui-sans-serif,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
}
[data-theme="dark"]{
  --ink:oklch(0.96 0.005 80);--ink-2:oklch(0.72 0.01 270);--ink-3:oklch(0.56 0.01 270);
  --paper:oklch(0.15 0.015 268);--paper-2:oklch(0.19 0.02 266);--line:oklch(0.28 0.02 266);
  --accent:oklch(0.72 0.14 264);
}

*{box-sizing:border-box}
body{
  margin:0;font-family:var(--sans);background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{border-bottom:1px solid var(--line);background:var(--paper-2)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 28px}
.topbar img{height:26px;display:block}
.topbar .back{font-size:14px;color:var(--ink-2)}

.wrap{max-width:760px;margin:0 auto;padding:0 28px}
main.wrap{padding-top:56px;padding-bottom:80px}

h1{font-size:34px;line-height:1.2;letter-spacing:-0.02em;margin:0 0 10px}
h2{font-size:19px;margin:40px 0 10px;letter-spacing:-0.01em}
h3{font-size:16px;margin:26px 0 6px}
p,li{color:var(--ink-2)}
ul{padding-left:20px}
li{margin:5px 0}
strong{color:var(--ink);font-weight:600}
address{font-style:normal;color:var(--ink-2)}

.updated{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin:0 0 36px}
.lead{font-size:17px;color:var(--ink-2)}

/* Placeholders the operator still has to fill in before this page is lawful.
   Deliberately loud: an unfilled Impressum is worse than no page at all. */
.todo{
  background:oklch(0.94 0.09 85);color:oklch(0.3 0.09 60);
  border-radius:5px;padding:1px 7px;font-family:var(--mono);font-size:12.5px;
  font-weight:500;white-space:nowrap;
}
[data-theme="dark"] .todo{background:oklch(0.42 0.1 75);color:oklch(0.96 0.03 85)}

.notice{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--paper-2);border-radius:8px;padding:16px 18px;margin:28px 0;
  font-size:14.5px;
}
.notice p{margin:0}
.notice p+p{margin-top:8px}

table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14.5px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--ink);font-weight:600}
td{color:var(--ink-2)}

footer{border-top:1px solid var(--line);background:var(--paper-2);padding:28px 0;font-size:13px}
footer .wrap{display:flex;gap:18px;color:var(--ink-3);font-family:var(--mono)}

@media(max-width:560px){
  main.wrap{padding-top:36px}
  h1{font-size:27px}
  table{display:block;overflow-x:auto}
}

.mono{font-family:var(--mono);font-size:0.94em;color:var(--ink)}