/*
 * Cookie-Banner und Seite "Cookie-Einstellungen". Maße, Farben und Abstände sind am Original gemessen
 * (keramikdrehen.de bei Jimdo), das CSS ist selbst geschrieben.
 *
 * Aufbau (Klassenpräfix kd-consent):
 *   .kd-consent > __overlay + __card        Banner: abgedunkelter Hintergrund und Karte (fest am Fensterrand)
 *   .kd-consent-page                        dieselben Bausteine als Seiteninhalt (Template cookie-einstellungen)
 *   __view, __head, __scroll, __intro ...   Ansicht der Karte: Titel, scrollbarer Bereich, Buttons
 *   __expand (.is-collapsed)                gekürzter Text mit Verlauf und "Mehr anzeigen"
 *   __row, .kd-switch                       Zeile mit Schalter und Beschriftung
 *   __service                               Karte eines Eintrags (Name, Beschreibung, Links)
 * Das Banner liegt mit hidden im Dokument, scripts/consent-ui.js zeigt es.
 */

.kd-consent,
.kd-consent-page {
	--kc-text: #323335;
	--kc-link: #4e5056;
	--kc-link-hover: #4c73bb;
	--kc-soft: #f9f9f9;
	--kc-focus: #004ced;
}

/* ------------------------------------------------------------------ Banner: Hintergrund und Karte */
.kd-consent__overlay {
	position: fixed;
	inset: 0;
	z-index: 2199;
	background-color: #1c1c1c;
	opacity: 0.4;
}
.kd-consent__card {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2200;
	display: flex;
	box-sizing: border-box;
	width: 360px;
	height: 632px;
	overflow: hidden;
	border-top: 1px solid #e6e7f0;
	border-radius: 4px;
	background-color: var(--kd-white);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
	color: var(--kd-black);
	font-family: var(--kd-font-copy);
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
}
/* Handy und Tablet: Die Karte sitzt als Fläche über die ganze Breite am unteren Rand */
@media (max-width: 1023px) {
	.kd-consent__card {
		right: 0;
		bottom: 0;
		width: 100%;
		height: 560px;
	}
}

.kd-consent__close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 1;
	display: flex;
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kd-black);
	overflow: visible;
	cursor: pointer;
}
/* größere Trefferfläche, damit das kleine Kreuz auch mit dem Finger sicher zu treffen ist */
.kd-consent__close::before {
	content: "";
	position: absolute;
	inset: -12px;
}
.kd-consent__icon {
	display: block;
	flex: none;
}

/* ------------------------------------------------------------------ Ansichten */
.kd-consent__view,
.kd-consent-page {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: var(--kd-white);
	color: var(--kc-text);
	font-family: var(--kd-font-copy);
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
}
.kd-consent-page { height: auto; }

.kd-consent__head { margin: 20px; }
.kd-consent__title {
	font-family: var(--kd-font-head);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--kc-text);
}
.kd-consent__title:focus { outline: none; }
@media (max-width: 1280px) {
	.kd-consent__title { font-size: 18px; }
}

/* Übersicht: scrollbarer Bereich zwischen Titel und Buttons */
.kd-consent__scroll {
	flex-grow: 1;
	max-height: 420px;
	overflow-y: auto;
}
.kd-consent-page .kd-consent__scroll {
	max-height: none;
	overflow: visible;
}
.kd-consent__intro,
.kd-consent__rows { padding: 0 20px; }

/* Der Text beginnt 20 px über dem Bereich und wird dort abgeschnitten, Absatzabstand und Kürzung rechnen damit */
.kd-consent__textbox { margin-top: -20px; }
.kd-consent__text {
	padding: 20px 0;
	overflow-wrap: break-word;
	color: var(--kc-text);
}
.kd-consent__text p {
	font-size: 16px;
	line-height: 1.6;
}
.kd-consent__text a { text-decoration: underline; }
.kd-consent__text a:hover { text-decoration: none; }
.kd-consent__text ul,
.kd-consent__text ol { margin: 0 0 0 30px; }
.kd-consent__text strong { font-weight: 700; }
.kd-consent-page .kd-consent__text p { font-size: 18px; }
@media (max-width: 1280px) {
	.kd-consent-page .kd-consent__text p { font-size: 16px; }
}

/* Einklappbarer Bereich: gekürzt auf 144 px mit Verlauf, "Mehr anzeigen" darunter */
.kd-consent__clip { position: relative; }
.kd-consent__fade { display: none; }
.kd-consent__expand.is-collapsed .kd-consent__clip {
	max-height: 144px;
	overflow: hidden;
}
.kd-consent__expand.is-collapsed .kd-consent__fade {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	height: 32px;
	background-image: linear-gradient(180deg, hsla(0, 0%, 97.6%, 0), #f9f9f9);
	pointer-events: none;
}
.kd-consent__more-row { padding: 2px 0 3px; }
.kd-consent__expand.is-collapsed .kd-consent__more-row { padding-top: 22px; }
/* Der Knopf ist so hoch wie die Schrift (19 px) und sitzt wie ein Link mitten in der Zeile. Eine unsichtbare
   Fläche macht die Trefferfläche so hoch wie die ganze Zeile (24 px). */
.kd-consent__more {
	position: relative;
	display: block;
	height: 19px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kc-text);
	font: inherit;
	font-weight: 700;
	line-height: 19px;
	text-align: left;
	cursor: pointer;
}
.kd-consent__more::after {
	content: "";
	position: absolute;
	inset: -2px 0 -3px;
}

/* Links Impressum und Datenschutz */
.kd-consent__links { padding: 12px 0; }
.kd-consent__link {
	padding-right: 16px;
	color: var(--kc-link);
	font-size: 1rem;
	text-decoration: underline;
}
.kd-consent__link:hover { color: var(--kc-link-hover); }
.kd-consent__link--block {
	display: block;
}

/* ------------------------------------------------------------------ Zeilen mit Schalter */
.kd-consent__row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 8px;
	padding: 12px 0 12px 12px;
	border-radius: 2px;
	background-color: var(--kc-soft);
	color: var(--kd-black);
}
.kd-consent__label {
	display: block;
	width: 100%;
	margin: -20px auto -20px 12px;
	padding: 20px 0;
	color: var(--kc-text);
	cursor: pointer;
}
.kd-consent__label.is-locked { cursor: not-allowed; }

/* Schalter: Das Kontrollkästchen liegt unsichtbar über der Spur, der Zustand kommt aus :checked */
.kd-switch {
	position: relative;
	flex: none;
	width: 44px;
	height: 24px;
}
.kd-switch__input {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 44px;
	height: 24px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.kd-switch__track {
	position: relative;
	display: block;
	width: 44px;
	height: 24px;
	user-select: none;
}
.kd-switch__track::before,
.kd-switch__track::after {
	content: "";
	position: absolute;
	display: block;
}
.kd-switch__track::before {
	inset: 0;
	border-radius: 9999px;
	background-color: #e3e3e3;
	transition: background-color 0.25s ease;
}
.kd-switch__track::after {
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: var(--kd-white);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
	transition: left 0.25s ease;
}
.kd-switch__input:checked + .kd-switch__track::before { background-color: var(--kc-text); }
.kd-switch__input:checked + .kd-switch__track::after { left: 23px; }
.kd-switch__input:disabled { cursor: not-allowed; }
.kd-switch__input:disabled + .kd-switch__track::before { opacity: 0.5; }
.kd-switch__input:focus-visible + .kd-switch__track::before {
	outline: 2px solid var(--kc-focus);
	outline-offset: 2px;
}

/* Pfeil rechts in der Zeile: öffnet die Details der Kategorie */
.kd-consent__open {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kd-black);
	font: inherit;
	cursor: pointer;
}
.kd-consent__open::before {
	content: "";
	width: 2px;
	height: 32px;
	border-radius: 1px;
	background-color: #cacedb;
}
.kd-consent__open-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
}
.kd-consent__open:focus-visible,
.kd-consent__close:focus-visible,
.kd-consent__more:focus-visible,
.kd-consent__btn:focus-visible,
.kd-consent__link:focus-visible,
.kd-consent__text a:focus-visible {
	outline: 2px solid var(--kc-focus);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ Buttons */
.kd-consent__actions { padding: 20px; }
.kd-consent__actions .kd-consent__btn { margin-bottom: 12px; }
.kd-consent__actions .kd-consent__btn:last-child { margin-bottom: 0; }

.kd-consent__btn {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0;
	border: 0;
	border-radius: 25px;
	font: inherit;
	line-height: 1.5;
	cursor: pointer;
	user-select: none;
}
.kd-consent__btn > span {
	display: block;
	width: 100%;
	padding: 16px 30px;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: inherit;
	background-color: rgba(255, 255, 255, 0);
	line-height: 1;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: background-color 0.2s ease-in-out;
}
.kd-consent__btn--dark {
	background-color: var(--kd-black);
	color: var(--kd-white);
}
.kd-consent__btn--dark:hover > span { background-color: rgba(255, 255, 255, 0.1); }
.kd-consent__btn--outline {
	background-color: transparent;
	color: var(--kc-text);
}
.kd-consent__btn--outline > span {
	border-color: var(--kd-black);
	background-color: transparent;
}
.kd-consent__btn--outline:hover > span { background-color: rgba(0, 0, 0, 0.1); }

/* Seite: "Alle akzeptieren" und "Alle ablehnen" nebeneinander, auf dem Handy untereinander */
.kd-consent__button-row { display: flex; }
.kd-consent__button-cell {
	width: 100%;
	max-width: 100%;
	margin-bottom: 12px;
}
.kd-consent__button-cell + .kd-consent__button-cell .kd-consent__btn {
	width: calc(100% - 12px);
	margin-left: 12px;
}
@media (max-width: 800px) {
	.kd-consent__button-row { flex-direction: column; }
	.kd-consent__button-cell + .kd-consent__button-cell .kd-consent__btn {
		width: 100%;
		margin-left: 0;
	}
}

/* ------------------------------------------------------------------ Detailansicht einer Kategorie */
.kd-consent__detail-head {
	margin-bottom: 10px;
	padding: 20px 20px 0;
}
.kd-consent__detail-head .kd-consent__title { margin: 0; }
.kd-consent__detail-scroll {
	flex-grow: 1;
	max-height: 484px;
	padding: 0 20px;
	overflow-y: auto;
}
@media (max-width: 1023px) {
	.kd-consent__detail-scroll { max-height: 412px; }
}
.kd-consent__desc { margin-bottom: 20px; }
/* Leiste mit "Speichern und zurück" liegt über dem unteren Rand der Karte */
.kd-consent__bar {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background-color: var(--kd-white);
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
}

/* Karte eines Eintrags */
.kd-consent__service {
	display: flex;
	flex-direction: column;
	margin-bottom: 8px;
	padding: 12px;
	border-radius: 4px;
	background-color: var(--kc-soft);
}
.kd-consent__service-main {
	display: flex;
	justify-content: flex-start;
}
.kd-consent__service-switch {
	box-sizing: border-box;
	padding-right: 12px;
}
.kd-consent__service-body {
	min-width: 0;
	flex: 1 1 auto;
}
.kd-consent__service-name {
	display: block;
	color: var(--kc-text);
	cursor: pointer;
}
.kd-consent__service-name.is-locked { cursor: default; }
.kd-consent__service-text {
	padding: 4px 0;
	overflow-wrap: break-word;
	opacity: 0.7;
}

/* ------------------------------------------------------------------ Seite "Cookie-Einstellungen" */
.kd-consent__spacer { height: 40px; }
.kd-consent__category { display: flex; flex-direction: column; }
.kd-consent__category-body { padding: 0 20px; }

/* Wer Bewegung reduziert hat, bekommt Schalter und Buttons ohne Übergang */
@media (prefers-reduced-motion: reduce) {
	.kd-switch__track::before,
	.kd-switch__track::after,
	.kd-consent__btn > span { transition: none; }
}