/**
 * CVO Blocks – Aussehen der Blöcke auf der Website und im Editor.
 *
 * Maße und Umbruchpunkte sind vom bisherigen Plugin "TheFutur Blocks"
 * übernommen, damit die neuen Blöcke gleich aussehen.
 */

/* ---------------------------------------------------------------------- */
/* Block "Team"                                                           */
/* ---------------------------------------------------------------------- */

/* Die Spaltenzahlen kommen als CSS-Variablen aus den Einstellungen des Blocks. */

.wp-block-cvo-team-members {
	display: grid;
	grid-template-columns: repeat(var(--cvo-team-cols-mobile, 1), minmax(0, 1fr));
	column-gap: 1.875rem;
	row-gap: 1.875rem;
	margin-bottom: 1.875rem;
}

/* Tablet */
@media screen and (min-width: 48em) {

	.wp-block-cvo-team-members {
		grid-template-columns: repeat(var(--cvo-team-cols-tablet, 2), minmax(0, 1fr));
	}
}

/* Computer */
@media screen and (min-width: 64em) {

	.wp-block-cvo-team-members {
		grid-template-columns: repeat(var(--cvo-team-cols, 4), minmax(0, 1fr));
	}
}

/* Einblend-Animation. Die Klasse "is-pending" setzt view.js nur bei Einträgen,
   die beim Laden noch nicht im sichtbaren Bereich liegen. Ohne JavaScript
   bleibt alles sichtbar. */

.wp-block-cvo-team-members.has-animation .wp-block-cvo-team-member {
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.wp-block-cvo-team-members.has-animation .wp-block-cvo-team-member.is-pending {
	opacity: 0;
	transform: translateY(20px);
}

/* ---------------------------------------------------------------------- */
/* Block "Teammitglied"                                                   */
/* ---------------------------------------------------------------------- */

.wp-block-cvo-team-member {
	position: relative;
}

.wp-block-cvo-team-member__image img {
	display: block;
	height: auto;
	width: 100%;
	object-fit: cover;
}

/* Fotobreite in Prozent der Spalte, je Gerät aus den Einstellungen des Blocks "Team".
   Ohne mittige Ausrichtung bleibt das Foto linksbündig auf einer Linie mit Name und Funktion. */
.wp-block-cvo-team-member__image {
	width: var(--cvo-team-img-mobile, 100%);
}

@media screen and (min-width: 48em) {

	.wp-block-cvo-team-member__image {
		width: var(--cvo-team-img-tablet, 100%);
	}
}

@media screen and (min-width: 64em) {

	.wp-block-cvo-team-member__image {
		width: var(--cvo-team-img, 100%);
	}
}

/* Mittige Ausrichtung je Gerät (Einstellung „Mittig ausrichten“ im Block "Team"):
   Foto, Name, Funktion und E-Mail-Symbol stehen dann in der Mitte der Karte. */
@media screen and (max-width: 47.9375em) {

	.wp-block-cvo-team-members.is-centered-mobile .wp-block-cvo-team-member {
		text-align: center;
	}

	.wp-block-cvo-team-members.is-centered-mobile .wp-block-cvo-team-member__image {
		margin-left: auto;
		margin-right: auto;
	}

	.wp-block-cvo-team-members.is-centered-mobile .wp-block-cvo-team-member__links {
		justify-content: center;
	}
}

@media screen and (min-width: 48em) and (max-width: 63.9375em) {

	.wp-block-cvo-team-members.is-centered-tablet .wp-block-cvo-team-member {
		text-align: center;
	}

	.wp-block-cvo-team-members.is-centered-tablet .wp-block-cvo-team-member__image {
		margin-left: auto;
		margin-right: auto;
	}

	.wp-block-cvo-team-members.is-centered-tablet .wp-block-cvo-team-member__links {
		justify-content: center;
	}
}

@media screen and (min-width: 64em) {

	.wp-block-cvo-team-members.is-centered-desktop .wp-block-cvo-team-member {
		text-align: center;
	}

	.wp-block-cvo-team-members.is-centered-desktop .wp-block-cvo-team-member__image {
		margin-left: auto;
		margin-right: auto;
	}

	.wp-block-cvo-team-members.is-centered-desktop .wp-block-cvo-team-member__links {
		justify-content: center;
	}
}

.wp-block-cvo-team-member__inner {
	margin: 1.25rem 0;
}

.wp-block-cvo-team-member__title {
	color: #1f1f1f;
	margin-bottom: 0.625rem;
}

.wp-block-cvo-team-member__info {
	color: #777;
	letter-spacing: 0.15em;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
	margin-bottom: 1rem;
}

/* Mobiltelefon: Bei zwei Personen nebeneinander ist die gesperrte Großschrift zu breit.
   Weniger Sperrung und Silbentrennung nach deutschen Regeln statt Umbruch mitten im Wort. */
@media screen and (max-width: 47.9375em) {

	.wp-block-cvo-team-member__title,
	.wp-block-cvo-team-member__info {
		overflow-wrap: normal;
		word-break: normal;
		hyphens: auto;
	}

	.wp-block-cvo-team-member__info {
		letter-spacing: 0.06em;
	}
}

.wp-block-cvo-team-member__links {
	line-height: 1.2;
	display: flex;
	flex-wrap: wrap;
}

.wp-block-cvo-team-member__link {
	display: inline-block;
}

.wp-block-cvo-team-member__link svg {
	vertical-align: bottom;
	fill: #1f1f1f;
}

/* ---------------------------------------------------------------------- */
/* Block "Abstand"                                                        */
/* ---------------------------------------------------------------------- */

/* Die drei Höhen kommen als CSS-Variablen aus den Einstellungen des Blocks.
   Umbruchpunkte wie beim alten Block: Mobiltelefon bis 767 px, Tablet bis 1023 px. */

.wp-block-cvo-spacer {
	display: block;
	width: 100%;
	height: var(--cvo-spacer-h-mobile, 20px);
}

@media screen and (min-width: 48em) {

	.wp-block-cvo-spacer {
		height: var(--cvo-spacer-h-tablet, 20px);
	}
}

@media screen and (min-width: 64em) {

	.wp-block-cvo-spacer {
		height: var(--cvo-spacer-h, 20px);
	}
}

/* ---------------------------------------------------------------------- */
/* Block "Button"                                                         */
/* ---------------------------------------------------------------------- */

/* Farben, Rahmen, Schrift und Innenabstände kommen als CSS-Variablen.
   Ohne eigene Einstellung gelten Schriftart, Schriftstärke und Textfarbe des Themes. */

.wp-block-cvo-button {
	display: block;
}

.wp-block-cvo-button.aligncenter,
.wp-block-cvo-button.alignleft,
.wp-block-cvo-button.alignright {
	margin-top: 0;
	margin-bottom: 0;
}

.wp-block-cvo-button.aligncenter {
	text-align: center;
}

.wp-block-cvo-button.alignright {
	text-align: right;
}

.wp-block-cvo-button__link {
	display: inline-flex;
	align-items: flex-end;
	padding: var(--cvo-btn-pt, 22px) var(--cvo-btn-pr, 46px) var(--cvo-btn-pb, 22px) var(--cvo-btn-pl, 46px);
	background: var(--cvo-btn-bg, #1f1f1f);
	border: var(--cvo-btn-border, 0 none);
	text-decoration: none;
}

.wp-block-cvo-button__holder {
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.wp-block-cvo-button__text {
	display: block;
	margin: 0;
	color: var(--cvo-btn-color, inherit);
	font-family: inherit;
	font-size: var(--cvo-btn-fs, 18px);
	font-weight: var(--cvo-btn-fw, inherit);
	letter-spacing: 0.25em;
	line-height: 1;
}

/* Im Editor eingefärbter Text steht in einem <mark>. Dessen Angabe "transparenter
   Hintergrund" entfernt WordPress bei der Ausgabe; ohne diese Regel zeigt der
   Browser seine Markierungsfarbe Gelb. */
.wp-block-cvo-button__text mark {
	background-color: transparent;
}

/* Beim Überfahren rollt der Text nach oben heraus und von unten wieder herein,
   wie beim alten Block. */

@keyframes cvo-button-roll {

	0% {
		transform: none;
	}

	49.9% {
		transform: translateY(-100%) skewY(-8deg);
	}

	50% {
		transform: translateY(100%) skewY(8deg);
	}

	100% {
		transform: none;
	}
}

.wp-block-cvo-button__link:hover .wp-block-cvo-button__text,
.wp-block-cvo-button__link:focus-visible .wp-block-cvo-button__text {
	animation: cvo-button-roll 0.4s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {

	.wp-block-cvo-button__link:hover .wp-block-cvo-button__text,
	.wp-block-cvo-button__link:focus-visible .wp-block-cvo-button__text {
		animation: none;
	}
}

/* ---------------------------------------------------------------------- */
/* Block "Hero-Bild"                                                      */
/* ---------------------------------------------------------------------- */

.wp-block-cvo-hero-image {
	display: block;
	position: relative;
	min-height: 6.25rem;
	z-index: 1;
	height: var(--cvo-hero-h-mobile, 300px);
}

@media screen and (min-width: 48em) {

	.wp-block-cvo-hero-image {
		height: var(--cvo-hero-h-tablet, 300px);
	}
}

@media screen and (min-width: 64em) {

	.wp-block-cvo-hero-image {
		height: var(--cvo-hero-h, 300px);
	}
}

.wp-block-cvo-hero-image__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.wp-block-cvo-hero-image__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-cvo-hero-image__image.is-contain img {
	object-fit: contain;
}

/* Nur TheFutur: In Spalten innerhalb einer Gruppe ragt ein breit ausgerichtetes
   Hero-Bild links und rechts um 3,75 rem über die Spalte hinaus. Das Theme enthält
   diese Regel nur für den alten Block. Auf anderen Themes greift der Selektor nicht. */
.wp-block-group [class*=__inner-container] > .wp-block-columns .wp-block-column .wp-block-cvo-hero-image.alignwide {
	margin-left: -3.75rem;
	margin-right: -3.75rem;
}

/* Wie beim alten Block: Auf dem Mobiltelefon füllt das Bild die Fläche immer aus. */
@media screen and (max-width: 767px) {

	.wp-block-cvo-hero-image__image.is-contain img {
		object-fit: cover;
	}
}

/* ---------------------------------------------------------------------- */
/* Block "Einblend-Bereich"                                               */
/* ---------------------------------------------------------------------- */

/* Die Klasse "is-pending" setzt view.js nur bei Bereichen, die beim Laden
   noch nicht sichtbar sind. Ohne JavaScript bleibt alles sichtbar. */

.wp-block-cvo-scroll-anim.has-animation {
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.wp-block-cvo-scroll-anim.has-animation.is-pending {
	opacity: 0;
}

.wp-block-cvo-scroll-anim.has-anim-fade-up.is-pending {
	transform: translateY(30px);
}

.wp-block-cvo-scroll-anim.has-anim-fade-down.is-pending {
	transform: translateY(-30px);
}

/* ---------------------------------------------------------------------- */
/* Blöcke "Bildslider" und "Slide"                                        */
/* ---------------------------------------------------------------------- */

/* Höhe: Anteil der Fensterhöhe, höchstens die eingestellte Pixelzahl.
   Die Bilder liegen übereinander; sichtbar ist das Bild mit "is-active".
   Ohne JavaScript ist das erste Bild sichtbar. */

.wp-block-cvo-slider {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: min(var(--cvo-slider-h, 50vh), var(--cvo-slider-max, 585px));
	overflow: hidden;
}

.wp-block-cvo-slider.is-draggable {
	cursor: grab;
	touch-action: pan-y;
}

.wp-block-cvo-slider.is-dragging {
	cursor: grabbing;
}

.wp-block-cvo-slider__track {
	position: absolute;
	inset: 0;
}

.wp-block-cvo-slide {
	position: absolute;
	inset: 0;
	visibility: hidden;
}

.wp-block-cvo-slide.is-active,
.wp-block-cvo-slider:not(.is-ready) .wp-block-cvo-slide:first-child {
	visibility: visible;
}

.wp-block-cvo-slide__image {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Wie beim alten Block: Das Bild ist etwas höher als der Slider und oben bündig. */
.wp-block-cvo-slide__image img {
	display: block;
	width: 100%;
	height: 120%;
	max-width: none;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;

	/* Parallax wie beim alten Block: view.js setzt die Verschiebung beim Scrollen. */
	translate: 0 var(--cvo-parallax, 0px);
	transition: translate 0.5s ease-out;
}

.wp-block-cvo-slider__navigation {
	position: absolute;
	z-index: 10;
	align-self: flex-end;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 72.5rem;
	margin-bottom: 0.625rem;
	padding: 0 0.625rem;
	color: var(--cvo-slider-nav, #1f1f1f);
}

.wp-block-cvo-slider__bullets,
.wp-block-cvo-slider__arrows {
	display: flex;
	align-items: center;
}

.wp-block-cvo-slider__bullets {
	margin-left: -0.5rem;
}

.wp-block-cvo-slider__arrows {
	margin-right: -0.625rem;
}

.wp-block-cvo-slider__bullet,
.wp-block-cvo-slider__prev,
.wp-block-cvo-slider__next {
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	margin: 0.3125rem 0;
}

.wp-block-cvo-slider__bullet {
	padding: 0.5rem;
	line-height: 0;
}

.wp-block-cvo-slider__bullet-inner {
	display: block;
	width: 0.6875rem;
	height: 0.6875rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	background-color: transparent;
	transition: background-color 0.6s;
}

.wp-block-cvo-slider__bullet.is-active .wp-block-cvo-slider__bullet-inner {
	background-color: currentColor;
}

.wp-block-cvo-slider__prev,
.wp-block-cvo-slider__next {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.625rem;
	line-height: 0;
}

.wp-block-cvo-slider__prev svg {
	transform: rotate(180deg);
}

.wp-block-cvo-slider__bullet:focus-visible,
.wp-block-cvo-slider__prev:focus-visible,
.wp-block-cvo-slider__next:focus-visible {
	outline: 1px dotted currentColor;
}

/* ---------------------------------------------------------------------- */
/* Blöcke "Karten" und "Karte"                                            */
/* ---------------------------------------------------------------------- */

/* Raster wie beim Team. Spaltenzahlen und Seitenverhältnis kommen als
   CSS-Variablen aus den Einstellungen des Blocks "Karten". */

.wp-block-cvo-karten {
	display: grid;
	grid-template-columns: repeat(var(--cvo-karten-cols-mobile, 1), minmax(0, 1fr));
	column-gap: 1.875rem;
	row-gap: 1.875rem;
	margin-bottom: 1.875rem;
}

/* Tablet */
@media screen and (min-width: 48em) {

	.wp-block-cvo-karten {
		grid-template-columns: repeat(var(--cvo-karten-cols-tablet, 2), minmax(0, 1fr));
	}
}

/* Computer */
@media screen and (min-width: 64em) {

	.wp-block-cvo-karten {
		grid-template-columns: repeat(var(--cvo-karten-cols, 3), minmax(0, 1fr));
	}
}

/* Einblend-Animation wie beim Team; "is-pending" setzt view.js. */

.wp-block-cvo-karten.has-animation .wp-block-cvo-karte {
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.wp-block-cvo-karten.has-animation .wp-block-cvo-karte.is-pending {
	opacity: 0;
	transform: translateY(20px);
}

/* Karte: Bild oder Farbfläche oben, darunter Titel, Text, Hinweis und Linkzeile.
   Die Linkzeile steht unten, damit sie in einer Reihe auf einer Linie liegt.
   Schrift und Farben kommen ohne Einstellung aus dem Theme. */

.wp-block-cvo-karte {
	position: relative;
	display: flex;
	flex-direction: column;
}

.wp-block-cvo-karte__media {
	position: relative;
	aspect-ratio: var(--cvo-karten-ratio, 3/2);
	overflow: hidden;
}

.wp-block-cvo-karte__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.4s ease;
}

/* Farbfläche: Titel mittig in der Fläche. */
.wp-block-cvo-karte__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	text-align: center;
	background: var(--cvo-karte-bg, #1f1f1f);
	color: var(--cvo-karte-color, #fff);
	transition: filter 0.3s ease;
}

.wp-block-cvo-karte__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding-top: 1rem;
}

.wp-block-cvo-karte.has-text .wp-block-cvo-karte__body {
	padding-top: 0;
}

.wp-block-cvo-karte__title {
	margin: 0 0 0.5rem;
}

.wp-block-cvo-karte__tile .wp-block-cvo-karte__title {
	margin: 0;
	hyphens: auto;
	overflow-wrap: normal;
	word-break: normal;
}

.wp-block-cvo-karte__link,
.wp-block-cvo-karte__label {
	color: inherit;
	text-decoration: none;
}

.wp-block-cvo-karte__tile .wp-block-cvo-karte__link,
.wp-block-cvo-karte__tile .wp-block-cvo-karte__label {
	color: var(--cvo-karte-color, #fff);
}

/* Fläche über der ganzen Karte: Ein Klick irgendwo auf die Karte folgt dem Link im Titel. */
.wp-block-cvo-karte__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wp-block-cvo-karte__text,
.wp-block-cvo-karte__note {
	margin: 0 0 0.5rem;
}

.wp-block-cvo-karte__note {
	font-size: 0.875em;
}

.wp-block-cvo-karte__more {
	margin-top: auto;
	padding-top: 0.5rem;
}

/* Überfahren mit der Maus und Bedienung per Tastatur */

.wp-block-cvo-karte.is-linked:hover .wp-block-cvo-karte__link,
.wp-block-cvo-karte.is-linked:focus-within .wp-block-cvo-karte__link,
.wp-block-cvo-karte.is-linked:hover .wp-block-cvo-karte__more,
.wp-block-cvo-karte.is-linked:focus-within .wp-block-cvo-karte__more,
a.wp-block-cvo-karte__more:hover,
a.wp-block-cvo-karte__more:focus {
	text-decoration: underline;
}

.wp-block-cvo-karte.is-linked:hover .wp-block-cvo-karte__media img,
.wp-block-cvo-karte.is-linked:focus-within .wp-block-cvo-karte__media img {
	transform: scale(1.03);
}

.wp-block-cvo-karte.is-linked:hover .wp-block-cvo-karte__tile,
.wp-block-cvo-karte.is-linked:focus-within .wp-block-cvo-karte__tile {
	filter: brightness(1.15);
}

/* Der Fokusrahmen liegt um die ganze Karte statt nur um den Titel. Die Farbe lässt sich
   je Seite über --cvo-karte-focus setzen (auf einer Farbfläche wäre die Schriftfarbe zu hell). */
.wp-block-cvo-karte__link:focus-visible {
	outline: none;
}

.wp-block-cvo-karte__link:focus-visible::after {
	outline: 2px solid var(--cvo-karte-focus, currentColor);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	.wp-block-cvo-karte__media img,
	.wp-block-cvo-karte__tile {
		transition: none;
	}

	.wp-block-cvo-karte.is-linked:hover .wp-block-cvo-karte__media img,
	.wp-block-cvo-karte.is-linked:focus-within .wp-block-cvo-karte__media img {
		transform: none;
	}
}

/* ---------------------------------------------------------------------- */
/* Nur für Seiten mit dem Theme TheFutur (drschowalter.de)                */
/* Die Selektoren passen nur auf Aufbau und Klassen von TheFutur; auf     */
/* anderen Themes greifen sie nicht.                                      */
/* ---------------------------------------------------------------------- */

/* Spaltenabstände an WordPress-Spalten (Ersatz für TheFutur) */

/* Das alte Plugin ergänzt den WordPress-Block "Spalten" um Klassen wie
   "thefutur-gap-50@large". Sein CSS dafür lädt es nur auf Seiten, die einen
   seiner eigenen Blöcke enthalten. Hier stehen dieselben Regeln für die
   Abstände, die auf der Seite vorkommen. Werte und Umbruchpunkte wie im
   alten Plugin. */

/* Computer: 50 px */
@media screen and (min-width: 64em) {

	.thefutur-gap-50\@large.wp-block-columns > .wp-block-column:not(:first-child) {
		margin-left: 50px;
	}

	.thefutur-gap-50\@large.wp-block-columns > .wp-block-column:first-child {
		margin-left: 0;
	}
}

/* Tablet: 73 px; zwischen 768 und 781 px zwei Spalten je Zeile */
@media screen and (min-width: 48em) and (max-width: 63.9375em) {

	.thefutur-gap-73\@medium.wp-block-columns > .wp-block-column:not(:first-child) {
		margin-left: 73px;
	}

	.thefutur-gap-73\@medium.wp-block-columns > .wp-block-column:first-child {
		margin-left: 0;
	}
}

@media screen and (min-width: 48em) and (max-width: 781px) {

	.thefutur-gap-73\@medium.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - 36.5px) !important;
	}

	.thefutur-gap-73\@medium.wp-block-columns > .wp-block-column:nth-child(odd) {
		margin-left: 0;
	}
}

/* Mobiltelefon: 73 px; unter 600 px untereinander ohne Abstand,
   von 600 bis 767 px zwei Spalten je Zeile */
@media screen and (max-width: 47.9375em) {

	.thefutur-gap-73\@small.wp-block-columns > .wp-block-column:not(:first-child) {
		margin-left: 73px;
	}

	.thefutur-gap-73\@small.wp-block-columns > .wp-block-column:first-child {
		margin-left: 0;
	}
}

@media screen and (min-width: 600px) and (max-width: 47.9375em) {

	.thefutur-gap-73\@small.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - 36.5px) !important;
	}

	.thefutur-gap-73\@small.wp-block-columns > .wp-block-column:nth-child(odd) {
		margin-left: 0;
	}
}

@media screen and (max-width: 600px) {

	.thefutur-gap-73\@small.wp-block-columns > .wp-block-column {
		margin-left: 0;
	}
}

@media screen and (max-width: 599px) {

	.thefutur-gap-73\@small.wp-block-columns > .wp-block-column:not(:first-child) {
		margin-left: 0;
	}
}

/* ---------------------------------------------------------------------- */
/* Nur im Editor                                                          */
/* Diese Regeln greifen auf der Website nicht, weil es die Klassen dort   */
/* nicht gibt.                                                            */
/* ---------------------------------------------------------------------- */

/* Der Editor gibt jedem Block eigene Außenabstände und eine Höchstbreite.
   Innerhalb des Rasters stören beide. */

.wp-block-cvo-team-members > .wp-block {
	margin: 0;
	max-width: none;
}

/* Schaltfläche "Block hinzufügen" über die volle Breite unter das Raster. */

.wp-block-cvo-team-members > .block-list-appender {
	grid-column: 1 / -1;
	position: static;
}

.editor-styles-wrapper .wp-block-cvo-team-member__title,
.editor-styles-wrapper .wp-block-cvo-team-member__info {
	margin-top: 0;
}

/* Abstand: im Editor als gestrichelte Fläche sichtbar, damit er sich anklicken lässt. */

.editor-styles-wrapper .wp-block-cvo-spacer {
	min-height: 12px;
	outline: 1px dashed #ccc;
}

/* Einblend-Bereich: im Editor nie ausgeblendet. */

.editor-styles-wrapper .wp-block-cvo-scroll-anim.is-pending {
	opacity: 1;
	transform: none;
}

/* Bildslider: Im Editor stehen die Bilder nebeneinander statt übereinander. */

.editor-styles-wrapper .wp-block-cvo-slider {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 0.75rem;
	height: auto;
	overflow: visible;
}

.editor-styles-wrapper .wp-block-cvo-slider > .block-list-appender {
	grid-column: 1 / -1;
	position: static;
}

.editor-styles-wrapper .wp-block-cvo-slide {
	position: relative;
	visibility: visible;
	margin: 0;
	max-width: none;
}

.editor-styles-wrapper .wp-block-cvo-slide__image {
	position: relative;
}

.editor-styles-wrapper .wp-block-cvo-slide__image img {
	height: 120px;
}

/* Karten: Raster ohne die Außenabstände des Editors, "Block hinzufügen" unter das Raster. */

.wp-block-cvo-karten > .wp-block {
	margin: 0;
	max-width: none;
}

.wp-block-cvo-karten > .block-list-appender {
	grid-column: 1 / -1;
	position: static;
}

.editor-styles-wrapper .wp-block-cvo-karte__title,
.editor-styles-wrapper .wp-block-cvo-karte__text,
.editor-styles-wrapper .wp-block-cvo-karte__note {
	margin-top: 0;
}