/* Consent-Banner — Testkandidat (Admin-only). DoPchoice-CI: monochrom, HCond, radius 10px. */

#consent                { display: none; }
#consent.consent-show   { display: block; }
body.consent-open       { overflow: hidden; }

/* Footer-Link "Cookie settings": default versteckt, consent.js zeigt ihn fuer US (.is-visible).
   Als <button> im Footer-Menue -> wie die <a>-Menuepunkte stylen. */
.open-consent               { display: none; }
.open-consent.is-visible    { display: inline; }
#footerline li .open-consent {
	font: inherit;
	color: var(--color-grey-font) !important;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
#footerline li .open-consent:hover { text-decoration: underline; }

/* Fullscreen-Overlay + Backdrop (über allem, auch Lightswiper z-index 12000) */
.consent-wrap {
	position: fixed;
	inset: 0;
	z-index: 15000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background-color: rgba(0, 0, 0, .55);
}

/* Zentrierte Karte */
.consent-card {
	position: relative;
	width: 100%;
	max-width: 620px;
	max-height: 90dvh;
	overflow-y: auto;
	overflow-x: hidden;
	background: white;
	border-radius: 10px;
	box-shadow: var(--shadow);
	font-family: var(--font-cond);
	color: var(--color-black);
}

/* Zwei Panels in einer Karte: Banner-Ansicht (default) / Settings-Ansicht */
.consent-panel                                      { display: none; padding: 2.25rem 2.75rem; }
.consent-card .consent-panel-banner                 { display: block; }
.consent-card.show-settings .consent-panel-banner   { display: none; }
.consent-card.show-settings .consent-panel-settings { display: block; }

/* "Continue without accepting" / "Back" auf Höhe der Überschrift (spart vertikalen Platz) */
.consent-continue {
	position: absolute;
	top: 2.25rem;
	right: 2.75rem;
	font-family: var(--font-cond);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-grey-medium);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.consent-continue:hover { color: var(--color-black); }

/* Titel lässt rechts Platz für den Continue-Link */
.consent-title          { margin: 0 0 1.25rem; padding-right: 12rem; }

.consent-copy p {
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 1rem;
	color: var(--color-grey-dark);
}
.consent-copy strong    { color: var(--color-black); }

/* Tool-Liste (Settings-Panel) */
.consent-tools          { margin: 1.75rem 0 .75rem; border-top: 1px solid var(--color-grey); }

.consent-tool {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--color-grey);
	cursor: pointer;
}
.consent-tool.is-static      { cursor: default; }
.consent-tool.is-static .consent-switch { opacity: .4; }

/* Checkbox visuell verstecken, aber ohne Overflow zu erzeugen (verursachte sonst
   einen horizontalen Scrollbalken in der Karte). */
.consent-input          { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Monochromer Toggle-Switch: grau = aus, schwarz = an */
.consent-switch {
	flex: 0 0 auto;
	position: relative;
	width: 46px;
	height: 26px;
	margin-top: 1px;
	border-radius: 13px;
	background-color: var(--color-grey);
	transition: background-color .2s;
}
.consent-switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: white;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	transition: transform .2s;
}
.consent-input:checked + .consent-switch        { background-color: var(--color-black); }
.consent-input:checked + .consent-switch::after { transform: translateX(20px); }
.consent-tool:hover .consent-input:not(:disabled) + .consent-switch { background-color: var(--color-grey-font); }
.consent-tool:hover .consent-input:checked:not(:disabled) + .consent-switch { background-color: var(--color-grey-dark); }

.consent-tool-text      { display: flex; flex-direction: column; gap: .2rem; }
.consent-tool-title     { font-weight: 500; font-size: 17px; }
.consent-tool-descr     { font-size: 15px; color: var(--color-grey-medium); line-height: 1.5; }

/* Buttons — gleiche Höhe/Form, Hierarchie über gefüllt vs. outline */
.consent-actions          { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.75rem; }
.consent-actions .btn     { padding: .55rem 1.6rem; font-size: 17px; }

/* Legal-Link rechts auf Button-Höhe (spart vertikalen Platz) */
.consent-legal-link {
	margin-left: auto;
	font-size: 15px;
	color: var(--color-grey-medium);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.consent-legal-link:hover { color: var(--color-black); }

@media (max-width: 680px) {
	.consent-wrap  { padding: .75rem; align-items: flex-end; }
	/* Continue in eigener Zeile oben rechts, Titel darunter volle Breite (eine Zeile) */
	.consent-panel { padding: 1.25rem 1.5rem 1.5rem; }
	.consent-continue { position: static; display: block; margin: 0 0 .5rem auto; width: max-content; }
	.consent-title { padding-right: 0; }
	.consent-actions .btn { width: 100%; justify-content: center; }
	.consent-legal-link { margin: .25rem auto 0; }
}