/**
 * Individuelles Erscheinungsbild für Klaro auf rent-a-partment.com.
 * Grundfarben aus der Website: Aktionsorange #eb6c03, Blau #0a65bc, Text #222.
 *
 * Klaro nutzt die light-Variablen für Text und die dark-Variablen für Flächen.
 * Beides ist hier auf ein helles Erscheinungsbild gedreht.
 */

.klaro {
	--font-family: inherit;
	--font-size: 15px;
	--border-radius: 6px;

	--green1: #eb6c03;
	--green2: #cf5f02;
	--green3: #b45201;

	--blue1: #0a65bc;
	--blue2: #095aa8;
	--blue3: #084f93;

	--red1: #ffffff;
	--red2: #f2f4f6;
	--red3: #e6e9ed;

	--dark1: #ffffff;
	--dark2: #f7f8f9;
	--dark3: #eef0f2;

	--light1: #222222;
	--light2: #4a4f55;
	--light3: #6b7178;

	--white1: #ffffff;
	--white2: #f7f8f9;
	--white3: #eef0f2;

	--button-text-color: #ffffff;
	--title-font-size: 19px;
}

/* Banner */
.klaro .cookie-notice:not(.cookie-modal-notice) {
	background: #ffffff;
	color: #222222;
	border-top: 3px solid #eb6c03;
	box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.16);
	border-radius: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: none;
	padding: 18px 20px;
}

.klaro .cookie-notice .cn-body {
	margin: 0 auto;
	max-width: 1180px;
	padding: 0;
}

.klaro .cookie-notice .cn-body p,
.klaro .cookie-notice .cn-body p span,
.klaro .cookie-notice .cn-body p strong {
	color: #222222 !important;
	font-size: 15px;
	line-height: 1.55;
}

/* Schaltflächen */
.klaro .cm-btn {
	border-radius: 4px !important;
	font-weight: 600;
	font-size: 15px;
	padding: 10px 18px !important;
	border: 1px solid transparent !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept-all {
	background: #eb6c03 !important;
	color: #ffffff !important;
}

.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-accept-all:hover {
	background: #cf5f02 !important;
}

/*
 * Ablehnen ist genauso gefüllt und genauso groß wie Zustimmen, nur in einer
 * anderen Farbe. Ein reiner Umriss-Button wäre optisch nachrangig und damit
 * angreifbar.
 */
.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cn-decline,
.klaro .cm-btn.cm-btn-decline {
	background: #0a65bc !important;
	color: #ffffff !important;
	border: 1px solid #0a65bc !important;
}

.klaro .cm-btn.cm-btn-danger:hover,
.klaro .cm-btn.cn-decline:hover,
.klaro .cm-btn.cm-btn-decline:hover {
	background: #095aa8 !important;
	color: #ffffff !important;
}

.klaro .cm-link.cn-learn-more,
.klaro .cm-btn.cm-btn-info {
	color: #0a65bc !important;
	background: transparent !important;
	text-decoration: underline;
}

.klaro .cm-btn:focus-visible,
.klaro a:focus-visible,
.inv-klaro-fab:focus-visible {
	outline: 2px solid #0a65bc;
	outline-offset: 2px;
}

/* Dialog */
.klaro .cookie-modal .cm-modal.cm-klaro {
	background: #ffffff;
	color: #222222;
	border-radius: 8px;
}

.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-modal .cm-modal .cm-header p,
.klaro .cookie-modal .cm-modal .cm-body,
.klaro .cookie-modal .cm-modal .cm-list-title,
.klaro .cookie-modal .cm-modal span,
.klaro .cookie-modal .cm-modal p {
	color: #222222;
}

.klaro .cookie-modal .cm-modal .cm-list-description,
.klaro .cookie-modal .cm-modal .cm-purpose p {
	color: #4a4f55;
}

.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-footer {
	border-color: #e2e5e9;
}

.klaro .cookie-modal a,
.klaro .cookie-notice a {
	color: #0a65bc;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
	background-color: #eb6c03;
}

.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider {
	background-color: #9aa3ab;
}

.klaro .cm-powered-by {
	display: none;
}

/* Dauerhafter Zugang zum Widerruf */
.inv-klaro-fab {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 999;
	background: #ffffff;
	color: #0a65bc;
	border: 1px solid #cfd6dd;
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	line-height: 1.2;
	font-weight: 600;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	opacity: 0.85;
}

.inv-klaro-fab:hover {
	opacity: 1;
	background: #0a65bc;
	color: #ffffff;
	border-color: #0a65bc;
}

.inv-klaro-link {
	cursor: pointer;
}

@media (max-width: 640px) {
	.klaro .cookie-notice:not(.cookie-modal-notice) {
		padding: 16px;
	}

	.klaro .cookie-notice .cn-body .cn-ok .cm-btn {
		flex: 1 1 100%;
		text-align: center;
	}

	.inv-klaro-fab {
		font-size: 12px;
		padding: 6px 12px;
	}
}