/*
Theme Name: rechteinfach
Theme URI: https://rechteinfa.ch/blog
Author: rechteinfa.ch
Description: Eigenes Block-Theme für rechteinfa.ch – Einfach Recht. Zeitungsartig in Schwarz-Weiß, ausgelegt auf gute Lesbarkeit langer Texte.
Version: 0.2.1
Requires at least: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rechteinfach
*/

/*
 * Hinweis: Farben, Schriften und Abstände stehen in theme.json.
 * Diese Datei enthält nur Feinheiten, die theme.json nicht abbilden kann.
 */

/* ---------- Grundlagen ---------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Silbentrennung für lange deutsche Wörter (greift dank lang="de-DE") */
.wp-block-post-content p,
.wp-block-post-excerpt__excerpt,
.wp-block-post-content li {
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Trennen nur bei längeren Wörtern (mind. 7 Zeichen, je 3 vor/nach dem Strich),
   damit schmale Spalten nicht von Trennstrichen übersät sind */
.wp-block-post-content p,
.wp-block-post-excerpt__excerpt,
.wp-block-post-content li {
	hyphenate-limit-chars: 7 3 3;
}

/* "Weiterlesen" linksbündig statt zentriert (Constrained-Layout zentriert es sonst) */
.wp-site-blocks .wp-block-read-more {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Überschrift über der Beitragsliste: mehr Luft nach unten */
.site-main > h1.wp-block-heading,
.site-main > .wp-block-query-title {
	margin-bottom: var(--wp--preset--spacing--50);
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/* Kein zusätzlicher Abstand zwischen Header, Inhalt und Footer;
   den Abstand regelt .site-main */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.site-main {
	padding-block: var(--wp--preset--spacing--60);
}

/* ---------- Kopfbereich (Zeitungskopf) ---------- */

.site-header {
	padding-top: var(--wp--preset--spacing--50);
}

.site-header .wp-block-site-tagline {
	margin-top: 0.35rem;
}

/* Menüleiste: eine Linie oben, Doppellinie unten.
   Die Klasse "site-nav" sitzt bei WordPress mehrfach ineinander verschachtelt,
   deshalb gilt der Rahmen nur für das äußerste Element. */
.site-header > .site-nav {
	margin-top: var(--wp--preset--spacing--40);
	padding-block: 0.7rem;
	border-top: 1px solid var(--wp--preset--color--contrast);
	border-bottom: 4px double var(--wp--preset--color--contrast);
}

.site-nav .site-nav {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Aufklappmenü: dünne Trennlinie unter dem ersten Eintrag ("Alle") */
.site-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item:first-child {
	margin-bottom: 0.4rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--wp--preset--color--muted);
}

/* Aufklappmenü am Desktop: Papierton und dünner schwarzer Rand */
.site-header .site-nav .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
}

/* Handymenü (Vollbild-Overlay): keine Trennlinie nach "Alle" */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item:first-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* Handymenü: Unterpunkte (Kategorien) kleiner und heller als die Hauptpunkte */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 0.85em;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}

/* Tastaturfokus im Menü: Unterstreichung statt Rahmen (bleibt sichtbar, wirkt ruhiger) */
.site-nav a:focus-visible {
	outline: none;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

/* ---------- Fußbereich ---------- */

.site-footer {
	padding-block: var(--wp--preset--spacing--50);
}

/* Linie über der Fußzeile: gleiche Breite wie die Linien im Kopf */
.site-footer::before {
	content: "";
	display: block;
	max-width: var(--wp--style--global--wide-size, 68rem);
	margin: 0 auto var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--contrast);
}

.footer-note {
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ---------- Überschriften und Zitate im Inhalt ---------- */

/* Mehr Luft unter dem Seiten- bzw. Beitragstitel */
.site-main > .wp-block-post-title {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Mehr Luft über Zwischenüberschriften (nicht, wenn sie ganz oben stehen) */
.wp-block-post-content > * + h2 {
	margin-top: 2.75rem;
}

.wp-block-post-content > * + h3 {
	margin-top: 2.25rem;
}

/* Infoseiten (Impressum, Datenschutz, Links): kleinere Zwischenüberschriften */
.info-text .wp-block-post-content h2 {
	font-size: 1.5rem;
}

.info-text .wp-block-post-content h3 {
	font-size: 1.2rem;
}

/* Zitatkasten: keine Silbentrennung, gleichmäßig umbrechen (bei zentriertem Großtext schöner) */
.wp-site-blocks .wp-block-pullquote p {
	hyphens: manual;
	text-wrap: balance;
}

/* Zitatkasten (Pullquote): Quellenangabe etwas kleiner als der Zitattext */
.wp-site-blocks .wp-block-pullquote cite {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.85em;
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------- Beitragsmeta (Rubrik · Datum · Autor) ---------- */

.post-meta {
	gap: 0.25rem 0.75rem;
	margin-bottom: 0.5rem;
}

.post-meta > * + * {
	padding-left: 0.75rem;
	border-left: 1px solid var(--wp--preset--color--muted);
}

/* ---------- Beitragsliste ---------- */

.post-item {
	padding-block: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--contrast);
}

.wp-block-post-template > li:first-child .post-item {
	padding-top: 0;
}

.post-item .wp-block-post-title {
	margin-block: 0.25rem 0.75rem;
}

.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--ui);
}

/* ---------- Landingpage: Teaser-Kästen ---------- */

.front-page .section-heading {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 4px double var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.teaser {
	box-sizing: border-box;
	height: 100%;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--contrast);
}

.teaser .wp-block-post-title {
	margin-block: 0.4rem 0.6rem;
	font-size: var(--wp--preset--font-size--large);
}

.teaser .wp-block-post-excerpt {
	font-size: var(--wp--preset--font-size--small);
}

/* Desktop: 3 Spalten (Vorgabe aus dem Template).
   Handy UND Tablet: untereinander (bis 1023 px Breite).
   Zum Ändern: 1023px durch 781px ersetzen, dann sind Tablets dreispaltig. */
@media (max-width: 1023px) {
	.teaser-grid.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ---------- Hinweisbox (Landingpage) ---------- */

.notice {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--contrast);
	border-left-width: 6px;
	background: var(--wp--preset--color--subtle);
}

.notice > :first-child {
	margin-top: 0;
}

.notice > :last-child {
	margin-bottom: 0;
}

/* ---------- Einzelbeitrag ---------- */

.author-box {
	margin-top: var(--wp--preset--spacing--60);
	padding-block: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--contrast);
}

/* Autorenbox: kompakt, bündig mit dem Fließtext */
.author-box .wp-block-post-author {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
}

/* leeren Avatar-Platz entfernen (Avatare sind aus Datenschutzgründen abgeschaltet) */
.author-box .wp-block-post-author__avatar:empty,
.author-box .wp-block-post-author__avatar:not(:has(img)) {
	display: none;
}

.author-box .wp-block-post-author__content {
	margin: 0;
	padding: 0;
}

.author-box .wp-block-post-author__byline {
	margin: 0;
	font-size: 0.6875rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.author-box .wp-block-post-author__name {
	margin: 0.1rem 0 0.35rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 700;
}

.author-box .wp-block-post-author__bio {
	/* Zeilenumbrüche aus dem Profiltext übernehmen */
	white-space: pre-line;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast);
}

.post-nav {
	margin-top: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Autorenseite ---------- */

.author-header {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
	margin-bottom: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
	border-bottom: 4px double var(--wp--preset--color--contrast);
}

.author-header__avatar img {
	display: block;
	border-radius: 50%;
	filter: grayscale(1);
}

.author-header__text {
	flex: 1 1 18rem;
}

.author-header__label,
.author-header__count {
	margin: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.author-header__name {
	margin: 0.25rem 0 0.75rem;
}

.author-header__bio {
	margin: 0 0 0.75rem;
}

/* ---------- Infoseiten (Impressum, Datenschutz, Links) in Source Sans ---------- */

.info-text,
.info-text .wp-block-post-content {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1rem;
}

/* ---------- Schaltflächen ---------- */

.wp-element-button:hover,
.wp-block-button__link:hover {
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--base);
}

/* ---------- Schlagworte ---------- */

/* Schlagworte unter dem Beitrag: dezente Infozeile in der Sans-Schrift */
.wp-block-post-terms.taxonomy-post_tag {
	margin-top: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--muted);
}

.wp-block-post-terms.taxonomy-post_tag a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* Schlagwortwolke (Seite "Schlagworte") */
.wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.25rem;
	line-height: 1.2;
}

.wp-block-tag-cloud a {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.wp-block-tag-cloud a:hover {
	text-decoration: none;
	border-bottom-color: currentColor;
}

/* ---------- Suche (Lupe im Menü) ---------- */

.site-nav .wp-block-search {
	margin: 0;
}

.site-nav .wp-block-search .wp-block-search__button {
	padding: 0.25rem 0.4rem;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	line-height: 1;
}

.site-nav .wp-block-search .wp-block-search__button:hover {
	background: transparent;
	color: var(--wp--preset--color--muted);
}

.site-nav .wp-block-search .wp-block-search__button svg {
	width: 1.35rem;
	height: 1.35rem;
	fill: currentColor;
}

.site-nav .wp-block-search .wp-block-search__input {
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.875rem;
}

/* ---------- Suche: Feinschliff ---------- */

/* Eingabefeld in der Lupe: kein Großbuchstaben-Zwang vom Menü, keine runden Ecken, klarer Fokus */
.site-nav .wp-block-search .wp-block-search__input {
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 0.95rem;
	border-radius: 0;
	accent-color: var(--wp--preset--color--contrast);
}

.site-nav .wp-block-search .wp-block-search__input:focus,
.site-nav .wp-block-search .wp-block-search__input:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--contrast);
	box-shadow: 0 0 0 1px var(--wp--preset--color--contrast);
}

.site-nav .wp-block-search .wp-block-search__inside-wrapper {
	border-radius: 0;
}

/* Handymenü: Suche mittig wie die übrigen Einträge */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-search {
	margin-inline: auto;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-search .wp-block-search__inside-wrapper {
	justify-content: center;
}

/* Suchfeld auf der Suchergebnisseite und der 404-Seite im Stil der Seite */
.site-main .wp-block-search .wp-block-search__input {
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 1rem;
}

.site-main .wp-block-search .wp-block-search__input:focus,
.site-main .wp-block-search .wp-block-search__input:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px var(--wp--preset--color--contrast);
}

.site-main .wp-block-search .wp-block-search__button {
	margin-left: 0.5rem;
	padding: 0.65rem 1.5rem;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.site-main .wp-block-search .wp-block-search__button:hover {
	background: var(--wp--preset--color--muted);
	border-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--base);
}

/* "Schlagworte" als dezenter Link zur Übersicht (Tags selbst bleiben normale Links) */
.wp-block-post-terms__prefix a {
	color: inherit;
	text-decoration: underline dotted;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.wp-block-post-terms__prefix a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration-style: solid;
}

/* ---------- Lexikon der Rechtsbegriffe ---------- */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.lexikon-index {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-bottom: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.9375rem;
	font-weight: 600;
}

.lexikon-index a,
.lexikon-index span {
	box-sizing: border-box;
	min-width: 2rem;
	padding: 0.2rem 0.4rem;
	border: 1px solid var(--wp--preset--color--contrast);
	text-align: center;
	text-decoration: none;
}

.lexikon-index a:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Buchstaben ohne Einträge: blass, nicht anklickbar */
.lexikon-index span {
	border-color: var(--wp--preset--color--subtle);
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.lexikon-group {
	scroll-margin-top: 1.5rem;
}

.lexikon-group .lexikon-letter {
	margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--30);
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	font-size: 1.75rem;
}

.lexikon-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lexikon-list li {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--wp--preset--color--subtle);
}

.lexikon-term {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem;
	font-weight: 700;
	text-decoration: none;
}

.lexikon-term:hover {
	text-decoration: underline;
}

.lexikon-title {
	display: block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

/* ---------- Rechtsgebiete ---------- */

/* In der Kopfzeile von Beitrag und Beitragsliste: grau wie das Datum,
   ohne Großbuchstaben, damit es nicht mit der Kategorie konkurriert */
.wp-block-post-terms.taxonomy-rechtsgebiet {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--muted);
}

.wp-block-post-terms.taxonomy-rechtsgebiet a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-terms.taxonomy-rechtsgebiet a:hover,
.wp-block-post-terms.taxonomy-rechtsgebiet a:focus-visible {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

/* Teaser-Kästen der Startseite: Rechtsgebiet klein direkt unter der Kategorie */
.teaser .wp-block-post-terms.taxonomy-rechtsgebiet {
	margin-top: 0.15rem;
	font-size: 0.8125rem;
}

/* Übersichtsseite eines Rechtsgebiets: kleine Beschriftung über dem Titel */
.archive-label {
	margin-bottom: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.site-main > .archive-label + .wp-block-query-title {
	margin-top: 0.25rem;
}

/* ---------- Lexikon: Filter nach Rechtsgebiet ---------- */

.lexikon-status {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.lexikon-status strong {
	color: var(--wp--preset--color--contrast);
}

.lexikon-filter {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.lexikon-filter__title {
	margin: 0 0 0.5rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.lexikon-filter__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Untergebiete eingerückt, mit feiner Linie */
.lexikon-filter__nav ul ul {
	margin: 0.15rem 0 0.15rem 0.2rem;
	padding-left: 0.8rem;
	border-left: 1px solid var(--wp--preset--color--subtle);
}

.lexikon-filter__nav li {
	margin: 0.2rem 0;
}

.lexikon-filter__all {
	margin-bottom: 0.35rem !important;
	padding-bottom: 0.35rem !important;
	border-bottom: 1px solid var(--wp--preset--color--subtle);
}

.lexikon-filter__nav a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.lexikon-filter__nav a:hover {
	text-decoration: underline;
}

.lexikon-filter__nav a.is-active {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.lexikon-filter__count {
	font-size: 0.8em;
	color: var(--wp--preset--color--muted);
}

/* Schmale Bildschirme (Handy, Tablet): aufklappbares Feld unter der A–Z-Leiste */
.lexikon-filter--wide {
	display: none;
}

.lexikon-filter--narrow {
	margin: 0 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--contrast);
}

.lexikon-filter--narrow summary {
	padding: 0.5rem 0.75rem;
	font-weight: 600;
	cursor: pointer;
}

/* Fokus nach Antippen/Tastatur: Unterstreichung wie im Menü statt abgerundetem Browser-Rahmen */
.lexikon-filter--narrow summary:focus {
	outline: none;
}

.lexikon-filter--narrow summary:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.lexikon-filter--narrow[open] summary {
	border-bottom: 1px solid var(--wp--preset--color--subtle);
}

.lexikon-filter--narrow .lexikon-filter__nav {
	padding: 0.5rem 0.75rem 0.75rem;
}

/* Breite Bildschirme: Spalte rechts neben der Liste.
   Die Liste bleibt bündig mit dem Seitentitel, die Spalte ragt in den
   freien Rand rechts hinein (Inhaltsbreite 40rem, breite Fläche 68rem). */
@media (min-width: 72rem) {
	.lexikon.has-filter {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 12rem;
		column-gap: 2rem;
		align-items: start;
		width: calc(100% + 14rem);
		max-width: none;
	}

	.lexikon.has-filter .lexikon-filter--narrow {
		display: none;
	}

	.lexikon.has-filter .lexikon-filter--wide {
		display: block;
		position: sticky;
		top: 1.5rem;
	}
}