/* =========================================================================
   braaksma — gemeinsame Basis aller drei Entwürfe
   Schriften liegen lokal. Keine Tracker, keine Cookies, nichts von Dritten.
   ========================================================================= */

@font-face {
  font-family: 'Geist';
  src: url('fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/geist-mono-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --schrift: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;

  --rd-1: 6px; --rd-2: 10px; --rd-3: 16px; --rd-voll: 999px;

  --dauer-1: 140ms; --dauer-2: 260ms; --dauer-3: 520ms;
  --kurve: cubic-bezier(.22,.68,.3,1);
  --kurve-aus: cubic-bezier(.16,1,.3,1);

  --z-szene: 0; --z-etiketten: 10; --z-chrome: 20; --z-tafel: 30; --z-modal: 100;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
img, svg, canvas { display: block; }
[hidden] { display: none !important; }

.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprung {
  position: fixed; left: var(--sp-4); top: -4rem; z-index: 200;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--rd-2);
  background: #fff; color: #000; text-decoration: none; font-weight: 500;
  transition: top var(--dauer-1) var(--kurve);
}
.sprung:focus { top: var(--sp-4); }

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