/*
 * Snooker Regelwerk — Darstellung
 *
 * Mobile-first: Der Grundzustand ist das Handy — eine Spalte, große Tippflächen, das
 * Inhaltsverzeichnis hinter einem Schalter. Erst ab 60em kommt die zweite Spalte dazu.
 *
 * Schrift und Grundfarben gibt das Theme vor. Hier stehen nur Farbtöne, die das Regelwerk
 * zusätzlich braucht — als halbdurchsichtige Schwarztöne, die sich in die helle Fläche des
 * Themes einfügen.
 */

.srw-buch{
	--srw-akzent:#1f6b44;
	--srw-linie:rgba(0,0,0,.14);
	--srw-flaeche:rgba(0,0,0,.04);
	--srw-gedaempft:rgba(0,0,0,.62);
	--srw-hinweis-linie:#9a5a12;
	--srw-hinweis-flaeche:rgba(154,90,18,.1);
	--srw-rand:1rem;
}

/*
 * **Kein `prefers-color-scheme`-Block hier.**
 *
 * Er stand einmal drin und war ein echter Fehler: Die Website ist durchgehend hell, das
 * Theme kennt keinen Dunkelmodus. Steht das Gerät des Lesers auf dunkel, schaltete allein
 * diese Palette um — und dann standen Quellenangabe, Position, Pfeile und Rahmen in Weiß
 * auf weißem Grund. Sichtbar blieben nur die Links, weil die ihre Farbe vom Theme erben.
 *
 * Eine Farbpalette darf nur mitschalten, wenn der Untergrund mitschaltet. Solange das
 * Theme hell ist, ist es auch das Regelwerk.
 */

/* ══ Grundgerüst ══ */

/*
 * Das Theme legt um diese Ausgabe keinen eigenen Container — nach dem Kopf folgt direkt
 * .srw-buch. Breite, Rand und Abstand nach oben und unten müssen deshalb hier stehen,
 * sonst klebt der Text am Bildschirmrand.
 */
.srw-buch{
	display:grid;
	grid-template-columns:1fr;
	gap:1.25rem;
	align-items:start;

	box-sizing:border-box;
	width:100%;
	max-width:78rem;
	margin-inline:auto;
	padding-inline:var(--srw-rand);
	padding-block:1.5rem 2.5rem;
}
.srw-buch *,
.srw-buch *::before,
.srw-buch *::after{ box-sizing:border-box }

.srw-regel,
.srw-buch > main{ min-width:0 }

.srw-wortlaut{ line-height:1.65 }
.srw-wortlaut ol,
.srw-wortlaut ul{ padding-left:1.4em }
.srw-wortlaut li + li{ margin-top:.35em }
.srw-wortlaut table{ display:block; overflow-x:auto; max-width:100% }
.srw-ohne-text{ color:var(--srw-gedaempft); font-style:italic }

/* ══ Inhaltsverzeichnis ══ */

.srw-schalter{
	display:block;
	width:100%;
	min-height:2.75rem;
	padding:.6rem .9rem;
	text-align:left;
	font:inherit;
	font-weight:600;
	color:inherit;
	background:var(--srw-flaeche);
	border:1px solid var(--srw-linie);
	border-radius:4px;
	cursor:pointer;
}
.srw-schalter::after{
	content:"▾";
	float:right;
	transition:transform .15s ease;
}
.srw-schalter[aria-expanded="false"]::after{ transform:rotate(-90deg) }
.srw-schalter[hidden]{ display:none }

.srw-schublade[hidden]{ display:none }

/* Auf dem Handy darf die Liste nicht die halbe Seite schieben. */
.srw-schublade{
	max-height:60vh;
	overflow-y:auto;
	margin-top:.5rem;
	-webkit-overflow-scrolling:touch;
}

.srw-verzeichnis{
	list-style:none;
	margin:0;
	padding:0;
	line-height:1.4;
}
.srw-verzeichnis li{ margin:0 }

.srw-verzeichnis a{
	display:block;
	padding:.7rem .75rem;              /* großzügig — auf dem Handy ist das die Tippfläche */
	border-left:3px solid transparent;
	border-bottom:1px solid var(--srw-linie);
	text-decoration:none;
}
.srw-verzeichnis a:hover{ background:var(--srw-flaeche) }

.srw-ebene-0 > a{ font-weight:600 }
.srw-ebene-1 > a{ padding-left:1.6rem }
.srw-ebene-2 > a{ padding-left:2.6rem }
.srw-ebene-3 > a{ padding-left:3.6rem }

.srw-verzeichnis .srw-aktiv > a{
	border-left-color:var(--srw-akzent);
	background:var(--srw-flaeche);
	font-weight:600;
}
.srw-verzeichnis .srw-im-pfad > a{ border-left-color:var(--srw-linie) }

.srw-verzeichnis-titel{ margin:1.6rem 0 .4rem }

/* ══ Kopf ══ */

.srw-brotkrumen{
	font-size:.9rem;
	line-height:1.5;
	color:var(--srw-gedaempft);
	margin-bottom:.4rem;
}
.srw-brotkrumen a{ text-decoration:none }
.srw-brotkrumen a:hover{ text-decoration:underline }

.srw-titel{ margin:0 0 .5rem; text-wrap:balance }

.srw-fassungszeile{ font-size:.9rem; color:var(--srw-gedaempft) }

/* ══ Fassungen ══ */

.srw-fassungen{
	display:flex;
	flex-wrap:wrap;
	gap:.4rem;
	align-items:center;
	margin:0 0 1rem;
	font-size:.9rem;
}
.srw-fassungen > span{ color:var(--srw-gedaempft) }
.srw-fassung{
	display:inline-block;
	min-width:2.5rem;
	padding:.35rem .7rem;
	text-align:center;
	border:1px solid var(--srw-linie);
	border-radius:3px;
	text-decoration:none;
}
.srw-fassung.srw-aktiv{
	background:var(--srw-akzent);
	border-color:var(--srw-akzent);
	color:#fff;
}

.srw-hinweis{
	margin:0 0 1.2rem;
	padding:.75rem .9rem;
	border-left:4px solid var(--srw-hinweis-linie);
	background:var(--srw-hinweis-flaeche);
	font-size:.94rem;
}

/* ══ Zählweisen ══
 *
 * Im Bestand trug keine einzige Liste ein type-Attribut, weshalb auch die römische Ebene
 * als „1. 2. 3." erschien. Der Schreiber setzt es jetzt; hier steht die Darstellung dazu.
 *
 * Über ::marker, weil counter(list-item) das start-Attribut berücksichtigt — die
 * Shoot-Out-Kapitel zählen über Regelgrenzen hinweg durch.
 */

/* ── Zählweisen ──
 *
 * Das Theme (Customizr) macht bei jeder Liste zweierlei, und beides wird hier zurückgenommen:
 *
 * 1. `ol > li:before { content: counters(item,".") "." }` — eine eigene, hierarchische
 *    Nummerierung (1., 2., 2.1.), die `type` und `start` ignoriert. Sie war bisher die
 *    einzige sichtbare Marke und stünde sonst neben unserer.
 * 2. `ol, ul { list-style: none }` — global. Ohne Gegenmaßnahme gäbe es gar keine Marke.
 *
 * Die Marken werden deshalb vollständig selbst gesetzt, über einen eigenen Zähler und
 * `li::before`. Nicht über `::marker`: Dessen freier Inhalt fehlt in älteren Browsern, und
 * dann verschwänden genau die Klammern, die die römische Ebene von der Unterebene
 * unterscheiden — „(ii)" gegen „iii.".
 */

/* Erst die Nummerierung des Themes abräumen … */
.srw-wortlaut ol > li::before,
.srw-wortlaut ul > li::before{
	content:none;
	counter-increment:none;
}

/* … dann das Grundgerüst. */
.srw-wortlaut ol,
.srw-wortlaut ul{
	margin:.6em 0;
	padding-left:2.4em;
}
.srw-wortlaut ul{ list-style:square outside }
.srw-wortlaut ol{ list-style:none }
.srw-wortlaut ol > li{ position:relative }

.srw-wortlaut ol.srw-numerisch,
.srw-wortlaut ol.srw-alphabetisch,
.srw-wortlaut ol.srw-roemisch,
.srw-wortlaut ol.srw-roemisch-sub{ counter-reset:srw-p }

/*
 * Die Marke hängt links außerhalb des Textblocks, damit mehrzeilige Punkte sauber
 * untereinander stehen. `start` kommt bei Bedarf als eigener counter-reset am ol mit —
 * die Shoot-Out-Kapitel zählen über Regelgrenzen hinweg durch.
 */
.srw-wortlaut ol.srw-numerisch > li::before,
.srw-wortlaut ol.srw-alphabetisch > li::before,
.srw-wortlaut ol.srw-roemisch > li::before,
.srw-wortlaut ol.srw-roemisch-sub > li::before{
	counter-increment:srw-p;
	position:absolute;
	left:-2.4em;
	width:2.1em;
	text-align:right;
	font-variant-numeric:tabular-nums;
	color:var(--srw-gedaempft);
}

.srw-wortlaut ol.srw-numerisch > li::before{ content:counter(srw-p,decimal) "." }
.srw-wortlaut ol.srw-alphabetisch > li::before{ content:counter(srw-p,lower-alpha) ")" }
.srw-wortlaut ol.srw-roemisch > li::before{ content:"(" counter(srw-p,lower-roman) ")" }
.srw-wortlaut ol.srw-roemisch-sub > li::before{ content:counter(srw-p,lower-roman) "." }

.srw-wortlaut ol li > ol,
.srw-wortlaut ol li > ul{ margin-top:.4em }

/* ══ Vollständige Regelnummer ══
 *
 * Jeder Punkt ist einzeln zitierbar: „3.16.a.(ii)". Die Nummer steht klein am Rand und ist
 * zugleich der Link darauf — ein Klick legt die Adresse in die Zwischenablage.
 * Zurückhaltend, damit sie den Regeltext nicht stört.
 */

.srw-wortlaut [data-nummer]{ position:relative }

.srw-nummer{
	float:right;
	margin-left:.8em;
	font-size:.72em;
	line-height:1.9;
	letter-spacing:.03em;
	color:var(--srw-gedaempft);
	text-decoration:none;
	opacity:0;
	transition:opacity .15s ease;
}
.srw-wortlaut [data-nummer]:hover > .srw-nummer,
.srw-nummer:focus{ opacity:.75 }
.srw-nummer:hover{ opacity:1; text-decoration:underline }
.srw-nummer.srw-kopiert::after{ content:" ✓ kopiert" }

/* Wer über einen Verweis hier landet, soll sehen, wo. */
.srw-wortlaut [data-nummer]:target{
	background:var(--srw-hinweis-flaeche);
	box-shadow:-.5em 0 0 var(--srw-hinweis-flaeche), .5em 0 0 var(--srw-hinweis-flaeche);
	border-radius:2px;
}

@media (prefers-reduced-motion:reduce){
	.srw-nummer{ transition:none }
}

/* Auf dem Handy gibt es kein Überfahren — dort dauerhaft leise sichtbar. */
@media (hover:none){
	.srw-nummer{ opacity:.5 }
}

/* ══ Querverweise ══ */

/*
 * Zwei Arten von Verbindung, zwei Handschriften:
 *
 * - **Verweis** auf eine andere Regel („3.11 (a)(ix)") — gepunktet.
 * - **Begriff** auf seine Definition in Sektion 2 — durchgezogen und zart, weil kursive
 *   Begriffe im Fließtext dicht stehen und sonst unruhig wirken.
 *
 * Beide entstehen erst bei der Ausgabe; im gespeicherten Wortlaut steht kein Link.
 */
a.srw-verweis{
	text-decoration:underline;
	text-decoration-style:dotted;
	text-underline-offset:2px;
}

a.srw-begriff{
	color:inherit;
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-decoration-color:color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset:3px;
}
a.srw-begriff:hover{
	text-decoration-color:var(--srw-akzent);
	color:var(--srw-akzent);
}

.srw-rueckverweise{
	margin:2rem 0 0;
	padding:.9rem 1rem;
	background:var(--srw-flaeche);
	border-radius:4px;
	font-size:.94rem;
}
.srw-rueckverweise h2{ font-size:1rem; margin:0 0 .4rem }
.srw-rueckverweise ul{ margin:0; padding-left:1.2em }
.srw-rueckverweise li + li{ margin-top:.3em }

/* ══ Quellenangabe ══ */

.srw-quelle{
	margin:2rem 0 0;
	padding-top:.7rem;
	border-top:1px solid var(--srw-linie);
	font-size:.82rem;
	color:var(--srw-gedaempft);
}
.srw-quelle-hinweis{ font-style:italic }

/* ══ Blättern ══
 *
 * Bewusst **nicht** am unteren Rand klebend. Als klebende Leiste stand sie auf kurzen
 * Regeln mitten im Nichts — zwischen dem Ende des Textes und ihr klaffte eine leere Fläche,
 * weil sie am Fensterrand hängen blieb statt dem Text zu folgen. Sie steht jetzt da, wo man
 * sie sucht: direkt hinter der Regel.
 */

.srw-blaettern{
	display:grid;

	/*
	 * `minmax(0, 1fr)`, nicht `1fr`.
	 *
	 * Eine `1fr`-Spalte schrumpft nicht unter die Mindestbreite ihres Inhalts. Ein langer
	 * Regeltitel mit `nowrap` sprengt sie deshalb, die Leiste wird breiter als die Seite,
	 * und der Kürzungspunkt greift nie. Mit `minmax(0, …)` darf die Spalte kleiner werden —
	 * und erst dann kürzt der Text.
	 */
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	grid-template-areas:
		"zurueck weiter"
		"position position";
	gap:.6rem;
	margin:2rem 0 0;
	padding-top:1.2rem;
	border-top:1px solid var(--srw-linie);
}

.srw-spalte-zurueck{ grid-area:zurueck; min-width:0 }
.srw-spalte-weiter{ grid-area:weiter; min-width:0 }

.srw-blaettern a{
	display:flex;
	align-items:center;
	gap:.5rem;
	min-height:2.75rem;
	padding:.5rem .7rem;
	border:1px solid var(--srw-linie);
	border-radius:4px;
	text-decoration:none;
}
.srw-blaettern a:hover{ border-color:var(--srw-akzent); background:var(--srw-flaeche) }
.srw-spalte-weiter a{ justify-content:flex-end; text-align:right }

.srw-richtung{
	flex:0 0 auto;
	display:inline-block;
	min-width:.7em;
	font-size:1.3rem;
	line-height:1;
	color:var(--srw-gedaempft);
}
.srw-richtung .srw-wort{ display:none }
.srw-zurueck .srw-richtung::before{ content:"‹" }
.srw-weiter .srw-richtung::after{ content:"›" }

/* Der Weiter-Pfeil gehört hinter den Titel, nicht davor. */
.srw-weiter{ flex-direction:row-reverse }

.srw-ziel{
	min-width:0;
	font-weight:600;
	font-size:.88rem;
	line-height:1.3;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.srw-position{
	grid-area:position;
	text-align:center;
	font-size:.82rem;
	color:var(--srw-gedaempft);
	white-space:nowrap;
	font-variant-numeric:tabular-nums;
}

/* ══ Vollständige Regelnummer ══
 *
 * Jeder Punkt ist einzeln zitierbar: „3.16.a.(ii)". Die Nummer steht klein am Rand und ist
 * zugleich der Link darauf — ein Klick legt die Adresse in die Zwischenablage.
 * Zurückhaltend, damit sie den Regeltext nicht stört.
 */

.srw-wortlaut [data-nummer]{ position:relative }

.srw-nummer{
	float:right;
	margin-left:.8em;
	font-size:.72em;
	line-height:1.9;
	letter-spacing:.03em;
	color:var(--srw-gedaempft);
	text-decoration:none;
	opacity:0;
	transition:opacity .15s ease;
}
.srw-wortlaut [data-nummer]:hover > .srw-nummer,
.srw-nummer:focus{ opacity:.75 }
.srw-nummer:hover{ opacity:1; text-decoration:underline }
.srw-nummer.srw-kopiert::after{ content:" ✓ kopiert" }

/* Wer über einen Verweis hier landet, soll sehen, wo. */
.srw-wortlaut [data-nummer]:target{
	background:var(--srw-hinweis-flaeche);
	box-shadow:-.5em 0 0 var(--srw-hinweis-flaeche), .5em 0 0 var(--srw-hinweis-flaeche);
	border-radius:2px;
}

@media (prefers-reduced-motion:reduce){
	.srw-nummer{ transition:none }
}

/* Auf dem Handy gibt es kein Überfahren — dort dauerhaft leise sichtbar. */
@media (hover:none){
	.srw-nummer{ opacity:.5 }
}

/* ══ Querverweise ══ */

/*
 * Zwei Arten von Verbindung, zwei Handschriften:
 *
 * - **Verweis** auf eine andere Regel („3.11 (a)(ix)") — gepunktet.
 * - **Begriff** auf seine Definition in Sektion 2 — durchgezogen und zart, weil kursive
 *   Begriffe im Fließtext dicht stehen und sonst unruhig wirken.
 *
 * Beide entstehen erst bei der Ausgabe; im gespeicherten Wortlaut steht kein Link.
 */
a.srw-verweis{
	text-decoration:underline;
	text-decoration-style:dotted;
	text-underline-offset:2px;
}

a.srw-begriff{
	color:inherit;
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-decoration-color:color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset:3px;
}
a.srw-begriff:hover{
	text-decoration-color:var(--srw-akzent);
	color:var(--srw-akzent);
}

.srw-rueckverweise{
	margin:2rem 0 0;
	padding:.9rem 1rem;
	background:var(--srw-flaeche);
	border-radius:4px;
	font-size:.94rem;
}
.srw-rueckverweise h2{ font-size:1rem; margin:0 0 .4rem }
.srw-rueckverweise ul{ margin:0; padding-left:1.2em }
.srw-rueckverweise li + li{ margin-top:.3em }

/* ══ Quellenangabe ══ */

.srw-quelle{
	margin:2rem 0 0;
	padding-top:.7rem;
	border-top:1px solid var(--srw-linie);
	font-size:.82rem;
	color:var(--srw-gedaempft);
}
.srw-quelle-hinweis{ font-style:italic }

/* ══ Ab Tablet: zweite Spalte, Leiste wieder normal ══ */

@media (min-width:60em){

	.srw-buch{
		--srw-rand:2rem;
		grid-template-columns:minmax(15em,20em) minmax(0,1fr);
		gap:2.5rem;

		/*
		 * Hier **nicht** `align-items: start`.
		 *
		 * Das stand oben für die einspaltige Ansicht und war in zwei Spalten der Fehler:
		 * Die Verzeichnisspalte wurde nur so hoch wie ihr eigener Inhalt. `sticky` klebt aber
		 * nur innerhalb seines Elternelements — bei einer 30 Zeilen langen Regel hatte das
		 * Verzeichnis also nach ein paar Zentimetern keinen Weg mehr und rollte davon.
		 *
		 * Gestreckt reicht die Spalte über die ganze Zeilenhöhe, und das Verzeichnis bleibt
		 * über den gesamten Text stehen.
		 */
		align-items:stretch;
	}
	/* Damit die gestreckte Spalte ihren klebenden Inhalt nicht selbst aufbläht. */
	.srw-inhalt{ min-height:0 }
	.srw-buch.srw-uebersicht{ grid-template-columns:minmax(0,1fr) }

	.srw-schalter{ display:none !important }

	/*
	 * Damit das Verzeichnis überhaupt stehen bleiben kann.
	 *
	 * Customizr setzt `overflow-x: hidden` auf `#tc-page-wrap`. Ein Element mit `overflow`
	 * wird zum Scroll-Container — und `position: sticky` darin bezieht sich dann nicht mehr
	 * aufs Fenster, sondern auf diesen Container. Das Verzeichnis klebt also nie, es scrollt
	 * einfach mit. Der Fehler ist unsichtbar: Es steht keine Warnung irgendwo, sticky tut
	 * nur nichts.
	 *
	 * `clip` schneidet genauso ab, erzeugt aber **keinen** Scroll-Container. Diese Zeile
	 * wirkt nur auf Regelseiten, weil nur dort dieses Stylesheet geladen wird.
	 */
	#tc-page-wrap{ overflow-x:clip }

	/*
	 * Zwei Spalten, die sich nicht gegenseitig mitnehmen.
	 *
	 * Das Verzeichnis bleibt stehen und rollt in sich selbst; `overscroll-behavior: contain`
	 * verhindert, dass die Seite mitrollt, sobald es am Ende ist. Ohne das springt beim
	 * Weiterscrollen im Verzeichnis plötzlich der Regeltext — der häufigste Ärger bei
	 * zweispaltigen Ansichten.
	 *
	 * Beide Spalten mit eigener Bildlaufleiste zu versehen wäre der nächste Schritt, ist
	 * aber keiner: Dann greifen Suchen im Browser, Zurück-Taste und Tastaturblättern nicht
	 * mehr wie erwartet.
	 */
	.srw-schublade{
		display:block !important;      /* ohne JavaScript wie mit: hier immer offen */
		position:sticky;
		top:1rem;
		max-height:calc(100dvh - 2rem);
		margin-top:0;
		overflow-y:auto;
		overscroll-behavior:contain;
		scrollbar-gutter:stable;
		scroll-behavior:smooth;
	}

	.srw-verzeichnis{ font-size:.94rem }
	.srw-verzeichnis a{ padding:.35rem .6rem; border-bottom:0 }
	.srw-ebene-1 > a{ padding-left:1.5rem }
	.srw-ebene-2 > a{ padding-left:2.5rem }
	.srw-ebene-3 > a{ padding-left:3.5rem }

	.srw-regel{ max-width:44em }

	/* Ab Tablet passt die Position zwischen die beiden Ziele, und die Wörter passen dazu. */
	.srw-blaettern{
		grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
		grid-template-areas:"zurueck position weiter";
		gap:1rem;
		align-items:center;
	}
	.srw-richtung .srw-wort{
		display:inline;
		font-size:.72rem;
		text-transform:uppercase;
		letter-spacing:.08em;
		vertical-align:.15em;
	}
	.srw-ziel{ font-size:.92rem }
}

@media (prefers-reduced-motion:reduce){
	.srw-schalter::after{ transition:none }
}

/* ── Verweis auf die Gesamtausgabe ──────────────────────────────────────
   Steht auf der Titelseite des Werks, direkt unter der Fassungszeile. */
.srw-gesamtausgabe{ margin:1.2em 0 1.8em; display:flex; flex-wrap:wrap; gap:.3em .8em; align-items:baseline }
.srw-gesamtausgabe .srw-nebensatz{ font-size:.86em; opacity:.7 }

/* ── Fassungshinweis ────────────────────────────────────────────────────
   Zwei Fälle mit verschiedenem Gewicht: „wortgleich" ist eine Beruhigung,
   „unterscheidet sich" ein Hinweis, der auffallen soll. */
.srw-hinweis-warnung{ border-left:3px solid #9a5a12; padding-left:.8em }
.srw-hinweis .srw-anmerkung{ display:block; margin-top:.3em; font-style:italic; opacity:.85 }

/* ── Definition im Fenster ──────────────────────────────────────────────
   Am Handy füllt es den Bildschirm, am Rechner steht es als Tafel in der
   Mitte. Der Begriffsvorrat selbst bleibt unsichtbar — auch im Druck, wo
   sonst jede Definition ein zweites Mal auf dem Papier stünde. */
.srw-begriffsvorrat{ display:none !important }

dialog.srw-definition{
  border:0; border-radius:10px; padding:0; max-width:44rem; width:calc(100% - 2rem);
  max-height:calc(100dvh - 3rem); color:inherit; background:#fff;
  box-shadow:0 12px 40px rgba(0,0,0,.28);
}
dialog.srw-definition::backdrop{ background:rgba(20,26,22,.55) }
.srw-definition-kopf{
  display:flex; align-items:baseline; gap:1em; justify-content:space-between;
  padding:1.1em 1.3em .6em; border-bottom:1px solid #e2e6db; position:sticky; top:0; background:#fff;
}
.srw-definition-titel{ margin:0; font-size:1.05rem; line-height:1.3 }
.srw-definition-zu{
  border:0; background:transparent; font-size:1.7rem; line-height:1; cursor:pointer;
  color:#6b7a70; padding:0 .2em;
}
.srw-definition-inhalt{ padding:1.1em 1.3em; overflow:auto }
.srw-definition-inhalt :first-child{ margin-top:0 }
.srw-definition-inhalt :last-child{ margin-bottom:0 }
.srw-definition-fuss{
  margin:0; padding:.7em 1.3em 1.1em; font-size:.82rem; opacity:.62;
  border-top:1px solid #eef1ea;
}
@media (max-width:40em){
  dialog.srw-definition{
    width:100%; max-width:none; height:100dvh; max-height:none; border-radius:0; margin:0;
  }
  .srw-definition-inhalt{ padding-bottom:2em }
}
@media print{ dialog.srw-definition{ display:none !important } }

/* ── Die Buchstabenebene hängt wie eine Aufzählung ──────────────────────
 *
 * `a)` steht im Bestand als Überschrift über einer Gruppe, nicht als Listenpunkt — so ist
 * das Regelwerk gegliedert und so bleibt es. Gesetzt wird es aber wie ein Aufzählungspunkt:
 * die Marke hängend links, der Text daneben in derselben Zeile.
 *
 * Vorher stand die Überschrift allein auf einer Zeile und der Satz begann darunter. Das sah
 * aus wie ein Absatzwechsel und riss zusammen, was zusammengehört.
 *
 * Die Maße sind dieselben wie bei den Listen (2,4em Einzug, 2,1em Marke), damit `a)` und
 * das darunter liegende `(i)` sauber ineinandergreifen. */
.srw-wortlaut .wp-block-group[data-nummer],
.srw-definition-inhalt .wp-block-group[data-nummer]{
	position:relative;
	padding-left:2.4em;
	margin:.7em 0;
}
.srw-wortlaut .wp-block-group[data-nummer] h4,
.srw-definition-inhalt .wp-block-group[data-nummer] h4{
	position:absolute;
	left:0; top:0;
	width:2.1em;
	margin:0;
	padding:0;
	text-align:right;
	font-size:1em;
	font-weight:400;
	line-height:inherit;
	color:var(--srw-gedaempft);
	white-space:nowrap;
}
/* Der erste Absatz beginnt auf der Höhe der Marke, nicht darunter. */
.srw-wortlaut .wp-block-group[data-nummer] .wp-block-group__inner-container > :first-child,
.srw-definition-inhalt .wp-block-group[data-nummer] .wp-block-group__inner-container > :first-child,
.srw-wortlaut .wp-block-group[data-nummer] > h4 + *,
.srw-definition-inhalt .wp-block-group[data-nummer] > h4 + *{
	margin-top:0;
}
.srw-wortlaut .wp-block-group[data-nummer] .wp-block-group__inner-container > h4 + *,
.srw-definition-inhalt .wp-block-group[data-nummer] .wp-block-group__inner-container > h4 + *{
	margin-top:0;
}
/* Verschachtelte Gruppen rücken weiter ein, statt neu anzusetzen. */
.srw-wortlaut .wp-block-group[data-nummer] .wp-block-group[data-nummer],
.srw-definition-inhalt .wp-block-group[data-nummer] .wp-block-group[data-nummer]{
	margin-left:0;
}

/* ── Innen eng, außen weit ──────────────────────────────────────────────
 *
 * Erster Anlauf hatte die Rangfolge verkehrt herum: Zwischen `d)` und seinem `(i)` lag der
 * Absatzabstand des Themes von rund 1rem, zwischen `d)` und `e)` nur 0,7em. Damit stand das
 * Untergeordnete weiter weg als das Nebengeordnete — und `(iii)` klebte am nächsten `e)`.
 *
 * Was zusammengehört, muss enger stehen als das, was daneben steht. */
.srw-wortlaut .wp-block-group[data-nummer],
.srw-definition-inhalt .wp-block-group[data-nummer]{
	margin:1.15em 0;
}
.srw-wortlaut .wp-block-group[data-nummer] p,
.srw-definition-inhalt .wp-block-group[data-nummer] p{
	margin-bottom:.3em;
}
.srw-wortlaut .wp-block-group[data-nummer] p + p,
.srw-definition-inhalt .wp-block-group[data-nummer] p + p{
	margin-top:.55em;
}
.srw-wortlaut .wp-block-group[data-nummer] ol,
.srw-wortlaut .wp-block-group[data-nummer] ul,
.srw-definition-inhalt .wp-block-group[data-nummer] ol,
.srw-definition-inhalt .wp-block-group[data-nummer] ul{
	margin-top:.3em;
	margin-bottom:.3em;
}
/* Die letzte Gruppe soll den Wortlaut nicht unten aufreißen. */
.srw-wortlaut .wp-block-group[data-nummer]:last-child,
.srw-definition-inhalt .wp-block-group[data-nummer]:last-child{
	margin-bottom:0;
}

/* ── Benannte Punkte: Marke, Name, dann der Text ────────────────────────
 *
 * `a) Die Spielfläche` ist zweierlei: eine Marke und eine Überschrift. Gesetzt wie ein
 * bloßes `a)` lief der Name quer über den Absatz darunter — zwei Texte übereinander.
 *
 * Hier hängt nur die Marke links, der Name steht als Zeile, der Text beginnt darunter.
 * Die Trennung in zwei Elemente macht `Text\Gliederung` beim Ausliefern. */
.srw-wortlaut .wp-block-group[data-nummer] h4:has(.srw-name),
.srw-definition-inhalt .wp-block-group[data-nummer] h4:has(.srw-name),
.srw-abschnitt .wp-block-group[data-nummer] h4:has(.srw-name){
	position:static;
	width:auto;
	margin:0 0 .15em;
	text-align:left;
	white-space:normal;
	color:inherit;

	/*
	 * **Nicht fett.**
	 *
	 * Fett trägt in diesem Werk Bedeutung: Es verweist auf die Änderungsübersicht. Einen
	 * Namen fett zu setzen hieße zu behaupten, an dieser Stelle habe sich etwas geändert.
	 *
	 * Im Original stehen diese Namen im normalen Schnitt — geprüft an der Fassung 3.4:
	 * „(a) Die Spielfläche" ist dort nicht ausgezeichnet. Fett ist einzig „(c) Untere Bande
	 * und obere Bande", und dort ist der ganze Absatz fett, weil er eine geänderte Stelle
	 * ist. Genau das, was Fett bedeuten soll.
	 *
	 * Als Überschrift erkennbar ist der Name durch die eigene Zeile. Mehr braucht es nicht,
	 * und mehr steht uns auch nicht zur Verfügung: Kursiv ist als „definierter Begriff"
	 * ebenfalls vergeben.
	 */
	font-weight:inherit;
}
.srw-wortlaut .wp-block-group[data-nummer] h4 .srw-marke,
.srw-definition-inhalt .wp-block-group[data-nummer] h4 .srw-marke,
.srw-abschnitt .wp-block-group[data-nummer] h4 .srw-marke{
	position:absolute;
	left:0; top:0;
	width:2.1em;
	text-align:right;
	font-weight:400;
	color:var(--srw-gedaempft);
}
.srw-wortlaut .wp-block-group[data-nummer] h4:has(.srw-name) + *,
.srw-definition-inhalt .wp-block-group[data-nummer] h4:has(.srw-name) + *{
	margin-top:.15em;
}