/*
Theme Name: Lerncoach Blocks
Theme URI: https://lerncoach-wiesbaden.de
Author: Lerncoaching Andrea Hartl
Author URI: https://lerncoach-wiesbaden.de
Description: Modernes Block-Theme (Full Site Editing) für Lerncoaching Andrea Hartl. Löst das Avada-Theme ab. Alle Inhalte sind über den Block-Editor und den Website-Editor pflegbar.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lerncoach
Tags: full-site-editing, block-patterns, blog, one-column, custom-colors, custom-menu, editor-style, featured-images, translation-ready
*/

/* ==========================================================================
   1. Grundlagen
   ========================================================================== */

:root {
	--lc-radius: 5px;
	--lc-header-height: 95px;
	--lc-transition: 0.25s ease;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Reduzierte Seitenränder auf kleinen Viewports. */
@media (max-width: 781px) {
	body {
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}
}

img {
	height: auto;
	max-width: 100%;
}

/* Eingebettete Inhalte (z. B. die Karte auf der Kontaktseite) sind von Haus aus
   Inline-Elemente – dadurch greift die mittige Ausrichtung des Layouts nicht. */
iframe,
video,
embed,
object {
	display: block;
	margin-inline: auto;
	max-width: 100%;
}

/* Sprungziele nicht bündig an die obere Fensterkante setzen. */
:target {
	scroll-margin-top: 24px;
}

/* Fokus-Sichtbarkeit (Barrierefreiheit). */
:where(a, button, summary, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ==========================================================================
   2. Fließtext-Links – unterstrichen in Terrakotta (wie im alten Theme)
   ========================================================================== */

.lc-content :where(p, li, td) a:not(.wp-element-button):not(.wp-block-button__link) {
	border-bottom: 1px solid var(--wp--preset--color--accent);
	text-decoration: none;
	transition: opacity var(--lc-transition);
}

.lc-content :where(p, li, td) a:not(.wp-element-button):not(.wp-block-button__link):hover {
	opacity: 0.7;
}

/* Auf dunklen Flächen bleibt der Text hell. */
.has-primary-background-color,
.has-accent-background-color,
.has-dark-background-color {
	color: var(--wp--preset--color--base);
}

.has-primary-background-color :where(h1, h2, h3, h4, h5, h6),
.has-accent-background-color :where(h1, h2, h3, h4, h5, h6),
.has-dark-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

.has-primary-background-color a:not(.wp-element-button),
.has-accent-background-color a:not(.wp-element-button),
.has-dark-background-color a:not(.wp-element-button) {
	color: inherit;
}

/* ==========================================================================
   3. Abschnitte – einheitliches vertikales Raster
   ========================================================================== */

.is-style-lc-section {
	padding-block: var(--wp--preset--spacing--60);
}

.is-style-lc-section-compact {
	padding-block: var(--wp--preset--spacing--40);
}

.is-style-lc-section-flush {
	padding-block: 0;
}

@media (max-width: 781px) {
	.is-style-lc-section {
		padding-block: var(--wp--preset--spacing--50);
	}

	.is-style-lc-section-compact {
		padding-block: var(--wp--preset--spacing--30);
	}
}

/* --------------------------------------------------------------------------
   Kopfbereiche über die volle Breite (Bild/Slider links, Text rechts)
   -------------------------------------------------------------------------- */

/* WordPress gibt Gruppen mit Hintergrund einen Standard-Innenabstand.
   In den Kopfbereichen soll das Bild randlos anschließen. */
.lc-section-wide {
	padding-block: 0;
	padding-inline: 0;
}

/* Inhalt beider Spalten vertikal mittig – wie im bisherigen Layout. */
.lc-section-wide > .wp-block-columns > .wp-block-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Enthält eine Spalte nur ein Bild oder einen Slider, füllt dieses
   die gesamte Fläche des Abschnitts. */
.lc-section-wide .wp-block-column > .wp-block-image:only-child,
.lc-section-wide .wp-block-column > .wp-block-cb-carousel-v2:only-child {
	flex: 1 1 auto;
	margin: 0;
	min-height: 0;
}

.lc-section-wide .wp-block-column > .wp-block-cb-carousel-v2:only-child .swiper,
.lc-section-wide .wp-block-column > .wp-block-cb-carousel-v2:only-child .swiper-wrapper,
.lc-section-wide .wp-block-column > .wp-block-cb-carousel-v2:only-child .cb-slide,
.lc-section-wide .wp-block-column > .wp-block-cb-carousel-v2:only-child figure {
	height: 100%;
	margin: 0;
}

.lc-section-wide .wp-block-column > .wp-block-image:only-child img,
.lc-section-wide .wp-block-column > .wp-block-cb-carousel-v2:only-child img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Auf schmalen Bildschirmen stehen Bild und Text untereinander. Der Abstand
   zwischen beiden entsteht dann bereits durch den Spaltenabstand – der große
   Innenabstand der Textspalte käme obendrauf und wäre doppelt so groß wie
   zwischen den übrigen Abschnitten. Die Werte stehen als Inline-Stil im Block,
   deshalb ist hier „!important“ nötig. */
@media (max-width: 781px) {
	.lc-section-wide > .wp-block-columns > .wp-block-column {
		padding-block: 0 var(--wp--preset--spacing--40) !important;
		padding-inline: var(--wp--style--root--padding-left) !important;
	}

	/* Die Bild- bzw. Slider-Spalte bleibt randlos, sonst käme ihr Innenabstand
	   zum Spaltenabstand hinzu. */
	.lc-section-wide > .wp-block-columns > .wp-block-column:has(> .wp-block-image:only-child),
	.lc-section-wide > .wp-block-columns > .wp-block-column:has(> .wp-block-cb-carousel-v2:only-child) {
		padding: 0 !important;
	}
}

/* Auf schmalen Bildschirmen behalten die Bilder ihre eigene Höhe. */
@media (max-width: 781px) {
	.lc-section-wide .wp-block-column > .wp-block-image:only-child img,
	.lc-section-wide .wp-block-column > .wp-block-cb-carousel-v2:only-child img {
		height: auto;
	}

	.lc-section-wide .wp-block-column > .wp-block-cb-carousel-v2:only-child .swiper,
	.lc-section-wide .wp-block-column > .wp-block-cb-carousel-v2:only-child .swiper-wrapper,
	.lc-section-wide .wp-block-column > .wp-block-cb-carousel-v2:only-child .cb-slide,
	.lc-section-wide .wp-block-column > .wp-block-cb-carousel-v2:only-child figure {
		height: auto;
	}
}

/* ==========================================================================
   4. Kicker / Vorzeile
   ========================================================================== */

.is-style-lc-kicker {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--eyebrow);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 3px;
	line-height: 2;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* ==========================================================================
   5. Listen
   ========================================================================== */

.is-style-lc-square {
	list-style: square;
	padding-left: 1.1em;
}

.is-style-lc-square li {
	margin-bottom: var(--wp--preset--spacing--20);
}

.is-style-lc-square li::marker {
	color: currentColor;
}

/* Bild und direkt folgende Farbfläche gehören optisch zusammen. */
.lc-content .wp-block-image + .wp-block-group.has-background,
.lc-content .wp-block-image + .wp-block-columns.has-background {
	margin-block-start: 0;
}

.is-style-lc-arrow {
	list-style: none;
	padding-left: 0;
}

.is-style-lc-arrow li {
	padding-left: 1.1em;
	position: relative;
}

.is-style-lc-arrow li::before {
	color: var(--wp--preset--color--accent);
	content: "\203A";
	font-size: 1.1em;
	left: 0;
	line-height: inherit;
	position: absolute;
}

.is-style-lc-check {
	list-style: none;
	padding-left: 0;
}

.is-style-lc-check li {
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin-bottom: 0;
	padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20) 2.4em;
	position: relative;
}

.is-style-lc-check li:last-child {
	border-bottom: 0;
}

.is-style-lc-check li::before {
	background-color: var(--wp--preset--color--accent);
	background-image: var(--lc-icon-check-white);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.62em auto;
	border-radius: 50%;
	content: "";
	height: 1.35em;
	left: 0;
	position: absolute;
	top: 1.05em;
	width: 1.35em;
}

/* Auf farbigen Flächen bleibt die Trennlinie dezent. */
.has-primary-background-color .is-style-lc-check li,
.has-accent-background-color .is-style-lc-check li,
.has-dark-background-color .is-style-lc-check li {
	border-bottom-color: rgba(255, 255, 255, 0.2);
}

:root {
	/* Brief- und Telefonsymbol: Font Awesome Free 6.7.2, Icons unter CC BY 4.0
	   (https://fontawesome.com/license/free). */
	--lc-icon-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>');
	--lc-icon-check-white: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23ffffff"><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>');
	--lc-icon-mail: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>');
	--lc-icon-phone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/></svg>');
	--lc-icon-instagram: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>');
	--lc-icon-facebook: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>');
}

/* ==========================================================================
   6. Icon-Textzeilen (Servicezeile, Kontaktangaben)
   ========================================================================== */

.is-style-lc-icon-mail,
.is-style-lc-icon-phone {
	align-items: center;
	display: flex;
	gap: 0.6em;
	margin-bottom: 0;
}

.is-style-lc-icon-mail::before,
.is-style-lc-icon-phone::before {
	background-color: currentColor;
	content: "";
	flex: 0 0 auto;
	height: 1em;
	width: 1em;
}

.is-style-lc-icon-mail::before {
	-webkit-mask: var(--lc-icon-mail) center / contain no-repeat;
	mask: var(--lc-icon-mail) center / contain no-repeat;
}

.is-style-lc-icon-phone::before {
	-webkit-mask: var(--lc-icon-phone) center / contain no-repeat;
	mask: var(--lc-icon-phone) center / contain no-repeat;
	height: 0.85em;
	width: 0.85em;
}

.is-style-lc-icon-mail a,
.is-style-lc-icon-phone a {
	border: 0 !important;
	color: inherit;
	text-decoration: none;
}

.is-style-lc-icon-mail a:hover,
.is-style-lc-icon-phone a:hover {
	opacity: 0.7;
}

/* ==========================================================================
   7. Kopfbereich
   ========================================================================== */

.lc-topbar {
	font-size: var(--wp--preset--font-size--tiny);
}

.lc-topbar p {
	margin-bottom: 0;
}

/* Derselbe Abstand wie zwischen den übrigen Angaben der Servicezeile. */
.lc-topbar .wp-block-social-links {
	gap: var(--wp--preset--spacing--30) !important;
}

.lc-topbar .wp-social-link {
	padding: 0;
}

.lc-topbar .wp-social-link a {
	padding: 0;
}

/* Auf schmalen Bildschirmen bleiben nur die Symbole: E-Mail-Adresse und
   Rufnummer sind dort zu lang. Das Symbol wandert dabei in den Link, damit die
   Schaltfläche antippbar bleibt. */
@media (max-width: 781px) {
	.lc-topbar > .wp-block-group,
	.lc-topbar .wp-block-group {
		gap: var(--wp--preset--spacing--30) !important;
		justify-content: center !important;
	}

	.lc-topbar .is-style-lc-icon-mail,
	.lc-topbar .is-style-lc-icon-phone {
		gap: 0;
	}

	.lc-topbar .is-style-lc-icon-mail::before,
	.lc-topbar .is-style-lc-icon-phone::before {
		display: none;
	}

	.lc-topbar .is-style-lc-icon-mail a,
	.lc-topbar .is-style-lc-icon-phone a {
		align-items: center;
		display: inline-flex;
		font-size: 0;
		justify-content: center;
		line-height: 0;
		min-height: 32px;
		min-width: 32px;
	}

	.lc-topbar .is-style-lc-icon-mail a::before,
	.lc-topbar .is-style-lc-icon-phone a::before {
		background-color: currentColor;
		content: "";
		display: block;
		height: 24px;
		width: 24px;
	}

	.lc-topbar .is-style-lc-icon-mail a::before {
		-webkit-mask: var(--lc-icon-mail) center / contain no-repeat;
		mask: var(--lc-icon-mail) center / contain no-repeat;
	}

	.lc-topbar .is-style-lc-icon-phone a::before {
		-webkit-mask: var(--lc-icon-phone) center / contain no-repeat;
		mask: var(--lc-icon-phone) center / contain no-repeat;
		height: 21px;
		width: 21px;
	}

	/* Alle vier Symbole bekommen dieselbe Fläche und denselben Abstand,
	   damit sie gleichmäßig in der Zeile stehen. */
	.lc-topbar .wp-block-social-links,
	.lc-topbar .wp-block-social-links.has-small-icon-size {
		font-size: 24px;
		gap: var(--wp--preset--spacing--30) !important;
	}

	.lc-topbar .wp-social-link {
		height: auto;
		width: auto;
	}

	.lc-topbar .wp-social-link a {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		min-height: 32px;
		min-width: 32px;
	}
}

.lc-header {
	min-height: var(--lc-header-height);
}

.lc-header .wp-block-site-logo img {
	display: block;
	max-width: 250px;
	width: 100%;
}

/* Im Zwischenbereich ist das Logo etwas kleiner, damit Logo und Menü
   entspannt nebeneinander stehen. */
@media (min-width: 900px) and (max-width: 1199.98px) {
	.lc-header .wp-block-site-logo img {
		max-width: 200px;
	}
}

/* Das Hauptmenü bricht nie um – es steht immer in einer Zeile.
   Im aufgeklappten Overlay gilt das nicht, dort stehen die Punkte
   untereinander. */
.lc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	flex-wrap: nowrap;
}

.lc-header .wp-block-navigation .wp-block-navigation-item__content {
	white-space: nowrap;
}

/* WordPress blendet das Menü erst unter 600 px als Overlay ein. Dazwischen
   wird es zu eng, deshalb beginnt das Overlay hier schon unter 900 px.
   Die Bruchzahl verhindert eine Lücke bei Bildschirmen, deren Breite
   rechnerisch zwischen 899 und 900 px liegt. */
@media (max-width: 899.98px) {
	.lc-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.lc-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Navigation */
.lc-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 5px;
	position: relative;
}

.lc-header .wp-block-navigation .wp-block-navigation-item__content::after {
	background-color: var(--wp--preset--color--accent);
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--lc-transition);
	width: 100%;
}

.lc-header .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.lc-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.lc-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.lc-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.lc-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

/* Pfeil-Symbole der obersten Menüebene ausblenden (wie im bisherigen Layout). */
.lc-header .wp-block-navigation > ul > li > .wp-block-navigation-item__content + .wp-block-navigation__submenu-icon,
.lc-header .wp-block-navigation > ul > li > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon {
	display: none;
}

/* Untermenüs */
.lc-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--wp--preset--shadow--soft);
	min-width: 260px;
	padding-block: 8px;
}

.lc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 20px;
}

.lc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

/* Mobiles Menü */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px 24px 48px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-top: 24px;
}

/* Die Ausrichtung des Kopfmenüs (rechtsbündig) gilt im Overlay nicht. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start !important;
	justify-content: flex-start !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 4px;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
	padding-block: 8px;
	text-align: left;
}

/* Untermenüs im Overlay ohne eigene Fläche */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent;
	border: 0;
	box-shadow: none;
	padding: 0 0 8px 16px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--medium);
	padding: 6px 0;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--accent);
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	height: 32px;
	width: 32px;
}

/* ==========================================================================
   8. Fußbereich
   ========================================================================== */

.lc-footer {
	color: var(--wp--preset--color--base);
}

.lc-footer :where(p, li, a, h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--base);
}

.lc-footer p {
	margin-bottom: 15px;
}

.lc-footer a {
	text-decoration: none;
	transition: color var(--lc-transition);
}

.lc-footer a:hover {
	color: var(--wp--preset--color--accent);
}

.lc-footer .lc-footer-contact a {
	border-bottom: 1px solid var(--wp--preset--color--accent);
}

/* Fußmenü mit Pfeil-Markern */
.lc-footer .wp-block-navigation {
	gap: 0;
}

.lc-footer .wp-block-navigation ul {
	gap: 0;
}

.lc-footer .wp-block-navigation .wp-block-navigation-item {
	padding: 0 10px 0 12px;
	position: relative;
}

/* Gleicher Zeilenabstand wie im übrigen Fußbereich. */
.lc-footer .wp-block-navigation .wp-block-navigation-item__content {
	line-height: 2;
}

.lc-footer .wp-block-navigation .wp-block-navigation-item::before {
	color: var(--wp--preset--color--accent);
	content: "\203A";
	left: 0;
	position: absolute;
}

.lc-footer .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

.lc-copyright {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lc-copyright p {
	margin-bottom: 0;
}

/* ==========================================================================
   9. Buttons – zusätzliche Stile
   ========================================================================== */

.wp-block-button__link {
	display: inline-block;
	text-align: center;
	transition: background-color var(--lc-transition), border-color var(--lc-transition), color var(--lc-transition);
}

/* Heller Umriss (auf farbigen Flächen) */
.wp-block-button.is-style-lc-outline-light .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-lc-outline-light .wp-block-button__link:hover,
.wp-block-button.is-style-lc-outline-light .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Terrakotta-Umriss (auf hellen Flächen) */
.wp-block-button.is-style-lc-outline-accent .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-lc-outline-accent .wp-block-button__link:hover,
.wp-block-button.is-style-lc-outline-accent .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Weiße Fläche mit Terrakotta-Schrift (auf farbigen Flächen) */
.wp-block-button.is-style-lc-light .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-lc-light .wp-block-button__link:hover,
.wp-block-button.is-style-lc-light .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Schaltflächen mit vorangestelltem Symbol */
.wp-block-button.is-style-lc-btn-instagram .wp-block-button__link::before,
.wp-block-button.is-style-lc-btn-facebook .wp-block-button__link::before {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 1.1em;
	margin-right: 0.5em;
	vertical-align: -0.18em;
	width: 1.1em;
}

.wp-block-button.is-style-lc-btn-instagram .wp-block-button__link::before {
	-webkit-mask: var(--lc-icon-instagram) center / contain no-repeat;
	mask: var(--lc-icon-instagram) center / contain no-repeat;
}

.wp-block-button.is-style-lc-btn-facebook .wp-block-button__link::before {
	-webkit-mask: var(--lc-icon-facebook) center / contain no-repeat;
	mask: var(--lc-icon-facebook) center / contain no-repeat;
}

/* Dunkler Button */
.wp-block-button.is-style-lc-dark .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-lc-dark .wp-block-button__link:hover,
.wp-block-button.is-style-lc-dark .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   10. Karten (farbige Info-Boxen)
   ========================================================================== */

.is-style-lc-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--wp--preset--spacing--40);
	text-align: center;
}

.is-style-lc-card .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

.is-style-lc-card > *:last-child {
	margin-bottom: 0;
}

/* Spaltenraster
   --------------------------------------------------------------------------
   Alle Spaltenzeilen laufen auf einem gemeinsamen Raster: `lc-cols-N` legt die
   Anzahl der Rasterspalten fest, `lc-span-K` lässt eine Spalte mehrere davon
   einnehmen. Dadurch beginnt eine Drittel-Spalte immer an derselben Stelle –
   gleich, ob die Zeile aus drei Dritteln oder aus einem Drittel und zwei
   Dritteln besteht. Mit Flexbox wäre das nicht möglich, weil dort die Anzahl
   der Zwischenräume die Spaltenbreite verschiebt.

   Das Raster verhindert zugleich, dass Spalten mit Innenabstand breiter
   ausfallen als Spalten ohne. */
@media (min-width: 782px) {
	.wp-block-columns.lc-cols-2,
	.wp-block-columns.lc-cols-3,
	.wp-block-columns.lc-cols-4,
	.wp-block-columns.lc-cols-5,
	.wp-block-columns.lc-cols-6,
	.wp-block-columns.is-style-lc-equal-columns {
		display: grid;
	}

	.wp-block-columns.lc-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-columns.lc-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wp-block-columns.lc-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.wp-block-columns.lc-cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.wp-block-columns.lc-cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	/* Ohne Angabe der Spaltenzahl: gleich breite Spalten. */
	.wp-block-columns.is-style-lc-equal-columns:not([class*="lc-cols-"]) {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}

	.wp-block-column.lc-span-2 {
		grid-column: span 2;
	}

	.wp-block-column.lc-span-3 {
		grid-column: span 3;
	}

	.wp-block-column.lc-span-4 {
		grid-column: span 4;
	}

	.wp-block-column.lc-span-5 {
		grid-column: span 5;
	}
}

/* Gleiche Höhe für Spalten in einer Reihe */
.wp-block-columns.is-style-lc-equal-height > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.wp-block-columns.is-style-lc-equal-height > .wp-block-column > * {
	flex: 1 1 auto;
}

/* Farbige Spalten mit Schaltfläche: Button bündig am unteren Rand. */
.wp-block-column.has-background {
	display: flex;
	flex-direction: column;
}

/* Die Schaltfläche sitzt am unteren Rand der Karte. Der Innenabstand sichert
   dabei den Mindestabstand zum Text – „margin-top: auto“ allein würde den
   Blockabstand aushebeln, sobald die Karte nicht höher ist als ihr Inhalt. */
.wp-block-column.has-background > .wp-block-buttons:last-child {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

.wp-block-column.has-background > *:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   11. Bild mit Bildunterschrift als Overlay
   ========================================================================== */

.wp-block-image.is-style-lc-caption-overlay {
	position: relative;
}

.wp-block-image.is-style-lc-caption-overlay figcaption {
	background-color: rgba(251, 247, 243, 0.7);
	bottom: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	left: 0;
	margin: 0;
	padding: 6px 18px;
	position: absolute;
	text-align: left;
}

@media (max-width: 600px) {
	.wp-block-image.is-style-lc-caption-overlay figcaption {
		font-size: var(--wp--preset--font-size--small);
		padding: 4px 12px;
	}
}

/* ==========================================================================
   12. Akkordeon (Details-Block)
   ========================================================================== */

.wp-block-details.is-style-lc-toggle {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--20);
}

.wp-block-details.is-style-lc-toggle summary {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	gap: 0.6em;
	line-height: 1.5;
	list-style: none;
}

.wp-block-details.is-style-lc-toggle summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-lc-toggle summary::before {
	color: var(--wp--preset--color--accent);
	content: "+";
	flex: 0 0 auto;
	font-size: 1.2em;
	line-height: 1.2;
	width: 0.8em;
}

.wp-block-details.is-style-lc-toggle[open] summary::before {
	content: "\2212";
}

.wp-block-details.is-style-lc-toggle > *:not(summary) {
	padding-left: 1.4em;
	padding-top: var(--wp--preset--spacing--20);
}

.wp-block-details.is-style-lc-toggle > *:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   13. Zitat / Testimonial
   ========================================================================== */

.is-style-lc-testimonial {
	text-align: center;
}

.lc-testimonial-text,
.is-style-lc-testimonial p:first-child {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	line-height: 1.5;
	margin-bottom: var(--wp--preset--spacing--30);
}

.is-style-lc-testimonial cite,
.lc-testimonial-author {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 700;
	letter-spacing: 1px;
	margin-bottom: 0;
}

/* ==========================================================================
   14. Carousel Slider Block – Anpassung an das Design
   ========================================================================== */

.wp-block-cb-carousel-v2 .cb-pagination {
	margin-top: var(--wp--preset--spacing--30);
	position: static;
}

.wp-block-cb-carousel-v2 .swiper-pagination-bullet,
.wp-block-cb-carousel-v2 .cb-pagination-bullet {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--primary);
	height: 10px;
	opacity: 1;
	width: 10px;
}

.wp-block-cb-carousel-v2 .swiper-pagination-bullet-active,
.wp-block-cb-carousel-v2 .cb-pagination-bullet.swiper-pagination-bullet-active {
	background-color: var(--wp--preset--color--primary);
}

.wp-block-cb-carousel-v2 .cb-button-next,
.wp-block-cb-carousel-v2 .cb-button-prev {
	color: var(--wp--preset--color--primary);
}

.wp-block-cb-carousel-v2 .cb-button-next:hover,
.wp-block-cb-carousel-v2 .cb-button-prev:hover {
	color: var(--wp--preset--color--accent);
}

/* Kundenstimmen: Slides gleich hoch, Inhalt vertikal zentriert. */
.lc-testimonial-slider .swiper-wrapper {
	align-items: center;
}

.lc-testimonial-slider .cb-slide > *:last-child {
	margin-bottom: 0;
}

/* Bild-Slider im Kopfbereich: Bilder füllen die Spalte vollständig. */
.lc-hero-slider .cb-slide,
.lc-hero-slider .wp-block-image,
.lc-hero-slider figure {
	height: 100%;
	margin: 0;
}

.lc-hero-slider .wp-block-image img {
	display: block;
	width: 100%;
}

/* ==========================================================================
   15. Formulare (Contact Form 7)
   ========================================================================== */

.wpcf7 label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: var(--wp--preset--spacing--20);
}

.wpcf7 .req {
	color: var(--wp--preset--color--accent);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	margin-top: 6px;
	padding: 12px 14px;
	width: 100%;
}

.wpcf7 input[type="submit"] {
	background-color: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--lc-radius);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	padding: 13px 29px;
	transition: background-color var(--lc-transition);
	width: auto;
}

.wpcf7 input[type="submit"]:hover {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* Formular auf dunklem Grund */
.has-primary-background-color .wpcf7 label,
.has-dark-background-color .wpcf7 label {
	color: var(--wp--preset--color--base);
}

/* ==========================================================================
   16. Icon-Block
   ========================================================================== */

.lc-icon {
	line-height: 0;
}

.lc-icon.has-text-align-center {
	text-align: center;
}

.lc-icon.has-text-align-left {
	text-align: left;
}

.lc-icon.has-text-align-right {
	text-align: right;
}

.lc-icon svg {
	display: inline-block;
	vertical-align: middle;
}

.lc-icon__circle {
	align-items: center;
	border-radius: 50%;
	color: var(--wp--preset--color--base);
	display: inline-flex;
	justify-content: center;
}

/* ==========================================================================
   17. Hilfsklassen
   ========================================================================== */

.lc-full-bleed-image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.lc-no-bottom-margin > *:last-child {
	margin-bottom: 0;
}
