/* ==========================================================================
   Flüssige Glas-Blasen für Bedienelemente (seit 1.81.0)
   Nach Apples „Liquid Glass“: Glas gehört auf die Bedienebene (Knöpfe,
   Sprungmarken, Umschalter, Seitenzahlen), nicht auf den Inhalt.
   Fließtext-Links bleiben unterstrichene Textlinks.
   Farben aus den Design-Einstellungen:
     --mlk-knopf-gruen / --mlk-knopf-gruen-dunkel  Blau-Petrol (Hauptakzent)
     --mlk-akzent-gruen                             Grün (aktiv, Hover von Textlinks)
   Ältere Browser ohne color-mix() bekommen jeweils die Zeile davor.
   ========================================================================== */

body.mlk-glas {
	--mlk-feder: cubic-bezier(.34, 1.56, .64, 1); /* leicht federnd */
}

/* ---------- 1. Hauptknöpfe: getöntes Flüssigglas in Blau ---------- */
body.mlk-glas :is(
	:is(.mlk-preissuche, .mlk-suchleiste, .mlk-suche, .mlk-artikelliste, .mlk-kataloge-archiv, .mlk-insider, .mlk-insider-start, .mlk-kontakt-seite, .mlk-katalog-anfrage, .mlk-artikel-kontakt) .wp-block-button__link,
	.mlk-kontakt-submit,
	.mlk-suchfeld-knopf,
	.mlk-kataloge-archiv .mlk-katalog-link,
	.mlk-katalog-eintrag .mlk-ke-pdf a,
	.mlk-alt-inhalt .mlk-alt-pdf a,
	:is(.mlk-katalog-anfrage, .mlk-artikel-kontakt, .mlk-kontakt-formular) button[type="submit"],
	.mlk-gaestebuch input[type="submit"]
) {
	border-radius: 999px !important;
	border: 1px solid rgba(255, 255, 255, .38) !important;
	background: var(--mlk-knopf-gruen, #3986a0) !important;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--mlk-knopf-gruen, #3986a0) 72%, #fff) 0%,
		var(--mlk-knopf-gruen, #3986a0) 46%,
		var(--mlk-knopf-gruen-dunkel, #2e6d83) 100%) !important;
	color: #fff !important;
	font-family: var(--mlk-schrift-apple) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -3px 6px rgba(0, 0, 0, .16), 0 6px 18px rgba(46, 109, 131, .32);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -3px 6px rgba(0, 0, 0, .16), 0 6px 18px color-mix(in srgb, var(--mlk-knopf-gruen, #3986a0) 38%, transparent);
	transition: transform .4s var(--mlk-feder), box-shadow .25s ease, filter .2s ease;
}
body.mlk-glas :is(
	:is(.mlk-preissuche, .mlk-suchleiste, .mlk-suche, .mlk-artikelliste, .mlk-kataloge-archiv, .mlk-insider, .mlk-insider-start, .mlk-kontakt-seite, .mlk-katalog-anfrage, .mlk-artikel-kontakt) .wp-block-button__link,
	.mlk-kontakt-submit,
	.mlk-suchfeld-knopf,
	.mlk-kataloge-archiv .mlk-katalog-link,
	.mlk-katalog-eintrag .mlk-ke-pdf a,
	.mlk-alt-inhalt .mlk-alt-pdf a,
	:is(.mlk-katalog-anfrage, .mlk-artikel-kontakt, .mlk-kontakt-formular) button[type="submit"],
	.mlk-gaestebuch input[type="submit"]
):hover {
	transform: translateY(-1px) scale(1.035);
	filter: brightness(1.07) saturate(1.1);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8), inset 0 -3px 6px rgba(0, 0, 0, .14), 0 10px 26px color-mix(in srgb, var(--mlk-knopf-gruen, #3986a0) 45%, transparent);
}

/* ---------- 2. Kleine Blasen: klares Glas mit blauem Schimmer ---------- */
body.mlk-glas :is(
	.mlk-sprungmarken a,
	.mlk-such-vorschlaege a,
	.mlk-steckbrief-tags a,
	.mlk-gesamtsuche-sprung a,
	.mlk-filter-seiten a,
	.mlk-filter-seiten span:not(.mlk-filter-luecke),
	.mlk-kataloge-nav a,
	.mlk-insider-umschalter a,
	.mlk-insider-umschalter span,
	.mlk-gaestebuch-pager a,
	.mlk-gaestebuch-pager-aktiv,
	.mlk-leiser-knopf
) {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 6px 14px;
	border-radius: 999px !important;
	border: 1px solid rgba(255, 255, 255, .95) !important;
	background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .66) 100%) !important;
	box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(0, 0, 0, .05), 0 0 0 1px rgba(57, 134, 160, .18), 0 4px 12px rgba(0, 0, 0, .08);
	box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(0, 0, 0, .05), 0 0 0 1px color-mix(in srgb, var(--mlk-knopf-gruen, #3986a0) 22%, transparent), 0 4px 12px rgba(0, 0, 0, .08);
	color: var(--mlk-knopf-gruen-dunkel, #2e6d83) !important;
	font-family: var(--mlk-schrift-apple);
	font-weight: 600;
	text-decoration: none !important;
	transition: transform .4s var(--mlk-feder), background .2s ease, box-shadow .2s ease, color .2s ease;
}
body.mlk-glas :is(
	.mlk-sprungmarken a,
	.mlk-such-vorschlaege a,
	.mlk-steckbrief-tags a,
	.mlk-gesamtsuche-sprung a,
	.mlk-filter-seiten a,
	.mlk-kataloge-nav a,
	.mlk-insider-umschalter a,
	.mlk-gaestebuch-pager a,
	.mlk-leiser-knopf
):hover {
	transform: translateY(-1px) scale(1.06);
	background: linear-gradient(180deg, #fff 0%, #e1eff4 100%) !important;
	background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--mlk-knopf-gruen, #3986a0) 16%, #fff) 100%) !important;
	box-shadow: inset 0 1px 0 #fff, 0 0 0 1px color-mix(in srgb, var(--mlk-knopf-gruen, #3986a0) 45%, transparent), 0 8px 18px color-mix(in srgb, var(--mlk-knopf-gruen, #3986a0) 22%, transparent);
	color: var(--mlk-knopf-gruen-dunkel, #2e6d83) !important;
}

/* Gedrückt: Blase gibt kurz nach */
body.mlk-glas :is(.wp-block-button__link, .mlk-kontakt-submit, .mlk-suchfeld-knopf, .mlk-katalog-link, .mlk-ke-pdf a, .mlk-alt-pdf a, button[type="submit"], input[type="submit"],
	.mlk-sprungmarken a, .mlk-such-vorschlaege a, .mlk-steckbrief-tags a, .mlk-gesamtsuche-sprung a, .mlk-filter-seiten a, .mlk-kataloge-nav a, .mlk-insider-umschalter a, .mlk-gaestebuch-pager a, .mlk-leiser-knopf):active {
	transform: scale(.95);
	transition-duration: .12s;
}

/* Aktiver Zustand (aktuelle Seite, gewählter Umschalter): grüne Blase */
body.mlk-glas :is(
	.mlk-filter-seiten .mlk-filter-aktuell,
	.mlk-insider-umschalter-aktiv,
	.mlk-gaestebuch-pager-aktiv,
	.mlk-sprungmarken a.ist-aktiv
) {
	background: var(--mlk-akzent-gruen, #1f8a4c) !important;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--mlk-akzent-gruen, #1f8a4c) 68%, #fff) 0%,
		var(--mlk-akzent-gruen, #1f8a4c) 50%,
		color-mix(in srgb, var(--mlk-akzent-gruen, #1f8a4c) 80%, #000) 100%) !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, .45) !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .65), inset 0 -2px 4px rgba(0, 0, 0, .15), 0 6px 16px rgba(31, 138, 76, .3);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .65), inset 0 -2px 4px rgba(0, 0, 0, .15), 0 6px 16px color-mix(in srgb, var(--mlk-akzent-gruen, #1f8a4c) 35%, transparent);
}

/* Abstände der Leisten an die Blasen anpassen */
body.mlk-glas .mlk-sprungmarken { gap: 8px; }
body.mlk-glas .mlk-sprungmarken a { font-size: .9em; padding: 5px 12px; }
body.mlk-glas .mlk-filter-seiten,
body.mlk-glas .mlk-gaestebuch-pager { gap: 6px; }
body.mlk-glas .mlk-kataloge-nav { border-top-color: rgba(0, 0, 0, .08); }
@media (max-width: 600px) {
	body.mlk-glas .mlk-insider-umschalter :is(a, span) { display: flex; }
}

/* ---------- 3. Textlinks im Fließtext: ruhig, grün beim Darüberfahren ---------- */
body.mlk-glas :is(.mlk-steckbrief, .mlk-archiv-info, .mlk-ep-kasten, .mlk-katalog-anfrage-hinweis, .mlk-varianten-karte, .mlk-insider-karte, .mlk-alt-inhalt, .mlk-bereich-text) :is(p, li, dd) a:not([class]) {
	color: var(--mlk-knopf-gruen-dunkel, #2e6d83);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(57, 134, 160, .5);
	text-decoration-color: color-mix(in srgb, var(--mlk-knopf-gruen, #3986a0) 50%, transparent);
	transition: color .15s, text-decoration-color .15s;
}
body.mlk-glas :is(.mlk-steckbrief, .mlk-archiv-info, .mlk-ep-kasten, .mlk-katalog-anfrage-hinweis, .mlk-varianten-karte, .mlk-insider-karte, .mlk-alt-inhalt, .mlk-bereich-text) :is(p, li, dd) a:not([class]):hover {
	color: var(--mlk-akzent-gruen, #1f8a4c);
	text-decoration-color: currentColor;
}

/* ---------- 4. Tastatur-Fokus: sichtbarer grüner Ring ---------- */
body.mlk-glas :is(.wp-block-button__link, .mlk-suchfeld-knopf, .mlk-kontakt-submit, .mlk-katalog-link, .mlk-ke-pdf a, .mlk-sprungmarken a, .mlk-such-vorschlaege a, .mlk-steckbrief-tags a, .mlk-gesamtsuche-sprung a, .mlk-filter-seiten a, .mlk-kataloge-nav a, .mlk-insider-umschalter a, .mlk-gaestebuch-pager a, .mlk-leiser-knopf):focus-visible {
	outline: 3px solid rgba(31, 138, 76, .7);
	outline: 3px solid color-mix(in srgb, var(--mlk-akzent-gruen, #1f8a4c) 70%, transparent);
	outline-offset: 2px;
}

/* ---------- 5. Weniger Bewegung, wenn im System eingestellt ---------- */
@media (prefers-reduced-motion: reduce) {
	body.mlk-glas :is(.wp-block-button__link, .mlk-suchfeld-knopf, .mlk-kontakt-submit, .mlk-katalog-link, .mlk-ke-pdf a, .mlk-alt-pdf a, .mlk-sprungmarken a, .mlk-such-vorschlaege a, .mlk-steckbrief-tags a, .mlk-gesamtsuche-sprung a, .mlk-filter-seiten a, .mlk-kataloge-nav a, .mlk-insider-umschalter a, .mlk-gaestebuch-pager a, .mlk-leiser-knopf) {
		transition: none !important;
		transform: none !important;
	}
}

/* ---------- 6. „Nach oben“-Knopf als runde Glasblase ---------- */
body.mlk-glas #ast-scroll-top,
body.mlk-glas #scroll-top { background: transparent !important; }
body.mlk-glas #scroll-top .ast-scroll-top-icon,
body.mlk-glas .ast-scroll-top-icon {
	border-radius: 50% !important;
	background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .62) 100%) !important;
	border: 1px solid rgba(255, 255, 255, .95);
	color: var(--mlk-knopf-gruen-dunkel, #2e6d83) !important;
	box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(0, 0, 0, .05), 0 0 0 1px rgba(57, 134, 160, .2), 0 6px 18px rgba(0, 0, 0, .14);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	backdrop-filter: blur(16px) saturate(180%);
	transition: transform .4s var(--mlk-feder);
}
body.mlk-glas #scroll-top .ast-scroll-top-icon svg,
body.mlk-glas .ast-scroll-top-icon svg { fill: currentColor; }
body.mlk-glas #scroll-top:hover .ast-scroll-top-icon,
body.mlk-glas .ast-scroll-top-icon:hover { transform: translateY(-2px) scale(1.08); }

/* ---------- 7. Weiter-Texte in Kacheln („zur Artikelliste →“) als Blasen (1.81.1) ---------- */
body.mlk-glas :is(.mlk-bereich-mehr, .mlk-insider-start-link:not(.mlk-insider-start-link-deaktiviert)) {
	display: inline-flex !important; align-items: center; gap: 6px;
	width: auto !important;
	align-self: flex-start;
	margin-top: auto !important;
	padding: 8px 16px !important;
	border-radius: 999px !important;
	border: 1px solid rgba(255, 255, 255, .95) !important;
	border-bottom: 1px solid rgba(255, 255, 255, .95) !important;
	background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .66) 100%) !important;
	box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(0, 0, 0, .05), 0 0 0 1px rgba(57, 134, 160, .22), 0 4px 12px rgba(0, 0, 0, .08);
	color: var(--mlk-knopf-gruen-dunkel, #2e6d83) !important;
	font-family: var(--mlk-schrift-apple);
	font-size: .95em !important;
	font-weight: 600 !important;
	line-height: 1.25;
	text-decoration: none !important;
	transition: transform .4s var(--mlk-feder), background .2s ease, box-shadow .2s ease;
}
/* Die ganze Kachel ist der Link: beim Darüberfahren federt die Blase mit */
body.mlk-glas :is(.mlk-bereich, .mlk-insider-start-kachel):hover :is(.mlk-bereich-mehr, .mlk-insider-start-link:not(.mlk-insider-start-link-deaktiviert)) {
	transform: translateY(-1px) scale(1.05);
	background: linear-gradient(180deg, #fff 0%, #e1eff4 100%) !important;
	background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--mlk-knopf-gruen, #3986a0) 16%, #fff) 100%) !important;
	box-shadow: inset 0 1px 0 #fff, 0 0 0 1px color-mix(in srgb, var(--mlk-knopf-gruen, #3986a0) 45%, transparent), 0 8px 18px color-mix(in srgb, var(--mlk-knopf-gruen, #3986a0) 22%, transparent);
}
body.mlk-glas .mlk-insider-start-link:not(.mlk-insider-start-link-deaktiviert) { margin-top: 4px !important; }
body.mlk-glas .mlk-bereich-text > p:last-of-type { margin-bottom: 8px !important; }
/* Insider-Kacheln: keine Unterstreichung von Überschrift und Zahlen */
body.mlk-glas .mlk-insider-start-kachel,
body.mlk-glas .mlk-insider-start-kachel :is(h3, p) { text-decoration: none !important; }
body.mlk-glas .mlk-insider-start-kachel { border-top-width: 1px !important; }

/* ---------- 8. Märklin-Infos und Unterseiten: alle Anfasser als Blasen (1.81.1) ---------- */
/* Übersichtsliste der Infos-Seite: jede Zeile eine Glasblase */
body.mlk-glas .mlk-infos-liste { border-top: 0 !important; display: grid; gap: 12px; }
body.mlk-glas .mlk-infos-liste > a {
	display: block !important;
	padding: 14px 20px !important;
	border: 1px solid rgba(255, 255, 255, .9) !important;
	border-radius: 22px !important;
	background: rgba(255, 255, 255, .6) !important;
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	backdrop-filter: blur(18px) saturate(170%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(57, 134, 160, .14), 0 8px 24px rgba(0, 0, 0, .1);
	transition: transform .4s var(--mlk-feder), background .2s ease, box-shadow .2s ease;
}
body.mlk-glas .mlk-infos-liste > a:hover {
	transform: translateY(-2px) scale(1.01);
	background: rgba(255, 255, 255, .78) !important;
	box-shadow: inset 0 1px 0 #fff, 0 0 0 1px color-mix(in srgb, var(--mlk-knopf-gruen, #3986a0) 40%, transparent), 0 14px 32px rgba(0, 0, 0, .14);
}
body.mlk-glas .mlk-infos-liste > a > span:first-child { color: var(--mlk-knopf-gruen-dunkel, #2e6d83); }
body.mlk-glas .mlk-infos-liste > a:active { transform: scale(.98); transition-duration: .12s; }

/* Inhaltsverzeichnis oben auf den Unterseiten, Epochen-Tabelle, „… im Archiv“-Verweise */
body.mlk-glas .entry-content nav.toc { display: flex; flex-wrap: wrap; gap: 8px; }
body.mlk-glas :is(.entry-content nav.toc a, .mlk-ep-tab td a, .mlk-ep li a[href*="/preisdatenbank/"]) {
	display: inline-flex; align-items: center;
	padding: 5px 13px;
	border-radius: 999px !important;
	border: 1px solid rgba(255, 255, 255, .95) !important;
	background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .66) 100%) !important;
	box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(0, 0, 0, .05), 0 0 0 1px rgba(57, 134, 160, .2), 0 3px 10px rgba(0, 0, 0, .08);
	color: var(--mlk-knopf-gruen-dunkel, #2e6d83) !important;
	font-family: var(--mlk-schrift-apple);
	font-weight: 600;
	font-size: .92em;
	line-height: 1.3;
	text-decoration: none !important;
	transition: transform .4s var(--mlk-feder), background .2s ease, box-shadow .2s ease;
}
body.mlk-glas .mlk-ep li a[href*="/preisdatenbank/"] { padding: 2px 11px; font-size: .88em; vertical-align: baseline; }
body.mlk-glas :is(.entry-content nav.toc a, .mlk-ep-tab td a, .mlk-ep li a[href*="/preisdatenbank/"]):hover {
	transform: translateY(-1px) scale(1.05);
	background: linear-gradient(180deg, #fff 0%, #e1eff4 100%) !important;
	background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--mlk-knopf-gruen, #3986a0) 16%, #fff) 100%) !important;
	box-shadow: inset 0 1px 0 #fff, 0 0 0 1px color-mix(in srgb, var(--mlk-knopf-gruen, #3986a0) 45%, transparent), 0 8px 18px color-mix(in srgb, var(--mlk-knopf-gruen, #3986a0) 22%, transparent);
}
body.mlk-glas :is(.entry-content nav.toc a, .mlk-ep-tab td a, .mlk-ep li a[href*="/preisdatenbank/"]):active { transform: scale(.95); transition-duration: .12s; }

@media (prefers-reduced-motion: reduce) {
	body.mlk-glas :is(.mlk-bereich-mehr, .mlk-insider-start-link, .mlk-infos-liste > a, .entry-content nav.toc a, .mlk-ep-tab td a, .mlk-ep li a[href*="/preisdatenbank/"]) {
		transition: none !important;
		transform: none !important;
	}
}