/* ==========================================================================
   11event – statischer Nachbau der WordPress-Seite (Theme „Inspiro“)
   ========================================================================== */

/* Schriften (lokal eingebunden, keine Verbindung zu Google) ---------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url(../fonts/inter-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url(../fonts/inter-latin.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;
}
@font-face {
	font-family: 'Onest';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url(../fonts/onest-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Onest';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url(../fonts/onest-latin.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;
}

/* CI-Schrift „Nata“ (MysticalType Studio) – wie auf der Visitenkarte, für die großen Texte */
@font-face {
	font-family: 'Nata';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/nata-bold.woff) format('woff');
}

/* Variablen --------------------------------------------------------------- */
:root {
	--primary: var(--ci-orange);
	--text: #dce3e4;
	--heading: var(--ci-orange);
	--dark: #101010;
	--muted: #78787f;
	--ci-orange: #f79f60;
	--ci-petrol: #11262a;
	--container: 1200px;
	--gutter: 30px;
	--side-nav-width: 380px;
	--font-body: 'Inter', sans-serif;
	--font-heading: 'Onest', sans-serif;
	--font-display: 'Nata', 'Onest', sans-serif;
}

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

html {
	-webkit-tap-highlight-color: transparent;
}

body {
	margin: 0;
	background: var(--ci-petrol);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

p {
	margin: 0 0 1.5em;
}

a {
	color: var(--primary);
	text-decoration: none;
	transition: color .1s ease-in;
}

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

button {
	font: inherit;
	cursor: pointer;
}

.skip-link {
	position: absolute;
	left: 10px;
	top: -100px;
	z-index: 2000;
	padding: 10px 18px;
	background: #fff;
	color: #000;
	font-weight: 600;
}

.skip-link:focus {
	top: 10px;
}

/* Header ------------------------------------------------------------------ */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	transition: transform .18s ease;
}

/* Header in CI-Farben: Petrol durchscheinend, Logo und Icons in Orange */
.navbar {
	color: var(--ci-orange);
	padding: 18px 0;
	background-color: rgba(17, 38, 42, .45);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: all .5s ease-in-out;
}

.site-header.is-scrolled,
.site-header--solid {
	box-shadow: 0 0 18px 1px rgba(0, 0, 0, .1);
}

.site-header.is-scrolled .navbar,
.site-header--solid .navbar {
	background-color: rgba(17, 38, 42, .85);
	padding: 12px 0;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.custom-logo-link {
	display: block;
	max-width: 50%;
	margin-right: .625em;
}

.custom-logo-link:hover,
.custom-logo-link:focus {
	opacity: .9;
}

.custom-logo {
	width: auto;
	max-height: 80px;
	transition: all .2s ease-in-out;
}

.site-header.is-scrolled .custom-logo,
.site-header--solid .custom-logo {
	max-height: 70px;
}

/* Icons ------------------------------------------------------------------- */
.icon {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.icon .icon__dot {
	fill: currentColor;
	stroke: none;
}

.icon-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.header-actions {
	display: flex;
	align-items: center;
}

.header-icon {
	display: flex;
	padding: .625em;
	margin-left: .625em;
	color: var(--ci-orange);
	transition: opacity .3s ease;
}

.header-icon:hover,
.header-icon:focus-visible {
	color: var(--ci-orange);
	opacity: .7;
}

.header-icon .icon {
	width: 20px;
	height: 20px;
}

/* Hamburger-Button -------------------------------------------------------- */
.navbar-toggle {
	position: relative;
	display: block;
	width: 40px;
	margin: 0 0 0 .9375em;
	padding: 12px 0;
	border: 0;
	background: transparent;
}

.navbar-toggle .icon-bar {
	position: relative;
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ci-orange);
	transition: width .13s ease-out, transform .13s ease-out, opacity .13s ease-out;
}

.navbar-toggle .icon-bar + .icon-bar {
	margin-top: 5px;
}

.navbar-toggle .icon-bar:nth-child(2) {
	width: 17px;
}

.navbar-toggle:hover .icon-bar {
	width: 17px;
}

.navbar-toggle:hover .icon-bar:nth-child(2) {
	width: 22px;
}

.side-nav-open .navbar-toggle .icon-bar:nth-child(1) {
	transform: rotateZ(-45deg) translate3d(-5px, 5px, 0);
	width: 28px;
}

.side-nav-open .navbar-toggle .icon-bar:nth-child(2) {
	opacity: 0;
}

.side-nav-open .navbar-toggle .icon-bar:nth-child(3) {
	transform: rotateZ(45deg) translate3d(-5px, -5px, 0);
	width: 28px;
}

/* Seitenleiste („Hier findest du uns“) ------------------------------------ */
.side-nav {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--side-nav-width);
	z-index: 600;
	overflow-y: auto;
	background: var(--dark);
	color: var(--muted);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .18s ease, visibility 0s linear .18s;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.side-nav::-webkit-scrollbar {
	display: none;
}

.side-nav__inner {
	padding: 60px var(--gutter);
}

.side-nav__close {
	display: none;
	margin: 0 0 15px;
}

/* Pfeil nach rechts statt zweitem X – die Leiste fährt nach rechts raus */
.side-nav__arrow {
	display: block;
	width: 28px;
	height: 20px;
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	transition: transform .13s ease-out;
}

.side-nav__close:hover .side-nav__arrow {
	transform: translateX(4px);
}

.side-nav .widget__title {
	margin: 0 0 20px;
	color: #fff;
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
}

.side-nav a {
	color: #fff;
}

.side-nav a:hover,
.side-nav a:focus-visible {
	color: var(--primary);
}

.side-nav-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: var(--side-nav-width);
	z-index: 900;
	cursor: e-resize;
}

body.side-nav-open .side-nav {
	transform: translateX(0);
	visibility: visible;
	transition: transform .18s ease, visibility 0s;
}

body.side-nav-open .side-nav-overlay {
	display: block;
}

.site-body {
	transition: transform .18s ease;
}

body.side-nav-open .site-header,
body.side-nav-open .site-body {
	transform: translateX(calc(var(--side-nav-width) * -1));
}

/* Hero mit Video ---------------------------------------------------------- */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: var(--gutter);
	overflow: hidden;
	background: #000;
	color: #fff;
}

.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
}

/* iOS blendet bei blockiertem Autoplay (Stromsparmodus) einen Play-Button ein */
.hero__video::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none;
}

.hero__video::-webkit-media-controls {
	display: none !important;
}

.hero__content {
	position: relative;
	width: 100%;
	max-width: var(--container);
	padding: 0 2em;
	text-align: center;
}

.hero__content > p {
	max-width: 900px;
	margin: 0 auto;
}

/* Spruch von der Visitenkarte in CI-Orange auf dem Video; wächst mit Breite und Höhe des Fensters */
.hero__content > .hero__title {
	margin-bottom: 4px;
	color: var(--ci-orange);
	font-family: var(--font-display);
	font-size: clamp(56px, min(18vw, 12.5vh), 140px);
	font-weight: 700;
	line-height: .95;
	letter-spacing: .01em;
	text-transform: uppercase;
	/* dezenter, weicher Schlagschatten nach rechts unten; wächst mit der Schriftgröße mit */
	text-shadow:
		.02em .03em .06em rgba(0, 0, 0, .22),
		.04em .07em .22em rgba(0, 0, 0, .35);
}

.hero__title strong {
	font-weight: 700;
}

.hero__subtitle {
	font-size: clamp(18.434px, 1.152rem + ((1vw - 3.2px) * 0.935), 29px);
	line-height: 1.9;
}

/* Button in den CI-Farben: Petrol mit oranger Schrift und orangem Rand; beim Drüberfahren umgekehrt */
.button-ci {
	display: inline-block;
	margin-top: 32px;
	padding: .9em 1.8em;
	border: 2px solid var(--ci-orange);
	border-radius: 10px;
	background: var(--ci-petrol);
	color: var(--ci-orange);
	font-family: var(--font-heading);
	font-size: clamp(15px, 0.9rem + ((1vw - 3.2px) * 0.3), 18px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.button-ci:hover,
.button-ci:focus-visible {
	background: var(--ci-orange);
	color: var(--ci-petrol);
}

.button-ci:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Auf dem Handy einzeilig: darf in den seitlichen Innenabstand des Hero ragen */
@media screen and (max-width: 30em) {
	.button-ci {
		margin-inline: -2em;
		padding: .9em 1.3em;
		letter-spacing: .5px;
		white-space: nowrap;
	}
}

/* Oranger Abschnitt im Stil der Rückseite der Visitenkarte --------------- */
.claim {
	background: var(--ci-orange);
	color: var(--ci-petrol);
}

.claim__inner {
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin: 0 auto;
	padding: clamp(56px, 9vw, 120px) var(--gutter) clamp(48px, 7vw, 96px);
}

.claim__text {
	margin: 0;
	color: inherit;
	font-family: var(--font-display);
	font-size: clamp(72px, 20vw, 176px);
	font-weight: 700;
	line-height: .95;
	text-transform: uppercase;
}

.claim__mail {
	display: inline-block;
	margin-top: clamp(40px, 6vw, 80px);
	transition: opacity .2s ease;
}

.claim__mail:hover,
.claim__mail:focus-visible {
	opacity: .7;
}

.claim__mail:focus-visible {
	outline: 2px solid var(--ci-petrol);
	outline-offset: 6px;
}

.claim__mail img {
	width: auto;
	height: clamp(26px, 3.2vw, 38px);
}

/* Intro ------------------------------------------------------------------- */
.intro {
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin: 0 auto;
	padding: var(--gutter) var(--gutter) calc(var(--gutter) + 50px);
	text-align: center;
	line-height: 1.9;
}

.intro__title {
	margin: 0 0 20px;
	color: var(--heading);
	font-family: var(--font-display);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .01em;
}

.intro p {
	margin: 20px 0;
}

.buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.button-outline {
	display: inline-block;
	padding: .667em 1.33em;
	border: 2px solid currentColor;
	border-radius: 10px;
	background: transparent;
	color: var(--ci-orange);
	font-family: var(--font-heading);
	font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.177), 16px);
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.button-outline:hover,
.button-outline:focus-visible {
	color: var(--ci-petrol);
	background-color: var(--ci-orange);
	border-color: var(--ci-orange);
}

/* Footer ------------------------------------------------------------------ */
.site-footer {
	border-top: 1px solid color-mix(in srgb, var(--ci-orange) 20%, transparent);
	background: var(--ci-petrol);
	color: color-mix(in srgb, var(--ci-orange) 75%, var(--ci-petrol));
	font-size: 14px;
	line-height: 1.6;
}

.site-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	max-width: var(--container);
	margin: 0 auto;
	padding: 1.875em var(--gutter);
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links a,
.linklike {
	color: var(--ci-orange);
}

.linklike {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	line-height: inherit;
}

.footer-links a:hover,
.footer-links a:focus-visible,
.footer-links a[aria-current="page"],
.linklike:hover,
.linklike:focus-visible {
	color: #fff;
}


/* Unterseiten (Impressum, Datenschutz) ------------------------------------ */
.page-content {
	max-width: calc(950px + 2 * var(--gutter));
	min-height: 70vh;
	margin: 0 auto;
	padding: 150px var(--gutter) 80px;
}

.page-title {
	margin: 0 0 30px;
	color: var(--heading);
	font-family: var(--font-display);
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .01em;
	text-transform: uppercase;
}

.prose h2 {
	margin: 2em 0 .5em;
	color: var(--heading);
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
}

.prose h2:first-child {
	margin-top: 0;
}

.prose p,
.prose ul {
	margin: 0 0 1.2em;
}

.prose ul {
	padding-left: 1.25em;
}

.prose li + li {
	margin-top: .25em;
}

.prose a {
	overflow-wrap: anywhere;
}

.prose a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media screen and (min-width: 641px) {
	.page-title {
		font-size: 60px;
	}
}

@media screen and (min-width: 1025px) {
	.page-title {
		font-size: 76px;
	}

	.prose h2 {
		font-size: 22px;
	}
}

/* Responsiv --------------------------------------------------------------- */
@media screen and (max-width: 48.875em) {
	.side-nav .widget__title {
		font-size: 20px;
	}
}

@media screen and (max-width: 40em) {
	.side-nav__inner {
		padding-top: 20px;
	}

	.side-nav__close {
		display: block;
	}

	.site-info {
		flex-direction: column;
		text-align: center;
	}
}

@media screen and (max-width: 30em) {
	:root {
		--side-nav-width: 320px;
	}
}

/* Cookie-Dialog (übernommen von bjoernlingner.de) -------------------------- */
:root {
	--c-ink: #0e0f10;
	--c-flaeche: #17181a;
	--c-linie: #2a2c2f;
	--c-linie-stark: #5a5d62;
	--c-text: #eeede8;
	--c-leise: #9b9da1;
}

@media (prefers-color-scheme: light) {
	:root {
		--c-ink: #f3f3f0;
		--c-flaeche: #e8e8e4;
		--c-linie: #d6d6d1;
		--c-linie-stark: #8b8d90;
		--c-text: #101112;
		--c-leise: #595c60;
	}
}

.consent-hinter {
	position: fixed;
	inset: 0;
	z-index: 1900;
	background: rgb(6 6 5 / .55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility .4s;
}

.consent-hinter.offen {
	opacity: 1;
	visibility: visible;
}

.consent {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	width: min(55rem, calc(100vw - 2 * clamp(1rem, 3.2vw, 2.75rem)));
	max-height: calc(100vh - 3rem);
	max-height: calc(100dvh - 3rem);
	background: var(--c-flaeche);
	color: var(--c-text);
	border: 1px solid var(--c-linie);
	box-shadow: 0 30px 80px rgb(0 0 0 / .45);
	font-family: var(--font-body);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 20px);
	transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1), visibility .4s;
}

.consent.offen {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.consent:focus {
	outline: none;
}

.consent h2,
.consent h3,
.consent p,
.consent ul {
	margin: 0;
}

.consent__tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	flex: none;
	border-bottom: 1px solid var(--c-linie);
}

.consent__tab {
	position: relative;
	padding: 1.2rem .75rem;
	border: 0;
	background: none;
	color: var(--c-leise);
	font: 500 .95rem/1.2 var(--font-body);
	cursor: pointer;
	transition: color .2s;
}

.consent__tab:hover,
.consent__tab[aria-selected="true"] {
	color: var(--c-text);
}

.consent__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--c-text);
	transform: scaleX(0);
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}

.consent__tab[aria-selected="true"]::after {
	transform: scaleX(1);
}

.consent__body {
	overflow-y: auto;
	padding: 1.75rem 2rem;
}

.consent__panel[hidden] {
	display: none;
}

.consent__kopf {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: .9rem;
}

.consent__titel {
	color: var(--c-text);
	font: 700 1.25rem/1.2 var(--font-heading);
	letter-spacing: -.015em;
}

.consent p {
	font-size: .95rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--c-text) 82%, var(--c-flaeche));
}

.consent p + p {
	margin-top: .8em;
}

.consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.consent__keks {
	position: relative;
	flex: none;
	width: 48px;
	height: 48px;
}

.consent__keks img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	-webkit-mask: radial-gradient(circle at 101% 26%, transparent 0 17%, #000 17.5%), radial-gradient(circle at 84% 4%, transparent 0 16%, #000 16.5%);
	-webkit-mask-composite: source-in;
	mask: radial-gradient(circle at 101% 26%, transparent 0 17%, #000 17.5%), radial-gradient(circle at 84% 4%, transparent 0 16%, #000 16.5%);
	mask-composite: intersect;
}

.consent__keks::before,
.consent__keks::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: var(--c-text);
}

.consent__keks::before {
	width: 4px;
	height: 4px;
	right: -7px;
	top: 1px;
}

.consent__keks::after {
	width: 3px;
	height: 3px;
	right: -1px;
	top: -6px;
	opacity: .7;
}

.consent.offen .consent__keks {
	animation: knabbern .9s cubic-bezier(.2, .7, .2, 1) .2s both;
}

@keyframes knabbern {
	from {
		transform: rotate(-24deg) scale(.7);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

.consent__kategorie {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--c-linie);
}

.consent__kategorie:first-child {
	padding-top: 0;
}

.consent__kategorie:last-child {
	border-bottom: 0;
}

.consent__kategorie-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	margin-bottom: .4rem;
}

.consent__kategorie-kopf h3 {
	color: var(--c-text);
	font: 600 1rem/1.3 var(--font-heading);
}

.consent__kategorie-kopf h3 span {
	margin-left: .35rem;
	color: var(--c-leise);
	font-weight: 400;
}

.consent .consent__liste {
	list-style: none;
	padding: 0;
	margin: .6rem 0 0;
	font-size: .875rem;
	color: var(--c-leise);
}

.consent__liste li + li {
	margin-top: .25rem;
}

.consent__liste strong {
	color: var(--c-text);
	font-weight: 500;
}

.schalter {
	position: relative;
	flex: none;
	width: 46px;
	height: 26px;
}

.schalter input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.schalter span {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: var(--c-linie-stark);
	transition: background .3s;
	pointer-events: none;
}

.schalter span::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--c-ink);
	transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

.schalter input:checked + span {
	background: var(--c-text);
}

.schalter input:checked + span::after {
	transform: translateX(20px);
}

.schalter input:disabled {
	cursor: not-allowed;
}

.schalter input:disabled + span {
	opacity: .55;
}

.schalter input:focus-visible + span {
	outline: 2px solid var(--c-text);
	outline-offset: 3px;
}

.consent__knoepfe {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
	flex: none;
	padding: 1.25rem 2rem 1.5rem;
	border-top: 1px solid var(--c-linie);
}

.consent__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	height: 3.25rem;
	padding: 0 .75rem;
	border: 1px solid var(--c-linie-stark);
	background: transparent;
	color: var(--c-text);
	font: 500 .95rem/1 var(--font-body);
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}

.consent__knopf:hover {
	background: var(--c-text);
	color: var(--c-ink);
	border-color: var(--c-text);
}

.consent__knopf svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

@media (max-width: 40rem) {
	.consent {
		bottom: .6rem;
		width: calc(100vw - 1.25rem);
		max-height: calc(100vh - 1.25rem);
		max-height: calc(100dvh - 1.25rem);
	}

	.consent__tab {
		padding: 1rem .4rem;
		font-size: .875rem;
	}

	.consent__body {
		padding: 1.4rem 1.25rem;
	}

	.consent__knoepfe {
		grid-template-columns: 1fr;
		gap: .5rem;
		padding: .9rem 1.25rem 1.1rem;
	}

	.consent__knopf {
		height: 2.9rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.consent,
	.consent-hinter,
	.consent__tab::after {
		transition: none;
	}

	.consent.offen .consent__keks {
		animation: none;
	}
}

@media print {
	.consent,
	.consent-hinter {
		display: none;
	}
}