/**
 * Klaro Consent-Manager – Anpassung an das Seiten-Design.
 * Notice als Panel unten rechts (Klaro-Standardformat);
 * Farben/Schrift der Website.
 *
 * !important wo nötig: Klaro injiziert sein Stylesheet zur Laufzeit
 * nach diesem File und überschreibt sonst Border, Buttons und Padding.
 */

.klaro {
	--font-family: Lato, sans-serif;
	--font-size: 14px;
	--border-radius: 0;
	--dark1: #1d2d20;
	--dark2: #243528;
	--light1: #f0f0f0;
	--light2: #dea86a;
	--green1: #dea86a;
	--green2: #d09a55;
	--notice-max-width: 26rem;
	--notice-left: auto;
	--notice-right: 1.25rem;
	--notice-bottom: 1.25rem;
}

/* Notice: schwebendes Panel unten rechts */
.klaro .cookie-notice:not(.cookie-modal-notice) {
	left: auto !important;
	right: 1.25rem !important;
	bottom: 1.25rem !important;
	width: min(26rem, calc(100vw - 2.5rem)) !important;
	max-width: 26rem !important;
	border: none !important;
	border-radius: 0 !important;
	border-top: 3px solid #dea86a !important;
	outline: none !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
	padding: 1.35rem 1.4rem 1.25rem !important;
	z-index: 10050 !important;
	background: #1d2d20 !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
	display: block;
	padding: 0 !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
	margin: 0 0 1.15rem !important;
	line-height: 1.55;
	color: rgba(240, 240, 240, 0.92);
}

/* Datenschutz-Link im Fließtext: klar, aber nicht laut */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p a {
	color: #dea86a !important;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p a:hover {
	color: #e8c08a !important;
}

/*
 * Aktionszeile: zuerst CTAs, darunter „Einstellungen“.
 * Klaro rendert den Link vor den Buttons – order korrigiert die Hierarchie.
 */
.klaro .cookie-notice .cn-ok {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	flex-wrap: nowrap !important;
	gap: 0.75rem !important;
	margin: 0 !important;
}

.klaro .cookie-notice .cn-ok > .cn-buttons {
	order: 1;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 0.55rem !important;
	width: 100% !important;
	margin: 0 !important;
}

.klaro .cookie-notice .cn-ok > .cn-learn-more,
.klaro .cookie-notice .cn-ok > a.cm-link {
	order: 2;
}

.klaro .cookie-notice .cn-buttons .cm-btn {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	width: auto !important;
	text-align: center !important;
}

/* Buttons: eckig, Uppercase, wie Site-CTAs */
.klaro .cm-btn {
	border-radius: 0 !important;
	padding: 0.65rem 0.9rem !important;
	margin: 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	line-height: 1.25 !important;
	border: 1px solid transparent !important;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease !important;
}

/* Primär: Zustimmen / Alle akzeptieren – gefüllt wie .btn-primary */
.klaro .cm-btn.cm-btn-success {
	background: #dea86a !important;
	border-color: #dea86a !important;
	color: #1d2d20 !important;
}

.klaro .cm-btn.cm-btn-success:hover {
	background: #d7964b !important;
	border-color: #d7964b !important;
	color: #1d2d20 !important;
}

/* Sekundär: Ablehnen – Outline, gleiche Größe, klar unterscheidbar */
.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cn-decline {
	background: transparent !important;
	border: 1px solid rgba(222, 168, 106, 0.55) !important;
	color: rgba(240, 240, 240, 0.92) !important;
}

.klaro .cm-btn.cm-btn-danger:hover,
.klaro .cm-btn.cm-btn-decline:hover,
.klaro .cm-btn.cn-decline:hover {
	background: transparent !important;
	border-color: #dea86a !important;
	color: #dea86a !important;
}

/* Modal: „Auswahl speichern“ als Outline-Akzent */
.klaro .cm-btn.cm-btn-info {
	background: transparent !important;
	border: 1px solid rgba(222, 168, 106, 0.55) !important;
	color: rgba(240, 240, 240, 0.92) !important;
}

.klaro .cm-btn.cm-btn-info:hover {
	background: rgba(222, 168, 106, 0.1) !important;
	border-color: #dea86a !important;
	color: #dea86a !important;
}

/* Accept-all im Modal bleibt Primär (success), save bleibt info */
.klaro .cookie-modal .cm-btn.cm-btn-success.cm-btn-accept-all {
	background: #dea86a !important;
	border-color: #dea86a !important;
	color: #1d2d20 !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-success.cm-btn-accept-all:hover {
	background: #d7964b !important;
	border-color: #d7964b !important;
	color: #1d2d20 !important;
}

/* „Einstellungen“: ruhiger Textlink unter den CTAs */
.klaro .cm-link.cn-learn-more {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0.15rem 0 0 !important;
	text-align: center !important;
	color: rgba(240, 240, 240, 0.72) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	text-decoration-thickness: 1px !important;
	line-height: 1.4 !important;
}

.klaro .cm-link.cn-learn-more:hover {
	color: #dea86a !important;
}

/* Fokusringe in Akzentfarbe */
.klaro button:focus,
.klaro button:focus-visible,
.klaro a:focus-visible {
	outline: 2px solid #dea86a !important;
	outline-offset: 2px;
}

.klaro a,
.klaro .cm-link {
	color: #dea86a;
}

/* Modal: gleiche Formensprache wie Sommerpause-Popup */
.klaro .cookie-modal .cm-modal {
	border-radius: 0 !important;
	border: none !important;
	border-top: 3px solid #dea86a !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45) !important;
	background: #1d2d20 !important;
}

.klaro .cookie-modal .cm-modal .cm-header {
	border-bottom: 1px solid rgba(222, 168, 106, 0.22) !important;
	padding-top: 1.5rem !important;
}

.klaro .cookie-modal .cm-modal .cm-header h1 {
	font-family: "Brewery W05 Regular", Lato, sans-serif !important;
	font-size: 1.55rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.02em;
	color: #f0f0f0 !important;
}

.klaro .cookie-modal .cm-modal .cm-header p,
.klaro .cookie-modal .cm-modal .cm-body {
	color: rgba(240, 240, 240, 0.9);
	line-height: 1.55;
}

.klaro .cookie-modal .cm-modal .cm-header a {
	color: #dea86a !important;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.klaro .cookie-modal .cm-modal .cm-footer {
	border-top: 1px solid rgba(222, 168, 106, 0.22) !important;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.55rem !important;
	justify-content: stretch !important;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn {
	flex: 1 1 auto !important;
	min-width: 7.5rem;
}

.klaro .cookie-modal .cm-list-label .cm-list-title {
	color: #f0f0f0 !important;
}

.klaro .cookie-modal .cm-list-description {
	color: rgba(240, 240, 240, 0.72) !important;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
	background-color: #dea86a !important;
}

.klaro .cookie-modal .cm-btn-close {
	color: rgba(240, 240, 240, 0.7) !important;
}

.klaro .cookie-modal .cm-btn-close:hover {
	color: #dea86a !important;
}

@media (max-width: 575.98px) {
	.klaro .cookie-notice:not(.cookie-modal-notice) {
		left: 0.75rem !important;
		right: 0.75rem !important;
		bottom: 0.75rem !important;
		width: auto !important;
		max-width: none !important;
		padding: 1.2rem 1.15rem 1.15rem !important;
	}

	.klaro .cookie-notice .cn-ok > .cn-buttons {
		flex-direction: column !important;
	}

	.klaro .cookie-notice .cn-buttons .cm-btn {
		width: 100% !important;
	}

	/* Primäraktion zuerst, wenn gestapelt */
	.klaro .cookie-notice .cn-buttons .cm-btn-success {
		order: -1;
	}
}

/*
 * Karten-Platzhalter (Anfahrtskarte): Overlay im Markengrün mit
 * Ein-Klick-Aktivierung. Klaro blendet das Element über
 * data-name="googleMaps"/data-type="placeholder" je nach Einwilligung
 * ein und aus (inline display:block/none) – Layout deshalb komplett
 * im Inner-Wrapper.
 */
.section_map__consent {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* Über dem (leeren) Karten-Container, der später im DOM folgt und den
	   Abschnitt ebenfalls absolut füllt – sonst fängt er alle Klicks ab. */
	z-index: 1;
	background: #1d2d20;
}

.section_map__consent__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 2rem 1.25rem;
	text-align: center;
}

.section_map__consent__inner p {
	max-width: 30rem;
	margin: 0 0 1.25rem;
	color: rgba(240, 240, 240, 0.92);
	line-height: 1.55;
}

.section_map__consent__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.55rem;
}