/*
Theme Name: KREISMUSIK
Theme URI: https://kreismusik.de/
Author: KREISMUSIK
Description: Nachbau des bisherigen Kreismusik-Layouts (Basis: Twenty Twelve 1.1 mit KM-Anpassungen) – jetzt auch für Smartphones und Tablets. Keine externen Schriften oder Skripte. Zweite Menüebene (Künstler-Menü) direkt im Theme.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kreismusik
*/

/*
 * Ladereihenfolge: css/legacy.css (altes Theme) -> css/custom.css (altes Custom CSS) -> diese Datei.
 * Diese Datei enthält nur Ergänzungen: neue Komponenten und die mobile Darstellung.
 *
 * Breakpoints:
 *   >= 980px  Desktop, entspricht der bisherigen Seite
 *   600–979px Tablet: fließende Breiten, Menü wie Desktop (umbrechend)
 *   < 600px   Smartphone: aufklappbares Hauptmenü, einspaltige Inhalte
 */

/* ==========================================================================
   Allgemein
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	background: #fff;
	clip: auto !important;
	clip-path: none;
	color: #000;
	display: block;
	font-size: 14px;
	height: auto;
	left: 6px;
	padding: 12px 18px;
	position: absolute;
	top: 6px;
	width: auto;
	z-index: 100000;
}

/* Tastaturfokus sichtbar halten (die alte Seite hatte ihn komplett entfernt) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* Bilder skalieren proportional (alte Inhalte tragen feste width/height-Attribute) */
.entry-content img {
	height: auto;
	max-width: 100%;
}

.entry-content iframe {
	max-width: 100%;
}

/* Artikel umschließen ihre gefloateten Inhalte (Künstlerseiten), damit der Abstand zum
   Footer wie bisher erhalten bleibt (früher erledigte das der leere Kommentarbereich) */
.site-content article {
	display: flow-root;
}

/* Header-Link um das Logo */
.site-logo {
	display: inline-block;
}

.site-logo .site-title {
	font-family: var(--km-font-display, Palatino, "Palatino Linotype", Georgia, serif);
	font-size: 48px;
	line-height: 95px;
	color: #000;
	letter-spacing: 2px;
}

/* Menüpunkte ohne Ziel ("Mehr") */
.main-navigation li a:not([href]) {
	cursor: default;
}

/* Menü-Button nur mobil */
.menu-toggle {
	display: none;
}

/* Container um das Hauptmenü (für die mobile Aufklapp-Animation); auf größeren Bildschirmen neutral */
@media screen and (min-width: 600px) {
	.menu-primary-wrap {
		display: contents;
	}
}

/* Untermenü-Button: auf dem Desktop unsichtbar, aber per Tastatur erreichbar
   (Fokus darauf öffnet das Dropdown über :focus-within). Mobil sichtbar, siehe unten. */
.submenu-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.submenu-toggle-icon {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s;
}

/* Hintergrund wie bisher auf allen Breiten grau (Twenty Twelve färbt .site unter 960px weiß) */
body .site {
	background-color: transparent;
}

/* Zweite Ebene als eigene <nav>: Abstände wie bisher (dort war sie Teil derselben <nav>) */
.secondary-navigation {
	margin-top: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

#colophon img {
	display: inline-block;
	width: 50px;
	height: auto;
}

.footer-links {
	font-size: 13px;
}

/* ==========================================================================
   Blog ("Neues")
   ========================================================================== */

/* Bild- und Video-Blöcke mit denselben Abständen wie früher die Bilder/Videos im
   klassischen Editor (dort standen sie in einem Absatz: 24px darunter, Bild auf der
   Textgrundlinie) */
.entry-content .wp-block-image,
.entry-content .wp-block-embed {
	margin: 0 0 24px;
}

.entry-content .wp-block-image img {
	vertical-align: baseline;
}

/* Trennlinien-Block wie die bisherige Linie (1px hellgrau, ohne Rand des Blocks) */
.entry-content .wp-block-separator {
	border: 0;
}

/* Tabellen-Block wie die bisherige Tabelle (Cookie-Richtlinie): ohne Rahmen, Zellen wie Absätze */
.entry-content .wp-block-table table {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.entry-content .wp-block-table td,
.entry-content .wp-block-table th {
	border: 0;
	padding: 6px 10px 30px 0;
	vertical-align: top;
}

.km-post .entry-content > h1.km-post-title:first-child {
	margin-top: 0;
}

/* Verlinkte Beitragstitel: Farbe der Überschrift, Linie siehe "Links" am Ende */
.km-post-title a {
	color: inherit;
}

.site-content article.km-post {
	display: block; /* Abstände sollen wie früher mit der Trennlinie zusammenfallen */
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

hr.km-post-separator {
	margin: 18px 0 28px;
}

/* Linie über den Navigationen (statt Kasten, seit 02.11.2026) */
hr.km-post-separator.km-post-nav-rule {
	margin: 30px 0 7px;
}

/* Blätter-Navigation (Startseite) und Vor/Zurück unter einem Beitrag: ohne Kasten, Linie
   darüber; Links wie im Menü ohne Unterstreichung (nur beim Darüberfahren).
   .site-content: schlägt "nav { line-height: 2 }" aus legacy.css */
.site-content .km-pagination,
.site-content .km-post-nav {
	margin: 0;
	text-align: center;
	font-size: 14px;
	line-height: 20px;
}

.km-pagination a,
.km-post-nav a {
	color: #000;
	text-decoration: none;
}

.km-pagination a:hover,
.km-post-nav a:hover {
	text-decoration: underline;
}

/* Pfeil = dasselbe Zeichen "▾" in der Menüschrift wie bei den Dropdowns im Hauptmenü
   (custom.css), nach links bzw. rechts gedreht */
.km-arrow {
	flex: none;
	display: inline-block;
	font-family: var(--km-font-display, Palatino, "Palatino Linotype", Georgia, serif);
	font-size: calc(17px * var(--km-menu-scale, 1));
	line-height: 1;
	color: #000;
}

.km-arrow::before {
	content: "▾";
}

.km-arrow-prev {
	transform: rotate(90deg);
	margin-right: 8px;
}

.km-arrow-next {
	transform: rotate(-90deg);
	margin-left: 8px;
}

.km-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 14px;
}

.km-pagination .prev,
.km-pagination .next {
	display: inline-flex;
	align-items: center;
}

.km-pagination .page-numbers.current {
	font-weight: bold;
}

/* Vor | Alle Neuigkeiten | Zurück: drei Spalten, alles vertikal mittig; lange Titel brechen
   neben dem Pfeil um (Pfeil bleibt mittig daneben, Text bündig) */
.site-content .km-post-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 6px 24px;
	text-align: left;
}

.km-post-nav a {
	display: inline-flex;
	align-items: center;
}

.km-post-nav-home {
	text-align: center;
}

.km-post-nav-next,
.km-post-nav-next a {
	text-align: right;
}

/* Smartphone: Vor/Zurück nebeneinander, "Alle Neuigkeiten" in eigener Zeile darunter */
@media screen and (max-width: 599px) {
	.site-content .km-post-nav {
		grid-template-columns: 1fr 1fr;
	}

	.km-post-nav-home {
		grid-column: 1 / -1;
		grid-row: 2;
		padding-top: 8px;
		border-top: 1px solid #c3c3c3;
	}
}

.archive-header {
	margin-bottom: 24px;
	border: 0;
}

.archive-title {
	font-size: 20px;
	line-height: 1.2;
	text-transform: none;
	color: #333;
}

/* ==========================================================================
   Tablet und kleiner (< 980px): fließendes Layout statt fester 900/800px
   ========================================================================== */

@media screen and (max-width: 979px) {
	body .site {
		width: auto;
		max-width: 900px;
		margin: 20px auto;
		padding: 0 24px;
		box-sizing: border-box;
	}

	#page {
		width: auto;
	}

	#main {
		width: auto;
		max-width: 800px;
	}

	.main-navigation ul.nav-menu-secondary {
		width: 100%;
		max-width: 780px;
	}

	.main-navigation li.menu-item {
		margin: 0 12px;
	}

	/* Künstlerseiten: Bild links, Text rechts – Text nimmt die Restbreite ein */
	div.artist-container,
	div.artist-container-detailed {
		float: none;
		display: flow-root;
	}

	div.artist-info-container {
		float: none;
		width: auto;
		overflow: hidden;
	}

	div.artist-releases-container {
		width: auto;
		max-width: 270px;
	}

	table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}

/* Tablet/Desktop: Untermenüs auch per Fokus/Tap erreichbar (Touch hat kein Hover) */
@media screen and (min-width: 600px) {
	.main-navigation ul li:focus-within > ul,
	.main-navigation ul li.is-open > ul {
		display: block;
		border-left: 0;
	}
}

/* Desktop: Hauptmenü 1px größer als im Original (passend zum größeren Fließtext),
   Künstlermenü bleibt bei der alten Größe, Dropdown-Unterpunkte 14px (custom.css);
   erst ab 980px, darunter bricht das Hauptmenü sonst zweizeilig um */
@media screen and (min-width: 980px) {
	.main-navigation li.menu-item a {
		font-size: calc(17px * var(--km-menu-scale, 1));
	}

	/* Hauptmenü auf Inhaltsbreite verteilt: erster/letzter Eintrag bündig mit dem
	   Inhalt (#main 800px), die Linie darunter bleibt seitenbreit (900px) */
	.main-navigation ul.nav-menu-primary {
		display: flex !important; /* legacy.css erzwingt inline-block !important */
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;
		padding-left: 50px;
		padding-right: 50px;
	}

	.main-navigation .nav-menu-primary > li.menu-item {
		margin: 0;
	}
}

/* ==========================================================================
   Smartphone (< 600px)
   ========================================================================== */

@media screen and (max-width: 599px) {
	body .site {
		margin-top: 12px;
		padding: 0 16px;
	}

	#masthead .header-image {
		height: auto;
		width: min(100%, 330px);
		margin-top: 0;
	}

	/* Menü-Button */
	.menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		margin: 14px auto 8px;
		padding: 8px 18px;
		background: transparent;
		border: 1px solid #c3c3c3;
		border-radius: 3px;
		box-shadow: none;
		color: #000;
		font-family: var(--km-font-display, Palatino, "Palatino Linotype", Georgia, serif);
		font-size: calc(16px * var(--km-menu-scale, 1));
		line-height: 24px;
		text-transform: uppercase;
		cursor: pointer;
	}

	.menu-toggle-icon,
	.menu-toggle-icon::before,
	.menu-toggle-icon::after {
		display: block;
		width: 18px;
		height: 2px;
		background: #000;
		position: relative;
		transition: transform 0.25s ease, background-color 0.25s ease;
	}

	.menu-toggle-icon::before,
	.menu-toggle-icon::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.menu-toggle-icon::before {
		top: -6px;
	}

	.menu-toggle-icon::after {
		top: 6px;
	}

	.menu-toggle[aria-expanded="true"] .menu-toggle-icon {
		background: transparent;
	}

	.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before {
		transform: translateY(6px) rotate(45deg);
	}

	.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* Twenty Twelve entfernt beim Drücken den Rahmen (border: none) – das ließ die Seite
	   kurz um 2px springen. Rahmen und Optik bleiben deshalb in allen Zuständen gleich. */
	.menu-toggle:hover,
	.menu-toggle:focus,
	.menu-toggle:active {
		background: none;
		box-shadow: none;
		border: 1px solid #c3c3c3;
		color: #000;
	}

	/* ---- Hauptmenü: linksbündige Liste mit Trennlinien, Untermenüs als Akkordeon ---- */
	/* Aufklappen per Animation: Container wächst von 0 auf die natürliche Höhe (grid 0fr -> 1fr) */
	.menu-primary-wrap {
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		transition: grid-template-rows 0.25s ease, visibility 0s linear 0.25s;
	}

	.menu-primary-wrap.is-open {
		grid-template-rows: 1fr;
		visibility: visible;
		transition: grid-template-rows 0.25s ease, visibility 0s linear 0s;
	}

	/* Liste selbst ohne Rahmen/Polster, damit sie zugeklappt wirklich 0px hoch ist */
	.main-navigation ul.nav-menu-primary {
		display: block !important;
		min-height: 0;
		overflow: hidden;
		margin: 0;
		padding: 0;
		border: 0;
		text-align: left;
	}

	.main-navigation .nav-menu-primary > li.menu-item:first-child {
		border-top: 1px solid #c3c3c3;
	}

	.main-navigation .nav-menu-primary > li.menu-item:last-child {
		margin-bottom: 14px;
	}

	.main-navigation .nav-menu-primary > li.menu-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 0;
		border-bottom: 1px solid #c3c3c3;
	}

	.main-navigation .nav-menu-primary > li.menu-item > a {
		flex: 1 1 auto;
		display: block;
		padding: 11px 2px;
		font-size: calc(17px * var(--km-menu-scale, 1));
		line-height: 22px;
	}

	/* Pfeile vor dem Text entfallen mobil – einheitlich rechts als Button */
	.main-navigation .nav-menu-primary li > a::before {
		content: none;
	}

	.main-navigation .nav-menu-primary .submenu-toggle {
		position: static;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0 -6px 0 0;
		padding: 0;
		overflow: visible;
		clip-path: none;
		white-space: normal;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		color: #000;
		cursor: pointer;
	}

	.main-navigation .nav-menu-primary .submenu-toggle[aria-expanded="true"] .submenu-toggle-icon {
		transform: translateY(2px) rotate(-135deg);
	}

	/* Untermenü: eingerückt, etwas kleiner, ohne Kasten.
	   Zu = 0px hoch (ohne vertikalen Rand/Polster, damit es wirklich verschwindet),
	   auf = natürliche Höhe; die Höhe animiert navigation.js. */
	/* Spezifität höher als die alte Regel ".main-navigation .nav-menu .menu-item ul.sub-menu" (custom.css) */
	.main-navigation .nav-menu-primary .menu-item ul.sub-menu,
	.main-navigation .nav-menu-primary li.is-open > ul.sub-menu {
		display: block;
		flex: 0 0 100%;
		position: static;
		height: 0;
		overflow: hidden;
		visibility: hidden;
		margin: 0;
		padding: 0 0 0 16px;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		transition: height 0.25s ease, visibility 0s linear 0.25s;
	}

	.main-navigation .nav-menu-primary .menu-item.is-open > ul.sub-menu {
		height: auto;
		visibility: visible;
		transition: height 0.25s ease, visibility 0s linear 0s;
	}

	.main-navigation .nav-menu-primary .sub-menu li.menu-item {
		display: block;
		margin: 0;
	}

	/* Abstände innen statt am Container: oben 3px (Lücke zur Zeile wie bisher), unten 10px */
	.main-navigation .nav-menu-primary .sub-menu li.menu-item:first-child > a {
		padding-top: 3px;
	}

	.main-navigation .nav-menu-primary .sub-menu li.menu-item:last-child {
		margin-bottom: 10px;
	}

	.main-navigation .nav-menu .menu-item .sub-menu li.menu-item a,
	.main-navigation .nav-menu-primary .sub-menu li.menu-item a {
		display: block;
		min-width: 0;
		padding: 7px 0;
		font-size: calc(15px * var(--km-menu-scale, 1));
		line-height: 20px;
		color: #444;
		white-space: normal;
		text-align: left;
	}

	/* Menüschrift wie auf dem Desktop: Versalien, ohne Unterstreichung (außer aktive Seite) */
	.main-navigation li.menu-item a {
		text-transform: uppercase;
		text-decoration: none;
	}

	.main-navigation .current-menu-item > a,
	.main-navigation .current_page_item > a {
		text-decoration: underline;
	}

	.main-navigation li > a:not([href]) {
		cursor: pointer;
	}

	/* ---- Künstler-Menü: Name in eigener Zeile, darunter die Unterpunkte ---- */
	.main-navigation ul.nav-menu-secondary {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
		align-items: baseline;
		gap: 4px 18px;
		margin: 4px 0 4px;
		padding: 0 0 10px;
		border-bottom: 1px solid #c3c3c3;
		width: 100%;
	}

	.main-navigation .nav-menu-secondary > li.menu-item {
		margin: 0;
		position: relative;
	}

	.main-navigation .nav-menu-secondary > li.menu-item.artist-name {
		flex-basis: 100%;
		text-align: center;
		margin-bottom: 2px;
	}

	.main-navigation .nav-menu-secondary > li.menu-item.artist-name > a {
		font-size: 17px;
		line-height: 24px;
	}

	.main-navigation .nav-menu-secondary > li.menu-item.peng-shaban-tentakel-artist {
		margin: 0 0 2px;
	}

	/* "Mehr" klappt per Antippen des Textes auf (Pfeil davor wie auf dem Desktop) */
	.main-navigation .nav-menu-secondary .sub-menu {
		display: none;
		position: absolute;
		right: 0;
		top: 100%;
		z-index: 10;
		text-align: left;
	}

	.main-navigation .nav-menu-secondary li.is-open > .sub-menu,
	.main-navigation .nav-menu-secondary li:focus-within > .sub-menu {
		display: block;
	}

	.main-navigation .nav-menu-secondary .sub-menu li.menu-item {
		display: block;
	}

	.main-navigation .nav-menu-secondary .sub-menu li.menu-item a {
		display: block;
		padding: 7px 12px;
	}

	/* Inhalte */
	.site-content article {
		text-align: left;
	}

	.entry-content h1 {
		font-size: 18px;
	}

	div.artist-image-container {
		float: none;
		padding-bottom: 8px;
	}

	/* Einzug links (Kontakt) auf dem Handy aufheben, sonst bleibt nur eine schmale Textspalte */
	.einzug-links {
		padding-left: 0;
	}

	.artist-image-container img.artist-image,
	.artist-image-container figure.artist-image img {
		margin: 0;
		width: 100%;
		max-width: 420px;
	}

	div.artist-releases-container {
		max-width: none;
	}

	.artist-info-container div.artist-links {
		line-height: 24px;
	}

	div.tour-dates p,
	.kd--embed-container .kd--tourdate {
		line-height: 22px;
		margin-bottom: 8px;
	}

	#colophon {
		margin-top: 12px;
	}

	.km-pagination,
	.km-post-nav {
		font-size: 13px;
	}
}

/* Wer im System "Bewegung reduzieren" eingestellt hat, bekommt das Menü ohne Animation */
@media (prefers-reduced-motion: reduce) {
	.menu-primary-wrap,
	.menu-primary-wrap.is-open,
	.main-navigation .nav-menu-primary .menu-item ul.sub-menu,
	.main-navigation .nav-menu-primary .menu-item.is-open > ul.sub-menu,
	.menu-toggle-icon,
	.menu-toggle-icon::before,
	.menu-toggle-icon::after,
	.submenu-toggle-icon {
		transition: none;
	}
}

/* ==========================================================================
   Links (seit 02.11.2026)
   - Links im Fließtext: in Textfarbe (#333) mit dünner Linie; beim Darüberfahren sofort
     eine helle Fläche mit runden Ecken dahinter.
   - Navigation (Menüs, verlinkte Überschriften, Blog-/Blätter-Navigation, "mehr", Footer): ohne
     Linie; sie erscheint beim Darüberfahren sofort, der aktuelle Menüpunkt trägt sie dauerhaft.
   - Stärke und Abstand der Linie wachsen mit der Schrift (20px -> 1,5px / 4px, 14px -> 1px).
   ":root" hebt die Regeln über die gleichnamigen aus legacy.css/custom.css; sie stehen deshalb
   auch am Ende dieser Datei.
   ========================================================================== */

/* Navigation: Linie unsichtbar ... */
:root .main-navigation li.menu-item > a,
:root .site-content .entry-content :is(h1, h2, h3, h4, h5, h6) a,
:root .km-more,
:root .km-post-nav a:not(:has(.km-arrow)),
:root .km-post-nav a > span:not(.km-arrow),
:root .km-pagination .page-numbers:not(.prev, .next),
:root .km-pagination a > span:not(.km-arrow),
:root .footer-links a {
	text-decoration-line: underline;
	text-decoration-thickness: max(1px, 0.075em);
	text-underline-offset: 0.2em;
	text-decoration-color: transparent;
}

/* ... und sichtbar beim Darüberfahren bzw. als aktueller Punkt */
:root .main-navigation li.menu-item > a:hover,
:root .main-navigation li.menu-item > a:focus-visible,
:root .main-navigation li.menu-item.current-menu-item > a,
:root .main-navigation li.menu-item.current_page_item > a,
:root .site-content .entry-content :is(h1, h2, h3, h4, h5, h6) a:hover,
:root .km-more:hover,
:root .km-post-nav a:not(:has(.km-arrow)):hover,
:root .km-post-nav a:hover > span:not(.km-arrow),
:root .km-pagination a.page-numbers:not(.prev, .next):hover,
:root .km-pagination .page-numbers.current,
:root .km-pagination a:hover > span:not(.km-arrow),
:root .footer-links a:hover {
	text-decoration-line: underline;
	text-decoration-color: currentColor;
}

/* Ausnahmen ohne Linie: Menüpunkte mit Untermenü ("Artists", "Mehr") und der Künstlername
   im Künstler-Menü (auch als aktuelle Seite); bei Blog-/Blätter-Navigation nur der Text, nicht
   der Pfeil */
:root .main-navigation li.menu-item > a:not(:only-child),
:root .main-navigation li.menu-item > a:not(:only-child):hover {
	text-decoration-color: transparent;
}

:root .main-navigation .nav-menu-secondary > li.menu-item.artist-name > a,
:root .km-post-nav a:has(.km-arrow),
:root .km-pagination a:has(.km-arrow) {
	text-decoration: none;
}

/* legacy.css schneidet in <nav> Überstehendes ab ("overflow: hidden") – sonst fehlt die Linie */
:root .site-content .km-pagination,
:root .site-content .km-post-nav {
	overflow: visible;
}

/* Farben beim Darüberfahren ohne das Blau aus legacy.css */
/* (Links in Video-/Audio-Platzhaltern ohne Hover-Effekt, siehe km-media.css) */
:root .entry-content a:not(.km-embed *):hover {
	color: #000;
}

:root .km-post-title a:hover {
	color: inherit;
}

:root .footer-links a:hover {
	color: #333;
}

:root div.tour-dates-past a:hover {
	color: #888;
}

/* "mehr ▸" in der Artists-Übersicht */
.km-more .km-arrow {
	margin-left: 5px;
}

/* Links im Fließtext. Linie und Fläche sind Hintergrund-Ebenen: die Linie (1px, 1,36em unter
   der Oberkante = Lage der Unterstreichung), dahinter die Fläche als abgerundetes Rechteck
   (Radius --km-r) aus Mitte, oberem/unterem Streifen und vier Ecken (die Mitte überlappt die Streifen
   um 0,5px, sonst bleiben feine Nähte). Die Fläche reicht von .045em (knapp unter der Oberkante der Zeile)
   bis 5px unter die Linie und steht links/rechts 3,5px über (Polster + gleich großer negativer
   Rand: der Text verschiebt sich nicht). Mehrzeilige Links: jede Zeile bekommt ihre eigene Fläche. */
:root .entry-content a:not(:has(img), .km-embed *, :is(h1, h2, h3, h4, h5, h6) a, .km-more) {
	--km-fill: transparent;
	--km-r: 5px; /* Eckenradius der Fläche (seit 02.11.2026, vorher 3px) */
	/* Fläche wie ein Textmarker mit dem Untergrund verrechnen: sonst verdeckt der Überstand den
	   Text direkt vor dem Link (der wird vor der Fläche gezeichnet) */
	mix-blend-mode: multiply;
	text-decoration: none;
	padding: 0 3.5px 0.45em;
	margin: 0 -3.5px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(var(--km-fill), var(--km-fill)),
		linear-gradient(var(--km-fill), var(--km-fill)),
		linear-gradient(var(--km-fill), var(--km-fill)),
		radial-gradient(circle at 100% 100%, var(--km-fill) calc(var(--km-r) - 0.6px), transparent var(--km-r)),
		radial-gradient(circle at 0 100%, var(--km-fill) calc(var(--km-r) - 0.6px), transparent var(--km-r)),
		radial-gradient(circle at 100% 0, var(--km-fill) calc(var(--km-r) - 0.6px), transparent var(--km-r)),
		radial-gradient(circle at 0 0, var(--km-fill) calc(var(--km-r) - 0.6px), transparent var(--km-r));
	background-origin: content-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box;
	background-size:
		100% 1px,
		100% calc(1.36em + 5px - 0.045em - 2 * var(--km-r) + 1px),
		calc(100% - 2 * var(--km-r)) var(--km-r),
		calc(100% - 2 * var(--km-r)) var(--km-r),
		var(--km-r) var(--km-r), var(--km-r) var(--km-r), var(--km-r) var(--km-r), var(--km-r) var(--km-r);
	background-position:
		0 1.36em,
		0 calc(0.045em + var(--km-r) - 0.5px),
		var(--km-r) 0.045em,
		var(--km-r) calc(1.36em + 5px - var(--km-r)),
		0 0.045em,
		100% 0.045em,
		0 calc(1.36em + 5px - var(--km-r)),
		100% calc(1.36em + 5px - var(--km-r));
}

:root .entry-content a:not(:has(img), .km-embed *, :is(h1, h2, h3, h4, h5, h6) a, .km-more):hover {
	--km-fill: #f5f5f3; /* multipliziert mit dem Seitengrund #f8f8f6 = #eeeeea */
}

/* Farbe: wie der Fließtext (#333), auch beim Darüberfahren (vergangene Tourdaten bleiben grau,
   Links im Kreisdates-Einbau behalten ihre Farbe) */
:root .entry-content a:not(:has(img), .km-embed *, :is(h1, h2, h3, h4, h5, h6) a, .km-more):not(.tour-dates-past *, .kd--embed-container *),
:root .entry-content a:not(:has(img), .km-embed *, :is(h1, h2, h3, h4, h5, h6) a, .km-more):not(.tour-dates-past *, .kd--embed-container *):hover {
	color: #333;
}