/* ============================================================
 *  UmzugPro Cookie-Banner  —  V6 Design
 * ============================================================
 *
 *  Nutzt CSS-Custom-Properties aus dem globalen UmzugPro V6
 *  Designsystem (--c-brand-green, --c-text, --c-border etc.).
 *  Falls Tokens nicht vorhanden, greifen die Fallbacks weiter
 *  unten in `:where(.upm-cookie-banner)`.
 *
 *  Komponenten:
 *    .upm-cookie-banner       — Bottom-Banner (Erstbesuch)
 *    .upm-cookie-modal        — Settings-Modal (Toggles)
 *    .upm-cookie-btn          — Buttons (primary/outline/link)
 *    .upm-cookie-toggle       — Switch (checkbox-styled)
 *
 *  Animationen: 0.25s ease. Respektiert prefers-reduced-motion.
 * ============================================================ */

/* === Fallback-Tokens falls V6 Custom CSS nicht geladen ist === */
:where(.upm-cookie-banner, .upm-cookie-modal, .upm-cookie-modal-backdrop) {
	--upm-cb-brand: var(--up-gruen, #458243);
	--upm-cb-brand-dark: var(--up-gruen-dunkel, #3a6f39);
	--upm-cb-brand-hover: var(--up-gruen-dunkel, #3a6f39);
	--upm-cb-text: var(--up-ink, #141414);
	--upm-cb-text-muted: var(--up-text, #5b6475);
	--upm-cb-bg: var(--c-bg, #ffffff);
	--upm-cb-bg-alt: var(--c-bg-alt, #f6f7fa);
	--upm-cb-border: var(--up-linie-stark, #d0d5dd);
	--upm-cb-radius: var(--r-lg, 20px);
	--upm-cb-radius-md: var(--r-md, 12px);
	--upm-cb-radius-pill: var(--r-pill, 999px);
	--upm-cb-ease: cubic-bezier(0.4, 0, 0.2, 1);
	font-family: var(--up-font, 'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
}

/* ============================================================
   BANNER (unten, gestapelt – Grösse wie 1.1.0/1.2.1; 1.3.1 Aris 29.10.2026: «wieder grösser»)
   Reihenfolge: Titel (eine Zeile) · grosses Cookie-Symbol · Text · Knöpfe.
   Selektoren mit #upm-cookie-banner, damit Seiten-Stile (h2 der neuen Seiten) nicht durchschlagen.
   ============================================================ */
.upm-cookie-banner {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	max-width: 440px;
	margin: 0 auto;
	background: var(--upm-cb-bg);
	border: 1px solid var(--up-linie, #e7e9ee);
	border-radius: var(--up-r-panel, 20px);
	box-shadow: 0 18px 50px -12px rgba(17,17,17,0.22), 0 4px 12px -4px rgba(17,17,17,0.08);
	padding: 24px;
	z-index: 9990;
	color: var(--upm-cb-text);
	transition: opacity 0.32s var(--upm-cb-ease), transform 0.32s var(--upm-cb-ease);
}
/* 1.3.1: sofort sichtbar ohne JS-Wartezeit (aus 1.3.0) – Besucher mit gespeicherter Wahl: html.upm-cc-ok (Kopf-Skript
   upm-cookie-vorab) blendet aus; banner.js schliesst mit is-weg → hidden, der Fuss-Link öffnet mit is-visible wieder. */
.upm-cookie-banner.is-weg {
	opacity: 0;
	transform: translateY(20px);
}
.upm-cookie-banner[hidden],
html.upm-cc-ok .upm-cookie-banner:not(.is-visible) {
	display: none;
}
#upm-cookie-banner .upm-cookie-banner__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}
#upm-cookie-banner .upm-cookie-banner__title {
	margin: 0;
	font: 700 21px/1.25 var(--up-font, 'Outfit', system-ui, sans-serif);
	letter-spacing: -0.01em;
	color: var(--upm-cb-text);
	white-space: nowrap;
}
#upm-cookie-banner .upm-cookie-banner__icon {
	display: block;
	width: 72px;
	height: 72px;
	color: var(--upm-cb-brand);
}
#upm-cookie-banner .upm-cookie-banner__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--upm-cb-text-muted);
}
#upm-cookie-banner .upm-cookie-banner__text a {
	color: var(--upm-cb-brand-dark);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
#upm-cookie-banner .upm-cookie-banner__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	width: 100%;
	margin-top: 4px;
}
#upm-cookie-banner .upm-cookie-btn {
	width: 100%;
	justify-content: center;
}
#upm-cookie-banner a.upm-cookie-btn {
	text-decoration: none;
	color: var(--upm-cb-text);
}
#upm-cookie-banner a.upm-cookie-btn:hover {
	color: var(--upm-cb-brand-dark);
}
@media (max-width: 400px) {
	.upm-cookie-banner {
		left: 10px;
		right: 10px;
		bottom: 10px;
		padding: 20px 18px;
	}
	#upm-cookie-banner .upm-cookie-banner__actions {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.upm-cookie-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 20px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	border: 1.5px solid transparent;
	border-radius: var(--up-r-knopf, 8px); /* wie .up-knopf (Design-System) */
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
	min-height: 48px;
	white-space: nowrap;
	text-decoration: none;
}

.upm-cookie-btn--primary {
	background: var(--upm-cb-brand);
	color: #fff;
}
.upm-cookie-btn--primary:hover {
	background: var(--upm-cb-brand-hover);
}
.upm-cookie-btn--primary:active {
	transform: translateY(0);
}

.upm-cookie-btn--outline {
	background: #fff;
	color: var(--upm-cb-text);
	border-color: var(--up-rand-feld, #8a94a6);
}
.upm-cookie-btn--outline:hover {
	border-color: var(--upm-cb-brand);
	color: var(--upm-cb-brand-dark);
}

.upm-cookie-btn--link {
	background: transparent;
	color: var(--upm-cb-text-muted);
	border-color: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 11px 12px;
	min-height: auto;
}
.upm-cookie-btn--link:hover {
	color: var(--upm-cb-text);
}

.upm-cookie-btn:focus-visible {
	outline: 3px solid var(--upm-cb-brand);
	outline-offset: 3px;
}

/* ============================================================
   MODAL (Cookie-Einstellungen)
   ============================================================ */
.upm-cookie-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(10,10,10,0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 9991;
	opacity: 0;
	transition: opacity 0.3s var(--upm-cb-ease);
}
.upm-cookie-modal-backdrop.is-visible {
	opacity: 1;
}
.upm-cookie-modal-backdrop[hidden] {
	display: none;
}

.upm-cookie-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -48%);
	width: min(560px, calc(100% - 32px));
	max-height: calc(100vh - 48px);
	background: var(--upm-cb-bg);
	border-radius: var(--upm-cb-radius);
	box-shadow: 0 30px 80px -20px rgba(17,17,17,0.4);
	z-index: 9992;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transition: opacity 0.3s var(--upm-cb-ease), transform 0.3s var(--upm-cb-ease);
}
.upm-cookie-modal.is-visible {
	opacity: 1;
	transform: translate(-50%, -50%);
}
.upm-cookie-modal[hidden] {
	display: none;
}

.upm-cookie-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px 14px;
	border-bottom: 1px solid var(--upm-cb-border);
}
.upm-cookie-modal__title {
	font-size: 19px;
	font-weight: 800;
	margin: 0;
	color: var(--upm-cb-text);
	letter-spacing: -0.01em;
}
.upm-cookie-modal__close {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--upm-cb-bg-alt);
	border: 1px solid var(--upm-cb-border);
	color: var(--upm-cb-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.upm-cookie-modal__close:hover {
	background: var(--upm-cb-text);
	color: #fff;
	border-color: var(--upm-cb-text);
}

.upm-cookie-modal__body {
	padding: 18px 24px 8px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.upm-cookie-modal__intro {
	font-size: 14.5px;
	color: var(--upm-cb-text-muted);
	line-height: 1.6;
	margin: 0 0 18px;
}

/* === Category-Item === */
.upm-cookie-cat {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--upm-cb-border);
	border-radius: var(--upm-cb-radius-md);
	margin-bottom: 10px;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}
.upm-cookie-cat:hover {
	border-color: var(--upm-cb-brand);
}
.upm-cookie-cat.is-locked {
	cursor: not-allowed;
	opacity: 0.85;
}

.upm-cookie-cat__main {
	flex: 1 1 auto;
	min-width: 0;
}
.upm-cookie-cat__label {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--upm-cb-text);
	margin-bottom: 4px;
}
.upm-cookie-cat__desc {
	display: block;
	font-size: 13.5px;
	color: var(--upm-cb-text-muted);
	line-height: 1.5;
}

/* === Toggle Switch === */
.upm-cookie-toggle {
	flex: 0 0 auto;
	position: relative;
	display: inline-block;
	width: 46px;
	height: 26px;
}
.upm-cookie-toggle__input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}
.upm-cookie-toggle__input:disabled {
	cursor: not-allowed;
}
.upm-cookie-toggle__slider {
	position: absolute;
	inset: 0;
	background: var(--upm-cb-border);
	border-radius: var(--upm-cb-radius-pill);
	transition: background 0.2s;
}
.upm-cookie-toggle__slider::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0,0,0,0.15);
	transition: transform 0.22s var(--upm-cb-ease);
}
.upm-cookie-toggle__input:checked + .upm-cookie-toggle__slider {
	background: var(--upm-cb-brand);
}
.upm-cookie-toggle__input:checked + .upm-cookie-toggle__slider::before {
	transform: translateX(20px);
}
.upm-cookie-toggle__input:focus-visible + .upm-cookie-toggle__slider {
	box-shadow: 0 0 0 3px rgba(90,188,122,0.35);
}

.upm-cookie-modal__legal {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	padding: 12px 0 4px;
	font-size: 13px;
	color: var(--upm-cb-text-muted);
}
.upm-cookie-modal__legal a {
	color: var(--upm-cb-brand-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.upm-cookie-modal__footer {
	padding: 16px 24px 22px;
	border-top: 1px solid var(--upm-cb-border);
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	background: var(--upm-cb-bg-alt);
	border-radius: 0 0 var(--upm-cb-radius) var(--upm-cb-radius);
}

@media (max-width: 540px) {
	.upm-cookie-modal__head { padding: 16px 18px 12px; }
	.upm-cookie-modal__body { padding: 14px 18px 4px; }
	.upm-cookie-modal__footer {
		padding: 14px 18px 18px;
		flex-direction: column-reverse;
	}
	.upm-cookie-modal__footer .upm-cookie-btn { width: 100%; }
	.upm-cookie-cat { padding: 14px; }
}

/* ============================================================
   Body-Scroll-Lock wenn Modal offen
   ============================================================ */
body.upm-cookie-modal-open {
	overflow: hidden;
}

/* ============================================================
   Accessibility — reduzierte Bewegung
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.upm-cookie-banner,
	.upm-cookie-modal,
	.upm-cookie-modal-backdrop,
	.upm-cookie-toggle__slider,
	.upm-cookie-toggle__slider::before,
	.upm-cookie-btn {
		transition-duration: 0.01ms !important;
	}
}

/* 1.0.2 (Schritt 72, Aris 29.09.2026): das offene Handy-Menü (z-index 1000, Hintergrund 999) liegt über dem Banner */
body.offcanvas-open .upm-cookie-banner { z-index: 990; }