/*
 * Kapitalfluss Recht — Darstellung der Rechtstexte.
 *
 * GRUNDSATZ: Diese Datei setzt keine eigenen Farben und keine eigene Schrift.
 *
 * Die erste Fassung tat das und war damit falsch. Sie brachte einen dunklen
 * Modus mit, der an `prefers-color-scheme` hing — also an der Einstellung des
 * Betriebssystems. Das Theme folgt dieser Einstellung aber nicht, es bleibt
 * hell. Ergebnis auf einem Rechner mit dunklem Systemthema: heller Grund vom
 * Theme, dunkelgrauer Text von uns, und ein schwarzer Adresskasten mitten auf
 * der weißen Seite. Unleserlich.
 *
 * Die Lehre daraus: Wer den Grund nicht selbst malt, darf die Schrift nicht
 * selbst einfärben. Deshalb kommt hier alles Farbige aus dem Theme —
 * `inherit` für Text, `currentColor` für alles, was sich davon ableitet, und
 * neutrale Halbtransparenz für Linien und Flächen. Das funktioniert auf jedem
 * Grund, hell wie dunkel, ohne dass diese Datei wissen muss, welcher es ist.
 *
 * Geregelt wird hier nur noch, was Farbe nicht betrifft: Breite, Abstände,
 * Rhythmus, Zeilenlänge.
 */

.kf-recht{
	max-width:44rem;          /* an der Schriftgröße des Themes, nicht an px */
	margin-inline:auto;
	/* Schrift, Größe und Farbe kommen vom Theme. Nur der Zeilenabstand wird
	   etwas geöffnet — Rechtstexte werden lang und sollen lesbar bleiben. */
	line-height:1.7;
}

/* --------------------------------------------------------------- Text */

.kf-recht > :first-child{ margin-top:0 }
.kf-recht > :last-child{ margin-bottom:0 }

.kf-recht p{ margin:0 0 1.15em; max-width:68ch }

.kf-recht h2{
	/* Größe relativ zum Fließtext, damit sie zur Theme-Typografie passt. */
	font-size:1.28em;
	line-height:1.3;
	margin:2.3em 0 .7em;
	padding-top:1.1em;
	border-top:1px solid;
	border-color:currentColor;
	/* Eine Linie in voller Textfarbe wäre zu laut. Halbtransparenz macht sie
	   ruhig und passt sich zugleich jedem Grund an. */
	border-top-color:color-mix(in srgb, currentColor 18%, transparent);
}
.kf-recht > h2:first-child{ border-top:0; padding-top:0; margin-top:0 }

/* Der Vorspann schließt selbst mit einer Linie ab — sonst stünden zwei
   Striche mit einer Lücke dazwischen. */
.kf-recht-vor + h2{ border-top:0; padding-top:0; margin-top:1.6em }

/* Links behalten die Farbe des Themes. Nur der Unterstrich wird ruhiger
   gesetzt und beim Überfahren deutlicher. */
.kf-recht a{
	text-underline-offset:.18em;
	text-decoration-thickness:.06em;
}
.kf-recht a:hover{ text-decoration-thickness:.12em }
.kf-recht a:focus-visible{ outline:2px solid currentColor; outline-offset:2px; border-radius:2px }

/*
 * Gedämpfter Text: nicht über eine graue Farbe, sondern über Deckkraft.
 * Grau wäre auf dunklem Grund zu dunkel und auf hellem zu hell — Deckkraft
 * mischt dagegen immer zum tatsächlichen Hintergrund hin.
 */
.kf-recht-vor{
	font-size:1.06em;
	opacity:.78;
	padding-bottom:1.3em;
	margin-bottom:.4em !important;
	border-bottom:1px solid color-mix(in srgb, currentColor 18%, transparent);
}

/* Anschriften: ein ruhiger Block, getönt aus der Textfarbe. Auf hellem Grund
   wird daraus ein zartes Grau, auf dunklem ein leichter Aufheller. */
.kf-recht .kf-adresse{
	background:color-mix(in srgb, currentColor 6%, transparent);
	border:1px solid color-mix(in srgb, currentColor 10%, transparent);
	border-radius:.6em;
	padding:1em 1.15em;
	line-height:1.62;
	display:inline-block;
	min-width:min(100%,20rem);
}

.kf-recht-punkte{ margin:0 0 1.3em; padding-left:1.25em; max-width:68ch }
.kf-recht-punkte li{ margin-bottom:.6em; padding-left:.15em }
.kf-recht-punkte li::marker{ color:color-mix(in srgb, currentColor 55%, transparent) }

/* Begriff und Erklärung nebeneinander, auf dem Handy untereinander. */
.kf-recht-liste{ margin:0 0 1.4em; max-width:68ch }
.kf-recht-liste dt{ font-weight:600; margin-top:.85em }
.kf-recht-liste dd{ margin:.1em 0 0; opacity:.82 }
@media (min-width:620px){
	.kf-recht-liste{ display:grid; grid-template-columns:minmax(9rem,auto) 1fr;
		gap:.55em 1.6em; align-items:baseline }
	.kf-recht-liste dt{ margin-top:0 }
	.kf-recht-liste dd{ margin:0 }
}

.kf-recht-stand{
	margin-top:2.4em !important;
	padding-top:1.1em;
	border-top:1px solid color-mix(in srgb, currentColor 18%, transparent);
	font-size:.87em;
	opacity:.72;
}

/*
 * Fallback für Browser ohne color-mix (älter als 2023). Dort werden die
 * Regeln oben verworfen; ein neutrales Grau mit Alpha sieht auf hellem wie
 * dunklem Grund vertretbar aus. @supports steht NACH den Regeln, damit die
 * bessere Variante gewinnt, wo sie verstanden wird.
 */
@supports not (background: color-mix(in srgb, currentColor 6%, transparent)){
	.kf-recht h2,
	.kf-recht-vor,
	.kf-recht-stand{ border-color:rgba(128,128,128,.32) }
	.kf-recht .kf-adresse{ background:rgba(128,128,128,.10);
		border-color:rgba(128,128,128,.20) }
	.kf-recht-punkte li::marker{ color:rgba(128,128,128,.9) }
}

/* ------------------------------------------- Fußzeile des Hauptplugins */

/*
 * Auf dem Bildschirmfoto sah „Datenschutz“ wie ein Kasten aus: Das Theme
 * gestaltet Links in der Fußzeile als Knöpfe, mit Rahmen und Innenabstand.
 * Hier wird das zurückgenommen — ein Link soll wie ein Link aussehen. Die
 * Farbe bleibt die des Themes.
 */
body.kf-hat-kf .kf-fuss a,
body.kf-hat-kf .kf-fuss a:visited{
	border:0 !important;
	background:none !important;
	padding:0 !important;
	border-radius:0 !important;
	box-shadow:none !important;
	color:inherit;
	text-decoration:underline;
	text-underline-offset:.2em;
	text-decoration-thickness:.06em;
	opacity:.85;
}
body.kf-hat-kf .kf-fuss a:hover{ opacity:1; text-decoration-thickness:.12em }

/* Eigene Leiste, wenn keine Kapitalfluss-Fußzeile da ist. */
.kf-recht-fussleiste{
	border-top:1px solid rgba(128,128,128,.22);
	padding:1.4em 1em 1.9em;
	text-align:center;
	font-size:.9em;
}
.kf-recht-fussleiste nav{ display:flex; gap:1.6em; justify-content:center; flex-wrap:wrap }
.kf-recht-fussleiste a{ color:inherit; opacity:.72;
	text-decoration:underline; text-underline-offset:.2em }
.kf-recht-fussleiste a:hover{ opacity:1 }

/* ------------------------------------------------------------- Drucken */

@media print{
	.kf-recht{ max-width:none; font-size:11pt }
	.kf-recht h2{ page-break-after:avoid }
	.kf-recht p, .kf-recht li{ page-break-inside:avoid }
	.kf-recht .kf-adresse{ background:none; border:1px solid #999 }
	.kf-recht a{ text-decoration:none }
	.kf-recht a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em }
	.kf-recht-fussleiste{ display:none }
}