/* ============================================================
   Gemeinsames Blatt fuer Impressum und Datenschutz.
   Gleiche Farbmarken und Schriftstufen wie die Startseite, aber ohne
   Bewegung — hier will niemand scrollen, hier will jemand nachlesen.
   ============================================================ */
:root{
  --ink-900:#0B0C0B; --paper-000:#FAFAF8; --paper-100:#F0F0EC;
  --stone-400:#A8ACA2; --stone-600:#55584F;
  --accent-500:#4C9A4A; --accent-600:#3D7C3B; --accent-700:#2E5E2D;

  --color-bg:var(--paper-000);
  --color-bg-alt:var(--paper-100);
  --color-fg:var(--ink-900);
  --color-fg-muted:var(--stone-600);
  --color-line:rgba(11,12,11,.14);
  --color-accent-text:var(--accent-600);

  --step--1:clamp(0.83rem,0.79rem + 0.20vw,0.94rem);
  --step-0:clamp(1.00rem,0.93rem + 0.33vw,1.13rem);
  --step-1:clamp(1.20rem,1.09rem + 0.54vw,1.42rem);
  --step-3:clamp(1.73rem,1.47rem + 1.29vw,2.20rem);
  --step-5:clamp(2.49rem,1.94rem + 2.71vw,3.40rem);

  --space-3xs:.3rem; --space-2xs:.55rem; --space-xs:.85rem;
  --space-s:1.1rem; --space-m:1.7rem; --space-l:2.3rem;
  --space-xl:3.4rem; --space-2xl:4.6rem;
  --radius-md:12px; --radius-full:999px;
}
/* Zwei Wege ins dunkle Schema, und die Reihenfolge zaehlt: Das System stellt
   nur den Vorschlag, die Wahl am Schalter der Startseite steht in
   localStorage und gewinnt. Darum greift die Systemregel nur, solange nicht
   ausdruecklich hell gewaehlt wurde — sonst spraenge die Seite beim Wechsel
   von der Startseite hierher wieder zurueck ins Dunkle. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --color-bg:var(--ink-900);
    --color-bg-alt:#161815;
    --color-fg:var(--paper-000);
    --color-fg-muted:var(--stone-400);
    --color-line:rgba(250,250,248,.14);
    --color-accent-text:var(--accent-500);
  }
}
:root[data-theme="dark"]{
  --color-bg:var(--ink-900);
  --color-bg-alt:#161815;
  --color-fg:var(--paper-000);
  --color-fg-muted:var(--stone-400);
  --color-line:rgba(250,250,248,.14);
  --color-accent-text:var(--accent-500);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:var(--step-0);line-height:1.65;
  color:var(--color-fg);background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
}
.wrap{width:min(100% - var(--space-l) * 2,760px);margin-inline:auto}
:where(a,button):focus-visible{
  outline:3px solid var(--color-accent-text);outline-offset:3px;border-radius:6px}

.display{font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'SOFT' 40,'WONK' 1,'opsz' 100;
  font-weight:500;letter-spacing:-.025em;line-height:1.05}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--color-fg-muted)}

/* --- Kopf --- */
.top{border-bottom:1px solid var(--color-line);padding-block:var(--space-s)}
.top .wrap{display:flex;align-items:center;gap:var(--space-m)}
.back{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:44px;
  color:var(--color-fg);text-decoration:none;font-size:var(--step--1)}
.back svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.back:hover{color:var(--color-accent-text)}
.top .brand{margin-left:auto;font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-fg-muted)}

/* Derselbe Schalter wie auf der Startseite — ohne ihn stuende in Abschnitt 3
   der Datenschutzerklaerung ein Hinweis auf einen Knopf, den es hier nicht
   gibt. Er startet versteckt und wird vom Skript eingeblendet: ohne
   JavaScript liesse sich nichts umschalten. */
.theme-toggle{display:grid;place-items:center;width:44px;height:44px;flex:none;
  background:none;border:1px solid currentColor;border-radius:var(--radius-full);
  cursor:pointer;color:inherit;opacity:.7;transition:opacity .18s ease}
.theme-toggle[hidden]{display:none}
.theme-toggle:hover{opacity:1}
.theme-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:block}
}

/* --- Inhalt --- */
main{padding-block:var(--space-2xl) var(--space-2xl)}
h1{font-size:var(--step-5);margin-bottom:var(--space-s)}
.lede{color:var(--color-fg-muted);font-size:var(--step-1);margin-bottom:var(--space-xl)}
h2{font-size:var(--step-3);margin-block:var(--space-xl) var(--space-s)}
h3{font-size:var(--step-1);margin-block:var(--space-m) var(--space-2xs);font-weight:600}
p,ul,ol{margin-bottom:var(--space-s)}
ul,ol{padding-left:1.3em}
li{margin-bottom:var(--space-3xs)}
a{color:var(--color-accent-text);text-underline-offset:3px}
address{font-style:normal}
strong{font-weight:600}

.card{background:var(--color-bg-alt);border:1px solid var(--color-line);
  border-radius:var(--radius-md);padding:var(--space-m);margin-bottom:var(--space-s)}
.card p:last-child,.card ul:last-child{margin-bottom:0}

/* Offene Stellen im Text — muss vor dem Livegang alles weg sein. */
.todo{border:1px solid var(--accent-700);border-left:4px solid var(--accent-600);
  background:color-mix(in srgb,var(--accent-500) 10%,transparent);
  border-radius:var(--radius-md);padding:var(--space-m);margin-block:var(--space-m)}
.todo h2{margin-top:0;font-size:var(--step-1)}
.todo ul:last-child,.todo p:last-child{margin-bottom:0}
mark{background:color-mix(in srgb,var(--accent-500) 32%,transparent);
  color:inherit;padding:.05em .3em;border-radius:4px;font-weight:600}

/* --- Fuss --- */
.foot{border-top:1px solid var(--color-line);padding-block:var(--space-m);
  margin-top:var(--space-2xl)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:var(--space-s);justify-content:space-between}
.foot a{color:var(--color-fg-muted);text-decoration:none;font-size:var(--step--1)}
.foot a:hover{color:var(--color-accent-text)}