/* ============================================================
   Typografie- und Textur-Utilities — site-weit wiederverwendet
   ============================================================ */
.display { font-family: var(--display); font-weight: 900; font-style: normal; letter-spacing: 0.005em; line-height: 0.92; text-transform: uppercase; }
.display-up { font-family: var(--display); font-weight: 900; line-height: 0.92; text-transform: uppercase; letter-spacing: 0.005em; }
.label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #6B6863; }
.label-light { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.65); }
.halftone { background-image: radial-gradient(rgba(255,255,255,0.55) 1.2px, transparent 1.6px); background-size: 14px 14px; }
.halftone-dim { background-image: radial-gradient(rgba(255,255,255,0.22) 1.2px, transparent 1.6px); background-size: 16px 16px; }

.web {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  position: relative;
  overflow-x: hidden;
  font-family: var(--body);
}

/* SECTION + HEAD — generische Abschnitts-Struktur, jede Seite nutzt sie */
.web-section { padding: 80px 56px 40px; }
.web-section.paper { background: var(--paper); }
/* Wiederkehrende Abstands-Varianten, ersetzen einzelne
   style="padding-top/-bottom:80px"-Attribute auf mehreren Seiten. */
.web-section.pt-lg { padding-top: 80px; }
.web-section.pb-lg { padding-bottom: 80px; }
/* Wiederkehrendes Muster: schmaler roter "Mehr →"-Link ohne Unterstreichung. */
.link-accent { color: var(--red); text-decoration: none; font-weight: 700; }
/* Bewusst zurueckhaltender Nebenlink: nimmt die Farbe seiner Umgebung an und
   traegt nur eine feine Unterstreichung — fuer Verweise, die da sein sollen,
   aber nicht um Aufmerksamkeit konkurrieren. */
.link-muted {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(14,14,18,0.28);
}
.link-muted:hover { color: var(--red); border-bottom-color: var(--red); }
.web-section .head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px;
  border-top: 2px solid var(--ink); padding-top: 22px;
}
.web-section .head .l {
  font-family: var(--display); font-weight: 900; font-style: normal;
  font-size: 48px; text-transform: uppercase; line-height: 1;
}
.web-section .head .r {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(14,14,18,0.55);
}

/* Pagination + tag-pill bar */
.pill {
  text-decoration: none; padding: 10px 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700;
  display: inline-block;
}
.pill.ink { background: var(--ink); color: white; }
.pill.red { background: var(--red); color: white; }
.pill.paper { background: white; color: var(--ink); border: 1px solid rgba(0,0,0,0.12); }

/* Für Menschen unsichtbar, für Screenreader/Formular-Honeypots erreichbar
   (z. B. Spam-Falle in Formularen: ein Feld, das echte Besucher nie sehen). */
.visually-hidden {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}

@media (max-width: 1024px) {
  .web-section { padding: 56px 22px 28px; }
  .web-section .head .l { font-size: 38px; }
}
@media (max-width: 640px) {
  .web-section { padding: 40px 18px 18px; }
  .web-section .head {
    flex-direction: column; align-items: flex-start; gap: 8px;
  }
  .web-section .head .l { font-size: 30px; }
}