/* Klassikhub – gemeinsame Stile aller Seiten (Marke, Skip-Link, Fokus).
   Die Farb- und Schrift-Tokens (--ink, --mut, --font-display …) definiert
   jede Seite selbst; hier werden sie nur benutzt. */

/* Wortmarke über dem Seitentitel; in flex-Headern eine eigene Zeile. */
.brand {
  display: block;
  flex-basis: 100%;
  width: 100%;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mut);
  text-decoration: none;
  margin-bottom: 10px;
}
.brand:hover {
  color: var(--ink);
}

/* Skip-Link: unsichtbar, bis er per Tab den Fokus bekommt. */
.skiplink {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 3000;
  padding: 9px 14px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.skiplink:focus {
  left: 8px;
}
#main:focus {
  outline: none;
}

/* Sichtbarer Tastaturfokus für alles Bedienbare. */
:is(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}