/* ---------------------------------------------------------------------------
 * Rechtstexte: Struktur, die ein Vertrag braucht
 *
 * Das Theme bringt die ruhige Lesespalte mit (.nv-legal). Was hier
 * dazukommt, sind die Bauteile, die erst mit den AGB, dem
 * Auftragsverarbeitungsvertrag und der Plattform-Datenschutzerklaerung
 * auftreten: nummerierte Absaetze, Buchstabenaufzaehlungen, Tabellen und
 * ein Inhaltsverzeichnis.
 *
 * Warum aus dem Plugin und nicht aus dem Theme: Die Seiten kommen aus dem
 * Plugin, und wer es aktualisiert, bekommt die passende Darstellung
 * mitgeliefert. Ein Theme, das eine Fassung hinterherhinkt, zeigte sonst
 * einen Vertrag ohne Gliederung.
 * ------------------------------------------------------------------------ */

.nv-legal h3 {
	margin: 1.75rem 0 0.625rem;
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
}

/* Der Absatz traegt seine Nummer haengend, damit die Ziffern beim
   Ueberfliegen eine Spalte bilden. Auf schmalen Geraeten waere der Einzug
   verschenkte Breite; dort steht die Nummer im Fliesstext. */
.nv-legal__absatz {
	padding-left: 2.25rem;
	text-indent: -2.25rem;
}

.nv-legal__nr {
	display: inline-block;
	min-width: 2.25rem;
	text-indent: 0;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 40rem) {
	.nv-legal__absatz {
		padding-left: 0;
		text-indent: 0;
	}

	.nv-legal__nr {
		min-width: 0;
		margin-right: 0.35rem;
	}
}

.nv-legal ul,
.nv-legal ol {
	margin: 0 0 1rem;
	padding-left: 1.5rem;
	line-height: 1.75;
}

.nv-legal li {
	margin-bottom: 0.5rem;
}

.nv-legal__buchstaben {
	list-style: none;
	padding-left: 2.25rem;
}

.nv-legal__buchstaben > li {
	text-indent: -1.5rem;
}

.nv-legal__marke {
	display: inline-block;
	min-width: 1.5rem;
	text-indent: 0;
	color: var(--wp--preset--color--muted);
}

.nv-legal__anschrift {
	margin: 0 0 1.25rem;
	padding: 0.875rem 1.125rem;
	border-left: 3px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	font-style: normal;
	line-height: 1.7;
}

/* Eine Preistabelle mit fuenf Spalten passt auf kein Telefon. Sie rollt
   deshalb in ihrem eigenen Rahmen, statt die ganze Seite breit zu machen. */
.nv-legal__tabelle {
	margin: 0 0 1.5rem;
	overflow-x: auto;
}

.nv-legal__tabelle table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.nv-legal__tabelle th,
.nv-legal__tabelle td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}

.nv-legal__tabelle th {
	font-weight: 600;
	white-space: nowrap;
}

.nv-legal__toc {
	margin: 0 0 2.5rem;
	padding: 1.125rem 1.375rem;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
}

.nv-legal__toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 2rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.nv-legal__toc li {
	margin-bottom: 0.25rem;
	break-inside: avoid;
}

@media (max-width: 40rem) {
	.nv-legal__toc ul {
		columns: 1;
	}
}

/* Die Fassungsseiten und die Textfassung verweisen aufeinander. */
.nv-legal__fassung {
	margin: 2.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.nv-legal h4 {
	margin: 1.25rem 0 0.5rem;
	font-size: 1rem;
	font-weight: 600;
}