/*
 * The Industrial Translator, Bausteine des Auftritts.
 *
 * Von Hand geschrieben, aber gebunden: build/lint-css.mjs lehnt jeden Literalwert und
 * jede unbekannte Variable ab. Alles kommt aus dist/tokens.css, das aus
 * brand/tokens.json erzeugt wird.
 *
 * Aufbau:
 *
 *   1. Schriften und Grundlagen
 *   2. Gerüst: Kopf, Fuß, Seitenbreiten
 *   3. Typografie zum Lesen
 *   4. Der Artikel
 *   5. Übersicht der Beiträge
 *   6. Hinweise und Autorenbox
 *   7. Bedienelemente
 *   8. Dunkle Zonen
 */

/* ---------- 1. Schriften und Grundlagen ---------- */

@font-face {
  font-family: 'Inter';
  src: url('schrift/inter/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('schrift/inter/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('schrift/inter/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('schrift/inter/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('schrift/inter/inter-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('schrift/jetbrains-mono/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

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

html {
  /* Sprungziele landen nicht unter der Kopfzeile */
  scroll-padding-top: var(--it-space-header-height);
}

body {
  margin: 0;
  background: var(--it-color-surface-base);
  color: var(--it-color-ink-base);
  font-family: var(--it-font-ui);
  font-size: var(--it-text-base);
  line-height: var(--it-leading-normal);
  -webkit-font-smoothing: antialiased;
}

/*
 * Fokus ist ein versetzter Rahmen, kein Schein. Bei radius 0 ist der Versatz das, was
 * ihn sichtbar macht. Er wird nicht wegoptimiert, weil er unruhig wirkt: ein
 * unsichtbarer Fokus ist ein Ausschluss.
 */
:focus-visible {
  outline: var(--it-border-focus-width) var(--it-border-style-solid) var(--it-color-line-focus);
  outline-offset: var(--it-border-focus-offset);
}

::selection {
  background: var(--it-color-accent-base);
  color: var(--it-color-accent-on-accent);
}

/* Sprungmarke. Sichtbar, sobald sie den Fokus hat. */
.it-sprung {
  position: absolute;
  left: var(--it-space-0);
  top: var(--it-space-0);
  padding: var(--it-space-2) var(--it-space-4);
  background: var(--it-color-ink-base);
  color: var(--it-color-ink-on-inverse);
  font-size: var(--it-text-sm);
  font-weight: var(--it-weight-semibold);
  transform: translateY(-100%);
}
.it-sprung:focus-visible {
  transform: none;
}

/* ---------- 2. Gerüst ---------- */

.it-bahn {
  width: 100%;
  max-width: var(--it-measure-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--it-space-6);
  padding-right: var(--it-space-6);
}

.it-kopf {
  display: flex;
  align-items: center;
  gap: var(--it-space-8);
  min-height: var(--it-space-header-height);
  border-bottom: var(--it-border-hairline) var(--it-border-style-solid) var(--it-color-line-base);
  background: var(--it-color-surface-raised);
}

.it-kopf__marke {
  display: block;
  flex: none;
}
.it-kopf__marke img,
.it-kopf__marke svg {
  display: block;
  height: var(--it-space-8);
  width: auto;
}

.it-nav {
  display: flex;
  gap: var(--it-space-6);
  margin-left: auto;
  font-size: var(--it-text-sm);
  font-weight: var(--it-weight-medium);
}
.it-nav a {
  color: var(--it-color-ink-muted);
  text-decoration: none;
  padding-top: var(--it-space-1);
  border-top: var(--it-border-accent-bar) var(--it-border-style-solid) transparent;
}
.it-nav a:hover {
  color: var(--it-color-ink-base);
}
.it-nav a[aria-current='page'] {
  color: var(--it-color-ink-base);
  border-top-color: var(--it-color-accent-base);
}

.it-fuss {
  margin-top: var(--it-space-24);
  padding-top: var(--it-space-12);
  padding-bottom: var(--it-space-12);
  background: var(--it-color-surface-inverse);
  color: var(--it-color-ink-muted-on-inverse);
  font-size: var(--it-text-sm);
}

/* ---------- 3. Typografie zum Lesen ---------- */

.it-display {
  font-size: var(--it-text-display);
  font-weight: var(--it-weight-extrabold);
  line-height: var(--it-leading-tight);
  letter-spacing: var(--it-tracking-display);
  margin: var(--it-space-0);
}

.it-titel {
  font-size: var(--it-text-2xl);
  font-weight: var(--it-weight-extrabold);
  line-height: var(--it-leading-tight);
  letter-spacing: var(--it-tracking-heading);
  margin: var(--it-space-0);
  max-width: var(--it-measure-read);
}

/*
 * Die Rubrik. Kupfer trägt als Fläche, die Beschriftung steht in ink darauf.
 * Als Textfarbe wäre der Akzent hier unzulässig, 2,22:1.
 */
.it-rubrik {
  display: inline-block;
  padding: var(--it-space-1) var(--it-space-2);
  background: var(--it-color-accent-base);
  color: var(--it-color-accent-on-accent);
  font-family: var(--it-font-mono);
  font-size: var(--it-text-xs);
  letter-spacing: var(--it-tracking-mono-label);
  text-transform: uppercase;
  text-decoration: none;
}

.it-meta {
  color: var(--it-color-ink-muted);
  font-size: var(--it-text-sm);
  margin: var(--it-space-0);
}

/* Der Marker. Das Quadrat aus dem Zeichen, wiederverwendet. */
.it-marker {
  display: inline-block;
  width: var(--it-zeichen-quadrat);
  height: var(--it-zeichen-quadrat);
  background: var(--it-color-accent-base);
  flex: none;
}

/*
 * Links laufen in der Farbe ihrer Umgebung, mit Unterstreichung. Der Akzent scheidet als
 * Textfarbe aus, also trägt die Unterstreichung die Erkennbarkeit, nicht die Farbe.
 *
 * `inherit` statt einer festen Farbe ist Absicht und die Lehre aus einem Fehler: Mit
 * `ink.base` standen die Links im Fußbereich schwarz auf schwarz, weil dort die Klasse
 * fehlte, die Textfarben umkehrt. Betroffen waren Impressum und Datenschutz, also genau
 * die zwei Verweise, die leicht erkennbar sein müssen. Ein Link, der erbt, kann in keiner
 * Zone verschwinden.
 */
.it-link,
.it-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--it-underline-thickness);
  text-underline-offset: var(--it-underline-offset);
  text-decoration-color: var(--it-color-line-base);
  transition: text-decoration-color var(--it-duration-fast) var(--it-easing-standard);
}
.it-link:hover,
.it-text a:hover {
  text-decoration-color: var(--it-color-ink-base);
}

/* ---------- 4. Der Artikel ---------- */

.it-artikel {
  background: var(--it-color-surface-raised);
  padding-top: var(--it-space-16);
  padding-bottom: var(--it-space-16);
}

.it-artikel__kopf {
  max-width: var(--it-measure-read);
  margin-bottom: var(--it-space-12);
}
.it-artikel__kopf .it-titel {
  margin-top: var(--it-space-4);
  margin-bottom: var(--it-space-4);
}

/* Der Vorspann steht schmaler als der Fließtext. Er wird überflogen, nicht gelesen. */
.it-vorspann {
  max-width: var(--it-measure-narrow);
  font-size: var(--it-text-md);
  font-weight: var(--it-weight-semibold);
  line-height: var(--it-leading-snug);
  color: var(--it-color-ink-base);
  margin-top: var(--it-space-6);
  margin-bottom: var(--it-space-0);
}

/*
 * Der Fließtext. 18 Pixel, Durchschuss 1,65, 68 Zeichen Zeilenlänge. Die drei Werte
 * sind der Unterschied zwischen Ansehen und Lesen; bei 1800 Wörtern je Beitrag ist das
 * keine Feinheit.
 */
.it-text {
  max-width: var(--it-measure-read);
  font-size: var(--it-text-read);
  line-height: var(--it-leading-read);
  color: var(--it-color-ink-base);
}

/*
 * Erst alle Eigenabstände abräumen, dann den Abstand zwischen Geschwistern setzen.
 * Beide Regeln haben dieselbe Spezifität, die spätere gewinnt. Eine Regel wie
 * `.it-text p { margin: 0 }` wäre spezifischer und würde den Absatzabstand still
 * abschalten.
 */
.it-text > * {
  margin-top: var(--it-space-0);
  margin-bottom: var(--it-space-0);
}

.it-text > * + * {
  margin-top: var(--it-space-absatz);
}

.it-text h2 {
  font-size: var(--it-text-xl);
  font-weight: var(--it-weight-bold);
  line-height: var(--it-leading-snug);
  letter-spacing: var(--it-tracking-tight);
  margin-top: var(--it-space-12);
  margin-bottom: var(--it-space-0);
}

.it-text h3 {
  font-size: var(--it-text-md);
  font-weight: var(--it-weight-semibold);
  line-height: var(--it-leading-snug);
  margin-top: var(--it-space-8);
  margin-bottom: var(--it-space-0);
}

.it-text ul,
.it-text ol {
  padding-left: var(--it-space-6);
  margin-bottom: var(--it-space-0);
}
.it-text li + li {
  margin-top: var(--it-space-2);
}
.it-text ul {
  list-style: none;
  padding-left: var(--it-space-0);
}
.it-text ul > li {
  padding-left: var(--it-space-6);
  position: relative;
}
/* Das Quadrat als Aufzählungszeichen. Ein Quadrat, nie ein Punkt. */
.it-text ul > li::before {
  content: '';
  position: absolute;
  left: var(--it-space-0);
  top: var(--it-space-3);
  width: var(--it-space-2);
  height: var(--it-space-2);
  background: var(--it-color-accent-base);
}

.it-text strong {
  font-weight: var(--it-weight-semibold);
}

.it-text code {
  font-family: var(--it-font-mono);
  font-size: var(--it-text-sm);
  background: var(--it-color-surface-subtle);
  padding-left: var(--it-space-1);
  padding-right: var(--it-space-1);
}

/* Das Zitat. Die Linie trägt den Akzent, der Text steht in ink. */
.it-zitat {
  margin-left: var(--it-space-0);
  margin-right: var(--it-space-0);
  padding-left: var(--it-space-6);
  border-left: var(--it-border-accent-bar) var(--it-border-style-solid) var(--it-color-accent-base);
  font-size: var(--it-text-md);
  line-height: var(--it-leading-snug);
  color: var(--it-color-ink-base);
}

.it-trenner {
  border: var(--it-space-0);
  border-top: var(--it-border-hairline) var(--it-border-style-dashed) var(--it-color-line-base);
  margin-top: var(--it-space-12);
  margin-bottom: var(--it-space-12);
}

/* ---------- 5. Übersicht der Beiträge ---------- */

/*
 * Rein typografisch, ohne Beitragsbilder. Die Bilder der alten Website sind nicht
 * überliefert, und ein erfundenes Bild je Beitrag wäre Füllmaterial samt
 * Kennzeichnungspflicht. Die Übersicht trägt Datum, Rubrik, Titel, Vorspann.
 */
.it-liste {
  list-style: none;
  margin: var(--it-space-0);
  padding: var(--it-space-0);
}

.it-eintrag {
  padding-top: var(--it-space-8);
  padding-bottom: var(--it-space-8);
  border-bottom: var(--it-border-hairline) var(--it-border-style-solid) var(--it-color-line-base);
}

.it-eintrag__datum {
  font-family: var(--it-font-mono);
  font-size: var(--it-text-xs);
  letter-spacing: var(--it-tracking-mono-label);
  color: var(--it-color-ink-muted);
  text-transform: uppercase;
}

.it-eintrag__titel {
  font-size: var(--it-text-lg);
  font-weight: var(--it-weight-bold);
  line-height: var(--it-leading-snug);
  letter-spacing: var(--it-tracking-tight);
  margin-top: var(--it-space-2);
  margin-bottom: var(--it-space-0);
  max-width: var(--it-measure-read);
}
.it-eintrag__titel a {
  color: var(--it-color-ink-base);
  text-decoration: none;
}
.it-eintrag__titel a:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--it-underline-thickness);
  text-underline-offset: var(--it-underline-offset);
}

.it-eintrag__vorspann {
  max-width: var(--it-measure-read);
  color: var(--it-color-ink-muted);
  margin-top: var(--it-space-2);
  margin-bottom: var(--it-space-0);
}

.it-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--it-space-2);
  list-style: none;
  padding: var(--it-space-0);
  margin-top: var(--it-space-4);
  margin-bottom: var(--it-space-0);
  font-family: var(--it-font-mono);
  font-size: var(--it-text-xs);
  color: var(--it-color-ink-muted);
}

/* Zurück und Weiter am Fuß des Beitrags */
.it-blaettern {
  display: grid;
  gap: var(--it-space-6);
  margin-top: var(--it-space-16);
  padding-top: var(--it-space-8);
  border-top: var(--it-border-strong) var(--it-border-style-solid) var(--it-color-line-strong);
}
.it-blaettern__marke {
  font-family: var(--it-font-mono);
  font-size: var(--it-text-xs);
  letter-spacing: var(--it-tracking-mono-label);
  color: var(--it-color-ink-muted);
  text-transform: uppercase;
}

/* ---------- 6. Hinweise und Autorenbox ---------- */

/*
 * Drei Hinweisarten, eine Form. Sie stehen sichtbar am Text und nicht im Impressum:
 *
 *   ki        maschinelle Unterstützung, Artikel 50 KI-VO
 *   interesse die Rolle des Autors bei den Firmen, über die er schreibt
 *   recht     kein Rechtsrat
 */
.it-hinweis {
  max-width: var(--it-measure-read);
  background: var(--it-color-surface-subtle);
  border-left: var(--it-border-accent-bar) var(--it-border-style-solid) var(--it-color-line-strong);
  padding: var(--it-space-4) var(--it-space-6);
  font-size: var(--it-text-sm);
  line-height: var(--it-leading-normal);
  color: var(--it-color-ink-muted);
  margin-top: var(--it-space-8);
}

.it-hinweis__marke {
  display: block;
  font-family: var(--it-font-mono);
  font-size: var(--it-text-xs);
  letter-spacing: var(--it-tracking-mono-label);
  text-transform: uppercase;
  color: var(--it-color-ink-base);
  margin-bottom: var(--it-space-2);
}

.it-hinweis--interesse {
  border-left-color: var(--it-color-accent-base);
}

.it-autor {
  max-width: var(--it-measure-read);
  display: grid;
  gap: var(--it-space-6);
  margin-top: var(--it-space-16);
  padding-top: var(--it-space-8);
  border-top: var(--it-border-hairline) var(--it-border-style-solid) var(--it-color-line-base);
}

/* Bei einer Personenmarke trägt das Porträt. Es steht deshalb größer als ein
   Beiwerk-Bild, aber klein genug, um den Text nicht zu verdrängen. */
.it-autor__bild {
  width: var(--it-space-24);
  height: var(--it-space-24);
  object-fit: cover;
  display: block;
}

.it-autor__name {
  font-size: var(--it-text-md);
  font-weight: var(--it-weight-semibold);
  margin: var(--it-space-0);
}

.it-autor__text {
  color: var(--it-color-ink-muted);
  font-size: var(--it-text-sm);
  line-height: var(--it-leading-normal);
  margin-top: var(--it-space-2);
  margin-bottom: var(--it-space-0);
}

/*
 * Das Porträt auf der Über-Seite. Größer als in der Autorenbox, weil dort der Beitrag
 * die Hauptsache ist und hier die Person.
 */
.it-portraet {
  width: var(--it-space-32);
  height: var(--it-space-32);
  object-fit: cover;
  display: block;
  margin-bottom: var(--it-space-8);
}

/* ---------- 7. Bedienelemente ---------- */

.it-knopf {
  display: inline-block;
  padding: var(--it-space-3) var(--it-space-6);
  border: var(--it-border-hairline) var(--it-border-style-solid) transparent;
  border-radius: var(--it-radius-none);
  font-family: var(--it-font-ui);
  font-size: var(--it-text-sm);
  font-weight: var(--it-weight-semibold);
  line-height: var(--it-leading-snug);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--it-duration-fast) var(--it-easing-standard);
}

.it-knopf--primaer {
  background: var(--it-color-accent-base);
  color: var(--it-color-accent-on-accent);
}
.it-knopf--primaer:hover {
  background: var(--it-color-accent-hover);
}

.it-knopf--zweit {
  background: transparent;
  color: var(--it-color-ink-base);
  border-color: var(--it-color-line-strong);
}
.it-knopf--zweit:hover {
  background: var(--it-color-surface-subtle);
}

.it-feld {
  display: block;
  width: 100%;
  padding: var(--it-space-3);
  border: var(--it-border-hairline) var(--it-border-style-solid) var(--it-color-line-strong);
  border-radius: var(--it-radius-none);
  background: var(--it-color-surface-raised);
  color: var(--it-color-ink-base);
  font-family: var(--it-font-ui);
  font-size: var(--it-text-base);
}
.it-feld::placeholder {
  color: var(--it-color-ink-subtle);
}

.it-feld__marke {
  display: block;
  font-size: var(--it-text-sm);
  font-weight: var(--it-weight-medium);
  margin-bottom: var(--it-space-2);
}

/*
 * Ein Fehler wird durch Text und Gewicht gekennzeichnet, nicht durch Farbe. Diese Marke
 * hat keine Zustandsfarben, siehe ADR 0002. Rot wäre ohnehin die schwächere
 * Kennzeichnung: Wer es nicht unterscheiden kann, sieht nur ein Feld.
 */
.it-feld[aria-invalid='true'] {
  border-width: var(--it-border-strong);
}
.it-feld__fehler {
  display: block;
  font-size: var(--it-text-sm);
  font-weight: var(--it-weight-semibold);
  color: var(--it-color-ink-base);
  margin-top: var(--it-space-2);
}

/* ---------- 8. Abstände ---------- */

/*
 * Wenige benannte Abstandsklassen statt style-Attribute im HTML.
 *
 * Sie sind hier, weil die Content-Security-Policy Inline-Styles verbietet: Die Site
 * führt kein JavaScript aus und lädt nichts von fremden Servern, deshalb steht in der
 * .htaccess `default-src 'none'`. Ein style-Attribut wäre damit blockiert, und die
 * Abstände fielen auf null, ohne dass irgendetwas kaputt aussieht, das man lokal sähe.
 *
 * Der Umweg über 'unsafe-inline' stünde offen und wäre falsch: Gestaltung gehört ins
 * Stylesheet, nicht in die Auszeichnung. Die Regel und die Sicherheitsvorgabe wollen
 * hier dasselbe.
 */
.it-luft-2 { margin-top: var(--it-space-2); }
.it-luft-4 { margin-top: var(--it-space-4); }
.it-luft-6 { margin-top: var(--it-space-6); }
.it-luft-8 { margin-top: var(--it-space-8); }
.it-luft-12 { margin-top: var(--it-space-12); }
.it-luft-24 { margin-top: var(--it-space-24); }

/* Die Marke im Fußbereich steht kleiner als in der Kopfzeile. */
.it-fuss__marke {
  height: var(--it-space-6);
  width: auto;
  display: block;
}

/* Autorenbox ohne Porträt: eine Spalte statt zwei. */
.it-autor--ohne-bild {
  grid-template-columns: 1fr;
}

/* Der Sprachhinweis im Fußbereich, kleiner als der übrige Text. */
.it-fuss__sprache {
  margin-top: var(--it-space-2);
  font-size: var(--it-text-xs);
}

/* ---------- 9. Dunkle Zonen ---------- */

/*
 * Auf surface.inverse erreicht der Akzent 8,56:1 und ist dort als Text zulässig. Das ist
 * die einzige Stelle, an der er als Schrift erscheint.
 *
 * Der Fußbereich ist eine dunkle Zone und trägt deshalb beide Klassen. Wer eine neue
 * dunkle Fläche baut, setzt `it-inverse` dazu, sonst gelten die hellen Regeln weiter.
 */
.it-inverse {
  background: var(--it-color-surface-inverse);
  color: var(--it-color-ink-on-inverse);
}
.it-inverse .it-meta,
.it-inverse .it-autor__text,
.it-inverse .it-eintrag__datum {
  color: var(--it-color-ink-muted-on-inverse);
}
.it-inverse .it-akzent {
  color: var(--it-color-accent-base);
}
.it-inverse .it-link,
.it-inverse .it-text a {
  text-decoration-color: var(--it-color-line-on-inverse);
}
.it-inverse .it-link:hover {
  text-decoration-color: var(--it-color-ink-on-inverse);
}
.it-inverse :focus-visible {
  outline-color: var(--it-color-line-focus-on-inverse);
}
.it-inverse .it-eintrag {
  border-bottom-color: var(--it-color-line-on-inverse);
}
.it-inverse .it-knopf--zweit {
  color: var(--it-color-ink-on-inverse);
  border-color: var(--it-color-line-focus-on-inverse);
}

/* ---------- Breite Ansicht ---------- */

@media (min-width: 768px) {
  .it-bahn {
    padding-left: var(--it-space-12);
    padding-right: var(--it-space-12);
  }
  .it-blaettern {
    grid-template-columns: 1fr 1fr;
  }
  .it-autor {
    grid-template-columns: auto 1fr;
  }
}