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


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

#klaro .cookie-modal,
.klaro .cookie-modal {
	z-index: 2147483000 !important;
}

#klaro .cookie-modal .cm-modal,
.klaro .cookie-modal .cm-modal {
	z-index: 2147483001 !important;
}


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

.klaro .cookie-modal {
	background: rgba(0, 0, 0, 0.48) !important;
}


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

.klaro .cookie-modal .cm-modal {
	width: calc(100% - 32px) !important;
	max-width: 640px !important;
	max-height: calc(100vh - 32px) !important;

	margin: 0 auto !important;

	border-radius: 12px !important;

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

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

	overflow: auto !important;
}


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

.klaro .cookie-modal ul,
.klaro .cookie-modal ol,
.klaro .cookie-modal li {
	margin-left: 0 !important;
	padding-left: 0 !important;

	list-style: none !important;
}

.klaro .cookie-modal li::marker {
	content: "" !important;
}

.klaro .cookie-modal li::before,
.klaro .cookie-modal li::after {
	content: none !important;
	display: none !important;
}


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

.klaro .cookie-modal .cm-header {
	padding: 20px 22px 16px !important;

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


.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header .title {
	margin: 0 0 12px !important;

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

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


.klaro .cookie-modal .cm-header p {
	margin: 0 0 8px !important;

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

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


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

.klaro .cookie-modal a {
	color: var(--logo-color-1, #009f95) !important;

	font-size: inherit !important;

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


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


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

.klaro .cookie-modal .cm-body {
	padding: 0 !important;

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


.klaro .cookie-modal .cm-purposes {
	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;
}


.klaro .cookie-modal .cm-purpose {
	margin: 0 !important;

	padding: 16px 22px !important;

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

	list-style: none !important;
}


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

.klaro .cookie-modal .cm-list-label {
	position: relative !important;

	display: block !important;

	min-height: 32px !important;

	margin: 0 !important;

	padding:
		2px
		0
		0
		52px !important;

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


.klaro .cookie-modal .cm-list-switch {
	position: absolute !important;

	top: 0 !important;
	left: 0 !important;

	margin: 0 !important;
}


.klaro .cookie-modal .cm-list-title {
	display: block !important;

	margin: 0 !important;
	padding: 0 !important;

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

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


.klaro .cookie-modal .cm-list-description {
	margin: 5px 0 0 52px !important;

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

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


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

.klaro .cookie-modal .cm-list-label .required {
	font-size: 11px !important;
	font-weight: 400 !important;
}


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

.klaro .cookie-modal
.cm-list-label
.cm-list-switch
.slider {
	background: #b8b8b8 !important;
}


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


.klaro .cookie-modal
.cm-list-label
.cm-list-switch
.slider::before {
	background: #ffffff !important;

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


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

.klaro .cookie-modal .cm-services {
	margin: 4px 0 0 !important;
	padding: 0 !important;

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

	font-size: 13px !important;

	list-style: none !important;
}


.klaro .cookie-modal .cm-service {
	margin: 12px 0 0 !important;
	padding: 0 !important;

	list-style: none !important;
}


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

.klaro .cookie-modal .cm-footer {
	padding: 14px 22px 16px !important;

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

	background: #ffffff !important;
}


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

.klaro .cookie-modal .cm-footer-buttons {
	display: flex !important;

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

	flex-wrap: wrap !important;

	gap: 8px !important;

	margin: 0 !important;
	padding: 0 !important;
}


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

.klaro .cookie-modal .cm-btn {
	width: auto !important;
	min-height: 38px !important;

	margin: 0 !important;

	padding: 8px 14px !important;

	border: 0 !important;
	border-radius: 6px !important;

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

	cursor: pointer;

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


/* Ablehnen */

.klaro .cookie-modal .cm-btn.cm-btn-decline {
	background: #777777 !important;
	color: #ffffff !important;
}


/* Ausgewählte akzeptieren */

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

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


/* Alle akzeptieren */

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

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


.klaro .cookie-modal .cm-btn:hover,
.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
   ========================= */

.klaro .cookie-modal .cm-powered-by {
	margin-top: 12px !important;

	color: #777777 !important;

	font-size: 11px !important;

	opacity: 0.8;
}


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

@media (max-width: 700px) {

	.klaro .cookie-modal .cm-modal {
		width: calc(100% - 20px) !important;

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


	.klaro .cookie-modal .cm-header {
		padding: 16px !important;
	}


	.klaro .cookie-modal .cm-header h1,
	.klaro .cookie-modal .cm-header .title {
		font-size: 22px !important;
	}


	.klaro .cookie-modal .cm-purpose {
		padding: 14px 16px !important;
	}


	.klaro .cookie-modal .cm-footer {
		padding: 14px 16px !important;
	}


	.klaro .cookie-modal .cm-footer-buttons {
		flex-direction: column !important;

		align-items: stretch !important;

		gap: 6px !important;
	}


	.klaro .cookie-modal .cm-btn {
		width: 100% !important;
	}

}