/* basic – leben & wohnen · v2 tokens
   Calm system: a pale ground, its tone step, one ink (also the one dark chapter), one serif.
   The green of the U2 viaduct marks only the active state. */
:root {
  --bg: #f7f7f5;
  --tone: #ecebe7;
  --ink: #161412;
  --soft: #64605a;
  --dark: #161412;
  --dark-ink: #f1f1ee;
  --dark-soft: #a6a39d;
  --accent: #2f5d50;
  --surface: var(--tone);
  --accent-ink: #f7f7f5;

  --font-display: "Newsreader", Georgia, serif;
  --font-text: "Newsreader", Georgia, serif;

  --step-small: 0.875rem;
  --step-body: 1.125rem;
  --step-lead: 1.5rem;
  --step-head: clamp(2.25rem, 1.2rem + 2.8vw, 3.5rem);
  --step-display: clamp(3.2rem, 1rem + 5vw, 4.5rem);

  --margin: clamp(1.25rem, 6vw, 6rem);
  --gutter: clamp(1rem, 1.7vw, 1.5rem);
  --col: calc((100vw - 2 * var(--margin) - 11 * var(--gutter)) / 12);
  --section: clamp(6rem, 10vw, 11rem);
  --radius: 0px;
}

html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.5; font-optical-sizing: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.015em; }
.head { font-size: var(--step-head); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; }
p { max-width: 42ch; }
img { background: var(--tone); }

.button { background: var(--ink); color: var(--bg); font-size: var(--step-small); font-weight: 400; min-height: 2.75rem; padding: 0 1.25rem; letter-spacing: 0.01em; }
@media (hover: hover) and (pointer: fine) { .button:hover { background: #3a3631; } }
.link-plain { text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--ink); color: var(--bg); }