/* SchmiedeX Stilblatt. Alles Gestalterische beginnt hier, sonst nirgends.
   Kontrast gegen Schwarz gemessen (WCAG 2.2 AAA verlangt 7:1 Text, 4,5:1 grosse Schrift, 3:1 Bedienelemente):
   text 19,4  text-2 12,5  text-3 8,9  chrom-dunkel 10,1  rot-text 7,5  glut 8,0  linie 4,0 */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../schrift/archivo-latin-standard-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../schrift/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* Farben, aus dem Logo gemessen: Schwarz, Stahlrot, Chrom, dazu die Glut der Schmiede */
  --grund: #000000;
  --flaeche: #0d0d10;
  --flaeche-2: #16161b;
  --linie: #6b6b75;
  --text: #f5f6f8;
  --text-2: #c3c8d0;
  --text-3: #a3a9b2;
  --rot: #e01a22;
  --rot-tief: #a50d15;
  --rot-text: #ff6a5c;
  --rot-gross: #f02a2a;   /* das X der Marke in grosser Schrift, 5,1 zu 1 (AAA fuer grosse Schrift verlangt 4,5) */
  --rot-marke: #ff6060;   /* das X der Marke im Fliesstext, 7,1 zu 1 auf Schwarz */
  --glut: #ff7a1a;
  --chrom-hell: #ffffff;
  --chrom-mitte: #aeb4bc;
  --chrom-knopf-1: #f4f6f8;
  --chrom-knopf-2: #c9ced6;

  /* Schrift: Archivo fuer Auftritt (Grotesk in natuerlichen Proportionen), Atkinson Hyperlegible fuer alles, was gelesen wird */
  --schrift-auftritt: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --schrift-text: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Typoskala, hoechstens sieben Stufen */
  --t-1: 1.0625rem;
  --t-2: 1.1875rem;
  --t-3: 1.5rem;
  --t-4: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  --t-5: clamp(2rem, 1rem + 4.2vw, 5rem);

  /* Abstandsskala */
  --a4: .25rem; --a8: .5rem; --a12: .75rem; --a16: 1rem; --a24: 1.5rem;
  --a32: 2rem; --a48: 3rem; --a64: 4rem; --a96: 6rem; --a128: 8rem;

  --rand: clamp(1.25rem, 5vw, 6rem);
  --kopf-h: 5rem;
  --lesebreite: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--t-1);
  line-height: 1.6;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--schrift-auftritt); font-weight: 800; font-stretch: 100%; letter-spacing: -.015em; margin: 0; }
p { margin: 0; }
a { color: var(--text); text-underline-offset: .22em; text-decoration-thickness: .08em; }
a:hover { color: var(--rot-text); }

/* Fokus: weisser Ring mit schwarzem Abstand, 3:1 auf jedem Grund, mindestens 2 Pixel */
:focus-visible {
  outline: 3px solid var(--chrom-hell);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--grund);
  border-radius: 4px;
}

/* Chrom: Verlauf nur in hellen Stufen, nie unter 10:1 */
.chrom {
  color: var(--chrom-hell);
  background: linear-gradient(172deg, #ffffff 0%, #e8ebef 28%, var(--chrom-mitte) 50%, #f4f6f8 66%, #c7ccd3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Der Verlauf malt nur im Kasten: Luft fuer Unterlaengen (g, p) und Ueberhang, ohne das Layout zu verschieben */
  padding: .06em .04em .16em;
  margin: -.06em -.04em -.16em;
}
@media (forced-colors: active) { .chrom { background: none; -webkit-text-fill-color: CanvasText; } }

/* Knopf: helles Chrom mit schwarzer Schrift, 13:1. Beim Hover stahlrot mit weisser Schrift */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; min-width: 3.25rem;
  padding: var(--a12) var(--a32);
  border: 2px solid var(--chrom-hell);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--chrom-knopf-1), var(--chrom-knopf-2));
  color: #000;
  font-family: var(--schrift-text);
  font-size: var(--t-2);
  font-weight: 700;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.knopf:hover { background: var(--rot-tief); color: #fff; }
.knopf:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .knopf { transition: none; } }

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

/* Das X der Marken (SchmiedeX, StreetwearX, CounterX) ist im Text immer rot */
.x-rot { color: var(--rot-marke); }

/* Dirk 09.11.2026: das X der Marke immer fett und 2 Pixel groesser als die Schrift drumherum, damit es sich einbrennt */
.x-rot, .marke-x, .x-gross { font-weight: 800; font-size: calc(1em + 2px); }

/* Markieren: Chromtext hat durchsichtige Fuellfarbe, ohne diese Regel verschwindet markierter Text (Dirk 09.11.2026) */
::selection { background: var(--rot-tief); color: #fff; -webkit-text-fill-color: #fff; }
.chrom::selection, .chrom *::selection { background: var(--rot-tief); color: #fff; -webkit-text-fill-color: #fff; }