@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
	--backgroundImg: url('../../custom/karlo/img/background.jpg');
	--headerImg: url('../../custom/karlo/img/header.jpg');
	--leadColor: #7f5539;
	--darkColor: #1a2631;
	--lightColor: #6f8792;
	--lighterColor: #a9bcc3;
	--lightestColor: #f8f0e5;
	--sandColor: #e5bb76;
	--seaFoamColor: #d4dfde;
	--surfaceColor: rgba(18, 28, 35, 0.74);
	--surfaceStrong: rgba(11, 18, 24, 0.9);
	--surfaceSoft: rgba(255, 231, 194, 0.1);
	--boxContentBGColor: rgba(255, 245, 228, 0.08);
	--borderColor: rgba(229, 187, 118, 0.22);
	--shadowSoft: 0 24px 70px rgba(5, 10, 14, 0.34);
	--errorColor: #ffd2d2;
	--fontColor: #f8f1e7;
	--fontFamily: 'Manrope', 'Segoe UI', sans-serif;
	--fontDisplay: 'Cormorant Garamond', Georgia, serif;
	--fontNormal: clamp(16px, 1.3vw, 18px);
	--fontBig: clamp(18px, 1.8vw, 24px);
	--fontBigger: clamp(28px, 4vw, 52px);
	--fontHuge: clamp(38px, 7vw, 86px);
	--h2fontSize: clamp(18px, 1.8vw, 24px);
	--layOutAlign: left;
}

.bookingItem {
	background: rgba(255,255,255, 0.18);
	border-radius: 18px;
	border: 1px solid var(--borderColor);
	cursor: pointer;
	box-shadow: var(--shadowSoft);
}

.bookingItem:hover {
	background: rgba(255,255,255, 0.24);
}

.bookingItemOwner {
	border-width: 1px;
	border-style: solid;
}

.bookingItemOwner-og {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--shadowSoft);
}

.bookingItemOwner-ug {
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1), var(--shadowSoft);
}

.bookingItemOwner-geheimtipp {
	border-color: rgba(215, 171, 73, 0.72);
	background: rgba(215, 171, 73, 0.16);
}

.bookingItemOwner-novasol {
	border-color: rgba(211, 94, 86, 0.72);
	background: rgba(211, 94, 86, 0.15);
}

.bookingItemOwner-die_katt {
	border-color: rgba(116, 126, 220, 0.72);
	background: rgba(116, 126, 220, 0.15);
}

.bookingItemOwner-sonstiges {
	border-color: rgba(121, 134, 146, 0.72);
	background: rgba(121, 134, 146, 0.16);
}

.bookingItemCell {
	min-width: 280px;
	padding: 5px;
}

.bookingItemLabel{
	min-width: 110px;
	text-align: center;
	vertical-align: middle;
	border-right: 1px solid black;	
}

.scrollList {
	max-height: 700px;
	width: min(410px, 100%);
}

.objPreview{
	width: 100%;
}

.objPreviewCell {
	padding: 25px;
}

.objPreviewBox {	
	transition: 0.5s;
	background: rgba(255,255,255, 0.2);
	border-radius: 20px;
	border: 1px solid var(--fontColor);
}

.objPreviewBox:hover {
	background: rgba(255,255,255, 0.3);
}

.objPreviewImg{
	height: 125px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.objPreviewTxt{
	padding: 10px;
}