/****************************************************************************
 * customize.css
 * Projekt: buendner-immobilien.ch
 * Basis: Contao | Premium Contao Themes
 ****************************************************************************/


/****************************************************************************
 * 0. Fonts (lokal)
 ****************************************************************************/
 /* noto-sans-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: 'Noto Sans';
   font-style: normal;
   font-weight: 400;
   src: url('../fonts/noto-sans-v42-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* noto-sans-700 - 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: 'Noto Sans';
   font-style: normal;
   font-weight: 700;
   src: url('../fonts/noto-sans-v42-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* noto-sans-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: 'Noto Sans';
   font-style: italic;
   font-weight: 400;
   src: url('../fonts/noto-sans-v42-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* noto-serif-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: 'Noto Serif';
   font-style: italic;
   font-weight: 400;
   src: url('../fonts/noto-serif-v33-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* roboto-condensed-700 - 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 Condensed';
   font-style: normal;
   font-weight: 700;
   src: url('../fonts/roboto-condensed-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }


/* =========================================================
   1. Reset / Fixes
   ========================================================= */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
}

button {
	-webkit-appearance: none;
}

.autogrid, .autogrid_row>.column:not(.autogrid_row.bg-yellow-gradient>.column) {
	padding-left: 30px;
	padding-right: 30px;
}

.autogrid_wrapper, .autogrid_row {
	margin-left: -30px;
	margin-right: -30px;
}

.content_page #main .mod_article .ce_erlink a {
	padding-bottom: 30px;
}


/* =========================================================
   2. Farbdefinitionen
   ========================================================= */

:root {
	--bodyColor: #3d3f40;
	--secondColor: #fcc02b;
	--accentColor: #0071bb;

	--bodyBackgroundColor: #cfd4d6;
	--bgLight: #d6d6d6;
	--bgDark: #3d3f40;
	--bgBeige: #f5f2e9;

	--white: #ffffff;
	--black: #000000;
	
	--linkarrow: #8c8c8c;
}


/* =========================================================
   3. Typografie
   ========================================================= */

html {
	font-size: 16px;
}

body {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--bodyColor);
}

p {
	margin-bottom: 0.6rem;
}

strong {
	font-weight: 700;
}

a {
	color: var(--accentColor);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--accentColor);
	opacity: 0.8;
}

.ce_hyperlink a, a.btn {
	padding: 0;
	background: none;
	color: var(--accentColor);
	border: none;
	font-weight: 400;
	margin-bottom: 30px;
}

.ce_download_default a {
	background: none;
	padding: 0;
	color: var(--accentColor);
}

.ce_download_default a[href*=".pdf" i]::before {
  content: "📄";
  margin-right: 0.4em;
}

.ce_download a span.size {
	color: var(--accentColor);
	padding-left: 5px;
}

.ce_download a:after {
	display: none;
}

/* Headlines */
h1 {
	font-family: 'Noto Serif', serif;
	font-style: italic;
	font-size: 48px;
	font-weight: 400;
	line-height: 1.3em;
	color: var(--white);
}

.content_page #main h1 {
	padding-left: 30px;
}

h2 {
	font-family: 'Noto Serif', serif;
	font-style: italic;
	font-weight: 400;
	line-height: 1.25;
	padding-top: 20px;
}

h1, h2 {
	margin-bottom: 1rem;
}

h3, h4, h5, h6 {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.03rem;
	margin-bottom: 0.8rem;
}

h6 {
	color: var(--white);
}

h1 { font-size: 3rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.25rem; }

.bg-yellow-gradient .bannertitel p.gross {
	font-size: 230px;
	line-height: 198px;
	font-family: 'Noto Serif', serif;
	font-style: italic;
}

.bg-yellow-gradient .bannertitel p.gross + p {
	padding: 10px 0 12px;
}

.bg-yellow-gradient .bannertitel p {
	font-size: 34px;
	line-height: 34px;
	font-family: 'Noto Serif', serif;
	font-style: italic;
}

.bg-yellow-gradient .bannertitel * {
	color: var(--white);
}

.bg-yellow-gradient .bannerinhalt p.untertitel, .bg-yellow-gradient .bannerinhalt p.klein {
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 0.75px;
	font-family: 'Noto Sans', sans-serif;
	font-weight: bold;
	font-style: inherit;
}

.bg-yellow-gradient .bannerinhalt p.untertitel {
	padding-top: 20px;
}

.bg-yellow-gradient .bannerinhalt p.klein {
	font-weight: normal;
	font-size: 16px;
	line-height: 24px;
	padding-top: 10px;
}

.bg-yellow-gradient .bannerinhalt p {
	font-size: 28px;
	line-height: 36px;
	font-family: 'Noto Serif', serif;
	font-style: italic;
	font-weight: normal;
}

.content_page #main p:not(.bg-yellow-gradient p) {
	margin-top: 1em;
}


/* =========================================================
   4. Header
   ========================================================= */
#header .logo {
	position: relative;
	z-index: 2;
}

#header .logo a, #header .logo a:hover {
	opacity: 1;
}

#kontakt1, #kontakt2 {
	position: absolute;
	height: 170px;
	width: 50%;
	top: 0;
	font-size: 17px;
	font-weight: 400;
	font-style: italic;
	z-index: 1;
}

#kontakt1 {	
	left: 0;
}

#kontakt2 {
	right: 0;
}

#kontakt1 p, #kontakt2 p {
	margin-top: 105px;
	padding-top: 0;
	line-height: 2.5;
	background: url(../img/kontakt_bg.png) repeat-x top left;
}

#kontakt1 p {
	margin-right: 170px;
	padding-right: 35px;
	text-align: right;
}

#kontakt2 p {
	margin-left: 170px;
	padding-left: 35px;
}

#kontakt2 a {
	color: var(--bodyColor);
}
   


/* =========================================================
   5. Navigation
   ========================================================= */

/* Desktop Navigation */
.main-navigation a,
.nav-main a {
	font-family: 'Ubuntu', sans-serif;
	font-size: 1.05rem;
	color: var(--white);
	padding: 0.6rem 0.9rem;
}

.main-navigation a:hover,
.nav-main a:hover {
	color: var(--secondColor);
}

/* Active State */
.main-navigation .active > a,
.nav-main .active > a {
	color: var(--accentColor);
}


/* =========================================================
   6. Buttons & Links
   ========================================================= */

.btn,
button,
input[type="submit"],
input[type="button"] {
	background: var(--bodyColor);
	color: var(--white);
	border-radius: 6px;
	padding: 0.6rem 1.3rem;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
	background: var(--secondColor);
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Phone und Contact Buttons */
#phone-button, #contact-button {
	width: 40px;
	height: auto;
	position: fixed;
	right: 0;
	margin-right: -11px;
	z-index: 9999;
}

#phone-button {
	top: 490px;
}

#contact-button {
	top: 540px;
}

#phone-button a, #phone-button a:visited, #contact-button a, #contact-button a:visited {
	display: block;
	width: 30px;
	height: 40px;
	background-color: var(--accentColor);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.50);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.50);
	box-shadow: 0 0 10px rgba(0,0,0,.50);
	color: var(--white);
	font-weight: bold;
	line-height: 18px;
	text-align: center;
	letter-spacing: 1px;
	text-transform: uppercase;
	border: 1px solid #004e81;
	padding: 10px 3px 5px;
}

#phone-button a {
	font-size: 20px;
}

#contact-button a {
	font-size: 15px;
}


/* =========================================================
   7. Hintergründe
   ========================================================= */

.content_page .column:not(.bg-yellow-gradient .column, #footer .column), .content_page #main .ce_text, .content_page #main .ce_list, .content_page #main .ce_table, .content_page #main .ce_accordion, .content_page #main .ce_code, .content_page #main .ce_hyperlink, .content_page #main .ce_toplink, .content_page #main .ce_image, .content_page #main .ce_download, .content_page #main .ce_downloads, .content_page #main .ce_form {
	background: #fff;
	vertical-align: top;
}

.bg-yellow-gradient {
	background: linear-gradient(128deg, rgba(252,185,20,1) 0%, rgba(252,185,20,1) 45%, rgba(253,202,76,1) 65%, rgba(252,185,21,1) 85%, rgba(252,185,21,1) 100%);
	padding: 20px 20px 16px;
}

.bg-beige {
	background: var(--bgBeige);
}


/* =========================================================
   8. Content-Elemente
   ========================================================= */

/* Artikel */
.mod_article {
	margin-bottom: 3rem;
}

/* Headline-Element */
.ce_headline {
	margin-bottom: 1.2rem;
}

/* Bild */
.ce_image {
	margin-bottom: 2rem;
}

/* Text + Bild Kombinationen */
.ce_text + .ce_image,
.ce_image + .ce_text {
	margin-top: 1.5rem;
}

/* Listen */
.ce_text ul,
.ce_text ol {
	margin: 1rem 0 1.5rem 1.4rem;
}

.ce_text li {
	margin-bottom: 0.4rem;
}

/* Tabellen */
table {
	width: 100%;
	border-collapse: collapse;
	margin: 2rem 0;
}

table th,
table td {
	border: 1px solid #ddd;
	padding: 0.6rem 0.7rem;
	text-align: left;
}

/* Angebote */
.angebote .autogrid_row {
	margin: 0 0 30px;
}

.mod_newsreader #c_left {
	background: var(--white);
	padding-bottom: 30px;
}

.mod_newsreader .ce_gallery {
	background: var(--bgBeige);
}

.mod_newsreader .ce_gallery li .image_container {
	margin: 0 1px 1px 0;
}

.mod_newsreader .ce_image .image_container img {
	min-width: 100%;
}

.mod_newsreader h2 {
	padding-left: 35px;
	margin-top: 0;
}

.mod_newsreader p, .mod_newsreader ul:not(.mod_newsreader .ce_gallery ul) {
	padding-left: 35px;
	padding-right: 35px;
}

.mod_newsreader p.back {
	box-sizing: border-box;
	background-color: #fff;
	color: var(--white);
	cursor: pointer;
	display: inline-block;
	font-family: 'Noto Serif', serif;
	font-style: italic;
	line-height: 70px;
	padding-left: 30px;
	position: relative;
	text-decoration: none;
	width: auto;
	margin-top: 10px;
}

.back a:before {
	content: '\f104';
}

.mod_newslist .layout_latest {
	position: relative;
	margin-bottom: 30px;
	background: var(--white);
}

.mod_newslist .layout_latest .image_container {
	margin-bottom: 0;
}

.mod_newslist .layout_latest h2 a {
	color: var(--bodyColor);
}

.mod_newslist p.more a {
	font-family: 'Noto Serif', serif;
	font-style: italic;
	font-size: 1.25rem;
	color: var(--white);
	cursor: pointer;
	display: inline-block;
	height: 60px;
	width: 220px;
	line-height: 60px;
	background: var(--linkarrow);
	position: relative;
	text-decoration: none;
	padding-left: 15px;
	box-sizing: border-box;
}

.mod_newslist p.more a:after {
	border-bottom: 30px solid transparent;
	border-left: 20px solid var(--linkarrow);
	border-top: 30px solid transparent;
	content: "";
	left: 220px;
	position: absolute;
	top: 0;
	z-index: 100;
}

.mod_newsreader .layout_full {
	position: relative;
}

.verkauft:after {
	width: 200px;
	height: 35px;
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	position: absolute;
	background: var(--accentColor);
	top: -100px;
	left: -100px;
	z-index: 1;
	content: "VERKAUFT";
	text-align: center;
	padding-top: 165px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 24px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}

/* Isotope Gallery & Colorbox Styling */
.ce_gallery .content {
  background: rgba(237,232,224,0.8); /* Thumbnail Hover Overlay */
}

#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;
}


/* =========================================================
   9. Footer
   ========================================================= */

#footer .inside {
	max-width: none;
	padding: 0;
}

#footer .bg-beige h2, #footer .bg-beige p {
	color: var(--bodyColor);
}

#footer .bg-beige a, #footer .bg-beige a:hover:not(#footer .bg-beige .ce_hyperlink a, #stopper a) {
	color: var(--accentColor);
}

.footer,
.site-footer {
	background: var(--bgDark);
	color: var(--white);
	font-size: 0.9rem;
	padding: 2.5rem 0;
}

.footer a,
.site-footer a {
	color: var(--white);
}

.footer a:hover,
.site-footer a:hover {
	color: var(--secondColor);
}

#footer h2 {
	font-size: 28px;
	margin-top: 10px;
}

#footer h5 {
	font-family: 'Noto Serif', serif;
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1;
}

#footer li {
	margin: 0;
	padding: 0;
}

#footer li:before, #footer li:after {
	display: none;
}

.bg-beige #zitat {
	font-family: 'Noto Serif', serif;
	font-style: italic;
	font-size: 22px;
	line-height: 30px;
	padding: 73px 0px 10px 0px;
}

.bg-beige #stopper {
	float: left;
	transform: rotate(-6deg);
	background-color: #0071bb;
	margin: 45px 27px 0 0;
	padding: 0;
	box-shadow: 3px 4px 5px rgba(23,24,27,.4);
}

.bg-beige #stopper p {
	margin: 0;
	padding: 0;
}

.bg-beige #stopper a, .bg-beige #stopper a:visited {
	padding: 20px;
	color: var(--white);
	display: block;
	width: 230px;
	height: 100%;
	font-size: 20px;
	line-height: 28px;
	font-weight: 400;
	text-shadow: 0 -1px 0 #002447;
	text-align: center;
}

.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);
}


/* =========================================================
   10. Utilities
   ========================================================= */

.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }

.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }


/* =========================================================
   11. Responsive
   ========================================================= */

/* Grösser als Seitenlayout */
   @media (min-width: 1240px) {
	   
	   .mod_newslist .layout_latest .image_container.float_left {
		   margin-right: 0;
		   width: 44%;
	   }
	   
	   .mod_newsreader #c_left {
		   width: 730px;
	   }
	   
	   .mod_newsreader #request_detail {
		   width: 410px;
	   }
	   
   }
   
   /* Grösser als Mobile, maximal Seitenlayout */
   @media (max-width: 1239px) and (min-width: 768px) {
	   
	   #kontakt1 p, #kontakt2 p {
		   font-size: 1.3vw;
		   line-height: 4vw;
	   }
	   
	   .mod_newslist .layout_latest .image_container.float_left {
		   margin-right: 10px;
		   width: 41vw;
	   }
	   
	   .mod_newsreader #c_left {
		   width: 59vw;
	   }
	   
	   .mod_newslist h2 {
		   margin-bottom: 0;
	   }
	   
	   .mod_newslist p.more a {
		   scale: calc(100vw / 1000);
	   }
	   
	   .mod_newsreader #request_detail {
		   width: 29vw;
		   padding-right: 15px;
	   }
	   
   }

/* Tablet & größer */
@media (min-width: 768px) {

	body {
		font-size: 1rem;
	}

	.mod_article {
		margin-bottom: 3.5rem;
	}
	
	.mod_newslist .layout_latest {
		padding-right: 5px;
	}
	
	.mod_newsreader #request_detail {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 100;
	}

}

/* Mobile */
@media (max-width: 767px) {

	#kontakt1, #kontakt2 {
		display: none;
	}
	
	.mmenu_trigger .label {
		display: none;
	}
	
	h1 { font-size: 1.9rem; }
	h2 { font-size: 1.6rem; }
	h3 { font-size: 1.35rem; }

	.btn,
	button,
	input[type="submit"] {
		width: 100%;
		text-align: center;
	}
	
	.content_page #main p:not(.bg-yellow-gradient p, .mod_newslist p) {
		padding: 0 20px;
	}
	
	.mod_newslist .layout_latest .image_container {
		margin-bottom: 30px;
	}
	
	.mod_newslist .layout_latest > *:not(.mod_newslist .layout_latest .image_container) {
		padding: 0 20px;
	}
	
	.image_container.float_left {
		width: 100%;
		float: none;
		margin-right: 0;
	}
	
	.image_container.float_left a, .image_container.float_left img {
		width: 100%;
		height: auto;
	}
	
	.mod_newslist p.more a {
		margin-bottom: 20px;
	}
	
	.mod_newsreader #c_left {
		width: 100%;
	}
	
	.ce_gallery .image_container {
		aspect-ratio: 1;
	}
	
	.ce_gallery .image_container img {
		width: 100%;
		height: 100%;
		object-fit: cover;    /* Das Bild füllt das DIV proportional aus */
		display: block;  
	}
	
	.mod_newsreader h2 {
		padding-left: 20px;
	}

	.footer,
	.site-footer {
		text-align: center;
	}
	
}