/* base.css - Reset, Elementbasis, Fonts, Fokus, Typografie, Skip-Link */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-block-size: 100dvh; }
  img, svg, video { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  table { border-collapse: collapse; }
}

@layer base {
  /* Selbst gehostete variable Schnitte, getrennte Bereiche */
  @font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/geist-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
      U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/geist-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
      U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
      U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
      U+A720-A7FF;
  }
  @font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/geist-mono-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
      U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/geist-mono-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
      U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
      U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
      U+A720-A7FF;
  }

  html {
    scroll-padding-block-start: calc(72px + var(--space-4));
    hanging-punctuation: first allow-end;
  }

  body {
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--lh-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  ::selection {
    background: color-mix(in srgb, var(--accent) 22%, var(--surface));
    color: var(--text);
  }

  /* Fokusring: niemals entfernen, nirgends abschneiden */
  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: var(--radius);
  }

  h1, h2, h3, h4 {
    line-height: var(--lh-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
    max-inline-size: 24ch;
  }
  h1 { font-size: var(--text-4xl); font-weight: 650; }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }
  /* Kursiv mit Unterlaengen: Reserve nach unten */
  h1 em, h2 em, h3 em { line-height: 1.1; padding-block-end: 0.08em; }

  p, li, dd {
    max-inline-size: 62ch;
    text-wrap: pretty;
  }
  p { line-height: var(--lh-body); }

  a {
    color: var(--accent);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
  }
  a:hover { text-decoration-thickness: 2px; }

  small { font-size: var(--text-sm); }
  strong, b { font-weight: 600; }

  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.92em;
  }
  pre {
    background: var(--surface-sunken);
    border: var(--hairline);
    border-radius: var(--radius);
    padding: var(--space-4);
    overflow-x: auto;
  }

  ul:not([class]), ol:not([class]) { padding-inline-start: 1.4em; }
  li + li { margin-block-start: var(--space-1); }

  hr {
    border: 0;
    border-block-start: var(--hairline);
    margin-block: var(--space-8);
  }

  img { block-size: auto; }

  ::placeholder { color: var(--text-muted); opacity: 1; }

  /* Skip-Link: erstes fokussierbares Element */
  .skip-link {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    z-index: var(--z-skip);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-raised);
    color: var(--text);
    border: var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    font-weight: 600;
    text-decoration: none;
    translate: 0 -300%;
  }
  .skip-link:focus-visible { translate: 0 0; }
}