/* Messenger Kontakt 1.2.0 – lokal, keine externen Ressourcen.
   Farben und Schrift kommen vom Theme (approx.): Studio-Tinte, beim Darüberfahren Tally-Rot.
   Eigene Farbe in den Einstellungen überschreibt --mk-color und --mk-hover. */

:root {
	--mk-color: var(--wp--preset--color--contrast, #172033);
	--mk-hover: var(--wp--preset--color--accent, #e0241b);
	--mk-text: var(--wp--preset--color--base, #fff);
	--mk-panel: var(--wp--preset--color--base, #fff);
	--mk-panel-text: var(--wp--preset--color--contrast, #172033);
	--mk-linie: var(--wp--preset--color--line, #d8dce2);
	--mk-radius: 2px;
}

.mk-widget {
	position: fixed;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 99990;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: inherit;
}
.mk-widget.mk-right { right: calc(20px + env(safe-area-inset-right, 0px)); align-items: flex-end; }
.mk-widget.mk-left  { left: calc(20px + env(safe-area-inset-left, 0px));  align-items: flex-start; }

/* Runder Knopf mit rotem Tally-Punkt, passend zu den Sucher-Ecken der Videos */
.mk-toggle {
	position: relative;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mk-color);
	color: var(--mk-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.22);
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.mk-toggle::after {
	content: "";
	position: absolute;
	top: 9px;
	right: 9px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--mk-hover);
	box-shadow: 0 0 0 2px var(--mk-color);
}
.mk-toggle .mk-icon { width: 24px; height: 24px; }
.mk-toggle:hover,
.mk-toggle[aria-expanded="true"] { background: var(--mk-hover); }
.mk-toggle:hover::after,
.mk-toggle[aria-expanded="true"]::after { background: var(--mk-text); box-shadow: 0 0 0 2px var(--mk-hover); }
.mk-toggle:focus-visible { outline: 2px solid var(--mk-hover); outline-offset: 3px; }

.mk-panel {
	min-width: 240px;
	max-width: calc(100vw - 40px);
	padding: 16px;
	border: 1px solid var(--mk-linie);
	border-radius: var(--mk-radius);
	background: var(--mk-panel);
	color: var(--mk-panel-text);
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.18);
}
.mk-panel[hidden] { display: none; }

.mk-title {
	margin: 0 0 12px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.mk-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mk-list li { margin: 0; padding: 0; }

.mk-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0.7em 1.1em;
	border-radius: var(--mk-radius);
	background: var(--mk-color);
	color: var(--mk-text) !important;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}
.mk-link:hover { background: var(--mk-hover); }
.mk-link:focus-visible { outline: 2px solid var(--mk-hover); outline-offset: 2px; }
.mk-link .mk-icon { flex: 0 0 auto; }

/* Block und Shortcode: nebeneinander, umbrechend */
.mk-inline-wrap { margin: 1.5em 0; }
.mk-inline-wrap .mk-title { font-size: var(--wp--preset--font-size--large, 1.25rem); }
.mk-list.mk-inline { flex-direction: row; flex-wrap: wrap; }

/* Während ein Video- oder Play-SRF-Overlay offen ist, stört der Knopf nicht */
html:has(dialog[open]) .mk-widget { display: none; }

@media (prefers-reduced-motion: reduce) {
	.mk-toggle, .mk-link { transition: none; }
}

@media print {
	.mk-widget { display: none; }
}