/****************************************************************************
 * customize.css – Projekt: WOHNEN-MULIN.CH
 * Basis: Premium Contao Theme
 * Hinweis: Reihenfolge & Struktur beachten
 ****************************************************************************/

/****************************************************************************
 * 0. Lokale Fonts (Google Fonts Download z. B. über google-webfonts-helper)
 ****************************************************************************/

/* big-shoulders-500 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Big Shoulders';
   font-style: normal;
   font-weight: 500;
   src: url('../fonts/big-shoulders-v4-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* roboto-300 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
   src: url('../fonts/roboto-v50-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* roboto-regular - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: url('../fonts/roboto-v50-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* roboto-italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Roboto';
   font-style: italic;
   font-weight: 400;
   src: url('../fonts/roboto-v50-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* roboto-500 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 500;
   src: url('../fonts/roboto-v50-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* roboto-600 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 600;
   src: url('../fonts/roboto-v50-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }


/* =========================================================
	 1. Reset / Fixes
   ========================================================= */
html, body {
	scroll-behavior: smooth;
}
button {
	-webkit-appearance: none;
}


/* =========================================================
	 2. Farbdefinitionen (Projektfarben)
   ========================================================= */
:root {
	--bodyColor: #273342;
	--secondColor: #c7c3c0;
	--accentColor: #9a8643;
	--bgColor1: #c7c3c0;
	--bgColor2: #5b6c79;
	--white: #fff;
	--headlineColor: #a59d97;
}


/* =========================================================
	 3. Typografie
   ========================================================= */
.coming_soon h1, .coming_soon h2 {
	   color: #fff;
   }

html {
	font-size: 16px;
}

body {
	font-size: 1rem;
	font-family: 'Roboto';
	line-height: 1.6;
	color: var(--bodyColor);
}

h1, .h1 {
	font-family: 'Big Shoulders';
	font-weight: 500;
	line-height: 1.2;
	color: var(--headlineColor);
	text-transform: uppercase;
	font-size: 4.266rem;
	letter-spacing: 1px;
	margin-bottom: 75px;
}

h2, h3, h4, h5, h6 {
	font-family: 'Roboto';
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.05rem;
	color: var(--bodyColor);
}

h1 { font-size: 4.266rem; }
h2 { font-size: 2.133rem; }
h3 { font-size: 1rem; }

.home h1, .ce_leadertext.version1 p {
	font-family: 'Roboto';
	font-weight: 300;
	font-size: 1.6rem;
	line-height: 2.33rem;
	text-transform: none;
	margin-bottom: 1.2rem;
}

.home h1, .bg-customColor2 .ce_leadertext.version1 p {
	color: var(--white);
}

.content_page h1 {
	margin-top: 20px;
}

.ce_hyperlink a, a.btn, .ce_download_default a {
	font-family: 'Big Shoulders';
	font-weight: 500;
	font-size: 1.733rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 0;
	display: inline-block;
}

.ce_download a span.size {
	padding-left: 5px;
}

.ce_download a:after {
	display: none;
}

h2, h3 {
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--headlineColor);
}

h2:not(.ce_text_imagebox h2) {
	margin-top: 6rem;
}

h3 {
	margin-top: 3rem;
}

.coming_soon h1 {
	font-family: 'Roboto';
	font-weight: 500;
	font-size: 2rem;
	line-height: 2.33rem;
	text-transform: uppercase;
	letter-spacing: 0.15rem;
}

.coming_soon h2 {
	font-size: 1.33rem;
	letter-spacing: 0.1rem;
}


/* =========================================================
	 4. Navigation
   ========================================================= */
.header.original .mainmenu ul li a, .header.original .mainmenu ul li a.active {
	color: var(--white);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.07rem;
}

.header.original .mainmenu ul li a.active {
	border-bottom: 1px solid var(--white);	
}


/* =========================================================
	 5. Buttons & Links
   ========================================================= */
#main .ce_text a, #main .ce_text p a {
	color: var(--accentColor);
	text-decoration: none;
}


/* =========================================================
	 6. Content-Elemente (Contao spezifisch)
   ========================================================= */
.ce_bgimage.bg-nocolor {
	background: #fff;
}

.home .ce_bgimage:before {
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 90%);
	top: 0;
	left: 0;
	width: 100%;
	height: 300px;
	z-index: 1;
	visibility: visible;
	margin: 0 auto;
	position: relative;
}

.content_page .ce_bgimage:before {
	background: linear-gradient(0deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.3) 90%);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	visibility: visible;
	max-width: 1274px;
	margin: 0 auto;
	position: relative;
}

table {
	border-collapse: collapse;
	width: 100%;
}
table th, table td {
	border: 1px solid #ddd;
	padding: 0.6rem;
}

.abdunklung .ce_bgimage-image:before {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.2);
	content: '';
}

.ce_leadertext.version1 {
	max-width: 900px;
}

.ce_text_imagebox {
	background-color: var(--bodyColor);
}

.ce_text_imagebox a .ce_text_imagebox_image:before {
	width: 100%;
	height: 100%;
	position: absolute;
	content: '';
	background: rgba(0,0,0,0.2);
	z-index: 9;
}

.abbr-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  max-width: 630px;
}

.abbr-list dt {
  font-weight: 600;
  white-space: nowrap;
}

.abbr-list dd {
  margin: 0;
}

.format-p-small dt, .format-p-small dd {
	font-size: 0.8rem;
}

span.red {
	margin-left: -0.15em;
}

.pl-xxxs {
	padding-left: 8px;
}

.small a {
	font-size: 1.2rem;
	padding: 20px 40px;
}

.ce_authorbox_inside {
	background: #edebea;
}

.ce_iconbox.default:hover .image_container, .ce_iconbox.default:hover i {
	top: 0;
}

.image_container .caption {
	padding: 0;
	background: none;
	color: var(--bodyColor);
}


/* Form
_______________________________________________________*/
form fieldset legend {
	background: none;
	color: #000;
}

form .checkbox_container span, form .widget-radio span {
	float: left;
	margin-right: 15px;
}

button.submit {
	text-transform: none;
	display: inline-block;
	width: 230px;
	height: auto;
	padding: 20px;
	font-family: 'Big Shoulders';
	font-weight: 500;
	font-size: 1.333rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--white);
	border: none;
	border-radius: 0;
	background: var(--accentColor);
}


/* Gallery & Colorbox
_______________________________________________________*/
.ce_gallery .swiper-container .swiper-pagination {
	display: none;
}

.swiper-button-next, .swiper-button-prev {
	color: #fff;
}

.ce_gallery .image_container i.fa.fa-plus-circle:before, .ce_gallery .image_container i.fa.fa-plus-circle:after {
	height: 2px;
}

.ce_gallery .content {
  background: rgba(39,51,66, 0.8); /* Thumbnail Hover Overlay */
}

#cboxTitle {
	left: 4px;
}

#cboxOverlay {
  background: #171310; /* Hintergrundfarbe Colorbox */
  opacity: 0.85 !important; /* Hintergrundopazität Colorbox */
}

#colorbox, #colorbox * {
  overflow: visible !important;
}

#cboxContent {
  position: relative !important;
  background: transparent;
}

#cboxLoadedContent {
  border: 5px solid rgba(0,0,0,0);
  background: transparent;
}

#cboxCurrent {
  display: none !important;
}

#cboxClose {
  top: -13px;
  background: url(../img/colorbox-controls.png) no-repeat top center;
}

#cboxPrevious {
  background: url(../img/colorbox-controls.png) no-repeat top left;
}

#cboxPrevious:hover {
  background-position: left -66px !important;
}

#cboxNext {
  background: url(../img/colorbox-controls.png) no-repeat top right;
}

#cboxNext:hover {
  background-position: right -66px !important;
}

#cboxPrevious,
#cboxNext {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999; /* sicherstellen, dass sie über dem Bild liegen */
}

#cboxPrevious {
  left: -12px; /* Abstand nach links – anpassen je nach Bedarf */
}

#cboxNext {
  right: -12px; /* Abstand nach rechts – anpassen je nach Bedarf */
}

#cboxPrevious, #cboxNext {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#cboxPrevious:focus, #cboxNext:focus {
  outline: none;
}


/* OpenStreetMap
_______________________________________________________*/
#main .overlay {
  background:transparent;
  position:absolute;
  width: 100%;
  height: 650px;
  top: 650px;
  margin-top: -650px;
  z-index: 999;
}

#main #map {
  width: 100%;
  height: 650px;
  margin-bottom: -10px; /* entfernt Abstand unten */
}

#main #map .leaflet-tile-pane {
  filter: grayscale(100%); /* Graustufen */
}

#main .leaflet-container a {
  color: var(--basicColor) !important;
}


/* =========================================================
	 7. Footer
   ========================================================= */
.footer {
	background: var(--color-dark);
	color: #fff;
	font-size: 0.9rem;
	padding: 2rem 0;
}
#footer a {
	color: var(--color-light) !important;
}
#footer a:hover {
	color: var(--secondColor) !important;
}

#footer {
	font-size: 1.2rem;
}

#footer p {
	margin-top: 20px;
}

#footer .h5 {
	font-size: 1.6rem;
	line-height: 2.33;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom: 5px;
}

#footer .ce_divider_extended.version3 {
	background: #485565;
}

#footer .ce_text p a:hover {
	color: var(--white) !important;
}

.top-link {
	background: rgba(255,255,255,0.8);
	transition: all .3s ease-in-out;
	-webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1); 
	box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
	backdrop-filter: blur(3px);
}

.top-link:hover {
	background: rgba(255,255,255,1);
	transition: all .3s ease-in-out;
}

.top-link a {
	font-size: 18px;
}

.top-link a i {
	color: #000;
}

.top-link .progress-ring circle {
	stroke: var(--bg-customColor1);
}

#bottom {
	background: #131921
}

#bottom .inside {
	text-align: center;
}

#bottom .inside * {
	font-weight: 600;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	color: #65696e;
}

#bottom .inside a:hover {
	text-decoration: none;
	color: var(--white);
	border: none;
}


/* =========================================================
	 8. Utilities / Helferklassen
   ========================================================= */
.text-center { text-align: center !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mb--10 { margin-bottom: -10px !important; }


/* =========================================================
	 9. Responsive Anpassungen
   ========================================================= */

/* Ab Satzspiegel (>= 1200px) */
@media (min-width: 1200px) { 
	
	#slider .ce_bgimage {
		height: 850px;
	}
	
	.home #slider .ce_bgimage {
		/* height: 850px; */
		height: 72vw;
	}
	
}

/* Bis Satzspiegel (>= 1199px) */
@media (max-width: 1199px) { 
	
	#slider .ce_bgimage {
		height: 67vw;
	}
	
	.home #slider .ce_bgimage {
		height: 72vw;
	}
	
}

/*  Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
	
	.grid-iconboxes.mb-xs {
		margin-bottom: 0 !important;
	}
	
	.grid-iconboxes .ce_iconbox {
		padding-bottom: 30px !important;
	}
}


/* Ab Tablet (>= 768px) */
@media (min-width: 768px) {
	nav.main-navigation a {
	font-size: 1rem;
	padding: 0.8rem 1.2rem;
	}

	.footer {
	text-align: left;
	}
}

/* Bis Tablet (< 768px) */
@media (max-width: 767px) {
	body {
		font-size: 18px;
	}
	
	.mod_article:not(.fullwidth) > .container {
		padding-top: 20px;
	}
	
	.btn,
	button,
	input[type="submit"] {
	display: block;
	width: 100%;
	text-align: center;
	}
	
	h1, .h1 {
		font-size: 2.133rem;
		line-height: 1.3;
		margin-bottom: 20px;
	}
	
	.home .h1 {
		padding-top: 20px;
		hyphens: none;
		-webkit-hyphens: none;
	}
	
	h2 {
		margin-top: 3rem;
		font-size: 1.33rem;
	}

	h2:not(.ce_text_imagebox h2) {
		margin-top: 20px;
	}
	
	h3 {
		margin-top: 1.5rem;
		font-size: 1rem;
	}

	.home h1, .ce_leadertext.version1 p {
		font-size: 1.5rem;
	}
	
	.header .logo, .stickyheader .header .logo {
		width: 200px;
	}
	
	.ce_iconbox {
		margin-left: 20px;
		margin-right: 20px;
	}
	
	.home .imageteaser .column {
		margin-bottom: 0;
	}
	
	.home .imageteaser .ce_text_imagebox:hover a:hover {
		transform: translate(0,0);
		-webkit-transform: translate(0,0);
	}

	.footer {
	text-align: center;
	}
	
	#footer .h5 {
		line-height: 1.33;
		margin: 10px 0;
	}
	
	#footer .image_container {
		max-width: 80%
	}
	
	#mmenu {
		top: 0 !important;
		height: 100% !important;
	}
	
	#mmenu #mmenu_middle {
		padding: 140px 10vw 0;
	}
	
	#mmenu .mod_navigation li a {
		font-size: 24px;
		line-height: 2.3;
		letter-spacing: 0.1rem;
	}
}