/*------------------------------------------------------------------
* Version: 0.1
* Author: Simon Rüfenacht
* Website: https://www.sumis.ch
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
# [Import]
------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css");
@import url("https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css");
@import url("https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.min.css");
@import url("https://cdn.jsdelivr.net/npm/leaflet-fullscreen/dist/leaflet.fullscreen.min.css");
@import url("https://cdn.jsdelivr.net/npm/@fancyapps/fancybox/dist/jquery.fancybox.min.css");

/*------------------------------------------------------------------
# [Root / Reset]
------------------------------------------------------------------*/
:root{
	--bs-body-font-family: "Noto Sans",sans-serif;
	--bs-font-sans-serif: "Noto Sans";
	--bs-body-color: #0b0b0b;
	--bs-body-bg: #FAF9F4;
	--ph-header-height: 80px;
	--ph-border-color: #d1cdc4;
	--ph-primary-color: #D5C299;
	--ph-secondary-color: #7D7F7D;
	--ph-accent-color: #C75C5C;
	--ph-color-100: #ede9de;
	--ph-color-200: #D8D4C9;
	--ph-color-900: #6c582c;
	--ph-box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
	--ph-hiking: 20, 133, 133;
	--ph-mountaineering: 102, 51, 153;
	--ph-snowshoe: 0,92,153;
	--ph-skitour: 255,87,154;
	
}

/*------------------------------------------------------------------
# Body
------------------------------------------------------------------*/
html { 
	font-size:15px;
    height: 100%;
}
body {
	font-size:1rem;
    width: 100%;
	text-size-adjust:100%;
}
a, a:visited, a:active{
	text-decoration:none;
}



/*------------------------------------------------------------------
# Layout
------------------------------------------------------------------*/


header{
	background-color: #fff;
	height: var(--ph-header-height);
	position: fixed;
	top: 0;
	width: 100%;
	color: white;
	transition: background-color 0.3s ease;
	z-index:1005;
	background-color: #fff;
	box-shadow: 0px 0px 10px #0000001A;
}
.header-inside{
	height:100%;
}
.header-inside > div{
	width:33.33333%;
}
header .logo img{
	height:50px;
}
header .form-control{
    background-color: #fff;
}
.header-image {
    position: relative;
    width: 100%;
    height: calc(80vh - var(--ph-header-height));
	max-height:1500px;
}
.header-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Scrolled */
header.scrolled {

}
header.scrolled .typeahead{
    background-color: var(--bs-body-bg);
}

#main{
	margin-top: var(--ph-header-height);

}
.content-inside{
	padding:3rem 0;
}
/* Filter */
.filter-wrapper{
	display:flex;
	align-items:center;
	margin-bottom:1.75rem;
}

.inside{
	max-width:1440px;
	margin:0 auto;
}
.inside-lg{
	max-width:1680px;
	margin:0 auto;	
}


/*------------------------------------------------------------------
# NAvigation
------------------------------------------------------------------*/
nav.nav-top ul {
    list-style: none;
    position: relative;
	margin:0;
	padding:0;
	display:flex;
	justify-content: end;
}
nav.nav-top ul li{
	margin-right:0.5rem;
}
nav.nav-top ul li a{
	color: var(--bs-gray-600);
	display:block;
	font-weight:800;
	padding:0 1rem;
}
nav.nav-top ul li a:hover,
nav.nav-top ul li.active{
	color: var(--bs-body-color);
}
nav.nav-top ul li.active a{
	color: var(--bs-body-color);
}

/*------------------------------------------------------------------
# Typogrpahy / Custom
------------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6{
	padding:0;
	margin:0;
}
h1,
h3.accent,
h4{
    font-family: 'Oswald', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: -0.04em;
	color: var(--ph-accent-color);
}
.h1-heading{
	margin-bottom:1.5rem;
}
.h1-heading span.height{
	text-transform: none;
	letter-spacing: 0;
	font-weight:500 !important;
	font-size: 2.25rem;
	margin-left:0.75rem;
	color: var(--ph-secondary-color);
}
.h1-heading a,
.h1-heading a:visited,
.h1-heading a:active{
	color: var(--ph-secondary-color);
}
.h1-heading a:hover{
	color: var(--bs-body-color);
}
h3{
	font-size:2rem !important;
}
h4{
	font-size:1.25rem !important;
}
h3 span{
	text-transform: none;
	letter-spacing: 0;
	font-weight:500 !important;
	font-size: 1.5rem;
	margin-left:0.75rem;
	color: var(--ph-secondary-color);
}

.box-shadow{
	box-shadow: 0px 0px 10px #0000001A;
}
.box-shadow-xs {
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
}
.box-shadow-xs.shadow-hover:hover {
    box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 8px 0px;
}
.text-sm{
	font-size:0.875rem;
}
.text-xs{
	font-size:0.75rem;
}
.text-md{
	font-size:1.125rem;
}
.text-secondary{
	color: var(--ph-secondary-color) !important;
}
.sep {
    display: inline-block;
    margin: 0 0.25rem;
    color: var(--ph-accent-color);
}
.rounded{
	border-radius: var(--bs-border-radius-xl) !important;
}
.rounded-start {
    border-bottom-left-radius: var(--bs-border-radius-xl) !important;
    border-top-left-radius: var(--bs-border-radius-xl) !important;
}
.mdi{
	font-size:16px;
}
.link-hover{
	padding:0.25rem 0.5rem;
	border-radius: var(--bs-border-radius-xl);
}
.link-hover:hover{
	background-color: var(--ph-color-100);
}
.svg-icon-sm{
	width:18px;
}

/* Bilder */
figure{
	position:relative;
}
figure a,
figure a:active,
figure:visited{
	color:#fff !important;
}
figcaption.figure-caption{
	position:absolute;
	bottom:10px;
	right:10px;
	background-color: rgba(0,0,0,0.5);
	color:#fff;
	border-radius: var(--bs-border-radius-xl);
	padding:0.375rem 0.75rem;
}
div.figure-overlay{
	position:absolute;
	bottom:2rem;
	right:2rem;
	width:480px;
	height:25%;
	background-color: #F4F3EE;
	border-radius: var(--bs-border-radius-xl);
	opacity:0.9;
	color: var(--bs-body-color);
}
div.figure-overlay:hover{
	color: #000;
	opacity: 1;
}
.overlay-inside{
	padding:1.5rem;
}
.overlay-inside p{
	margin:0;
}

.overlay-inside h4{
	font-size:1.5rem !important;
}


/*------------------------------------------------------------------
# Karten
------------------------------------------------------------------*/
.leaflet-container {
	font-family: "Noto Sans",sans-serif;
}
.leaflet-container .popup-link{
	color: var(--bs-body-color);
}
.leaflet-container .popup-link strong:hover{
	text-decoration: underline;
}
.leaflet-container .popup-link span{
	color: var(--bs-secondary);	
}
.leaflet-container a {
	color: var(--ph-color-900);
}
.leaflet-container a:hover{
	color: var(--bs-body-color);
}

#map{
	height:640px;
	width:100%;
}
.map-sm{
	height: 100% !important;
}

.profile-box{
	padding:1rem;
	background-color: #fff;
}
.profile-box svg {
  height: auto;
  max-height: 400px;
}

/*------------------------------------------------------------------
# Forms
------------------------------------------------------------------*/

.form-control{
	border-color: var(--ph-border-color);
	border-radius: var(--bs-border-radius-xl);
}
.form-control:focus{
    box-shadow: none;
	outline: none;
    background-color: #fff;
	border-color: var(--ph-secondary-color);
}
/*------------------------------------------------------------------
# Buttons / Dropdown
------------------------------------------------------------------*/
.btn{
	--bs-btn-border-radius: var(--bs-border-radius-xl);
	--bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.625rem;
}
.btn-filter{
	--bs-border-width: 0;
	--bs-btn-bg: var(--ph-color-100);
	--bs-btn-color: var(--ph-secondary-color);
    --bs-btn-hover-bg: var(--ph-color-200);
	--bs-btn-active-bg: var(--ph-color-200);


}
/*------------------------------------------------------------------
# Listgroup
------------------------------------------------------------------*/
.list-group.list-search{
	--bs-list-group-bg: #fff;
}


/*------------------------------------------------------------------
# Components
------------------------------------------------------------------*/

/* Cards */
.ph-card{
	--bs-border-width: 0;
	--bs-card-border-radius: var(--bs-border-radius-xl);
    --bs-card-bg: #fff;	
    --bs-card-inner-border-radius: var(--bs-border-radius-xl);
}


/* Dropdowns */

.dropdown-filter .dropdown-menu,
.dropdown-menu{
	--bs-dropdown-link-color: var(--ph-secondary-color);
    --bs-dropdown-bg: #fff;
	--bs-dropdown-link-hover-bg: var(--ph-color-100);
	--bs-dropdown-link-active-bg: var(--ph-color-100);
    --bs-dropdown-link-active-color: var(--bs-body-color);
	--bs-dropdown-item-padding-y: 0.375rem;
	--bs-dropdown-border-radius: var(--bs-border-radius-xl);
	--bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-header-color: var(--ph-secondary-color);
    box-shadow: var(--ph-box-shadow);
	width:280px;
}
.dropdown-filter .dropdown-toggle::after{
	margin-left:0.5rem;
}

mark {
  background-color: #fdd835; /* Emmental-Gelb */
  padding: 0 2px;
  border-radius: 2px;
}

/*------------------------------------------------------------------
# peakhunters.ch
------------------------------------------------------------------*/
.ph-portrait{
	font-size:1.125rem;
}
.ph-portrait p{
	margin:0;
}
.ph-info{
	padding:1.5rem;
	border-radius: var(--bs-border-radius-xl);
	background-color: rgba(0,0,0,0.0375);
}
.ph-info a,
.ph-info a:visited,
.ph-info a:active{
	color: var(--ph-secondary-color);
}
.ph-info a:hover{
	color: var(--bs-body-color);
}
.ph-peak-entry,
.ph-tour-entry{
	align-items:center;
	background-color: #fff;
	padding:0.75rem 1rem;
	border-radius: var(--bs-border-radius-xl);
}
.ph-peak-entry .ph-peak-icon{
	font-size:1.125rem;
}
.ph-peak-entry .label{
	font-size:0.875rem;
	color: var(--ph-secondary-color);
}
.ph-peak-entry .value{
	font-weight:600;
}
.ph-tour-entry{
	align-items: start;
}
.ph-tour-icon{
	padding-top:2px;
}
.ph-tour-item{
	display:flex;
	align-items:center;
	border-right:1px solid var(--bs-border-color);
	padding-right:0.5rem;
}
.ph-tour-item:last-of-type{
	border:0;
}
.ph-tour-item .bi{
	font-weight:normal;
	color: var(--bs-secondary);
}
.ph-tour-card-icon{
	position:absolute;
	top:15px;
	left:15px;
	font-size:1.5rem;
}
.icon-wrapper {
    border-radius: 50%;
	background-color: rgba(var(--ph-primary-color),0.22);
    overflow: hidden;
    width: 50px;
    height: 50px;
}
.icon-flex, .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-wrapper.icon-light{
	background-color: rgba(255,255,255,0.90);
    width: 40px;
    height: 40px;
}
.text-hiking{
	color: rgba(var(--ph-hiking));
}
.text-mountaineering{
	color: rgba(var(--ph-mountaineering));
}
.text-snowshoe{
	color: rgba(var(--ph-snowshoe));
}
.text-skitour{
	color: rgba(var(--ph-skitour));
}

@media only screen and (max-width : 991.5px) {
	.map-sm{
		height: 400px !important;
	}


}