/* ═══════════════════════════════════════════════════════════════════════════
   Das Handwerk als Stylesheet. OHNE ZAHLEN.

   Warum ohne Zahlen: Die frühere Fassung führte hier eine vollständige
   Wertetafel — fünf Größen, fünf Laufweiten, acht Abstände, zwei Radien,
   Seitenbreite, Bewegungsdauern. Sie stand unter der Überschrift „Handwerk",
   war aber eine Gestaltungsentscheidung. Die Marke durfte Farben ändern und
   sonst nichts. Das war der eigentliche Grund, warum jedes Projekt gleich
   aussah — nicht die Vorlage.

   Hier steht deshalb nur, was über die Werte GELTEN muss. Die Werte selbst
   kommen aus der Wertetafel des Projekts, die nach dieser Datei geladen wird.

   Die einzigen Zahlen, die bleiben dürfen, folgen aus einer Norm. Sie sind
   an Ort und Stelle mit ihrer Herkunft vermerkt.

   Die Schichten sind der Grund, warum das hält: eine spätere Regel gewinnt
   nicht mehr dadurch, dass sie später steht.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer grund, wertetafel, aufbau, bauteile, bewegung, projekt;

/* ── Grundstellung ──────────────────────────────────────────────────────────
   Alles, was der Browser mitbringt und was uns im Weg steht. */
@layer grund {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }

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

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--schrift-text);
    font-size: var(--g-text);
    line-height: var(--zh-text);
    letter-spacing: var(--sp-text);
    font-weight: var(--gewicht-normal);
    -webkit-font-smoothing: antialiased;
    /* Nichts rutscht seitwärts. Breite Inhalte scrollen in ihrem eigenen
       Kasten — der Seitenkörper nie. (P12) */
    overflow-x: clip;
  }

  img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; }

  /* Bedienelemente erben die Schrift nicht von selbst, und `font: inherit`
     setzt die Laufweite zurück. Wer das vergisst, hat dieselbe Größe mit zwei
     Laufweiten auf der Seite und sieht es nie. (H2 hat genau das gefunden.) */
  input, button, textarea, select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  /* Ohne diese Regel setzt der Browser sein eigenes Blau — eine Farbe, die in
     keiner Rolle der Wertetafel steht. (H12 hat genau das gefunden.) */
  a { color: var(--akzent); text-underline-offset: .18em; }
  a:hover { color: var(--akzent-tief); }

  /* Der Fokus wird nie weggenommen. Wer ihn nimmt, sperrt jeden aus, der nicht
     mit der Maus arbeitet. Die 2px sind kein Gestaltungswert, sondern die
     Untergrenze, ab der ein Ring über P1 den nötigen Kontrast tragen kann. */
  :focus-visible {
    outline: 2px solid var(--fokus);
    outline-offset: 3px;
  }
}

/* ── Schrift ────────────────────────────────────────────────────────────────
   Größe, Zeilenabstand und Laufweite stehen IMMER zusammen in einem Block.
   Getrennt gepflegt laufen sie auseinander, und niemand merkt es beim
   Draufschauen. (H2, H3)

   Wie viele Stufen es gibt, entscheidet die Richtung. Diese Datei bietet vier
   Überschriftenrollen an; eine Richtung mit weniger Stufen setzt einfach
   mehrere auf denselben Wert. Sie schreibt damit keine Anzahl vor. */
@layer grund {
  h1 {
    font-family: var(--schrift-kopf);
    font-size: var(--g-1); line-height: var(--zh-1); letter-spacing: var(--sp-1);
    font-weight: var(--gewicht-kopf); text-wrap: balance;
  }
  h2 {
    font-family: var(--schrift-kopf);
    font-size: var(--g-2); line-height: var(--zh-2); letter-spacing: var(--sp-2);
    font-weight: var(--gewicht-kopf); text-wrap: balance;
  }
  h3 {
    font-family: var(--schrift-kopf);
    font-size: var(--g-3); line-height: var(--zh-3); letter-spacing: var(--sp-3);
    font-weight: var(--gewicht-kopf); text-wrap: balance;
  }
  h4, h5, h6 {
    font-family: var(--schrift-kopf);
    font-size: var(--g-4); line-height: var(--zh-4); letter-spacing: var(--sp-4);
    font-weight: var(--gewicht-kopf);
  }
  /* ── Drei Textgrößen, und jede hat ihre Farbe fest ───────────────────────
       L  .vorspann   Einstiegssatz eines Abschnitts   --ink
       M  p           alles, was gelesen wird          --ink-2
       S  .klein      Fußnote, Hinweis, Kleingedrucktes --ink-2

     Vorher gab es dieselbe Größe in zwei Farben — der Vorspann war heller als
     der Fließtext darunter, obwohl er der wichtigere Satz ist. Wer Größe und
     Farbe getrennt vergibt, bekommt am Ende sechs Kombinationen und keine
     Ordnung. Hier hängen sie zusammen, und Hervorhebung IN einer Zeile
     (<b>, .stufe-name) ist die einzige Ausnahme. */
  .vorspann {
    font-size: var(--g-vorspann); line-height: var(--zh-vorspann);
    letter-spacing: var(--sp-vorspann); color: var(--ink);
  }
  small, .klein, figcaption, caption {
    font-size: var(--g-klein); line-height: var(--zh-klein);
    letter-spacing: var(--sp-klein); color: var(--ink-2);
  }

  /* Zeilen bleiben lesbar. Breiter als etwa 80 Zeichen findet das Auge den
     Zeilenanfang nicht mehr. Wie schmal genau, entscheidet die Richtung. (H4) */
  p, li { max-width: var(--zeilenbreite); text-wrap: pretty; }
  /* M — der Fließtext. Siehe die drei Rollen oben. */
  p { color: var(--ink-2); }
  /* Hervorhebung IN einer Zeile ist die einzige Ausnahme von der Regel
     „Größe bestimmt die Farbe". Sie wechselt die Farbe, nicht die Größe. */
  p b, p strong, li b, li strong { color: var(--ink); font-weight: var(--gewicht-kopf); }
}

/* ── Aufbau ─────────────────────────────────────────────────────────────────
   Die Abstände kommen als ROLLEN, nicht als Leiterstufen. Damit bleibt die
   Anzahl der Stufen frei: die Richtung bildet ihre Leiter auf diese vier
   Rollen ab. */
@layer aufbau {
  section { padding-block: var(--raum-block); }

  .bahn {
    width: min(100% - 2 * var(--raum-rand), var(--seitenbreite));
    margin-inline: auto;
  }

  .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-spalte); align-items: center; }
  .zwei.gespiegelt > :first-child { order: 2; }
  .mitte { max-width: var(--zeilenbreite-weit); margin-inline: auto; text-align: center; }
  .raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--kachel-min), 100%), 1fr));
    gap: var(--raum-gruppe);
  }

  @media (max-width: 780px) {
    .zwei { grid-template-columns: 1fr; gap: var(--raum-gruppe); }
    .zwei.gespiegelt > :first-child { order: 0; }
  }

  /* Luft gruppiert: über einer Überschrift mehr Platz als darunter. Sonst hängt
     sie am vorigen Absatz, und der Leser ordnet sie dem falschen Gedanken zu.
     Das ist die eine Regel, die eine Seite sofort gestaltet aussehen lässt. (H9) */
  * + h2, * + h3, * + h4 { margin-block-start: var(--raum-gruppe); }
  h1 + *, h2 + *, h3 + *, h4 + * { margin-block-start: var(--raum-eng); }
  p + p, p + .knopfzeile, ul + p, .vorspann + * { margin-block-start: var(--raum-eng); }
}

/* ── Bauteile ───────────────────────────────────────────────────────────────
   Wie Tiefe entsteht, entscheidet die Richtung: über Flächenhelligkeit, über
   Haarlinien, über Schatten oder über Durchsicht. Diese Datei schreibt keinen
   der vier Wege vor — sie stellt nur sicher, dass der gewählte Weg über
   Variablen läuft und damit überall derselbe ist. (H7, H12) */
@layer bauteile {
  .flaeche {
    background: var(--flaeche);
    border-radius: var(--r-flaeche);
    padding: var(--raum-gruppe);
    border: var(--flaeche-linie, none);
    box-shadow: var(--flaeche-schatten, none);
  }

  .knopf {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--raum-eng);
    /* 24px ist die Zielgröße aus WCAG 2.2, 2.5.8 — eine motorische Schwelle,
       keine Gestaltungsentscheidung. Die Richtung darf großzügiger sein. */
    min-height: max(24px, var(--knopf-hoehe));
    padding-inline: var(--raum-gruppe);
    border-radius: var(--r-knopf);
    background: var(--akzent);
    color: var(--auf-akzent);
    font-weight: var(--gewicht-kopf);
    text-decoration: none;
    cursor: pointer;
    border: 0;
    transition: background var(--mo-kurz) var(--mo-kurve);
  }
  .knopf:hover { background: var(--akzent-tief); }
  /* Ein zweiter Weg darf leiser sein. Ob es ihn gibt, entscheidet der Auftrag. */
  .knopf.leise { background: var(--flaeche); color: var(--ink); }
  .knopfzeile { display: flex; flex-wrap: wrap; gap: var(--raum-eng); align-items: center; }
  .mitte .knopfzeile { justify-content: center; }

  /* Für alle unsichtbar, bis jemand die Tabulatortaste benutzt. (P3) */
  .sprung {
    position: absolute; left: var(--raum-eng); top: var(--raum-eng);
    padding: var(--raum-eng); border-radius: var(--r-knopf);
    background: var(--flaeche); color: var(--ink); transform: translateY(-200%);
  }
  .sprung:focus { transform: none; }

  .rollt { overflow-x: auto; }
  table { border-collapse: collapse; width: 100%; }
  th, td { text-align: left; padding: var(--raum-eng) var(--raum-eng) var(--raum-eng) 0; }
  tbody tr + tr th, tbody tr + tr td { border-top: 1px solid var(--linie); }

  form { display: grid; gap: var(--raum-eng); }
  label { display: grid; gap: var(--raum-knapp); }
  input, textarea, select {
    min-height: max(24px, var(--knopf-hoehe));
    padding-inline: var(--raum-eng);
    background: var(--flaeche); color: var(--ink);
    border: var(--feld-linie, none);
    border-radius: var(--r-knopf);
  }
  textarea { padding-block: var(--raum-eng); }
}

/* ── Bewegung ───────────────────────────────────────────────────────────────
   Der Ruhezustand im HTML ist SICHTBAR. Die Freigabe hängt an der
   Scrollposition — und zwar am Browser selbst, nicht an einem Programm.

   Das ist der Unterschied zur ersten Fassung: dort gab ein Beobachter frei, und
   zwei Reparaturversuche am Zeitpunkt haben es nicht behoben. Mit
   animation-timeline gibt es keinen Zeitpunkt mehr, an dem sich etwas
   verzählen könnte. Fehlt die Unterstützung, fehlt die Bewegung — die Seite
   bleibt vollständig. (P9, P10, P11, H17)

   Eine Richtung darf sagen: keine Bewegung. Dann wird .auf nicht vergeben. */
@layer bewegung {
  @keyframes auf {
    from { opacity: 0; transform: translateY(var(--mo-hub)); }
    to   { opacity: 1; transform: none; }
  }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .auf, .auf-takt > * {
        animation: auf linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
      }
    }
  }
}