.pf-foot {
	--pf-bg: #f1f1f1;
	--pf-ink: var(--ma-grey, #646363);
	--pf-dark: var(--ma-black, #323131);
	--pf-grey: #788379;
	--pf-head: var(--ma-grey, #646363);
	--pf-head-font: 'Roboto Condensed', 'Arial Narrow', sans-serif;
	--pf-accent: var(--ma-limegreen, #dedc00);
	--pf-zslant: 40px;
	--pf-zmin: 300px;
	--pf-zpad: calc(var(--pf-zslant) + 48px);
	--pf-pt: clamp(40px, 5vw, 72px);
	--pf-pb: clamp(48px, 6vw, 80px);
	--pf-ease: .4s ease;
	position: relative;
	padding: var(--pf-pt) 50px var(--pf-pb);
	background: var(--pf-bg);
	color: var(--pf-ink);
	font: 400 1rem/1.55 'Nunito Sans', sans-serif;
	transition: background-color var(--pf-ease), color var(--pf-ease);
}
.pf-foot:hover,
.pf-foot:focus-within {
	background: var(--pf-grey);
	color: #fff;
}
.pf-foot,
.pf-foot *,
.pf-foot *::before { box-sizing: border-box; }

body:has(.footer-rechts) .pf-foot.deko-ml::before {
	left: auto;
	right: 0;
	transform: translate(42%, -50%) rotate(-4deg) scaleX(-1);
}

body:has(.footer-rechts) .pf-foot:hover,
body:has(.footer-rechts) .pf-foot:focus-within {
	background: var(--pf-bg);
	color: var(--pf-ink);
	--deko-bild: var(--deko-svg-grau);
}
body:has(.footer-rechts) .pf-foot:hover h2,
body:has(.footer-rechts) .pf-foot:focus-within h2 { color: var(--pf-head); }
body:has(.footer-rechts) .pf-foot .pf-zeiten h2 { color: var(--pf-dark); }

.pf-foot:hover,
.pf-foot:focus-within,
.deko:has(.pf-foot:hover),
.deko:has(.pf-foot:focus-within) {
	--deko-bild: var(--deko-svg-hell);
}

@media (max-width: 560px) {
	.pf-foot { padding-left: 30px; padding-right: 30px; }
}

.pf-inner {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 48px 64px;
}
@media (min-width: 960px) {
	.pf-inner { grid-template-columns: 1.6fr 2fr 1.6fr; }
}
.pf-col { min-width: 0; }
@media (max-width: 767px) {
	.pf-inner { grid-template-columns: minmax(0, 1fr); }
	.pf-col:not(.pf-zeiten) { padding-left: clamp(16px, 4vw, 28px); padding-right: clamp(16px, 4vw, 28px); }
}

.pf-foot h2 {
	margin: 0 0 20px;
	padding: 0;
	font: 700 1.4rem/1.2 var(--pf-head-font);
	letter-spacing: 0;
	position: relative;
	color: var(--pf-head);
	transition: color var(--pf-ease);
}
.pf-foot h2::before {
	content: "";
	position: absolute;
	left: -17px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -4.5px;
	background: var(--pf-accent);
	transform: skewX(20deg);
}
.pf-foot:hover h2,
.pf-foot:focus-within h2 { color: #fff; }

.pf-foot address {
	margin: 0 0 16px;
	font-style: normal;
}
.pf-foot address strong { font-weight: 700; }
.pf-foot p {
	margin: 0 0 6px;
	padding: 0;
}

.pf-foot a {
	color: inherit;
	text-decoration: none;
	border: 0;
	box-shadow: none;
	transition: color var(--pf-ease);
}
.pf-foot a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.pf-links a,
.pf-foot p a {
	position: relative;
	display: inline-block;
	padding-bottom: .2em;
	line-height: 1.2;
}
.pf-links a:hover,
.pf-foot p a:hover { text-decoration: none; }
.pf-links a::after,
.pf-foot p a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--pf-accent);
	transform: skewX(20deg) scaleX(0);
	transform-origin: right center;
	transition: transform .35s cubic-bezier(.77, 0, .18, 1);
}
.pf-links a:hover::after,
.pf-links a:focus-visible::after,
.pf-foot p a:hover::after,
.pf-foot p a:focus-visible::after {
	transform: skewX(20deg) scaleX(1);
	transform-origin: left center;
}

.pf-foot a:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.pf-zeiten {
	padding: 24px var(--pf-zpad);
	background: var(--pf-accent);
	color: var(--pf-dark);
	clip-path: polygon(var(--pf-zslant) 0, 100% 0, calc(100% - var(--pf-zslant)) 100%, 0 100%);
}
@media (min-width: 960px) {
	.pf-zeiten {
		min-width: calc(var(--pf-zmin) + 2 * var(--pf-zpad));
		margin: calc(-1 * var(--pf-pt)) 0 calc(-1 * var(--pf-pb));
		padding: var(--pf-pt) var(--pf-zpad) var(--pf-pb);
	}
}
.pf-foot .pf-zeiten h2,
.pf-foot:hover .pf-zeiten h2,
.pf-foot:focus-within .pf-zeiten h2 { color: var(--pf-dark); }
.pf-zeiten h2::before { background: var(--pf-dark); }

.pf-hours {
	margin: 0;
	padding: 0;
	container-type: inline-size;
	font-variant-numeric: tabular-nums;
}
.pf-hours div {
	display: grid;
	grid-template-columns: 7em 1fr;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
.pf-hours div:first-child { padding-top: 0; }
.pf-hours div:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-hours dt { font-weight: 700; margin: 0; }
.pf-hours dd { margin: 0; }

@container (max-width: 270px) {
	.pf-hours div {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

.pf-note {
	margin: 16px 0 0;
	padding: 0;
	font-weight: 700;
}

.pf-links a {
	display: block;
	width: fit-content;
	margin: 0 0 8px;
	font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
	.pf-foot,
	.pf-foot h2,
	.pf-foot a,
	.pf-links a::after,
	.pf-foot p a::after { transition: none; }
}
