/*
Theme Name: Pit Theme - Child pit team
Theme URI: http://www.pitteam.ch
Author: pit team GmbH
Author URI: http://www.pitteam.ch
Template: pit-theme
Description: Child Theme f&uuml;r pit team GmbH. <br>Erstellung: Dezember 2020. <br>&Uuml;berarbeitung Juni 2021.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: pit-theme-child-pit-team
*/




/* Ab hier Styles fuer das Child Theme */




/*--------------------------------------------------------------
	Header Reihenfolge aendern
----------------------------------------------------------------*/

		@media (min-width:782px) {
		/* ab Medium */
			.wrapper {
				display: -webkit-box;  display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* or inline-flex */
				flex-direction: column;
				}
			.wrapper > * {
				order: 10;
				}
			.wrapper > #headerstart,
			.wrapper > .slider-wrap {
				order: 1;
				}
			.wrapper > #navbar {
				order: 2;
				}
			.wrapper > .nav-triangle {
				order: 3;
				}
			.wrapper > #scroll-to-start {
				order: 4;
				}
		}



/* --- Z-Index (Ebenen) der Headerelemente anpassen --- */

#headerstart,
.slider-wrap {
	z-index: 3 !important;
	}
.nav-triangle {
	z-index: 2 !important;
	}
.nav-title {
	z-index: 2;
	}




/*--------------------------------------------------------------
	HEADERSTART & HEADERBILD
----------------------------------------------------------------*/

/* --- Groesse und Form aendern --- */
#headerstart,
.slider-wrap {
	min-height: 3rem;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: 0;
	}
#headerstart.with-img,
.slider-wrap {
	background-color: var(--color-general-bg);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100.1%);
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100.1%);
	}

		@media (min-width:782px) {
		/* ab Medium */
			#headerstart,
			.slider-wrap {
				min-height: calc(5vw + 1.5rem);
				margin-bottom: calc(-5vw - 1.5rem) !important;
				}
			}
		@media (min-width:1210px) {
		/* ab Large */
			#headerstart,
			.slider-wrap {
				min-height: calc(5vw + 2.5rem);
				margin-bottom: calc(-5vw - 2.5rem) !important;
				}
		}



/* --- Headerstart Home --- */
.vheight-custom { 
	height: 95vh !important; /* Use vh as a fallback for browsers that do not support Custom Properties */
	height: calc(var(--vh, 1vh) * 95) !important;
	}

		@media (max-width:781px) {
		/* bis Medium */
			.vheight-custom {
				height: 95vh !important; /* Use vh as a fallback for browsers that do not support Custom Properties */
				height: calc(var(--vh, 1vh) * 95) !important;
				}
		}



/* --- Headerstart Beitragsbild --- */
.with-img .headerimg {
	height: 12vw;
	}

		@media (max-width: 1100px) {
		/* bis Medium */
			.with-img .headerimg { height: 16rem; }
		}
		@media (max-width:781px) {
		/* bis Small */
			.with-img .headerimg { height: 8.5rem; }
		}




/* ----------------------------------
	HEADERTEXT statisches Bild & Homeslider
---------------------------------- */

.headertext-home.headertext-full .wp-block-cover__inner-container {
	width: 85% !important;
	max-width: 85% !important;
	margin-top: var(--spacer-text) !important;
	margin-bottom: var(--spacer-text) !important;
	}

		@media not print and (max-width:781px) {
			.headertext-home.headertext-full .wp-block-cover__inner-container {
				margin-right: auto !important;
				margin-left: auto !important;
				}
			}
		@media (min-width:782px) {
			.headertext-home.headertext-full .wp-block-cover__inner-container {
				width: 70% !important;
				max-width: 600px !important;
				}
			}
		@media (min-width:1210px) {
			.headertext-home.headertext-full .wp-block-cover__inner-container {
				width: 50% !important;
				max-width: 600px !important;
				}
			.headertext-home.headertext-full .wp-block-cover.is-style-height-full {
				padding: var(--spacer-big) calc(50vw - 550px) !important;
				}
			}


/* --- Headerstart Homeslider --- */
.slider-wrap {
	background: var(--color-general-bg);
	}

/* --- Headerstart Arrow --- */
.headertext-home.headertext-full .wp-block-cover__inner-container .header-arrow-link {
	width: 100%;
	height: 4rem;
	display: inline-block;
	position: relative;
	z-index: 1099;
	}

/* --- Headerstart Homeslider Slide Bullets --- */
.slide_buttons {
	display: none;
	}


/* --- dreieckige Flaeche unterhalb Logo und Nav > STICKY  --- */
.nav-triangle {
	height: 3rem;
	display: block;
	margin-top: calc(-3rem - 5vw);
	margin-bottom: 5vw;
	background: #2a2a2a;
	z-index: 2 !important;
	opacity: 0.85;
	position: sticky !important;
	top: 0 !important;
	}

		@media (min-width:782px) {
		/* ab Medium */
			.nav-triangle {
				height: calc(5vw + 2.5rem);
				margin-top: calc(-5vw - 2.5rem);
				margin-bottom: 0;
				background-color: transparent;
				background-image: url(assets/img/ie-triangle-bg.png);
				background-repeat: no-repeat;
				background-size: 100% auto;	
				background-position: bottom center;
				}
			}
		@media (min-width:782px) and (max-width:1209px) {
			.nav-triangle {
				height: calc(5vw + 1.5rem);
				margin-top: calc(-5vw - 1.5rem);
				}
			}
		@media print {
			.nav-triangle {
				position: absolute !important;
				}
			}




/* ----------------------------------
	Logo
---------------------------------- */

/* --- Groesse --- */
.nav-title img {
	position: absolute;
	top: 15%;
	bottom: 15%;
	width: 100%;
	height: 70%;
	object-fit: contain;
	object-position: 0 0;
	}

		@media (min-width:782px) {
			.navbar-home .nav > .nav-header > .nav-title { top: -1rem; }
			.header-change .nav > .nav-header > .nav-title { top: 0; }
			.navbar-home .nav-title img {
				top: 0%;
				bottom: 20%;
				height: 80%;
				}
			.header-change .nav-title img,
			.nav-title img {
				top: 10%;
				bottom: 10%;
				height: 80%;
				}
			}
		@media (min-width:1210px) {
			.navbar-home .nav > .nav-header > .nav-title { top: 0; }
			.nav > .nav-header > .nav-title { top: 0.5rem; }
			.header-change .nav > .nav-header > .nav-title { top: 0.5rem; }
			.navbar-home .nav-title img {
				top: 0%;
				bottom: 35%;
				height: 65%;
				}
			.header-change .nav-title img,
			.nav-title img {
				top: 20%;
				bottom: 10%;
				height: 70%;
				}
			}
		@media (min-width:1760px) {
			.navbar-home .nav > .nav-header > .nav-title { top: 0; }
			.nav > .nav-header > .nav-title { top: 1rem; }
			.header-change .nav > .nav-header > .nav-title { top: 1rem; }
			.navbar-home .nav-title img {
				top: 0%;
				bottom: 20%;
				height: 80%;
				}
			.header-change .nav-title img,
			.nav-title img {
				top: 20%;
				bottom: 0%;
				height: 80%;
				}
			}
		@media (min-width:2000px) {
			.navbar-home .nav > .nav-header > .nav-title { top: 0; }
			.nav > .nav-header > .nav-title { top: 2rem; }
			.header-change .nav > .nav-header > .nav-title { top: 2rem; }
			.navbar-home .nav-title img {
				top: 0%;
				bottom: 0%;
				height: 100%;
				}
			.header-change .nav-title img,
			.nav-title img {
				top: 0%;
				bottom: 0%;
				height: 100%;
				}
			.nav > .nav-header > .nav-title {
				width: 25rem;
				height: 5.5rem;
				line-height: 5.5rem;
				}
			#navbar.header-change .nav > .nav-header > .nav-title {
				height: 4.5rem;
				line-height: 4.5rem;
				}
			}


/* --- Bildabdunklung unten (fuer pit-Logo) --- */
.slider_gradient_bottom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30%;
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,0.3) 10%, rgba(0,0,0,0) 100%);
	}




/* ----------------------------------
	Scroll to Start
---------------------------------- */

/* ohne Bild */
#scroll-to-start {
	height: var(--spacer-big);
    margin-top: 0;
	margin-bottom: 0;
	}

		@media (max-width:781px) {
		/* bis Medium */
			#scroll-to-start {
				height: 3rem;
				margin-top: 0;
				}
			#headerstart.with-img ~ #scroll-to-start,
			.slider-wrap ~ #scroll-to-start {
				position: relative;
				z-index: 5;
				}
			#headerstart.with-img ~ #scroll-to-start:after,
			.slider-wrap ~ #scroll-to-start:after {
				content: "";
				width: 50%;
				height: 8px;
				background: var(--color-accent);
			-webkit-mask-image: url(assets/img/brush-navigation.png);
			-webkit-mask-size: 102% 100%;
			mask-image: url(assets/img/brush-navigation.png);
			mask-size: 102% 100%;
				background-color: var(--color-accent);
				position: absolute;
				top: calc(-5vw - 4px);
				right: 0;
				transform: rotate(-2.862deg) skew(-2.862deg);
				transform-origin: 100% 0%;
				}
			}




/* ----------------------------------
	STICKY NAVBAR
---------------------------------- */

#navbar::before {
	content: none;
	}

#navbar, 
#navbar.navbar-home,
#navbar.header-change {
	height: calc(5vw + 2.5rem);
	margin-top: 0;
	margin-bottom: 0;
	/* ------------------------------------------------------------------------------------------------------ border: 1px dashed yellow; */
	}
#navbar.header-change {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	}
		@media (max-width:781px) {
		/* bis Medium */
			#navbar { height: 3.0rem; }
			#navbar.navbar-home { height: 5.0rem; }
			#navbar.header-change { height: 3.0rem; background-color: inherit; }
			}

		@media (min-width:782px) and (max-width:1209px) {
			#navbar, 
			#navbar.navbar-home, 
			#navbar.header-change { 
				height: calc(5vw + 1.5rem);
				}
			}




/* --------------------------------------------------------------------
	MOBILE-NAVIGATION 
	mit Burger-Menu
-------------------------------------------------------------------- */

		@media (max-width:781px) {
			.nav > .nav-links {
				background-color: var(--color-footer-bg);
				-webkit-box-shadow: 0px -10px 30px 0px rgba(0,0,0,0.2);
				-moz-box-shadow: 0px -10px 30px 0px rgba(0,0,0,0.2);
				box-shadow: 0px -10px 30px 0px rgba(0,0,0,0.2);
				}
			nav.hauptnav .sub-menu li > a {
				opacity: 0.5;
				}
			nav.hauptnav .current_page_item > a, 
			nav.hauptnav .current_page_ancestor > a, 
			nav.hauptnav li.current_page_item > a, 
			nav.hauptnav li.current-page-ancestor > a, 
			nav.hauptnav li.current-menu-item > a, 
			nav.hauptnav li.current-menu-ancestor > a, 
			nav.hauptnav li.current-menu-parent > a, 
			nav.hauptnav li.current-post-parent > a, 
			nav.hauptnav li.current-category-ancestor > a {
				color: var(--color-accent);
				}
			nav.hauptnav .sub-menu .current_page_item > a, 
			nav.hauptnav .sub-menu .current_page_ancestor > a, 
			nav.hauptnav .sub-menu li.current_page_item > a, 
			nav.hauptnav .sub-menu li.current-page-ancestor > a, 
			nav.hauptnav .sub-menu li.current-menu-item > a, 
			nav.hauptnav .sub-menu li.current-menu-ancestor > a, 
			nav.hauptnav .sub-menu li.current-menu-parent > a, 
			nav.hauptnav .sub-menu li.current-post-parent > a, 
			nav.hauptnav .sub-menu li.current-category-ancestor > a {
				color: var(--color-accent);
				}
		}




/* --------------------------------------------------------------------
	DESKTOP-NAVIGATION
	mit aufklappbarer Subnav
-------------------------------------------------------------------- */

		@media (min-width:782px) {
			.nav {
				position: inherit; 
				}
			.nav > .nav-links {
				right: 0;
				}
			#navbar {
				position: sticky !important;
				top: 0 !important;
				}
			#navbar.header-change {
				background-color: transparent;
				}
			#navbar .hauptnav {
				height: calc(5vw + 3.5rem);
				width: 100vw;
				position: relative;
				top: 0;
				right: 0;
				}
			#navbar .menu-main-menu-container {
				display: block;
				padding-right: 5vw;
				padding-left: 1rem;
				position: absolute;
				right: 0;
				top: 0;
				transform: rotate(-2.862deg) skew(-2.862deg);
				transform-origin: top right;
				}
			#navbar .menu-main-menu-container:before {
				content: "";
				display: block;
			-webkit-mask-image: url(assets/img/brush-navigation.png);
			mask-image: url(assets/img/brush-navigation.png);
			-webkit-mask-size: 100% 100%;
			mask-size: 100% 100%;
				background-color: var(--color-accent);
				width: 100%;
				height: 100%;
				position: absolute;
				right: 0;
				top: 0;
				}
			nav.hauptnav ul a {
				line-height: 2.5rem;
				padding: 0 0.9rem 0 0.9rem;
				}
			nav.hauptnav ul ul {
				top: 2.5rem;
				background-color: rgba(45,45,45,0.85);
				}
			nav.hauptnav ul ul a:hover {
				color: var(--color-accent) !important;
				}
			.navbar-transparent nav.hauptnav ul ul .current_page_item > a, 
			.navbar-transparent nav.hauptnav ul ul .current_page_ancestor > a, 
			.navbar-transparent nav.hauptnav ul ul li.current_page_item > a, 
			.navbar-transparent nav.hauptnav ul ul li.current-page-ancestor > a, 
			.navbar-transparent nav.hauptnav ul ul li.current-menu-item > a, 
			.navbar-transparent nav.hauptnav ul ul li.current-menu-ancestor > a, 
			.navbar-transparent nav.hauptnav ul ul li.current-menu-parent > a, 
			.navbar-transparent nav.hauptnav ul ul li.current-post-parent > a, 
			.navbar-transparent nav.hauptnav ul ul li.current-category-ancestor > a {
				color: var(--color-accent);
				}
		}

		@media (min-width:1210px) {
		/* ab Large */
			#navbar .menu-main-menu-container { 
				padding-right: 10vw;
				padding-left: 2rem;
				}
			nav.hauptnav ul a {
				line-height: 3.5rem;
				padding: 0 1.4rem 0 1.4rem;
				}
			nav.hauptnav ul ul {
				top: 3.5rem;
				}
		}

		@media (min-width:1760px) {
		/* ab X-Large */
			#navbar .hauptnav { 
				right: -4rem; 
				}
			nav.hauptnav ul a {
				font-size: 1.1em;
				}
		}





/* -------------------------------------------------------------------------- */
/*	Toggle Search
/* -------------------------------------------------------------------------- */

/* --- Such-Icon Desktop-Menu --- */

		@media (min-width:782px) {
			#toggle-search {
				padding: 0 0 0 0.9rem;
				}
			.search-icon {
				height: 2.5rem !important;
				mask-position: center 48%;
				}
			}
		@media (min-width:1210px) {
			/* Desktop klein */	
			#toggle-search {
				padding: 0 0 0 1.4rem;
				}
			.search-icon {
				height: 3.5rem !important;
				}
			}




/* ----------------------------------
	ARCHIV
---------------------------------- */

.archive-list .archive-item {
	margin-top: var(--spacer-text) !important;
	}
		@media (max-width:781px) {
			.archive-list .archive-item { margin-top: 1.5rem !important; }
			}

.archive-item .archive-txt:before {
	background-color: rgba(35,35,35,0.6);
	}
.archive-nav-wrap {
	background-color: var(--color-general-bg);
	}

/*		@media (min-width:782px) {
			.theme-archive.archive-list .archive-item a:before {
				border-left: 5px solid transparent;
				}
			.theme-archive.archive-list .archive-item:hover a:before {
				border-left: 5px solid transparent;
				}
			.theme-archive.archive-grid .archive-item a:before {
				border-top: 5px solid transparent;
				}
			.theme-archive.archive-grid .archive-item:hover a:before {
				border-top: 5px solid transparent;
				}
			}*/

/* Auf Suchseite wird die Minimalhöhe deaktiviert */
/*body.search .archive-list .archive-item { min-height: initial; }
body.search .archive-list .archive-txt { min-height: initial; }*/





/* ----------------------------------
	RSS-Feed (Darstellung)
---------------------------------- */

.rss-wrap li {
	background-color: rgba(35,35,35,0.6);
	}
.rss-wrap li:hover {
	background-color: var(--color-accent);
	color: white;
	}






/* ----------------------------------
	SEARCH Basic, Footer, Popup
---------------------------------- */

.popup-content .searchform input[type="text"] {
	background-color: #393939 !important;
	border-color: #393939 !important;
	color: white !important;
	}
.searchform input[type="text"], 
.searchform input[type="search"] {
	background-color: #444 !important;
	border-color: #444 !important;
	}
body.search .searchform input[type="text"], 
body.search .searchform input[type="search"] {
	background-color: #555 !important;
	border-color: #555 !important;
	}
.wp-block-search input[type="text"], 
.wp-block-search input[type="search"] {
	background-color: #555 !important;
	border-color: #555 !important;
	}

		@media (min-width: 782px) {
			.popup-content .searchform:hover input[type="text"] {
				border-color: var(--color-accent) !important;
				}
			}




/* -------------------------------------------------------------------------- */
/*	Social Media Icons > diverse Platzierungen
/* -------------------------------------------------------------------------- */
/* --- oberhalb des Footers --- */
.social-footer {
	border-top: 0px solid var(--color-light);
	background-color: rgba(55,55,55,0.7);
	padding: 2rem 0;
	}
.social-footer .social-title {
	opacity: 0.7;
	}




/* -------------------------------------------------------------------------- */
/*	COMMENTS – Grundaufbau
/* -------------------------------------------------------------------------- */
.comment-wrap {
	}

/* -------------------------------------------------------------------------- */
/*	COMMENTS – 1. Teil: Kommentarformular komplett
/* -------------------------------------------------------------------------- */
/* --- Aussenelement --- */
.comment-respond {
	background-color: rgba(40,40,40,0.8);
	}
li .comment-respond {
	background-color: rgba(0,0,0,0.2);
	}

/* --- Formular & Inhalt --- */
.comment-form .comment-notes,
.comment-form .comment-form-cookies-consent {
	opacity: 0.6;
	}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
	border: 1px solid rgba(0,0,0,.15);
	background-color: #66666680 !important;
	}
.comment-form .form-submit input[type="submit"] {
	background-color: var(--color-light);
	opacity: 1;
	}
.comment-form .form-submit input[type="submit"]:hover {
	background-color: var(--color-accent);
	opacity: 1;
	}

/* -------------------------------------------------------------------------- */
/*	COMMENTS – 2. Teil: Auflistung
/* -------------------------------------------------------------------------- */
/* --- Basis-Element (Parent) --- */
ul.post-comments li {
	background-color: rgba(40,40,40,0.8);
	}

/* --- Folge-Element (Child) --- */
ul.children li {
	background-color: rgba(0,0,0,0.15);
	border-left: 1px solid var(--color-light);
	}
ul.children li li {
	background-color: rgba(0,0,0,0.2);
	}

/* --- Antwort-Button --- */
.reply a:link,
.reply a:visited,
.reply a:active,
.reply a:hover {
	background-color: var(--color-light);
	opacity: 1;
	}
.reply a:hover {
	background-color: var(--color-accent);
	opacity: 1;
	}




/* --------------------------------------------------------------------
	Plugin Cookie Notice > Anpassungen Child
-------------------------------------------------------------------- */

#cookie-notice {
	background: var(--color-accent) !important;
	color: white !important;
	}
#cookie-notice h1, #cookie-notice h2, #cookie-notice h3,
#cookie-notice h4, #cookie-notice h5, #cookie-notice h6 {
	color: white !important;
	}
.cn-button {
	background: white !important;
	color: var(--color-second) !important;
	}
.cn-button:hover {
	background: var(--color-second) !important;
	color: white !important;
	}
.cn-button.cn-revoke-inline {
	background: black !important;
	color: white !important;
	}
.cn-button.cn-revoke-inline:hover {
	background: var(--color-accent) !important;
	color: white !important;
	}














/*--------------------------------------------------------------
	Ausnahme fuer Internet Explorer
----------------------------------------------------------------*/

body.is-ie #headerstart.with-img,
body.is-ie .slider-wrap {
		-webkit-clip-path: none;
		clip-path: none;
	}

body.is-ie .ie-triangle {
	width: 100vw;
	height: 5.5vw;
	position: absolute;
	z-index: 4;
	background-image: url(assets/img/ie-triangle-img.png);
	background-repeat: no-repeat;
	background-size: 100% auto;	
	}

/* --- allgemeine Seiten --- */
body.is-ie {
	background-position: 0 calc(12vw - 5vw);
	}
body.is-ie .ie-triangle {
	top: calc(12vw - 5vw);
	}
		@media (max-width: 1100px) {
		/* bis Medium */
			body.is-ie { background-position: 0 calc(16rem - 5vw); }
			body.is-ie .ie-triangle { top: calc(16rem - 5vw); }
		}
		@media (max-width:781px) {
		/* bis Small */
			body.is-ie { background-position: 0 calc(8.5rem - 5vw); }
			body.is-ie .ie-triangle { top: calc(8.5rem - 5vw); }
		}

/* --- Home-Seite --- */
body.is-ie.home {
	background-position: 0 calc(95vh - 5vw); /* Use vh as a fallback for browsers that do not support Custom Properties */
	background-position: 0 calc(var(--vh, 1vh) * 95 - 5vw);
	}
body.is-ie.home .ie-triangle {
	top: calc(95vh - 5vw); /* Use vh as a fallback for browsers that do not support Custom Properties */
	top: calc(var(--vh, 1vh) * 95 - 5vw);
	}






		@media print {
			.nav {
				background: var(--color-general-bg);
				}
			#navbar.navbar-home .nav {
				background: transparent;
				}
			.has-color-light-background-color {
				background: #f7f7f7 !important;
				}
			#scroll-to-start {
				height: 0 !important;
				}
			}