/**
 * Elucio Consent – Cookie-Banner im ELUCIO-Design.
 *
 * Nutzt die Theme-Variablen (main.css / fonts.css) mit Fallbacks:
 * --color-cream #FFFEF5, --color-dark #272727, --color-sand #DEC7AB,
 * --color-gold #785A1A, --font-body (Manrope), --font-display (Silk Serif).
 */

.elucio-consent {
	--ec-bg:      var(--color-cream, #FFFEF5);
	--ec-fg:      var(--color-dark, #272727);
	--ec-muted:   var(--color-gray, #676767);
	--ec-sand:    var(--color-sand, #DEC7AB);
	--ec-gold:    var(--color-gold, #785A1A);
	--ec-line:    rgba(103, 103, 103, 0.2);
	--ec-pad:     var(--container-pad, clamp(1.25rem, 5vw, 4rem));
	--ec-sans:    var(--font-body, 'Manrope', system-ui, -apple-system, sans-serif);
	--ec-display: var(--font-display, 'Silk Serif', Georgia, serif);
	--ec-serif:   var(--font-headline, 'Silk Serif Text', Georgia, serif);

	position:   fixed;
	right:      0;
	bottom:     0;
	left:       0;
	z-index:    9000; /* über Header (200), unter der Lade-Animation (9999) */
	max-height: min(85vh, 760px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--ec-bg);
	color:      var(--ec-fg);
	border-top: 1px solid var(--ec-sand);
	box-shadow: 0 -10px 40px rgba(39, 39, 39, 0.08);
	font-family: var(--ec-sans);
	font-size:  0.9375rem;
	line-height: 1.6;
	transform:  translateY(100%);
	opacity:    0;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
}

.elucio-consent.is-visible {
	transform: translateY(0);
	opacity:   1;
}

.elucio-consent[hidden],
.elucio-consent [hidden] {
	display: none !important;
}

.elucio-consent:focus {
	outline: none;
}

.elucio-consent *,
.elucio-consent *::before,
.elucio-consent *::after {
	box-sizing: border-box;
}

.elucio-consent__inner {
	max-width:     var(--section-max, 1440px);
	margin-inline: auto;
	padding:       28px var(--ec-pad) calc(28px + env(safe-area-inset-bottom, 0px));
}

/* --- Erste Ebene ---------------------------------------------------- */
.elucio-consent__view--main {
	display:               grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items:           center;
	gap:                   24px clamp(2rem, 4vw, 4rem);
}

.elucio-consent__topline {
	display:        flex;
	align-items:    center;
	gap:            16px;
	margin:         0 0 10px;
	font-family:    var(--ec-sans);
	font-size:      0.75rem;
	font-weight:    600;
	line-height:    1.3;
	letter-spacing: 0.143em;
	text-transform: uppercase;
	color:          var(--ec-gold);
}

.elucio-consent__topline-line {
	display:    block;
	flex:       0 0 60px;
	height:     1px;
	background: var(--ec-sand);
}

.elucio-consent__title {
	margin:      0 0 8px;
	font-family: var(--ec-display);
	font-size:   clamp(1.5rem, 1.2vw + 1rem, 2rem);
	font-weight: 400;
	line-height: 1.2;
	color:       var(--ec-fg);
}

.elucio-consent__title:focus {
	outline: none;
}

.elucio-consent__text {
	max-width: 780px;
	margin:    0;
	color:     var(--ec-fg);
}

.elucio-consent__links {
	display:   flex;
	flex-wrap: wrap;
	gap:       6px 24px;
	margin:    10px 0 0;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

.elucio-consent__links a,
.elucio-consent__dl a {
	color:                 var(--ec-fg);
	text-decoration:       underline;
	text-decoration-color: var(--ec-sand);
	text-underline-offset: 4px;
}

.elucio-consent__links a:hover,
.elucio-consent__dl a:hover {
	color: var(--ec-gold);
}

/* --- Buttons: „Nur notwendige“ und „Alle akzeptieren“ gleichwertig ---- */
.elucio-consent__actions {
	display:               grid;
	grid-template-columns: repeat(2, minmax(200px, 1fr));
	gap:                   12px;
	align-items:           center;
}

.elucio-consent__actions .elucio-consent__btn--link {
	grid-column: 1 / -1;
	justify-self: center;
}

.elucio-consent__btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-height:      50px;
	margin:          0;
	padding:         0 24px;
	border:          1px solid var(--ec-fg, #272727);
	border-radius:   0;
	background:      transparent;
	color:           var(--ec-fg, #272727);
	font-family:     var(--ec-sans, 'Manrope', sans-serif);
	font-size:       0.8125rem;
	font-weight:     500;
	line-height:     1.2;
	letter-spacing:  0.1em;
	text-align:      center;
	text-transform:  uppercase;
	text-decoration: none;
	cursor:          pointer;
	transition:      background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.elucio-consent__btn--primary {
	background: var(--ec-fg, #272727);
	color:      #FFFFFF;
}

.elucio-consent__btn--primary:hover {
	background:   #000000;
	border-color: #000000;
	color:        #FFFFFF;
}

.elucio-consent__btn--outline:hover {
	background: var(--ec-fg, #272727);
	color:      #FFFFFF;
}

.elucio-consent__btn--link {
	min-height:            44px;
	padding:               0 8px;
	border-color:          transparent;
	text-decoration:       underline;
	text-decoration-color: var(--ec-sand, #DEC7AB);
	text-underline-offset: 5px;
}

.elucio-consent__btn--link:hover {
	color: var(--ec-gold, #785A1A);
}

.elucio-consent__btn:focus-visible,
.elucio-consent__links a:focus-visible,
.elucio-consent__dl a:focus-visible,
.elucio-consent__service-summary:focus-visible,
.elucio-consent-placeholder__always:focus-visible,
.elucio-consent-placeholder a:focus-visible,
.elucio-consent-open:focus-visible {
	outline:        2px solid var(--ec-gold, #785A1A);
	outline-offset: 3px;
}

/* --- Einstellungsebene ---------------------------------------------- */
.elucio-consent.is-settings .elucio-consent__inner {
	max-width: 1040px;
}

.elucio-consent__settings-head {
	margin-bottom: 20px;
}

.elucio-consent__cats {
	margin:     0;
	padding:    0;
	list-style: none;
}

.elucio-consent__cat {
	padding:    22px 0;
	border-top: 1px solid var(--ec-line);
}

.elucio-consent__cat:last-child {
	border-bottom: 1px solid var(--ec-line);
}

.elucio-consent__cat-head {
	display:               grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap:                   4px 24px;
	align-items:           center;
}

/* Titel + Schalter in einer Zeile, Beschreibung über die volle Breite */
.elucio-consent__cat-text {
	display: contents;
}

.elucio-consent__cat-head > .elucio-consent__switch {
	grid-column: 2;
	grid-row:    1;
}

.elucio-consent__cat-desc {
	grid-column: 1 / -1;
	max-width:   780px;
}

.elucio-consent__cat-title {
	margin:      0 0 4px;
	font-family: var(--ec-serif);
	font-size:   1.25rem;
	font-weight: 400;
	line-height: 1.3;
}

.elucio-consent__cat-desc {
	margin:    0;
	font-size: 0.875rem;
	color:     var(--ec-muted);
}

.elucio-consent__services {
	margin:     14px 0 0;
	padding:    0;
	list-style: none;
}

.elucio-consent__service {
	display:               grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap:                   16px;
	align-items:           start;
	border-top:            1px solid var(--ec-line);
}

.elucio-consent__service .elucio-consent__switch {
	margin-top: 10px;
}

.elucio-consent__service-summary {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
	min-height:      44px;
	padding:         8px 0;
	font-size:       0.875rem;
	letter-spacing:  0.05em;
	list-style:      none;
	cursor:          pointer;
}

.elucio-consent__service-summary::-webkit-details-marker {
	display: none;
}

/* Plus/Minus wie FAQ */
.elucio-consent__service-icon {
	position: relative;
	flex:     0 0 16px;
	height:   16px;
}

.elucio-consent__service-icon::before,
.elucio-consent__service-icon::after {
	content:    '';
	position:   absolute;
	top:        50%;
	left:       0;
	width:      16px;
	height:     1px;
	background: var(--ec-fg);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.elucio-consent__service-icon::after {
	transform: rotate(90deg);
}

.elucio-consent__service-details[open] .elucio-consent__service-icon::after {
	transform: rotate(90deg) scaleX(0);
	opacity:   0;
}

.elucio-consent__dl {
	display:               grid;
	grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
	gap:                   6px 20px;
	margin:                0 0 16px;
	font-size:             0.8125rem;
	line-height:           1.55;
}

.elucio-consent__dl dt {
	font-weight:    600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size:      0.6875rem;
	padding-top:    2px;
	color:          var(--ec-muted);
}

.elucio-consent__dl dd {
	margin: 0;
}

.elucio-consent__cookies {
	margin:     0;
	padding:    0;
	list-style: none;
}

.elucio-consent__cookies li + li {
	margin-top: 4px;
}

.elucio-consent__cookies code {
	margin-right: 8px;
	font-size:    0.75rem;
	background:   rgba(222, 199, 171, 0.25);
	padding:      1px 5px;
}

.elucio-consent__actions--settings {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top:            24px;
}

/* --- Schalter -------------------------------------------------------- */
.elucio-consent__switch {
	position:    relative;
	display:     inline-flex;
	align-items: center;
	gap:         10px;
	cursor:      pointer;
}

.elucio-consent__switch input {
	position: absolute;
	top:      0;
	left:     0;
	width:    44px;
	height:   24px;
	margin:   0;
	opacity:  0;
	cursor:   pointer;
	z-index:  1;
}

.elucio-consent__switch-track {
	position:      relative;
	display:       block;
	flex:          0 0 44px;
	width:         44px;
	height:        24px;
	border:        1px solid var(--ec-fg);
	border-radius: 12px;
	background:    transparent;
	transition:    background-color 0.2s ease;
}

.elucio-consent__switch-track::after {
	content:       '';
	position:      absolute;
	top:           3px;
	left:          3px;
	width:         16px;
	height:        16px;
	border-radius: 50%;
	background:    var(--ec-fg);
	transition:    transform 0.2s ease, background-color 0.2s ease;
}

.elucio-consent__switch input:checked + .elucio-consent__switch-track {
	background: var(--ec-fg);
}

.elucio-consent__switch input:checked + .elucio-consent__switch-track::after {
	background: #FFFFFF;
	transform:  translateX(20px);
}

.elucio-consent__switch input:indeterminate + .elucio-consent__switch-track::after {
	transform: translateX(10px);
}

.elucio-consent__switch input:focus-visible + .elucio-consent__switch-track {
	outline:        2px solid var(--ec-gold);
	outline-offset: 3px;
}

.elucio-consent__switch.is-locked {
	cursor: default;
}

.elucio-consent__switch input:disabled {
	cursor: default;
}

.elucio-consent__switch input:disabled + .elucio-consent__switch-track {
	opacity: 0.45;
}

.elucio-consent__switch-label {
	order:          -1;
	font-size:      0.6875rem;
	font-weight:    600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--ec-gold);
	white-space:    nowrap;
}

.elucio-consent__switch--small .elucio-consent__switch-track {
	transform:        scale(0.85);
	transform-origin: right center;
}

.elucio-consent .screen-reader-text {
	position:    absolute !important;
	width:       1px;
	height:      1px;
	padding:     0;
	margin:      -1px;
	overflow:    hidden;
	clip:        rect(0, 0, 0, 0);
	white-space: nowrap;
	border:      0;
}

/* --- Variante „Box“ (Desktop) ----------------------------------------- */
@media (min-width: 768px) {
	.elucio-consent--box {
		right:      24px;
		bottom:     24px;
		left:       auto;
		width:      min(480px, calc(100vw - 48px));
		border:     1px solid var(--ec-sand);
	}

	.elucio-consent--box.is-settings {
		width: min(720px, calc(100vw - 48px));
	}

	.elucio-consent--box .elucio-consent__inner {
		padding: 28px 32px;
	}

	.elucio-consent--box .elucio-consent__view--main {
		grid-template-columns: minmax(0, 1fr);
	}

	.elucio-consent--box .elucio-consent__actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elucio-consent--box .elucio-consent__actions--settings {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elucio-consent--box .elucio-consent__actions--settings [data-elucio-consent-action="save"] {
		grid-column: 1 / -1;
	}
}

/* --- Tablet ---------------------------------------------------------- */
@media (max-width: 1100px) {
	.elucio-consent--bar .elucio-consent__view--main {
		grid-template-columns: minmax(0, 1fr);
	}

	.elucio-consent--bar .elucio-consent__actions {
		max-width: 640px;
	}
}

/* --- Mobil: Bottom-Sheet --------------------------------------------- */
@media (max-width: 767px) {
	.elucio-consent {
		max-height: 88vh;
		border-top: 1px solid var(--ec-sand);
	}

	.elucio-consent::before {
		content:       '';
		display:       block;
		width:         40px;
		height:        3px;
		margin:        10px auto 0;
		border-radius: 2px;
		background:    var(--ec-sand);
	}

	.elucio-consent__inner {
		padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
	}

	.elucio-consent__title {
		font-size: 1.5rem;
	}

	.elucio-consent__text {
		font-size: 0.875rem;
	}

	.elucio-consent__actions,
	.elucio-consent__actions--settings,
	.elucio-consent--box .elucio-consent__actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap:                   10px;
	}

	.elucio-consent__actions--settings [data-elucio-consent-action="save"] {
		grid-column: 1 / -1;
	}

	.elucio-consent__btn {
		padding:        0 12px;
		font-size:      0.75rem;
		letter-spacing: 0.08em;
	}

	.elucio-consent__dl {
		grid-template-columns: minmax(0, 1fr);
		gap:                   2px;
	}

	.elucio-consent__dl dd {
		margin-bottom: 8px;
	}
}

@media (max-width: 359px) {
	.elucio-consent__actions,
	.elucio-consent__actions--settings {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Seite bleibt bis zum Ende scrollbar (Footer-Links erreichbar). */
body.elucio-consent-visible {
	padding-bottom: var(--elucio-consent-height, 0px);
}

/* --- Footer-Link „Cookie-Einstellungen“ ------------------------------ */
.elucio-consent-open {
	cursor: pointer;
}

/* --- 2-Klick-Platzhalter (Karten, iFrames) --------------------------- */
.elucio-consent-embed {
	position: relative;
}

.elucio-consent-placeholder {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             18px;
	width:           100%;
	height:          100%;
	min-height:      240px;
	padding:         32px 24px;
	background:      #F8F7F0;
	color:           var(--color-dark, #272727);
	font-family:     var(--font-body, 'Manrope', sans-serif);
	text-align:      center;
}

.elucio-consent-placeholder__text {
	max-width: 520px;
	margin:    0;
	font-size: 0.875rem;
	line-height: 1.6;
}

.elucio-consent-placeholder__links {
	display:   flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:       8px 20px;
	margin:    0;
	font-size: 0.8125rem;
}

.elucio-consent-placeholder__always,
.elucio-consent-placeholder__links a {
	padding:               0;
	border:                0;
	background:            none;
	color:                 inherit;
	font:                  inherit;
	text-decoration:       underline;
	text-decoration-color: var(--color-sand, #DEC7AB);
	text-underline-offset: 4px;
	cursor:                pointer;
}

/* --- Cookie-Liste [elucio_cookie_list] ------------------------------- */
.elucio-cookie-list__cat + .elucio-cookie-list__cat {
	margin-top: 2.5rem;
}

.elucio-cookie-list__title {
	margin-bottom: 0.5rem;
}

.elucio-cookie-list__scroll {
	overflow-x: auto;
}

.elucio-cookie-list__table {
	width:           100%;
	min-width:       640px;
	margin-top:      1rem;
	border-collapse: collapse;
	font-size:       0.875rem;
	line-height:     1.55;
}

.elucio-cookie-list__table th,
.elucio-cookie-list__table td {
	padding:        12px 16px 12px 0;
	border-bottom:  1px solid rgba(103, 103, 103, 0.2);
	text-align:     left;
	vertical-align: top;
}

.elucio-cookie-list__table th {
	font-size:      0.6875rem;
	font-weight:    600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--color-gold, #785A1A);
}

.elucio-cookie-list__table code {
	font-size: 0.8125rem;
}

.elucio-cookie-list__settings {
	margin-top: 1.5rem;
}

.elucio-cookie-list__settings a {
	text-decoration:       underline;
	text-underline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.elucio-consent,
	.elucio-consent__btn,
	.elucio-consent__switch-track,
	.elucio-consent__switch-track::after,
	.elucio-consent__service-icon::before,
	.elucio-consent__service-icon::after {
		transition: none;
	}
}