/* ==========================================================================
   BERGSUCHT-Ruhpolding – Direktbuchung (Zimmersoftware.at)
   Farben und Schrift wie in den bisherigen E-Mail-Vorlagen:
     Beige  #E0DBD3   Gold  #C3AC73   Text  #555555   Schrift  Roboto
   Version 1 – ohne Kenntnis der genauen Seitenstruktur, bitte testen.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap');

/* ---------- Farbvariablen (überschreiben auch die Bootstrap-Standardfarben) ---------- */
:root {
	--bs-font-sans-serif: 'Roboto', Arial, Helvetica, sans-serif;
	--bs-body-font-family: 'Roboto', Arial, Helvetica, sans-serif;
	--bs-body-color: #555555;
	--bs-body-bg: #E0DBD3;
	--bs-primary: #C3AC73;
	--bs-primary-rgb: 195, 172, 115;
	--bs-link-color: #9A8247;
	--bs-link-hover-color: #555555;
	--bs-border-radius: 3px;
	--bs-border-color: #E0DBD3;
}

/* ---------- Grundlayout: beiger Rahmen, weiße Inhaltsflächen ---------- */
html, body {
	background-color: #E0DBD3 !important;
	color: #555555;
	font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
	font-size: 15px;
	line-height: 1.5;
}

.container, .container-fluid, main, #content, .content {
	background-color: transparent;
}

.card, .modal-content, .list-group-item, .accordion-item, .offcanvas,
.dropdown-menu, .popover, .panel, .well {
	background-color: #ffffff !important;
	border: 0 !important;
	border-radius: 3px !important;
	box-shadow: 0 1px 4px rgba(85, 85, 85, 0.12);
}

.card-header, .card-footer, .modal-header, .modal-footer, .panel-heading {
	background-color: #ffffff !important;
	border-color: #E0DBD3 !important;
}

/* ---------- Kopf- und Fußbereich ---------- */
header, .navbar, .header, #header {
	background-color: #ffffff !important;
	border-bottom: 3px solid #C3AC73;
}

footer, .footer, #footer {
	background-color: #E0DBD3 !important;
	color: #555555 !important;
}

/* ---------- Überschriften ---------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
	color: #555555;
	font-weight: 300;
}

h1, h2, .h1, .h2 {
	color: #C3AC73;
}

strong, b, th, label, .form-label {
	font-weight: 700;
}

/* ---------- Links ---------- */
a {
	color: #9A8247;
	text-decoration: underline;
}

a:hover, a:focus {
	color: #555555;
}

/* ---------- Buttons: Gold, beim Darüberfahren dunkelgrau (wie in der Mail) ---------- */
.btn-primary, .btn-success, .btn-info, .btn-warning,
button[type="submit"], input[type="submit"], .btn-book, .btn-buchen {
	background-color: #C3AC73 !important;
	border-color: #C3AC73 !important;
	color: #ffffff !important;
	font-weight: 700;
	border-radius: 3px !important;
	text-decoration: none;
	box-shadow: none !important;
	transition: all 100ms ease-in;
}

.btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-warning:hover,
button[type="submit"]:hover, input[type="submit"]:hover,
.btn-primary:focus, .btn-success:focus, .btn-info:focus, .btn-warning:focus,
.btn-primary:active, .btn-success:active {
	background-color: #555555 !important;
	border-color: #555555 !important;
	color: #ffffff !important;
}

.btn-secondary, .btn-light, .btn-default {
	background-color: #E0DBD3 !important;
	border-color: #E0DBD3 !important;
	color: #555555 !important;
	border-radius: 3px !important;
}

.btn-secondary:hover, .btn-light:hover, .btn-default:hover {
	background-color: #C3AC73 !important;
	border-color: #C3AC73 !important;
	color: #ffffff !important;
}

.btn-outline-primary, .btn-outline-secondary {
	background-color: transparent !important;
	border-color: #C3AC73 !important;
	color: #9A8247 !important;
	border-radius: 3px !important;
}

.btn-outline-primary:hover, .btn-outline-secondary:hover {
	background-color: #C3AC73 !important;
	color: #ffffff !important;
}

/* ---------- Formularfelder ---------- */
.form-control, .form-select, input[type="text"], input[type="email"],
input[type="tel"], input[type="number"], input[type="date"], select, textarea {
	border: 1px solid #E0DBD3;
	border-radius: 3px;
	color: #555555;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
	border-color: #C3AC73 !important;
	box-shadow: 0 0 0 0.2rem rgba(195, 172, 115, 0.25) !important;
	outline: 0;
}

.form-check-input:checked {
	background-color: #C3AC73 !important;
	border-color: #C3AC73 !important;
}

.form-check-input:focus {
	border-color: #C3AC73;
	box-shadow: 0 0 0 0.2rem rgba(195, 172, 115, 0.25);
}

.form-range::-webkit-slider-thumb { background-color: #C3AC73; }
.form-range::-moz-range-thumb { background-color: #C3AC73; }

/* ---------- Tabellen, Listen, Hinweise ---------- */
.table { color: #555555; }
.table > thead > tr > th, .table thead th {
	background-color: #E0DBD3;
	border-color: #E0DBD3;
	color: #555555;
}
.table > tbody > tr > td, .table td { border-color: #E0DBD3; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #f6f4f0; }

.list-group-item.active, .nav-pills .nav-link.active, .page-item.active .page-link,
.dropdown-item.active, .dropdown-item:active {
	background-color: #C3AC73 !important;
	border-color: #C3AC73 !important;
	color: #ffffff !important;
}

.page-link { color: #9A8247; }
.page-link:hover { color: #555555; background-color: #E0DBD3; }

.nav-tabs .nav-link.active {
	color: #555555;
	border-color: #C3AC73 #C3AC73 #fff;
}

.alert { border-radius: 3px; border: 0; }
.alert-info, .alert-primary, .alert-success {
	background-color: #f1ede4;
	color: #555555;
	border-left: 4px solid #C3AC73;
}

.badge, .bg-primary, .bg-success, .bg-info {
	background-color: #C3AC73 !important;
	color: #ffffff !important;
}

.progress-bar { background-color: #C3AC73 !important; }
.text-primary, .text-success { color: #9A8247 !important; }
.border-primary { border-color: #C3AC73 !important; }

/* ---------- Kalender / Datumsauswahl (gängige Bibliotheken) ---------- */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.datepicker td.active, .datepicker td.active:hover,
.daterangepicker td.active, .daterangepicker td.active:hover,
.ui-datepicker .ui-state-active, .ui-state-highlight,
.calendar .selected, .day.selected {
	background-color: #C3AC73 !important;
	border-color: #C3AC73 !important;
	color: #ffffff !important;
}

.daterangepicker td.in-range, .flatpickr-day.inRange {
	background-color: #f1ede4 !important;
	border-color: #f1ede4 !important;
	color: #555555 !important;
}

/* ---------- Mobil ---------- */
@media (max-width: 600px) {
	html, body { font-size: 16px; }
	.btn { width: 100%; }
}