/* =========================================================================
   basis.css — gemeinsames Fundament beider Entwürfe
   Enthält bewusst keine Farben, Schriften oder Gestaltung, sondern nur
   Zurücksetzung, Zugänglichkeit und Layout-Werkzeuge.
   ========================================================================= */

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

html { -webkit-text-size-adjust: 100%; }

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

/* Zurücksetzen ohne Gewicht: :where() zählt bei der Spezifität nicht mit,
   dadurch bleibt der Selektor so schwach wie ein reiner Elementselektor.
   Sonst schlägt ul[role="list"] (0,1,1) jede Bausteinklasse (0,1,0) — genau
   das hatte die Innenabstände der Preiskarten gelöscht. */
ul:where([role="list"]), ol:where([role="list"]) { list-style: none; padding: 0; }

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.6;
  overflow-x: hidden;
}

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

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

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

a { color: inherit; }

table { border-collapse: collapse; width: 100%; }

/* ---- Zugänglichkeit ---------------------------------------------------- */

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.nur-fuer-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprungmarke {
  position: absolute;
  left: 0; top: 0;
  padding: .75rem 1.25rem;
  transform: translateY(-120%);
  transition: transform .15s;
  z-index: 999;
}
.sprungmarke:focus { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Layout ------------------------------------------------------------ */

.huelle {
  width: min(100% - 2.5rem, var(--breite-max, 78rem));
  margin-inline: auto;
}
.huelle--schmal { --breite-max: 54rem; }

.raster {
  display: grid;
  gap: var(--abstand, 1.5rem);
}

@media (min-width: 48rem) {
  .raster--2 { grid-template-columns: repeat(2, 1fr); }
  .raster--3 { grid-template-columns: repeat(3, 1fr); }
  .raster--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .raster--4 { grid-template-columns: repeat(4, 1fr); }
  .raster--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 80rem) {
  .raster--6 { grid-template-columns: repeat(3, 1fr); }
}

/* Waagerecht scrollende Bereiche für breite Tabellen */
.scrollbereich {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Menüknopf für schmale Bildschirme ---------------------------------
   Struktur ist in beiden Entwürfen gleich, die Gestaltung kommt aus stil.css.
   ----------------------------------------------------------------------- */

.menue-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;   /* Mindestgröße für Berührung */
  flex: none;
}
@media (min-width: 68rem) { .menue-knopf { display: none; } }

.menue-knopf > span[aria-hidden] {
  position: relative;
  width: 20px; height: 2px;
  background: currentColor;
  transition: background .15s;
}
.menue-knopf > span[aria-hidden]::before,
.menue-knopf > span[aria-hidden]::after {
  content: "";
  position: absolute;
  left: 0; width: 20px; height: 2px;
  background: currentColor;
  transition: transform .22s cubic-bezier(.2,.9,.3,1);
}
.menue-knopf > span[aria-hidden]::before { top: -6px; }
.menue-knopf > span[aria-hidden]::after  { top: 6px; }

.menue-knopf[aria-expanded="true"] > span[aria-hidden] { background: transparent; }
.menue-knopf[aria-expanded="true"] > span[aria-hidden]::before { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] > span[aria-hidden]::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---- Kennzeichnung ungeprüfter Inhalte --------------------------------
   Standardmäßig unsichtbar, damit nichts versehentlich live erscheint.
   Sichtbar wird die Markierung nur, wenn an die Adresse ?platzhalter
   angehängt wird — dafür sorgt assets/js/platzhalter.js.
   ----------------------------------------------------------------------- */

body.platzhalter-an .platzhalter {
  position: relative;
  text-decoration: underline dotted currentColor 2px;
  text-underline-offset: .3em;
  cursor: help;
}
body.platzhalter-an .platzhalter::after {
  content: "?";
  font-size: .55em;
  vertical-align: super;
  opacity: .7;
  margin-left: .15em;
}

/* Die eine Stelle, auf die aus der Übersicht heraus verlinkt wurde.
   Eine leere Markierung ist nur zwei Zeichen breit — ohne eigene Fläche
   fände man sie auch dann nicht, wenn die Seite richtig gescrollt hat. */
body.platzhalter-an .platzhalter--gesucht {
  background: #ffe9a8;
  outline: 3px solid #e0a400;
  outline-offset: 2px;
  border-radius: 2px;
  padding: 0 .2em;
  scroll-margin-block: 8rem;
}
@media (prefers-reduced-motion: no-preference) {
  body.platzhalter-an .platzhalter--gesucht { animation: platzhalter-puls 1.4s ease-out 2; }
}
@keyframes platzhalter-puls {
  0%, 100% { background: #ffe9a8; }
  50%      { background: #ffd25e; }
}