dogfather-universe/workspace/assets/css/treff.css

/* =====================================================================
   Der Treff — die beiden Textseiten (11.09.2026)

   Regeln & Hilfe (für die Community) und „Wer sieht was" (für
   DogFather). Beides sind LESESEITEN: langer, zusammenhängender Text
   und eine Tabelle, keine Kartenwand.

   ---------------------------------------------------------------------
   WARUM SIE KEINE MODULKARTEN SIND

   Die naheliegende Wahl wäre `.eintrag-karte` oder ein neuer Eintrag in
   der MODULLISTE gewesen — dann sähen die Abschnitte aus wie alles
   andere im Haus: geschliffene Fase, Kantenlicht, Sternenfeld.

   Dagegen sprechen zwei Dinge, und das zweite wiegt schwerer:

   1. Die MODULLISTE steht siebenmal in module.css und wird von
      pruef-css-klassen Zeichen für Zeichen verglichen. Eine achte Klasse
      hätte an sieben Stellen dasselbe ergänzen müssen — machbar, aber
      jede dieser sieben ist eine Gelegenheit für einen Unterschied.

   2. Karten zerteilen. Ein Regeltext ist ein Text, den man von oben
      nach unten liest; sieben Karten daraus zu machen heißt, sieben
      Anfänge zu machen. Genau das ist bei Regeln der Fehler: Wer nach
      der dritten Karte aufhört, hat vier Regeln nicht gelesen und
      glaubt trotzdem, er kenne sie.

   Deshalb hier nur so viel Trennung, dass man die Abschnitte findet —
   eine Linie und Abstand, keine Kante.
   ===================================================================== */

/* EIN RUHIGER GRUND — und er kam erst nach einem Blick (11.09.2026).

   Hier stand zuerst nur eine Trennlinie und sonst nichts: kein
   Hintergrund, damit ein langer Text nicht in Karten zerfällt. Die
   Zahlen waren alle grün — die Kontrastmessung rechnete gegen
   #07060f, den Ton des Hauses.

   Im Bildschirmfoto lag hinter der Rechtetafel die BÜHNE: das
   Spicy-Media-Motiv, Neonlicht, Chilischoten, ein Wasserfall. Die
   Zeilen der Tabelle standen mitten darin. Lesbar war es knapp — aber
   die Messung hatte den Grund gar nicht gemessen, sie hatte ihn
   angenommen. Ein grüner Haken über einer falschen Voraussetzung.

   Jetzt liegt unter jedem Abschnitt eine deckende Fläche. Das ist
   KEINE Kartenwand: keine Fase, kein Kantenlicht, kein Sternenfeld —
   nur ein Blatt Papier, auf dem der Text steht. Der Einwand von oben
   (Karten zerteilen einen Text) bleibt damit gewahrt, und die Bühne
   bleibt ringsum sichtbar.

   DECKEND, NICHT FAST DECKEND: color-mix mit einem opaken Ton ergibt
   wieder einen opaken. Ein rgba(…, .89) hätte auf dem Papier fast
   gleich ausgesehen und die Messung weiterhin raten lassen — und die
   Prüfung sagt jetzt ausdrücklich Nein dazu (siehe
   pruef-treff-seiten, "der Grund wurde gemessen"). */
.treff-abschnitt {
  margin: 0 0 16px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
  border: 1px solid var(--rand);
}

.treff-abschnitt__titel {
  margin: 0 0 10px;
  font-size: 1.06rem;
  font-weight: 650;
  letter-spacing: .005em;
  color: var(--text);
}

/* Der Lesefluss ist hier die eigentliche Aufgabe.

   1,72 statt der üblichen 1,55: Auf einem Handy stehen in einer Zeile
   etwa 42 Zeichen; bei engem Zeilenabstand verliert man beim Sprung an
   den Zeilenanfang die Zeile. Das merkt niemand als „schlechter
   Zeilenabstand" — man liest den Absatz einfach zweimal und hält den
   Text für kompliziert.

   Und eine Breitengrenze: Über etwa 70 Zeichen je Zeile wird derselbe
   Sprung wieder schwierig, nur von der anderen Seite. Auf einem breiten
   Bildschirm liefe der Regeltext sonst über 1100 Pixel. */
.treff-abschnitt__inhalt { max-width: 68ch; }
.treff-abschnitt__inhalt p {
  margin: 0 0 12px;
  font-size: .92rem;
  line-height: 1.72;
  color: var(--text-leise);
}
.treff-abschnitt__inhalt p:last-child { margin-bottom: 0; }
.treff-abschnitt__inhalt strong { color: var(--text); font-weight: 640; }

/* Die Aufzählungen. Die Zahl bzw. der Punkt steht AUSSERHALB des
   Textblocks — so beginnt jede Zeile einer mehrzeiligen Regel an
   derselben Stelle, und die Liste bleibt als Liste lesbar. */
.regel-liste {
  margin: 0 0 12px;
  padding-left: 1.35em;
  font-size: .92rem;
  line-height: 1.72;
  color: var(--text-leise);
}
.regel-liste li { margin: 0 0 9px; padding-left: .2em; }
.regel-liste li:last-child { margin-bottom: 0; }
.regel-liste li::marker { color: var(--text-still); }
.regel-liste strong { color: var(--text); font-weight: 640; }

/* =====================================================================
   „WER SIEHT WAS" — die Rechtetafel als Tabelle

   Sie wird aus der echten Tafel gerechnet (rechte.js), nicht gepflegt.
   Was sie leisten muss: Man soll eine LÜCKE sehen, ohne zu suchen.
   ===================================================================== */

.rechte-tafel { overflow-x: auto; margin: 0 0 26px; }

.rechte-tafel table {
  border-collapse: collapse;
  width: 100%;
  font-size: .82rem;
}

/* Die Kopfzeile bleibt stehen. Bei 22 Zeilen und acht Spalten hat man
   sonst nach dem halben Scrollen vergessen, welche Spalte welche Rolle
   ist — und rät. Bei einer Rechteübersicht ist Raten das Gegenteil des
   Zwecks. */
.rechte-tafel thead th {
  position: sticky; top: 0; z-index: 1;
  /* Deckend, nicht var(--flaeche): Die Kopfzeile klebt beim Scrollen
     oben fest, und eine halbdurchsichtige Fläche würde dabei die
     Zeilen durchscheinen lassen, über die sie gerade läuft. */
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
  padding: 9px 8px;
  text-align: center;
  font-weight: 600;
  color: var(--text-leise);
  border-bottom: 1px solid var(--rand-hell);
  white-space: nowrap;
}
.rechte-tafel thead th:first-child { text-align: left; }

.rechte-tafel td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--rand);
  text-align: center;
  color: var(--text-still);
}
.rechte-tafel td:first-child {
  text-align: left;
  color: var(--text-leise);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .79rem;
  white-space: nowrap;
}
.rechte-tafel tbody tr:hover td { background: rgba(255, 255, 255, .025); }

/* JA UND NEIN SIND NICHT GRÜN UND ROT.

   Das wäre die naheliegende Wahl und hier die falsche: In dieser
   Tabelle ist ein „nein" nichts Schlechtes — es ist der Normalfall und
   genau das, was Filipe wollte. Grün/Rot würde eine Tafel mit 140
   roten Feldern erzeugen, die aussieht wie ein Schadensbericht.

   Stattdessen: sichtbar gegen leise. Ein Punkt, wo es erlaubt ist,
   nichts, wo nicht. Man sieht die Zeilen mit vielen Punkten sofort —
   und das ist die Frage, die man an diese Tabelle hat. */
.rechte-ja {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--akzent);
  box-shadow: 0 0 8px -2px var(--akzent);
}
.rechte-nein { color: var(--text-still); opacity: .3; }

/* Die Zählzeile über der Tabelle: „Community — 3 von 22 Seiten". Das
   ist die eine Zahl, die die ganze Frage beantwortet. */
.rechte-zahlen {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 18px; padding: 0; list-style: none;
}
.rechte-zahlen li {
  padding: 6px 11px;
  border: 1px solid var(--rand-hell);
  border-radius: 999px;
  font-size: .8rem;
  color: var(--text-leise);
}
.rechte-zahlen li b { color: var(--text); font-weight: 650; }

@media (max-width: 620px) {
  .treff-abschnitt__inhalt p, .regel-liste { font-size: .95rem; }
  .rechte-tafel table { font-size: .78rem; }
}

/* =====================================================================
   DER WEG ZU DEN REGELN — auf jedem Brett des Treffs

   Er steht direkt unter der Unterzeile und sieht aus wie ein Link,
   nicht wie ein Knopf. Das ist Absicht: Ein Knopf verspricht, dass
   etwas PASSIERT; hier wechselt man nur die Seite. Wer auf jedem Brett
   einen zusätzlichen Knopf sieht, zählt ihn nach zwei Tagen zum
   Hintergrund.
   ===================================================================== */
.treff-regelweg {
  display: inline-block;
  margin-top: 6px;
  font-size: .82rem;
  color: var(--text-leise);
  text-decoration: none;
  border-bottom: 1px solid var(--rand-hell);
  padding-bottom: 1px;
}
.treff-regelweg:hover, .treff-regelweg:focus-visible {
  color: var(--text);
  border-bottom-color: color-mix(in srgb, var(--akzent) 55%, transparent);
}

/* Links im Fließtext der Regelseite. Unterstrichen, weil Farbe allein
   kein Unterschied ist, den jeder sieht (WCAG 1.4.1). */
.treff-abschnitt__inhalt a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--akzent) 55%, transparent);
}
.treff-abschnitt__inhalt a:hover {
  text-decoration-color: var(--akzent);
}

/* =====================================================================
   MELDUNGEN & MASSNAHMEN — ein Fall je Karte

   Karten sind hier richtig, wo sie beim Regeltext falsch waren: Es sind
   EINZELNE Vorgänge, die man einzeln entscheidet. Jeder Anfang ist ein
   neuer Fall, und das soll man sehen.
   ===================================================================== */
.treff-fall {
  margin: 0 0 12px;
  padding: 13px 15px;
  border: 1px solid var(--rand);
  border-left: 2px solid color-mix(in srgb, var(--akzent) 45%, transparent);
  background: rgba(255, 255, 255, .018);
}

/* Was schon entschieden ist, tritt zurück -- aber es verschwindet
   nicht. Ausblenden wäre bequemer und wäre falsch: Man muss nachsehen
   können, wie ein ähnlicher Fall damals entschieden wurde. */
.treff-fall[data-vorbei="ja"] {
  opacity: .62;
  border-left-color: var(--rand);
}

.treff-fall__titel {
  margin: 0 0 8px;
  font-size: .95rem;
  font-weight: 640;
  color: var(--text);
}

.treff-fall__zeile {
  margin: 0 0 5px;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-leise);
  display: flex;
  gap: 8px;
}
.treff-fall__zeile:last-of-type { margin-bottom: 0; }

/* Das Schild steht in fester Breite links. Ohne sie beginnt jede Zeile
   woanders, und man liest die Liste als Fließtext statt als Angaben --
   bei fünf Zeilen je Fall ist das der Unterschied zwischen Überfliegen
   und Lesenmüssen. */
.treff-fall__schild {
  flex: 0 0 7.5em;
  color: var(--text-still);
  font-size: .78rem;
  text-transform: lowercase;
  padding-top: .1em;
}

.treff-fall__knoepfe {
  display: flex; gap: 7px; flex-wrap: wrap;
  margin-top: 11px; padding-top: 10px;
  border-top: 1px solid var(--rand);
}
/* Der Link "zum Brett" sieht aus wie die Knöpfe daneben -- er tut ja
   dasselbe: Er bringt einen woandershin. Ein Link, der zwischen zwei
   Knöpfen anders aussieht, wird für Text gehalten. */
.treff-fall__knoepfe a.schritt { text-decoration: none; }

@media (max-width: 620px) {
  /* Untereinander statt nebeneinander: Bei 7,5em Schild und 42 Zeichen
     Zeilenbreite blieben für den Wert noch etwa 20 Zeichen -- ein Grund
     in zwei Wörtern je Zeile. */
  .treff-fall__zeile { display: block; }
  .treff-fall__schild { display: block; padding: 0 0 1px; }
}

/* =====================================================================
   DIE TAFEL IST SEIT DEM 11.09.2026 BEDIENBAR

   Aus jedem Feld wird ein Schalter. Zwei Dinge müssen dabei sichtbar
   sein, und beide sind leicht zu übersehen:

     1. DASS man klicken kann. Ein Punkt in einer Tabelle sieht nach
        Anzeige aus, nicht nach Bedienelement — deshalb bekommt jedes
        Feld eine Fläche, die auf Mauszeiger und Tastaturfokus
        antwortet.

     2. WAS von Hand gesetzt ist. Der Code ist der Grundstand; was davon
        abweicht, hat jemand entschieden. Ohne Markierung wüsste nach
        vier Wochen niemand mehr, was gedacht war.

   UND DIE FLÄCHE IST GROSS GENUG ZUM TIPPEN. 34 mal 30 Pixel — unter
   der üblichen Empfehlung von 44, aber das ist eine Tabelle mit acht
   Spalten auf einem Handy, und ein größeres Feld hieße weniger Spalten.
   Der Ausgleich ist der Abstand: zwischen zwei Feldern liegen die
   Zellenränder, sodass man nicht auf den Nachbarn kommt.
   ===================================================================== */

.rechte-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 20px; padding: 12px 16px;
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
  border: 1px solid var(--rand);
}
.rechte-leiste__satz {
  flex: 1 1 240px; font-size: .85rem; line-height: 1.55; color: var(--text-leise);
}

.rechte-feld {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 30px; padding: 0; cursor: pointer;
  font: inherit;
  background: transparent;
  border: 1px solid transparent; border-radius: 6px;
  transition: background .14s ease, border-color .14s ease;
}
.rechte-feld:hover:not(:disabled) {
  background: rgba(255, 255, 255, .07);
  border-color: var(--rand-hell);
}
.rechte-feld:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 1px;
}
.rechte-feld:disabled { opacity: .45; cursor: default; }

/* FEST heißt: kein Schalter, sondern eine Tatsache. Er sieht deshalb
   nicht aus wie etwas, das man drücken könnte — der Server würde es
   ohnehin ablehnen, und ein Knopf, der immer eine Absage bringt, wird
   trotzdem gedrückt. */
.rechte-feld[data-fest="ja"] {
  cursor: default;
  border-style: dashed;
  border-color: var(--rand);
}
.rechte-feld[data-fest="ja"]:hover { background: transparent; }

/* VON HAND GESETZT. Ein Rahmen, keine Farbe: Die Zelle sagt damit
   „hier hat jemand entschieden", ohne zu sagen, ob das gut war. */
.rechte-tafel td[data-anders="ja"] {
  background: color-mix(in srgb, var(--akzent) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 34%, transparent);
}

.rechte-zahlen__anders { color: var(--text-still); }

/* Die Meldung nach dem Speichern ist kein Fehler — sie darf nicht
   aussehen wie einer. */
.fehler[data-art="gut"] { color: var(--text-leise); }

@media (prefers-reduced-motion: reduce) {
  .rechte-feld { transition: none; }
}

/* =====================================================================
   WAS HEREINKOMMT — die Moderationsliste (17.09.2026)

   Aus dem Plan im Vault, Stufe 4. Ein Moderator musste acht Bretter
   durchklicken, um zu sehen, ob etwas Neues da ist. Das tut niemand
   achtmal am Tag — und was niemand ansieht, moderiert auch niemand.

   EINE ZEILE JE BEITRAG, nicht eine Karte. Karten sind zum Lesen,
   Zeilen zum Überfliegen — und hier überfliegt man: Ist etwas
   dazugekommen, und wo? Der Inhalt steht auf dem Brett, nicht hier.
   Eine Vorschau wäre eine zweite Stelle, an der derselbe Beitrag steht.
   ------------------------------------------------------------------- */
.zulauf { list-style: none; margin: 0; padding: 0; }
.zulauf__zeile {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--rand);
}
.zulauf__zeile:last-child { border-bottom: 0; }

/* Das Brett zuerst — es ist die Frage, die man beim Überfliegen hat:
   WO ist etwas passiert. Ein eigener Ton je Brett macht die Liste ohne
   Lesen sortierbar. */
.zulauf__brett {
  --z-ton: #6f89a8;
  flex: 0 0 auto; min-width: 104px;
  padding: 1px 8px; border-radius: 999px;
  font-size: .72rem; font-weight: 600;
  color: color-mix(in srgb, var(--z-ton) 76%, #ffffff);
  background: color-mix(in srgb, var(--z-ton) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--z-ton) 30%, transparent);
  text-align: center;
}
.zulauf__brett[data-brett="anschlag"]  { --z-ton: #cc9451; }
.zulauf__brett[data-brett="ansteht"]   { --z-ton: #656a9e; }
.zulauf__brett[data-brett="treff"]     { --z-ton: #cc92c6; }
.zulauf__brett[data-brett="wunsch"]    { --z-ton: #b2bc78; }
.zulauf__brett[data-brett="highlight"] { --z-ton: #8e5b77; }
.zulauf__brett[data-brett="regeln"]    { --z-ton: #8e784f; }
.zulauf__brett[data-brett="mitmachen"] { --z-ton: #668e6e; }

.zulauf__titel {
  flex: 1 1 200px; min-width: 0;
  color: var(--text); font-weight: 600; font-size: .92rem;
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zulauf__titel:hover { text-decoration: underline; }
.zulauf__wer  { font-size: .78rem; color: var(--text-still); }
/* Die Zeit rechts und in Tabellenziffern — so stehen die Angaben
   untereinander auf derselben Linie statt zu tanzen. */
.zulauf__wann {
  margin-left: auto; flex: 0 0 auto;
  font-size: .76rem; color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  /* Auf dem Handy bleibt die Zeit unter dem Titel statt ihn zu
     quetschen — 390 px tragen keine vier Spalten. */
  .zulauf__wann { margin-left: 0; }
  .zulauf__titel { flex-basis: 100%; }
}

/* =====================================================================
   DIE REGELN SIND EINE FLÄCHE (22.09.2026)
   =====================================================================

   Filipe: „lass bitte die ganzen regeln viel geiler und spezieller
   aussehen und nicht sehr viele kacheln sondern eine riesige wo alles
   schön aussieht und richtig geil, übersichtlich"

   Vorher sechs Kästen untereinander: jeder mit Rand, Grund und
   Abstand, dazwischen jedes Mal ein Schnitt. Beim Lesen fängt man
   damit sechsmal neu an — Regeln lesen sich aber als EIN Text.

   DIE ABSCHNITTE BLEIBEN, IHRE KÄSTEN NICHT. Innerhalb der Fläche
   trennt eine Linie statt einer Lücke. Der Text steht damit in einem
   Zug, und man sieht trotzdem, wo ein Thema anfängt.

   WARUM NICHT EINFACH ALLES UNTEREINANDER OHNE ALLES: Weil „eine
   Fläche" und „unübersichtlich" sonst dasselbe wären. Deshalb kommt
   die Sprungleiste dazu (regel-sprung, gebaut in treff-regeln.js) —
   sie ist der Preis dafür, dass die Trennung wegfällt.
   ===================================================================== */
.regelflaeche {
  position: relative;
  margin: 0 0 18px;
  padding: 4px 22px 22px;
  background:
    /* Ein Schein oben links in der Hausfarbe -- er gibt der großen
       Fläche eine Richtung, ohne dass darin gelesener Text auf einem
       Verlauf steht: Nach etwa einem Drittel ist er ausgelaufen. */
    linear-gradient(170deg,
      color-mix(in srgb, var(--akzent) 9%, transparent) 0%,
      color-mix(in srgb, var(--akzent) 3%, transparent) 18%,
      transparent 34%),
    color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein, 12px);
}
@media (max-width: 620px) {
  .regelflaeche { padding: 2px 14px 16px; }
}

/* ---- Die Abschnitte darin ------------------------------------------- */
/* KEIN EIGENER KASTEN MEHR. `background: none` und nicht „dieselbe
   Farbe": Eine zweite Fläche in derselben Farbe wäre beim nächsten
   Farbwechsel eine, die nicht mitzieht. */
.regelflaeche .treff-abschnitt {
  margin: 0;
  padding: 22px 0;
  background: none;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
  scroll-margin-top: 90px;
}
/* Der erste braucht keine Linie nach oben -- darüber steht die
   Sprungleiste, die schon eine hat. */
.regelflaeche .treff-abschnitt:first-of-type { border-top: 0; }

/* Die Überschrift wird größer und bekommt eine Marke davor: In einer
   durchgehenden Fläche muss sie den Anfang tragen, den vorher der
   Kastenrand getragen hat. */
.regelflaeche .treff-abschnitt__titel {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.16rem; font-weight: 700;
  margin: 0 0 12px;
}
.regelflaeche .treff-abschnitt__titel::before {
  content: ""; flex: none;
  width: 4px; height: 1.05em; border-radius: 2px;
  background: linear-gradient(180deg,
    var(--akzent), color-mix(in srgb, var(--akzent) 30%, transparent));
}

/* ---- Die Sprungleiste ----------------------------------------------- */
.regelflaeche__leiste {
  position: sticky; top: var(--kopf-hoehe, 64px); z-index: 3;
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 -22px 0; padding: 12px 22px;
  background: color-mix(in srgb, var(--tinte) 96%, #ffffff 4%);
  border-bottom: 1px solid var(--rand);
}
/* AUF DEM HANDY EINE ZEILE, NICHT SECHS (22.09.2026).
   ---------------------------------------------------------------------
   Im Bildschirmfoto bei 390 px brauchte die Leiste SECHS Zeilen und
   damit rund ein Drittel des Bildes -- und sie klebt oben fest, also
   dauerhaft. Ein Wegweiser, der mehr Platz braucht als der Weg, ist
   keiner.

   Filipe zu diesem Auftrag ausdruecklich: auch auf dem Handy „richtig
   gut und einfach zu benutzen".

   Jetzt eine Zeile, die man seitlich schiebt. `scroll-snap` laesst sie
   an den Knoepfen einrasten, damit kein halber Knopf am Rand steht,
   und der Rand rechts bleibt frei, damit man sieht, DASS es weitergeht
   -- eine Leiste, die genau am Bildrand endet, sieht aus, als waere
   sie zu Ende.

   Am Rechner bleibt der Umbruch: Dort ist Platz, und alles auf einen
   Blick ist besser als alles hinter einer Schiebebewegung. */
@media (max-width: 620px) {
  .regelflaeche__leiste {
    margin: 0 -14px 0; padding: 10px 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .regelflaeche__leiste::-webkit-scrollbar { display: none; }
  .regelflaeche__sprung { flex: none; scroll-snap-align: start; }
}
.regelflaeche__sprung {
  padding: 6px 11px; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  color: var(--text-leise); text-decoration: none;
  border: 1px solid var(--rand);
  background: rgba(255, 255, 255, .03);
  /* 44 px hoch ist auf einem Handy das Mindestmaß für einen Finger --
     hier über die Zeilenhöhe erreicht, nicht über eine feste Höhe:
     So wächst der Knopf mit, wenn jemand die Schrift größer stellt. */
  line-height: 1.7; min-height: 34px;
  display: inline-flex; align-items: center;
}
.regelflaeche__sprung:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
}
.regelflaeche__sprung:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* WO MAN GERADE IST. Gesetzt von treff-regeln.js über einen
   IntersectionObserver -- nicht beim Rollen gerechnet, das kostet auf
   einem Handy spürbar Strom. */
.regelflaeche__sprung[data-hier="ja"] {
  color: #0a121e;
  background: color-mix(in srgb, var(--akzent) 84%, #ffffff);
  border-color: transparent;
}

/* ---- Die fünf Regeln tragen ihre Zahl -------------------------------- */
/* „viel geiler und spezieller": Die wichtigste Liste der Seite sah aus
   wie jede andere Aufzählung. Jetzt steht die Zahl in einem eigenen
   Kreis links daneben — dieselbe Sprache wie die Stufen an anderen
   Stellen des Hauses, und auf einem Handy sofort als Liste erkennbar. */
.regelflaeche .regel-liste {
  list-style: none;
  padding-left: 0;
  counter-reset: regel;
}
.regelflaeche .regel-liste li {
  position: relative;
  counter-increment: regel;
  margin: 0 0 12px;
  padding: 0 0 0 40px;
  min-height: 28px;
}
.regelflaeche ol.regel-liste li::before {
  content: counter(regel);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 700;
  color: color-mix(in srgb, var(--akzent) 70%, #ffffff);
  background: color-mix(in srgb, var(--akzent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--akzent) 34%, transparent);
}
/* Unnummerierte Listen bekommen einen Punkt an derselben Stelle --
   sonst sprängen die Zeilen zwischen den Abschnitten hin und her. */
.regelflaeche ul.regel-liste li::before {
  content: "";
  position: absolute; left: 11px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: color-mix(in srgb, var(--akzent) 55%, transparent);
}

@media (forced-colors: active) {
  .regelflaeche { border: 1px solid CanvasText; }
  .regelflaeche .treff-abschnitt { border-top: 1px solid CanvasText; }
  .regelflaeche__sprung { border: 1px solid CanvasText; }
  .regelflaeche__sprung[data-hier="ja"] { border: 2px solid Highlight; }
}