/* Schriften, Reset, Grundtypografie */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
  scrollbar-color: var(--metal-dunkel) var(--graphite);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--tinte);
  font-family: var(--f-text);
  font-size: var(--t-text);
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-stretch: 88%;
  font-weight: 750;
  line-height: 1.04;
  letter-spacing: -0.015em;
  word-spacing: 0.06em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 0.98; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.12; }

p { max-width: 68ch; text-wrap: pretty; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
main a:not([class]) { color: var(--blue-600); }
.dunkel main a:not([class]), .dunkel a:not([class]) { color: var(--blue-300); }
a:not([class]):hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
.hell :focus-visible, main > .hell :focus-visible { outline-color: var(--blue-600); }

::selection { background: var(--blue-500); color: #fff; }

.mono {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.rahmen {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.sektion { padding-block: var(--s-9); }
.hell { background: var(--paper); color: var(--tinte); }
.dunkel { background: var(--graphite); color: var(--hell); }

.skip {
  position: fixed;
  left: var(--s-4);
  top: -6rem;
  z-index: var(--z-skip);
  background: var(--blue-500);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
}
.skip:focus { top: var(--s-4); }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ph {
  background: rgb(30 107 255 / 0.14);
  color: inherit;
  font-family: var(--f-mono);
  font-size: 0.9em;
  padding: 0.05em 0.3em;
  border-radius: var(--r-1);
  outline: 1px dashed currentcolor;
  outline-offset: -1px;
}