/* ============================================================================
   A–Z des agilen Arbeitens — Begriffsregister.

   Dritte Fassung derselben Familie. Das Buch fuehrt Magenta, die Work–Feedback
   Loop fuehrt Teal. Beide sind kalt. Ein Nachschlagewerk ist der trockenste der
   drei Texte, und warm war noch frei: Ocker. Es steht dem Teal fast gegenueber,
   und dorthin verlinkt das A–Z am haeufigsten — der Kontrast ist Absicht.

   Zwei Dinge sind hier anders als bei den Geschwistern, beide aus dem Inhalt:

   1. Der Belegapparat. Die Regel lautet "ohne Fundstelle kein Satz". Belege
      stehen deshalb nicht als Fussnoten am Ende, sondern sichtbar neben der
      Aussage — in der Mono-Schrift, die in dieser Familie fuer Werkzeug und
      Daten steht.
   2. Das Register ist nach Themen gegliedert, nicht nach Buchstaben. Sechs
      Buchstaben haetten gar keine Eintraege; eine Sortierung, deren Faecher
      leer bleiben, ordnet nichts.

   Schriften liegen lokal. Nichts wird aus dem Netz geladen.
   ========================================================================= */

/* ------------------------------------------------------------------ Schriften */

@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage-grotesque-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("fonts/literata-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("fonts/literata-italic-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* --------------------------------------------------------------------- Marken */

:root {
  --tinte: #26211a;          /* 13,9:1 auf Weiss — waermer als Buch und WFL */
  --text: #3d372e;
  --gedimmt: #6b6357;        /* 5,3:1 */

  /* Zwei Ocker mit klarer Aufgabenteilung, wie Magenta im Buch und Teal in
     der WFL. --signal traegt Grafik und braucht nur 3:1 (WCAG 1.4.11),
     --signal-satt traegt Text und braucht 4,5:1. Der hellere Ton neben
     schwarzem Fliesstext wirkt blass, deshalb zwei statt einem. */
  --signal: #b8791f;         /* 3,63:1 */
  --signal-satt: #7a4f0f;    /* 7,11:1 */

  --grund: #ffffff;
  --brett: #f6f3ee;          /* warmes Papier, nicht das kalte Grau der WFL */
  --linie: #e2dcd2;
  --linie-stark: #c6bcac;
  /* Rahmen von Bedienelementen. --linie allein erreicht die 3:1 aus
     WCAG 1.4.11 nicht; das ist der leisere Ton fuer blosse Trenner. */
  --kante: #8a8072;
  --auf-flaeche: #ffffff;
  --schleier: rgba(38, 33, 26, 0.45);
  --schatten: 0 1px 2px rgba(38, 33, 26, 0.06);

  --display: "Bricolage", "Helvetica Neue", Arial, sans-serif;
  --lesen: "Literata", Georgia, "Times New Roman", serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --mass: 36rem;             /* Lesebreite, rund 68 Zeichen */
  --apparat: 15rem;          /* Belegspalte */
  --rand: clamp(1.25rem, 4vw, 3rem);
  --kopfhoehe: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinte: #f0eae0;
    --text: #d2cabd;
    --gedimmt: #9c9284;
    /* Im Dunkeln kehrt sich die Helligkeitsrichtung um: --signal-satt wird
       heller als --signal, nicht dunkler. Gleiche Logik wie bei beiden
       Geschwistern. */
    --signal: #d99a2b;       /* 7,07:1 auf --grund */
    --signal-satt: #e0a445;  /* 7,85:1 */
    --grund: #1a1713;
    --brett: #14110e;
    --linie: #322c24;
    --linie-stark: #4a4136;
    --kante: #7d7365;
    --auf-flaeche: #1a1713;
    --schleier: rgba(0, 0, 0, 0.62);
    /* Auf dunklem Grund traegt ein Schlagschatten nichts und macht die
       Kante nur unsauber. */
    --schatten: none;
  }
}

/* ----------------------------------------------------------------- Grundlagen */

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

html {
  /* 100 %, nicht 16px: eine feste Pixelgroesse ueberschreibt die
     Schriftgroesse, die der Leser im Browser eingestellt hat. */
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopfhoehe) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--lesen);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
  border-radius: 2px;
}

.sprungmarke {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--tinte);
  color: var(--auf-flaeche);
  font-family: var(--display);
  text-decoration: none;
  border-radius: 4px;
  transition: top 0.15s;
}
.sprungmarke:focus { top: 0.5rem; }

/* ---------------------------------------------------------------- Typografie */

h1, h2, h3 {
  font-family: var(--display);
  color: var(--tinte);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h2 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 1.8rem); margin: 3rem 0 0.9rem; }
h3 { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.3rem); margin: 2.2rem 0 0.6rem; }

p { margin: 0 0 1.35rem; }
ul, ol { margin: 0 0 1.35rem; padding-left: 1.4rem; }
li { margin-bottom: 0.45rem; }

strong { font-weight: 700; color: var(--tinte); }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 0.1em 0.3em;
  border-radius: 3px;
  background: var(--brett);
}

/* ------------------------------------------------------------------ Kopfleiste */

.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--kopfhoehe);
  padding: 0.55rem var(--rand);
  /* Durchscheinend, nicht deckend: eine deckende Leiste erzeugt auf einer
     Textseite eine harte Kante, die mit dem Text konkurriert. */
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
@supports not (backdrop-filter: blur(10px)) {
  .kopfleiste { background: var(--grund); }
}

.kopfleiste a { color: var(--gedimmt); text-decoration: none; }
.kopfleiste a:hover { color: var(--signal-satt); }
.kopfleiste-mitte { margin-left: auto; display: flex; gap: 1.1rem; }

/* ---------------------------------------------------------------------- Huelle */

.inhalt {
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 var(--rand) 5rem;
}

/* --------------------------------------------------------------- Aufmacher */

.aufmacher { padding: 3.5rem 0 2.5rem; }

.aufmacher-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gedimmt);
  margin: 0 0 1rem;
}

.aufmacher h1 {
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 0.75rem;
}

.aufmacher-untertitel {
  font-size: 1.15rem;
  color: var(--gedimmt);
  max-width: var(--mass);
  margin: 0 0 1.5rem;
}

.mass-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--gedimmt);
  padding: 0.7rem 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  margin: 0;
}

/* ------------------------------------------------------------- Buchstabenband */

.buchstaben {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.buchstaben a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  padding: 0.3rem 0.4rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--signal-satt);
  text-decoration: none;
  border: 1px solid var(--linie);
  border-radius: 3px;
}
.buchstaben a:hover {
  border-color: var(--signal);
  background: var(--brett);
}
/* Buchstaben ohne Eintraege werden gar nicht erst gerendert — ein
   ausgegrauter Knopf ist eine Fehlmeldung, die man erst beim Klicken merkt. */

/* ------------------------------------------------------------------- Register */

.gruppe { margin: 3.5rem 0 0; }

.gruppe-titel {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gedimmt);
  margin: 0 0 0.2rem;
}

/* Spalten, kein Grid. Ein zweispaltiges Grid koppelt die Zeilen: Jede Reihe
   wird so hoch wie ihr laengerer Eintrag, und neben einer einzeiligen
   Kurzdefinition stand dann die Luecke einer vierzeiligen. Das sah nach
   Fehler aus und war die Bauart.

   Spalten fliessen stattdessen untereinander, wie das Register am Buchende:
   erst die linke Spalte hinunter, dann die rechte. Kein Eintrag haengt mehr
   an der Hoehe seines Nachbarn. */
.gruppe-zeilen {
  columns: 2;
  column-gap: 2.5rem;
  border-top: 1px solid var(--linie-stark);
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (max-width: 52rem) {
  .gruppe-zeilen { columns: 1; }
}

/* Ein Begriff ist eine Zeile, kein Kasten. Hundert gerahmte Kaesten mit je
   eigener Hoehe ergeben ein unruhiges Bild, und der Rahmen traegt keine
   Information. Getrennt wird mit Haarlinien. */
/* Ohne das reisst der Spaltenumbruch einen Eintrag mittendurch: Stichwort
   unten links, Kurzdefinition oben rechts. */
.zeile { margin: 0; break-inside: avoid; }

/* Wer aus einem Begriffstext auf einen Registereintrag springt, landet
   mitten in einer langen Liste. Ohne Markierung liest sich das, als waere
   der Link ins Leere gegangen: Der Browser scrollt stumm, und die Zeile
   sieht aus wie ihre siebzig Nachbarn.

   Das gilt fuer beide Sorten Zeile, deshalb der Kindselektor: Link und
   div tragen Polsterung und Trennlinie, das li selbst nicht. */
.zeile:target > * {
  background: var(--brett);
  box-shadow: inset 3px 0 0 var(--signal);
  border-bottom-color: var(--signal);
}

.zeile a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 0.6rem;
  padding: 0.6rem 0.5rem;
  margin-inline: -0.5rem;
  border-bottom: 1px solid var(--linie);
  border-radius: 3px;
  text-decoration: none;
  color: var(--tinte);
}
.zeile a:hover {
  background: var(--brett);
  border-bottom-color: var(--signal);
}

.zeile-stichwort {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.25;
}

/* Der einzige Unterschied zwischen zwei Registerzeilen: Zu diesem Begriff
   gibt es eine Seite. Ein Zeichen, eine Bedeutung. Wortmarken standen hier
   frueher und sagten dem Leser etwas ueber unsere Planung statt ueber den
   Text. Fuer Screenreader traegt der Link selbst die Auskunft, deshalb
   aria-hidden. */
.zeile-mehr {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--signal);
}
.zeile a:hover .zeile-mehr { color: var(--signal-satt); }

.zeile-kurz {
  grid-column: 1 / -1;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--gedimmt);
  margin: 0.15rem 0 0;
}

/* Ein Eintrag ohne eigene Seite ist kein Link, sondern nur Text. */
.zeile-ohne-seite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 0.6rem;
  padding: 0.6rem 0.5rem;
  margin-inline: -0.5rem;
  border-bottom: 1px solid var(--linie);
}

/* -------------------------------------------------------------- Begriffsseite */

.begriff {
  display: grid;
  grid-template-columns: minmax(0, var(--mass)) var(--apparat);
  gap: 0 3rem;
  align-items: start;
  padding: 2.5rem 0 0;
}
@media (max-width: 62rem) {
  .begriff { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

.begriff-text { min-width: 0; }

.brotkrumen {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--gedimmt);
  margin: 0 0 1.2rem;
}
.brotkrumen a { color: var(--gedimmt); text-decoration: none; }
.brotkrumen a:hover { color: var(--signal-satt); text-decoration: underline; }

.begriff h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 1.2rem;
}

/* Der Antwortblock. Er steht direkt unter der Ueberschrift, ohne Vorrede und
   ohne Inhaltsverzeichnis davor — das ist die Passage, die zitiert wird, und
   sie steht wortgleich auch im Schema und in der meta description. */
.antwort {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--tinte);
  border-left: 3px solid var(--signal);
  padding-left: 1.1rem;
  margin: 0 0 1.5rem;
}

.stand {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--gedimmt);
  margin: 0 0 2.5rem;
}

.begriff-text a {
  color: var(--signal-satt);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* --------------------------------------------------------- Der Belegapparat */

/* Die inhaltliche Regel des Projekts lautet: ohne Fundstelle kein Satz.
   Der Apparat macht sie sichtbar, statt sie in Fussnoten zu verstecken.
   Auf schmalen Viewports klappt er unter die Aussage, auf die er sich
   bezieht — er wandert also, statt zu verschwinden. */
.apparat {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--gedimmt);
  position: sticky;
  top: calc(var(--kopfhoehe) + 1.5rem);
}
@media (max-width: 62rem) {
  .apparat {
    position: static;
    margin: 2rem 0 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--linie-stark);
  }
}

.apparat-titel {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gedimmt);
  margin: 0 0 0.8rem;
}

/* Quelle sichtbar, Zitat auf Zuruf. Vier vollstaendige Zitate nebeneinander
   lasen sich als zweiter Text neben dem ersten; der Apparat soll den Beleg
   greifbar halten, nicht mitlesen. Das Zitat bleibt im DOM. */
.beleg {
  margin: 0 0 1.1rem;
  padding: 0 0 0 0.9rem;
  border-left: 2px solid var(--linie-stark);
}
.beleg-kanonisch { border-left-color: var(--signal); }

.beleg-quelle { margin: 0; }
.beleg-quelle a { color: var(--signal-satt); text-decoration: none; }
.beleg-quelle a:hover { text-decoration: underline; }
.beleg cite { font-style: normal; }

.beleg summary {
  cursor: pointer;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  color: var(--gedimmt);
  list-style: none;
}
.beleg summary::-webkit-details-marker { display: none; }
.beleg summary::before { content: "▸ "; }
.beleg details[open] summary::before { content: "▾ "; }
.beleg summary:hover { color: var(--signal-satt); }

.beleg blockquote {
  margin: 0.5rem 0 0;
  padding-left: 0.6rem;
  border-left: 1px solid var(--linie);
  font-family: var(--lesen);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
  font-style: italic;
}
.beleg blockquote p { margin: 0; }

/* Ohne JavaScript oeffnet <details> weiterhin per Klick -- das ist reines
   HTML. Beim Drucken werden alle Zitate ausgeklappt, damit ein Ausdruck
   die Belege vollstaendig traegt. */
@media print {
  .beleg details { display: block; }
  .beleg blockquote { display: block !important; }
  .beleg summary { display: none; }
}

/* --------------------------------------------------------------- Verwandtes */

.verwandt { margin: 3rem 0 0; padding: 0; list-style: none; }
.verwandt li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0 0.8rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--linie);
  margin: 0;
}
@media (max-width: 34rem) {
  .verwandt li { grid-template-columns: 1fr; }
}

.verwandt-art {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gedimmt);
  padding-top: 0.15em;
}

.nachbarn {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 3.5rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie-stark);
  font-family: var(--mono);
  font-size: 0.76rem;
}
.nachbarn a { color: var(--signal-satt); text-decoration: none; }
.nachbarn a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------- Suche */

.suche { margin: 2rem 0 0; }

.suche input {
  width: 100%;
  max-width: var(--mass);
  padding: 0.6rem 0.8rem;
  font-family: var(--lesen);
  font-size: 1rem;
  color: var(--text);
  background: var(--grund);
  border: 1px solid var(--kante);
  border-radius: 4px;
}
.suche input::placeholder { color: var(--gedimmt); }

.treffer { margin: 1rem 0 0; padding: 0; list-style: none; max-width: var(--mass); }
.treffer li { margin: 0; }
.treffer a {
  display: block;
  padding: 0.45rem 0.5rem;
  margin-inline: -0.5rem;
  border-radius: 3px;
  text-decoration: none;
  color: var(--tinte);
  border-bottom: 1px solid var(--linie);
}
.treffer a:hover { background: var(--brett); }
.treffer-kurz { display: block; font-size: 0.85rem; color: var(--gedimmt); }

/* Ohne JavaScript gibt es keine Suche — dann darf auch kein Feld dastehen,
   das nichts tut. Das Register selbst ist reines HTML und funktioniert. */
.ohne-js .suche { display: none; }

/* --------------------------------------------------------------------- Fuss */

.fuss {
  margin: 4rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--linie);
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--gedimmt);
}
.fuss a { color: var(--gedimmt); }
.fuss a:hover { color: var(--signal-satt); }

/* -------------------------------------------------------------------- Druck */

@media print {
  .kopfleiste, .suche, .nachbarn, .buchstaben { display: none; }
  .begriff { grid-template-columns: 1fr; }
  .apparat { position: static; border-top: 1px solid #ccc; padding-top: 1rem; }
  a { text-decoration: none; color: inherit; }
  .beleg-quelle a::after { content: " (" attr(href) ")"; font-size: 0.7em; }
}