/* vibara — Base: Reset, Typo, Container, Utilities
 * @font-face wird dynamisch im layout.php ausgegeben, nur wenn die woff2-Datei
 * existiert — sonst greift der System-Fallback ohne 404er.
 */

/* Reset (modest) */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video, audio { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; }

/* Body-Defaults */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--type-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Container */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-mobile);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--container-pad-tablet); }
}
@media (min-width: 1200px) {
  .container { padding: 0 var(--container-pad-desktop); }
}

/* Fokus-Indikator (a11y) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Skip-Link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ink);
  color: var(--bg);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus { top: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}