/* Schriften — variabel, self-hosted (kein Google-CDN) */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url('../assets/fonts/Archivo-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: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url('../assets/fonts/Archivo-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: 'Martian Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('../assets/fonts/MartianMono-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: 'Martian Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('../assets/fonts/MartianMono-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-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-stretch: 100%;
  color: var(--gummi);
  background: var(--kreide);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typografie */
h1, h2, .flanke {
  font-weight: 800;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1;
  hyphens: manual;
}
@media (max-width: 639px) { h1 { hyphens: auto; } }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); font-weight: 760; font-stretch: 116%; line-height: 1; letter-spacing: 0; }
h3 { font-size: var(--fs-h3); font-weight: 650; line-height: 1.2; }
p { max-width: 68ch; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 52ch; }
strong, b { font-weight: 650; }

.code {
  font-family: var(--mono);
  font-size: var(--fs-code);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

a { color: var(--tarjan-tief); text-decoration-thickness: 1.5px; text-underline-offset: .2em; transition: color var(--t-ui) var(--roll); }
a:hover { color: var(--gummi); }
.dunkel a:not([class]) { color: var(--tarjan); }
.dunkel a:not([class]):hover { color: var(--kreide); }

/* Rahmen */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--rand); }
.sek { padding-block: var(--sek); position: relative; }
.sek--gummi, .dunkel { background: var(--gummi); color: var(--kreide); }
.sek--gummi-2 { background: var(--gummi-2); color: var(--kreide); }
.sek--beton { background: var(--beton); }
.sek--kreide { background: var(--kreide); }

.kopf { display: grid; gap: var(--s-16); margin-bottom: clamp(var(--s-32), 5vw, var(--s-64)); max-width: 62rem; }
.kopf .code { color: var(--tarjan-tief); }
.dunkel .kopf .code, .sek--gummi .kopf .code, .sek--gummi-2 .kopf .code { color: var(--tarjan); }
.kopf p { color: var(--grafit); }
.dunkel .kopf p, .sek--gummi .kopf p, .sek--gummi-2 .kopf p { color: var(--stahl); }
.kopf--split { max-width: none; }
@media (min-width: 960px) {
  .kopf--split { grid-template-columns: 7fr 5fr; align-items: end; column-gap: var(--s-48); }
  .kopf--split .code { grid-column: 1 / -1; }
}

/* Fokus: sichtbar, nie entfernt */
:focus-visible { outline: 3px solid var(--gummi); outline-offset: 3px; }
.dunkel :focus-visible, .sek--gummi :focus-visible, .sek--gummi-2 :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .menue :focus-visible { outline-color: var(--tarjan); }

.skip-link {
  position: absolute; left: var(--s-16); top: -100px; z-index: 300;
  background: var(--tarjan); color: var(--gummi); padding: 12px 20px; border-radius: 999px;
  font-weight: 650; text-decoration: none;
}
.skip-link:focus { top: var(--s-16); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Echte Lücken bleiben sichtbar markiert — nie mit Fantasie gefüllt */
.offen {
  display: inline-block;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; line-height: 1.4;
  padding: 2px 8px; border: 1px dashed currentColor; border-radius: 999px; opacity: .75;
  vertical-align: middle;
}