/*
 * Blöcke: Gestaltung der Inhalte, die bis Schritt 6 der Aktualisierung mit WPBakery gebaut waren,
 * und Vorgaben für neue Inhalte im Block-Editor.
 *
 * Abstände wie bei WPBakery: Nach jedem Element (Bild, Button, Galerie, Textelement …) 35 px, die
 * Absätze in einem Text 9,5 px (style.css). Ein früheres Textelement mit mehreren Absätzen ist eine
 * Gruppe mit der Klasse buchone-textblock.
 */

/* ==========================================================================
   Abstände
   ========================================================================== */

/* Spalten und Gruppen haben keinen eigenen Abstand, den bringen ihre Elemente mit (steht vorn,
   damit eine Gruppe als Textelement unten ihren Abstand behält) */
.wp-block-columns,
.wp-block-group {
	margin-top: 0;
	margin-bottom: 0;
}

.buchone-textblock,
.wp-block-image,
.wp-block-gallery,
.wp-block-buttons,
.wp-block-separator,
.buchone-akkordeon,
.buchone-karussell {
	margin-top: 0;
	margin-bottom: 35px;
}

/* Nach einem Absatz beginnt ein Element erst nach 35 px (die Ränder fallen zusammen) */
:is(p, ul, ol) + :is(.wp-block-image, .wp-block-gallery, .wp-block-buttons, .wp-block-separator) {
	margin-top: 35px;
}

/* Frühere WPBakery-Zeile mit eigener Gestaltung: hält die Abstände ihrer Elemente für sich, sie
   fallen nicht mit denen davor oder danach zusammen */
.buchone-zeile {
	display: flow-root;
}

/* Spaltenabstand wie bei WPBakery (2 × 15 px) */
.wp-block-columns {
	gap: 30px;
}

/* Untereinander gestapelte Spalten ohne zusätzlichen Abstand (den bringen die Elemente mit),
   leere Spalten (Füller in angefangenen Rasterzeilen) dann ganz weg */
@media (max-width: 781px) {
	.wp-block-columns {
		row-gap: 0;
	}

	.wp-block-column:empty {
		display: none;
	}
}

/* Element mit eigener Gestaltung (z. B. Bild mit Rahmen und Hintergrund): Abstand danach wie bei
   allen Elementen, der Block darin ohne eigenen Rand */
.buchone-element {
	margin-bottom: 35px;
}

.buchone-element > .wp-block-group__inner-container > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Im Textelement wie bei WPBakery: erste Überschrift jeder Ebene oben bündig, letztes Element ohne Rand */
:is(h1, h2, h3, h4, h5).buchone-textblock,
.buchone-textblock > :is(h1, h2, h3, h4, h5):first-of-type,
.buchone-textblock > .wp-block-group__inner-container > :is(h1, h2, h3, h4, h5):first-of-type {
	margin-top: 0;
}

.buchone-textblock > :last-child,
.buchone-textblock > .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
}

/* Volle Breite (früher „Zeile strecken“): 15 px Rand wie die Spalten bei WPBakery. Der Inhalt bleibt
   in Seitenbreite (Layout „constrained“) oder läuft bis an diesen Rand (früher „Inhalt strecken“). */
.wp-block-group.alignfull > .wp-block-group__inner-container {
	padding-right: 15px;
	padding-left: 15px;
}

/* ==========================================================================
   Bilder, Galerie, Trenner
   ========================================================================== */

.wp-block-image img {
	vertical-align: top;
}

/* Galerie: WordPress rechnet die Bildbreiten mit dem Abstand aus der Variablen, setzt ihn bei
   klassischen Themes aber nicht als gap (sonst passen zwei Bilder nicht nebeneinander) */
.wp-block-gallery.has-nested-images {
	gap: var(--wp--style--unstable-gallery-gap, 16px);
}

/* Raster (früher Medienraster): angefangene Reihen nicht auf volle Breite ziehen */
.wp-block-gallery.buchone-raster.has-nested-images figure.wp-block-image:not(#individual-image) {
	flex-grow: 0;
}

.wp-block-gallery.buchone-raster figure.wp-block-image {
	margin: 0;
}

/* Auf schmalen Bildschirmen wie bei WPBakery ein Bild je Zeile */
@media (max-width: 767px) {
	.wp-block-gallery.buchone-raster.has-nested-images figure.wp-block-image:not(#individual-image) {
		width: 100%;
	}

	.wp-block-image.buchone-raster img {
		width: 100% !important;
	}
}

.wp-block-separator,
.wp-block-separator.has-alpha-channel-opacity {
	width: 100%;
	height: 0;
	border: 0;
	border-top: 1px solid var(--contrast-3);
	background: none;
	opacity: 1;
}

/* Linea-Symbol (früher vc_icon) */
.buchone-icon {
	margin: 0 0 15px;
	color: var(--contrast);
	font-size: 32px;
	line-height: 1;
}

/* ==========================================================================
   Buttons: grün und eckig wie die Kalium-Buttons, Variante „groß“ und „grau“ (früher WPBakery)
   ========================================================================== */

.wp-block-buttons {
	gap: 10px;
}

.wp-block-button .wp-block-button__link {
	padding: 10px 22px;
	border: 0;
	border-radius: 0;
	background-color: var(--accent);
	color: var(--base-3);
	font-size: 15px;
	line-height: 20px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
	background-color: var(--accent-2);
	color: var(--base-3);
}

/* Wie „btn-large“ bei Kalium (der Nachbau bis Schritt 5 zeigte sie versehentlich in normaler Größe) */
.wp-block-button.is-style-gross .wp-block-button__link {
	padding: 14px 20px;
	font-size: 16px;
	line-height: 1.42857143;
}

.wp-block-button.is-style-grau .wp-block-button__link {
	padding: 14px 20px;
	border-radius: 5px;
	background-color: #ebebeb;
	color: #666666;
	font-size: 14px;
	line-height: 1.42857143;
}

.wp-block-button.is-style-grau .wp-block-button__link:hover,
.wp-block-button.is-style-grau .wp-block-button__link:focus {
	background-color: #dcdcdc;
	color: #5e5e5e;
}

/* WPBakery-Buttons hatten weniger Abstand nach unten als die übrigen Elemente */
.wp-block-buttons:has(> .is-style-grau) {
	margin-bottom: 21.74px;
}

/* ==========================================================================
   Aufklapper (früher vc_toggle) und Akkordeon (früher vc_tta_accordion)
   ========================================================================== */

.wp-block-details {
	margin: 0 0 21.74px;
}

.wp-block-details > summary {
	position: relative;
	padding-left: 24px;
	color: var(--contrast);
	font-size: 19px;
	line-height: 22px;
	list-style: none;
	cursor: pointer;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* Plus-Zeichen aus zwei Balken, beim Öffnen bleibt der waagrechte */
.wp-block-details > summary::before,
.wp-block-details > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 6px;
	width: 10px;
	height: 2px;
	margin-top: -1px;
	background-color: #bbbbbb;
}

.wp-block-details > summary::after {
	left: 10px;
	width: 2px;
	height: 10px;
	margin-top: -5px;
}

.wp-block-details[open] > summary::after {
	visibility: hidden;
}

.wp-block-details > summary + * {
	margin-top: 1em;
}

.wp-block-details > :last-child:not(summary) {
	margin-bottom: 21.74px;
}

/* Akkordeon: graue Felder mit 1 px Abstand, Zeichen links im Titel */
.buchone-akkordeon .wp-block-details {
	margin: 0 0 1px;
	padding: 0 20px;
	background-color: var(--base);
}

.buchone-akkordeon .wp-block-details > summary {
	margin: 0 -20px;
	padding: 15px 20px 15px 46px;
	color: #444444;
	font-size: 16px;
	line-height: 18px;
}

.buchone-akkordeon .wp-block-details > summary::before {
	left: 20px;
	width: 12px;
	height: 1px;
	margin-top: 0;
	background-color: #444444;
}

.buchone-akkordeon .wp-block-details > summary::after {
	left: 25.5px;
	width: 1px;
	height: 12px;
	margin-top: -5.5px;
	background-color: #444444;
}

.buchone-akkordeon .wp-block-details[open] {
	padding-bottom: 14px;
}

.buchone-akkordeon .wp-block-details[open] > summary {
	border-bottom: 1px solid #e3e3e3;
}

.buchone-akkordeon .wp-block-details > summary + * {
	margin-top: 14px;
}

.buchone-akkordeon .wp-block-details > :last-child:not(summary) {
	margin-bottom: 0;
}

/* ==========================================================================
   Slider (früher Slider Revolution, js/slider.js). Jede Folie ist ein Cover-Block; Texte, Button
   und Bilder liegen an ihrer Ankerseite (pos-h-…, pos-v-…), der Abstand dazu steht als Rand in
   Prozent der Folienbreite am Block. Schrift wächst mit der Breite des Sliders (cqw).
   Nur im Frontend (.site), im Editor stehen die Folien untereinander.
   ========================================================================== */

.site .buchone-slider {
	position: relative;
	overflow: hidden;
	container-type: inline-size;
}

.site .buchone-slider > .wp-block-group__inner-container {
	display: grid;
}

.site .buchone-slide {
	grid-area: 1 / 1;
	min-height: 0;
	margin: 0;
	padding: 0;
}

/* Bis das Skript läuft, nur die erste Folie */
.site .buchone-slider:not(.is-ready) .buchone-slide:not(:first-child) {
	display: none;
}

.site .buchone-slider.is-ready .buchone-slide {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease, visibility 0.3s;
}

.site .buchone-slider.is-ready .buchone-slide.is-active {
	visibility: visible;
	opacity: 1;
}

.site .buchone-slide .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	width: auto;
}

.site .buchone-slide .wp-block-cover__inner-container > * {
	position: absolute;
	max-width: none;
	margin: 0;
}

.site .buchone-slide .pos-h-links { left: 0; }
.site .buchone-slide .pos-h-rechts { right: 0; }
.site .buchone-slide .pos-v-oben { top: 0; }
.site .buchone-slide .pos-v-unten { bottom: 0; }

.site .buchone-slide .pos-h-mitte {
	left: 50%;
	transform: translateX(-50%);
}

.site .buchone-slide .pos-v-mitte {
	top: 50%;
	transform: translateY(-50%);
}

.site .buchone-slide .pos-h-mitte.pos-v-mitte {
	transform: translate(-50%, -50%);
}

.site .buchone-slide__titel,
.site .buchone-slide__text {
	background-color: var(--base-3);
	color: #333333;
	font-size: calc(30 / 1140 * 100cqw);
	line-height: calc(22 / 1140 * 100cqw);
	white-space: nowrap;
}

.site .buchone-slide__titel {
	font-size: calc(45 / 1140 * 100cqw);
}

/* Herz vor „Buch“ (aus dem CSS des Sliders) */
.site .buchone-slide .herz {
	width: auto;
	height: calc(36 / 1140 * 100cqw);
	padding: calc(2 / 1140 * 100cqw) calc(10 / 1140 * 100cqw) calc(8 / 1140 * 100cqw) 0;
	vertical-align: middle;
}

.site .buchone-slide__button .wp-block-button__link {
	padding: calc(12 / 1140 * 100cqw) calc(22 / 1140 * 100cqw);
	border: 3px solid #000000;
	background-color: var(--accent);
	font-size: calc(17 / 1140 * 100cqw);
	font-weight: 500;
	line-height: calc(22 / 1140 * 100cqw);
	white-space: nowrap;
}

.site .buchone-slide .wp-block-image img {
	max-width: none;
}

/* Pfeile (js/slider.js) */
.buchone-slider__pfeil {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.buchone-slider__pfeil::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	border-top: 2px solid var(--base-3);
	border-left: 2px solid var(--base-3);
	transform: translate(-30%, -50%) rotate(-45deg);
}

.buchone-slider__pfeil.is-weiter::before {
	transform: translate(-70%, -50%) rotate(135deg);
}

.buchone-slider__pfeil.is-zurueck {
	left: 30px;
}

.buchone-slider__pfeil.is-weiter {
	right: 30px;
}

.buchone-slider__pfeil:hover,
.buchone-slider__pfeil:focus {
	background: none;
}

/* Schmale Bildschirme: quadratische Folie, Texte und Button untereinander links unten */
@media (max-width: 767px) {
	.site .buchone-slide {
		aspect-ratio: 1 / 1 !important;
	}

	.site .buchone-slide .wp-block-cover__inner-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
		gap: 8px;
		padding: 15px 0;
	}

	.site .buchone-slide .wp-block-cover__inner-container > * {
		position: static;
		margin: 0 !important;
		transform: none;
	}

	.site .buchone-slide .wp-block-cover__inner-container > .buchone-slide__titel {
		margin-bottom: auto !important;
	}

	.site .buchone-slide__titel,
	.site .buchone-slide__text {
		padding: 12px 15px 12px 20px !important;
		font-size: 17px;
		line-height: 1.2;
		white-space: normal;
	}

	.site .buchone-slide__titel {
		font-size: 30px;
	}

	.site .buchone-slide .herz {
		height: 24px;
		padding: 0 8px 4px 0;
	}

	.site .buchone-slide .wp-block-buttons {
		padding: 0 0 0 20px !important;
	}

	.site .buchone-slide__button .wp-block-button__link {
		padding: 9px 18px;
		font-size: 14px;
		line-height: 18px;
	}

	.site .buchone-slide .wp-block-image {
		align-self: center;
		margin: auto 0 !important;
	}

	.site .buchone-slide .wp-block-image img {
		max-width: 100%;
	}

	.buchone-slider__pfeil.is-zurueck {
		left: 5px;
	}

	.buchone-slider__pfeil.is-weiter {
		right: 5px;
	}
}

/* ==========================================================================
   Karussell (früher „Carousel“ der Addons for Visual Composer, js/slider.js): Einträge
   nebeneinander, Anzahl je Breite aus der Klasse spalten-Desktop-Tablet-Handy
   ========================================================================== */

.buchone-karussell {
	--spalten: 3;
}

.buchone-karussell > .wp-block-group__inner-container {
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.buchone-karussell > .wp-block-group__inner-container::-webkit-scrollbar {
	display: none;
}

/* Jeder Eintrag mit 10 px Innenabstand links und rechts (wie „gutter 10“ beim alten Karussell),
   Bezug für darübergelegte Texte (.textdrueber auf der Service-Seite) */
.buchone-karussell__eintrag {
	position: relative;
	flex: 0 0 calc(100% / var(--spalten));
	min-width: 0;
	padding: 0 10px;
	scroll-snap-align: start;
}

/* Bilder im Eintrag stehen wie bisher als Absatz im Text */
.buchone-karussell__eintrag .wp-block-image {
	margin-bottom: 9.5px;
}

.buchone-karussell__eintrag img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

@media (max-width: 479px) {
	.buchone-karussell__eintrag {
		padding: 0 4px;
	}
}

.spalten-7-5-4,
.spalten-7-3-2 {
	--spalten: 7;
}

@media (max-width: 991px) {
	.spalten-7-5-4 { --spalten: 5; }
	.spalten-7-3-2 { --spalten: 3; }
}

@media (max-width: 479px) {
	.spalten-7-5-4 { --spalten: 4; }
	.spalten-7-3-2 { --spalten: 2; }
}

/* ==========================================================================
   Einzelne Inhalte (früher Seiten-CSS in WPBakery)
   ========================================================================== */

/* Startseite (deutsch und englisch). Die Ansicht beim Überfahren einer Kachel (js/start.js) liegt
   über dem Slider; js/start.js rechnet von einem Bezugspunkt 10 px unter dem Slider aus. */
.home .buchone-textblock:has(.hover-container) {
	position: relative;
	margin-top: 10px;
	margin-bottom: 0;
}

.home .buchone-textblock,
.home .wp-block-image,
.home .wp-block-buttons {
	margin-bottom: 10px;
}

.home .hompagetextmiddle {
	font-size: 20px;
}

.home .hompagetextmiddle p {
	margin: 0;
}

.home .homepagecarousel {
	font-size: 13px;
}

.home .homepagecarousel h2 {
	margin: 12px 0 5px;
	font-size: 15px;
}

.home .homepagecarousel p {
	margin-top: 0;
}

.home .startbotschaft p {
	font-size: 17px;
}

.home .centered-row {
	margin: auto;
}

.home .centered-row h3 {
	margin-bottom: 4px;
}

/* Über uns: Zeitleiste „Anno domini“ */
.anno h4 {
	margin-top: 25px;
	font-size: 16px;
}

.mare10 {
	margin-right: 10px;
}

/* Bezahlung */
.mare15 {
	margin-right: 15px;
}

/* Sitemap (früher Menü-Widget): ohne Aufzählungszeichen, Zeilenabstand wie im Menü */
.buchone-sitemap {
	margin-left: 0;
	list-style: none;
}

.buchone-sitemap li {
	padding: 4px 0;
}

/* Kontakt: Feld des Honeypot-Plugins */
input[name="honeypot-609"] {
	visibility: hidden;
}