*{ box-sizing: border-box; }
html, body { height: 100%; }

html { font-size: 16px; }

body{
  margin: 0;
  font-family: var(--ff-sans);
  font-size: calc(var(--fs-0) * var(--type-scale));
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
}

a{ color: inherit; text-decoration: none; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Sticky footer layout */
.site{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main{
  flex: 1;
  padding: 50px 0 46px;
}

/* Page width only (NO typography here) */
.page{
  max-width: 760px;
  margin: 0 auto;
}

/* =========================
   Typography (global)
   ========================= */

h1, h2, h3{
  font-weight: var(--fw-medium);     /* weniger fett, einheitlich */
  line-height: var(--lh-title);
  letter-spacing: 0.1px;
}

h1{
  margin: 0 0 0.55em;
  font-size: calc(var(--fs-4) * var(--type-scale));
  line-height: var(--lh-tight);
  color: var(--accent);
}

h2{
  margin: 0 0 0.55em;  
  font-size: calc(var(--fs-3) * var(--type-scale));
  color: var(--accent);
}

h3{
  margin: 1.1em 0 0.45em;
  font-size: calc(var(--fs-2) * var(--type-scale));
  color: var(--text);
}

p{
  margin: 0 0 0.9em;
  color: var(--muted);
}

li{
  color: var(--muted);
}

ul, ol{
  margin: 0 0 1.0em 1.1em;
  color: var(--muted);
}

.page a, main a{
  color: var(--accent);
  /* border-bottom: 1px solid var(--accent-35); */
}
.page a:hover, main a:hover{
  border-bottom-color: var(--accent-75);
}

.lead{
  font-size: calc(var(--fs-1) * var(--type-scale));
  color: var(--ink-55);
}

strong, b{
  font-weight: var(--fw-bold);
}