/*
 * Nur was theme.json nicht ausdrücken kann: Hover-Zustände ausserhalb von
 * Links und Buttons, das Megamenü, Slider, Karten-Chevrons, das Formular und
 * die Einblend-Animationen. Alle Werte stammen aus dem Figma-Rahmen (1920).
 */

:root {
	--loewe-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 22'%3E%3Cpath d='M2.5 2.5l8 8.5-8 8.5' stroke='%23172125' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--loewe-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30'%3E%3Cpath d='M2 2l22 13L2 28z' fill='%23172125'/%3E%3C/svg%3E");
	--loewe-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'%3E%3Cpath d='M2 1.5L7 7l-5 5.5' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Gelbe Hervorhebung im Text: der Editor setzt dafür ein <mark>. */
mark.has-inline-color {
	background: transparent;
}

/* ---- Buttons ---- */

.wp-block-button__link {
	transition: background-color .2s, color .2s, border-color .2s, transform .15s;
}

.wp-block-button__link:active,
.wp-block-read-more:active {
	transform: scale(.97);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--wp--preset--color--weiss);
	border-color: var(--wp--preset--color--dunkel);
	color: var(--wp--preset--color--dunkel);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--dunkel);
	border-color: var(--wp--preset--color--dunkel);
	color: var(--wp--preset--color--weiss);
}

.wp-block-button.is-style-dunkel .wp-block-button__link {
	background: var(--wp--preset--color--dunkel);
	border-color: var(--wp--preset--color--dunkel);
	color: var(--wp--preset--color--weiss);
}

.wp-block-button.is-style-dunkel .wp-block-button__link:hover,
.wp-block-button.is-style-dunkel .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--dunkel-hover);
	border-color: var(--wp--preset--color--dunkel-hover);
}

.wp-block-button.is-style-weiss .wp-block-button__link {
	background: var(--wp--preset--color--weiss);
	border-color: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--dunkel);
}

.wp-block-button.is-style-weiss .wp-block-button__link:hover,
.wp-block-button.is-style-weiss .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--gelb);
	border-color: var(--wp--preset--color--gelb);
}

.wp-block-read-more:hover,
.wp-block-read-more:focus-visible {
	background: var(--wp--preset--color--gelb-hover);
	color: var(--wp--preset--color--dunkel);
}

/* Farbwechsel allein ist kein ausreichender Fokus-Indikator. */
.wp-block-button__link:focus-visible,
.wp-block-read-more:focus-visible,
.loewe-nav a:focus-visible,
.loewe-nav button:focus-visible {
	outline: 2px solid var(--wp--preset--color--gelb-dunkel);
	outline-offset: 3px;
}

/* ---- Kopfbereich ---- */

.loewe-header {
	position: relative;
	z-index: 30;
}

.loewe-header .wp-block-site-logo img {
	width: clamp(150px, 11.7vw, 225px);
}

.loewe-header__buttons .wp-block-button__link {
	min-width: clamp(110px, 10.4vw, 200px);
	padding-left: 20px;
	padding-right: 20px;
}

/* Burger bis 1100px, nicht nur bis 600px wie bei Core. */
@media (min-width: 600px) and (max-width: 1099.98px) {
	.loewe-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.loewe-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 1099.98px) {
	.loewe-nav {
		order: 3;
	}

	.loewe-header__buttons .wp-block-button__link {
		min-width: 0;
	}

	.loewe-nav .wp-block-navigation__responsive-container.is-menu-open,
	.loewe-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
	.loewe-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
		font-size: var(--wp--preset--font-size--menue);
	}

	.loewe-nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 120px var(--wp--custom--gutter) 40px;
	}

	.loewe-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		padding-left: 20px;
	}
}

@media (max-width: 599.98px) {
	.loewe-header__buttons .wp-block-button.is-style-dunkel {
		display: none;
	}
}

/* Chevron neben «Dienstleistungen» dreht sich, Label wird gelb, solange offen. */
.loewe-nav .wp-block-navigation__submenu-icon svg {
	transition: transform .2s;
}

.loewe-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
	color: var(--wp--preset--color--gelb);
}

.loewe-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

/* ---- Megamenü (ab 1100px) ----
 * Die Selektoren tragen .loewe-header voran, weil Core das Untermenü mit
 * vier Klassen tief positioniert (absolut unter dem Menüpunkt, 200px breit).
 */

@media (min-width: 1100px) {
	/* Das Menü sitzt im Entwurf direkt neben dem Logo, die Buttons rechts. */
	.loewe-header .loewe-nav {
		margin-left: clamp(10px, 1.5vw, 30px);
		margin-right: auto;
	}

	/* Das Menü ist Teil des Kopfbereichs, nicht des Navigationsblocks. */
	.loewe-header .wp-block-group,
	.loewe-header .loewe-nav,
	.loewe-header .loewe-nav .wp-block-navigation__responsive-container:not(.is-menu-open),
	.loewe-header .loewe-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
	.loewe-header .loewe-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
	.loewe-header .loewe-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content,
	.loewe-header .loewe-nav .wp-block-navigation__container,
	.loewe-header .loewe-nav .wp-block-navigation-item.has-child {
		position: static;
	}

	.loewe-header .loewe-nav .has-child > .wp-block-navigation__submenu-container,
	.loewe-header .loewe-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		position: absolute;
		top: 120px;
		left: 0;
		right: 0;
		width: auto;
		min-width: 0;
		height: 362px;
		margin: 0;
		padding: 36px max(clamp(16px, 2.6vw, 50px), calc((100% - 1818px) / 2)) 0 max(clamp(12px, 2.35vw, 51px), calc((100% - 1818px) / 2));
		box-sizing: border-box;
		background: var(--wp--preset--color--weiss);
		color: var(--wp--preset--color--dunkel);
		border: 0;
		box-shadow: 0 30px 40px -30px rgba(23, 33, 37, .18);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		overflow: visible;
	}

	.loewe-header .loewe-nav .has-child > .wp-block-navigation__submenu-container {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity .38s cubic-bezier(.4, 0, .6, 1), transform .38s cubic-bezier(.4, 0, .6, 1), visibility 0s .4s;
	}

	.loewe-header .loewe-nav .has-child > .wp-block-navigation__submenu-container::before {
		content: "Unser Angebot";
		display: block;
		margin-bottom: 28px;
		color: var(--wp--preset--color--gelb);
		font-size: var(--wp--preset--font-size--button);
		font-weight: 600;
	}

	.loewe-header .loewe-nav .has-child > .wp-block-navigation__submenu-container::after {
		content: "";
		position: absolute;
		top: 28px;
		right: max(clamp(16px, 2.6vw, 50px), calc((100% - 1818px) / 2));
		width: min(759px, 42%);
		height: 262px;
		border-radius: var(--wp--custom--radius--karte);
		background: url("../img/menue-dienstleistungen.webp") center / cover;
	}

	.loewe-header .loewe-nav .has-child > .wp-block-navigation__submenu-container > li {
		font-size: var(--wp--preset--font-size--menue);
		font-weight: 600;
		line-height: 40px;
		transform: translateX(-18px);
		opacity: 0;
		transition: transform .25s, opacity .25s, color .2s;
	}

	/* Sechs Klassen, weil Core die Innenabstände mit fünf setzt. */
	.loewe-header .loewe-nav .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 0;
		transition: transform .25s, color .2s;
	}

	.loewe-header .loewe-nav .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
		transform: translateX(6px);
	}

	.loewe-header .loewe-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .55s var(--wp--custom--ease), transform .55s var(--wp--custom--ease), visibility 0s;
	}

	.loewe-header .loewe-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container > li {
		opacity: 1;
		transform: none;
		transition: transform .55s var(--wp--custom--ease) var(--loewe-delay, 0s), opacity .55s var(--wp--custom--ease) var(--loewe-delay, 0s), color .2s;
	}

	.loewe-header .loewe-nav .has-child > .wp-block-navigation__submenu-container > li:nth-child(1) { --loewe-delay: .06s; }
	.loewe-header .loewe-nav .has-child > .wp-block-navigation__submenu-container > li:nth-child(2) { --loewe-delay: .11s; }
	.loewe-header .loewe-nav .has-child > .wp-block-navigation__submenu-container > li:nth-child(3) { --loewe-delay: .16s; }
	.loewe-header .loewe-nav .has-child > .wp-block-navigation__submenu-container > li:nth-child(4) { --loewe-delay: .21s; }
	.loewe-header .loewe-nav .has-child > .wp-block-navigation__submenu-container > li:nth-child(5) { --loewe-delay: .26s; }

	/* Abgedunkelte Seite hinter dem offenen Menü; ein Klick darauf nimmt dem
	   Menü den Fokus, und Core schliesst es. */
	body::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 20;
		background: rgba(23, 33, 37, .55);
		backdrop-filter: blur(2px);
		opacity: 0;
		pointer-events: none;
		transition: opacity .42s;
	}

	body:has(.loewe-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"])::after {
		opacity: 1;
		pointer-events: auto;
	}
}

/* ---- Banner (Startseite, Unterseiten, CTA) ---- */

.loewe-hero .wp-block-cover {
	border-radius: var(--wp--custom--radius--gross);
	overflow: hidden;
}

.loewe-hero .wp-block-cover__inner-container {
	width: 100%;
}

/* Startseite: die dunkle Fläche beginnt 293px unter der Bannerkante. */
.loewe-hero-band {
	background: linear-gradient(var(--wp--preset--color--weiss) 0, var(--wp--preset--color--weiss) 293px, var(--wp--preset--color--dunkel) 293px);
}

/* ---- Dienstleistungs-Karten ---- */

.loewe-karte {
	position: relative;
	transition: transform .35s var(--wp--custom--ease), background-color .2s, box-shadow .35s;
}

.loewe-karte:hover {
	background-color: var(--wp--preset--color--gelb-karte) !important;
	transform: translateY(-6px);
	box-shadow: 0 18px 40px -18px rgba(23, 33, 37, .45);
}

.loewe-karte::after {
	content: "";
	position: absolute;
	right: 52px;
	bottom: 42px;
	width: 13px;
	height: 22px;
	background: var(--loewe-chevron) no-repeat center / contain;
}

/* Die ganze Karte ist der Link. */
.loewe-karte .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.loewe-karte__kopf .wp-block-separator {
	flex: 1 1 auto;
	margin: 0;
	border-bottom-width: 2px;
}

.loewe-karte__text {
	max-width: 400px;
}

/* ---- Slider (Kundenstimmen): Spur mit Scroll-Snap, Pfeile links und rechts ---- */

.loewe-slider__spur {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 700px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.loewe-slider__spur::-webkit-scrollbar {
	display: none;
}

.loewe-slider__spur > * {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.loewe-slider__pfeil {
	flex: none;
	width: 47px;
	height: 47px;
	padding: 0;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--dunkel);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: color .2s;
}

.loewe-slider__pfeil::before {
	content: "";
	width: 9px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--loewe-pfeil) no-repeat center / contain;
	mask: var(--loewe-pfeil) no-repeat center / contain;
}

.loewe-slider__pfeil--zurueck::before {
	transform: scaleX(-1);
}

.loewe-slider__pfeil:disabled {
	color: var(--wp--preset--color--inaktiv);
	cursor: default;
}

/* ---- News-Karten ----
 * Zeilenabstand der Raster: der Block kennt nur einen Abstand für beide
 * Richtungen (ein Objekt mit top/left ergibt eine ungültige Spaltenregel).
 */

.loewe-news .wp-block-post-template {
	row-gap: var(--wp--preset--spacing--50);
}

.loewe-team .wp-block-post-template {
	row-gap: var(--wp--preset--spacing--30);
}

.loewe-karten .wp-block-post-template {
	row-gap: var(--wp--preset--spacing--20);
}

/* Die Rundung liegt auf dem <img>. Beim Vergrössern wächst es über die Figure
   hinaus, darum braucht die Figure dieselbe Rundung, sonst werden die Ecken eckig. */
.loewe-news .wp-block-post-featured-image,
.loewe-team .wp-block-post-featured-image,
.loewe-news-karte .wp-block-post-featured-image {
	overflow: hidden;
	isolation: isolate;
}

.loewe-news .wp-block-post-featured-image {
	border-radius: var(--wp--custom--radius--gross);
}

.loewe-team .wp-block-post-featured-image {
	border-radius: var(--wp--custom--radius--team);
}

.loewe-news-karte .wp-block-post-featured-image {
	border-radius: var(--wp--custom--radius--vorschau);
}

.loewe-news .wp-block-post-featured-image img,
.loewe-team .wp-block-post-featured-image img {
	transition: transform .8s var(--wp--custom--ease);
}

.loewe-news li:hover .wp-block-post-featured-image img,
.loewe-team li:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.loewe-news .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
}

.loewe-news .wp-block-read-more {
	margin-top: auto;
}

.loewe-news .wp-block-post-excerpt {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Zwei Zeilen Auszug wie im Entwurf, damit die Buttons auf einer Höhe liegen. */
.loewe-news .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.loewe-news .wp-block-post-excerpt {
	max-width: 520px;
}

.loewe-news .wp-block-post-excerpt p,
.loewe-team .wp-block-post-excerpt p {
	margin: 0;
}

/* Die Karte «Löwe News» auf der Startseite */
.loewe-news-karte {
	position: relative;
	transition: transform .35s var(--wp--custom--ease), box-shadow .35s;
}

.loewe-news-karte:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
}

.loewe-news-karte::after {
	content: "";
	position: absolute;
	right: 50px;
	bottom: 42px;
	width: 13px;
	height: 22px;
	background: var(--loewe-chevron) no-repeat center / contain;
}

.loewe-news-karte .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.loewe-news-karte .wp-block-post-featured-image {
	flex: 0 0 181px;
}

/* ---- Filter-Pills im News-Archiv ---- */

.loewe-filter li,
.loewe-filter .wp-block-term-name {
	margin: 0;
}

.loewe-filter a {
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 40px;
	border: 2px solid var(--wp--preset--color--dunkel);
	border-radius: 999px;
	transition: background-color .2s, color .2s, border-color .2s;
}

.loewe-filter a:hover {
	border-color: var(--wp--preset--color--gelb);
	color: var(--wp--preset--color--dunkel);
}

.loewe-filter a[aria-current="page"],
body.blog .loewe-filter__alle a {
	background: var(--wp--preset--color--dunkel);
	color: var(--wp--preset--color--weiss);
}

/* ---- Dienstleistung: Themenliste auf Dunkel ---- */

.loewe-themen {
	list-style: none;
}

.loewe-themen li {
	padding: 15px 0 14px;
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.loewe-themen li:last-child {
	border-bottom: 0;
}

/* ---- Zurück-Link ---- */

.loewe-zurueck a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

.loewe-zurueck a::before {
	content: "";
	width: 6px;
	height: 10px;
	background: currentColor;
	-webkit-mask: var(--loewe-pfeil) no-repeat center / contain;
	mask: var(--loewe-pfeil) no-repeat center / contain;
	transform: scaleX(-1);
}

.loewe-zurueck a:hover {
	color: var(--wp--preset--color--gelb);
}

/* ---- Partner-Logos ---- */

.loewe-partner img {
	transition: transform .3s;
}

.loewe-partner a:hover img {
	transform: scale(1.06);
}

/* ---- Fussbereich ---- */

.loewe-footer a {
	color: var(--wp--preset--color--gelb);
}

.loewe-footer__meta a {
	color: inherit;
	text-decoration: none;
}

.loewe-footer__meta a:hover {
	color: var(--wp--preset--color--gelb);
}

@media (max-width: 1099.98px) {
	.loewe-footer .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.loewe-footer .wp-block-column {
		flex-basis: calc(50% - 20px) !important;
	}
}

/* ---- Kontaktformular (Forminator, Design «Keines») ---- */

/* Doppelte Klasse: Core setzt Kindern des Layouts margin-block-end: 0. Platz für den absolut gesetzten Senden-Button. */
.loewe-formular.loewe-formular {
	position: relative;
	margin-block-end: 76px;
}

.loewe-formular .forminator-row {
	margin: 0 0 20px;
}

.loewe-formular .forminator-row:last-of-type {
	margin-bottom: 0;
}

.loewe-formular .forminator-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.loewe-formular input.forminator-input,
.loewe-formular textarea.forminator-textarea {
	width: 100%;
	box-sizing: border-box;
	height: 61px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--wp--custom--radius--eingabe);
	background: var(--wp--preset--color--weiss);
	font: 400 var(--wp--preset--font-size--text) / 1.2 var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--dunkel);
}

.loewe-formular textarea.forminator-textarea {
	height: 238px;
	padding: 22px 26px;
	resize: vertical;
}

.loewe-formular ::placeholder {
	color: var(--wp--preset--color--gedaempft);
	opacity: 1;
}

.loewe-formular input:focus,
.loewe-formular textarea:focus {
	outline: 2px solid var(--wp--preset--color--gelb);
}

.loewe-formular .forminator-error-message {
	margin-top: 6px;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	color: #b3261e;
}

.loewe-formular .forminator-button-submit {
	position: absolute;
	top: calc(100% + 27px);
	left: 0;
	min-width: 151px;
	padding: 14.5px 40px;
	border: 2px solid var(--wp--preset--color--gelb);
	border-radius: 999px;
	background: var(--wp--preset--color--gelb);
	color: var(--wp--preset--color--dunkel);
	font: 600 var(--wp--preset--font-size--button) / 1 var(--wp--preset--font-family--inter);
	cursor: pointer;
	transition: background-color .2s, transform .15s;
}

.loewe-formular .forminator-button-submit:hover {
	background: var(--wp--preset--color--gelb-hover);
	border-color: var(--wp--preset--color--gelb-hover);
}

.loewe-formular .forminator-button-submit:active {
	transform: scale(.97);
}

.loewe-formular .forminator-response-message {
	margin-top: 20px;
	font-weight: 500;
}

/* ---- Einblenden beim Scrollen ----
 * Versteckt wird nur mit JavaScript (Klasse loewe-js auf <html>) und nur,
 * wenn keine reduzierte Bewegung gewünscht ist. Ohne JS ist alles sichtbar.
 */

@media (prefers-reduced-motion: no-preference) {
	.loewe-js .loewe-reveal:not(.is-visible),
	.loewe-js .loewe-stagger > :not(.is-visible) {
		opacity: 0;
		transform: translateY(32px);
	}

	.loewe-js .loewe-reveal--side:not(.is-visible),
	.loewe-js .loewe-stagger--side > :not(.is-visible) {
		transform: translateX(-18px);
	}

	.loewe-js .loewe-reveal--fade:not(.is-visible) {
		transform: none;
	}

	.loewe-js .loewe-reveal,
	.loewe-js .loewe-stagger > * {
		transition: opacity .9s ease var(--loewe-delay, 0s), transform .9s var(--wp--custom--ease) var(--loewe-delay, 0s);
	}

	/* Sterne springen herein. */
	.loewe-js .loewe-sterne svg {
		opacity: 0;
		transform: scale(.4) rotate(-25deg);
		transition: opacity .6s cubic-bezier(.34, 1.56, .64, 1) var(--loewe-delay, 0s), transform .6s cubic-bezier(.34, 1.56, .64, 1) var(--loewe-delay, 0s);
	}

	.loewe-js .loewe-sterne.is-visible svg {
		opacity: 1;
		transform: none;
	}

	/* Banner-Bild zoomt langsam heraus. */
	.loewe-hero .wp-block-cover__image-background {
		animation: loewe-zoom 1.8s var(--wp--custom--ease) both;
	}

	/* Buttons fallen beim Laden ein, die Navigation blendet nur ein: jede
	   Transformation auf einem Vorfahren des Untermenüs oder des mobilen
	   Overlays würde deren absolute bzw. fixe Position auf sich beziehen. */
	.loewe-header__buttons {
		animation: loewe-drop .55s var(--wp--custom--ease) .1s both;
	}

	.loewe-nav .wp-block-navigation__container {
		animation: loewe-fade .55s var(--wp--custom--ease) both;
	}

}

@keyframes loewe-zoom {
	from { transform: scale(1.08); }
	to { transform: none; }
}

@keyframes loewe-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes loewe-drop {
	from { opacity: 0; transform: translateY(-12px); }
	to { opacity: 1; transform: none; }
}

/* ---- Team: Telefon und E-Mail sind dunkel und fett, keine gelben Links ---- */

.loewe-team .wp-block-post-template a {
	color: inherit;
	text-decoration: none;
}

.loewe-team .wp-block-post-template a:hover {
	color: var(--wp--preset--color--gelb-dunkel);
}

/* ---- Fernhilfe: Download-Buttons, Preiszeilen, Video ---- */

.loewe-os .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 220px;
	max-width: 100%;
	height: 90px;
	padding: 0;
	border-radius: var(--wp--custom--radius--gross);
	font-size: var(--wp--preset--font-size--karte);
	font-weight: 400;
	line-height: 1;
	transition: transform .35s var(--wp--custom--ease), background-color .2s, box-shadow .35s;
}

.loewe-os .wp-block-button__link::before {
	content: "";
	width: 29px;
	height: 29px;
	background: url(../img/windows.png) no-repeat center / contain;
}

.loewe-os--mac .wp-block-button__link {
	gap: 4px;
	font-size: 30px;
}

.loewe-os--mac .wp-block-button__link::before {
	width: 23px;
	height: 27px;
	margin-top: -4px;
	background-image: url(../img/mac.png);
}

.loewe-os .wp-block-button__link:hover,
.loewe-os .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--gelb-karte);
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -18px rgba(23, 33, 37, .45);
}

/* Bestätigung vor dem Download; theme.js baut den Dialog und startet den Download erst nach «Akzeptieren». */
.loewe-dialog {
	box-sizing: border-box;
	width: max-content;
	max-width: calc(100vw - 32px);
	padding: var(--wp--preset--spacing--40);
	border: 0;
	border-radius: var(--wp--custom--radius--gross);
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--dunkel);
}

.loewe-dialog::backdrop {
	background: rgba(23, 33, 37, .6);
}

.loewe-dialog h2 {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: inherit;
	font-size: var(--wp--preset--font-size--menue);
	font-weight: 500;
}

.loewe-dialog p {
	margin: 0 0 8px;
}

.loewe-dialog a {
	color: inherit;
	text-decoration: underline;
}

.loewe-dialog form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: var(--wp--preset--spacing--30);
}

.loewe-dialog button {
	cursor: pointer;
}

.loewe-preis {
	position: relative;
	padding-left: 34px;
}

.loewe-preis::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	background: url(../img/preis.png) no-repeat center / contain;
}

.loewe-preis strong {
	color: var(--wp--preset--color--gelb);
	font-weight: 600;
}

/* Das Video ist ein Vorschaubild mit Link; theme.js tauscht es beim Klick gegen
   den YouTube-Player (youtube-nocookie), vorher werden keine Cookies gesetzt. */
.loewe-video a {
	position: relative;
	display: block;
	border-radius: var(--wp--custom--radius--gross);
	overflow: hidden;
	isolation: isolate;
}

.loewe-video img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform .8s var(--wp--custom--ease);
}

.loewe-video a:hover img {
	transform: scale(1.015);
}

.loewe-video a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 96px;
	height: 96px;
	translate: -50% -50%;
	border-radius: 50%;
	background: var(--wp--preset--color--gelb) var(--loewe-play) no-repeat 56% 50% / 30px;
	box-shadow: 0 18px 40px -18px rgba(23, 33, 37, .6);
	transition: transform .35s var(--wp--custom--ease);
}

.loewe-video a:hover::after {
	transform: scale(1.08);
}

.loewe-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--wp--custom--radius--gross);
}

/* ---- Kundenstimme: Sterne ---- */

.loewe-sterne {
	display: flex;
	justify-content: center;
	gap: 6px;
}

.loewe-sterne svg {
	display: block;
}

/* Forminator legt alle Felder in eine Zeile; hier stehen sie untereinander.
   Die Selektoren wiederholen Forminators eigene, damit sie das Grid-CSS schlagen. */
.loewe-formular .forminator-ui.forminator-custom-form[data-grid] .forminator-row {
	display: block;
	margin-right: 0;
	margin-left: 0;
}

.loewe-formular .forminator-ui.forminator-custom-form[data-grid] .forminator-row .forminator-col {
	width: 100%;
	max-width: none;
	flex: none;
	margin: 0 0 20px;
	padding: 0;
}

.loewe-formular .forminator-ui.forminator-custom-form[data-grid] .forminator-row.forminator-row-last .forminator-col {
	margin: 0;
}

/* ---- Mobil (bis 768px): engere Abstände, kompaktere Karten und Menüs.
 * Sektionsabstände kommen aus den fluiden Presets 60/70 (40–100 / 48–130px);
 * hier nur, was in den Blöcken als feste Pixel steht.
 */

@media (max-width: 767.98px) {
	/* Kopf: niedriger, Kontakt direkt neben dem Burger. */
	.loewe-header > .wp-block-group {
		min-height: 88px !important;
		gap: 10px !important;
	}

	/* Zwei Klassen, weil Core den Flex-Kindern `margin: 0` gibt. */
	.loewe-header .loewe-header__buttons {
		margin-left: auto;
	}

	main.wp-block-group {
		margin-top: 0;
	}

	.loewe-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 22px;
	}

	.loewe-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		padding-top: 10px;
		gap: 14px;
	}

	/* Dienstleistungs-Karten und die Karte «Löwe News» */
	.loewe-karte {
		padding: 24px 24px 44px !important;
		min-height: 0 !important;
	}

	.loewe-karte .wp-block-post-title {
		margin-top: 30px !important;
	}

	.loewe-karte::after {
		right: 26px;
		bottom: 26px;
	}

	.loewe-news-karte {
		padding: 24px !important;
		min-height: 0 !important;
	}

	.loewe-news-karte::after {
		right: 24px;
		bottom: 24px;
	}

	/* Filter-Pills in einer umbrechenden Reihe, kleiner */
	.loewe-filter .wp-block-terms-query,
	.loewe-filter .wp-block-term-template {
		display: contents;
	}

	.loewe-filter a {
		height: 42px;
		padding: 0 22px;
	}

	/* Kundenstimmen: kleine Pfeile, mehr Platz für den Text */
	.loewe-slider__leiste {
		gap: 8px !important;
	}

	.loewe-slider__pfeil {
		width: 36px;
		height: 36px;
	}

	/* «Brauchen Sie Hilfe?»: dunkler Schleier, damit der Text lesbar bleibt */
	.loewe-cta .wp-block-cover__background {
		background-color: var(--wp--preset--color--dunkel);
		opacity: .45;
	}

	/* Mobiles Menü: Schliessen-Kreuz sitzt an der Stelle des Burgers (Kopf 88px, Icon bei 32px). */
	.loewe-nav .wp-block-navigation__responsive-container.is-menu-open {
		padding-top: 32px;
	}

	/* Kein zusätzlicher Blockabstand zwischen Banner und erster Sektion */
	.loewe-hero + * {
		margin-block-start: 0 !important;
	}

	/* Partnerlogos: zentriert, zwei pro Zeile */
	.loewe-partner .wp-block-group {
		justify-content: center;
	}

	.loewe-partner .wp-block-image {
		flex: 0 0 calc(50% - var(--wp--preset--spacing--30) / 2);
		display: flex;
		justify-content: center;
	}

	/* News-Karten: ohne Browser-Standardabstände unter Titel und Auszug */
	.loewe-news .wp-block-post-template > li > * {
		margin-block-end: 0;
	}

	/* «Teil der»: die Wortmarke rutscht nicht in die Textzeile */
	p.has-sektion-font-size + .wp-block-image {
		margin-top: 0 !important;
	}

	/* Fernhilfe-Banner: niedriger und auf den helleren Bildteil ausgerichtet */
	.loewe-hero--fernhilfe .wp-block-cover {
		min-height: 260px !important;
	}

	.loewe-hero--fernhilfe .wp-block-cover__image-background {
		object-position: 82% 50%;
	}
}

/* ---- CookieYes (Gratisversion): Markenfarben statt Blau ----
   Das Plugin setzt seine Farben als Inline-Stil, darum !important. */

.cky-btn.cky-btn-accept,
.cky-btn.cky-btn-reject,
.cky-btn.cky-btn-preferences {
	background-color: var(--wp--preset--color--gelb) !important;
	border-color: var(--wp--preset--color--gelb) !important;
	color: var(--wp--preset--color--dunkel) !important;
}

.cky-btn.cky-btn-accept:hover,
.cky-btn.cky-btn-reject:hover,
.cky-btn.cky-btn-preferences:hover {
	background-color: var(--wp--preset--color--gelb-hover) !important;
	border-color: var(--wp--preset--color--gelb-hover) !important;
	opacity: 1;
}

/* Gelb auf Weiss ist als Schrift zu schwach, darum dunkel wie der Outline-Button der Seite. */
.cky-btn.cky-btn-customize,
.cky-show-desc-btn,
.cky-notice-des a,
.cky-preference-content-wrapper a {
	border-color: var(--wp--preset--color--dunkel) !important;
	color: var(--wp--preset--color--dunkel) !important;
}

.cky-switch input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--gelb-dunkel) !important;
}

.cky-btn-revisit-wrapper {
	background-color: var(--wp--preset--color--dunkel) !important;
}