/*
 * Erweiterungen der Startseiten-Bloecke (mqp), von Hand gepflegt.
 *
 * mqp.css wird aus der Live-Seite erzeugt (tools/build-assets.php) und nicht
 * von Hand geaendert. Was die Bloecke ueber die Live-Seite hinaus koennen,
 * steht hier. Geladen nach mqp.css: vorn nur auf Seiten mit mqp-Bloecken,
 * im Editor in der Vorschau (siehe inc/mqp.php).
 */

/* Nur fuer Screenreader sichtbar. */
.mqp-vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------- Kachelraster: Kachel mit Link -- */

/*
 * Eine Kachel mit Link (Feld "Link (optional)") traegt .is-linked. Der Titel
 * ist der einzige Link; sein ::after legt sich ueber die ganze Kachel, so ist
 * jede Stelle klickbar, ohne Bloecke in ein <a> zu packen. Kacheln ohne Link
 * bleiben unveraendert.
 */
.mqp-bento li.is-linked {
	position: relative;
	cursor: pointer;
	transition: opacity .2s ease, transform .25s ease, box-shadow .25s ease;
}

/* Platz fuer den Pfeil oben rechts, damit lange Titel nicht darunter laufen. */
.mqp-bento li.is-linked .mqp-numh {
	padding-right: 52px;
}

.mqp-tile__link {
	color: inherit;
	text-decoration: none;
}

.mqp-tile__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 30px;
}

/* Links im Kacheltext bleiben eigenstaendig klickbar (liegen ueber der Flaeche). */
.mqp-bento li.is-linked .mqp-txt a {
	position: relative;
	z-index: 2;
}

/* Pfeil: auch in Ruhe sichtbar (Touch-Geraete kennen kein Hover). */
.mqp-tile__arrow {
	position: absolute;
	top: 38px;
	right: 34px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: var(--p);
	transition: transform .25s ease, background-color .2s ease;
}

.mqp-bento li.is-linked:hover,
.mqp-bento li.is-linked:focus-within {
	background-image: var(--hover);
	box-shadow: 0 18px 36px -22px rgba(25, 0, 35, .45);
	transform: translateY(-4px);
}

.mqp-bento li.is-linked:hover .mqp-tile__arrow,
.mqp-bento li.is-linked:focus-within .mqp-tile__arrow {
	background-color: var(--t);
	transform: translateX(4px);
}

.mqp-bento li.is-linked:active {
	background-image: var(--press);
	transform: translateY(-1px);
}

/* Fokus: Rahmen um die ganze Kachel, nicht nur um den Titel. */
.mqp-tile__link:focus-visible {
	outline: none;
}

.mqp-tile__link:focus-visible::after {
	outline: 2px solid var(--p);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.mqp-bento li.is-linked,
	.mqp-tile__arrow {
		transition: none;
	}

	.mqp-bento li.is-linked:hover,
	.mqp-bento li.is-linked:focus-within,
	.mqp-bento li.is-linked:active,
	.mqp-bento li.is-linked:hover .mqp-tile__arrow,
	.mqp-bento li.is-linked:focus-within .mqp-tile__arrow {
		transform: none;
	}
}

/* ---------------------------------------------- Video statt Bild (mqp_media) -- */

/*
 * Ein Video sitzt wie das Bild in .mqp-media (mqp.css legt img und video gleich)
 * bzw. im runden Foto (.mqp-avatar). Der Knopf haelt es an und startet es wieder;
 * er ist versteckt, bis mqp.js laeuft (ohne JS spielt nichts, das Vorschaubild steht).
 */
.mqp-video__toggle {
	position: absolute;
	right: 24px;
	bottom: 24px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(25, 0, 35, .55);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease;
}

.mqp-video__toggle:hover {
	background: rgba(25, 0, 35, .85);
}

.mqp-video__toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 0;
	box-shadow: 0 0 0 4px var(--p);
}

.mqp-video__toggle svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.mqp-video__play,
.mqp-video__toggle.is-paused .mqp-video__pause {
	display: none;
}

.mqp-video__toggle.is-paused .mqp-video__play {
	display: inline;
}

/* Kleines rundes Foto (92 px): der Knopf deckt die ganze Flaeche, das Symbol
   erscheint bei Hover, Fokus und solange das Video steht. */
.mqp-video__toggle--cover {
	inset: 0;
	width: 100%;
	height: 100%;
	background: transparent;
}

.mqp-video__toggle--cover svg {
	opacity: 0;
	transition: opacity .2s ease;
}

.mqp-video__toggle--cover:hover,
.mqp-video__toggle--cover.is-paused {
	background: rgba(25, 0, 35, .35);
}

.mqp-video__toggle--cover:hover svg,
.mqp-video__toggle--cover:focus-visible svg,
.mqp-video__toggle--cover.is-paused svg {
	opacity: 1;
}

.mqp-video__toggle--cover:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--p);
	background: rgba(25, 0, 35, .35);
}

@media (prefers-reduced-motion: reduce) {
	.mqp-video__toggle,
	.mqp-video__toggle--cover svg {
		transition: none;
	}
}