/* VF-TEK Einwilligungsbanner - eigenes Styling, keine Fremdressourcen.
   Sitzt am unteren Seitenrand und legt sich NICHT ueber die Seite:
   Navigation, Impressum und Datenschutzerklaerung bleiben jederzeit nutzbar. */

#vftek-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	background: #fff;
	border-top: 4px solid #EF7202;
	box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	max-height: 85vh;
	overflow-y: auto;
	animation: vftek-consent-auf .25s ease-out;
}

@keyframes vftek-consent-auf {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	#vftek-consent { animation: none; }
}

.vftek-consent-banner {
	max-width: 1170px;
	margin: 0 auto;
	padding: 18px 20px 14px;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"text knoepfe"
		"details details"
		"fuss fuss";
	gap: 8px 26px;
	align-items: center;
}

.vftek-consent-text { grid-area: text; }

.vftek-consent-text b {
	display: block;
	font-size: 15px;
	color: #222;
	margin-bottom: 4px;
}

.vftek-consent-text p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: #333;
}

.vftek-consent-mehr {
	color: #EF7202;
	text-decoration: underline;
	white-space: nowrap;
	cursor: pointer;
}

.vftek-consent-knoepfe {
	grid-area: knoepfe;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.vftek-consent-details {
	grid-area: details;
	width: 100%;
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid #e7e7e7;
}

.vftek-consent-details .vftek-consent-knoepfe {
	justify-content: flex-end;
	margin-top: 12px;
}

.vftek-consent-liste { border-top: 1px solid #e7e7e7; }

.vftek-consent-zweck {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 2px;
	border-bottom: 1px solid #e7e7e7;
	font-size: 13px;
	line-height: 1.5;
	color: #333;
	cursor: pointer;
}

.vftek-consent-zweck b { color: #222; }

.vftek-consent-zweck input {
	width: 19px;
	height: 19px;
	margin: 1px 0 0;
	flex: 0 0 auto;
	accent-color: #EF7202;
	cursor: pointer;
}

.vftek-consent-fest { cursor: default; opacity: .78; }
.vftek-consent-fest input { cursor: not-allowed; }

/* Ablehnen und Akzeptieren sind bewusst gleich gross, gleich gefaerbt und
   gleich gut erreichbar - keine Seite wird gestalterisch bevorzugt. */
.vftek-consent-btn {
	min-width: 160px;
	padding: 11px 20px;
	font-size: 13.5px;
	font-family: inherit;
	font-weight: 600;
	border-radius: 3px;
	cursor: pointer;
	transition: background .15s, color .15s;
	white-space: nowrap;
}

.vftek-consent-btn-neutral {
	background: #fff;
	color: #222;
	border: 2px solid #222;
}

.vftek-consent-btn-neutral:hover { background: #222; color: #fff; }

.vftek-consent-btn-haupt {
	background: #EF7202;
	color: #fff;
	border: 2px solid #EF7202;
}

.vftek-consent-btn-haupt:hover { background: #d46502; border-color: #d46502; }

.vftek-consent-btn:focus-visible,
.vftek-consent-mehr:focus-visible {
	outline: 3px solid #222;
	outline-offset: 2px;
}

.vftek-consent-fuss {
	grid-area: fuss;
	margin: 4px 0 0 !important;
	font-size: 12px;
	color: #777 !important;
}

.vftek-consent-fuss a {
	color: #EF7202;
	text-decoration: underline;
}

/* Schmale Bildschirme: Textblock und Knoepfe untereinander */
@media (max-width: 767px) {
	.vftek-consent-banner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"text"
			"knoepfe"
			"details"
			"fuss";
		gap: 12px;
		padding: 16px 16px 12px;
	}

	/* Die beiden gleichrangigen Knoepfe nebeneinander - spart Hoehe und haelt
	   Ablehnen und Akzeptieren auf einer Ebene. */
	.vftek-consent-knoepfe { gap: 8px; }
	.vftek-consent-btn { flex: 1 1 0; min-width: 0; padding: 11px 8px; }
	.vftek-consent-details .vftek-consent-knoepfe { justify-content: stretch; }
	.vftek-consent-text p { font-size: 13px; }
	.vftek-consent-fuss { text-align: center; }
}

/* Platzhalter fuer eingebettete Fremdinhalte, die noch nicht freigegeben sind */
.vftek-embed-platzhalter {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 320px;
	padding: 24px;
	background: #f5f5f5;
	border: 1px dashed #c9c9c9;
	text-align: center;
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 14px;
	color: #444;
}

.vftek-embed-platzhalter button {
	background: #EF7202;
	color: #fff;
	border: 0;
	border-radius: 3px;
	padding: 11px 20px;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
}