/* ROTGLUT · Wissen — nur fuer die Wissensseiten.
   Eigene Datei: rotglut.css bleibt unangetastet, und wer das Wissen wieder
   entfernen will, loescht eine Datei statt Regeln zu suchen. Alle Farben und
   Abstaende kommen aus den vorhandenen Variablen.

   Die Handschrift stammt aus der Menuetafel: durchnummerierte Zeilen, eine
   feine Linie als Trenner, die Glut nur als Markierung — nie als Flaeche. */

/* ── Aufmacher ─────────────────────────────────────────────────────────────
   `.wucht` traegt `padding-block: var(--xxl)` — richtig fuer eine Seite, die
   eine Aussage macht, zu viel fuer ein Inhaltsverzeichnis. */

.wucht--kopf { padding-block: var(--xl) var(--l); }
.wucht--kopf h1 { margin-block: 0; }
.wucht--kopf .wucht__rand { max-width: 52ch; }

/* ── Das Raster ────────────────────────────────────────────────────────────
   Die geschriebene Seite steht vorn und breit, die geplanten folgen
   kleiner. Eine Uebersicht, in der alles gleich gross ist, sagt nicht,
   wo man anfangen soll. */

.wissenskarten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-content: start;
  margin-top: var(--xl);
}

/* ── Die Zeile ─────────────────────────────────────────────────────────── */
/* Erst ein Kartenraster mit Bildern, dann ohne. Ohne Bild hatte die erste
   Karte, die ueber zwei Spalten lief, nichts mehr zu fuellen, und uebrig
   blieb eine Liste ohne Haltung.

   Die sieben Themen stehen deshalb als Verzeichnis: grosse Zahl in Kontur,
   Titel in der Marke, Anriss klein daneben. Dieselben Mittel wie in den
   Artikeln - Zahl, Haarlinie, Glut -, nur groesser, weil die Seite nichts
   anderes zu zeigen hat. */

.wissenskarte {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s) var(--l);
  text-decoration: none;
  color: inherit;
  padding-block: var(--l);
  border-top: 1px solid var(--linie);
}

.wissenskarten > :last-child { border-bottom: 1px solid var(--linie); }

@media (min-width: 54em) {
  .wissenskarte {
    grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 24rem);
    align-items: baseline;
    column-gap: var(--xl);
  }
}

/* Die Linie oben faehrt beim Darueberfahren in Glut aus - dieselbe Geste
   wie in der Menuetafel, nur waagerecht. */
.wissenskarte::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -1px;
  block-size: 1px;
  inline-size: 0;
  background: var(--glut);
  transition: inline-size .45s var(--weich, cubic-bezier(.16,.9,.2,1));
}

.wissenskarte:hover::before,
.wissenskarte:focus-visible::before { inline-size: 100%; }

/* ── Die Zahl ──────────────────────────────────────────────────────────── */

.wissenskarte__nr {
  font-family: var(--marke);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: .78;
  color: transparent;
  -webkit-text-stroke: 1px rgba(238, 241, 246, .26);
  transition: -webkit-text-stroke-color .45s ease;
}

.wissenskarte:hover .wissenskarte__nr,
.wissenskarte:focus-visible .wissenskarte__nr { -webkit-text-stroke-color: var(--glut); }

/* ── Titel und Anriss ─────────────────────────────────────────────────── */
/* Der Titel steht in der Marke und in Versalien, wie die Merksätze in den
   Artikeln. Als Fließtext gesetzt war er von einer Bildunterschrift nicht
   zu unterscheiden. Das ausgestellte Wort bleibt in Glut. */

.wissenskarte__titel {
  margin: 0;
  font-family: var(--marke);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 2.05rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: none;
}

.wissenskarte__titel em { font-style: normal; color: var(--glut); }

.wissenskarte__kopf { display: block; }

/* Der Pfeil kommt erst beim Darüberfahren dazu. Er sitzt im Raum hinter
   dem Titel, der ohnehin nicht gefüllt wird, und schiebt nichts. */
.wissenskarte__kopf::after {
  content: "\2192";
  display: inline-block;
  margin-inline-start: .4em;
  font-family: var(--marke);
  font-weight: 700;
  color: var(--glut);
  opacity: 0;
  transform: translateX(-.35em);
  transition: opacity .4s ease,
              transform .4s var(--weich, cubic-bezier(.16,.9,.2,1));
}

.wissenskarte:hover .wissenskarte__kopf::after,
.wissenskarte:focus-visible .wissenskarte__kopf::after { opacity: 1; transform: none; }

.wissenskarte--bald .wissenskarte__kopf::after { content: none; }

.wissenskarte p {
  margin: 0;
  color: var(--grau);
  font-size: .92rem;
  line-height: 1.6;
  /* Gegen einzelne Wörter in der letzten Zeile. `pretty` ist genau dafür
     gebaut; wo es fehlt, bricht der Browser wie bisher um. */
  text-wrap: pretty;
}

/* ── Noch nicht geschrieben ────────────────────────────────────────────── */
/* Die geplanten Themen bleiben sichtbar, treten aber zurück: ohne Verweis,
   ohne Pfeil, mit schwächerer Zahl. Wer überfliegt, sieht in einem Blick,
   was schon zu lesen ist. */

.wissenskarte--bald { cursor: default; }
.wissenskarte--bald .wissenskarte__titel { color: var(--leise); }
.wissenskarte--bald .wissenskarte__titel em { color: var(--leise); }
.wissenskarte--bald .wissenskarte__nr { -webkit-text-stroke-color: rgba(238, 241, 246, .11); }
.wissenskarte--bald p { color: var(--leise); }

.wissenskarte__bald {
  display: inline-block;
  margin-block-start: var(--s);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--leise);
  border: 1px solid currentColor;
  padding: .12rem .5rem;
}

/* ── Wissensblock ──────────────────────────────────────────────────────────
   Ein Artikel besteht aus sechs gleich gebauten Abschnitten. Untereinander
   gestapelt lesen die sich als eine Wand, in der nichts hervorsticht.

   Deshalb steht die Frage hier neben dem Text statt darüber, mit der
   Nummer als Kontur obendrüber – dasselbe Motiv wie im Verzeichnis. Über
   der Trennlinie sitzt ein kurzes Stück Glut: der Abschnitt beginnt
   sichtbar, ohne dass eine Fläche dafür nötig wäre.

   --zeichen entfällt in diesen Überschriften absichtlich. Es bemisst die
   Schrift so, dass die längste Zeile die Spalte füllt – in einer schmalen
   Randspalte ergäbe das eine Überschrift, die größer ist als die H1. */

.wucht--wissen { padding-block: var(--l); }

.wissensblock {
  position: relative;
  border-block-start: 1px solid var(--linie);
  padding-block-start: var(--l);
}

.wissensblock::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: 3.5rem;
  border-block-start: 1px solid var(--glut);
}

.wissensblock__nr {
  display: block;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 700;
  line-height: .85;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1px var(--linie-2);
  margin-block-end: .16em;
}

.wucht--wissen .wissensblock h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.2;
  text-wrap: balance;
  margin-block: 0;
}

.wissensblock__text > .wucht__rand:first-child { margin-block-start: 0; }
.wissensblock__text > .wucht__rand { max-width: 60ch; }

/* Ab hier ist Platz für zwei Spalten. Darunter bleibt der Abschnitt ein
   Stapel – Frage, dann Text –, nur eben mit Nummer und Strich. */
@media (min-width: 62em) {
  .wissensblock {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    column-gap: var(--xl);
    align-items: start;
  }
}

@media (max-width: 61.999em) {
  .wissensblock__kopf { margin-block-end: var(--m); }
}

/* ── Abstand unter der Einleitung ──────────────────────────────────────────
   .band--eng + .band--eng zieht zwei Bänder auf --m zusammen, damit zwei
   Bildreihen hintereinander als ein Feld lesen. Die Einleitung ist aber
   auch ein --eng-Band, und so lag sie fast auf dem folgenden Abschnitt. */

.band--lead + .band--eng { padding-block-start: var(--xl); margin-block-start: 0; }

/* ── Einleitung der Wissensseiten ──────────────────────────────────────────
   Eine Stufe größer als der Fließtext: sie steht allein unter einer sehr
   großen Überschrift und wirkte daneben wie eine Bildunterschrift. */

.einleitung--lead p {
  font-size: clamp(19px, 16px + 0.55vw, 25px);
  line-height: 1.58;
  text-wrap: pretty;
}

/* ── Auf einen Blick ───────────────────────────────────────────────────────
   Die Kernaussagen, gleich unter der Einleitung, mit Zahlen in Glutkontur.
   Zwei feste Spalten statt eines mitwachsenden Rasters: bei vier Punkten
   ergab auto-fit auf breiten Schirmen drei Spalten und einen Nachzügler
   darunter. Zwei mal zwei steht. */

/* Oben ein Glutstrich statt einer Haarlinie: der Spickzettel ist kein
   Abschnitt wie die anderen, sondern die Zusammenfassung der ganzen Seite. */
.blick {
  border-block-start: 2px solid var(--glut);
  padding-block: var(--l) var(--xl);
}

.blick__titel {
  font-family: var(--marke);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 var(--l);
}

.blick dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--xl);
}

@media (min-width: 44em) { .blick dl { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72em) { .blick dl { grid-template-columns: repeat(3, 1fr); } }

.blick dl > div {
  display: grid;
  gap: .15rem;
  padding-block: var(--m);
  border-block-end: 1px solid var(--linie);
}

/* Der Begriff: klein, gesperrt, zweite Ebene – er benennt nur, worum es
   geht. Das Urteil darunter trägt die Aussage. */
.blick dt {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grau);
}

/* Versalien, wie ueberall sonst, wo diese Schrift laeuft: h1, h2 und die
   Satzzeile der Startseite sind alle uppercase. In Gemischtschreibung zeigt
   Syne ein kleines g mit sehr kurzem, stumpf abgeschnittenem Abstrich - es
   sieht aus, als fehle ein Stueck. Hier war die einzige Stelle im ganzen
   Haus, an der die Schrift gemischt lief. */
.blick dd {
  margin: 0;
  font-family: var(--marke);
  font-size: clamp(1rem, .92rem + .32vw, 1.2rem);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: none;
}

.blick dd small {
  display: block;
  /* Die Versalien des Urteils darueber duerfen nicht durchschlagen. */
  text-transform: none;
  margin-block-start: .35rem;
  font-family: var(--ui, inherit);
  font-size: .86rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--grau);
  text-wrap: pretty;
}

/* ── Merksatz ──────────────────────────────────────────────────────────────
   Ein Satz, groß gesetzt, auf eingelassenem Grund über die volle Breite.
   Er zerlegt den Artikel in Kapitel – die Aufgabe, die auf den übrigen
   Seiten die Bildreihen übernehmen. Ohne Fotos gibt die Typografie den
   Takt, und dafür muss sie den Leser einmal anhalten. */

.merksatz {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--tiefe);
  border-block: 1px solid var(--linie);
  padding-block: var(--xxl);
}

/* Glut hinter dem Satz, von der Seite her, an der auch der Strich steht.
   Der Schein liegt im eingelassenen Grund und hebt das Band vom Rest der
   Seite ab, ohne dass eine Fläche oder ein Bild nötig wäre. */
.merksatz::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: -25%;
  inset-inline-start: -8%;
  inline-size: 56%;
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 50%,
              rgba(179, 46, 34, .17), rgba(179, 46, 34, 0) 68%);
}

.merksatz--rechts::before {
  inset-inline: auto -8%;
  background: radial-gradient(ellipse at 70% 50%,
              rgba(179, 46, 34, .17), rgba(179, 46, 34, 0) 68%);
}

@media (prefers-contrast: more) { .merksatz::before { display: none; } }

.merksatz p {
  margin: 0;
  font-family: var(--marke);
  font-weight: 700;
  font-size: clamp(26px, 4.4vw, 58px);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: none;
  max-inline-size: 19ch;
  border-inline-start: 2px solid var(--glut);
  padding-inline-start: clamp(var(--m), 2.4vw, var(--l));
}

/* Jeder zweite steht an der rechten Kante, mit dem Glutstrich dort. */
.merksatz--rechts p {
  margin-inline-start: auto;
  text-align: right;
  border-inline-start: 0;
  border-inline-end: 2px solid var(--glut);
  padding-inline: 0 clamp(var(--m), 2.4vw, var(--l));
}

/* Dasselbe Mittel wie in den Überschriften: ein Wort nur als Kontur, in em
   angegeben, damit das Gewicht bei jeder Größe gleich bleibt. */
.merksatz em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: .02em var(--tinte);
}

@media (prefers-contrast: more), print {
  .merksatz em { color: inherit; -webkit-text-stroke: 0; }
  .merksatz { background: none; }
}

/* ── Glut im Seitenkopf ────────────────────────────────────────────────────
   Die Marke heißt Rotglut. Ohne Bilder trägt der Kopf nichts als Schrift,
   also kommt die Farbe aus dem Namen: ein sehr flacher Schein hinter der
   Überschrift, der auf dem dunklen Grund gerade eben zu ahnen ist. */

.wucht--kopf { position: relative; isolation: isolate; }

.wucht--kopf::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Nicht in die Kopfleiste hinein: dort lag der Schein als brauner
     Schleier ueber Logo und Menue und sah nach Fehler aus. */
  inset-block: 0 -10%;
  inset-inline-start: -14%;
  inline-size: 58%;
  pointer-events: none;
  background: radial-gradient(ellipse at 26% 50%,
              rgba(179, 46, 34, .13), rgba(179, 46, 34, 0) 66%);
}

@media (prefers-contrast: more) { .wucht--kopf::before { display: none; } }