/* Footer. Farben und Schrift aus theme.json, Abstand auf der 8-px-Skala.
   Mobilgrenze 1023 px, wie der übrige Shop. */

/* Newsletter sitzt über dem Footer. Klaviyo füllt das Div erst spät; leer nimmt es keinen Platz ein.
   Astra floatet #primary im selben Container. Ohne clear beginnen Newsletter und Footer oben
   hinter dem Inhalt, bis Klaviyo das Formular einsetzt, und das Beige scheint über dem ersten Block durch. */
.dm-newsletter {
	clear: both;
	width: min(1400px, calc(100% - var(--wp--preset--spacing--40, 32px)));
	margin-inline: auto;
}

.dm-newsletter:has(.klaviyo-form:not(:empty)) {
	position: relative;
	margin-top: var(--wp--preset--spacing--40, 32px);
	margin-bottom: var(--wp--preset--spacing--50, 48px);
	padding: var(--wp--preset--spacing--20, 16px);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card, 12px);
	background-color: var(--wp--preset--color--dm-off-white, #f3f1ee);
	background-image: url("/wp-content/uploads/2025/07/mood-muster-skzizze.jpg");
	background-position: center right;
	background-size: cover;
	background-repeat: no-repeat;
}

.dm-newsletter .klaviyo-form-YnJTZL {
	max-width: 50%;
}

.dm-footer {
	clear: both;
	background: var(--wp--preset--color--dm-off-white, #f3f1ee);
	color: var(--wp--preset--color--dm-black, #030300);
	font-family: var(--wp--preset--font-family--dm-body, "Lato", sans-serif);
	font-size: var(--wp--preset--font-size--body, 16px);
	margin: 0;
	width: 100%;
}

/* Der Footer steht ausserhalb von .ast-container (astra_footer_before), deshalb ist
   width 100% die Seite und nicht das Inhaltslayout. Der Innenblock bleibt bei 1400 px. */
.dm-footer__inner {
	width: min(1400px, calc(100% - var(--wp--preset--spacing--40, 32px)));
	margin-inline: auto;
}

.dm-footer > .dm-footer__inner {
	padding-top: var(--wp--preset--spacing--40, 32px);
}

.dm-footer * {
	box-sizing: border-box;
}

.dm-footer p {
	margin: 0;
}

.dm-footer a {
	color: inherit;
	text-decoration: none;
}

.dm-footer a:hover,
.dm-footer a:focus-visible {
	color: var(--wp--preset--color--dm-teal, #005b4a);
}

.dm-footer :focus-visible {
	outline: 2px solid var(--wp--preset--color--dm-teal, #005b4a);
	outline-offset: 2px;
}

.dm-footer__contact {
	margin: 0;
	padding: var(--wp--preset--spacing--30, 24px) var(--wp--preset--spacing--40, 32px);
	background: var(--wp--preset--color--dm-white, #fff);
	border: var(--wp--custom--border--subtle, 1px solid rgba(129, 112, 114, 0.2));
	border-radius: var(--wp--custom--radius--card, 12px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 16px) var(--wp--preset--spacing--40, 32px);
}

.dm-footer__contact-avatar {
	display: block;
	width: 72px;
	height: 72px;
	flex: 0 0 72px;
	object-fit: contain;
}

.dm-footer__contact-intro {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10, 8px);
}

.dm-footer__contact-link a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10, 8px);
}

.dm-footer__icon {
	display: block;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.dm-footer__contact-title {
	font-family: var(--wp--preset--font-family--dm-heading, "Poppins", sans-serif);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-lg, 18px);
}

.dm-footer__contact-hours {
	font-size: var(--wp--preset--font-size--body-sm, 14px);
	color: var(--wp--preset--color--dm-anthrazit, #414141);
}

.dm-footer__contact-link {
	font-family: var(--wp--preset--font-family--dm-heading, "Poppins", sans-serif);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-lg, 18px);
}

.dm-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--50, 48px);
	padding: var(--wp--preset--spacing--50, 48px) 0 var(--wp--preset--spacing--40, 32px);
}

.dm-footer__main > * {
	min-width: 0;
}

.dm-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 16px);
}

.dm-footer__claim {
	font-family: var(--wp--preset--font-family--dm-heading, "Poppins", sans-serif);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--heading-sm, 28px);
	line-height: 1.25;
}

.dm-footer__text {
	font-size: var(--wp--preset--font-size--body, 16px);
	color: var(--wp--preset--color--dm-anthrazit, #414141);
}

.dm-footer__assurance {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 16px);
	padding-top: var(--wp--preset--spacing--20, 16px);
	border-top: var(--wp--custom--border--subtle, 1px solid rgba(129, 112, 114, 0.2));
}

.dm-footer__guarantee {
	--dm-footer-check: 16px;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10, 8px);
	font-size: var(--wp--preset--font-size--body, 16px);
}

.dm-footer__guarantee-title {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10, 8px);
	font-weight: 700;
}

.dm-footer__icon--check {
	width: var(--dm-footer-check);
	height: var(--dm-footer-check);
	color: var(--wp--preset--color--dm-teal, #005b4a);
}

.dm-footer__guarantee-link {
	padding-inline-start: calc(var(--dm-footer-check) + var(--wp--preset--spacing--10, 8px));
}

.dm-footer__guarantee-link a {
	color: var(--wp--preset--color--dm-teal, #005b4a);
	font-weight: 700;
}

.dm-footer__trust {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 16px);
	flex-wrap: wrap;
}

.dm-footer__award-link {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.dm-footer__award {
	display: block;
	width: 72px;
	height: auto;
}

.dm-footer__reviews {
	max-width: 100%;
}

.dm-footer__col-stack {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40, 32px);
}

.dm-footer__col > summary,
.dm-footer p.dm-footer__heading {
	font-family: var(--wp--preset--font-family--dm-heading, "Poppins", sans-serif);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium, 20px);
	margin-bottom: var(--wp--preset--spacing--20, 16px);
}

/* Theme setzt auf Flow-Blöcken margin-block-start: spacing-70 (96 px). */
.dm-footer .wp-block-navigation,
.dm-footer .wp-block-social-links,
.dm-footer .wp-block-button {
	margin-block: 0;
}

.dm-footer__nav .wp-block-navigation__container,
.dm-footer__legal-nav .wp-block-navigation__container,
.dm-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dm-footer__nav .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10, 8px);
}

.dm-footer__nav .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--body-sm, 14px);
	line-height: 1.25;
}

.dm-footer__social {
	gap: var(--wp--preset--spacing--20, 16px);
}

/* Markenfarben des Core-Blocks. :where() im Core hat keine Spezifität und verliert hier. */
.dm-footer__social .wp-social-link {
	border-radius: 999px;
}

.dm-footer__social .wp-social-link-instagram {
	background-color: #f00075;
}

.dm-footer__social .wp-social-link-pinterest {
	background-color: #e60122;
}

.dm-footer__social .wp-social-link-facebook {
	background-color: #0866ff;
}

.dm-footer__social .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--preset--spacing--50, 48px);
	height: var(--wp--preset--spacing--50, 48px);
	padding: var(--wp--preset--spacing--10, 8px);
	color: var(--wp--preset--color--dm-white, #fff);
	border-radius: 999px;
}

.dm-footer__social .wp-social-link a:hover,
.dm-footer__social .wp-social-link a:focus-visible {
	color: var(--wp--preset--color--dm-white, #fff);
}

.dm-footer__social .wp-social-link svg {
	width: 24px;
	height: 24px;
	fill: currentcolor;
}

@media (min-width: 1024px) {
	.dm-footer__col > summary {
		list-style: none;
		pointer-events: none;
	}

	.dm-footer__col > summary::-webkit-details-marker {
		display: none;
	}
}

.dm-footer__pay {
	margin: 0;
	padding: var(--wp--preset--spacing--30, 24px) 0 var(--wp--preset--spacing--40, 32px);
	border-top: var(--wp--custom--border--subtle, 1px solid rgba(129, 112, 114, 0.2));
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 16px);
	flex-wrap: wrap;
}

.dm-footer__pay p.dm-footer__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--dm-body, "Lato", sans-serif);
	font-size: var(--wp--preset--font-size--body-sm, 14px);
	font-weight: 700;
}

.dm-footer__pay-logos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10, 8px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dm-footer__pay-logos img {
	display: block;
	height: var(--wp--preset--spacing--40, 32px);
	width: auto;
}

.dm-footer__tax {
	margin-left: auto;
	font-size: var(--wp--preset--font-size--body-sm, 14px);
	color: var(--wp--preset--color--dm-anthrazit, #414141);
}

.dm-footer__legal {
	background: var(--wp--preset--color--dm-black, #030300);
	color: var(--wp--preset--color--dm-off-white, #f3f1ee);
	font-size: var(--wp--preset--font-size--body-sm, 14px);
}

.dm-footer__legal .dm-footer__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 24px);
	padding-block: var(--wp--preset--spacing--20, 16px);
}

.dm-footer__legal-nav {
	margin-left: auto;
}

.dm-footer__legal-nav .wp-block-navigation__container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10, 8px) var(--wp--preset--spacing--20, 16px);
}

.dm-footer__legal a:hover,
.dm-footer__legal a:focus-visible {
	color: var(--wp--preset--color--dm-white, #fff);
}

.dm-footer__legal :focus-visible {
	outline-color: var(--wp--preset--color--dm-white, #fff);
}

.dm-footer__withdraw .wp-block-button__link {
	color: var(--wp--preset--color--dm-white, #fff);
	border: 1.5px solid var(--wp--preset--color--dm-off-white, #f3f1ee);
	border-radius: var(--wp--custom--radius--medium, 8px);
	padding: var(--wp--preset--spacing--10, 8px) var(--wp--preset--spacing--20, 16px);
	font-size: var(--wp--preset--font-size--body-sm, 14px);
	font-weight: 700;
	background: transparent;
}

@media (max-width: 1023px) {
	.dm-newsletter:has(.klaviyo-form:not(:empty)) {
		margin-top: var(--wp--preset--spacing--30, 24px);
		margin-bottom: var(--wp--preset--spacing--40, 32px);
	}

	.dm-newsletter:has(.klaviyo-form:not(:empty))::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--wp--preset--color--dm-off-white, #f3f1ee);
		opacity: 0.7;
	}

	.dm-newsletter .klaviyo-form-YnJTZL {
		position: relative;
		z-index: 1;
		max-width: none;
	}

	.dm-footer > .dm-footer__inner {
		padding-top: var(--wp--preset--spacing--30, 24px);
	}

	.dm-footer__contact {
		margin-top: 0;
		padding: var(--wp--preset--spacing--20, 16px);
		display: grid;
		grid-template-columns: var(--wp--preset--spacing--50, 48px) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--20, 16px) var(--wp--preset--spacing--10, 8px);
	}

	.dm-footer__contact-avatar {
		width: var(--wp--preset--spacing--50, 48px);
		height: var(--wp--preset--spacing--50, 48px);
	}

	.dm-footer__contact-link {
		grid-column: 1 / -1;
	}

	.dm-footer__contact-link a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--wp--preset--spacing--10, 8px);
		min-height: var(--wp--preset--spacing--50, 48px);
		border-radius: var(--wp--custom--radius--button, 10px);
		border: 1px solid var(--wp--preset--color--dm-taupe, #817072);
		text-decoration: none;
	}

	.dm-footer__contact-link--phone a {
		background: var(--wp--preset--color--dm-teal, #005b4a);
		border-color: var(--wp--preset--color--dm-teal, #005b4a);
		color: var(--wp--preset--color--dm-white, #fff);
	}

	.dm-footer__contact-link--phone a:hover,
	.dm-footer__contact-link--phone a:focus-visible {
		color: var(--wp--preset--color--dm-white, #fff);
	}

	.dm-footer__main {
		grid-template-columns: 1fr;
		padding-top: var(--wp--preset--spacing--40, 32px);
		padding-bottom: var(--wp--preset--spacing--30, 24px);
	}

	.dm-footer__brand {
		margin-bottom: var(--wp--preset--spacing--30, 24px);
	}

	.dm-footer__claim {
		font-size: var(--wp--preset--font-size--medium, 20px);
	}

	.dm-footer__col-stack {
		gap: 0;
	}

	.dm-footer__col {
		border-top: var(--wp--custom--border--subtle, 1px solid rgba(129, 112, 114, 0.2));
	}

	.dm-footer__col > summary {
		min-height: var(--wp--preset--spacing--50, 48px);
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		list-style: none;
	}

	.dm-footer__col > summary::-webkit-details-marker {
		display: none;
	}

	.dm-footer__col > summary::after {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 2px solid currentcolor;
		border-bottom: 2px solid currentcolor;
		transform: rotate(45deg) translateY(-3px);
		transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* Wie FAQ und Versprechen: ::details-content plus interpolate-size. */
	.dm-footer__col {
		interpolate-size: allow-keywords;
	}

	.dm-footer__col::details-content {
		block-size: 0;
		overflow-y: clip;
		opacity: 0;
		transition-property: block-size, opacity, content-visibility;
		transition-duration: 320ms;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-behavior: allow-discrete;
	}

	.dm-footer__col[open]::details-content {
		block-size: auto;
		opacity: 1;
	}

	.dm-footer__col[open] > summary::after {
		transform: rotate(-135deg);
	}

	.dm-footer__nav {
		padding-bottom: var(--wp--preset--spacing--20, 16px);
	}

	.dm-footer__nav .wp-block-navigation-item a {
		display: flex;
		align-items: center;
		min-height: var(--wp--preset--spacing--40, 32px);
		font-size: var(--wp--preset--font-size--body, 16px);
	}

	.dm-footer__social-wrap {
		padding-top: var(--wp--preset--spacing--30, 24px);
	}

	.dm-footer__pay {
		flex-direction: column;
		align-items: flex-start;
	}

	.dm-footer__tax {
		margin-left: 0;
	}

	.dm-footer__legal .dm-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--20, 16px);
		padding-top: var(--wp--preset--spacing--30, 24px);
		padding-bottom: var(--wp--preset--spacing--40, 32px);
	}

	.dm-footer__withdraw {
		order: -1;
	}

	.dm-footer__withdraw .wp-block-button__link {
		min-height: var(--wp--preset--spacing--50, 48px);
		display: flex;
		align-items: center;
	}

	.dm-footer__legal-nav {
		margin-left: 0;
		width: 100%;
	}

	.dm-footer__legal-nav .wp-block-navigation__container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 var(--wp--preset--spacing--20, 16px);
	}

	.dm-footer__legal-nav .wp-block-navigation-item a {
		display: flex;
		align-items: center;
		min-height: var(--wp--preset--spacing--50, 48px);
	}

	.dm-footer__copy {
		order: 3;
		color: var(--wp--preset--color--dm-taupe, #817072);
	}
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
	.dm-footer__col::details-content,
	.dm-footer__col > summary::after {
		transition: none;
	}
}

/* Nicht in @media verschachteln: Der Parser von Perfmatters (Remove Unused CSS)
   schliesst sonst die Media-Query zu frueh, und die Mobil-Regeln gelten ueberall.
   Ohne Transition (nur mobil gesetzt) bleibt das auf dem Desktop wirkungslos. */
@starting-style {
	.dm-footer__col[open]::details-content {
		block-size: 0;
		opacity: 0;
	}
}