/****************************************************************************
 * customize.css – Projekt: garagerag.ch
 * Basis: Premium Contao Theme
 * Hinweis: Reihenfolge & Struktur beachten
 ****************************************************************************/

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

/* dosis-200 - 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: 'Dosis';
   font-style: normal;
   font-weight: 200;
   src: url('../fonts/googlefonts/dosis-v32-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

/* dosis-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: 'Dosis';
   font-style: normal;
   font-weight: 300;
   src: url('../fonts/googlefonts/dosis-v32-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
 /* source-sans-3-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: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
   src: url('../fonts/googlefonts/sourcesanspro-v22-latin-400.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* source-sans-3-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: 'Source Sans 3';
   font-style: italic;
   font-weight: 400;
   src: url('../fonts/googlefonts/source-sans-3-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* source-sans-3-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: 'Source Sans Pro';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/googlefonts/sourcesanspro-v22-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
 /* source-sans-3-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: 'Source Sans Pro';
   font-style: normal;
   font-weight: 700;
   src: url('../fonts/googlefonts/sourcesanspro-v22-latin-700.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: #4c4c4c;
	--secondColor: #40807e !important;
	--accentColor: #b91b54 !important;
	--CustomColor1: #f7f7f7;
	--CustomColor2: #9a9a9a;
	--white: #fff;
}

.color-lightgray, .color-lightgray p {
	color: #9b9b9b !important;
}

body {
	color: var(--bodyColor);
}


/* =========================================================
	 3. Typografie
   ========================================================= */
h1, .h1,
h2, .h2 {
	font-weight: 200;
}

.content_page h1, .content_page .h1 {
	font-size: 60px;
	line-height: 60px;
}

h1, .h1,
h2, .h2,
h3, .h3 {
	text-transform: uppercase;
}

h2, h3 {
	line-height: 1.2;
}

.datenschutz h2 {
	margin-top: 50px;
}

h3 {
	padding-top: 10px;
}

.ce_accordion .toggler {
	font-weight: normal;
	font-size: 0.9rem;
}


/* =========================================================
	 5. Firmenlogos
   ========================================================= */
.malen .logo a {
	background-image: url(../img/logo_rogantini-maler.svg);
}

.brandschutz .logo a {
	background-image: url(../img/logo_rogantini-brandschutz.svg);
}

.bau-und-schadstoffsanierung .logo a {
	background-image: url(../img/logo_rogantini-recycling-bau-und-schadstoffsanierung.svg);
}


/* =========================================================
	 5. Navigation
   ========================================================= */
.mainmenu ul li a {
	color: var(--white);
	font-size: 1.2rem;
}

.smartmenu-content .subitems_trigger:before {
	/* content: '↓'; */
	content: "\f107";
	font-family: FontAwesome;
	margin-left: 15px;
	transition-duration: 0.3s;
	transition-property: transform;
	display: inline-block;
}

.smartmenu-content .mod_navigation li.open > .subitems_trigger:before {
	/* content: '↑'; */
	content: "\f107";
	font-family: FontAwesome;
	margin-left: 15px;
	transition-duration: 0.3s;
	transition-property: transform;
	display: inline-block;
	transform: rotate(180deg);
}


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

.ce_download_default, .ce_hyperlink a {
	margin-top: 30px;
}

.ce_download_default a, .ce_hyperlink a {
	display: inline-block;
	padding: 20px 40px;
	border-radius: 50px;
	transition: all 0.2s ease-in-out;
}

.ce_download_default a:hover {
	opacity: 0.8;
	transition: all 0.2s ease-in-out;
}

.ce_download a span.size, .ce_download a:after {
	display: none;
}

.ce_download_default a, .ce_hyperlink a {
	line-height: 1.3;
}


/* =========================================================
	 7. Content-Elemente (Contao spezifisch)
   ========================================================= */

/* Header
   _____________________________________ */
.logo a {
	background-image: url('../img/logo_garage-r.svg');
}

.mmenu_trigger {
	right: 20px;
}


/* Main
_____________________________________ */

.ce_headline {
	margin-bottom: 1rem;
}

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

.ls-1 {
	letter-spacing: 1px;
}

.ce_divider_extended.version5 {
	background: var(--CustomColor2);
}

#main p a,
.ce_text_extented a {
	text-decoration: none;
}

#main p a:hover,
.ce_text_extented a:hover {
	text-decoration: underline;
}

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

.ce_leadertext.version1 p {
	line-height: 1.33;
}

.ce_tabs .tabs.horizontal {
	text-align: left;
}

.ce_teambox {
	margin-right: 1%;
	margin-bottom: 1%;
}

.ce_teambox.gray_bg .teambox_inside {
	margin: 0 auto;
}

.ce_teambox a {
	color: var(--accentColor);
}

.ce_teambox a:hover {
	text-decoration: underline;
}

.ce_teambox.gray_bg .teambox_content {
	height: 200px;
}

.ce_teambox.gray_bg .image .overlay {
	display: none;
}

.ce_teambox.gray_bg .teambox_inside {
	background: #efefef;
}

.ce_teambox .function {
	margin-bottom: 0;
}

.ce_download_default .image_container a {
	padding: 0;
	background: none;
	border: 2px solid #eee;
	border-radius: 0;
}

.ce_tabs .image_container {
	text-align: left;
}

.image_container .caption {
	padding: 0;
	background: none;
	color: var(--CustomColor2);
	text-align: left;
}

.ce_tabs .tabs.horizontal li span {
	font-weight: normal;
}

.image_container.float_above + h3 {
	margin-top: 15px;
}


/* 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;
}


/* 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;
}


/* Footer
_____________________________________ */
#footer .inside {
	max-width: none;
	padding: 0;
}

#footer .firmen .image_container {
	width: 195px;
	height: 118px;
	text-align: center;
	vertical-align: middle;
	display: flex;
    align-items: center;
	justify-content: center;
}


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


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

@media screen and (max-width: 980px) {

	#header .mod_article {
		top: 3vw;
	}
	
	#header .mod_article a {
		margin-left: 3vw;
	}
	
	#header .mod_article img {
		height: 9.75vw !important;
	}
	
}


/* Ab Tablet (>= 768px) */
@media screen and (min-width: 768px) {
	.header.original .logo {
		width: 180px;
	}
	
	.smartmenu .smartmenu-trigger {
		transform: scale(1.5);
	}
	
	.smartmenu-content .smartmenu-close:before, .smartmenu-content .smartmenu-close:after {
		height: 2px;
	}
	
	nav.main-navigation a {
	font-size: 1rem;
	padding: 0.8rem 1.2rem;
	}

	.footer {
	text-align: left;
	}
}

/* Bis Tablet (< 768px) */
@media screen and (max-width: 767px) {
	.btn,
	button,
	input[type="submit"] {
	display: block;
	width: 100%;
	text-align: center;
	}
	
	#mmenu .mod_navigation li a {
		line-height: 1.2;
		margin-bottom: 10px;
	}
	
	#mmenu .mod_navigation li ul {
		margin-bottom: 30px;
	}
	
	#mmenu .mod_navigation li ul li a {
		font-size: 1.2rem;
	}
	
	.home #main .boxes .image_container img {
		max-width: none;
		width: 100% !important;
	}
	
	.ce_headline {
		margin-bottom: 10px;
	}
	
	h3 {
		font-size: 1.2rem;
	}
	
	.autogrid_row>.column {
		padding-left: 0;
		padding-right: 0;
	}
	
	.ce_leadertext.version1 p {
		font-size: 1.2rem;
	}
	
	.ce_tabs .tabs.horizontal ul li.active {
		border-radius: 20px;
	}
	
	.ce_teambox {
		width: 100%;
		margin-bottom: 20px;
	}
	
	.ce_teambox.gray_bg .teambox_content {
		height: auto;
	}

	.footer, #footer .adresse {
	text-align: center;
	}
	
	#footer .adresse {
		padding-top: 20px;
	}
	
	#footer .firmen {
		border-top: 1px solid #eee;
		padding-top: 30px;
		margin-top: 20px;
	}
	
	#footer .firmen .ce_image.float-left {
		float: none;
	}
	
	#footer .firmen .image_container {
		width: 100%;
		height: 110px;
	}
	
	#footer h2 {
		font-size: 1.66rem;
	}
}