/*
Theme Name: Zumbuehl Designstudio
Theme URI: http://stuntarts.com
Author: Stuntarts GmbH
Author URI: http://stuntarts.com
Description: Zumbuehl Designstudio, merged standalone build. Nebula 1.1.5 (parent) and the former zumbuehl child theme 1.1.0 combined into one folder, so the theme no longer needs its parent theme directory to exist.
Version: 2.1.5
License: The License with which you bought this theme from ThemeForest
License URI: http://themeforest.net/wiki/support/legal-terms/licensing-terms/
Tags: white, light, three-columns, right-sidebar, left-sidebar, responsive-layout, custom-menu, editor-style, featured-images, full-width-template, post-formats, sticky-post, theme-options, translation-ready
Text Domain: nebula
*/

@import "assets/css/fonts.css";
@import "assets/css/font-icon.css";

/* ==========================================================================
   HTML / Body 
   ========================================================================== */
html {
  height: 100%;
}

body {
  min-height: 100%;
  overflow-y: none;
}

a {
	outline: 0;
}

/* ==========================================================================
   Fonts 
   ========================================================================== */
body, input, textarea, select, h1, h2, h3, h4, h5, h6, .post-title, .widget-title {
    font-family: 'Gerbera-Bold', 'Open Sans', Arial, sans-serif !important;
    font-weight: normal;
}
.industrial-design body, .industrial-design p, .industrial-design input, .industrial-design textarea, .industrial-design select, .industrial-design h1, .industrial-design h2, .industrial-design h3, .industrial-design h4, .industrial-design h5, .industrial-design h6, .industrial-design .post-title, .industrial-design .widget-title, .left-navigation, .left-language-switch, .industrial-design .footer-description, .industrial-design .atp-filter-label, .industrial-design .atp-filter-opener, .industrial-design .atp-project-details {
    font-family: 'Gerbera-Light', 'Open Sans', Arial, sans-serif !important;
 	font-weight: normal;
}

.content-container p, .page-content p{
	font-size: 23px;
	line-height: 1.5em;
	letter-spacing: 0.02em;
}

.section-title span, .menu a, h1, h2, h3, h4, h5, h6, .single .post-title, .post-title {
	font-size: 33px;
	font-weight: normal;
}

.single .post-title, .post-title {
	line-height: 1.4em;
}

.section-title span, .menu a {
	letter-spacing: 0.02em;
}

h1, h2, h3, h4, h5, h6, .post-title, .widget-title {
    letter-spacing: -0.01px;
    margin-bottom: 28px;
}

.language-switch, .footer-description, .atp-filter-opener:after, .atp-filter-label, .atp-project-details-container a, .sidebar-right p {
	font-size: 14px !important;
	font-weight: normal !important;
	letter-spacing: 0.05em !important;
}

.sidebar-right p {
	line-height: 1.4em;
}

/* ==========================================================================
   Home
   ========================================================================== */
body.landingpage {
	overflow: none !important;
	max-height: 100vh;
}

.landingpage #main-container {
	padding-top: 0px !important;
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100vh;
}

.landingpage #main-container, .landingpage .main-container-wrapper, .landingpage #content, .landingpage .content-home {
	min-height: 100%;
	max-height: 100%;
	height: 100%;
	display: block;
}

.landingpage #content {
	background-size: cover;
	background-position: center center;
	background-color: #f7f7f7;
	background-repeat: no-repeat;
}

body.landingpage #content {
	padding-left: 0px !important;
	padding-right: 0px !important;
}

.content-landing {
	width: 50%;
	height: 100%;
	display: block;
	float: left;
}

.content-landing:hover {
	background-color: #FFF;
	opacity: 0.15;
}

a.content-landing {
	transition: none;
	-webkit-transition: none;
}

/* ==========================================================================
   Header
   ========================================================================== */
#header {
	position: inherit !important;
   	background: none !important;
   	top: 0px !important;
   	height: 0px;
}

.header-wrapper {
	text-align: center;
	position: relative;
	z-index: 9999;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 210px;
}

.header-small .header-wrapper, .header-minimal .header-wrapper {
	min-height: 0px;
}
	
/* ==========================================================================
   Logo
   ========================================================================== */
.logo-wrapper {
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 75px;
	position: fixed;
	display: inline-block;
}

.logo-wrapper, .image-logo-dark {
	width: 80px !important;
	height: 144px !important;
}

.image-logo-dark {
	background-size: 100% 100%;
}

.logo {
	position: fixed;
	z-index: 999;
	display: block;
	margin-left: -80px;
}

.logo img {
	width: 100%;
	height: 100%;
}


/* ==========================================================================
   Left or Right
   ========================================================================== */
.interior-design .main-navigation.left-navigation, .interior-design .left-language-switch {
	display: none;
}

.industrial-design .main-navigation.right-navigation, .industrial-design .right-language-switch {
	display: none;
}

.interior-design .page-title, .interior-design #main-container, .interior-design .page-content, .interior-design .post-title {
	text-align: right;
}

.industrial-design .content-container {
	float: right;
}

.industrial-design .sidebar {
	float: left;
	padding-right: 5.3%;
	padding-left: 0px;
}

.industrial-design .page-title, .industrial-design #main-container, .industrial-design .page-content, .industrial-design #main-container, .industrial-design #main-container .post-title, .sidebar-right .post-title {
	text-align: left;
}

/* ==========================================================================
   Update 2020
   ========================================================================== */
.language-switch {
	display: none;
}

@media screen and (max-width: 720px) {
	.industrial-design .logo-wrapper, 
	.industrial-design .image-logo-dark,
	.interior-design .logo-wrapper, 
	.interior-design .image-logo-dark {
		width: 32px !important;
		height: 55px !important;
	}

	.industrial-design .logo-wrapper,
	.interior-design .logo-wrapper {
		margin-top: 25px;
		position: absolute;
	}

	.industrial-design .logo,
	.interior-design .logo {
		margin-left: 0px;
	}

	.industrial-design .logo-wrapper {
		right: 0px !important;
	}

	.interior-design .logo-wrapper {
		left: 0px !important;
	}
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.main-navigation {
	top: 25px;
	position: fixed;
}

.main-navigation.left-navigation{
	left: 18px;
	float: none;
	text-align: left;
}

.main-navigation.right-navigation{
	right: 18px;
	float: none;
	text-align: right;
}

.main-navigation.left-navigation .menu-icon {
	float: left;
}

.section-title {
	padding-bottom: 20px;
}

.section-title span {
	float: none;
	display: block;
	margin-bottom: 10px;
}

.section-title span, .menu a {
	margin-right: 0px;
	text-shadow: none;
	padding: 0 5px 0 5px;
	text-transform: uppercase;
}

.main-navigation a {
	text-decoration: none;
}

.menu li {
	list-style: none;
	padding-bottom: 7px;
}

.menu ul {
	margin-left: 0px;
}

/* ==========================================================================
   Menu Hidden
   ========================================================================== */
 .main-navigation .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
  overflow: hidden;
}

/* ==========================================================================
   Navigation Menu Icon
   ========================================================================== */

.main-navigation .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 20px 20px;
  position: relative;
  user-select: none;
  margin-bottom: 10px;
  margin-right: -12px;
}

.main-navigation.left-navigation .menu-icon {
	margin-left: -12px;
}
 
.main-navigation .menu-icon .navicon {
  background: #000;
  display: block;
  height: 4px;
  position: relative;
  transition: background .2s ease-out;
  width: 30px;
}

.main-navigation.left-navigation .menu-icon .navicon {
  height: 3px;
}

.main-navigation .menu-icon .navicon:before,
.main-navigation .menu-icon .navicon:after {
  background: #000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.main-navigation .menu-icon .navicon:before {
  top: 10px;
}
 
.main-navigation .menu-icon .navicon:after {
  top: -10px;
}

/* ==========================================================================
   Navigation Menu Icon Animation for closing
   ========================================================================== */
.main-navigation .menu-btn {
  display: none;
}
 
.main-navigation .menu-btn:checked ~ .menu {
  max-height: 500px;
  padding-bottom: 20px;
}
 
.main-navigation .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
 
.main-navigation .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
 
.main-navigation .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.main-navigation.left-navigation .menu-btn:checked ~ .menu-icon .navicon:before {
  width: 34px;
  transform: rotate(-43deg);

}
 
.main-navigation.left-navigation .menu-btn:checked ~ .menu-icon .navicon:after {
  width: 34px;
  transform: rotate(43deg);
}
 
.main-navigation .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.main-navigation .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* ==========================================================================
   Language Switcher
   ========================================================================== */
.industrial .right-navigation, .industrial .right-language-switch{
	display: none;
}

.interior .left-navigation, .interior .left-language-switch {
	display: none;
}

/* ==========================================================================
   Language Switcher
   ========================================================================== */
.language-switch {
    position: fixed;
    bottom: 25px;
    z-index: 999;
    text-align: right;
	font-size: 14px;
}

.left-language-switch {
	float: left;
	left: 25px;
}

.right-language-switch {
	float: right;
	right: 25px;
}

.bogo-language-switcher .en-US, .bogo-language-switcher .de-DE {
	background: none !important;
}

ul.bogo-language-switcher li {
	padding-left: 0px;
	float: right;
	line-height: 1.2em;
	list-style: none;
}

ul.bogo-language-switcher li:first-child {
	margin-left: 7px;
}

ul.bogo-language-switcher li.current, ul.bogo-language-switcher li a:hover {
	text-decoration: none;
	border-bottom: 2px solid #000;
	padding-bottom: 0px;
}

.left-language-switch ul.bogo-language-switcher li.current, .left-language-switch ul.bogo-language-switcher li a:hover {
	border-bottom: 1px solid #000 !important;
}

ul.bogo-language-switcher li a   {
	text-decoration: none;
}

/* ==========================================================================
   Portfolio
   ========================================================================== */
.three-fourths .atp-project-thumb {
	max-height: 502px;
	overflow: hidden;
}

.atp-load-more-wrapper {
	display: none;
}


@media screen and (max-width: 1280px) and (min-width: 706px) {
	.atp-projects-wrapper {
		margin-top: 60px;
	}
}

/* ==========================================================================
   Portfolio Awards
   ========================================================================== */
li.atp-project.awards {
}

.atp-projects {
	padding-top: 25px; /* to show awards labels on top*/
}

li.atp-project.awards:before {
	width: 150px;
	height: 40px;
	color: #FFFFFF;
	text-transform: uppercase;
	letter-spacing: 0.4em;
	font-size: 20px;
	text-align: center;
	padding-top: 11px;
	padding-left: 3px;
	content: 'award';
	position: absolute;
	right: 25px;
	top: -25px;
	z-index: 999;
	overflow: visible;
	background: url('assets/img/awards_label_bg.png') no-repeat left top;
	background-size: 100% 100%;
}


img.attachment-award-image-thumbnail {
	width: 180px;
	height: auto;
	/*grayscale for background image*/
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
	filter: grayscale(100%); 
	-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

/* ==========================================================================
   Portfolio Filter
   ========================================================================== */
.atp-filter-wrapper {
	position: relative;
	top: -5px !important;
	max-width: 100%;
	padding-bottom: 20px;
	padding-top: 0px;
	text-align: center;
	z-index: 100;
}


ul.atp-filters {
	display: inline-block;
	max-width: 100%;
	-webkit-margin-before: 0px;
	-webkit-margin-after: 0px;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 0px;
}


.atp-filter-opener {
	position: relative !important;
	display: inline-block;
	padding: 0px 0px;
	z-index: 99 !important;
	top: 20px !important;
	text-align: center;
	width: 100%;
}


.atp-fallback-filters {
	display: none;
}

.atp-filter-opener:after {
	content: 'Projektfilter';
	margin-left: 10px;
	z-index: 999;
}

#atp-filter-openee {
	width: 100%;
}

#atp-filter-openee:checked ~ .atp-filter-opener  {
	background: none;
	//width: 0px;
	//height: 0px;
}

#atp-filter-openee:checked ~ .atp-filter-opener:after  {
	content: '';
}

#atp-filter-openee:checked ~ .site-control {
	width: 50px !important;
	height: 50px !important;
	background: blue !important;
	display: inline-block;
}

#atp-filter-openee:checked ~ .atp-projects-wrapper, #atp-filter-openee:checked ~ .atp-filter-wrapper, #atp-filter-openee:checked ~ .atp-filter-opener,
.atp-projects-wrapper, .atp-filter-wrapper, .atp-filter-opener, .atp-filters  {
	-webkit-transition: none;
	transform: none;
}

.atp-filter-opener-icon {
	background: url('assets/img/filter_icon_open.png') no-repeat center center;
	background-size: 100% 100%;
	height: 12px;
	width: 14px;
	margin-left: -70px;
}

.atp-filters li:first-of-type {
	padding-left: 20px;
}

#atp-filter-openee:checked ~ .atp-filter-opener .atp-filter-opener-icon {
	/*background: url('assets/img/filter_icon_close.png') no-repeat center center;
	background-size: 14px 14px;
	height: 20px;
	width: 14px;
	left: 50%;
	top: 0px;
	margin-top: 8px;
	margin-left: -330px;*/
	display: none;
}

.industrial-design #atp-filter-openee:checked ~ .atp-filter-opener .atp-filter-opener-icon {
	//margin-left: -210px;
}

#atp-filter-openee:checked ~ .atp-filter-wrapper .atp-filters {
	//padding-left: 30px;
}

~ .atp-filter-opener-icon  {
	display: none;
}

.atp-filter-opener .bar {
	display: none;
}

#atp-filter-openee:checked ~ .atp-projects-wrapper {
	position: relative;
}

.atp-projects {
	margin-top: 35px;
}

.atp-filters li {
	text-transform: none;
	margin: 0 8px !important;
}

.atp-filters li a {
	color: #000 !important;
	line-height: 1.3em;
}

.atp-filters li a:hover {
	border-bottom: 2px solid #000;
}

.industrial-design .atp-filters li a:hover {
	border-bottom: 1px solid #000;
}

/* ==========================================================================
   Portfolio Single Post
   ========================================================================== */
.sidebar-right h1 {
	line-height: 1.2em;
}

.sidebar-right p {
	margin-bottom: 20px;
}

.content-left {
	background: none;
}

.content-left, .content-right {
	width: 60%;
}

.sidebar-right, .sidebar-left {
	width: 40%;
}

@media screen and (max-width: 1100px) {
	.content-left, .content-right {
		float: none;
		width: 100%;
	}
	
	.sidebar-right {
		width: 100%;
		padding-left: 0px;
	}
}

@media screen and (max-width: 840px) {
	.sidebar-left, .sidebar-right {
	    margin-top: 0px;
	}
}


/* ==========================================================================
   Slider
   ========================================================================== */
#header-image-wrapper {
	height: auto !important;
	min-height: 300px;
	max-height: 80% !important;
}

.dynamic-image-slider .header-image {
	background: none;
}

.slide-img-bg {
	min-height: 80%;
	background-size: cover;
	height: 700px;
	width: 100%;
	min-width: 100% !important;
	background-position: center center;
	background-repeat: no-repeat;
}

.slick-slider {
	margin-bottom: 0px !important;
}

.scroll-down-indicator {
	display: none;
}

.slick-slider img {
	min-width: 100%;
	max-width: 100%;
}

ul.slick-dots {
	margin-bottom: 0px;
}

.slick-dots li {
	width: 10px !important;
}

.slick-dots {
	bottom: 25px !important;
}

.slick-prev:before, .slick-next:before {
	color: #000 !important;
}

.slick-prev, .slick-next {
	z-index: 999;
}

.slick-prev {
	left: 0px !important;
}

.slick-next {
	right: 25px !important;
}

button.slick-prev, button.slick-next {
	height: 100%;
}

button.slick-prev {
	padding-left: 25px;
	padding-right: 50px;
}

button.slick-next {
	padding-left: 50px;
	padding-right: 25px;
}

.slick-prev:before, .slick-next:before {
	font-family: zdesignstudio !important;
	font-size: 50px !important;
	opacity: 1 !important;
}

.slick-prev:before {
	content: '\e900' !important;
}

.slick-next:before {
    content: '\e901' !important;
}

.slick-dots li button:before {
	font-family: zdesignstudio !important;
	font-size: 10px !important;
	line-height: 20px;
	opacity: 1 !important;
}

.slick-dots li button:before {
	content: '\e902' !important;
}

.slick-dots li.slick-active button:before {
	content: '\e903' !important;
}


.industrial-design .slick-prev:before {
	content: '\e904' !important;
}

.industrial-design .slick-next:before {
    content: '\e905' !important;
}

.industrial-design .slick-dots li button:before {
	content: '\e906' !important;
}

.industrial-design .slick-dots li.slick-active button:before {
	content: '\e907' !important;
}

@media screen and (max-width: 479px) {
	#header-image-wrapper, .slide-img-bg {
		min-height: 260px;
		max-height: 260px;
	}
	
	.slide-desktop {
		display: none;
	}
	
	.slide-mobile {
		display: block;
	}
	
}

@media screen and (min-width: 480px) {
	.slide-desktop {
		display: block;
	}
	
	.slide-mobile {
		display: none;
	}
	
}

@media screen and (min-width: 480px) and (max-width: 639px) {
	#header-image-wrapper, .slide-img-bg {
		min-height: 300px;
		max-height: 300px;
	}
}

@media screen and (min-width: 640px) {
	#header-image-wrapper, .slide-img-bg {
		min-height: 420px;
		max-height: 420px;
	}
}

@media screen and (min-width: 720px) {
	#header-image-wrapper, .slide-img-bg {
		min-height: 560px;
		max-height: 560px;
	}
	
	.slick-dots{
		bottom: 25px !important;
	}
}

@media screen and (min-width: 960px) {
	#header-image-wrapper, .slide-img-bg {
		min-height: 700px;
	}
}

@media screen and (min-height: 1280px) and (min-width: 1680px) {
	#header-image-wrapper, .slide-img-bg {
		min-height: 1080px !important;
		max-height: 1080px
	}
}

@media screen and (min-height: 960px) and (min-width: 1680px) {
	#header-image-wrapper, .slide-img-bg {
		min-height: 800px;
	}
}

/* ==========================================================================
   Content
   ========================================================================== */
#main-container {
	margin-top: 0px !important;
}

#main-container {
	padding-top: 300px;
}

.has-header-image #main-container {
	padding-top: 50px;
}

.page-template-template-portfolio #main-container{
	padding-top: 0px !important;
}

.content-wrapper {
	margin-left: auto;
	margin-right: auto;
}

body:not(.boxbuilder-content) #content, .footer-widgets-wrapper, .footer-copyright-wrapper, .section-background, .boxbuilder-content .section-full-width.section-rows-normal .atbb-row, .boxbuilder-content .atbb-section.section-normal-width, .footer-pagination-wrapper, .single:not(.boxbuilder-content) #content>.hentry, .comment-list-wrapper, .comments-form, .boxbuilder-content .atbb-section.section-normal-width {
	padding-left: 25px;
	padding-right: 25px;
}

@media screen and (max-width: 480px) {
	#header, .footer-copyright, body:not(.boxbuilder-content):not(.single) #content, .footer-widgets-wrapper, .footer-copyright-wrapper, .section-background, .boxbuilder-content .section-full-width.section-rows-normal .atbb-row, .boxbuilder-content .atbb-section.section-normal-width, .single #content>.hentry, .comment-list-wrapper, .comments-form {
		padding-left: 25px;
		padding-right: 25px;
	}
}

.post-title {
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	padding: 0 0;
}

.interior #main-container, .interior #main-container .post-title, .sidebar-right .post-title {
	text-align: right;
}

.industrial .content-left {
	float: right;
}

body.success {
	background-color: #FFF !important;
}

body.success:before {
	display: none;
}

.page-header {
	margin-bottom: 17px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-description-wrapper {
	position: fixed;
	bottom: 0px;
	left: 0px;
	text-align: center;
	height: auto;
	width: 100%;
	max-width: 100%;
	padding-bottom: 25px;
}

.footer-description a {
	text-decoration: none !important;
}


/* ==========================================================================
   Partner
   ========================================================================== */

.logo-block {
	margin-bottom: 50px;
	padding: 25px 25px;
	height: 150px;
}

.logo-block-bg {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	display: block;
	height: 100%;
	/*grayscale for background image*/
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
	filter: grayscale(100%); 
	-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.logo-block:hover .logo-block-bg {
	/*opacity: 0.7;*/
}

.one-third-column:nth-child(3n) {
	margin-right: 0px !important;
}

.page-template-template-clients .page-title{
	visibility: hidden;
}

/* ==========================================================================
   Motivation
   ========================================================================== */

.motivation-content h1.post-title, .motivation-content h2.sidebar-title {
	font-size: 23px;
}

.motivation-content .content-container {
	float: left;
}

.industrial-design .motivation-content .content-container {
	float: right;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 720px) {
	.main-navigation {
		position: relative;
	}
	
	.main-navigation.left-navigation{
		left: -2px;
	}
	
	.main-navigation.right-navigation{
		right: -2px;
	}
	
	#header {
		display: block;
		position: relative !important;
		height: auto;
		min-height: auto;
		max-height: 500px !important;
	}
	
	.menu-btn:checked ~ #header {
		height: 700px;
	}
	
	.logo-wrapper {
		/*display: none;*/
	}
	
	button.slick-prev, button.slick-next {
		height: auto;
	}
	
	.slick-prev:before, .slick-next:before {
		display: none;
	}
		
	.interior-design .footer-description {
		text-align: left;
		margin-left: 25px;		
	}
	
	.industrial-design .footer-description {
		text-align: right;
		margin-right: 25px;
	}
	
	footer {
		display: none;
	}
	
	.footer-description {
		display: none;
	}
	
	.language-switch {
		bottom: initial;
		top: 25px;
		position: absolute;
	}
	
	.left-language-switch {
		left: initial;
		right: 25px;
	}
	
	.right-language-switch {
		right: initial;
		left: 25px;
	}
	
	#main-container {
	    padding-top: 0px;
	}

	.atp-projects {
		margin-top: -25px;
	}
	
	.landingpage .logo-wrapper {
		display: inline-block;
		left:50%;
		top:50%;
		margin:-72px 0 0 -40px;
	}
	
	.landingpage .main-navigation.right-navigation {
		right: 18px;
	}
	
	.landingpage .main-navigation.left-navigation{
		left: 18px;
	}
	
	.landingpage .main-navigation.right-navigation{
		right: 18px;
		bottom: 16px !important;
		top: initial;
	}
	
	.landingpage .menu-icon, .landingpage .language-switch, .landingpage .menu {
		display: none;
	}
	
	.landingpage .main-navigation {
		position: fixed;
	}
	
	.landingpage #header {
		position: fixed !important;
	}
	
	.has-header-image #main-container {
		padding-top: 25px;
	}
	
	/* Font Sizes */
	
	.section-title span, .menu a, h1, .single .post-title, .post-title {
		font-size: 28px;
		line-height: 0.8em;
	}
	
	.section-title span, .menu a {
		letter-spacing: 0.01em;
	}
	
	.content-container p, .page-content p, .sidebar-right p{
		font-size: 14px;
		line-height: 1.5em;
		letter-spacing: 0.02em;
		margin-bottom: 15px;
	}
	
	h1, h2, h3, h4, h5, h6 {
		font-size: 18px;
		line-height: 1.4em;
		letter-spacing: 0px;
		margin-bottom: 15px;
	}
	
	.single .post-title, .post-title, .sidebar-title {
		line-height: 1.0em;
		margin-bottom: 15px;
	}

	.language-switch, .footer-description, .atp-filter-opener:after, .atp-filter-label, .atp-project-details-container a, .sidebar-right p {
		font-size: 14px !important;
	}
	
	li.atp-project.awards:before {
		width: 100px;
		height: 28px;
		color: #FFFFFF;
		letter-spacing: 0.2em;
		font-size: 15px;
		padding-top: 1px;
		right: 15px;
		top: -7px;
	}
	
}

@media screen and (max-width: 640px) {
	.one-third-column {
	    width: 48%;
	    margin-right: 2%;
	}
	
	.logo-block {
	    margin-bottom: 20px;
	    padding: 10px 10px;
	    height: 50px;
	}
	
	.page-template-template-awards .logo-block {
		height: 90px;
		margin-bottom: 25px;
	}
}

@media screen and (max-width: 944px) and (max-height: 680px) {
	.footer-description {
		display: none;
	}
}

@media screen and (min-width: 945px) and (max-height: 800px) {
	.footer-description {
		display: none;
	}
}
/* ---- override: zumbuehl-2.0.1-links.css ---- */
/* ==========================================================================
   Link affordances - menu underline, logo/site-title fade
   --------------------------------------------------------------------------
   The theme underlines only the language switcher and the portfolio filters;
   navigation links had no hover state at all and the logo/site title had none
   either. Rules use text-decoration (not border-bottom) so nothing shifts by a
   pixel, and they cover :focus-visible so keyboard users get the same cue.

   Opacity 0.6, not 0.55: black at 60% over white resolves to #666, ~5.7:1,
   which still clears AA. The inherited transition only covers colour, so
   opacity is added explicitly; reduced motion turns the fade into a snap.
   ========================================================================== */

/*
 * Menu underline placement.
 *
 * `--zd-menu-underline-offset` is the one knob: the rule sits this far below the text. Measured with the
 * theme's own Gerbera-Bold at the menu's 33px (painted pixels, 4x render):
 *
 *   0.30em  9.5px gap   - what the supplied theme shipped, reads as a separate line
 *   0.08em  2.5px gap   - still visibly detached
 *   0.04em  0.5px gap   - attached to the word, no collision   <- current
 *   0       0px         - the rule touches the glyphs
 *
 * It is a variable rather than a literal so it can be tuned from the browser (or a child stylesheet)
 * without rebuilding the theme.
 */
:root {
	--zd-menu-underline-offset: 0.04em;
}

/*
 * Menu items: underline on hover, on focus and on the current page.
 *
 * The site's default face is Gerbera-Bold (the theme sets it on `body` at font-weight 400 - the weight
 * comes from the font file, not from CSS), so a fixed 1px rule read as a hairline under those heavy
 * strokes. Measured from a 4x render with the theme's own font at the menu's 33px:
 * 1px -> 1.00px painted, auto -> 3.00px, max(1px, 0.09em) -> 3.00px.
 *
 * Thickness and offset are repeated in the state block below on purpose: the theme's rule for the
 * current item uses the `text-decoration` shorthand, which resets both to their initial values.
 */
.main-navigation li > a {
	text-decoration: none;
	text-decoration-thickness: max(1px, 0.09em);
	text-underline-offset: var(--zd-menu-underline-offset);
}

/*
 * The light face needs a finer rule: the industrial subsite (and the portal) carries the theme's
 * `industrial-design` body class, which swaps in Gerbera-Light, and the theme renders the left
 * navigation in the light face as well. Same measurement approach: ~1.3px at 33px.
 */
.industrial-design .main-navigation li > a,
.industrial-design .main-navigation li > a:hover,
.industrial-design .main-navigation li > a:focus-visible,
.industrial-design .main-navigation li.current-menu-item > a,
.industrial-design .main-navigation li.current_page_item > a,
.industrial-design .main-navigation li.current-menu-ancestor > a,
.industrial-design .main-navigation li.current_page_ancestor > a,
.main-navigation.left-navigation li > a,
.main-navigation.left-navigation li > a:hover,
.main-navigation.left-navigation li > a:focus-visible,
.main-navigation.left-navigation li.current-menu-item > a {
	text-decoration-thickness: max(1px, 0.04em);
	text-underline-offset: var(--zd-menu-underline-offset);
}

.main-navigation li > a:hover,
.main-navigation li > a:focus-visible,
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a,
.main-navigation li.current-menu-ancestor > a,
.main-navigation li.current_page_ancestor > a {
	text-decoration: underline;
	text-decoration-thickness: max(1px, 0.09em);
	text-underline-offset: var(--zd-menu-underline-offset);
}

/* Logo and site title - only when they are links. The Z mark is a background
   image on a span inside the anchor, so fading the anchor fades the mark too. */
a.logo,
a.section-title {
	transition: opacity 0.3s ease, color 0.3s ease;
}

a.logo:hover,
a.logo:focus-visible,
a.section-title:hover,
a.section-title:focus-visible {
	opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
	a.logo,
	a.section-title {
		transition: none;
	}
}

/* ---- override: zumbuehl-2.0.1-theme.css ---- */
/* ==========================================================================
   Theme fixes for 2.0.1 - switcher visibility, Z mark centring
   --------------------------------------------------------------------------
   Appended by `merge-theme.py` after the child stylesheet, so it wins on order
   without touching the backup or the generated code.

   1. `.language-switch { display: none }` comes from the client's "Update 2020"
      block in the original stylesheet: the switcher is printed and labelled
      (the footer script shortens it to D/E) but hidden. The per-site corner
      rules stay untouched, so each subsite keeps showing its own corner only
      (interior -> right, industrial -> left), and the door stays clean.
   2. At <=720px the subsites shrink the mark to 32x55 and push it into a
      corner, while the portal centres it. Centring matches the door.
   ========================================================================== */

/* 1. Switcher: visible again on content pages, still hidden on the door. */
.language-switch {
	display: block;
}

.landingpage .language-switch {
	display: none;
}

/* 2. #content keeps its 25px gutter without overflowing.
   The base sheet has `#content{float:left;width:100%}` and the child sheet adds
   `padding-left:25px; padding-right:25px`. Under content-box sizing that produced a 1490px box in a
   1440px viewport, so the 1060px column centred 25px right of the screen (measured: content centre 745
   against a viewport centre of 720). border-box keeps the gutter and the centring. */
#content {
	box-sizing: border-box;
}

/* 3. Z mark: exactly where the portal puts it, on every page of the two design subsites.
   Measured on `/`: the mark sits top-centre above 720px (80x144 at y=75, horizontal offset 0) and
   screen-centred at or below 720px (80x144, both offsets 0). The subsites already match above 720px; the
   difference was mobile, where the theme shrinks the mark to 32x55 while the wrapper stays 80x144, so the
   mark sat ~45px above the centre it was supposed to occupy. Sizing the mark with the wrapper fixes it.
   Transform instead of margins: the base stylesheet sets `margin-left: auto !important` on the wrapper
   and zeroes the mark's own margin below 720px, so offset hacks are overridden anyway. */
@media screen and (max-width: 720px) {
	.interior-design .logo-wrapper,
	.industrial-design .logo-wrapper {
		position: fixed;
		left: 50% !important;
		right: auto !important;
		top: 50%;
		margin: -72px 0 0 -40px !important;
		transform: none !important;
		width: 80px !important;
		height: 144px !important;
	}

	/* The mark has to fill the wrapper, otherwise centring the wrapper centres nothing.
	   The portal keeps the 80x144 mark at this width as well. */
	.interior-design .image-logo,
	.interior-design .image-logo-dark,
	.interior-design .logo .image-logo-wrapper,
	.industrial-design .image-logo,
	.industrial-design .image-logo-dark,
	.industrial-design .logo .image-logo-wrapper {
		width: 80px !important;
		height: 144px !important;
	}

	.interior-design .logo,
	.industrial-design .logo {
		margin-left: 0 !important;
	}

	/* Keep the switcher on screen: the base rules move it to `top: 25px; position: absolute`
	   below 720px, which put it past the bottom edge when the page is long. */
	.language-switch {
		position: fixed;
		top: auto;
		bottom: 25px;
		z-index: 999;
	}

	.left-language-switch {
		left: 25px;
		right: auto;
	}

	.right-language-switch {
		right: 25px;
		left: auto;
	}
}

/* ---- override: zumbuehl-2.0.2-slider-dots.css ---- */
/*
 * Project header slider: keep the pagination dots on screen.
 *
 * `.slick-dots` is `position:absolute; bottom:25px` inside `.header-slider`, so the dots sit on the lower
 * edge of a 700px-tall image and scroll away with it - on a short laptop viewport they are below the fold
 * before the visitor ever sees them.
 *
 * They cannot simply be pinned from where they are: `.header-image` carries a transform (which makes it
 * the containing block for `position:fixed`) and `.header-image-wrapper` is `overflow:hidden`. So the
 * script (overrides/*.js) moves the dots list to `<body>` and toggles `sc-slider-dots--visible` while the
 * slider is on screen. Same nodes, so slick's own click handling and `slick-active` tracking keep working.
 */
.sc-slider-dots {
	position: fixed !important;
	top: auto !important;
	right: 0;
	bottom: 25px !important;
	left: 0;
	width: 100%;
	margin: 0 !important;
	z-index: 98;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.sc-slider-dots.sc-slider-dots--visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Keep the dots above the image but below the fixed site header (z-index 999). */

@media (prefers-reduced-motion: reduce) {
	.sc-slider-dots {
		transition: none;
	}
}

/* ---- override: zumbuehl-2.0.3-portal-bg.css ---- */
/*
 * Portal: a different landing image per visit.
 *
 * Two classes, on two different elements: `.zd-portal-bg-ready` is set on `<html>` by the head script
 * once it has chosen, `.zd-portal-random` on `<body>` by the theme's body_class filter. Hence the
 * descendant selector - a compound `.a.b` would never match.
 *
 * The image is an inline `style` attribute on `#content`, so `!important` is required to beat it.
 * Gating on `.zd-portal-bg-ready` means a visitor without JavaScript keeps the original image rather
 * than losing the background entirely.
 */
.zd-portal-bg-ready .zd-portal-random #content {
	background-image: var(--zd-portal-bg, none) !important;
}


/* ---- override: zumbuehl-2.1.0-project-meta.css ---- */
/*
 * Project details: label and value on one line.
 *
 * `single-atp_project.php` prints the label, a hardcoded `<br>`, then the value - so every project read
 *
 *     Material:
 *     Diverses
 *
 * The template ships inside the supplied theme source and stays untouched; hiding the break yields
 * "Material: Diverses" (the whitespace around the `<br>` collapses to one space) without touching markup
 * or data. Same for the Company line and for the "Year …" line, whose value is empty on projects without
 * a `Umgesetzt von` entry - that trailing break was rendering an empty line.
 *
 * The description prose itself contains no `<br>` at all (checked on three projects), so nothing else is
 * affected.
 */
.project-meta br {
	display: none;
}

/* ---- override: zumbuehl-2.1.3-interior-text.css ---- */
/*
 * Interior subsite: text centred, measure reduced to two thirds.
 *
 * The theme right-aligns body copy (`text-align: right` is inherited from `.page-content`), and the text
 * column is a 636px grid column inside the 1060px page. Requested: centred text, on a measure of about
 * two thirds of the regular content width, itself centred.
 *
 * Scoped to `.content-container` - the prose column - so the portfolio grid, the filter row and the
 * address sidebar keep their layout.
 */
.interior-design .page-content .content-container {
	float: none !important; /* the theme floats this column right; a float cannot be centred by margins */
	width: 100% !important;
	max-width: 707px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Text alignment is not set here: it comes from the shared setting in
   zumbuehl-2.1.4-content-align.css, so interior and industrial cannot disagree. */


/* Below the tablet breakpoint the measure follows the screen instead of a fixed 707px. */
@media screen and (max-width: 720px) {
	.interior-design .page-content .content-container {
		max-width: 100%;
	}
}

/* ---- override: zumbuehl-2.1.3-portal-contact.css ---- */
/*
 * Portal: unlock the single-screen lock and style the contact block below it.
 *
 * The landing template is deliberately one screen high: `body.landingpage` is overflow:hidden and
 * `#main-container` is fixed at 100vh, so there was nothing to scroll to and no scroll indicator element
 * at all (the 2016 capture behaves the same way - this is a new block, not a lost one).
 *
 * Releasing the lock: the container goes back into normal flow at the same 100vh, the body scrolls, and
 * the contact block printed by `zd_portal_contact_section()` (wp_footer) becomes reachable.
 */
body.landingpage {
	overflow-y: auto !important;
}

.landingpage #main-container {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	height: 100vh;
}

.zd-portal-contact {
	position: relative;
	z-index: 3;
	background-color: #ffffff;
	padding: 90px 25px 110px;
}

/* Two thirds of the site's regular 1060px column, centred - the same measure as the contact page's
   text column, so the block reads as the same content rather than a different layout. */
.zd-portal-contact__grid {
	display: block;
	max-width: 707px;
	margin: 0 auto;
	text-align: center;
}

.zd-portal-contact__title {
	margin: 0 0 40px;
	text-align: center;
}

.zd-portal-contact__meta {
	margin: 0 0 40px;
	text-align: center;
}

.zd-portal-contact__meta p,
.zd-portal-contact__body p {
	margin: 0 0 18px;
	text-align: center;
}

.zd-portal-contact__body p:last-child,
.zd-portal-contact__meta p:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 720px) {
	.zd-portal-contact {
		padding: 60px 25px 80px;
	}
}

/* ---- override: zumbuehl-2.1.4-content-align.css ---- */
/*
 * Content alignment, shared by interior and industrial.
 *
 * Measured on the live sites: interior inherited `text-align: right` from `.page-content`, industrial uses
 * `left`. This makes both follow one setting (Network Admin -> Settings -> Content alignment), with left -
 * the industrial behaviour - as the default.
 *
 * Set on `.page-content` because paragraphs inherit from it, which is how the theme itself does it.
 */
body.interior-design .page-content,
body.industrial-design .page-content {
	text-align: left;
}

body.zd-content-align-right .page-content {
	text-align: right !important;
}

/* The centred measure from zumbuehl-2.1.3-interior-text.css is a width rule, not an alignment one; text
   inside it follows the setting like everywhere else. The contact form and address blocks stay centred
   on their own axis only while the setting is left. */
body.interior-design.zd-content-align-right .page-content .content-container {
	text-align: right !important;
}

/* ===== zumbuehl-2.1.5-signature.css ===== */
/*
 * The "Z-Designstudio" signature belongs after the content.
 *
 * Measured: the footer strip is pinned to the bottom of the viewport, so on the portfolio overview - a
 * 29,515px document - the signature floats over the grid the whole way down, and on the portal it sits
 * behind the full-screen image. Both already carry the brandmark, so the signature is redundant there.
 * On content pages (contact, project) the page ends at the footer, which is exactly "after the content".
 */
.landingpage .footer-description,
.page-template-template-portfolio .footer-description {
	display: none;
}