/* =========================
   KLARO – WEBSITENPFLEGER
   ========================= */


/* =========================
   Z-INDEX
   ========================= */

html body :is(#klaro, .klaro) .cookie-modal {
	z-index: 2147483000;
}

html body :is(#klaro, .klaro) .cookie-modal .cm-modal {
	z-index: 2147483001;
}


/* =========================
   HINTERGRUND
   ========================= */

html body :is(#klaro, .klaro) .cookie-modal {
	background: rgba(0, 0, 0, 0.48);
}


/* =========================
   MODAL
   ========================= */

html body :is(#klaro, .klaro) .cookie-modal .cm-modal {
	width: calc(100% - 32px);
	max-width: 640px;
	max-height: calc(100vh - 32px);

	margin: 0 auto;

	border-radius: 12px;

	background: #ffffff;
	color: var(--font-color-dark, #222222);

	box-shadow:
		0 18px 55px
		rgba(0, 0, 0, 0.28);

	overflow: auto;
}


/* =========================
   LISTEN KOMPLETT NEUTRALISIEREN
   ========================= */

html body :is(#klaro, .klaro) .cookie-modal ul,
html body :is(#klaro, .klaro) .cookie-modal ol,
html body :is(#klaro, .klaro) .cookie-modal li {
	margin-left: 0;
	padding-left: 0;

	list-style: none;
}

html body :is(#klaro, .klaro) .cookie-modal li::marker {
	content: "";
}

html body :is(#klaro, .klaro) .cookie-modal li::before,
html body :is(#klaro, .klaro) .cookie-modal li::after {
	content: none;
	display: none;
}


/* =========================
   HEADER
   ========================= */

html body :is(#klaro, .klaro) .cookie-modal .cm-header {
	padding: 20px 22px 16px;

	border-bottom:
		1px solid
		rgba(0, 0, 0, 0.12);
}


html body :is(#klaro, .klaro) .cookie-modal .cm-header h1,
html body :is(#klaro, .klaro) .cookie-modal .cm-header .title {
	margin: 0 0 12px;

	color: var(--font-color-dark, #222222);

	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}


html body :is(#klaro, .klaro) .cookie-modal .cm-header p {
	margin: 0 0 8px;

	color: var(--font-color-dark, #333333);

	font-size: 15px;
	line-height: 1.55;
}


/* =========================
   LINKS
   ========================= */

html body :is(#klaro, .klaro) .cookie-modal a {
	color: var(--logo-color-1, #009f95);

	font-size: inherit;

	text-decoration: underline;
	text-underline-offset: 2px;
}


html body :is(#klaro, .klaro) .cookie-modal a:hover,
html body :is(#klaro, .klaro) .cookie-modal a:focus-visible {
	color: var(--logo-color-1-dark, #006b67);
}


/* =========================
   BODY
   ========================= */

html body :is(#klaro, .klaro) .cookie-modal .cm-body {
	padding: 0;

	font-size: 14px;
	line-height: 1.45;
}


html body :is(#klaro, .klaro) .cookie-modal .cm-purposes {
	margin: 0;
	padding: 0;

	list-style: none;
}


html body :is(#klaro, .klaro) .cookie-modal .cm-purpose {
	margin: 0;

	padding: 16px 22px;

	border-bottom:
		1px solid
		rgba(0, 0, 0, 0.12);

	list-style: none;
}


/* =========================
   SCHALTER + TITEL
   ========================= */

html body :is(#klaro, .klaro) .cookie-modal .cm-list-label {
	position: relative;

	display: block;

	min-height: 32px;

	margin: 0;

	padding:
		2px
		0
		0
		52px;

	font-size: 14px;
	line-height: 1.4;
}


html body :is(#klaro, .klaro) .cookie-modal .cm-list-switch {
	position: absolute;

	top: 0;
	left: 0;

	margin: 0;
}


html body :is(#klaro, .klaro) .cookie-modal .cm-list-title {
	display: block;

	margin: 0;
	padding: 0;

	color: var(--font-color-dark, #222222);

	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}


html body :is(#klaro, .klaro) .cookie-modal .cm-list-description {
	margin: 5px 0 0 52px;

	color: var(--font-color-dark, #444444);

	font-size: 14px;
	line-height: 1.45;
}


/* =========================
   "IMMER ERFORDERLICH"
   ========================= */

html body :is(#klaro, .klaro) .cookie-modal .cm-list-label .required {
	font-size: 11px;
	font-weight: 400;
}


/* =========================
   TOGGLE
   ========================= */

html body :is(#klaro, .klaro) .cookie-modal
.cm-list-label
.cm-list-switch
.slider {
	background: #b8b8b8;
}


html body :is(#klaro, .klaro) .cookie-modal
.cm-list-input:checked
+ .cm-list-label
.cm-list-switch
.slider {
	background:
		var(
			--logo-color-1,
			#009f95
		);
}


html body :is(#klaro, .klaro) .cookie-modal
.cm-list-label
.cm-list-switch
.slider::before {
	background: #ffffff;

	box-shadow:
		0 1px 4px
		rgba(0, 0, 0, 0.24);
}


/* =========================
   DIENSTE
   ========================= */

html body :is(#klaro, .klaro) .cookie-modal .cm-services {
	margin: 4px 0 0;
	padding: 0;

	color:
		var(
			--logo-color-1,
			#009f95
		);

	font-size: 13px;

	list-style: none;
}


html body :is(#klaro, .klaro) .cookie-modal .cm-service {
	margin: 12px 0 0;
	padding: 0;

	list-style: none;
}


/* =========================
   FOOTER
   ========================= */

html body :is(#klaro, .klaro) .cookie-modal .cm-footer {
	padding: 14px 22px 16px;

	border-top:
		1px solid
		rgba(0, 0, 0, 0.12);

	background: #ffffff;
}


/* =========================
   BUTTON-GRUPPE
   ========================= */

html body :is(#klaro, .klaro) .cookie-modal .cm-footer-buttons {
	display: flex;

	align-items: center;
	justify-content: flex-end;

	flex-wrap: wrap;

	gap: 8px;

	margin: 0;
	padding: 0;
}


/* =========================
   BUTTONS
   ========================= */

html body :is(#klaro, .klaro) .cookie-modal .cm-btn {
	width: auto;
	min-height: 38px;

	margin: 0;

	padding: 8px 14px;

	border: 0;
	border-radius: 6px;

	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;

	cursor: pointer;

	transition:
		transform var(--transition-time, 0.2s),
		box-shadow var(--transition-time, 0.2s),
		opacity var(--transition-time, 0.2s);
}


/* Ablehnen */

html body :is(#klaro, .klaro) .cookie-modal .cm-btn.cm-btn-decline {
	background: #777777;
	color: #ffffff;
}


/* Ausgewählte akzeptieren */

html body :is(#klaro, .klaro) .cookie-modal .cm-btn.cm-btn-success-var {
	background:
		var(
			--logo-color-1-dark,
			#006b67
		);

	color:
		var(
			--font-color-light,
			#ffffff
		);
}


/* Alle akzeptieren */

html body :is(#klaro, .klaro) .cookie-modal .cm-btn.cm-btn-success {
	background:
		var(
			--logo-color-1,
			#009f95
		);

	color:
		var(
			--font-color-light,
			#ffffff
		);
}


html body :is(#klaro, .klaro) .cookie-modal .cm-btn:hover,
html body :is(#klaro, .klaro) .cookie-modal .cm-btn:focus-visible {
	transform: translateY(-1px);

	box-shadow:
		0 5px 14px
		rgba(0, 0, 0, 0.18);

	opacity: 0.92;
}


/* =========================
   KLARO-HINWEIS
   ========================= */

html body :is(#klaro, .klaro) .cookie-modal .cm-powered-by {
	margin-top: 12px;

	color: #777777;

	font-size: 11px;

	opacity: 0.8;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 700px) {

	html body :is(#klaro, .klaro) .cookie-modal .cm-modal {
		width: calc(100% - 20px);

		max-height:
			calc(100vh - 20px);
	}


	html body :is(#klaro, .klaro) .cookie-modal .cm-header {
		padding: 16px;
	}


	html body :is(#klaro, .klaro) .cookie-modal .cm-header h1,
	html body :is(#klaro, .klaro) .cookie-modal .cm-header .title {
		font-size: 22px;
	}


	html body :is(#klaro, .klaro) .cookie-modal .cm-purpose {
		padding: 14px 16px;
	}


	html body :is(#klaro, .klaro) .cookie-modal .cm-footer {
		padding: 14px 16px;
	}


	html body :is(#klaro, .klaro) .cookie-modal .cm-footer-buttons {
		flex-direction: column;

		align-items: stretch;

		gap: 6px;
	}


	html body :is(#klaro, .klaro) .cookie-modal .cm-btn {
		width: 100%;
	}

}