/* ============================================================
   10 · BASE — Reset, Element-Selektoren, Container
   ------------------------------------------------------------
   Nur Element-Selektoren und der eine Layout-Container.
   Keine Komponentenklassen (CLAUDE.md).

   Breakpoints: 600 / 768 / 1024 / 1280, nur min-width.
   ============================================================ */

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

html {
  scroll-behavior: smooth;
}

/* Lenis uebernimmt das Scrollen und braucht das native Verhalten aus. */
html.lenis {
  scroll-behavior: auto;
}

body {
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Sperrt den Hintergrund, solange die mobile Navigation offen ist.
   Loest den Inline-Style aus der Vorlage ab (main.js Z. 22/27). */
body.is-nav-open {
  overflow: hidden;
}

/* Der Browser blendet [hidden] mit display:none aus -- allerdings aus seinem
   eigenen Stylesheet, das jeder Autorenregel unterliegt. Eine Komponente mit
   display:flex hebt das Attribut damit stillschweigend auf; genau das ist dem
   Archivfilter passiert. Der doppelte Selektor hebt die Spezifitaet auf 0,2,0
   und schlaegt damit jede Klasse -- ohne Vorrangmarkierung. */
[hidden][hidden] {
  display: none;
}

img,
video {
  display: block;
  max-width: 100%;
}

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

ul {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

address {
  font-style: normal;
}

/* Sichtbarer Fokus, projektweit einheitlich. Die Vorlage hatte keinen.
   Die Ringfarbe kommt aus einer Variablen, damit dunkle Flaechen sie
   umsetzen koennen, ohne dass hier fuer jeden Kontext ein eigener
   Selektor entsteht. */
:focus-visible {
  outline: 2px solid var(--focus-ring, var(--amber));
  outline-offset: 3px;
}

/* Welche Farbe der Ring auf dunklem Grund braucht, weiss die jeweilige
   Komponente selbst -- `--focus-ring` wird deshalb dort gesetzt, wo die dunkle
   Flaeche entsteht (30-layout, 40-components, 50-sections). Diese Ebene kennt
   nur den Rueckfall. */

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

/* Sprungziele duerfen nicht unter dem fixierten Header landen. */
section[id],
[id]:target {
  scroll-margin-top: calc(var(--nav-h) + var(--space-s));
}

/* Nur fuer Screenreader. Wird u. a. vom Sprungmarken-Link genutzt.
   .screen-reader-text ist der Name, den WordPress selbst vergibt -- etwa im
   Suchformular („Suche nach:") und in der Blaetterfunktion. Ohne diese Regel
   stuenden beide sichtbar auf der Seite. */
.visually-hidden:not(:focus):not(:active),
.screen-reader-text:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}