/*
 * Stylesheet des Learn-Bereichs — „Ruhe editorial" (CONCEPT-LEARN §5).
 *
 * Eine Datei für alle 14 Seiten, beide Sprachen. Sie liegt bewusst NICHT in
 * `src/`: die Learn-Seiten sind statisches HTML neben der App, kein Teil des
 * Vite-Bundles. Würde sie mitgebündelt, hätte sie einen gehashten Namen, den
 * ein Generator außerhalb von Vite nicht kennt.
 *
 * Der Token-Block ist trotzdem **nicht** verdoppelt: die Zeile `/* @tokens *\/`
 * unten ersetzt der Build (tools/learn/build.mjs) durch den `:root`-Block aus
 * `src/styles.css`. Damit bleibt es bei genau einer Farbdefinition im Repo
 * (CLAUDE.md 2.9: kein Farbliteral außerhalb der Token-Definition). Fehlt der
 * Marker oder der Block, bricht der Build ab — wie beim Service-Worker-Marker
 * in vite.config.ts.
 *
 * Amber-Budget (1.1 §4, CONCEPT-LEARN §5): den einen **gefüllten** Amber der
 * Seite trägt der CTA am Artikelende. Fließtext-Links stehen in
 * `--amber-deep`, dem internen Amber-Shade (Addendum (b), Notion-Log #41) —
 * Amber selbst erreicht auf Papier nur 4,46:1 und läge damit unter den 4,5:1,
 * die WCAG AA für Text dieser Größe verlangt; `--amber-deep` liegt bei 6,3:1.
 * Dieselbe Wahl trifft die App schon für Amber-Text (siehe `.unlock strong`).
 */

/*
 * Dieselben vier Dateien wie die App (src/fonts/, SIL OFL). Der Build kopiert
 * sie nach /learn/assets/ — kein Fremdabruf, offline identisch. 600 ist hier
 * dabei, weil `**fett**` im Fließtext vorkommt: Browser-Standard wäre 700,
 * und über 600 geht nichts (1.1 §5).
 */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('./newsreader-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('./ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('./ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('./ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}

:root {
  color-scheme: light;

  /* --- Tokens nach Guidelines 1.1 §13 ---
   * Die Namen sind Teil der Spezifikation, nicht Geschmack: wer die Richtlinie
   * liest und hier nachsieht, soll dieselben Woerter finden. Vier Toene, mehr
   * gibt es nicht -- und Amber steht hoechstens einmal pro View. */
  --paper: #F6F1E8;
  --ink: #221D16;
  --amber: #B45309;
  --gray: #6F6455;

  /* Papierkanten: Haarlinien, Kartenrand, Kartenflaeche. Nie fuer Text. */
  --edge: #DED5C4;
  --edge-soft: #E5DCCB;
  --card: #FFFCF6;

  /* Kein Token aus 1.1 §13, sondern der interne hover/active-Shade von Amber
   * -- er erscheint nie als eigenstaendige Flaeche. Addendum (b) von Fable,
   * Notion-Log #41; ohne dieses Addendum waere er eine fuenfte Farbe. */
  --amber-deep: #92400e;

  /* --- Typografie (1.1 §13) ---
   * Beide Familien liegen als woff2 im Repo (siehe @font-face oben) -- kein
   * Fremdabruf, offline identisch. Die Fallback-Stacks decken den kurzen
   * Moment vor dem Laden. */
  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;

  /* Abstaende aus der Skala in 1.1 §6 (4/8/12/16/24/32/48/64), nichts
   * dazwischen. Das frueher definierte --space-4 lag mit 40 px neben der
   * Skala und wurde nirgends benutzt -- es ist ersatzlos weg. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;

  --radius: 10px;
  --hairline: 1px solid var(--edge);

  /* Zwei Dauern, mehr nicht (1.1 §9): Zustand und Layout, beide ease-out. */
  --dur-state: 150ms;
  --dur-layout: 250ms;

  /* Klang-Kennwerte aus 1.1 §13. Dokumentation, keine Quelle: Audio liest kein
   * CSS. Massgeblich sind DEFAULT_TONE_HZ und TONE_RAMP_SECONDS in
   * src/engine/settings.ts -- wer hier etwas aendert, aendert dort mit. */
  --tone-freq: 620;
  --tone-ramp: 0.008;

  /* Kleinste sichere Zielgroesse fuer Finger (WCAG 2.5.5, 1.1 §6). */
  --tap: 44px;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* 17 px: CONCEPT-LEARN §5 weitet den Fließtext für die Lesespalte
   * ausdrücklich auf 16–17 px. Die App bleibt bei 16 (1.1 §5). */
  font: 17px/1.65 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--amber-deep);
  outline-offset: 2px;
}

/* 680 px Lesespalte plus 24 px Rand links und rechts (1.1 §6). */
.page {
  max-width: 728px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Kopfzeile: Wortmarke links, ein leiser Link zur App rechts --- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 24px 0;
  border-bottom: var(--hairline);
}

/* Wortmarke: Newsreader Regular, sentence case, nie gesperrt (1.1 §2). */
.wordmark {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

/* Leise wie `.skip`/`.quiet-action` in der App: 13 px, warmgrau, erst im
 * Hover Amber. Er soll erreichbar sein und sonst nichts. */
.masthead-app,
.page-footer a,
.page-footer span {
  font-size: 13px;
  color: var(--gray);
  text-decoration: none;
}

.masthead-app:hover,
.page-footer a:hover {
  color: var(--amber-deep);
  text-decoration: underline;
}

/* --- Artikel --- */

.article {
  padding: 48px 0 0;
}

h1 {
  margin: 0 0 24px;
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h2 {
  margin: 48px 0 16px;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}

h3 {
  margin: 32px 0 12px;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}

p {
  margin: 0 0 24px;
}

strong {
  font-weight: 600;
}

/* Links: ein Akzent, Unterstreichung erst im Hover (CONCEPT-LEARN §5).
 * Farbe siehe Kopfkommentar (Amber-Budget). */
.article a {
  color: var(--amber-deep);
  text-decoration: none;
}

.article a:hover {
  text-decoration: underline;
}

.article ul {
  margin: 0 0 24px;
  padding-left: 24px;
}

.article li {
  margin-bottom: 8px;
}

/* Eine Zeile, die ganz kursiv steht, ist im Text eine Randnotiz — der
 * Sprachhinweis auf dem Hub, nichts weiter. Sie tritt entsprechend zurück. */
.aside {
  font-size: 15px;
  color: var(--gray);
}

/* Der Punkt in Aufzählungen der Timing-Regeln steht als Text im Inhalt; hier
 * ist nichts zu tun. Tabellen dagegen tragen Haarlinien (1.1 §7) und dürfen
 * auf schmalen Geräten in ihrem eigenen Kasten scrollen — nie die Seite. */
.table-wrap {
  margin: 0 0 24px;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

th {
  padding: 8px 12px 8px 0;
  border-bottom: var(--hairline);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gray);
  text-align: left;
}

td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--edge-soft);
  text-align: left;
  white-space: nowrap;
}

/* --- Trennornament: echter Code, `−− ·−··` = „ML" (1.1 §8) ---
 *
 * Punkt ⌀ 1u, Strich 3u × 1u mit Radius 0.5u, Lücke im Zeichen 1u, zwischen
 * den Buchstaben 3u — hier bei u = 6 px. Dekorativer Fake-Code ist verboten,
 * deshalb steht hier wirklich ML und nicht „irgendwas mit Punkten".
 *
 * Genau einmal pro Seite, vor dem CTA: dort endet der Artikel und beginnt die
 * Einladung. Zwischen jeder Überschrift wäre es Dekoration, und Dekoration
 * gibt es hier nicht.
 */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 48px 0;
}

.ornament-letter {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ornament i {
  display: block;
  height: 6px;
  background: var(--ink);
}

.ornament i[data-kind='dit'] {
  width: 6px;
  border-radius: 50%;
}

.ornament i[data-kind='dah'] {
  width: 18px;
  border-radius: 3px;
}

/* --- Der eine gefüllte Amber-Primary der Seite (1.1 §7) --- */

.cta {
  margin: 0 0 48px;
}

.cta a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 12px 24px;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  /* Auf 390 px bricht die Beschriftung auf zwei Zeilen -- dann soll sie
   * zentriert stehen und Luft haben, nicht am Rand kleben. */
  line-height: 1.3;
  text-align: center;
  color: var(--paper);
  background: var(--amber);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  text-decoration: none;
  transition:
    background-color var(--dur-state) ease-out,
    border-color var(--dur-state) ease-out;
}

.cta a:hover {
  background: var(--amber-deep);
  border-color: var(--amber-deep);
}

/* --- Fußzeile: Sprachwechsel, Hub, © --- */

.page-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 24px 0 48px;
  border-top: var(--hairline);
}

.page-footer span:last-child {
  margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}