/*
Mittelpunkt Mistelbach – Gasthaus-Palette „Bordeaux & Leinen“
Basierend auf Porto default.css

Bordeaux trägt Flächen, Navigation und primäre Aktionen. Logo-Gold bleibt ein
gezielter Akzent und wird auf hellen Flächen nicht für kleinen Text verwendet.
*/

:root {
	/* Bordeaux – Hauptfarbe */
	--primary: #682936;
	--primary-100: #F3E8EA;
	--primary-200: #E2C9CF;
	--primary-300: #C99AA5;
	--primary-400: #9C5262;
	--primary-500: #682936;
	--primary-600: #59222E;
	--primary-700: #471B25;
	--primary-800: #35151C;
	--primary-900: #29191C;
	--primary-rgba-0: rgba(104, 41, 54, 0);
	--primary-rgba-10: rgba(104, 41, 54, .1);
	--primary-rgba-20: rgba(104, 41, 54, .2);
	--primary-rgba-30: rgba(104, 41, 54, .3);
	--primary-rgba-40: rgba(104, 41, 54, .4);
	--primary-rgba-50: rgba(104, 41, 54, .5);
	--primary-rgba-60: rgba(104, 41, 54, .6);
	--primary-rgba-70: rgba(104, 41, 54, .7);
	--primary-rgba-80: rgba(104, 41, 54, .8);
	--primary-rgba-90: rgba(104, 41, 54, .9);

	/* Logo-Gold – Akzentfarbe */
	--secondary: #D1A03C;
	--secondary-100: #FBF4E5;
	--secondary-200: #F2DEB5;
	--secondary-300: #E8C87E;
	--secondary-400: #DDB052;
	--secondary-500: #D1A03C;
	--secondary-600: #AD7E25;
	--secondary-700: #855E1C;
	--secondary-800: #5E4214;
	--secondary-900: #38270C;
	--secondary-rgba-0: rgba(209, 160, 60, 0);
	--secondary-rgba-10: rgba(209, 160, 60, .1);
	--secondary-rgba-20: rgba(209, 160, 60, .2);
	--secondary-rgba-30: rgba(209, 160, 60, .3);
	--secondary-rgba-40: rgba(209, 160, 60, .4);
	--secondary-rgba-50: rgba(209, 160, 60, .5);
	--secondary-rgba-60: rgba(209, 160, 60, .6);
	--secondary-rgba-70: rgba(209, 160, 60, .7);
	--secondary-rgba-80: rgba(209, 160, 60, .8);
	--secondary-rgba-90: rgba(209, 160, 60, .9);

	/* Oliv, Altrosa-Beige, dunkles Bordeaux und Leinen */
	--tertiary: #495541;
	--quaternary: #D9C2B6;
	--dark: #29191C;
	--dark-100: #211417;
	--dark-200: #190F11;
	--dark-300: #100A0B;
	--dark-rgba-60: rgba(41, 25, 28, .6);
	--dark-rgba-90: rgba(41, 25, 28, .9);
	--light: #F5EBDD;
	--light-100: #EFE2D1;
	--light-200: #E9D9C5;
	--light-300: #E2CFB8;
	--primary-inverse: #FFF;
	--secondary-inverse: #29191C;
	--tertiary-inverse: #FFF;
	--quaternary-inverse: #29191C;
	--dark-inverse: #F5EBDD;
	--light-inverse: #29191C;

	/* Projektweite semantische Farben */
	--linen: #F5EBDD;
	--surface-muted: #D9C2B6;
	--olive: #495541;
	--coffee-cream: var(--linen);
	--coffee-oat: var(--surface-muted);
	--coffee-sage: var(--olive);
	--coffee-success: #3F5A43;
	--coffee-border: #CDAFA1;
}

/* amWebConsent / Klaro – Mittelpunkt corporate design */
.klaro {
	--font-family: "Quicksand", Arial, sans-serif;
	--title-font-family: "Quicksand", Arial, sans-serif;
	--font-size: 15px;
	--border-radius: 10px;
	--border-color: rgba(104, 41, 54, .18);
	--button-text-color: #fff;
}

.klaro .cookie-modal .cm-bg {
	background: rgba(41, 25, 28, .72);
	backdrop-filter: blur(2px);
}

.klaro .cookie-modal .cm-modal.cm-klaro,
.klaro .cookie-modal-notice,
.klaro .cookie-notice:not(.cookie-modal-notice),
.klaro .context-notice,
.klaro .context-notice.cm-dark {
	border: 1px solid rgba(104, 41, 54, .22);
	border-top: 4px solid #682936;
	background: #fff9f2;
	color: #29191c;
	box-shadow: 0 18px 52px rgba(41, 25, 28, .2);
}

.klaro .cookie-modal p,
.klaro .cookie-modal strong,
.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal ul,
.klaro .cookie-modal li,
.klaro .cookie-notice p,
.klaro .cookie-notice strong,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice ul,
.klaro .cookie-notice li {
	color: #29191c;
}

.klaro .context-notice p,
.klaro .context-notice.cm-dark p {
	color: #29191c;
}

.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-footer {
	border-color: rgba(104, 41, 54, .18);
}

.klaro .cookie-modal .cm-modal .cm-header {
	background: #f5ebdd;
}

.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2 {
	color: #29191c;
	font-weight: 700;
}

.klaro .cookie-modal .cm-modal .cm-footer {
	background: rgba(245, 235, 221, .58);
}

.klaro .cookie-modal .cm-switch-container,
.klaro .cookie-notice .cm-switch-container,
.klaro .context-notice .cm-switch-container,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-toggle-all,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-toggle-all {
	border-color: rgba(104, 41, 54, .16);
}

.klaro .cookie-modal .cm-list-description,
.klaro .cookie-notice .cm-list-description,
.klaro .context-notice .cm-list-description,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p.purposes,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p.purposes {
	color: #5a4d49;
}

.klaro .cookie-modal a,
.klaro .cookie-notice a,
.klaro .context-notice p a {
	color: #682936;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.klaro .cookie-modal .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider,
.klaro .context-notice .cm-list-label .slider {
	background: #d9c2b6;
	box-shadow: inset 0 0 0 1px rgba(41, 25, 28, .14);
}

.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-label .slider::before,
.klaro .context-notice .cm-list-label .slider::before {
	background: #fff9f2;
	box-shadow: 0 2px 6px rgba(41, 25, 28, .2);
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider {
	background: #682936;
}

.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.only-required + .cm-list-label .slider {
	background: #495541;
}

.klaro .cookie-modal .cm-btn,
.klaro .cookie-notice .cm-btn,
.klaro .context-notice .cm-btn {
	min-height: 42px;
	padding: .65rem 1rem;
	border: 1px solid #682936;
	border-radius: 4px;
	background: transparent;
	color: #682936;
	font-weight: 700;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success-var,
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success-var,
.klaro .context-notice .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success-var {
	border-color: #682936;
	background: #682936;
	color: #fff;
}

.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-info,
.klaro .cookie-modal .cm-btn.cm-btn-close,
.klaro .cookie-notice .cm-btn.cm-btn-close,
.klaro .context-notice .cm-btn.cm-btn-info,
.klaro .context-notice .cm-btn.cm-btn-close {
	border-color: #682936;
	background: transparent;
	color: #682936;
}

.klaro .cookie-modal .cm-btn:hover,
.klaro .cookie-modal .cm-btn:focus-visible,
.klaro .cookie-notice .cm-btn:hover,
.klaro .cookie-notice .cm-btn:focus-visible,
.klaro .context-notice .cm-btn:hover,
.klaro .context-notice .cm-btn:focus-visible {
	border-color: #29191c;
	background: #29191c;
	color: #fff;
}

.klaro .cookie-modal a:focus-visible,
.klaro .cookie-notice a:focus-visible,
.klaro .context-notice a:focus-visible,
.klaro .cookie-modal button:focus-visible,
.klaro .cookie-notice button:focus-visible,
.klaro .context-notice button:focus-visible,
.klaro .cookie-modal .cm-list-input:focus-visible + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:focus-visible + .cm-list-label .slider,
.klaro .context-notice .cm-list-input:focus-visible + .cm-list-label .slider {
	outline: 3px solid #d1a03c;
	outline-offset: 3px;
}

.klaro .cookie-modal .cm-modal .hide svg {
	stroke: #682936;
}

@media (max-width: 659px) {
	.klaro .cookie-modal .cm-modal.cm-klaro {
		border-right: 0;
		border-bottom: 0;
		border-left: 0;
		border-radius: 0;
	}

	.klaro .cookie-modal .cm-modal .cm-footer-buttons {
		gap: .65rem;
		flex-direction: column;
	}

	.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn {
		width: 100%;
		margin: 0;
	}
}

/* Porto-Standard: kompakter Ersthinweis; MiM-Farbwelt bleibt unverändert. */
.klaro .cookie-modal .cm-modal.cm-klaro {
	max-width: 640px;
}

.klaro .cookie-modal .cm-modal .cm-header {
	padding: 1rem 3rem 1rem 1rem;
}

.klaro .cookie-modal .cm-modal .cm-header h1.title {
	font-size: 1.75rem;
	line-height: 1.2;
}

.klaro .cookie-modal .cm-modal .cm-body {
	padding: .9rem 1rem;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose {
	margin-top: 0;
	padding: .1rem 0 1rem 60px;
}

.klaro .cookie-modal .cm-modal .cm-footer {
	padding: .9rem 1rem;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons {
	align-items: center;
	gap: .75rem;
}

.klaro .cookie-notice:not(.cookie-modal-notice) {
	position: fixed;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	max-width: none;
	border: 0;
	border-radius: 0;
	background: var(--dark);
	box-shadow: 0 -8px 24px rgba(41, 25, 28, .24);
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 2rem;
	box-sizing: border-box;
	max-width: 1320px;
	margin: 0 auto;
	padding: 1.15rem 1.5rem;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body > p {
	grid-column: 1;
	max-width: 780px;
	margin: 0;
	color: rgba(255, 255, 255, .82);
	font-size: .92rem;
	line-height: 1.55;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
	display: flex;
	grid-column: 2;
	grid-row: 1;
	align-items: center;
	justify-content: flex-end;
	gap: .9rem;
	margin: 0;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
	margin: 0;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
	color: #fff;
	font-size: .88rem;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
	display: flex;
	gap: .65rem;
	white-space: nowrap;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn {
	min-height: 42px;
	padding: .72rem 1rem;
	border-radius: 4px;
	font-size: .88rem;
	line-height: 1.2;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-decline,
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-danger,
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn.cn-decline {
	border-color: rgba(255, 255, 255, .72);
	background: transparent;
	color: #fff;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-success {
	border-color: var(--primary);
	background: var(--primary);
	color: #fff;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-success:focus-visible {
	border-color: var(--secondary);
	background: var(--secondary);
	color: var(--secondary-inverse);
}

@media (max-width: 991px) {
	.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
		grid-template-columns: 1fr;
		row-gap: .9rem;
	}

	.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
		grid-column: 1;
		grid-row: 2;
		justify-content: space-between;
	}
}

@media (max-width: 659px) {
	.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok,
	.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
		align-items: stretch;
		flex-direction: column;
		width: 100%;
	}

	.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
		align-self: flex-start;
	}

	.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn {
		width: 100%;
	}
}

/* IMB-Anordnung für die Detailansicht: Dienst | Beschreibung | Status. */
.klaro .cookie-modal {
	z-index: 100000;
}

.klaro .cookie-modal .cm-bg {
	z-index: 100000;
}

.klaro .cookie-modal .cm-modal.cm-klaro {
	display: flex;
	flex-direction: column;
	width: calc(100% - 3rem);
	max-width: 1080px;
	max-height: calc(100vh - 3rem);
	overflow: hidden;
	border: 0;
	border-radius: 6px;
	box-shadow: 0 24px 70px rgba(41, 25, 28, .3);
	z-index: 100001;
}

.klaro .cookie-modal .cm-modal .cm-header {
	padding: 2rem 4rem 1.7rem 2rem;
	border-bottom: 1px solid rgba(104, 41, 54, .16);
	background: #fff9f2;
}

.klaro .cookie-modal .cm-modal .cm-header h1.title {
	margin-bottom: .75rem;
	color: #29191c;
	font-size: 1.55rem;
	font-weight: 700;
}

.klaro .cookie-modal .cm-modal .cm-header p {
	max-width: 900px;
	margin-top: 0;
	color: #5a4d49;
	font-size: .94rem;
	line-height: 1.7;
}

.klaro .cookie-modal .cm-modal .hide {
	top: 1.5rem;
	right: 1.5rem;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(104, 41, 54, .22);
	border-radius: 4px;
}

.klaro .cookie-modal .cm-modal .hide svg {
	width: 18px;
	height: 18px;
	stroke: #682936;
	stroke-width: 2;
}

.klaro .cookie-modal .cm-modal .cm-body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 0 2rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services {
	margin: 0;
	padding: 0;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service {
	min-height: 88px;
	margin: 0;
	padding: 0 !important;
	border-bottom: 1px solid rgba(104, 41, 54, .13);
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service:last-child {
	border-bottom: 0;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service > div {
	position: relative;
	display: grid;
	grid-template-columns: minmax(190px, .85fr) minmax(280px, 1.8fr) 130px;
	align-items: center;
	column-gap: 2rem;
	min-height: 88px;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service .cm-list-label {
	display: contents;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service .cm-list-title {
	grid-column: 1;
	grid-row: 1;
	color: #29191c;
	font-size: .9rem;
	font-weight: 700;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service > div > div[id$="-description"] {
	grid-column: 2;
	grid-row: 1;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service .cm-list-description {
	margin: 0;
	padding: 0;
	color: #6a5b56;
	font-size: .86rem;
	line-height: 1.55;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service p.purposes {
	display: none;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service .cm-switch {
	position: relative;
	top: auto;
	right: auto;
	left: auto;
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	width: 50px;
	min-width: 50px;
	transform: none;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service .cm-list-input.required + .cm-list-label .cm-switch {
	display: none;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service .cm-required {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	padding: 0;
	color: #5a4d49;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service.cm-toggle-all {
	display: none;
}

.klaro .cookie-modal .cm-modal .cm-footer {
	flex: 0 0 auto;
	padding: 1.25rem 2rem;
	border-top: 1px solid rgba(104, 41, 54, .16);
	background: #f5ebdd;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons {
	justify-content: flex-start;
	gap: .75rem;
}

/* Wie bei IMB bleibt im Detaildialog nur das Speichern der gewählten Schalter. */
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn {
	display: none;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn:nth-child(2) {
	display: inline-block;
}

@media (max-width: 767px) {
	.klaro .cookie-modal .cm-modal.cm-klaro {
		width: 100%;
		max-height: 100vh;
		border-radius: 0;
	}

	.klaro .cookie-modal .cm-modal .cm-header {
		padding: 1.5rem 3.5rem 1.25rem 1.25rem;
	}

	.klaro .cookie-modal .cm-modal .hide {
		top: 1rem;
		right: 1rem;
	}

	.klaro .cookie-modal .cm-modal .cm-body {
		padding: 0 1.25rem;
	}

	.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service > div {
		grid-template-columns: minmax(0, 1fr);
		row-gap: .5rem;
		padding: 1rem 0;
	}

	.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service .cm-list-label {
		display: grid;
		grid-column: 1;
		grid-row: 1;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 1rem;
		width: 100%;
	}

	.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service .cm-list-title {
		grid-column: 1;
		grid-row: 1;
	}

	.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service > div > div[id$="-description"] {
		grid-column: 1;
		grid-row: 2;
	}

	.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service .cm-switch,
	.klaro .cookie-modal .cm-modal .cm-body ul.cm-services > li.cm-service .cm-required {
		grid-column: 2;
		grid-row: 1;
	}

	.klaro .cookie-modal .cm-modal .cm-footer {
		padding: 1rem 1.25rem;
	}

	.klaro .cookie-modal .cm-modal .cm-footer-buttons {
		align-items: stretch;
		flex-direction: column;
	}

	.klaro .cookie-modal .cm-modal .cm-footer .cm-btn {
		width: 100%;
		margin: 0;
	}
}

/* Tastaturzugang: erst bei Fokus sichtbar, dann oberhalb aller Porto-Ebenen. */
.mim-skip-link {
	position: fixed;
	z-index: 100000;
	top: .75rem;
	left: .75rem;
	transform: translateY(-200%);
	padding: .75rem 1rem;
	border: 3px solid #FFF;
	border-radius: .25rem;
	background: var(--dark);
	color: #FFF;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}

.mim-skip-link:focus,
.mim-skip-link:focus-visible {
	transform: translateY(0);
	color: #FFF;
	outline: 3px solid var(--secondary);
	outline-offset: 3px;
}

/* Porto Hauptfarben */
html .bg-color-primary,
html .bg-primary {
	background-color: var(--primary) !important;
}

html .text-color-primary {
	color: var(--primary) !important;
}

html .border-color-primary {
	border-color: var(--primary) !important;
}

html .bg-color-secondary,
html .bg-secondary {
	background-color: var(--secondary) !important;
}

html .text-color-secondary {
	color: var(--secondary) !important;
}

html .border-color-secondary {
	border-color: var(--secondary) !important;
}

body,
html .bg-light,
html .bg-color-light {
	background-color: var(--light) !important;
}

body,
.card {
	color: var(--dark);
}

html .bg-dark,
html .bg-color-dark {
	background-color: var(--dark) !important;
}

html .text-color-dark {
	color: var(--dark) !important;
}

.custom-bg-color-1 {
	background-color: var(--primary-100) !important;
}

/* Buttons */
html .btn-primary {
	background-color: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

html .btn-primary:hover,
html .btn-primary:focus {
	background-color: var(--primary-600);
	border-color: var(--primary-600);
	color: #fff;
}

html .btn-secondary {
	background-color: var(--secondary);
	border-color: var(--secondary);
	color: var(--dark);
}

html .btn-secondary:hover,
html .btn-secondary:focus {
	background-color: var(--secondary-700);
	border-color: var(--secondary-700);
	color: #fff;
}

/* Hero-CTAs: Logo-Gold bereits im Ruhezustand deutlich sichtbar */
html .mim-hero-cta {
	background-color: transparent;
	border: 2px solid var(--secondary);
	color: var(--secondary);
}

html .mim-hero-cta:hover,
html .mim-hero-cta:focus {
	background-color: var(--secondary);
	border-color: var(--secondary);
	color: var(--dark);
}

/* Gemeinsame Hero-Optik für Website-CTAs, nicht für Navigation/Editor-Steuerungen.
   Dunkle Grundfläche hält Gold auch auf hellen Abschnitten lesbar. */
html body :is(main, .main, #footer, .mim-system-header) .btn:not(.header-btn-collapse-nav),
html body .klaro :is(.cookie-modal, .cookie-notice, .context-notice) button.cm-btn {
	background: #29191c !important;
	border: 2px solid #d1a03c !important;
	border-radius: 0;
	color: #d1a03c !important;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
html body #home .btn.mim-hero-cta,
html body :is(main, .main, #footer) .mim-error-page .btn {
	background: transparent !important;
}
html body #home .btn.mim-hero-cta:is(:hover, :focus-visible, :active),
html body :is(main, .main, #footer, .mim-system-header) .btn:not(.header-btn-collapse-nav):is(:hover, :focus-visible, :active),
html body .klaro :is(.cookie-modal, .cookie-notice, .context-notice) button.cm-btn:is(:hover, :focus-visible, :active) {
	background: #d1a03c !important;
	border-color: #d1a03c !important;
	color: #29191c !important;
}
html body :is(main, .main, #footer) .btn:focus-visible {
	outline: 3px solid #f5ebdd;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px #29191c;
}

/* Testvariante: geschwungene Display-Schrift ausschließlich im Hero */
#home .mim-hero-title {
	font-family: "Arizonia", cursive;
	font-weight: 400 !important;
	letter-spacing: 0;
	text-transform: none;
}

#menu h2[data-fred-name="heading"] {
	font-family: "Arizonia", cursive;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* Geschwungene Abschnittsüberschriften: Über uns und Galerie */
#about h2,
#about h2 *,
#gallery h2,
#gallery h2 *,
#reservations > .container > .row > .custom-column-bg h2,
#reservations > .container > .row > .custom-column-bg h2 *,
#weekly-menu > .container > .row:first-child h2,
#weekly-menu > .container > .row:first-child h2 *,
#menu > .container > .row:first-child h2,
#menu > .container > .row:first-child h2 *,
#news > .container > .row:first-child h2,
#news > .container > .row:first-child h2 * {
	font-family: "Arizonia", cursive !important;
	font-weight: 400 !important;
	font-size: clamp(2.5rem, 2.9vw, 3rem) !important;
	line-height: 1.08;
	letter-spacing: 0;
	text-transform: none;
}

main [data-fred-name="intro"] {
	font-family: "Quicksand", sans-serif;
	font-weight: 700;
}

/* Speisekarten-Legende und einzeln aktivierbare Kennzeichnungen */
.mim-menu-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .65rem 1.25rem;
	font-size: .88rem;
	font-weight: 600;
	padding: .8rem 1.1rem;
	border-radius: .5rem;
	background: var(--surface-muted);
	color: var(--dark);
}

.mim-menu-legend-item {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}

.mim-menu-icon,
.mim-menu-tag {
	display: inline-grid;
	width: 1.8rem;
	height: 1.8rem;
	place-items: center;
	border: 1px solid var(--secondary);
	border-radius: 50%;
	background: var(--secondary-100);
	color: var(--primary);
	font-size: .78rem;
}

.mim-menu-legend-item:nth-child(1) .mim-menu-icon,
.mim-menu-legend-item:nth-child(2) .mim-menu-icon,
.mim-menu-tag-vegetarian,
.mim-menu-tag-vegan {
	color: var(--olive);
}

.mim-menu-item-tags {
	display: inline-flex;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	align-items: center;
	gap: .4rem;
}

.custom-menu-item .custom-menu-item-details .custom-menu-item-title {
	display: inline-flex;
	flex: 0 1 auto;
	flex-wrap: nowrap;
	align-items: center;
	gap: .4rem;
	min-width: 0;
	white-space: nowrap;
}

.custom-menu-item .custom-menu-item-details .custom-menu-item-title h4 {
	flex: 0 1 auto;
	white-space: nowrap;
}

.custom-menu-item .custom-menu-item-details .custom-menu-item-line {
	flex: 1 1 auto;
	width: auto;
	min-width: 1.5rem;
}

.mim-menu-tag {
	display: none;
	margin-top: 0;
}

.custom-menu-item[data-menu-tags*="vegetarian"] .mim-menu-tag-vegetarian,
.custom-menu-item[data-menu-tags*="vegan"] .mim-menu-tag-vegan,
.custom-menu-item[data-menu-tags*="regional"] .mim-menu-tag-regional {
	display: inline-grid;
}

@media (max-width: 575px) {
	.mim-menu-legend {
		gap: .55rem .9rem;
		font-size: .82rem;
	}
}

.mim-osm-leaflet {
	width: 100%;
	height: 600px;
	background: #e9e4dc;
}

#locations .mim-osm-business {
	z-index: 1000;
}

.mim-osm-leaflet-marker {
	position: relative;
	display: block;
	width: 2.7rem;
	height: 2.7rem;
	transform: rotate(-45deg);
	border: 4px solid #d1a03c;
	border-radius: 50% 50% 50% 0;
	background: #682936;
	box-shadow: 0 5px 14px rgba(41, 25, 28, .38);
}

.mim-osm-leaflet-marker::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: .72rem;
	height: .72rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #fff9f2;
}

@media (max-width: 575px) {
	.mim-osm-leaflet {
		height: 620px;
	}
}

/* Links */
a {
	color: var(--primary);
}

a:hover {
	color: var(--secondary-700);
}

/* Dunkler Gasthaus-Header: helle Navigation, Logo-Gold für Zustände */
#header .header-nav-main nav > ul > li > a,
#header .header-nav-main nav > ul > li > a.dropdown-toggle {
	color: var(--light) !important;
}

#header .header-nav-main nav > ul > li.active > a,
#header .header-nav-main nav > ul > li > a.active,
#header .header-nav-main nav > ul > li:hover > a {
	background: transparent !important;
	color: var(--secondary) !important;
}

/* Gold bleibt auf dunklen Hero- und Reservierungsflächen deutlich lesbar. */
#home .text-color-primary,
.custom-column-bg .text-color-primary {
	color: var(--secondary) !important;
}

/* Dropdown */
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu {
	border-top-color: var(--primary);
}

#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a:hover,
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a.active {
	background-color: var(--primary);
	color: #fff;
}

/* Mobile Navigation Button */
#header .header-btn-collapse-nav {
	background: var(--primary);
	color: #fff;
}

#header .header-btn-collapse-nav:hover {
	background: var(--secondary);
	color: var(--dark);
}

/* Highlights / Akzente */
.highlight-primary {
	background-color: var(--primary);
	color: #fff;
}

.highlight-secondary {
	background-color: var(--secondary);
	color: var(--dark);
}

/* Hero Overlay Akzent */
.video-overlay {
	background: rgba(41, 25, 28, 0.72);
}

/* Feine Akzentlinie in Logo-Gold */
.imb-accent-line {
	width: 90px;
	height: 4px;
	background: var(--secondary);
	display: block;
	margin: 20px 0;
}

.video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(41, 25, 28, 0.72);
}
.video-hero {
	position: relative;
	z-index: 1;
}

.video-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.video-content {
    position: absolute;
    inset: 0;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-80px);
}

.video-content h1 {
	font-size: clamp(2.4rem, 5vw, 5.8rem);
	letter-spacing: -0.04em;
	text-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

@media (max-width: 991px) {
	.video-hero {
		height: 70vh;
		min-height: 460px;
	}

	.video-content h1 {
		font-size: clamp(2rem, 8vw, 3.8rem);
	}
}

.custom-grid-1 {
	position: relative;
	z-index: 10;
	margin-top: -180px;
}

.custom-grid-1-item {
    transition: all .4s ease;
    box-shadow: 0 15px 40px rgba(0,0,0,.12);
}

.custom-grid-1-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0,0,0,.18);
}

.appear-animation {
	opacity: 1 !important;
}

/* News & Events */
.mim-news-card {
	min-height: 100%;
	border: 1px solid rgba(104, 41, 54, .16) !important;
	border-top: 4px solid #682936 !important;
	background: #fff9f2;
	box-shadow: 0 12px 32px rgba(41, 25, 28, .08);
	color: #5a4d49;
	transition: box-shadow .2s ease;
}

.mim-news-card:hover {
	box-shadow: 0 16px 36px rgba(41, 25, 28, .12);
}

.mim-news-card h3 {
	color: #29191c;
}

.mim-news-card .mim-news-date,
.mim-news-card .mim-news-date i {
	color: #682936;
}

.mim-news-card .mim-news-copy,
.mim-news-card .mim-news-copy p {
	color: #5a4d49;
}

.mim-news-empty > div > div {
	border-radius: .25rem;
}

.mim-event-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: .65rem;
	width: 100%;
}

.mim-news-card .mim-event-image {
	position: relative;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 105px !important;
	overflow: hidden;
	border-radius: .25rem;
	background: rgba(0, 0, 0, .06);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.mim-news-card .mim-event-image:only-child {
	grid-column: 1 / -1;
}

.mim-news-card .mim-event-image[href=""] {
	display: none !important;
}

.mim-news-card .mim-event-image img {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 105px !important;
	object-fit: cover;
	transition: transform .25s ease, opacity .25s ease;
}

.mim-news-card .mim-event-image:hover img,
.mim-news-card .mim-event-image:focus-visible img {
	transform: scale(1.06);
	opacity: .88;
}

@media (prefers-reduced-motion: reduce) {
	.mim-news-card {
		transition: none;
	}

	.mim-news-card:hover {
		box-shadow: 0 12px 32px rgba(41, 25, 28, .08);
	}

	.mim-news-card .mim-event-image img {
		transition: none;
	}

	.mim-news-card .mim-event-image:hover img,
	.mim-news-card .mim-event-image:focus-visible img {
		transform: none;
	}
}

/* Fred gallery: fixed stage with an independently scrollable thumbnail window. */
.mim-gallery-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
	align-items: stretch;
}

.mim-gallery-stage,
.mim-gallery-thumbs {
	height: clamp(410px, 44vw, 570px);
}

.mim-gallery-stage,
.mim-gallery-main-link {
	display: block;
	overflow: hidden;
	border-radius: .25rem;
}

.mim-gallery-main-link {
	height: 100%;
	background: rgba(0, 0, 0, .06);
}

.mim-gallery-main-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .2s ease;
}

.mim-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: calc((100% - 1.5rem) / 3);
	gap: .75rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-color: var(--primary) rgba(0, 0, 0, .08);
	scrollbar-width: thin;
	padding-right: .35rem;
}

.mim-gallery-thumb {
	position: relative;
	min-width: 0;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	border: 3px solid transparent;
	border-radius: .25rem;
	background: rgba(0, 0, 0, .06);
	cursor: pointer;
	transition: border-color .2s ease, opacity .2s ease;
}

.mim-gallery-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .25s ease;
}

.mim-gallery-thumb:hover img,
.mim-gallery-thumb:focus-visible img {
	transform: scale(1.04);
}

.mim-gallery-thumb.is-active {
	border-color: var(--primary);
}

.mim-gallery-thumb:focus-visible {
	outline: 3px solid #1769aa;
	outline-offset: -3px;
}

@media (max-width: 767px) {
	.mim-gallery-layout {
		grid-template-columns: 1fr;
	}

	.mim-gallery-stage {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.mim-gallery-thumbs {
		display: flex;
		height: 96px;
		gap: .65rem;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		padding: 0 0 .35rem;
	}

	.mim-gallery-thumb {
		flex: 0 0 128px;
		scroll-snap-align: start;
	}
}

/* Branded system pages */
.mim-error-page {
	position: relative;
	display: grid;
	min-height: clamp(620px, 78vh, 880px);
	align-items: center;
	isolation: isolate;
	background: var(--dark, #29191c) url('/assets/img/content/system/broken-wineglass-v1.webp') center/cover no-repeat;
}

.mim-error-page::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(135deg, rgba(24, 15, 17, .86), rgba(41, 25, 28, .62));
	content: "";
}

@media (max-width: 767px) {
	.mim-error-page { background-position: 72% center; }
}

.mim-error-code {
	margin: 0 0 -.18em;
	color: rgba(255, 255, 255, .1);
	font-size: clamp(7rem, 22vw, 15rem);
	font-weight: 800;
	letter-spacing: -.08em;
	line-height: .8;
}

.mim-error-intro {
	max-width: 680px;
}

.mim-legal-section {
	background: #f6f1e9;
	scroll-margin-top: 90px;
}

.mim-legal-accordion {
	max-width: 980px;
	margin: 0 auto;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.mim-legal-accordion .accordion-item {
	border-color: #d7c9b8;
	background: transparent;
	scroll-margin-top: 90px;
}

.mim-legal-accordion .accordion-button {
	padding: 1.25rem 0;
	background: transparent;
	box-shadow: none;
	color: #2f2622;
	font-size: clamp(1.25rem, 2.5vw, 1.65rem);
	font-weight: 700;
}

.mim-legal-accordion .accordion-button:not(.collapsed) {
	color: var(--primary, #c89b6d);
}

.mim-legal-copy {
	max-width: 800px;
	padding: .5rem 0 2rem;
	color: #49413d;
}

.mim-legal-copy h4 {
	margin: 1.6rem 0 .5rem;
	color: #2f2622;
	font-size: 1.1rem;
}

.mim-legal-notice {
	padding: 1rem 1.15rem;
	border-left: 4px solid var(--primary, #c89b6d);
	background: #fff;
}

.mim-footer-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .65rem 1.25rem;
}

.mim-footer-legal a {
	text-decoration: underline;
	text-underline-offset: .2em;
}

@media (prefers-reduced-motion: reduce) {
	.mim-gallery-main-image,
	.mim-gallery-thumb,
	.mim-gallery-thumb img {
		transition: none;
	}
}

/* Fullscreen gallery controls: intentionally large and high-contrast on every viewport. */
.mfp-wrap.mim-gallery-lightbox {
	z-index: 10050;
}

.mfp-bg.mim-gallery-lightbox {
	background: var(--dark-300);
	opacity: .96;
}

.mim-gallery-lightbox .mfp-container {
	padding: 64px 82px 50px;
}

.mim-gallery-lightbox .mfp-content {
	max-width: calc(100vw - 164px);
}

.mim-gallery-lightbox img.mfp-img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 114px) !important;
	padding: 0;
	object-fit: contain;
}

.mim-gallery-lightbox button.mfp-close {
	position: fixed;
	top: 14px;
	right: 18px;
	display: grid;
	width: 52px;
	height: 52px;
	place-items: center;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, .88);
	border-radius: 50%;
	background: var(--dark);
	color: #fff;
	font: 300 42px/1 Arial, sans-serif;
	opacity: 1;
	box-shadow: 0 4px 22px rgba(0, 0, 0, .4);
}

.mim-gallery-lightbox button.mfp-close:hover,
.mim-gallery-lightbox button.mfp-close:focus-visible {
	background: var(--primary);
	color: #fff;
	opacity: 1;
}

.mim-gallery-lightbox button.mfp-arrow {
	position: fixed;
	top: 50%;
	display: grid;
	width: 58px;
	height: 88px;
	place-items: center;
	margin: 0 !important;
	border: 2px solid rgba(255, 255, 255, .75);
	border-radius: .35rem;
	background: var(--dark);
	color: #fff;
	opacity: 1;
	transform: translateY(-50%);
	box-shadow: 0 4px 22px rgba(0, 0, 0, .35);
}

.mim-gallery-lightbox button.mfp-arrow:hover,
.mim-gallery-lightbox button.mfp-arrow:focus-visible {
	background: var(--primary);
	opacity: 1;
}

.mim-gallery-lightbox button.mfp-arrow-left {
	left: 14px;
}

.mim-gallery-lightbox button.mfp-arrow-right {
	right: 14px;
	left: auto;
}

.mim-gallery-lightbox button.mfp-arrow::before {
	display: none;
}

.mim-gallery-lightbox button.mfp-arrow::after {
	position: static;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	border: 0;
	color: #fff;
	font: 700 38px/1 Arial, sans-serif;
}

.mim-gallery-lightbox button.mfp-arrow-left::after {
	content: "\2039";
}

.mim-gallery-lightbox button.mfp-arrow-right::after {
	content: "\203a";
}

.mim-gallery-lightbox .mfp-counter {
	position: fixed;
	right: 22px;
	bottom: 16px;
	top: auto;
	padding: .4rem .7rem;
	border-radius: 999px;
	background: rgba(41, 25, 28, .92);
	color: #fff;
	font-size: .9rem;
}

@media (max-width: 767px) {
	.mim-gallery-lightbox .mfp-container {
		padding: 68px 10px 66px;
	}

	.mim-gallery-lightbox .mfp-content {
		max-width: calc(100vw - 20px);
	}

	.mim-gallery-lightbox img.mfp-img {
		max-height: calc(100vh - 134px) !important;
	}

	.mim-gallery-lightbox button.mfp-close {
		top: 10px;
		right: 10px;
		width: 48px;
		height: 48px;
		font-size: 38px;
	}

	.mim-gallery-lightbox button.mfp-arrow {
		top: auto;
		bottom: 10px;
		width: 54px;
		height: 48px;
		transform: none;
	}

	.mim-gallery-lightbox button.mfp-arrow-left {
		left: 10px;
	}

	.mim-gallery-lightbox button.mfp-arrow-right {
		right: 10px;
	}

	.mim-gallery-lightbox button.mfp-arrow::after {
		font-size: 34px;
	}
}