/* Schriften */
@font-face { font-family: 'Cuprum'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/cuprum/cuprum-v25-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Cuprum'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/cuprum/cuprum-v25-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cuprum'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/cuprum/cuprum-v25-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Cuprum'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/cuprum/cuprum-v25-latin-500italic.woff2') format('woff2'); }
@font-face { font-family: 'Cuprum'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/cuprum/cuprum-v25-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Cuprum'; font-style: italic; font-weight: 600; font-display: swap; src: url('../fonts/cuprum/cuprum-v25-latin-600italic.woff2') format('woff2'); }
@font-face { font-family: 'Cuprum'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/cuprum/cuprum-v25-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Cuprum'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/cuprum/cuprum-v25-latin-700italic.woff2') format('woff2'); }

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100; font-display: swap; src: url('../fonts/roboto/roboto-v30-latin-100.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 100; font-display: swap; src: url('../fonts/roboto/roboto-v30-latin-100italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/roboto/roboto-v30-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/roboto/roboto-v30-latin-300italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/roboto/roboto-v30-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/roboto/roboto-v30-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/roboto/roboto-v30-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/roboto/roboto-v30-latin-500italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/roboto/roboto-v30-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/roboto/roboto-v30-latin-700italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/roboto/roboto-v30-latin-900.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 900; font-display: swap; src: url('../fonts/roboto/roboto-v30-latin-900italic.woff2') format('woff2'); }

@font-face { font-family: 'Allison'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/allison/allison-v13-latin-regular.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Grundlagen */

:root {
	--primary-color: #ff952a;
	--primary-hover-color: #fbb247;
	--orange: #f68601;
	--dunkelorange: #d84e01;
	--hellorange: #f7d6b3;
	--gruen: #0d6e04;
	--besteckgrau: #a8a8a8;
	--text-color: #121212;
	--error-color: #e53b2e;
	--success-color: #4CAF50;
	--white-color: white;
	--dunkelgrau: #282828;
	--hellgrau: #cdcdcd;
	--border-radius-gross: 3rem;
	--transition: 0.35s ease;
	--box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
	--font: "Roboto", system-ui, sans-serif;
	--font-headline: "Cuprum", "Roboto", system-ui, sans-serif;
	--font-signatur: "Allison", "Segoe Script", cursive;
	--font-size: 1.09rem;
	--inhalt: min(80rem, calc(100% - clamp(2rem, 6vw, 7.5rem)));
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	max-width: 100%;
	overflow-x: clip;
	overscroll-behavior-x: none;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	margin: 0;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	overflow-wrap: break-word;
	background: var(--white-color);
	color: var(--text-color);
	font-family: var(--font);
	font-size: var(--font-size);
	line-height: 1.6;
}

main,
.content {
	max-width: 100%;
	min-width: 0;
}

main {
	flex: 1 0 auto;
}

img,
video {
	max-width: 100%;
}

p,
a,
li,
button,
input,
textarea,
select,
label {
	font-size: var(--font-size);
}

button,
input,
textarea,
select {
	font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero article > div:not([aria-hidden]) > :first-child {
	font-family: var(--font-headline);
	font-weight: 700;
	line-height: 1.15;
}

h1 {
	margin: 0 0 1.15rem;
	font-size: clamp(1.8rem, 3.6vw, 2.7rem);
	line-height: 1.08;
	text-transform: uppercase;
}

.hero article > div:not([aria-hidden]) > :first-child {
	font-size: clamp(1.7rem, 3.2vw, 2.8rem);
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.5rem;
}

h4,
h5,
h6 {
	font-size: 1.2rem;
}

p {
	margin: 0 0 1rem;
}

h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6rem;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

a {
	color: inherit;
}

a,
button,
summary,
label,
select,
input,
textarea,
[role="button"],
[role="link"],
[role="tab"],
[role="menuitem"],
[role="option"] {
	transition:
		color var(--transition),
		background-color var(--transition),
		border-color var(--transition),
		box-shadow var(--transition),
		opacity var(--transition),
		filter var(--transition),
		transform var(--transition),
		text-decoration-color var(--transition),
		fill var(--transition),
		stroke var(--transition);
}

a svg,
button svg,
summary svg,
[role="button"] svg {
	transition:
		transform var(--transition),
		color var(--transition),
		opacity var(--transition),
		fill var(--transition),
		stroke var(--transition);
}

a img,
button img {
	transition: transform 0.45s ease, opacity var(--transition);
}

@media (prefers-reduced-motion: reduce) {
	a,
	button,
	summary,
	label,
	select,
	input,
	textarea,
	[role="button"],
	[role="link"],
	[role="tab"],
	[role="menuitem"],
	[role="option"],
	a svg,
	button svg,
	summary svg,
	[role="button"] svg,
	a img,
	button img {
		transition: none;
	}
}

main a:not(
	.slide-orange,
	.slide-rot,
	.slide-orange-ohne,
	.slide-rot-ohne,
	.content-orange,
	.content-rot,
	.content-schwarz,
	.content-orange-ohne,
	.content-rot-ohne,
	.content-schwarz-ohne,
	.blog-lesen,
	.blog-pfeil,
	.btn-neu,
	.btn-neu-hell,
	.text-orange
) {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.blog-hinweis p > a:only-child {
	text-decoration: none;
}

.slide-orange,
.slide-rot,
.content-orange,
.content-schwarz,
.content-schwarz-ohne {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	box-sizing: border-box;
	flex-shrink: 1;
	width: fit-content;
	max-width: 100%;
	min-width: 0;
	min-height: 3.1rem;
	padding: 0.5rem 0.4rem 0.5rem 1.35rem;
	border: 0;
	border-radius: var(--border-radius-gross);
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: break-word;
	cursor: pointer;
	box-shadow: 0 12px 28px rgba(18, 18, 18, 0.18);
	transition:
		background-color var(--transition),
		color var(--transition),
		box-shadow var(--transition),
		transform var(--transition),
		border-color var(--transition),
		opacity var(--transition),
		filter var(--transition);
}

.slide-orange,
.slide-rot,
.content-orange,
.content-schwarz {
	position: relative;
	justify-content: flex-start;
	padding-right: 3.6rem;
	text-align: left;
}

.slide-orange::after,
.slide-rot::after,
.content-orange::after,
.content-schwarz::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.4rem;
	flex: none;
	width: 2.35rem;
	height: 2.35rem;
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--white-color);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8H13M9 4l4 4-4 4' fill='none' stroke='%23121212' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.95rem 0.95rem;
}

.baukasten-schritt [data-speichern]::after {
	background-image: url("/assets/img/icons/warenkorb-icon.webp");
	background-size: 1.45rem 1.45rem;
}

[data-code-kopieren]::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='6.1' y='6.1' width='7.2' height='7.2' rx='1.25' fill='none' stroke='%23121212' stroke-width='1.45'/%3E%3Cpath d='M9.9 6.1V3.85A1.25 1.25 0 0 0 8.65 2.6H3.85A1.25 1.25 0 0 0 2.6 3.85v4.8A1.25 1.25 0 0 0 3.85 9.9H6.1' fill='none' stroke='%23121212' stroke-width='1.45' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 1.05rem 1.05rem;
}

.slide-orange {
	background: var(--primary-color);
	color: var(--white-color);
}

.slide-orange:hover,
.slide-orange:focus-visible {
	background: var(--primary-hover-color);
	color: var(--white-color);
}

.slide-rot {
	background: var(--error-color);
	color: var(--white-color);
}

.slide-rot:hover,
.slide-rot:focus-visible {
	background: color-mix(in srgb, var(--error-color) 88%, white);
	color: var(--white-color);
}

.content-orange {
	background: var(--primary-color);
	color: var(--white-color);
}

.content-orange:hover,
.content-orange:focus-visible {
	background: var(--primary-hover-color);
	color: var(--white-color);
}

.text-orange,
.text-orange:hover,
.text-orange:focus-visible {
	margin: 0;
	padding: 0;
	background: none;
	color: var(--primary-color);
	text-decoration: none;
}

.content-schwarz {
	background: var(--text-color);
	color: var(--white-color);
}

.content-schwarz:hover,
.content-schwarz:focus-visible {
	background: #2a2a2a;
	color: var(--white-color);
}

.content-schwarz-ohne {
	background: var(--text-color);
	color: var(--white-color);
}

.content-schwarz-ohne:hover,
.content-schwarz-ohne:focus-visible {
	background: #2a2a2a;
	color: var(--white-color);
}

@media (max-width: 62rem) {
	:root {
		--font-size: 1rem;
	}
}

/* Häkchen */

.haken {
	display: inline-block;
	flex-shrink: 0;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background-color: var(--primary-color);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath d='M6.5 11 L9.1 13.6 L14.7 7.5' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21px 21px;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

a[href="#inhalt"] {
	position: absolute;
	left: 0.75rem;
	top: 0.75rem;
	transform: translateY(-160%);
	padding: 0.6rem 0.9rem;
	background: var(--white-color);
	color: var(--text-color);
	z-index: 80;
}

a[href="#inhalt"]:focus {
	transform: none;
}

:focus:not(input):not(textarea):not(select),
:focus-visible:not(input):not(textarea):not(select) {
	outline: none;
}

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
	border-color: var(--primary-color);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Seitenkopf */

.overhead {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 auto 0.55rem;
	padding: 0 calc(3.125rem + 1.4rem);
	color: var(--primary-color);
	font-family: var(--font-headline);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.2;
}

.overhead::before,
.overhead::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 3.125rem;
	height: 2px;
	background: var(--primary-color);
	transform: translateY(-50%);
}

.overhead::before {
	left: 0;
}

.overhead::after {
	right: 0;
}

.abschnitt {
	width: var(--inhalt);
	max-width: 100%;
	min-width: 0;
	margin: 0 auto 5.5rem;
}

.content > .abschnitt:first-of-type {
	margin-top: 4.5rem;
}

.abschnitt:last-child {
	margin-bottom: 0;
}

section:has(> .overhead) {
	text-align: center;
}

body:not(:has(.hero)) section:has(> .overhead),
body:not(:has(.hero)) h1 {
	text-align: left;
}

body:not(:has(.hero)) .overhead {
	margin-left: 0;
	margin-right: 0;
}

section:has(> .overhead) .angebot {
	text-align: left;
}

section:has(> .overhead) > p:last-child {
	margin-bottom: 0;
}

section:has(> .overhead) > p + a,
section:has(> .overhead) > div:has(> a) {
	margin-top: 1.15rem;
}

section:has(> .overhead) > div:has(> a) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 0.85rem;
}

body:has(.hero) .content > .abschnitt:first-of-type > h1 {
	text-transform: none;
	max-width: 16em;
	margin-inline: auto;
}

body:has(.hero) .content > .abschnitt:first-of-type > p + .angebot {
	margin-top: 2.35rem;
}

@media (min-width: 40.01rem) {
	body:has(.hero) .content > .abschnitt:first-of-type > h1 {
		font-size: clamp(2.025rem, 4.32vw, 3.15rem);
		line-height: 1.12;
	}
}

@media (max-width: 40rem) {
	.overhead {
		width: auto;
		margin-right: 0;
		margin-left: 0;
		padding: 0;
		font-size: 1.4rem;
	}

	.overhead::before,
	.overhead::after {
		display: none;
	}
}

/* Header */

header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--white-color);
	box-shadow: 0 -2px 22px rgba(28, 25, 23, 0.06);
}

header > div {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: min(100% - 4.5rem, 100rem);
	margin-inline: auto;
	min-height: 0;
	padding-top: env(safe-area-inset-top);
	padding-bottom: 0;
}

header > div > a {
	display: inline-flex;
	flex: 0 0 auto;
	align-self: flex-start;
	margin: 0;
	padding: 1.15rem 1.25rem 0.95rem;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	line-height: 0;
	position: relative;
	z-index: 2;
}

header > div > a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: -0.85rem;
	left: 0;
	z-index: -1;
	background: var(--white-color);
	border-radius: 0 0 1.5rem 1.5rem;
	box-shadow: var(--box-shadow);
}

header > div > a img {
	height: 4.5rem;
	width: auto;
	display: block;
}

header nav {
	margin-left: auto;
}

header > div > div {
	display: flex;
	align-items: center;
}

header > div > div:has(> ul) {
	flex: 0 0 auto;
	gap: 1.15rem;
	margin-left: 1.35rem;
}

.warenkorb {
	flex: 0 0 auto;
	margin-left: 1.75rem;
}

.warenkorb img {
	width: 2.56rem;
	height: 2.56rem;
}

header > div > div > ul {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	list-style: none;
}

header > div > div li {
	display: flex;
	flex: 0 0 auto;
}

header > div > div a {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	line-height: 0;
}

header > div > div img {
	display: block;
	flex: 0 0 auto;
	width: 2.15rem;
	height: 2.15rem;
	object-fit: contain;
}

body:has(.hero) header > div > div img {
	filter: brightness(0) invert(1);
}

header nav > ul {
	display: flex;
	align-items: center;
	gap: clamp(1.15rem, 2.1vw, 2.8rem);
	list-style: none;
}

header nav > ul > li {
	position: relative;
}

header nav > ul > li > a,
header nav > ul > li > div > a {
	display: inline-flex;
	align-items: center;
	font-size: 1.02rem;
	line-height: 1;
}

header nav > ul > li > div {
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 0;
	border-radius: 999px;
	background: transparent;
	transition: background-color var(--transition), color var(--transition);
}

header nav > ul > li:is(:hover, :focus-within, .is-open) > div {
	background: transparent;
}

header a {
	color: var(--text-color);
	text-decoration: none;
	font-weight: 500;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

header a:hover,
header a:focus-visible,
header a[aria-current="page"] {
	color: var(--primary-color);
}

header button,
dialog button {
	border: 0;
	background: transparent;
	color: var(--text-color);
	cursor: pointer;
}

header nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-left: -0.28rem;
	border-radius: 999px;
	color: var(--text-color);
}

body:not(:has(.hero)) header nav > ul > li:is(:hover, :focus-within) > div > a,
body:not(:has(.hero)) header nav > ul > li:is(:hover, :focus-within) > div > button,
body:not(:has(.hero)) header nav > ul > li > div:has(> a[aria-current="page"]) > button {
	color: var(--primary-color);
}

header nav svg {
	width: 22px;
	height: 22px;
}

header svg,
dialog svg {
	display: block;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

header nav > ul > li:is(:hover, :focus-within, .is-open) svg {
	transform: rotate(180deg);
}

header nav ul ul {
	position: absolute;
	left: 0;
	top: calc(100% + 0.55rem);
	z-index: 50;
	min-width: 17rem;
	width: max-content;
	max-width: min(26rem, 80vw);
	padding: 0.45rem;
	list-style: none;
	background: var(--white-color);
	border: 1px solid rgba(255, 149, 42, 0.28);
	border-radius: 1rem;
	box-shadow: 0 18px 44px rgba(28, 25, 23, 0.12);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
	transform-origin: top left;
	transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s;
}

header nav ul ul::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -0.7rem;
	height: 0.7rem;
}

header nav ul ul::after {
	content: "";
	position: absolute;
	top: -6px;
	left: 1.35rem;
	width: 11px;
	height: 11px;
	background: var(--white-color);
	border-top: 1px solid rgba(255, 149, 42, 0.28);
	border-left: 1px solid rgba(255, 149, 42, 0.28);
	transform: rotate(45deg);
}

header nav > ul > li:is(:hover, :focus-within, .is-open) > ul {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

header nav ul ul li {
	opacity: 0;
	transform: translateY(6px);
}

header nav > ul > li:is(:hover, :focus-within, .is-open) > ul li {
	opacity: 1;
	transform: none;
	transition: opacity 0.28s ease, transform 0.28s ease;
}

header nav > ul > li:is(:hover, :focus-within, .is-open) > ul li:nth-child(1) { transition-delay: 0.02s; }
header nav > ul > li:is(:hover, :focus-within, .is-open) > ul li:nth-child(2) { transition-delay: 0.05s; }
header nav > ul > li:is(:hover, :focus-within, .is-open) > ul li:nth-child(3) { transition-delay: 0.08s; }
header nav > ul > li:is(:hover, :focus-within, .is-open) > ul li:nth-child(4) { transition-delay: 0.11s; }
header nav > ul > li:is(:hover, :focus-within, .is-open) > ul li:nth-child(5) { transition-delay: 0.14s; }
header nav > ul > li:is(:hover, :focus-within, .is-open) > ul li:nth-child(6) { transition-delay: 0.17s; }
header nav > ul > li:is(:hover, :focus-within, .is-open) > ul li:nth-child(7) { transition-delay: 0.2s; }
header nav > ul > li:is(:hover, :focus-within, .is-open) > ul li:nth-child(8) { transition-delay: 0.23s; }

header nav ul ul a {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	white-space: normal;
	padding: 0.55rem 0.7rem;
	border-radius: 0.65rem;
	font-weight: 400;
	line-height: 1.35;
	transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

header nav ul ul a::before {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--primary-color);
	flex-shrink: 0;
	transform: scale(0.35);
	opacity: 0.45;
	transition: transform var(--transition), opacity var(--transition);
}

header nav ul ul a:hover,
header nav ul ul a:focus-visible {
	background: #fff4e8;
	color: var(--primary-color);
}

header nav ul ul a:hover::before,
header nav ul ul a:focus-visible::before,
header nav ul ul a[aria-current="page"]::before {
	transform: scale(1);
	opacity: 1;
}

.burger {
	--burger-bar: 4px;
	--burger-gap: 8px;
	display: none;
	flex-shrink: 0;
	margin: 1.5rem 1rem 0 0;
	width: auto;
	height: auto;
	padding: 0.7rem;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.burger > span:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--burger-gap);
	width: 2.35rem;
}

.burger > span:first-child span {
	display: block;
	height: var(--burger-bar);
	background: var(--white-color);
	border-radius: 999px;
	transform-origin: center;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.burger[aria-expanded="true"] > span:first-child span:nth-child(1) {
	transform: translateY(calc(var(--burger-gap) + var(--burger-bar))) rotate(45deg);
}

.burger[aria-expanded="true"] > span:first-child span:nth-child(2) {
	opacity: 0;
}

.burger[aria-expanded="true"] > span:first-child span:nth-child(3) {
	transform: translateY(calc((var(--burger-gap) + var(--burger-bar)) * -1)) rotate(-45deg);
}

dialog {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
	border: 0;
	background: var(--white-color);
	color: var(--text-color);
	box-shadow: none;
	opacity: 0;
	transition:
		opacity 0.45s ease,
		overlay 0.45s ease allow-discrete,
		display 0.45s ease allow-discrete;
}

dialog[open],
#mobile-nav[open] {
	display: flex;
	flex-direction: column;
	opacity: 1;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

@starting-style {
	dialog[open] {
		opacity: 0;
	}
}

dialog::backdrop {
	background: transparent;
}

dialog > div:first-child {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.75rem;
	width: min(100% - 4.5rem, 100rem);
	margin-inline: auto;
	min-height: 0;
	padding: 0;
	padding-top: env(safe-area-inset-top);
	background: var(--white-color);
}

#mobile-nav > div:first-child,
#mobile-nav > ul,
#mobile-nav > a.content-schwarz-ohne,
#mobile-nav > div:last-child {
	flex-shrink: 0;
}

dialog > div:first-child > a:first-child {
	display: inline-flex;
	flex: 0 0 auto;
	align-self: center;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.95rem 0.85rem;
	line-height: 0;
}

dialog > div:first-child > a:first-child img {
	display: block;
	height: 3.15rem;
	width: auto;
	max-width: 100%;
}

dialog > div:first-child > .warenkorb {
	flex: 0 0 auto;
	align-self: center;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: 0;
}

dialog > div:first-child > .warenkorb a {
	position: relative;
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

dialog > div:first-child > .warenkorb img {
	width: 2.14rem;
	height: 2.14rem;
	filter: brightness(0);
}

dialog > div:first-child > .warenkorb .warenkorb-zahl {
	top: 0.15rem;
	right: -0.15rem;
	bottom: auto;
	left: auto;
}

dialog > div:first-child > .warenkorb .warenkorb-zahl.ist-leer {
	background: var(--white-color);
	color: var(--text-color);
}

dialog > div:first-child > button {
	--burger-bar: 4px;
	--burger-gap: 8px;
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.7rem;
	border-radius: 0;
	background: transparent;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

dialog > div:first-child > button:focus {
	outline: none;
	box-shadow: none;
}

dialog > div:first-child > button:focus-visible {
	outline: none;
}

dialog > div:first-child > button > span:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--burger-gap);
	width: 2.35rem;
}

dialog > div:first-child > button > span:first-child span {
	display: block;
	height: var(--burger-bar);
	background: var(--text-color);
	border-radius: 999px;
	transform-origin: center;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

dialog[open] > div:first-child > button > span:first-child span:nth-child(1) {
	transform: translateY(calc(var(--burger-gap) + var(--burger-bar))) rotate(45deg);
}

dialog[open] > div:first-child > button > span:first-child span:nth-child(2) {
	opacity: 0;
}

dialog[open] > div:first-child > button > span:first-child span:nth-child(3) {
	transform: translateY(calc((var(--burger-gap) + var(--burger-bar)) * -1)) rotate(-45deg);
}

@starting-style {
	dialog[open] > div:first-child > button > span:first-child span:nth-child(1),
	dialog[open] > div:first-child > button > span:first-child span:nth-child(3) {
		transform: none;
	}

	dialog[open] > div:first-child > button > span:first-child span:nth-child(2) {
		opacity: 1;
	}
}

dialog ul {
	list-style: none;
}

dialog > ul {
	flex: 0 0 auto;
	min-height: 0;
	margin: 0.6rem 0 0;
	padding: 0 1.5rem;
	overflow: visible;
}

dialog > ul > li > a,
dialog > ul > li > div:first-child > a {
	min-height: 0;
	padding: 0.85rem 0;
	font-family: var(--font);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: var(--text-color);
}

dialog > ul > li > a:hover,
dialog > ul > li > a:focus-visible,
dialog > ul > li > div:first-child > a:hover,
dialog > ul > li > div:first-child > a:focus-visible,
dialog > ul > li > a[aria-current="page"],
dialog > ul > li > div:first-child > a[aria-current="page"],
dialog > ul > li:has(a[aria-current="page"]) > a,
dialog > ul > li:has(a[aria-current="page"]) > div:first-child > a,
dialog > ul > li:has(a[aria-current="page"]) > div:first-child > button {
	color: var(--primary-color);
}

dialog > ul > li > div:first-child > button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: var(--text-color);
	flex-shrink: 0;
}

dialog > ul a {
	display: flex;
	align-items: center;
	color: var(--text-color);
	text-decoration: none;
	font-weight: 500;
}

dialog > ul > li > div:first-child {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

dialog > ul > li > div:first-child > a {
	flex: 1;
}

dialog > ul > li > div:first-child > button svg {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

dialog > ul > li > div:first-child > button[aria-expanded="true"] svg {
	transform: rotate(90deg);
}

dialog > ul > li > div + div {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

dialog > ul > li.is-open > div + div {
	grid-template-rows: 1fr;
	padding-bottom: 0.45rem;
}

dialog > ul > li > div + div > ul {
	overflow: hidden;
	min-height: 0;
	margin: 0;
	padding: 0 0.85rem;
	border-radius: 1rem;
	background: transparent;
}

dialog > ul > li.is-open > div + div > ul {
	margin: 0 0 0.35rem;
	padding: 0 0.15rem 0.45rem 0.35rem;
	background: transparent;
}

dialog > ul > li > div + div a {
	font-family: var(--font);
	font-size: 1rem;
	font-weight: 400;
	min-height: 2.35rem;
	padding: 0.4rem 0;
	white-space: normal;
	color: #5b6778;
}

dialog > ul > li > div + div a[aria-current="page"] {
	color: var(--primary-color);
	font-weight: 500;
}

dialog > a.content-schwarz-ohne {
	flex: 0 0 auto;
	align-self: flex-start;
	width: fit-content;
	max-width: calc(100% - 3rem);
	margin: 1.15rem 1.5rem 0;
	padding: 0.5rem 1.5rem;
	white-space: normal;
	box-shadow: none;
}

dialog:not(.artikel-licht) > div:last-child {
	flex: 0 0 auto;
	margin-top: auto;
	padding: 1.6rem 1.5rem 1.5rem;
}

dialog:not(.artikel-licht) > div:last-child ul {
	display: flex;
	align-items: center;
	gap: 1.15rem;
	margin: 0;
	padding: 0;
}

dialog:not(.artikel-licht) > div:last-child a {
	display: inline-flex;
	min-height: 0;
	padding: 0;
	line-height: 0;
}

dialog:not(.artikel-licht) > div:last-child img {
	width: 1.7rem;
	height: 1.7rem;
	object-fit: contain;
}

html:has(dialog[open]) {
	overflow: hidden;
}

@media (max-width: 72rem) {
	header nav {
		display: none;
	}

	header > div {
		align-items: center;
	}

	.burger {
		display: inline-flex;
		align-self: center;
		margin: 0;
	}

	header > div > div:has(> ul) {
		align-self: center;
		margin-left: auto;
		margin-top: 0;
		gap: 0.85rem;
	}

	.warenkorb {
		align-self: center;
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 1.15rem;
	}

	header > div > div > ul {
		gap: 0.55rem;
	}

	header > div > div img {
		width: 1.8rem;
		height: 1.8rem;
	}

	.warenkorb img {
		width: 2.14rem;
		height: 2.14rem;
	}

	header > div > a {
		padding: 1.45rem 0.85rem 0.65rem;
	}

	header > div > a img {
		height: 3.15rem;
	}

	body:not(:has(.hero)) header > div > a {
		align-self: center;
		padding-top: 0.95rem;
		padding-bottom: 0.95rem;
	}

	/* Scroll-Header: Logo und Burger auf gleicher Mitte wie Social/Warenkorb */
	body:has(.hero) header.is-fest > div {
		align-items: center;
		min-height: 4.75rem;
	}

	body:has(.hero) header.is-fest > div > a {
		align-self: center;
		padding: 0.7rem 0.85rem;
	}

	body:has(.hero) header.is-fest > div > a img {
		height: 3.15rem;
	}

	body:has(.hero) header.is-fest .burger,
	body:has(.hero) header.is-fest .warenkorb,
	body:has(.hero) header.is-fest > div > div:has(> ul) {
		align-self: center;
		margin-top: 0;
		margin-bottom: 0;
	}
}

@media (min-width: 72.01rem) {
	header nav {
		margin-top: 0.45rem;
	}

	header > div > div {
		margin-top: 0.7rem;
	}
}

body:has(.hero) header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background: transparent;
	box-shadow: none;
	transition: transform 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

body:has(.hero) header.is-fest {
	position: fixed;
	background: var(--white-color);
	box-shadow: 0 -2px 22px rgba(28, 25, 23, 0.06);
	transform: translateY(0);
}

body:has(.hero) header.is-fest.is-versteckt {
	transform: translateY(-110%);
	pointer-events: none;
}

body:has(.hero) header.is-fest > div > a::after {
	content: none;
}

body:has(.hero) header.is-fest nav > ul > li > a,
body:has(.hero) header.is-fest nav > ul > li > div,
body:has(.hero) header.is-fest nav > ul > li > div > a,
body:has(.hero) header.is-fest nav button {
	color: var(--text-color);
}

body:has(.hero) header.is-fest nav > ul > li > a:hover,
body:has(.hero) header.is-fest nav > ul > li > a:focus-visible,
body:has(.hero) header.is-fest nav > ul > li > div > a:hover,
body:has(.hero) header.is-fest nav > ul > li > div > a:focus-visible,
body:has(.hero) header.is-fest nav > ul > li > div:hover > a,
body:has(.hero) header.is-fest nav button:hover,
body:has(.hero) header.is-fest nav button:focus-visible {
	color: var(--primary-color);
}

body:has(.hero) header.is-fest > div > div img {
	filter: none;
}

body:has(.hero) header.is-fest .burger > span:first-child span {
	background: var(--text-color);
}

body:has(.hero) header.is-fest a:focus-visible,
body:has(.hero) header.is-fest button:focus-visible {
	outline-color: var(--text-color);
}

@media (prefers-reduced-motion: reduce) {
	body:has(.hero) header {
		transition: none;
	}
}

body:not(:has(.hero)) header > div > a::after {
	content: none;
}

@media (min-width: 72.01rem) {
	body:not(:has(.hero)) header > div {
		min-height: 6.6rem;
	}

	body:not(:has(.hero)) header > div > a {
		align-self: center;
		padding: 0 1.25rem;
	}

	body:not(:has(.hero)) header > div > a img {
		height: 3.35rem;
	}
}

/* Laptops bis 16 Zoll: Logo, Menü und Social-Icons etwas enger, damit der Warenkorb sichtbar bleibt */
@media (min-width: 72.01rem) and (max-width: 110rem) {
	header > div > div:has(> ul) {
		margin-left: 0.85rem;
	}

	header > div > div > ul {
		gap: 0.45rem;
	}

	header > div > div img {
		width: 1.9rem;
		height: 1.9rem;
	}

	.warenkorb {
		margin-left: 1.25rem;
	}

	header nav > ul > li > a,
	header nav > ul > li > div > a {
		font-size: 0.92rem;
	}

	body:has(.hero) header > div > a {
		padding: 0.95rem 0.9rem 0.75rem;
	}

	body:has(.hero) header > div > a img {
		height: 3.85rem;
	}

	body:has(.hero) header > div > a::after {
		bottom: -0.65rem;
		border-radius: 0 0 1.2rem 1.2rem;
	}

	body:not(:has(.hero)) header > div > a {
		padding-inline: 0.85rem;
	}

	body:not(:has(.hero)) header > div > a img {
		height: 3.05rem;
	}
}

/* 13- und 14-Zoll: Logo noch etwas kleiner */
@media (min-width: 72.01rem) and (max-width: 96rem) {
	body:has(.hero) header > div > a {
		padding: 0.8rem 0.7rem 0.6rem;
	}

	body:has(.hero) header > div > a img {
		height: 3.35rem;
	}

	body:not(:has(.hero)) header > div > a img {
		height: 2.85rem;
	}
}

body:has(.hero) header nav,
body:has(.hero) header > div > div,
body:has(.hero) .burger {
	align-self: center;
}

body:has(.hero) header nav > ul > li > a,
body:has(.hero) header nav > ul > li > div,
body:has(.hero) header nav > ul > li > div > a,
body:has(.hero) header nav button {
	color: var(--white-color);
	cursor: pointer;
}

body:has(.hero) header nav > ul > li > a:hover,
body:has(.hero) header nav > ul > li > a:focus-visible,
body:has(.hero) header nav > ul > li > div > a:hover,
body:has(.hero) header nav > ul > li > div > a:focus-visible,
body:has(.hero) header nav > ul > li > div:hover > a,
body:has(.hero) header nav button:hover,
body:has(.hero) header nav button:focus-visible {
	color: var(--white-color);
}

body:has(.hero) header nav ul ul a,
body:has(.hero) header nav ul ul a:hover,
body:has(.hero) header nav ul ul a:focus-visible {
	color: var(--text-color);
}

body:has(.hero) header nav ul ul a:hover,
body:has(.hero) header nav ul ul a:focus-visible,
body:has(.hero) header nav ul ul a[aria-current="page"] {
	color: var(--primary-color);
}

body:not(:has(.hero)) .burger > span:first-child span {
	background: var(--text-color);
}

body:has(.hero) header a:focus-visible,
body:has(.hero) header button:focus-visible {
	outline-color: var(--primary-color);
}

@media (prefers-reduced-motion: reduce) {
	header nav ul ul,
	header nav ul ul li,
	header svg,
	dialog > ul > li > div + div,
	header nav ul ul a,
	header nav ul ul a::before,
	.burger > span:first-child span,
	dialog > div:first-child > button > span:first-child span,
	dialog,
	dialog::backdrop,
	dialog > ul > li {
		transition: none;
		animation: none;
	}
}

/* Slideshow */

.hero {
	position: relative;
	height: 80vh;
	height: 80dvh;
	margin: 0.5rem;
	border-radius: 0.8rem;
	background: var(--text-color);
	color: var(--white-color);
	overflow: hidden;
}

@media (min-width: 100rem) {
	.hero {
		height: 60vh;
		height: 60dvh;
	}
}

.hero > div:first-child,
.hero article {
	height: 100%;
}

.hero article {
	position: absolute;
	inset: 0;
	opacity: 0;
	z-index: 0;
	pointer-events: none;
}

.hero article.is-active {
	opacity: 1;
	z-index: 1;
	pointer-events: auto;
}

.hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero article > div[aria-hidden] {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.18);
}

.hero article > div:not([aria-hidden]) {
	position: absolute;
	z-index: 2;
	left: max(1.25rem, calc((100% - 90rem) / 2));
	top: 67%;
	width: min(40rem, calc(100% - 2.5rem));
	transform: translateY(-50%);
	text-align: left;
}

.hero article > div:not([aria-hidden]) > :first-child {
	margin: 0 0 0.35rem;
}

.hero article > div:not([aria-hidden]) > p:not(:first-child) {
	margin: 0;
}

.hero article > div:not([aria-hidden]) > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.7rem;
	margin-top: 0.95rem;
}

.hero > button[data-hero] {
	position: absolute;
	z-index: 4;
	top: 46%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.38);
	color: var(--white-color);
	cursor: pointer;
}

.hero > button[data-hero]:hover,
.hero > button[data-hero]:focus-visible {
	background: rgba(0, 0, 0, 0.62);
}

.hero > button[data-hero="prev"] {
	left: 0.85rem;
}

.hero > button[data-hero="next"] {
	right: 0.85rem;
}

.hero > div:last-child:not(:first-child) {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 1.15rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.2rem;
}

.hero > div:last-child:not(:first-child) button {
	position: relative;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.hero > div:last-child:not(:first-child) button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--white-color) 55%, transparent);
	transform: translate(-50%, -50%);
}

.hero > div:last-child:not(:first-child) button[aria-current="true"]::before {
	background: var(--white-color);
}

.hero button:focus-visible,
.hero a:focus-visible {
	outline: 3px solid var(--white-color);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	.hero article {
		transition: opacity 0.55s ease;
	}

	.hero article.is-active > div:not([aria-hidden]) > :first-child,
	.hero article.is-active > div:not([aria-hidden]) > p:not(:first-child),
	.hero article.is-active > div:not([aria-hidden]) > div {
		animation: hero-copy-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.hero article.is-active > div:not([aria-hidden]) > :first-child {
		animation-delay: 0.12s;
	}

	.hero article.is-active > div:not([aria-hidden]) > p:not(:first-child) {
		animation-delay: 0.28s;
	}

	.hero article.is-active > div:not([aria-hidden]) > div {
		animation-delay: 0.44s;
	}
}

@keyframes hero-copy-in {
	from {
		opacity: 0;
		transform: translateY(0.85rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Referenzen */

.referenz-show {
	position: relative;
	height: 36rem;
	margin: 1.35rem 0 0;
	border-radius: 0.8rem;
	background: var(--text-color);
	overflow: hidden;
}

.referenz-show > div:first-child,
.referenz-show article {
	height: 100%;
}

.referenz-show article {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	z-index: 0;
	pointer-events: none;
}

.referenz-show article.is-active {
	opacity: 1;
	z-index: 1;
	pointer-events: auto;
}

.referenz-show img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.referenz-show > button[data-show] {
	position: absolute;
	z-index: 4;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.35rem;
	height: 2.35rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.38);
	color: var(--white-color);
	cursor: pointer;
}

.referenz-show > button[data-show]:hover,
.referenz-show > button[data-show]:focus-visible {
	background: rgba(0, 0, 0, 0.62);
}

.referenz-show > button[data-show="prev"] {
	left: 0.7rem;
}

.referenz-show > button[data-show="next"] {
	right: 0.7rem;
}

.referenz-show > div:last-child {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 0.7rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.2rem;
}

.referenz-show > div:last-child button {
	position: relative;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.referenz-show > div:last-child button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--white-color) 55%, transparent);
	transform: translate(-50%, -50%);
}

.referenz-show > div:last-child button[aria-current="true"]::before {
	background: var(--white-color);
}

.referenz-show button:focus-visible {
	outline: 3px solid var(--white-color);
	outline-offset: 3px;
}

.referenz-show + h2 {
	margin-top: 4rem;
}

@media (max-width: 40rem) {
	.referenz-show {
		height: 27rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.referenz-show article {
		transition: opacity 0.55s ease;
	}
}

.referenzen h2 {
	margin-bottom: 0.2rem;
}

.referenzen .logo-marquee {
	margin-top: 0.85rem;
}

.referenz-raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.15rem;
	margin: 1.6rem 0 0;
	padding: 0;
	list-style: none;
}

.referenz-raster li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 7.5rem;
	margin: 0;
	padding: 1.25rem 1.4rem;
	border: 1px solid #f3e4d6;
	border-radius: 1.15rem;
	background: #fff;
}

.referenz-raster img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 3.1rem;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.85;
}

.referenz-raster img.is-light {
	filter: grayscale(1) brightness(0.35);
	opacity: 1;
}

@media (max-width: 62rem) {
	.referenz-raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 40rem) {
	.referenz-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.logo-marquee {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: clip;
	contain: inline-size;
	max-width: 100%;
	background: var(--white-color);
	padding: 1.65rem 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.logo-marquee > div {
	display: flex;
	width: max-content;
	animation: logo-marquee 150s linear infinite;
}

.logo-marquee ul {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 4.25rem;
	margin: 0;
	padding: 0 4.25rem 0 0;
	list-style: none;
}

.logo-marquee li {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 9rem;
	width: 9rem;
	height: 3.25rem;
}

.logo-marquee img {
	display: block;
	width: 100%;
	height: 2.7rem;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.8;
}

.logo-marquee img.is-light {
	filter: grayscale(1) brightness(0.4);
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.logo-marquee:hover > div,
	.logo-marquee:focus-within > div {
		animation-play-state: paused;
	}
}

@media (prefers-reduced-motion: reduce) {
	.logo-marquee {
		overflow-x: auto;
	}

	.logo-marquee > div {
		animation: none;
	}

	.logo-marquee ul[aria-hidden="true"] {
		display: none;
	}
}

@keyframes logo-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* Angebot */

.angebot-hinweis {
	max-width: 42rem;
	margin: 1.6rem auto 0;
}

.angebot-hinweis + .angebot {
	margin-top: 1.35rem;
}

.angebot {
	--bild: 12rem;
	--karten-abstand: 2.75rem;
	width: 100%;
	max-width: 100%;
	margin: 3.5rem 0 0;
}

.abschnitt > .angebot:first-child {
	margin-top: 0;
}

.angebot > div:first-child {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 1.15rem;
}

.angebot > div:first-child button {
	min-height: 2.15rem;
	padding: 0.25rem 0.8rem;
	border: 1px solid var(--hellgrau);
	border-radius: var(--border-radius-gross);
	background: var(--white-color);
	color: var(--text-color);
	font-family: var(--font-headline);
	font-size: 0.98rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: none;
}

.angebot > div:first-child button:hover,
.angebot > div:first-child button:focus-visible {
	border-color: var(--primary-color);
	background: var(--white-color);
	color: var(--primary-color);
	box-shadow: none;
}

.angebot > div:first-child button[aria-pressed="true"] {
	border-color: var(--primary-color);
	background: var(--primary-color);
	color: var(--white-color);
	box-shadow: none;
}

.angebot > div:nth-child(2) {
	position: relative;
	min-width: 0;
	max-width: 100%;
}

.angebot [data-angebot-view] {
	overflow: clip;
	contain: inline-size;
	min-width: 0;
	max-width: 100%;
	padding: calc(var(--bild) / 2 + 0.75rem) 0.45rem 1.2rem;
	touch-action: pan-y;
	user-select: none;
}

.angebot [data-angebot-view].is-grabbing,
.angebot [data-angebot-view].is-grabbing * {
	cursor: grabbing;
}

.angebot [data-angebot-track] {
	display: flex;
	align-items: stretch;
	gap: var(--karten-abstand);
}

@media (prefers-reduced-motion: no-preference) {
	.angebot [data-angebot-track] {
		transition: transform 0.45s ease;
	}
}

.angebot [data-angebot-dir] {
	position: absolute;
	top: calc(50% + var(--bild) / 4 - 0.225rem);
	z-index: 2;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--text-color);
	box-shadow: none;
	cursor: pointer;
}

.angebot [data-angebot-dir]:hover,
.angebot [data-angebot-dir]:focus-visible {
	background: transparent;
	color: var(--primary-color);
	box-shadow: none;
}

.angebot [data-angebot-dir="prev"] {
	left: -2.6rem;
}

.angebot [data-angebot-dir="next"] {
	right: -2.6rem;
}

@media (max-width: 90rem) {
	.angebot [data-angebot-dir="prev"] {
		left: 0.15rem;
	}

	.angebot [data-angebot-dir="next"] {
		right: 0.15rem;
	}
}

.angebot [data-angebot-dir][hidden],
.angebot [data-angebot-dots][hidden] {
	display: none;
}

.angebot [data-angebot-dots] {
	display: flex;
	justify-content: center;
	gap: 0.45rem;
	min-height: 0.7rem;
	margin-top: 1.15rem;
}

.angebot [data-angebot-dots] button {
	width: 0.38rem;
	height: 0.38rem;
	padding: 0;
	border: 0;
	border-radius: 1rem;
	background: var(--hellgrau);
	cursor: pointer;
}

.angebot [data-angebot-dots] button[aria-current="true"] {
	width: 1.15rem;
	background: var(--primary-color);
}

.angebot article {
	position: relative;
	display: flex;
	flex: 0 0 calc((100% - 2 * var(--karten-abstand)) / 3);
	flex-direction: column;
	border-radius: 1.15rem;
	background: var(--white-color);
	box-shadow: var(--box-shadow);
	min-height: var(--kartenhoehe, auto);
}

.angebot article:has(> img) {
	padding-top: calc(var(--bild) / 2 + 1.05rem);
}

.angebot article[hidden] {
	display: none;
}

.angebot img {
	position: absolute;
	top: calc(var(--bild) / -2);
	left: 50%;
	z-index: 1;
	display: block;
	width: 90%;
	height: var(--bild);
	object-fit: cover;
	border-radius: 0.85rem;
	transform: translateX(-50%);
}

.angebot article > div {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1;
	padding: 0.95rem 1.05rem 1.15rem;
}

.angebot article > div > p:first-child {
	margin: 0;
	color: var(--text-color);
	font-family: var(--font-headline);
	font-size: 1.72rem;
	font-weight: 700;
	line-height: 1.05;
}

.angebot article > div > p {
	margin: 0;
	color: var(--dunkelgrau);
	line-height: 1.45;
}

.angebot article > div > p:has(> svg) {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--text-color);
	font-weight: 400;
}

.angebot article > div > p:first-of-type svg {
	flex-shrink: 0;
}

.angebot article > div > p:has(+ .content-schwarz) {
	margin-top: 0.65rem;
	color: var(--text-color);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.15;
}

.angebot article > div > p:has(+ .content-schwarz) span {
	font-size: 1.15rem;
	font-weight: 400;
	color: var(--text-color);
}

.angebot article .content-schwarz {
	margin-top: 0.35rem;
}

.angebot article .content-schwarz + p {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: calc(1.7rem + var(--enthaelt-zusatz, 0px));
	color: var(--dunkelgrau);
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}

.angebot article .content-schwarz + p::before,
.angebot article .content-schwarz + p::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--hellgrau);
}

.angebot + p,
.angebot + p + p,
.angebot-klein {
	margin: 0.85rem 0 0;
	color: var(--dunkelgrau);
	font-size: 0.9rem;
	line-height: 1.4;
	text-align: left;
}

.angebot-uebersicht {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.85rem;
	margin-top: 2.75rem;
}

section:has(> .overhead) > .angebot-uebersicht {
	margin-top: 3.25rem;
}

.angebot article ul {
	list-style: none;
	margin: 0.15rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.angebot article li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	line-height: 1.3;
}

@media (max-width: 62rem) {
	.angebot article {
		flex-basis: calc((100% - var(--karten-abstand)) / 2);
	}
}

@media (max-width: 40rem) {
	.angebot article {
		flex-basis: 100%;
	}

	.angebot > div:nth-child(2):has([data-angebot-dir]:not([hidden])) {
		display: grid;
		grid-template-columns: 1fr auto auto;
		grid-template-areas:
			". prev next"
			"view view view";
		align-items: center;
		column-gap: 0.1rem;
		row-gap: 0.15rem;
	}

	.angebot > div:nth-child(2):has([data-angebot-dir]:not([hidden])) [data-angebot-view] {
		--schatten: 0.9rem;
		grid-area: view;
		width: calc(100% + var(--schatten) * 2);
		max-width: none;
		margin-inline: calc(var(--schatten) * -1);
		padding-left: var(--schatten);
		padding-right: var(--schatten);
	}

	.angebot [data-angebot-dir] {
		position: static;
		top: auto;
		transform: none;
		width: 2.4rem;
		height: 2.4rem;
	}

	.angebot [data-angebot-dir="prev"] {
		grid-area: prev;
		left: auto;
	}

	.angebot [data-angebot-dir="next"] {
		grid-area: next;
		right: auto;
	}

	.angebot {
		--bild: 11rem;
	}
}

.katalog {
	display: grid;
	grid-template-columns: 16rem minmax(0, 1fr);
	column-gap: 1.75rem;
	align-items: start;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin-top: 1.15rem;
}

#alle-pakete {
	scroll-margin-top: 7.25rem;
}

.katalog > details {
	grid-column: 1;
	grid-row: 1 / span 3;
	position: static;
	align-self: start;
	max-height: none;
	overflow: visible;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.katalog summary {
	display: none;
}

.katalog fieldset {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.35rem;
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.katalog fieldset + fieldset {
	margin-top: 1.05rem;
	padding-top: 0.95rem;
	border-top: 1px solid var(--hellgrau);
}

.katalog legend {
	float: left;
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0 0 0.15rem;
	padding: 0;
	color: var(--text-color);
	font-family: var(--font-headline);
	font-size: 1.12rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.katalog form > fieldset:first-of-type > legend {
	height: 2.5rem;
	margin-bottom: 0.55rem;
	line-height: 2.5rem;
}

.katalog label {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0.15rem 0;
	font-size: 1rem;
	line-height: 1.35;
	cursor: pointer;
}

.katalog input[type="checkbox"],
.katalog input[type="radio"] {
	margin: 0.2rem 0 0;
	flex-shrink: 0;
}

.katalog-preis {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 0.55rem 0.55rem;
	align-items: center;
	width: 100%;
}

.katalog-preis label {
	margin: 0;
}

.katalog-preis > span {
	color: var(--text-color);
}

.katalog-preis input[type="number"] {
	width: 100%;
	height: 2.4rem;
	padding: 0 0.6rem;
	border: 1px solid var(--hellgrau);
	border-radius: 0.65rem;
	background: var(--white-color);
	color: var(--text-color);
	font: inherit;
}

.katalog-regler {
	--regler-hoehe: 1.15rem;
	--regler-daumen: 1.05rem;
	position: relative;
	grid-column: 1 / -1;
	height: var(--regler-hoehe);
	margin: 0.7rem 0 0.1rem;
}

.katalog-regler::before,
.katalog-regler [data-preis-balken] {
	position: absolute;
	top: 50%;
	height: 0.22rem;
	border-radius: 999px;
	transform: translateY(-50%);
	pointer-events: none;
}

.katalog-regler::before {
	content: "";
	right: 0;
	left: 0;
	background: var(--hellgrau);
}

.katalog-regler [data-preis-balken] {
	background: var(--text-color);
}

.katalog-regler input[type="range"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: transparent;
	pointer-events: none;
	appearance: none;
}

.katalog-regler input[type="range"]::-webkit-slider-runnable-track {
	height: var(--regler-hoehe);
	background: transparent;
	border: 0;
}

.katalog-regler input[type="range"]::-moz-range-track {
	height: var(--regler-hoehe);
	background: transparent;
	border: 0;
}

.katalog-regler input[type="range"]::-webkit-slider-thumb {
	width: var(--regler-daumen);
	height: var(--regler-daumen);
	margin-top: calc((var(--regler-hoehe) - var(--regler-daumen)) / 2);
	border: 2px solid var(--white-color);
	border-radius: 50%;
	background: var(--text-color);
	box-shadow: 0 1px 4px rgba(18, 18, 18, 0.22);
	pointer-events: auto;
	appearance: none;
	cursor: pointer;
}

.katalog-regler input[type="range"]::-moz-range-thumb {
	width: var(--regler-daumen);
	height: var(--regler-daumen);
	border: 2px solid var(--white-color);
	border-radius: 50%;
	background: var(--text-color);
	box-shadow: 0 1px 4px rgba(18, 18, 18, 0.22);
	pointer-events: auto;
	cursor: pointer;
}

.katalog-regler input[data-preis-von] {
	z-index: 2;
}

.katalog-regler input[data-preis-bis] {
	z-index: 3;
}

.katalog-regler input[type="range"]:hover,
.katalog-regler input[type="range"]:focus-visible,
.katalog-regler input[type="range"]:active {
	z-index: 4;
}

.katalog-ergebnis {
	display: contents;
	min-width: 0;
}

.katalog-leiste {
	display: flex;
	grid-column: 2;
	grid-row: 1;
	align-items: center;
	align-self: start;
	justify-content: space-between;
	gap: 1rem;
	height: 2.5rem;
	margin: 0 0 1.35rem;
}

.katalog-leiste p {
	margin: 0;
	color: var(--text-color);
}

.katalog-leiste label {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	cursor: default;
	font-weight: 400;
}

.katalog-leiste select {
	height: 2.5rem;
	min-width: 12rem;
	padding: 0 0.7rem;
	border: 1px solid var(--hellgrau);
	border-radius: 0.7rem;
	background: var(--white-color);
	color: var(--text-color);
	font: inherit;
}

.katalog-leiste select:focus,
.katalog-leiste select:focus-visible {
	outline: none;
	box-shadow: none;
}

.katalog [data-filter-reset] {
	margin-top: 0.35rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--primary-color);
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.katalog [data-filter-reset]:hover,
.katalog [data-filter-reset]:focus-visible {
	color: var(--dunkelorange);
}

.katalog [data-katalog-karten] {
	display: grid;
	grid-column: 2;
	grid-row: 2;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 1.75rem;
	row-gap: calc(var(--bild) / 2 + 2rem);
	padding-top: calc(var(--bild) / 2);
}

/* Tablet quer: 2 Produkte nebeneinander, ab Desktop wieder 3 */
@media (max-width: 75rem) {
	.katalog [data-katalog-karten] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.katalog article {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
}

.katalog [data-katalog-leer] {
	grid-column: 2;
	grid-row: 3;
	margin: 1rem 0 0;
}

@media (max-width: 62rem) {
	.katalog {
		grid-template-columns: 1fr;
	}

	.katalog > details {
		grid-column: auto;
		grid-row: auto;
		position: static;
		max-height: none;
		overflow: visible;
		padding-top: 0;
	}

	.katalog-ergebnis {
		display: block;
	}

	.katalog summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		height: 2.5rem;
		padding: 0 0.85rem 0 0.7rem;
		border: 1px solid var(--hellgrau);
		border-radius: 0.7rem;
		background: var(--white-color);
		font-family: var(--font-headline);
		font-weight: 600;
		list-style: none;
		cursor: pointer;
	}

	.katalog summary svg {
		flex: 0 0 auto;
		width: 1.125rem;
		height: 1.125rem;
	}

	.katalog summary::-webkit-details-marker {
		display: none;
	}

	.katalog details[open] summary {
		border-bottom-color: transparent;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}

	.katalog details[open] summary svg {
		transform: rotate(180deg);
	}

	.katalog details[open] form {
		padding: 0.15rem 1rem 1rem;
		border: 1px solid var(--hellgrau);
		border-top: 0;
		border-radius: 0 0 0.9rem 0.9rem;
	}

	.katalog form > fieldset:first-of-type > legend,
	.katalog-leiste {
		height: auto;
	}

	.katalog > details {
		margin-bottom: 1.15rem;
	}

	.katalog-leiste {
		align-items: center;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 1rem;
		margin-bottom: 1.6rem;
	}

	.katalog-leiste p {
		margin-right: 0;
		flex: 0 1 auto;
	}

	.katalog-leiste label {
		flex: 0 1 auto;
		justify-content: flex-end;
		gap: 0;
		min-width: 0;
		max-width: 100%;
	}

	.katalog-leiste label > span {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.katalog-leiste select {
		flex: 0 1 auto;
		width: auto;
		min-width: 9.5rem;
		max-width: 14rem;
		padding: 0 2.15rem 0 0.7rem;
		appearance: none;
		-webkit-appearance: none;
		background-color: var(--white-color);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 L8 10.5 L12.5 6' fill='none' stroke='%23121212' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 0.85rem center;
		background-size: 1.125rem 1.125rem;
	}

	.katalog [data-katalog-karten] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 40rem) {
	.katalog [data-katalog-karten] {
		grid-template-columns: 1fr;
		row-gap: calc(var(--bild) / 2 + 2.75rem);
	}
}

#weihnachtsmenues {
	scroll-margin-top: 7.25rem;
}

.shop-special > p:first-child,
.shop-rabatt > div > div:first-child > p:first-child {
	margin: 0 0 0.35rem;
	color: var(--primary-color);
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.2;
}

.shop-special h2,
.shop-rabatt h2 {
	margin-top: 0;
}

.shop-special [data-special-kasten] {
	position: relative;
	margin-top: 1.25rem;
	padding: clamp(1.25rem, 2.2vw, 1.85rem);
	padding-bottom: 2.35rem;
	border-radius: 1.35rem;
	background: #f0f0f0;
}

.shop-special [data-special-kopf] {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

.shop-special [data-special-view] {
	position: relative;
}

.shop-special [data-special-view] article {
	display: grid;
	grid-template-columns: minmax(0, 0.89fr) minmax(0, 1.11fr);
	gap: 2.45rem;
	align-items: center;
}

.shop-special [data-special-view] article[hidden] {
	display: none;
}

.shop-special [data-special-view] article.is-laufend {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.shop-special img {
	width: 100%;
	height: 22rem;
	object-fit: cover;
	border-radius: 1.15rem;
}

.shop-special article div > p:first-child {
	display: inline-block;
	width: fit-content;
	margin: 0 0 0.7rem;
	padding: 0.22rem 0.7rem;
	border-radius: 999px;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.3;
}

.shop-special article div > p:nth-child(2) {
	margin: 0 0 0.35rem;
	font-family: var(--font-headline);
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	font-weight: 700;
	line-height: 1.05;
}

.shop-special article p {
	margin: 0 0 0.7rem;
}

.shop-special article p:has(> span) {
	margin-top: 0.4rem;
	color: var(--text-color);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.15;
}

.shop-special article p:has(> span) span {
	font-size: 1.15rem;
	font-weight: 400;
}

.shop-special [data-special-nav] {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	margin-bottom: 0.2rem;
}

.shop-special [data-special-dir] {
	display: inline-flex;
	padding: 0.15rem;
	border: 0;
	background: none;
	color: var(--text-color);
	cursor: pointer;
}

.shop-special [data-special-stand] {
	min-width: 3.4rem;
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.shop-kategorien {
	display: flex;
	gap: 0.9rem;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin-top: 1.25rem;
	overflow-x: auto;
	padding-bottom: 0.35rem;
}

.shop-kategorien button {
	display: flex;
	flex: 0 0 7.4rem;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text-color);
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
}

.shop-kategorien button > :first-child {
	width: 6.6rem;
	height: 6.6rem;
	border: 2px solid transparent;
	border-radius: 1rem;
	object-fit: cover;
}

.shop-kategorien button > span:first-child {
	display: grid;
	place-items: center;
	border-color: var(--hellgrau);
	font-family: var(--font-headline);
	font-size: 1.05rem;
}

.shop-kategorien button[aria-pressed="true"] > :first-child {
	border-color: var(--primary-color);
}

.shop-rabatt > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.75rem;
	padding: 1.35rem 1.5rem;
	border: 1px solid var(--hellorange);
	border-radius: 1.15rem;
}

.shop-rabatt h2 {
	margin-bottom: 0.45rem;
}

.shop-rabatt p:last-child {
	margin-bottom: 0;
}

.shop-rabatt [data-gutschein] {
	margin: 0 0 0.75rem;
	color: var(--primary-color);
	font-family: var(--font-headline);
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-align: center;
}

.shop-rabatt > div > div:last-child {
	flex: 0 0 auto;
	text-align: center;
}

@media (max-width: 62rem) {
	.shop-special [data-special-kasten] {
		padding: 1.15rem 1.1rem 1.75rem;
	}

	.shop-special [data-special-view] article,
	.shop-rabatt > div {
		grid-template-columns: 1fr;
		flex-direction: column;
		align-items: stretch;
	}

	.shop-special img {
		height: 16rem;
	}

	.shop-rabatt [data-gutschein],
	.shop-rabatt > div > div:last-child {
		text-align: left;
	}
}

.ablauf {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.15rem;
	margin-top: 1.5rem;
}

.ablauf article {
	padding: 1.2rem 1.15rem 1.3rem;
	border: 1px solid var(--hellgrau);
	border-radius: 1.15rem;
	background: var(--white-color);
}

.ablauf h3 {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	font-family: var(--font);
	font-size: 1.06rem;
	font-weight: 700;
	line-height: 1.3;
}

.ablauf h3 span {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 0.92rem;
}

.ablauf p {
	margin: 0.55rem 0 0;
}

@media (max-width: 62rem) {
	.ablauf {
		grid-template-columns: 1fr;
	}
}

/* Text mit Bild */

section:not(.uebernahme):has(> div > img) {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	column-gap: 3rem;
	align-items: stretch;
	padding-block: 2rem;
}

section:has(> div:last-child > img) {
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

section:not(.uebernahme):has(> div > img) > div:has(> img) {
	position: relative;
}

section:not(.uebernahme):has(> div > img) img {
	position: absolute;
	inset: -2rem 0;
	width: 100%;
	height: calc(100% + 4rem);
	object-fit: cover;
	border-radius: 1.15rem;
}

section:not(.uebernahme):has(> div > img) h2 {
	margin-bottom: 0.75rem;
}

section:not(.uebernahme):has(> div > img) p:last-child {
	margin-bottom: 0;
}

@media (max-width: 63.99rem) {
	section:not(.uebernahme):has(> div > img) {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.75rem;
		padding-block: 0;
	}

	section:not(.uebernahme):has(> div > img) > div {
		min-width: 0;
	}

	section:not(.uebernahme):has(> div > img) > div:has(> img) {
		order: -1;
	}

	section:not(.uebernahme):has(> div > img) img {
		position: static;
		height: 18rem;
		inset: auto;
	}
}

.uebernahme {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	column-gap: 3rem;
	align-items: start;
	padding-top: 2rem;
}

.uebernahme > div:first-child {
	grid-column: 1;
	grid-row: 1;
}

.uebernahme > div:has(> img) {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	align-self: stretch;
}

.uebernahme > ul {
	grid-column: 1 / -1;
	grid-row: 2;
}

.uebernahme h2 {
	margin: 0 0 0.75rem;
}

.uebernahme img {
	position: absolute;
	top: -2rem;
	left: 0;
	width: 100%;
	height: calc(100% + 2rem);
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 1.15rem;
}

.leistungen {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.85rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

.leistungen li {
	min-width: 0;
}

.leistungen a,
.leistungen li:not(:has(> a)) {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	height: 100%;
	padding: 0.9rem 1rem 1rem;
	border-radius: 1rem;
	background: #fff4e8;
	color: inherit;
	text-decoration: none;
}

main .leistungen a {
	text-decoration: none;
}

.leistungen a:hover,
.leistungen a:focus-visible {
	background: #ffe8d0;
}

.leistungen span:first-child {
	font-weight: 600;
	line-height: 1.3;
}

.leistungen span:last-child {
	color: var(--dunkelgrau);
	line-height: 1.45;
}

.leistungen a:hover span:first-child,
.leistungen a:focus-visible span:first-child {
	color: var(--primary-color);
}

@media (max-width: 63.99rem) {
	.uebernahme {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.75rem;
		padding-top: 0;
	}

	.uebernahme > div {
		min-width: 0;
	}

	.uebernahme > div:has(> img) {
		grid-column: 1;
		grid-row: 1;
	}

	.uebernahme > div:first-child {
		grid-column: 1;
		grid-row: 2;
	}

	.uebernahme > ul {
		grid-column: 1;
		grid-row: 3;
	}

	.uebernahme > div:has(> img) {
		position: static;
	}

	.uebernahme img {
		position: static;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		width: 100%;
		height: 18rem;
		margin-top: 0;
	}

	.leistungen {
		grid-template-columns: 1fr 1fr;
	}

	.leistungen > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 40rem) {
	.uebernahme {
		row-gap: 1rem;
	}

	.uebernahme > div:first-child > p:last-child {
		margin-bottom: 0;
	}

	.uebernahme img {
		height: 14rem;
	}

	.leistungen {
		grid-template-columns: 1fr;
		margin-top: 0;
	}

	.leistungen > li:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

/* Geschäftsführer */

.inhaber {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	column-gap: 4rem;
	align-items: stretch;
}

.inhaber > img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	object-position: center 22%;
	border-radius: 1.1rem;
}

.inhaber > div {
	padding: 2rem 0;
}

.inhaber h2 + p,
.inhaber h2 + p + p {
	margin: 0 0 1rem;
	line-height: 1.6;
}

.inhaber h2 + p + p {
	margin-bottom: 2rem;
}

.inhaber ul {
	list-style: none;
}

.inhaber ul:first-of-type {
	margin: 0 0 1.8rem;
}

.inhaber ul:first-of-type li {
	position: relative;
	margin: 0 0 0.65rem;
	padding-left: 1.35rem;
	line-height: 1.5;
}

.inhaber ul:first-of-type li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--primary-color);
}

.inhaber-signatur {
	margin: 0.4rem 0 0;
	line-height: 1.35;
}

.inhaber-signatur span {
	display: block;
	font-family: var(--font-signatur);
	font-size: clamp(2.4rem, 4vw, 3rem);
	line-height: 1.15;
}

@media (max-width: 62rem) {
	.inhaber {
		grid-template-columns: 1fr;
		row-gap: 2.4rem;
	}

	.inhaber > div {
		padding: 0;
	}

	.inhaber > img {
		height: auto;
		aspect-ratio: 3 / 2;
	}
}

/* Schnellanfrage */

.schnellanfrage {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.85fr);
	column-gap: 4rem;
	align-items: center;
}

.schnellanfrage > div > p:first-child {
	margin: 0 0 0.35rem;
	color: var(--primary-color);
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.2;
}

.schnellanfrage h2 {
	margin: 0 0 1rem;
}

.schnellanfrage h2 + p {
	margin: 0 0 1.6rem;
}

.schnellanfrage ul {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin: 0;
	padding: 0.85rem;
	list-style: none;
	border-radius: 1.25rem;
	background: #fff4e8;
}

.schnellanfrage li {
	display: grid;
	grid-template-columns: 21px minmax(0, 1fr);
	column-gap: 0.8rem;
	row-gap: 0.15rem;
	padding: 0.95rem 1rem;
	border-radius: 0.9rem;
	background: var(--white-color);
}

.schnellanfrage li .haken {
	grid-row: 1 / span 2;
	align-self: center;
}

.schnellanfrage li span:nth-child(2) {
	font-weight: 600;
	line-height: 1.3;
}

.schnellanfrage li span:nth-child(3) {
	color: var(--dunkelgrau);
	line-height: 1.4;
}

@media (max-width: 62rem) {
	.schnellanfrage {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2rem;
	}

	.schnellanfrage > div,
	.schnellanfrage > ul {
		min-width: 0;
		max-width: 100%;
	}
}

/* Schritte */

.schritte {
	text-align: center;
}

.schritte > p:first-child {
	margin: 0 0 0.8rem;
	color: var(--primary-color);
	font-size: 1.12rem;
	font-weight: 600;
}

.schritte > h2 {
	margin: 0;
	font-size: clamp(2.15rem, 4.2vw, 3.35rem);
	line-height: 1.08;
}

.schritte > div {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: stretch;
	margin-top: 1.5rem;
	padding: 1.75rem 0 2.6rem;
}

.schritte > div::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 22%;
	z-index: 0;
	width: min(34rem, 80%);
	height: 7rem;
	background: radial-gradient(ellipse, rgba(255, 149, 42, 0.34), transparent 70%);
	transform: translateX(-50%);
	pointer-events: none;
}

.schritte article {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(19.5rem, 34%);
	padding: 1.3rem 1.2rem 1.15rem;
	overflow: hidden;
	border-radius: 1.45rem;
	background: linear-gradient(180deg, var(--white-color) 58%, #fff4ea 100%);
	box-shadow: 0 18px 44px rgba(18, 18, 18, 0.08);
	text-align: left;
}

.schritte article:first-child {
	transform: rotate(-7deg) translateY(1.25rem);
}

.schritte article:nth-child(2) {
	z-index: 2;
	margin-inline: -1.6rem;
	transform: translateY(-0.7rem);
	box-shadow: 0 26px 54px rgba(18, 18, 18, 0.12);
}

.schritte article:last-child {
	transform: rotate(7deg) translateY(1.25rem);
}

.schritte article h3 {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	font-family: var(--font);
	font-size: 1.06rem;
	font-weight: 700;
	line-height: 1.25;
}

.schritte article h3 span {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 0.92rem;
}

.schritte article p {
	margin: 0.5rem 0 0;
	color: var(--dunkelgrau);
	font-size: 0.98rem;
	line-height: 1.45;
}

.schritte article:first-child > div {
	position: relative;
	height: 9.2rem;
	margin-top: auto;
}

.schritte article:first-child img {
	position: absolute;
	object-fit: cover;
	border-radius: 0.85rem;
	box-shadow: 0 10px 22px rgba(18, 18, 18, 0.14);
}

.schritte article:first-child img:first-child {
	left: 0.15rem;
	bottom: 0;
	width: 6.6rem;
	height: 8rem;
	transform: rotate(-8deg);
}

.schritte article:first-child img:last-child {
	right: 0.1rem;
	bottom: 0.45rem;
	width: 9.4rem;
	height: 6.7rem;
	transform: rotate(4deg);
}

.schritte ul {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: auto;
	padding-top: 0.85rem;
}

.schritte li {
	display: grid;
	grid-template-columns: 2.55rem minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	column-gap: 0.65rem;
	row-gap: 0.35rem;
	align-items: center;
	padding: 0.45rem 0.55rem;
	border-radius: 0.85rem;
	background: var(--white-color);
	box-shadow: 0 6px 16px rgba(18, 18, 18, 0.06);
}

.schritte li img {
	grid-row: 1 / span 2;
	width: 2.55rem;
	height: 2.55rem;
	object-fit: cover;
	border-radius: 0.55rem;
}

.schritte li > span:not(.haken) {
	display: block;
	align-self: center;
	height: 0.42rem;
	min-height: 0.42rem;
	max-height: 0.42rem;
	border-radius: 1rem;
	background: #ececec;
}

.schritte li > span:nth-child(2) {
	width: 78%;
}

.schritte li > span:nth-child(3) {
	width: 46%;
}

.schritte li > .haken,
.schritte li svg {
	grid-row: 1 / span 2;
	grid-column: 3;
	align-self: center;
	width: 21px;
	height: 21px;
}

.schritte li svg {
	color: var(--primary-color);
}

.schritte li:nth-child(2) svg {
	color: var(--hellgrau);
}

.schritte article:last-child > div {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 1.15rem;
	color: var(--text-color);
	font-size: 0.92rem;
}

.schritte article:last-child > div > span:nth-child(odd):not(:last-child) {
	color: var(--dunkelgrau);
	font-size: 0.82rem;
}

.schritte article:last-child > div > span:nth-child(even) {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.45rem;
	padding: 0.4rem 0.7rem;
	border-radius: 0.8rem;
	background: var(--white-color);
	box-shadow: 0 5px 14px rgba(18, 18, 18, 0.06);
}

.schritte article:last-child > div > span:nth-child(even) svg:first-child {
	flex-shrink: 0;
	color: var(--primary-color);
}

.schritte article:last-child > div > span:nth-child(even) svg:last-child {
	margin-left: auto;
	color: var(--dunkelgrau);
}

.schritte > a {
	display: block;
	width: fit-content;
	margin-inline: auto;
}

.schritte > .content-schwarz {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	margin-top: 0.25rem;
}

.schritte > a:last-of-type {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1.15rem;
	color: var(--primary-color);
	font-weight: 600;
	text-decoration: none;
}

.schritte > a:last-of-type:hover,
.schritte > a:last-of-type:focus-visible {
	color: var(--primary-hover-color);
}

.schritte > p:last-child {
	margin: 0.75rem 0 0;
	color: var(--dunkelgrau);
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.4;
}

.schritte article p a,
.schritte > p:last-child a {
	color: inherit;
	text-decoration: none;
}

.schritte article p sup {
	font-size: 0.72em;
	line-height: 0;
}

@media (max-width: 62rem) {
	.schritte > div {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		padding-bottom: 0.5rem;
	}

	.schritte > div::before {
		display: none;
	}

	.schritte article,
	.schritte article:first-child,
	.schritte article:nth-child(2),
	.schritte article:last-child {
		width: min(24rem, 100%);
		margin: 0;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.schritte article,
	.schritte article:first-child,
	.schritte article:nth-child(2),
	.schritte article:last-child,
	.schritte article:first-child img {
		transform: none;
	}
}

/* Pop-up */

.popup {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	place-items: center;
	height: 100dvh;
	padding: 1rem;
	-webkit-backdrop-filter: blur(18px) saturate(1.75) contrast(1.05);
	backdrop-filter: blur(18px) saturate(1.75) contrast(1.05);
}

.popup[hidden] {
	display: none !important;
}

.popup > [data-popup-overlay] {
	position: absolute;
	inset: 0;
	background: rgba(18, 18, 18, 0.4);
	opacity: 0;
	cursor: pointer;
}

.popup > [data-popup-fenster] {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: var(--popup-breite, 28rem);
	height: var(--popup-hoehe, auto);
	max-width: calc(100% - 2rem);
	max-height: calc(100dvh - 2rem);
	overflow: hidden;
	border-radius: 1.35rem;
	background: var(--white-color);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
	opacity: 0;
	transform: translateY(1.1rem) scale(0.96);
	outline: none;
}

.popup > [data-popup-fenster] > img {
	display: block;
	width: 100%;
	height: 14rem;
	flex-shrink: 0;
	object-fit: cover;
}

.popup > [data-popup-fenster] > button {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.35rem;
	height: 2.35rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--text-color);
	cursor: pointer;
}

.popup > [data-popup-fenster] > div {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	min-height: 0;
	overflow: auto;
	padding: 1.25rem 1.3rem 1.3rem;
}

.popup > [data-popup-fenster] > div > p:first-child {
	margin: 0;
	color: var(--text-color);
	font-family: var(--font-headline);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.25;
}

.popup p {
	margin: 0;
	color: var(--dunkelgrau);
	line-height: 1.45;
}

.popup [data-popup-code] {
	padding: 0.85rem 0.8rem;
	border: 1.5px dashed var(--primary-color);
	border-radius: 1rem;
	background: #fff6ee;
	color: var(--primary-color);
	font-size: 1.65rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1;
	text-align: center;
}

.popup [data-popup-copy] {
	align-self: center;
	margin-top: 0.15rem;
}

.popup.is-open > [data-popup-overlay],
.popup.is-closing > [data-popup-overlay] {
	opacity: 1;
}

.popup.is-closing > [data-popup-overlay] {
	opacity: 0;
}

.popup.is-open > [data-popup-fenster] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.popup > [data-popup-overlay] {
		transition: opacity 0.4s ease;
	}

	.popup > [data-popup-fenster] {
		transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	}
}

@media (max-width: 87.5rem) {
	.popup > [data-popup-fenster] {
		width: 88%;
		height: 88%;
		max-width: none;
		max-height: none;
	}

	.popup > [data-popup-fenster] > img {
		height: 32%;
	}
}

/* FAQ */

.faq h2 {
	margin: 0 0 2.2rem;
	text-align: left;
}

.faq h3 {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.faq > div {
	border-top: 1px solid var(--hellgrau);
}

.faq [data-faq] {
	border-bottom: 1px solid var(--hellgrau);
}

.faq button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	width: 100%;
	margin: 0;
	padding: 1.3rem 0.15rem;
	border: 0;
	background: transparent;
	color: var(--text-color);
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}

.faq button:hover,
.faq button:focus-visible,
.faq .is-open button {
	color: var(--primary-color);
}

.faq button > span {
	flex: 1;
}

.faq button svg {
	flex-shrink: 0;
}

.faq .is-open button svg {
	transform: rotate(180deg);
}

.faq [data-faq-panel] {
	display: grid;
	grid-template-rows: 0fr;
}

.faq .is-open [data-faq-panel] {
	grid-template-rows: 1fr;
}

.faq [data-faq-panel] > div {
	overflow: hidden;
}

.faq [data-faq-panel] p {
	margin: 0;
	padding: 0 0.15rem 1.35rem;
	color: var(--dunkelgrau);
}

@media (prefers-reduced-motion: no-preference) {
	.faq button svg,
	.faq [data-faq-panel] {
		transition: color var(--transition), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	}
}

/* Abschluss */

.abschluss {
	padding: 3.4rem 2rem 3rem;
	border-radius: 1.5rem;
	text-align: center;
	background:
		radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 52%),
		radial-gradient(80% 70% at 100% 100%, rgba(255, 149, 42, 0.42) 0%, rgba(255, 149, 42, 0) 58%),
		linear-gradient(145deg, #fff8f2 0%, #ffe3c6 100%);
	box-shadow: var(--box-shadow);
}

.abschluss h2 {
	margin: 0 auto 1rem;
}

@media (min-width: 48rem) {
	.abschluss h2 {
		max-width: 70%;
	}
}

.abschluss p {
	max-width: 40rem;
	margin: 0 auto 1.8rem;
}

.abschluss > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.85rem;
}

/* Fußzeile */

footer {
	margin-top: 5.5rem;
	background: var(--dunkelgrau);
	color: rgba(255, 255, 255, 0.82);
}

footer a {
	text-decoration: none;
}

footer a:hover,
footer a:focus-visible {
	color: var(--white-color);
}

footer a:focus-visible {
	outline-color: var(--white-color);
}

footer ul {
	list-style: none;
}

footer > div {
	display: grid;
	grid-template-columns: minmax(14rem, 16.5rem) repeat(4, minmax(0, 1fr));
	gap: 2.4rem 1.75rem;
	align-items: start;
	width: 85%;
	margin: 0 auto;
	padding: 3.4rem 0 2.6rem;
}

footer > div > div > a {
	display: inline-block;
	margin-bottom: 1.2rem;
}

footer > div > div > a img {
	width: 15.5rem;
	height: auto;
}

footer > div > div > p {
	margin: 0;
	line-height: 1.55;
}

footer > div > div > p + p {
	margin-top: 0.12rem;
}

footer > div > div > p:has(+ ul) {
	margin: 1.3rem 0 0.65rem;
	color: var(--white-color);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
}

footer > div > div > ul {
	display: flex;
	gap: 0.7rem;
	margin-top: 1.3rem;
}

footer > div > div > p:has(+ ul) + ul {
	margin-top: 0;
}

footer > div > div > ul a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.45rem;
	height: 2.45rem;
	border: 1.5px solid rgba(255, 255, 255, 0.88);
	border-radius: 50%;
	color: var(--white-color);
}

footer > div > div > ul a:hover,
footer > div > div > ul a:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	color: var(--white-color);
}

footer > div > div > ul img {
	display: block;
	width: 1.15rem;
	height: 1.15rem;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

footer > div > nav > p {
	margin: 0 0 0.95rem;
	color: var(--white-color);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
}

footer > div > nav ul {
	display: flex;
	flex-direction: column;
	gap: 0.48rem;
}

footer > div > nav a,
footer > div > nav span {
	line-height: 1.35;
}

footer > nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.7rem 1.35rem;
	width: 85%;
	margin: 0 auto;
	padding: 1.15rem 0 1.45rem;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.92rem;
}

footer > nav p {
	margin: 0;
}

@media (max-width: 70rem) {
	footer > div {
		grid-template-columns: 1fr 1fr;
	}

	footer > div > div {
		grid-column: 1 / -1;
	}
}

@media (max-width: 40rem) {
	header > div,
	body:has(.hero) header > div,
	dialog > div:first-child {
		width: min(100% - 1.25rem, 90rem);
		gap: 0.75rem;
		min-height: 4.75rem;
	}

	header > div > a {
		min-width: 0;
	}

	header > div > a img,
	body:has(.hero) header > div > a img,
	dialog > div:first-child > a:first-child img {
		max-width: 100%;
		height: 2.85rem;
	}

	dialog > div:first-child > .warenkorb img {
		width: 2.7rem;
		height: 2.7rem;
	}

	.hero article > div:not([aria-hidden]) > :first-child {
		font-size: clamp(1.55rem, 7vw, 2rem);
	}

	.faq button {
		padding: 1.05rem 0.1rem;
		align-items: flex-start;
	}

	.inhaber ul:first-of-type li,
	.schnellanfrage li span:nth-child(3) {
		overflow-wrap: anywhere;
	}

	.logo-marquee ul {
		gap: 1.5rem;
		padding-right: 1.5rem;
	}

	header > div > div:has(> ul) {
		display: none;
	}

	.warenkorb {
		margin-top: 0;
		margin-left: auto;
	}

	.warenkorb img {
		width: 2.7rem;
		height: 2.7rem;
	}

	body:has(.hero) header.is-fest > div {
		min-height: 4.25rem;
	}

	body:has(.hero) header.is-fest > div > a {
		padding: 0.55rem 0.5rem;
	}

	body:has(.hero) header.is-fest > div > a img {
		height: 2.85rem;
	}

	footer > div > div > a img {
		width: min(15.5rem, 100%);
	}

	.hero {
		height: min(82dvh, 42rem);
		margin: 0.8rem;
	}

	.hero > button[data-hero] {
		top: 38%;
		width: 2.35rem;
		height: 2.35rem;
	}

	.hero > button[data-hero="prev"] {
		left: 0.45rem;
	}

	.hero > button[data-hero="next"] {
		right: 0.45rem;
	}

	.hero article > div:not([aria-hidden]) {
		top: auto;
		bottom: 3.6rem;
		left: 1rem;
		width: calc(100% - 2rem);
		transform: none;
	}

	.abschnitt {
		margin-bottom: 4.5rem;
	}

	.content > .abschnitt:first-of-type {
		margin-top: 0.5rem;
	}

	body:not(:has(.hero)) .content > .abschnitt:first-of-type {
		margin-top: 1.75rem;
	}

	h1 {
		font-size: clamp(1.575rem, 7.38vw, 2.115rem);
	}

	h2,
	.schritte > h2 {
		font-size: clamp(1.45rem, 6.4vw, 1.85rem);
	}

	section:has(> .overhead),
	.schritte,
	.abschluss,
	.angebot article .content-schwarz + p {
		text-align: left;
	}

	.overhead {
		padding: 0;
	}

	.schritte > h2,
	.schritte > a,
	.abschluss h2,
	.abschluss p {
		margin-left: 0;
		margin-right: 0;
	}

	.schritte > div {
		margin-top: 0.75rem;
		padding-top: 0;
	}

	.angebot > div:first-child {
		justify-content: flex-start;
	}

	.angebot article .content-schwarz + p::before {
		display: none;
	}

	.abschluss {
		padding: 2.1rem 1.1rem 1.9rem;
	}

	.abschluss > div {
		flex-direction: column;
		align-items: stretch;
	}

	.abschluss > div a {
		width: 100%;
	}

	.angebot-uebersicht {
		flex-direction: column;
		align-items: stretch;
	}

	.angebot-uebersicht a {
		width: 100%;
	}

	section:not(.uebernahme):has(> div > img) img {
		height: 14rem;
	}

	footer {
		margin-top: 3.25rem;
	}

	footer > div {
		grid-template-columns: 1fr;
		width: var(--inhalt);
	}

	footer > nav {
		flex-direction: column;
		align-items: flex-start;
		width: var(--inhalt);
	}
}

.bbq-fakten {
	display: grid;
	gap: 0.85rem;
	margin: 1.35rem 0 0;
	padding: 0;
	list-style: none;
}

.bbq-fakten + p {
	margin-top: 1.35rem;
}

.bbq-fakten {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bbq-fakten.ist-drei {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bbq-fakten li,
.fingerfood-mengen li {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
	padding: 1.1rem 1.15rem;
	border-radius: 1.15rem;
	background: #fff4e8;
}

.bbq-fakten p {
	margin: 0;
}

.bbq-fakten p:first-child {
	margin: 0;
	color: var(--text-color);
	font-family: var(--font-headline);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.15;
}

.bbq-fakten p:last-child {
	color: var(--dunkelgrau);
	line-height: 1.45;
}

@media (max-width: 62rem) {
	.bbq-fakten,
.bbq-fakten.ist-drei {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 40rem) {
	.bbq-fakten,
.bbq-fakten.ist-drei {
		grid-template-columns: 1fr;
	}
}

/* Fingerfood */

.fingerfood-mengen,
.fingerfood-vielfalt {
	display: grid;
	gap: 0.85rem;
	margin: 1.35rem 0 0;
	padding: 0;
	list-style: none;
}

.fingerfood-mengen {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fingerfood-mengen p:first-of-type {
	color: var(--text-color);
	font-weight: 700;
}

.fingerfood-mengen + p {
	margin-top: 2rem;
}

#fingerfood-menge {
	scroll-margin-top: 7.25rem;
}

.fingerfood-vielfalt {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.fingerfood-vielfalt li {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	min-width: 0;
}

.fingerfood-vielfalt img {
	display: block;
	width: 100%;
	height: 12rem;
	object-fit: cover;
	border-radius: 1.05rem;
}

@media (max-width: 62rem) {
	.fingerfood-mengen,
	.fingerfood-vielfalt {
		grid-template-columns: 1fr 1fr;
	}

	.bbq-fakten > li:last-child:nth-child(odd),
.fingerfood-mengen > li:last-child:nth-child(odd),
.getraenke-arten > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 40rem) {
	.fingerfood-mengen,
	.fingerfood-vielfalt {
		grid-template-columns: 1fr;
	}

	.fingerfood-vielfalt img {
		height: 14rem;
	}

	.bbq-fakten > li:last-child:nth-child(odd),
.fingerfood-mengen > li:last-child:nth-child(odd),
.getraenke-arten > li:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

.kennzeichen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.35rem 0 0;
	padding: 0;
	list-style: none;
}

.kennzeichen > li,
p.kennzeichen,
span.kennzeichen {
	padding: 0.35rem 0.8rem;
	border: 1px solid rgba(255, 149, 42, 0.45);
	border-radius: 999px;
	background: transparent;
	color: var(--text-color);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.3;
}

p.kennzeichen,
span.kennzeichen {
	display: inline-flex;
	width: fit-content;
	margin: 0 0 0.7rem;
}

#buffet-pakete {
	scroll-margin-top: 7.25rem;
}

/* Vegetarisch und vegan */

#veggie-pakete {
	scroll-margin-top: 7.25rem;
}

/* Getränke */

#getraenke-pakete {
	scroll-margin-top: 7.25rem;
}

#getraenke-pakete > div:first-child {
	display: none;
}

.getraenke-arten {
	margin: 1.35rem 0 0;
	padding: 0;
	list-style: none;
}

.getraenke-arten {
	display: grid;
	gap: 1rem;
}

.getraenke-arten {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.getraenke-arten li {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	min-width: 0;
}

.getraenke-arten img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: 1.15rem;
}

.getraenke-arten img {
	height: 14rem;
}

.getraenke-service {
	text-align: left;
}

.getraenke-service > p:first-child {
	margin: 0 0 0.45rem;
	color: var(--primary-color);
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.2;
}

.getraenke-service > h2 {
	margin-bottom: 0.75rem;
}

@media (max-width: 62rem) {
	.getraenke-arten {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 40rem) {
	.getraenke-arten {
		grid-template-columns: 1fr;
	}

	.getraenke-arten img {
		height: 14rem;
	}
}

.fingerfood-mengen.weihnacht-standorte {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fingerfood-mengen.weihnacht-erwartung p:first-of-type {
	color: var(--dunkelgrau);
	font-weight: 400;
	font-size: 1.06rem;
}

@media (max-width: 62rem) {
	.fingerfood-mengen.weihnacht-standorte {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 40rem) {
	.fingerfood-mengen.weihnacht-standorte {
		grid-template-columns: 1fr;
	}
}

/* International */

@media (min-width: 62.01rem) {
	.international-gang {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.international-gang + p {
	margin-top: 1.35rem;
}

.international-nachricht {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin-top: auto;
	padding: 0.9rem 0.95rem 1.05rem;
	border-radius: 0.95rem;
	background: var(--white-color);
	box-shadow: 0 6px 16px rgba(18, 18, 18, 0.06);
}

.schritte .international-nachricht p {
	margin: 0 0 0.2rem;
	color: var(--dunkelgrau);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.2;
}

.international-nachricht span {
	display: block;
	height: 0.42rem;
	border-radius: 1rem;
	background: #ececec;
}

.international-nachricht span:nth-child(2) {
	width: 94%;
}

.international-nachricht span:nth-child(3) {
	width: 86%;
}

.international-nachricht span:nth-child(4) {
	width: 78%;
}

.international-nachricht span:nth-child(5) {
	width: 52%;
}

.schritte > a.content-schwarz:last-of-type,
.schritte > a.content-schwarz:last-of-type:hover,
.schritte > a.content-schwarz:last-of-type:focus-visible {
	display: inline-flex;
	justify-content: flex-start;
	gap: 0.85rem;
	width: fit-content;
	max-width: 100%;
	margin-top: 0.25rem;
	margin-inline: auto;
	color: var(--white-color);
	font-weight: 600;
	text-decoration: none;
}

/* Baukasten */

.warenkorb a {
	position: relative;
}

.warenkorb-zahl {
	position: absolute;
	top: 0.15rem;
	right: -0.15rem;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.28rem;
	border-radius: 999px;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.15rem;
	text-align: center;
}

.warenkorb-zahl.ist-leer {
	background: var(--white-color);
	color: var(--text-color);
	box-shadow: 0 0 0 1px #d5d5d5;
}

.baukasten-einleitung {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	align-items: center;
	margin-top: 1.35rem;
	padding: 1.15rem;
	border-radius: 1.5rem;
	background: var(--white-color);
	box-shadow: var(--box-shadow);
}

.baukasten-einleitung:has(figure) {
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
	column-gap: 1.75rem;
}

.baukasten-einleitung figure {
	margin: 0;
}

.baukasten-einleitung img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0.9rem;
}

.baukasten-wechsel {
	margin: 1.15rem 0 0;
}

main .baukasten-wechsel a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--primary-color);
	font-weight: 700;
	text-decoration: none;
}

main .baukasten-wechsel a:hover,
main .baukasten-wechsel a:focus-visible {
	color: var(--dunkelorange);
}

.baukasten-anleitung {
	margin: 0;
	padding-left: 1.2rem;
}

.baukasten-anleitung > li {
	margin: 0.2rem 0;
	padding: 0;
}

.baukasten-anleitung ul {
	margin: 0.15rem 0 0.2rem;
	padding-left: 0.15rem;
	list-style: none;
}

.baukasten-anleitung ul li::before {
	content: "- ";
}

.baukasten-preis {
	margin: 0.2rem 0 0;
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.15;
}

.baukasten-preis span {
	font-size: 1.05rem;
	font-weight: 400;
}

.baukasten {
	display: grid;
	grid-template-columns: 16rem minmax(0, 1fr);
	column-gap: 1.5rem;
	align-items: start;
}

.baukasten > * {
	min-width: 0;
}

.baukasten [hidden] {
	display: none !important;
}

.baukasten-filter summary {
	display: none;
}

.baukasten-filter fieldset {
	margin: 0 0 1rem;
	padding: 0 0 0.85rem;
	border: 0;
	border-bottom: 1px solid var(--hellgrau);
}

.baukasten-filter legend,
.baukasten-suche > span {
	margin-bottom: 0.4rem;
	padding: 0;
	color: var(--dunkelgrau);
	font-family: var(--font-headline);
	font-size: 0.98rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.baukasten-filter label {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 0.28rem 0;
	line-height: 1.35;
	cursor: pointer;
}

.baukasten-filter input[type="checkbox"],
.baukasten-filter input[type="radio"] {
	margin: 0.2rem 0 0;
	flex-shrink: 0;
}

.baukasten-suche {
	flex-direction: column !important;
	align-items: stretch !important;
	cursor: default !important;
}

.baukasten-suche > span {
	margin-bottom: 0;
}

.baukasten-suche input {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--hellgrau);
	border-radius: 0.7rem;
}

.baukasten-filter [data-filter-reset],
.warenkorb-liste button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--primary-color);
	font-weight: 600;
	cursor: pointer;
}

.baukasten-filter [data-filter-reset] {
	display: inline-block;
	margin-top: 0.75rem;
}

.baukasten-tabs {
	position: sticky;
	top: var(--kopf-hoehe, 6.6rem);
	z-index: 25;
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0 0 1.15rem;
	padding: 0.45rem 0 0;
	overflow-x: auto;
	background: var(--white-color);
	list-style: none;
	scrollbar-width: none;
}

.baukasten-tabs::after {
	content: "";
	flex: 1 1 auto;
	align-self: stretch;
	min-width: 0.75rem;
	margin: 0;
	border-bottom: 0.15rem solid var(--hellgrau);
	pointer-events: none;
}

.baukasten-tabs::-webkit-scrollbar {
	display: none;
}

.baukasten-tabs li {
	display: flex;
	flex: 0 0 auto;
	margin: 0;
	padding: 0 0.625rem;
	border-bottom: 0.15rem solid var(--hellgrau);
}

.baukasten-tabs li:first-child {
	padding-left: 0;
}

.baukasten-tabs li:last-of-type {
	padding-right: 0;
}

.baukasten-tabs button {
	position: relative;
	padding: 0.4rem 0 0.7rem;
	border: 0;
	border-radius: 0;
	background: none;
	color: #6f6f6f;
	white-space: nowrap;
	cursor: pointer;
}

.baukasten-tabs button:hover,
.baukasten-tabs button:focus-visible {
	color: var(--text-color);
}

.baukasten-tabs button[aria-current="step"] {
	background: none;
	color: var(--text-color);
	font-weight: 600;
}

.baukasten-tabs button[aria-current="step"]::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	height: 0.15rem;
	background: var(--primary-color);
}

.baukasten-liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	align-items: stretch;
}

.baukasten-liste [data-leer] {
	grid-column: 1 / -1;
}

.baukasten-liste article {
	display: grid;
	grid-template-columns: 7.15rem minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) auto;
	column-gap: 0.8rem;
	row-gap: 0.45rem;
	align-items: stretch;
	min-width: 0;
	min-height: 0;
	padding: 0.55rem 0.7rem 0.55rem 0.55rem;
	border: 0;
	border-radius: 1.05rem;
	background: var(--white-color);
	box-shadow: var(--box-shadow);
	cursor: pointer;
}

.baukasten-liste article:not(:has(img)) {
	grid-template-columns: minmax(0, 1fr);
}

.baukasten-liste article.is-gewaehlt {
	box-shadow: 0 0 0 2px var(--primary-color), var(--box-shadow);
}

.baukasten-liste article.is-gesperrt {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}

.baukasten-liste article.is-gesperrt [data-info] {
	pointer-events: auto;
}

.popup[data-popup="verlassen"] > [data-popup-fenster],
.popup[data-popup="zusatz"] > [data-popup-fenster] {
	width: min(32rem, calc(100% - 2rem));
	height: auto;
}

.popup[data-popup="zusatz"] > [data-popup-fenster] > div {
	gap: 1rem;
	padding: 1.55rem 1.4rem 1.45rem;
}

.popup[data-popup="zusatz"] .warenkorb-zusatz-ok {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-size: 1.28rem;
}

.popup[data-popup="zusatz"] .warenkorb-zusatz-frage {
	color: var(--text-color);
	font-family: var(--font-headline);
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.3;
}

.warenkorb-zusatz-wahl {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.65rem;
}

.warenkorb-zusatz-wahl a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 5.6rem;
	padding: 0.85rem 0.55rem;
	border: 1.5px solid rgba(0, 0, 0, 0.14);
	border-radius: 1rem;
	background: var(--white-color);
	color: var(--text-color);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.warenkorb-zusatz-wahl a:hover,
.warenkorb-zusatz-wahl a:focus-visible {
	border-color: var(--primary-color);
	background: #fff6ee;
	color: var(--primary-color);
	outline: none;
}

.warenkorb-zusatz-wahl svg {
	display: block;
	flex-shrink: 0;
}

.popup[data-popup="zusatz"] .warenkorb-zusatz-weiter {
	align-self: stretch;
	width: 100%;
	margin-top: 0.15rem;
	text-align: center;
}

@media (max-width: 30rem) {
	.warenkorb-zusatz-wahl {
		grid-template-columns: 1fr;
	}

	.warenkorb-zusatz-wahl a {
		flex-direction: row;
		justify-content: flex-start;
		min-height: 0;
		padding: 0.85rem 1rem;
		gap: 0.75rem;
	}
}

.baukasten-liste img {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: stretch;
	width: 7.15rem;
	height: 100%;
	min-height: 7.4rem;
	object-fit: cover;
	border-radius: 0.75rem;
}

.baukasten-liste article > div:not(.baukasten-menge) {
	display: flex;
	grid-column: 2;
	grid-row: 1;
	flex-direction: column;
	gap: 0.28rem;
	align-self: start;
	min-width: 0;
	padding-top: 0.12rem;
}

.baukasten-liste article:not(:has(img)) > div:not(.baukasten-menge),
.baukasten-liste article:not(:has(img)) .baukasten-menge {
	grid-column: 1;
}

.baukasten-liste article p {
	margin: 0;
}

.baukasten-liste article > div > p:first-child {
	display: flex;
	align-items: flex-start;
	gap: 0.3rem;
	width: fit-content;
	max-width: 100%;
	font-weight: 700;
	line-height: 1.3;
}

.baukasten-liste article > div > p:first-child span {
	flex: 0 1 auto;
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.baukasten-liste article > div > p:not(:first-child) {
	color: #5e5e5e;
	font-size: 0.9rem;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.baukasten-liste article > div > p.baukasten-artikelpreis {
	display: block;
	overflow: visible;
	color: var(--text-color);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	-webkit-line-clamp: unset;
}

.baukasten-liste article > div > p.baukasten-artikelpreis span {
	font-weight: 400;
	color: #5e5e5e;
}

.baukasten-liste [data-info] {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	margin-top: 0.12rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--primary-color);
	text-decoration: none;
	cursor: pointer;
}

.baukasten-liste [data-info]:hover,
.baukasten-liste [data-info]:focus-visible {
	color: var(--dunkelorange);
}

.baukasten-menge button,
.baukasten-nav [data-zurueck],
.baukasten-popup-aktionen [data-verlassen] {
	min-height: 2.6rem;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--hellgrau);
	border-radius: 999px;
	background: var(--white-color);
	cursor: pointer;
}

.baukasten-liste .baukasten-menge {
	grid-column: 2;
	grid-row: 2;
	justify-self: end;
	align-self: end;
	margin: 0;
	padding: 0;
}

.baukasten-liste .baukasten-menge button {
	min-height: 2.2rem;
	white-space: nowrap;
}

.baukasten-menge [data-schrittweise] {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.baukasten-menge [data-anzahl] {
	min-width: 1.4rem;
	font-weight: 700;
	text-align: center;
}

.baukasten-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

.baukasten button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.baukasten-schritt form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 2.85rem;
	width: 100%;
}

.baukasten-schritt form > input {
	display: none;
}

.baukasten-schritt form > button {
	justify-self: end;
}

.baukasten-kosten {
	display: grid;
	gap: 0.7rem;
}

.baukasten-schritt [data-summe] {
	display: grid;
	gap: 0.2rem;
	width: 100%;
	padding: 0.45rem;
	border-radius: 1.05rem;
	background: color-mix(in srgb, var(--hellorange) 42%, white);
}

.baukasten-schritt [data-summe] p,
.baukasten-schritt [data-summe] li {
	margin: 0;
}

.baukasten-schritt [data-summe] ul {
	display: grid;
	gap: 0.1rem;
	margin: 0;
	padding: 0.55rem 0.85rem 0.35rem;
	list-style: none;
}

.baukasten-schritt [data-summe] li,
.baukasten-schritt [data-summe] > p {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: baseline;
}

.baukasten-schritt [data-summe] li {
	padding: 0.28rem 0;
	font-weight: 400;
}

.baukasten-schritt [data-summe] li span:last-child,
.baukasten-schritt [data-summe] strong {
	white-space: nowrap;
}

.baukasten-schritt [data-summe] > p {
	margin: 0.15rem;
	padding: 0.8rem 0.9rem;
	border-radius: 0.8rem;
	background: var(--white-color);
	font-weight: 500;
}

.baukasten-schritt [data-summe] > p strong {
	color: var(--text-color);
	font-size: 1.25rem;
	font-weight: 700;
}

.baukasten-schritt [data-summe] li.ist-hinweis span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.baukasten-schritt [data-summe] [data-lieferung] {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--primary-color);
	cursor: pointer;
}

.baukasten-schritt [data-summe] > p.baukasten-anfrage {
	display: block;
	font-weight: 600;
}

.baukasten-schritt form label {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	width: 100%;
}

.baukasten-gaeste {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45rem;
}

.baukasten-gaeste > label,
.baukasten-schritt form > label > span,
.baukasten-zusammenfassung > p,
.baukasten-kosten > p {
	color: var(--text-color);
	font-family: var(--font-headline);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
}

.baukasten-gaeste > div {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.baukasten-gaeste button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border: 0;
	border-radius: 0.7rem;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
}

.baukasten-gaeste [data-gaeste-weniger] {
	background: var(--primary-color);
	color: var(--white-color);
}

.baukasten-gaeste [data-gaeste-weniger]:not(:disabled):hover {
	background: var(--primary-hover-color);
	color: var(--white-color);
}

.baukasten-gaeste [data-gaeste-mehr] {
	background: var(--primary-color);
	color: var(--white-color);
}

.baukasten-gaeste [data-gaeste-mehr]:hover:not(:disabled) {
	background: var(--primary-hover-color);
}

.baukasten .baukasten-gaeste button:disabled {
	opacity: 1;
	background: #ececec;
	color: #b5b5b5;
	cursor: default;
}

.baukasten-gaeste input {
	width: 4.5rem;
	height: 2.6rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--hellgrau);
	border-radius: 0.7rem;
	background: var(--white-color);
	font-size: 1.05rem;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.baukasten-gaeste input::-webkit-outer-spin-button,
.baukasten-gaeste input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.baukasten-schritt textarea {
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--hellgrau);
	border-radius: 0.75rem;
}

.baukasten-schritt [data-offen] {
	margin: 0.35rem 0 0;
	padding: 0.8rem 1rem;
	border-radius: 0.85rem;
	background: color-mix(in srgb, var(--error-color) 12%, white);
	color: #9f1d14;
	font-weight: 600;
	line-height: 1.4;
}

.baukasten-zusammenfassung {
	display: grid;
	gap: 0.75rem;
}

.baukasten-zusammenfassung > p,
.baukasten-kosten > p {
	margin: 0;
}

.baukasten-zusammenfassung [data-zusammenfassung-liste] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem 1.75rem;
}

.baukasten-zusammenfassung [data-zusammenfassung-liste] p {
	margin: 0 0 0.2rem;
	font-weight: 700;
}

.baukasten-zusammenfassung ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.baukasten-zusammenfassung li {
	margin: 0;
	padding: 0.12rem 0;
	line-height: 1.35;
}

.baukasten-zusammenfassung li span {
	font-weight: 700;
}

.baukasten-fehler,
.baukasten-hinweis {
	margin: 0 0 1rem;
	color: var(--text-color);
	font-weight: 600;
}

.baukasten-popup-aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: 0.4rem;
}

.warenkorb-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.4rem 1.5rem;
}

.warenkorb-kopf h1 {
	margin-bottom: 0.35rem;
}

.warenkorb-frist {
	margin: 0;
	padding: 1rem 1.2rem;
	border-radius: 1.15rem;
	background: var(--white-color);
	box-shadow: var(--box-shadow);
	color: var(--text-color);
	line-height: 1.45;
}

.warenkorb-frist strong {
	color: var(--dunkelorange);
	font-weight: 700;
}

.warenkorb-frist [data-frist] {
	color: var(--text-color);
}

.warenkorb-kopf button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dunkelgrau);
	cursor: pointer;
}

.warenkorb-kopf button:hover,
.warenkorb-kopf button:focus-visible {
	color: var(--error-color);
}

.warenkorb-liste {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
	gap: 1.25rem;
	align-items: start;
}

.warenkorb-liste > div {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

.warenkorb-liste article {
	display: grid;
	grid-template-columns: 6.1rem minmax(0, 1fr) auto auto;
	gap: 0.45rem 1.15rem;
	align-items: center;
	padding: 1.15rem 1.2rem 1rem;
	border-radius: 1.15rem;
	background: var(--white-color);
	box-shadow: var(--box-shadow);
}

.warenkorb-liste article:not(:has(img)) {
	grid-template-columns: minmax(0, 1fr) auto auto;
}

.warenkorb-liste img {
	grid-column: 1;
	grid-row: 1;
	width: 6.1rem;
	height: 6.1rem;
	object-fit: cover;
	border-radius: 0.9rem;
}

.warenkorb-liste article > div:first-of-type {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

.warenkorb-liste article:not(:has(img)) > div:first-of-type {
	grid-column: 1;
}

.warenkorb-liste article > div:first-of-type h2,
.warenkorb-liste article > div:first-of-type p {
	margin: 0;
}

.warenkorb-liste article > div:first-of-type h2 {
	font-size: 1.35rem;
}

.warenkorb-liste article > div:first-of-type p {
	color: var(--dunkelgrau);
}

.warenkorb-liste article > p {
	grid-column: 3;
	grid-row: 1;
	margin: 0;
	text-align: right;
	white-space: nowrap;
}

.warenkorb-liste article:not(:has(img)) > p {
	grid-column: 2;
}

.warenkorb-liste article > p strong {
	display: block;
	color: var(--dunkelorange);
	font-family: var(--font-headline);
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1;
}

.warenkorb-liste article > p span {
	display: block;
	margin-top: 0.2rem;
	color: var(--dunkelgrau);
	font-size: 0.85rem;
	font-weight: 400;
}

.warenkorb-liste details {
	grid-column: 1 / -1;
	margin-top: 0.35rem;
	border-top: 1px solid var(--hellgrau);
}

.warenkorb-liste summary {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.7rem 0;
	font-weight: 700;
	line-height: 1.2;
	list-style: none;
	cursor: pointer;
}

.warenkorb-liste summary::-webkit-details-marker {
	display: none;
}

.warenkorb-liste summary span {
	color: var(--dunkelgrau);
	font-weight: 400;
}

.warenkorb-liste summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.45rem;
	height: 0.45rem;
	margin: 0 0 0 auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.warenkorb-liste:not(.ist-animiert) details[open] summary::after,
.warenkorb-liste.ist-animiert details[data-auf] summary::after {
	transform: rotate(-135deg);
}

.warenkorb-liste details > div {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem 1.5rem;
	overflow: hidden;
	padding: 0.35rem 0 0.2rem;
}

.warenkorb-liste details p {
	margin: 0 0 0.15rem;
	font-weight: 700;
}

.warenkorb-liste details ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.warenkorb-liste details li {
	padding: 0.08rem 0;
	font-weight: 400;
}

.warenkorb-liste details > div > p {
	grid-column: 1 / -1;
	font-weight: 400;
}

.warenkorb-liste article > div:last-of-type {
	grid-column: 4;
	grid-row: 1;
	display: flex;
	gap: 0.15rem;
	align-items: center;
	justify-content: flex-end;
}

.warenkorb-liste article:not(:has(img)) > div:last-of-type {
	grid-column: 3;
}

.warenkorb-liste article form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.45rem;
	height: 2.45rem;
	padding: 0;
	border: 0;
	border-radius: 0.7rem;
	background: transparent;
	color: var(--dunkelgrau);
	cursor: pointer;
}

.warenkorb-liste article form button:hover,
.warenkorb-liste article form button:focus-visible {
	background: color-mix(in srgb, var(--primary-color) 14%, white);
	color: var(--dunkelorange);
}

.warenkorb-liste article form:last-child button:hover,
.warenkorb-liste article form:last-child button:focus-visible {
	background: color-mix(in srgb, var(--error-color) 12%, white);
	color: var(--error-color);
}

.warenkorb-liste article.warenkorb-lieferung,
.warenkorb-liste article.warenkorb-zusatz {
	display: block;
	padding: 0 1.2rem;
}

.warenkorb-lieferung details {
	margin-top: 0;
	border-top: 0;
}

.warenkorb-lieferung summary {
	min-height: 3.6rem;
	padding: 0;
	font-family: var(--font-headline);
	font-size: 1.35rem;
	line-height: 1.15;
}

.warenkorb-lieferung details > div {
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	padding: 0 0 0.55rem;
}

.warenkorb-lieferung details p {
	font-weight: 400;
}

.warenkorb-liste article.warenkorb-zusatz {
	padding: 1.15rem 1.2rem 1.2rem;
}

.warenkorb-liste article.warenkorb-zusatz h2 {
	margin: 0;
	font-family: var(--font-headline);
	font-size: 1.35rem;
	line-height: 1.15;
}

.warenkorb-liste article.warenkorb-zusatz > .warenkorb-zusatz-karten {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	align-items: stretch;
	justify-content: initial;
	width: 100%;
	margin-top: 0.85rem;
	padding: 0;
}

@media (min-width: 48rem) and (max-width: 72rem), (min-width: 90rem) {
	.warenkorb-liste article.warenkorb-zusatz > .warenkorb-zusatz-karten {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.warenkorb-liste article.warenkorb-zusatz .warenkorb-zusatz-karte {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: center;
	width: 100%;
	min-width: 0;
	min-height: 4.6rem;
	padding: 0.9rem 1rem;
	border: 1.5px solid rgba(0, 0, 0, 0.12);
	border-radius: 1rem;
	background: var(--white-color);
	color: var(--text-color);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.warenkorb-liste article.warenkorb-zusatz .warenkorb-zusatz-karte:hover,
.warenkorb-liste article.warenkorb-zusatz .warenkorb-zusatz-karte:focus-visible {
	border-color: var(--primary-color);
	background: #fff6ee;
	color: var(--text-color);
	outline: none;
}

.warenkorb-liste article.warenkorb-zusatz .warenkorb-zusatz-karte:hover .blog-pfeil,
.warenkorb-liste article.warenkorb-zusatz .warenkorb-zusatz-karte:focus-visible .blog-pfeil {
	color: var(--dunkelorange);
}

.warenkorb-liste article.warenkorb-zusatz .warenkorb-zusatz-karte > svg {
	display: block;
	flex-shrink: 0;
	color: var(--text-color);
}

.warenkorb-liste article.warenkorb-zusatz .warenkorb-zusatz-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.warenkorb-liste article.warenkorb-zusatz .warenkorb-zusatz-text strong {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.2;
}

.warenkorb-liste article.warenkorb-zusatz .warenkorb-zusatz-text > span {
	color: var(--dunkelgrau);
	font-size: 0.88rem;
	font-weight: 400;
	line-height: 1.35;
}

.warenkorb-liste article.warenkorb-zusatz .warenkorb-zusatz-karte .blog-pfeil {
	flex-shrink: 0;
}

.warenkorb-liste > div > h2 {
	margin: 0.7rem 0 0;
	font-size: 1.35rem;
}

.warenkorb-liste > div > p {
	margin: 0;
}

.warenkorb-liste small {
	color: var(--dunkelgrau);
	font-size: 0.85rem;
}

.warenkorb-seite {
	position: static;
	display: grid;
	gap: 1rem;
	align-self: start;
}

@media (min-width: 15in) {
	.warenkorb-seite {
		position: sticky;
		top: calc(var(--kopf-hoehe, 6.6rem) + 1.35rem);
	}
}

.warenkorb-liste aside {
	padding: 1.15rem 1.2rem 1.25rem;
	border-radius: 1.15rem;
	background: var(--white-color);
	box-shadow: var(--box-shadow);
}

.warenkorb-liste aside small {
	display: block;
	margin-top: 0.9rem;
}

.warenkorb-liste aside > p:first-child {
	margin-bottom: 0.75rem;
	font-family: var(--font-headline);
	font-size: 1.35rem;
	font-weight: 700;
}

.warenkorb-pakete {
	display: grid;
	gap: 0.2rem;
	margin-bottom: 0.85rem;
}

.warenkorb-pakete p {
	margin: 0;
	color: var(--dunkelgrau);
}

.warenkorb-liste aside > p:has(strong) {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: baseline;
	margin-top: 0.35rem;
	font-size: 1.05rem;
}

.warenkorb-liste aside > p[hidden] {
	display: none;
}

.warenkorb-liste aside > p[data-zwischensumme] {
	margin-top: 0.85rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--hellgrau);
}

.warenkorb-liste aside > p[data-endpreis] {
	margin-top: 0.45rem;
	font-weight: 700;
}

.warenkorb-liste aside > p[data-zwischensumme] strong,
.warenkorb-liste aside > p[data-endpreis] strong {
	font-family: var(--font-headline);
	font-size: 1.85rem;
	font-weight: 700;
	line-height: 1;
}

.warenkorb-liste aside > p.warenkorb-anfrage {
	display: block;
	font-weight: 700;
}

.warenkorb-gutschein {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.4rem 0.5rem;
	margin-top: 0.85rem;
}

.warenkorb-gutschein label {
	grid-column: 1 / -1;
	font-weight: 600;
}

.warenkorb-gutschein input {
	min-width: 0;
	height: 2.75rem;
	margin: 0;
	padding: 0 0.75rem;
	border: 1px solid var(--hellgrau);
	border-radius: 0.75rem;
	outline: none;
	background: var(--white-color);
	font: inherit;
	font-weight: 400;
}

.warenkorb-liste .warenkorb-gutschein button {
	height: 2.75rem;
	padding: 0 0.9rem;
	border: 0;
	border-radius: 0.75rem;
	background: var(--text-color);
	color: var(--white-color);
	font-weight: 600;
	cursor: pointer;
}

.warenkorb-liste .warenkorb-gutschein button:hover,
.warenkorb-liste .warenkorb-gutschein button:focus-visible {
	background: var(--dunkelgrau);
}

.warenkorb-gutschein p {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--error-color);
	font-size: 0.9rem;
	font-weight: 400;
}

.warenkorb-gutschein p[data-ok] {
	color: var(--dunkelgrau);
}

.warenkorb-liste #anfrage {
	width: auto;
	margin: 2.4rem 0 0;
}

#anfrage {
	scroll-margin-top: 7rem;
}

#anfrage [role="alert"] {
	margin: 0 0 1rem;
	padding: 0.8rem 1rem;
	border-radius: 0.85rem;
	background: color-mix(in srgb, var(--error-color) 12%, white);
	color: #9f1d14;
	font-weight: 600;
}

#anfrage [role="alert"] p {
	margin: 0.15rem 0;
}

.warenkorb-form {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	max-width: 52rem;
	margin-top: 0.4rem;
}

.warenkorb-form button.content-schwarz {
	display: flex;
	width: 100%;
	max-width: none;
	min-height: 3.1rem;
	padding: 0.5rem 3.6rem 0.5rem 1.35rem;
	background: var(--text-color);
	color: var(--white-color);
	box-shadow: 0 12px 28px rgba(18, 18, 18, 0.18);
}

.warenkorb-form button.content-schwarz:hover,
.warenkorb-form button.content-schwarz:focus-visible {
	background: #2a2a2a;
	color: var(--white-color);
}

.warenkorb-form h3 {
	margin: 0.6rem 0 0;
}

.warenkorb-form label {
	display: block;
	font-weight: 600;
}

.warenkorb-form label span {
	color: var(--error-color);
}

.warenkorb-form label input:not([type="checkbox"]),
.warenkorb-form label select,
.warenkorb-form label textarea {
	display: block;
	margin-top: 0.35rem;
}

.warenkorb-form label:has(> input[type="checkbox"]) {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-weight: 400;
}

.warenkorb-form label:has(> input[type="checkbox"]) > span {
	display: inline;
	min-width: 0;
	font-weight: 400;
	color: inherit;
}

.warenkorb-form label:has(> input[type="checkbox"]) > span a {
	display: inline;
	margin: 0;
	padding: 0;
}

.warenkorb-form input:not([type="checkbox"]),
.warenkorb-form textarea,
.warenkorb-form select {
	width: 100%;
	height: 3rem;
	padding: 0 0.85rem;
	border: 1px solid var(--hellgrau);
	border-radius: 0.75rem;
	outline: none;
	background: var(--white-color);
	font: inherit;
	font-weight: 400;
	line-height: 1.2;
}

.warenkorb-form input:not([type="checkbox"]):focus,
.warenkorb-form input:not([type="checkbox"]):focus-visible,
.warenkorb-form textarea:focus,
.warenkorb-form textarea:focus-visible,
.warenkorb-form select:focus,
.warenkorb-form select:focus-visible,
.warenkorb-gutschein input:focus,
.warenkorb-gutschein input:focus-visible {
	border-color: var(--primary-color);
	outline: none !important;
	box-shadow: none;
}

.warenkorb-form textarea {
	height: auto;
	padding: 0.7rem 0.85rem;
}

.warenkorb-form input[type="date"]::-webkit-datetime-edit {
	padding: 0;
	line-height: 1.2;
}

.warenkorb-form input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.2rem 0 0;
	flex-shrink: 0;
}

.warenkorb-form > div:not([data-lieferadresse]):not([data-honig]),
.warenkorb-form [data-lieferadresse] > div {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem 1rem;
}

.warenkorb-form .warenkorb-weit {
	grid-template-columns: minmax(0, 3fr) minmax(6.5rem, 1fr);
}

.warenkorb-form .warenkorb-schmal {
	grid-template-columns: minmax(6.5rem, 1fr) minmax(0, 3fr);
}

.warenkorb-form [data-honig] {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.warenkorb-form [data-lieferadresse] {
	display: none;
	flex-direction: column;
	gap: 0.9rem;
}

.warenkorb-form:has([name="abweichend"]:checked) [data-lieferadresse] {
	display: flex;
}

@media (max-width: 72rem) {
	.warenkorb-liste {
		grid-template-columns: minmax(0, 1fr);
	}

	.warenkorb-seite {
		order: -1;
	}

	.warenkorb-liste aside {
		position: static;
	}

	.warenkorb-form {
		max-width: none;
		width: 100%;
	}

	.warenkorb-form button.content-schwarz {
		width: 100%;
		max-width: none;
		align-self: stretch;
	}
}

@media (max-width: 40rem) {
	.warenkorb-liste article,
	.warenkorb-liste article:not(:has(img)) {
		grid-template-columns: 4.8rem minmax(0, 1fr) auto;
	}

	.warenkorb-liste article:not(:has(img)) {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.warenkorb-liste img {
		width: 4.8rem;
		height: 4.8rem;
	}

	.warenkorb-liste article > p,
	.warenkorb-liste article:not(:has(img)) > p {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		text-align: left;
	}

	.warenkorb-liste article:not(:has(img)) > p {
		grid-column: 1;
	}

	.warenkorb-liste article > div:last-of-type {
		grid-column: 3;
		grid-row: 1;
		align-self: start;
	}

	.warenkorb-liste article:not(:has(img)) > div:last-of-type {
		grid-column: 2;
	}

	.warenkorb-liste details > div,
	.warenkorb-form > div:not([data-lieferadresse]):not([data-honig]),
	.warenkorb-form [data-lieferadresse] > div,
	.warenkorb-form .warenkorb-weit,
	.warenkorb-form .warenkorb-schmal {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 62rem) {
	.baukasten,
	.baukasten-einleitung:has(figure) {
		grid-template-columns: 1fr;
	}

	.baukasten-einleitung {
		align-items: start;
	}

	.baukasten-filter summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.85rem 1rem;
		border: 1px solid var(--hellgrau);
		border-radius: 0.9rem;
		background: var(--white-color);
		font-weight: 600;
		list-style: none;
		cursor: pointer;
	}

	.baukasten-filter summary::-webkit-details-marker {
		display: none;
	}

	.baukasten-filter form {
		padding: 0.85rem 0 0;
	}
}

@media (max-width: 48rem) {
	.baukasten-liste {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 40rem) {
	.baukasten-liste article {
		grid-template-columns: 6.1rem minmax(0, 1fr);
		padding-right: 0.6rem;
	}

	.baukasten-liste article:not(:has(img)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.baukasten-liste img {
		width: 6.1rem;
		min-height: 6.6rem;
	}

	.baukasten-zusammenfassung [data-zusammenfassung-liste] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Eventarten */

.eventarten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.15rem;
	margin: 1.35rem 0 0;
	padding: 0;
	list-style: none;
}

.eventarten-privat {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: none;
}

.eventarten a {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	height: 100%;
	padding: 0.7rem 0.7rem 1.05rem;
	border: 1px solid #f3e4d6;
	border-radius: 1.35rem;
	background: #fff;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 12px 30px rgba(40, 24, 8, 0.06);
	cursor: pointer;
}

main .eventarten a {
	text-decoration: none;
}

.eventarten img {
	display: block;
	width: 100%;
	height: 11.5rem;
	object-fit: cover;
	border-radius: 0.95rem;
}

.eventarten a > span {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1;
	min-width: 0;
	padding: 0 0.35rem;
}

.eventarten p {
	min-height: calc(1.45em * 3);
}

.eventarten-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	min-height: 1.7rem;
}

.eventarten-tags span {
	padding: 0.22rem 0.48rem;
	border-radius: 999px;
	background: #fff4e8;
	color: #5c4636;
	font-size: 0.8rem;
	font-weight: 650;
	line-height: 1.2;
}

.eventarten-mehr {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	align-self: flex-start;
	margin-top: auto;
	padding-top: 0.35rem;
	font-weight: 700;
	line-height: 1.2;
}

.eventarten-mehr::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8H13M9 4l4 4-4 4' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 62rem) {
	.eventarten,
	.eventarten-privat {
		grid-template-columns: 1fr 1fr;
		max-width: none;
	}
}

@media (max-width: 40rem) {
	.eventarten,
	.eventarten-privat {
		grid-template-columns: 1fr;
	}

	.eventarten img {
		height: 13rem;
	}
}

/* Hochzeit */

.kicker {
	margin: 0 0 0.45rem;
	color: var(--primary-color);
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.2;
}

#hochzeit-pakete {
	scroll-margin-top: 7.25rem;
}

.hochzeit-arten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.15rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.hochzeit-arten.ist-zwei {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hochzeit-arten a,
.firmen-arten a {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 1.2rem;
	background: var(--white-color);
	color: inherit;
	text-decoration: none;
	box-shadow: var(--box-shadow);
}

main .hochzeit-arten a,
main .firmen-arten a {
	text-decoration: none;
}

.hochzeit-arten img {
	display: block;
	width: 100%;
	height: 16rem;
	object-fit: cover;
}

.hochzeit-arten a > span {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	flex: 1;
	padding: 1.05rem 1.15rem 1.2rem;
}

.hochzeit-arten a > span > span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.35rem;
	color: var(--primary-color);
	font-weight: 600;
}

.hochzeit-arten a > span > span::after,
.hochzeit-orte li a::after,
.firmen-arten a > span > span::after,
.messe-groessen a > span > span::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8H13M9 4l4 4-4 4' fill='none' stroke='%23ff952a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hochzeit-ablauf {
	--ablauf-luecke: 2rem;
	--ablauf-punkt: 2.65rem;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ablauf-luecke);
	margin: 2.35rem 0 0;
	padding: 0;
	list-style: none;
}

.hochzeit-ablauf::before {
	content: "";
	position: absolute;
	top: calc(var(--ablauf-punkt) / 2);
	left: calc(var(--ablauf-punkt) / 2);
	right: 0;
	z-index: 0;
	height: 2px;
	background: #ffd0a6;
	transform: translateY(-50%);
}

.hochzeit-ablauf li {
	position: relative;
	min-width: 0;
}

.hochzeit-ablauf li > span {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--ablauf-punkt);
	height: var(--ablauf-punkt);
	margin-bottom: 1.05rem;
	border-radius: 50%;
	background: var(--primary-color);
	box-shadow: 0 0 0 0.32rem #fff;
	color: #fff;
	font-family: var(--font-headline);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
}

.hochzeit-ablauf li > p:first-of-type {
	margin: 0 0 0.35rem;
	color: var(--primary-color);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.3;
}

.hochzeit-ablauf h3 {
	margin: 0 0 0.45rem;
	font-size: 1.2rem;
	line-height: 1.25;
}

.hochzeit-hinweis {
	margin: 1.35rem 0 0;
	color: var(--dunkelgrau);
}

.hochzeit-orte {
	position: relative;
	margin-top: 1.6rem;
}

.hochzeit-orte [data-orte-view] {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.hochzeit-orte [data-orte-view]::-webkit-scrollbar {
	display: none;
}

.hochzeit-orte ul {
	display: flex;
	gap: 1.15rem;
	margin: 0;
	padding: 0.35rem 0 0.85rem;
	list-style: none;
}

.hochzeit-orte li {
	display: flex;
	flex: 0 0 calc((100% - 2.3rem) / 3);
	flex-direction: column;
	min-width: 0;
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: 1.2rem;
	background: var(--white-color);
	box-shadow: var(--box-shadow);
}

.hochzeit-orte img {
	display: block;
	width: 100%;
	height: 16rem;
	object-fit: cover;
}

.hochzeit-orte li > div {
	display: flex;
	flex-direction: column;
	gap: 0.28rem;
	flex: 1;
	padding: 1rem 1.1rem 1.15rem;
}

.hochzeit-orte h3 {
	margin: 0 0 0.2rem;
	font-size: 1.35rem;
	line-height: 1.2;
}

.hochzeit-orte li p {
	margin: 0;
	color: var(--dunkelgrau);
	line-height: 1.4;
}

.hochzeit-orte li p:nth-of-type(2) {
	color: var(--text-color);
	font-weight: 600;
}

.hochzeit-orte li a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.7rem;
	color: var(--primary-color);
	font-weight: 600;
	text-decoration: none;
}

main .hochzeit-orte li a {
	text-decoration: none;
}

.hochzeit-orte > button {
	position: absolute;
	top: 7rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 0;
	border-radius: 50%;
	background: var(--white-color);
	color: var(--text-color);
	box-shadow: 0 8px 20px rgba(18, 18, 18, 0.16);
	cursor: pointer;
}

.hochzeit-orte > button[data-orte-dir="prev"] {
	left: -0.7rem;
}

.hochzeit-orte > button[data-orte-dir="next"] {
	right: -0.7rem;
}

.hochzeit-orte > button:disabled {
	opacity: 0.35;
	cursor: default;
}

.hochzeit-orte.is-still > button {
	display: none;
}

.hochzeit-leistungen {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.15rem;
	margin: 1.6rem 0 0;
	padding: 0;
	list-style: none;
}

.hochzeit-leistungen.ist-drei {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hochzeit-leistungen li {
	min-width: 0;
	padding-top: 0.85rem;
	border-top: 1px solid rgba(255, 149, 42, 0.55);
}

.hochzeit-leistungen h3 {
	margin: 0 0 0.4rem;
	font-size: 1.2rem;
	line-height: 1.25;
}

.abschluss .kicker {
	width: fit-content;
	margin: 0 auto 0.7rem;
}

@media (max-width: 62rem) {
	.hochzeit-arten,
.hochzeit-leistungen,
.hochzeit-leistungen.ist-drei {
		grid-template-columns: 1fr 1fr;
	}

	.hochzeit-orte li {
		flex-basis: calc((100% - 1.15rem) / 2);
	}
}

/* Ablauf: unter Tablet-Quer vertikal mit Strichen (Handy quer + Tablet hoch) */
@media (max-width: 63.99rem), (orientation: portrait) and (max-width: 75rem) {
	.hochzeit-ablauf,
	.hochzeit-ablauf.sport-ablauf {
		--ablauf-luecke: 0rem;
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 1.5rem;
	}

	.hochzeit-ablauf li,
	.hochzeit-ablauf.sport-ablauf li {
		padding: 0 0 1.7rem calc(var(--ablauf-punkt) + 0.95rem);
	}

	.hochzeit-ablauf li:last-child,
	.hochzeit-ablauf.sport-ablauf li:last-child {
		padding-bottom: 0;
	}

	.hochzeit-ablauf li > span,
	.hochzeit-ablauf.sport-ablauf li > span {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
	}

	.hochzeit-ablauf::before,
	.hochzeit-ablauf.sport-ablauf::before {
		content: none;
	}

	.hochzeit-ablauf li:not(:last-child)::before,
	.hochzeit-ablauf.sport-ablauf li:not(:last-child)::before {
		content: "";
		position: absolute;
		top: calc(var(--ablauf-punkt) / 2);
		left: calc(var(--ablauf-punkt) / 2);
		z-index: 0;
		width: 2px;
		height: 100%;
		background: #ffd0a6;
		transform: translateX(-50%);
	}
}

@media (max-width: 40rem) {
	.hochzeit-arten,
.hochzeit-arten.ist-zwei,
.hochzeit-leistungen,
.hochzeit-leistungen.ist-drei {
		grid-template-columns: 1fr;
	}

	.hochzeit-arten img,
.hochzeit-orte img {
		height: 13rem;
	}

	.hochzeit-orte li {
		flex-basis: 100%;
	}

	.hochzeit-orte > button {
		top: 5.4rem;
	}
}

/* Firmenfeiern */

#firmen-pakete {
	scroll-margin-top: 7.25rem;
}

.abschnitt .hochzeit-ablauf li > h3 + p {
	margin: 0;
	color: var(--dunkelgrau);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.45;
}

.firmen-arten {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.15rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.firmen-arten img {
	display: block;
	width: 100%;
	height: 16.5rem;
	object-fit: cover;
}

.firmen-arten a > span {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	flex: 1;
	padding: 1.1rem 1.2rem 1.25rem;
}

.firmen-arten a > span > span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.4rem;
	color: var(--primary-color);
	font-weight: 600;
}

.sommerfest-aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.2rem;
}

.sommerfest-hinweis {
	margin: 1.15rem 0 0;
	color: var(--dunkelgrau);
}

#sommerfest-pakete {
	scroll-margin-top: 7.25rem;
}

#messe-pakete {
	scroll-margin-top: 7.25rem;
}

#geburtstag-pakete {
	scroll-margin-top: 7.25rem;
}

#familie-pakete {
	scroll-margin-top: 7.25rem;
}

#sport-pakete {
	scroll-margin-top: 7.25rem;
}

.hochzeit-ablauf.sport-ablauf {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

#baustelle-pakete {
	scroll-margin-top: 7.25rem;
}

.baustelle-partner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
}

.baustelle-partner li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.55rem;
	min-width: 0;
	min-height: 6.4rem;
	padding: 0.9rem 1rem;
	border: 1px solid rgba(255, 149, 42, 0.28);
	border-radius: 1rem;
	background: var(--white-color);
}

.abschnitt.baustelle-vertrauen .baustelle-partner img {
	position: static;
	inset: auto;
	display: block;
	width: auto;
	max-width: 100%;
	height: 2.5rem;
	min-height: 0;
	object-fit: contain;
	object-position: left center;
	border-radius: 0;
}

.baustelle-partner span {
	font-weight: 700;
	line-height: 1.25;
}

@media (max-width: 62rem) {
	.baustelle-partner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 40rem) {
	.baustelle-partner {
		grid-template-columns: 1fr;
	}
}

.messe-groessen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.messe-groessen a {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 1.25rem;
	background: var(--white-color);
	color: inherit;
	text-decoration: none;
	box-shadow: var(--box-shadow);
}

main .messe-groessen a {
	text-decoration: none;
}

.messe-groessen img {
	display: block;
	width: 100%;
	height: 18rem;
	object-fit: cover;
}

.messe-groessen a > span {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	flex: 1;
	padding: 1.15rem 1.25rem 1.3rem;
}

.messe-groessen h3 {
	margin: 0;
	font-size: 1.45rem;
	line-height: 1.2;
}

.messe-groessen a > span > span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.45rem;
	color: var(--primary-color);
	font-weight: 600;
}

@media (max-width: 62rem) {
	.messe-groessen {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 40rem) {
	.messe-groessen img {
		height: 13rem;
	}
}

@media (max-width: 40rem) {
	.firmen-arten {
		grid-template-columns: 1fr;
	}

	.firmen-arten img {
		height: 13rem;
		min-height: 0;
	}
}

/* Weihnachtsfeier-Komplettpakete */

#pakete,
#weihnacht-angebote {
	scroll-margin-top: 7.25rem;
}

.weihnacht-peru img {
	position: static;
	inset: auto;
	display: block;
	width: 100%;
	height: 16rem;
	max-height: none;
	object-fit: cover;
	border-radius: 1.15rem;
}

.weihnacht-peru {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	column-gap: 3rem;
	align-items: center;
}

.weihnacht-peru img {
	height: 26rem;
}

@media (max-width: 62rem) {
	.weihnacht-peru {
		grid-template-columns: 1fr;
	}

	.weihnacht-peru img {
		height: 16rem;
	}
}

/* Foodtruck mieten */

#foodtruck-speisen {
	scroll-margin-top: 7.25rem;
}

section:not(.uebernahme):has(> div > img) img.foodtruck-kueche {
	object-position: center 30%;
}

/* Eventausstattung */

#ausstattung-pakete {
	scroll-margin-top: 7.25rem;
	margin-top: 2.4rem;
}

.ausstattung-kategorien {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.15rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.ausstattung-kategorien li {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	border-radius: 1.2rem;
	background: var(--white-color);
	box-shadow: var(--box-shadow);
}

.ausstattung-kategorien img {
	display: block;
	width: 100%;
	height: 16rem;
	object-fit: cover;
}

.ausstattung-kategorien li > div {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	flex: 1;
	padding: 1.05rem 1.15rem 1.2rem;
}

@media (max-width: 62rem) {
	.ausstattung-kategorien {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 40rem) {
	.ausstattung-kategorien {
		grid-template-columns: 1fr;
	}

	.ausstattung-kategorien img {
		height: 13rem;
	}
}

/* Blog */

.blog-einleitung {
	max-width: 42rem;
	color: #5c5c5c;
}

.blog-einleitung + .kicker {
	margin-top: 1.6rem;
	margin-bottom: 2.45rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.blog-auftakt {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	margin: 0;
	overflow: hidden;
	border: 1px solid #ece7e1;
	border-radius: 1.5rem;
	background: #fff;
}

.blog-auftakt-bild {
	display: block;
	position: relative;
	min-height: 22rem;
	overflow: hidden;
}

.blog-auftakt-bild img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.45s ease;
}

.blog-auftakt:hover .blog-auftakt-bild img {
	transform: scale(1.04);
}

.blog-auftakt > div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 2.2rem 2.4rem;
}

.blog-auftakt h2 {
	margin: 0.15rem 0 0.85rem;
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.2;
}

.blog-auftakt h2 a,
.blog-karten h3 a {
	color: inherit;
	font: inherit;
	font-size: inherit;
	line-height: inherit;
	text-decoration: none;
}

.blog-auftakt h2 a:hover,
.blog-karten h3 a:hover {
	color: #e36f00;
}

.blog-auftakt > div > p:not(.kicker):not(.kennzeichen):not(.blog-zeit) {
	margin: 0;
	color: #4a4a4a;
	line-height: 1.55;
}

.blog-zeit {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 1rem 0 0;
	color: #6a6a6a;
	font-size: 0.95rem;
}

.blog-uhr {
	flex: 0 0 auto;
}

.blog-lesen {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: 1.35rem;
	padding: 0.78rem 1.15rem 0.78rem 1.3rem;
	border-radius: 999px;
	background: #ff952a;
	color: #fff;
	font-weight: 650;
	line-height: 1;
	text-decoration: none;
}

.blog-lesen:hover {
	background: #e36f00;
	color: #fff;
}

.blog-lesen svg {
	transition: transform 0.22s ease;
}

.blog-lesen:hover svg {
	transform: translateX(0.2rem);
}

main .blog-lesen {
	text-decoration: none;
}

.blog-karten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
}

.blog-karten li {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid #ece7e1;
	border-radius: 1.35rem;
	background: #fff;
}

.blog-karten li:hover {
	border-color: #e0c7ae;
}

.blog-karte-bild {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.blog-karten img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.45s ease;
}

.blog-karten li:hover img {
	transform: scale(1.04);
}

.blog-karten li > div {
	display: flex;
	flex-direction: column;
	flex: 1;
	align-items: flex-start;
	padding: 1.1rem 1.15rem 1.15rem;
}

.blog-karten h3 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.45rem, 2vw, 1.7rem);
	font-weight: 700;
	line-height: 1.22;
}

.blog-karten li,
.blog-auftakt,
.location-karte,
.location-filter button,
.faq button,
.eventarten a,
.hochzeit-arten a,
.leistungen a {
	transition:
		color var(--transition),
		background-color var(--transition),
		border-color var(--transition),
		box-shadow var(--transition),
		opacity var(--transition),
		filter var(--transition),
		transform var(--transition);
}

.blog-karten li > div > p:not(.kicker):not(.kennzeichen):not(.blog-zeit) {
	flex: 1;
	margin: 0 0 1rem;
	color: #4a4a4a;
	font-size: 0.98rem;
	line-height: 1.5;
}

.blog-fuss {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	margin-top: auto;
}

.blog-fuss .blog-zeit {
	margin: 0;
}

.blog-pfeil {
	display: inline-flex;
	color: #161616;
	text-decoration: none;
}

.blog-pfeil:hover {
	color: #e36f00;
}

main .blog-auftakt h2 a,
main .blog-karten h3 a,
main .blog-pfeil {
	text-decoration: none;
}

.blog-lead {
	margin-top: 0.35rem;
	font-size: 1.18rem;
	line-height: 1.65;
}

.blog-beitrag .overhead {
	margin: 0 0 0.7rem;
}

.blog-beitrag h1 {
	max-width: 16em;
}

.blog-beitrag .blog-zeit {
	margin-top: 0.85rem;
}

.blog-beitrag .blog-uhr {
	color: #e36f00;
}

.blog-beitrag .blog-bild {
	margin: 0 0 1.8rem;
}

.blog-bild img {
	display: block;
	width: 100%;
	height: clamp(16rem, 42vw, 34rem);
	object-fit: cover;
	border-radius: 1.35rem;
	box-shadow: var(--box-shadow);
}

.blog-text h2 {
	margin: 3.1rem 0 0.85rem;
	font-size: clamp(1.55rem, 2.4vw, 1.9rem);
	line-height: 1.2;
}

.blog-text h3 {
	margin: 0 0 0.35rem;
	font-size: 1.22rem;
	line-height: 1.3;
}

.blog-text p:not(.kicker),
.blog-text li {
	font-size: 1.08rem;
	line-height: 1.7;
}

.blog-text p:not(.kicker),
.blog-text ul,
.blog-text ol {
	margin: 0 0 1rem;
}

.blog-text a {
	color: #c45e00;
	text-underline-offset: 0.16em;
}

.blog-text a:hover {
	color: #e36f00;
}

.blog-text > ul {
	margin: 0.4rem 0 1.4rem;
	padding: 0;
	list-style: none;
}

.blog-text > ul li {
	position: relative;
	margin: 0 0 0.7rem;
	padding-left: 1.45rem;
}

.blog-text > ul li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 0.55em;
	width: 0.4rem;
	height: 0.68rem;
	border-right: 2px solid var(--primary-color);
	border-bottom: 2px solid var(--primary-color);
	transform: rotate(45deg);
}

.blog-kurz {
	margin: 2.2rem 0 0.4rem;
	padding: 1.55rem 1.6rem 1.35rem;
	border: 1px solid #f3d7b8;
	border-top: 3px solid var(--primary-color);
	border-radius: 1.25rem;
	background: #fff8f1;
}

.blog-kurz > div {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 0.85rem;
}

.blog-kurz > div::before {
	content: "";
	flex: 0 0 auto;
	width: 2.45rem;
	height: 2.45rem;
	border-radius: 50%;
	background: var(--primary-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.2rem no-repeat;
}

.blog-kurz h2 {
	margin: 0;
	font-size: 1.45rem;
}

.blog-kurz > p {
	margin: 0 0 1.1rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid #f3d7b8;
}

.blog-kurz ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.85rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-kurz li {
	position: relative;
	margin: 0;
	padding-left: 1.35rem;
	line-height: 1.5;
}

.blog-kurz li::before {
	content: "";
	position: absolute;
	left: 0.05rem;
	top: 0.45em;
	width: 0.38rem;
	height: 0.62rem;
	border-right: 2px solid #e36f00;
	border-bottom: 2px solid #e36f00;
	transform: rotate(45deg);
}

.blog-schritte {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	margin: 1.15rem 0 1.6rem;
}

.blog-schritt {
	display: grid;
	grid-template-columns: 2.2rem minmax(0, 1fr);
	gap: 0.95rem;
	align-items: start;
	padding: 1.1rem 1.2rem;
	border: 1px solid #f3d7b8;
	border-radius: 1rem;
	background: #fff8f1;
}

.blog-schritt p {
	margin: 0;
}

.blog-num {
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border: 0;
	border-radius: 50%;
	background: var(--primary-color);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 650;
}

.blog-hinweis {
	margin: 1.6rem 0 1.8rem;
	padding: 1.2rem 1.35rem 0.35rem;
	border-left: 4px solid var(--primary-color);
	border-radius: 0 1rem 1rem 0;
	background: #fff8f1;
}

.blog-hinweis p:last-child {
	margin-bottom: 0.85rem;
}

.blog-hinweis p > a:only-child {
	display: inline-flex;
	align-items: center;
	min-height: 3.1rem;
	margin-top: 0.35rem;
	padding: 0.7rem 1.25rem;
	border-radius: 999px;
	background: #121212;
	color: #fff;
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 12px 28px rgba(18, 18, 18, 0.16);
}

.blog-hinweis p + p > a:only-child {
	background: var(--primary-color);
	box-shadow: 0 12px 28px rgba(227, 111, 0, 0.22);
}

.blog-hinweis p > a:only-child:hover {
	color: #fff;
}

.blog-hinweis:has(> p:first-child > a:only-child) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.8rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.blog-hinweis:has(> p:first-child > a:only-child) p {
	margin: 0;
}

.blog-hinweis:has(> p:first-child > a:only-child) a {
	margin-top: 0;
}

.blog-tabelle {
	overflow-x: auto;
	margin: 1.15rem 0 1.7rem;
	border: 1px solid #f3d7b8;
	border-radius: 1rem;
}

.blog-tabelle table {
	width: 100%;
	border-collapse: collapse;
}

.blog-tabelle th,
.blog-tabelle td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid #f3d7b8;
	text-align: left;
	vertical-align: top;
}

.blog-tabelle th {
	background: #fff8f1;
	color: #c45e00;
	font-family: var(--font-headline);
	font-size: 1.05rem;
	font-weight: 600;
}

.blog-tabelle tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 62rem) {
	.blog-auftakt,
	.blog-karten {
		grid-template-columns: 1fr 1fr;
	}

	.blog-auftakt {
		grid-template-columns: 1fr;
	}

	.blog-auftakt-bild {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 40rem) {
	.blog-karten,
	.blog-kurz ul {
		grid-template-columns: 1fr;
	}
}

#location-uebersicht,
#location-gaeste,
#eigene-location {
	scroll-margin-top: 7.25rem;
}

.location-trenner {
	width: var(--inhalt);
	max-width: 100%;
	margin: 5rem auto;
	border: 0;
	border-top: 2px solid #e6e6e6;
}

.content > .abschnitt:has(+ .location-trenner) {
	margin-bottom: 0;
}

.location-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 1.35rem 2.2rem;
	margin: 1.6rem 0 1.7rem;
}

.location-filter fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.location-filter legend {
	margin-bottom: 0.5rem;
	font-weight: 650;
}

.location-filter button {
	margin: 0 0.4rem 0.45rem 0;
	padding: 0.42rem 0.85rem;
	border: 1px solid #ece7e2;
	border-radius: 999px;
	background: #fff;
	color: inherit;
	cursor: pointer;
}

.location-filter button[aria-pressed="true"] {
	border-color: #1a1a1a;
	background: #1a1a1a;
	color: #fff;
}

.location-karten {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.location-karte {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	min-width: 0;
	overflow: hidden;
	background: #fff;
	border-radius: 1.15rem;
	box-shadow: var(--box-shadow);
}

.location-karte:nth-child(even) .location-bild {
	order: 2;
}

.location-karte[hidden] {
	display: none;
}

.location-bild {
	position: relative;
	min-height: 22rem;
}

.location-bild img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.location-karte > div:not(.location-bild) {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 2.3rem 3rem;
}

.location-karte h3 {
	margin: 0 0 0.7rem;
}

.location-karte > div:not(.location-bild) > p {
	margin: 0 0 0.75rem;
}

.location-vorteile {
	margin-top: 0.35rem;
	color: var(--text-color);
	font-weight: 700;
}

.location-karte ul {
	margin: 0 0 1.15rem;
	padding-left: 1.15rem;
}

.location-karte li {
	margin: 0.2rem 0;
}

.location-karte .content-schwarz {
	margin-top: auto;
	align-self: flex-start;
}

.location-leer {
	margin: 1rem 0 0;
}

@media (max-width: 62rem) {
	.location-karte,
	.location-karte:nth-child(even) {
		grid-template-columns: minmax(0, 1fr);
	}

	.location-karte:nth-child(even) .location-bild {
		order: 0;
	}

	.location-bild,
	.location-bild img {
		position: relative;
		inset: auto;
		height: 16rem;
		min-height: 0;
	}
}

@media (max-width: 40rem) {

	.location-bild,
	.location-bild img {
		height: 13rem;
	}

	.location-karte > div:not(.location-bild) {
		padding: 1rem;
	}
}

body.agb h1,
body.datenschutz h1,
body.impressum h1,
body.allergene h1 {
	text-transform: none;
	font-size: clamp(1.8rem, 3.2vw, 2.45rem);
}

body.agb .agb-text,
body.datenschutz .agb-text,
body.impressum .agb-text,
body.allergene .agb-text {
	max-width: 46rem;
}

body.agb .agb-text h2,
body.impressum .agb-text h2,
body.allergene .agb-text h2,
body.datenschutz .agb-text h3,
body.datenschutz .agb-text h4,
body.datenschutz .agb-text h5 {
	margin-top: 2.2rem;
}

body.agb .agb-text h2,
body.impressum .agb-text h2,
body.allergene .agb-text h2,
body.datenschutz .agb-text h3 {
	font-size: 1.35rem;
}

body.datenschutz .agb-text h4 {
	font-size: 1.2rem;
}

body.datenschutz .agb-text h5 {
	font-size: 1.05rem;
}

body.agb .agb-text ul,
body.datenschutz .agb-text ul,
body.allergene .agb-text ul {
	margin: 0.15rem 0 0.2rem;
	padding-left: 1.2rem;
}

body.agb .agb-text li + li,
body.datenschutz .agb-text li + li,
body.allergene .agb-text li + li {
	margin-top: 0.4rem;
}

body.datenschutz .agb-text hr,
body.impressum .agb-text hr {
	margin: 1.15rem 0 1.4rem;
	border: 0;
	border-top: 1px solid #e6e6e6;
}

body.datenschutz .agb-text p.strong {
	font-weight: 700;
}

.kontakt-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.7fr);
	gap: 1.4rem;
	align-items: start;
	margin-top: 1.6rem;
}

.kontakt-form,
.kontakt-seite {
	min-width: 0;
	background: #fff;
	border-radius: 1.25rem;
	box-shadow: var(--box-shadow);
}

.kontakt-form {
	padding: 1.4rem 1.35rem 1.5rem;
}

.kontakt-form fieldset {
	margin: 0 0 1.35rem;
	padding: 0 0 1.25rem;
	border: 0;
	border-bottom: 1px solid #f0ebe6;
}

.kontakt-form legend {
	margin-bottom: 0.75rem;
	font-family: var(--font-headline);
	font-size: 1.25rem;
	font-weight: 700;
}

.kontakt-form legend span,
.kontakt-form label span {
	color: var(--primary-color);
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 650;
}

.kontakt-form label {
	display: block;
	margin: 0.85rem 0 0.35rem;
	font-weight: 650;
}

.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form input[type="tel"],
.kontakt-form input[type="number"],
.kontakt-form input[type="date"],
.kontakt-form textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.85rem 0.9rem;
	border: 1px solid #e7e1db;
	border-radius: 0.75rem;
	background: #fff;
	color: inherit;
	font: inherit;
}

.kontakt-form textarea {
	min-height: 8.5rem;
	resize: vertical;
}

.kontakt-form input:focus,
.kontakt-form textarea:focus {
	border-color: var(--primary-color);
	outline: none;
}

.kontakt-felder,
.kontakt-leistung {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.85rem 1rem;
}

.kontakt-felder label {
	margin-top: 0;
}

.kontakt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-bottom: 0.75rem;
}

.kontakt-chips button {
	padding: 0.42rem 0.8rem;
	border: 1px solid #e7e1db;
	border-radius: 999px;
	background: #fff;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.kontakt-chips button[aria-pressed="true"] {
	border-color: #1a1a1a;
	background: #1a1a1a;
	color: #fff;
}

.kontakt-leistung label {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	padding: 0.75rem 0.8rem;
	border: 1px solid #e7e1db;
	border-radius: 0.75rem;
	font-weight: 650;
	cursor: pointer;
}

.kontakt-leistung input {
	width: 1.05rem;
	height: 1.05rem;
	accent-color: #1a1a1a;
}

.kontakt-datenschutz {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.75rem;
	align-items: start;
	margin: 0.2rem 0 1.15rem;
}

.kontakt-datenschutz input {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.28rem 0 0;
	accent-color: #1a1a1a;
}

.kontakt-datenschutz label,
.kontakt-datenschutz p {
	margin: 0;
}

.kontakt-datenschutz p + p {
	margin-top: 0.35rem;
}

.kontakt-form [role="alert"] {
	margin: 0 0 1rem;
	padding: 0.8rem 0.9rem;
	border-radius: 0.75rem;
	background: #fff6f3;
	color: var(--error-color);
}

.kontakt-form [role="alert"] p {
	margin: 0.15rem 0;
}

.kontakt-form button.content-schwarz {
	display: flex;
	width: 100%;
	max-width: none;
	min-height: 3.1rem;
	padding: 0.5rem 3.6rem 0.5rem 1.35rem;
	border: 0;
	background: var(--text-color);
	color: var(--white-color);
	box-shadow: 0 12px 28px rgba(18, 18, 18, 0.18);
	cursor: pointer;
}

.kontakt-form button.content-schwarz:hover,
.kontakt-form button.content-schwarz:focus-visible {
	background: #2a2a2a;
	color: var(--white-color);
}

.kontakt-seite {
	position: sticky;
	top: 8rem;
	padding: 1.35rem 1.25rem 1.4rem;
	border-top: 3px solid var(--primary-color);
}

.kontakt-seite h2 {
	margin-bottom: 1rem;
}

.kontakt-label {
	margin: 0.85rem 0 0.1rem;
	color: var(--primary-color);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kontakt-seite > p {
	margin: 0;
}

.kontakt-note {
	margin: 1rem 0 1.15rem !important;
	color: var(--dunkelgrau);
}

@media (max-width: 62rem) {
	.kontakt-layout,
	.kontakt-felder,
	.kontakt-leistung {
		grid-template-columns: 1fr;
	}

	.kontakt-seite {
		position: static;
	}
}

@media (max-width: 40rem) {
	.kontakt-chips {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.kontakt-chips button {
		width: 100%;
		text-align: center;
	}
}

.fingerfood-vielfalt h3,
.fingerfood-mengen h3,
.getraenke-arten h3,
.hochzeit-arten h3,
.firmen-arten h3,
.ausstattung-kategorien h3,
.eventarten h3 {
	margin: 0;
	font-size: 1.28rem;
	line-height: 1.2;
}

.fingerfood-vielfalt p,
.fingerfood-mengen p,
.getraenke-arten p,
.hochzeit-arten p,
.hochzeit-ablauf li > p:last-child,
.hochzeit-leistungen p,
.firmen-arten p,
.messe-groessen p,
.ausstattung-kategorien p,
.eventarten p {
	margin: 0;
	color: var(--dunkelgrau);
	font-size: 1.06rem;
	line-height: 1.45;
}

/* Artikel-Detailseiten (/shop/artikel/…) */

.artikel-krumen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 1.35rem;
	font-family: var(--font);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.4;
	color: #6a6a6a;
}

main .artikel-krumen a,
.artikel-krumen span {
	font: inherit;
	color: inherit;
	text-decoration: none;
}

main .artikel-krumen a:hover,
main .artikel-krumen a:focus-visible {
	color: var(--dunkelorange);
	text-decoration: none;
}

.artikel-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.85fr);
	gap: clamp(1.75rem, 4vw, 3.25rem);
	align-items: start;
}

.artikel-galerie {
	display: grid;
	gap: 0.7rem;
	min-width: 0;
}

.artikel-buehne {
	position: relative;
}

.artikel-viewport {
	overflow: hidden;
	border-radius: 1.25rem;
	background: #fff8f1;
	aspect-ratio: 4 / 3;
	touch-action: pan-y;
	cursor: zoom-in;
}

.artikel-spur,
.artikel-licht-spur {
	display: flex;
	height: 100%;
	transform: translate3d(0, 0, 0);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.artikel-spur.is-ziehen,
.artikel-licht-spur.is-ziehen {
	transition: none;
}

.artikel-folie {
	flex: 0 0 100%;
	width: 100%;
	min-width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
	cursor: zoom-in;
}

.artikel-folie img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.artikel-zaehler {
	position: absolute;
	right: 0.85rem;
	bottom: 0.85rem;
	z-index: 2;
	margin: 0;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: rgba(18, 18, 18, 0.62);
	color: #fff;
	font-size: 0.82rem;
	line-height: 1.2;
	pointer-events: none;
}

.artikel-pfeil {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--dunkelgrau);
	box-shadow: var(--box-shadow);
	transform: translateY(-50%);
	cursor: pointer;
}

.artikel-pfeil--zurueck {
	left: 0.7rem;
}

.artikel-pfeil--weiter {
	right: 0.7rem;
}

.artikel-pfeil:hover,
.artikel-pfeil:focus-visible {
	color: var(--dunkelorange);
}

.artikel-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
	gap: 0.5rem;
	width: 100%;
}

.artikel-thumbs button {
	width: 100%;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 0.75rem;
	background: #fff8f1;
	overflow: hidden;
	cursor: pointer;
}

.artikel-thumbs button.is-aktiv,
.artikel-thumbs button:hover,
.artikel-thumbs button:focus-visible {
	border-color: var(--orange);
}

.artikel-thumbs img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.artikel-ohne-bild {
	display: grid;
	place-items: center;
	min-height: 16rem;
	margin: 0;
	border-radius: 1.25rem;
	background: #fff8f1;
	color: #8a8a8a;
}

.artikel-kauf {
	position: sticky;
	top: 6.5rem;
	display: grid;
	align-content: start;
	gap: 0.85rem;
}

.artikel-kauf .kicker {
	margin: 0;
}

.artikel-kauf h1 {
	margin: 0;
}

.artikel-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.artikel-chips li {
	padding: 0.28rem 0.7rem;
	border: 1px solid var(--hellorange);
	border-radius: 999px;
	font-size: 0.9rem;
}

.artikel-tags {
	margin: 0.35rem 0 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #6a6a6a;
}

.artikel-tags span {
	font-weight: 600;
	color: #5e5e5e;
}

.artikel-preis {
	margin: 0;
	font-family: var(--font-headline);
	font-size: clamp(1.6rem, 2.4vw, 2rem);
	font-weight: 700;
	color: var(--dunkelorange);
}

.artikel-preis span {
	font-family: var(--font);
	font-size: 0.95rem;
	font-weight: 500;
	color: #5e5e5e;
}

.artikel-kurz,
.artikel-inklusive {
	margin: 0;
	color: #3a3a3a;
}

.artikel-punkte {
	display: grid;
	gap: 0.35rem;
	margin: 0.15rem 0 0;
	padding: 0;
	list-style: none;
}

.artikel-punkte li {
	position: relative;
	padding-left: 1.35rem;
}

.artikel-punkte li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45rem;
	width: 0.55rem;
	height: 0.3rem;
	border-left: 2px solid var(--orange);
	border-bottom: 2px solid var(--orange);
	transform: rotate(-45deg);
}

.artikel-aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: 0.35rem;
}

.artikel-aktionen a {
	text-decoration: none;
}

.artikel-tabs {
	display: grid;
	gap: 1.25rem;
}

.artikel-tabs-nav {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(1rem, 4vw, 2.25rem);
	overflow-x: auto;
	border-bottom: 1px solid #e8e8e8;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.artikel-tabs-nav::-webkit-scrollbar {
	display: none;
}

.artikel-tabs-nav button {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.55rem 0.1rem 0.85rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: #8a8a8a;
	font: inherit;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	cursor: pointer;
}

.artikel-tabs-nav button.is-aktiv,
.artikel-tabs-nav button[aria-selected="true"] {
	color: var(--dunkelgrau);
	border-bottom-color: var(--dunkelorange);
}

.artikel-tabs-nav button:hover,
.artikel-tabs-nav button:focus-visible {
	color: var(--dunkelorange);
}

.artikel-tabs-panel {
	min-width: 0;
}

.artikel-tabs-panel[hidden] {
	display: none;
}

.artikel-prosa p {
	margin: 0 0 0.9rem;
	color: #4a4a4a;
	line-height: 1.65;
}

.artikel-prosa ul,
.artikel-prosa ol {
	margin: 0 0 0.9rem;
	padding-left: 1.2rem;
	color: #4a4a4a;
}

.artikel-prosa li + li {
	margin-top: 0.25rem;
}

.artikel-liste {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #4a4a4a;
}

.artikel-liste li {
	position: relative;
	padding-left: 1.35rem;
}

.artikel-liste li + li {
	margin-top: 0.45rem;
}

.artikel-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55rem;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--orange);
}

.artikel-hinweis {
	padding-top: 0.35rem;
	border-top: 1px solid #eee;
}

.artikel-hinweis p {
	margin: 0.85rem 0 0;
	color: #6a6a6a;
	font-size: 0.95rem;
	line-height: 1.55;
}

.abschluss a:not([class]) {
	color: var(--dunkelorange);
}

body.artikel-seite .artikel-hinweis a,
body.artikel-seite .artikel-tabs-panel a,
body.artikel-seite .artikel-prosa a,
body.artikel-seite .abschluss p a {
	font: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

body.artikel-seite .artikel-hinweis a:hover,
body.artikel-seite .artikel-hinweis a:focus-visible,
body.artikel-seite .artikel-tabs-panel a:hover,
body.artikel-seite .artikel-tabs-panel a:focus-visible,
body.artikel-seite .artikel-prosa a:hover,
body.artikel-seite .artikel-prosa a:focus-visible,
body.artikel-seite .abschluss p a:hover,
body.artikel-seite .abschluss p a:focus-visible {
	color: var(--dunkelorange);
}

.artikel-licht {
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
	color: #fff;
}

.artikel-licht[open] {
	display: grid;
	place-items: center;
}

.artikel-licht[open] .artikel-licht-buehne {
	animation: artikel-licht-ein 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.artikel-licht::backdrop {
	background: rgba(8, 8, 8, 0.82);
}

.artikel-licht[open]::backdrop {
	animation: artikel-licht-hintergrund 0.28s ease;
}

@keyframes artikel-licht-ein {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes artikel-licht-hintergrund {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.artikel-licht-rahmen {
	width: auto;
	max-width: 92vw;
	padding: 0;
}

.artikel-licht-buehne {
	position: relative;
	width: max-content;
	max-width: 92vw;
}

.artikel-licht-viewport {
	overflow: hidden;
	width: min(92vw, 72rem);
	height: min(86vh, 86dvh);
	border-radius: 0.85rem;
	background: transparent;
	touch-action: pan-y;
}

.artikel-licht-folie {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	min-width: 100%;
	height: 100%;
	margin: 0;
	background: transparent;
}

dialog.artikel-licht .artikel-licht-folie img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.artikel-licht-pfeil {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.85rem;
	height: 2.85rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--dunkelgrau);
	box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.35);
	transform: translateY(-50%);
	cursor: pointer;
}

.artikel-licht-pfeil--zurueck {
	left: 0.75rem;
}

.artikel-licht-pfeil--weiter {
	right: 0.75rem;
}

.artikel-licht-pfeil:hover,
.artikel-licht-pfeil:focus-visible {
	color: var(--dunkelorange);
}

.artikel-licht-schliessen {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 2.7rem;
	height: 2.7rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--dunkelgrau);
	box-shadow: 0 0.4rem 1.1rem rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.artikel-licht-schliessen:hover,
.artikel-licht-schliessen:focus-visible {
	color: var(--dunkelorange);
}

.artikel-licht-zaehler {
	position: absolute;
	left: 50%;
	bottom: 0.85rem;
	z-index: 2;
	margin: 0;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: rgba(18, 18, 18, 0.72);
	color: #fff;
	font-size: 0.9rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
	transform: translateX(-50%);
	pointer-events: none;
}

.warenkorb-liste details a {
	color: var(--dunkelorange);
	text-decoration: none;
}

.warenkorb-liste details a:hover,
.warenkorb-liste details a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 62rem) {
	.artikel-layout {
		grid-template-columns: 1fr;
	}

	.artikel-kauf {
		position: static;
	}

	.artikel-aktionen a {
		flex: 1 1 auto;
		justify-content: center;
		text-align: center;
	}
}

@media (max-width: 40rem) {
	.artikel-thumbs {
		grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
		gap: 0.4rem;
	}

	.artikel-pfeil {
		width: 2.15rem;
		height: 2.15rem;
	}

	.artikel-pfeil--zurueck {
		left: 0.45rem;
	}

	.artikel-pfeil--weiter {
		right: 0.45rem;
	}

	.artikel-tabs-nav {
		gap: 1.15rem;
	}

	.artikel-tabs-nav button {
		padding-bottom: 0.7rem;
		font-size: 0.95rem;
	}

	.artikel-licht-rahmen,
	.artikel-licht-buehne {
		max-width: calc(100vw - 0.75rem);
	}

	.artikel-licht-viewport {
		border-radius: 0.7rem;
	}

	.artikel-licht-pfeil {
		width: 2.4rem;
		height: 2.4rem;
	}

	.artikel-licht-pfeil--zurueck {
		left: 0.4rem;
	}

	.artikel-licht-pfeil--weiter {
		right: 0.4rem;
	}

	.artikel-licht-schliessen {
		top: 0.5rem;
		right: 0.5rem;
		width: 2.45rem;
		height: 2.45rem;
	}

	.artikel-licht-zaehler {
		bottom: 0.6rem;
		font-size: 0.84rem;
	}
}

/* Handy-Querformat: kurze Höhe, Querlage – kein Tablet */
@media (prefers-reduced-motion: reduce) {
	.artikel-licht[open] .artikel-licht-buehne,
	.artikel-licht[open]::backdrop {
		animation: none;
	}
}

@media (orientation: landscape) and (max-height: 520px) {
	.hero > div:last-child:not(:first-child) {
		display: none;
	}

	.hero > button[data-hero] {
		top: 42%;
		width: 2.15rem;
		height: 2.15rem;
	}

	body:has(.hero) header.is-fest > div {
		min-height: 3.75rem;
	}

	body:has(.hero) header.is-fest > div > a {
		padding: 0.4rem 0.65rem;
	}

	.slide-orange,
.slide-rot,
.content-orange,
.content-schwarz,
.content-schwarz-ohne,
.blog-lesen,
.btn-neu,
.btn-neu-hell {
		transform: scale(0.9);
		transform-origin: center;
	}
}