/* ==========================================================================
   base.css — Schriftbindung, Reset und Grundelemente.
   ========================================================================== */

/* Schriften liegen lokal im Projekt: schneller, unabhängig von Dritten und
   ohne die DSGVO-Fragen, die ein externes CDN für eine EU-Gesellschaft
   aufwirft. Alle drei stehen unter der SIL Open Font License.

   font-display: optional statt swap — swap zeigt bewusst zuerst die
   Systemschrift und tauscht sie später aus, was auf jeder Seite als
   sichtbares Umspringen auffiel (Eyebrow-Label, Überschriften). Mit
   optional übernimmt der Browser die eigene Schrift nur, wenn sie
   innerhalb eines sehr kurzen Zeitfensters bereitsteht — bei lokal
   gehosteten, vorgeladenen Dateien praktisch immer der Fall — und
   verzichtet sonst lautlos auf den Tausch, statt mitten im Lesen
   umzuspringen. Ergänzend werden alle oberhalb der Falz sichtbaren
   Schriftschnitte in partials/head.php vorgeladen. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("../fonts/instrument-serif-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url("../fonts/instrument-serif-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@layer base {

  *, *::before, *::after { box-sizing: border-box; }

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--space-md));
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }

  /* Sehr feine Körnung über der gesamten Seite. Das ist der Unterschied
     zwischen einer flachen Bildschirmfläche und dem Eindruck von bedrucktem
     Papier — grosse Farbflächen wirken dadurch weniger digital-flach.
     Das Rauschen entsteht aus einem eingebetteten SVG-Filter, kostet also
     keine zusätzliche Datei, und liegt mit pointer-events: none über allem,
     ohne je eine Eingabe abzufangen. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--grain);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* Kein Rauschen im Druck — Toner für Bildschirmtextur zu verbrauchen
     wäre unsinnig, und im Ausdruck stört es die Lesbarkeit. */
  @media print {
    body::before { display: none; }
  }

  /* --- Überschriften ------------------------------------------------- */

  h1, h2, h3, h4 {
    font-weight: 400;
    line-height: var(--leading-snug);
    text-wrap: balance;
  }

  h1, h2 {
    font-family: var(--font-serif);
    letter-spacing: var(--track-display);
    line-height: var(--leading-tight);
  }

  h1 { font-size: var(--text-h1); }
  h2 { font-size: var(--text-h2); }

  h3, h4 {
    font-family: var(--font-sans);
    font-weight: 550;
    letter-spacing: var(--track-tight);
  }

  h3 { font-size: var(--text-h3); }
  h4 { font-size: var(--text-body); }

  /* Kursive Serif ist die einzige Hervorhebung in Überschriften. */
  h1 em, h2 em {
    font-style: italic;
    color: var(--accent);
  }

  p { text-wrap: pretty; }

  /* --- Verweise ------------------------------------------------------ */

  a {
    color: inherit;
    text-decoration-color: var(--accent-edge);
    text-underline-offset: .22em;
    text-decoration-thickness: 1px;
    transition: color var(--dur-fast) var(--ease),
                text-decoration-color var(--dur-fast) var(--ease);
  }

  a:hover { color: var(--accent); text-decoration-color: var(--accent); }

  /* --- Fokus --------------------------------------------------------- */

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  :focus:not(:focus-visible) { outline: none; }

  /* --- Medien -------------------------------------------------------- */

  img, picture, svg, video {
    display: block;
    max-inline-size: 100%;
    height: auto;
  }

  img { background: var(--surface-sunk); }

  /* --- Formulare ----------------------------------------------------- */

  input, textarea, select, button {
    font: inherit;
    color: inherit;
  }

  button { cursor: pointer; background: none; border: none; }

  /* --- Listen -------------------------------------------------------- */

  ul, ol { padding: 0; list-style: none; }

  /* --- Sonstiges ----------------------------------------------------- */

  hr {
    border: none;
    border-top: var(--border);
    margin-block: var(--space-lg);
  }

  ::selection {
    background: var(--accent);
    color: var(--accent-ink);
  }

  strong { font-weight: 600; }

  code, kbd, samp { font-family: var(--font-mono); font-size: .9em; }
}