/* ============================================================================
   Base — Reset, Typografie, Grundlayout, Zugänglichkeit.
   ========================================================================== */

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

html, body { margin: 0; height: 100%; }

body {
  background: var(--c-ink-900);
  color: var(--c-bone-100);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#app {
  max-width: var(--w-app);
  margin: 0 auto;
  min-height: 100%;
  position: relative;
  border-inline: 1px solid var(--c-ink-500);
  background: linear-gradient(180deg, var(--c-ink-800) 0%, var(--c-ink-900) 55%);
}

/* --- Überschriften --------------------------------------------------------- */
h1, h2, h3 { font-family: var(--f-serif); font-weight: 400; margin: 0; }
h1 { font-size: var(--t-display); line-height: var(--t-display-lh); letter-spacing: -.01em; margin: .15em 0 .3em; }
h2 { font-size: var(--t-title);   line-height: var(--t-title-lh);   margin: 0 0 .4em; }
h3 { font-size: var(--t-heading); line-height: var(--t-heading-lh); margin: 0 0 .3em; }

p { margin: 0 0 var(--s-3); }

.eyebrow {
  font-size: var(--t-micro); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--c-bone-400); margin: 0;
}
.lede     { font-family: var(--f-serif); font-size: 17px; color: var(--c-bone-300); line-height: 1.5; }
.subtitle { font-family: var(--f-serif); font-style: italic; color: var(--c-bone-300); margin: .2em 0 1em; }
.body     { color: var(--c-bone-200); font-size: var(--t-body); }
.footnote { font-size: var(--t-meta); color: var(--c-bone-400); line-height: 1.5; }

/* --- Formulare ------------------------------------------------------------- */
select, button, input, textarea { font-family: inherit; font-size: var(--t-ui); }

/* --- Fokus ----------------------------------------------------------------
   Sichtbar, immer, ohne Ausnahme. Wer die App mit Tastatur oder Screenreader
   bedient, muss wissen, wo er steht. */
:focus-visible {
  outline: 2px solid var(--c-accent-soft);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Nur für Screenreader */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprungmarke zum Inhalt */
.skip-link {
  position: absolute; left: -9999px; top: var(--s-2); z-index: var(--z-toast);
  background: var(--c-ink-600); color: var(--c-bone-100);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-md);
}
.skip-link:focus { left: var(--s-4); }

/* --- Screens --------------------------------------------------------------- */
.screen { display: none; padding: var(--s-6) var(--s-5) 120px; }
.screen[data-active] { display: block; }
.screen--fullbleed[data-active] {
  padding: 0;
  height: calc(100dvh - var(--h-topbar));
  position: relative;
}

@media (max-width: 400px) {
  :root { --t-display: 29px; }
}