/* Grundstil der Website-Vorlage: Reihenfolge der Kaskadenschichten, Reset, geerbte Texteigenschaften, Hilfsklasse.
   EINE Quelle: Die Redaktion (cms/editor) lädt diese Datei mit und ergänzt nur ihren eigenen Grundstil
   (cms/editor/src/styles/base.css).
   Ladereihenfolge der Vorlage: fonts.css · site-tokens.css · site-base.css · site.css · illustration.css. */

/* Schichten der Vorlage. Spätere Schichten gewinnen unabhängig von der Spezifität. Die Redaktion legt vorher
   eine längere Liste fest (layers.css), in der diese fünf in derselben Reihenfolge stehen. */
@layer reset, tokens, base, site, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
  img, svg, video { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
}

@layer base {
  /* Seite, die nur die Website zeigt (<body class="site-body">): Grund bis zum unteren Fensterrand */
  body.site-body { min-height: 100dvh; background: var(--p-warm-0); }
  /* Was jeder Text der Website erbt. Schrift, Größe, Farbe und Grund setzt .site selbst (site.css). */
  .site { hyphens: manual; overflow-wrap: break-word; -moz-osx-font-smoothing: grayscale; }
  .site p { text-wrap: pretty; }
}

@layer utilities {
  /* Nur für Vorleseprogramme: im Bild unsichtbar, im Zugänglichkeitsbaum vorhanden */
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}