/*
 Theme Name:   Bulli Klinik Sacka
 Theme URI:    http://bulli.christophbickhardt.de
 Description:  Twenty Sixteen Child Theme for Bulli Klinik Sacka
 Author:       Christoph Bickhardt, christoph@wildsmile.de
 Author URI:   http://braincontrol.de
 Template:     twentysixteen
 Version:      0.0.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  bks-theme
*/

/* comon parts - logo and title banner  */

.header-image {
	margin : 0;
}



/* mobil first */

/* mobile header */

body {
	background-color: #CCC;
	font-family: Arial,Helvetica,sans-serif;
}

#primary {
	margin-top: 0.5em;
}

.site {
	/* nothing set here, its the space around the actual content, maybe use it later */
	background-color: #CCC;
}
.site-inner {
	width: 100%;
	background-color: #FFF;
	/* max-width: 1090px;*/
}

.site-header {
	padding-top : 0;
	padding-left : 0;
	padding-right: 0;
	padding-bottom: 0;
	border : 0px solid red;
}

.site-header-main {
	max-height: 180px;	
	border: none;
	background-color: #000;
}

.site-title,
.site-title a {
	text-align: center;
	text-transform : uppercase;
	font-size: 1.4em;
	width: 100%;
	margin: 0.7em 0 0 0;
}

.site-description {
	text-align: center;
	font-family: Arial,Helvetica,sans-serif;
	font-weight: 700;
	color : #FFC;
	letter-spacing: 0.75em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	width: 80%;
	font-size: 0.7rem;
	margin-left: auto;
	margin-right: auto;
}

.site-branding {
	margin : 0;
	background-color: black;
	color : #FFC;
	width : 36.7%;
	height : 100%;
	vertical-align : middle;
	max-height : 90px;
	width : 100%;
}

.site-branding .site-title a {
    color: #FFC;
}

.site-branding-right {
	width : 100%;
	max-height : 90px;
	text-align : right;
	
}

.site-branding-right .header-image {
	max-height: 90px;
	background-color : #f0f0b2;
	vertical-align : middle;
}

.site-branding-right img {
	height : inherit;
	max-height : 90px;
	margin-inline: auto;
}

/* main menu */

.menu-toggle  {
	display: block;
	margin-inline: auto;
	font-size: 1.0rem;
}



#menu-hauptmenue {
    font-size: 1.0rem;
}

#menu-hauptmenue a {
	padding-left: 1.5rem;
}

/* breadcrumbs */
p#breadcrumbs {
	font-size : 1.0em;
	margin-inline: 0.8rem;
}

.entry-title {
	margin-left: 0;
    font-weight: 200;
    font-size: 1.8em;
    margin-bottom: 0.5em;
    color: #015382;
}

.category .site-main header {
	border-bottom : 0;
}

.category .entry-title {
	margin-left: 1.8em;
}



	
/* home page */

	.home #main {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.home .site-content {
		background-color : #015382;
		color : #FFC;
	}
	
	.home .post-thumbnail {
		flex : 1 0 auto;
		margin-inline : auto;
		vertical-align: top;
		padding-top: 1.0em;
		max-width: 95vw;
	}

	.home .post-thumbnail img {
		-webkit-border-radius: min(5vw, 32px);
		-moz-border-radius: min(5vw, 32px);
		border-radius: min(5vw, 32px);
		border-color: #FFC;
		border: .3rem solid #FFC;
		padding: 0;
	}

	.home article {
		flex: 1 0 90vw;
	}
	.home .entry-header {
		width: 100%;
		margin: 0;
		margin-inline : auto;
		display: inline-block;
	}
	.home .type-page .entry-header {
		margin-inline : auto;
	}

	.home h1.entry-title {
		text-align: center;
		text-transform: uppercase;
		font-size: clamp(1rem, 5.5vw, 2.2em);
		padding : 0;
		margin-top : 0.3em;
		margin-bottom: 0;
		margin-inline : auto;
		letter-spacing: 0.1em;
		color : #FFC;
		font-weight: 700;
	}

	.home .home-entry-content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
	}

	.home .acf-home-subtitle {
		text-align: center;
		font-family: Arial,Helvetica,sans-serif;
		font-weight: 700;
		letter-spacing: 0.15em;
		margin: 0;
		padding : 0;
		flex: 1 0 100%;
		font-size: clamp(0.8rem, 2vw, 1rem);
	}

	.home .acf-home-graphic {
		flex: 1 0 100%;
		text-align: center;
		margin-block: 1em;
	}

	.home .acf-home-text {
		font-size: 0.9em;
		flex: 0 0 45%;
		line-height: 1.2em;
		min-width: 9.5rem;
		max-width: 15rem;
	}

	.home .acf-home-text-left {
		display : flex;
		justify-content: flex-end;
		margin-inline-end: .5rem;
	}
	
	.home .entry-content {
		width: 67%;
		margin : 0 2% 0 5%;
		display: inline-block;
		text-align: justify;
	}

	.home .entry-content a {
		color : #FFC;
	}

	.home .entry-content p {
		margin-bottom: 1.0em;
	}

	@media screen and (min-width:61.5625rem) {
		.home #main {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
		}

		.home .post-thumbnail {
			flex : 1 0 40vw;
			vertical-align: top;
			padding-top: 1.0em;
			max-width: 48%;
		}

		.home article {
			flex: 1 0 40vw;
			max-width: 48%;
		}

		.home .type-page .entry-header {
			margin-inline: auto;
		}
	

		.home .acf-home-subtitle {
			flex: 1 0 100%;
		}
	
		.home .acf-home-graphic {
			flex: 1 0 100%;
		}
	
		.home .acf-home-text {
			flex: 0 0 45%;
		}

		.home .acf-home-text-left {
			display: flex;
			justify-content: flex-end;
			margin-inline-end: .7rem;
		}

		.home .acf-home-text-right {
			display: flex;
			justify-content: flex-start;
			padding-inline-start: .7rem;
			border-left: 1px solid #FFC;
		}
		
	}

/* end HOME */

/* VERLEIH */

	.products {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: space-between;
		justify-content: center;
		align-items: center;
		gap: 2rem;
		padding: 0 1rem;
	}
	
		.product-preview {
			flex: 1 0 30%;
			min-width: 330px;
			margin-inline: auto;
			max-width: 96%;
			background: #FFF;
			padding: 1rem;
			box-shadow: 0px 2px 7px 0px #ccc;
		}
		
		.product-image img {
			width: 100%;
			min-width: 230px;
		}
		
		.product-image {
		}
		
		.product-image a {
			display: block;
		}
		
		.product-preview:hover {
			box-shadow: 0px 2px 11px 7px #ccc;
			transition: auto;
		}

		.product-title {
			font-size: 1rem;
			font-weight: 700;
			color: #000;
			padding: .5rem 0;
		}
		
		.product-title a {color: inherit;}
		
		.product-preview .cta.btn-show-product {
			width: 100%;
			margin: 0.5em auto 0 auto;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			background-color: #ff8100;
			color : #FFC;
			text-align: center;
			padding: 0.5rem 0;
		}


		/* VERLEIH ARTIKEL */
		
		.slider-nav {
			margin-top : 1rem;
		}
		
		.slider-nav .waps-slick-elem {
			padding: 0 .5rem;
		}

		.slider-for img {
			width: 100%;
		}

		.product-info {
			margin-top: 2rem;
		}

		
		.product-details {
			margin-right: 7.6923%;
			margin-left: 7.6923%;
		}
		
		p.product-data-label {
			font-weight: 700;
			margin: 0.1rem 0 0.3rem 0;
		}
		
		ul.product-data-value {
			margin-left: 0.5rem;
			list-style-type: none;
		}

	/* END VERLEIH */




	/* Page Kontakt */
	
	.content-area.kontakt aside.kontakt-right-box {
		padding : 1%;
		margin : 1%;
		border : 1px solid #666;
		background-color: #CCC;
	}

	.content-area.kontakt aside.kontakt-right-box  h3.kontakt-right {
		color : #015382;
		margin-bottom : 0.4em;
	}


	
/* page Raparatur, special left- and right 
	menues and inline page images */
#reparatur-service-header {
	--font-rep-menu : "Helvetica Neue","Arial",sans-serif;
	--col-bg-rep-menu : #015382;
	--col-rep-menu : #FFc;
	--radius-rep-menu-item : 20px;

	/* 
	border: double 8px #FFC;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	color : #FFC;
	*/

	font-family: var(--font-rep-menu);
	font-size: clamp(.9rem, 2vw, 20px);
}


header.rep-header {
	display: grid;
	grid-template-areas:
		"image"
		"menu-1"
		"menu-2";
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}

	nav#reparatur-navigation-left {
		grid-area: menu-1;
	}


	nav#reparatur-navigation-right {
		grid-area: menu-2;
	}

	.rep-header .page-image {
		grid-area: image;
		align-self: center;
    	justify-self: center;
		margin-bottom: 2rem;
	}


	
	.rep-header .category-menu {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: stretch;
		justify-content: space-around;
	}

	.rep-header .menu-elem {
		flex: 1 0 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: stretch;
		max-width: calc( 100% - 2rem );
	}

	.rep-header .menu-elem a {
		background: #015382;
		margin-block: .3rem;
		border-radius: 0.7rem;
		color:  #FFC;
		font-weight: 700;
		border: double 8px #FFC;
		font-size: clamp(1rem, 1rem, 1.2rem);
		word-break: break-word;
		min-height: 5em;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.service-site-main .entry-header {
		margin-top: 2rem;
	}

	@media screen and (min-width: 56.875em) {
		
		header.rep-header {
			grid-template-areas:
				"menu-1 image menu-2";
			grid-template-columns: 27% auto 27%;
			grid-template-rows: 1fr;

			max-width: 95%;
    		margin-inline: auto;
		}
		
		.rep-header .page-image {
			margin-top: 0;
			margin-bottom: 0;
		}

		.rep-header .menu-elem {
			max-width: unset;
		}

	}

	
/* general page image settings */

.page-image {
	margin-inline: 1rem;
	margin-block: auto;
}

.page-template-default .page-image img {
	border: solid 3px #015382;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}

/* full width page image pages */

.page-template-template_full-page-image .wp-post-image {
	margin-top : 0.5em !important;
	width : 100%;
	border: solid  3px #015382;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	padding : 4px;
}



/* Category overview 1111 */

.category-menu {
	list-style-type: none;
	margin-top: 1.0em;
}

.verkauf-site-main .category-menu {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	align-items: flex-start;
}

.category-menu li {
	flex: 1 0 auto;
	min-width: 110px;
	text-align: center;
	margin-inline: 1.0em;
	margin-block: 1.0em;
	color : #000;
}

.category-menu li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	color : #000;
}



@media screen and (min-width: 56.875em) {

body {
	background-color: #CCC;
	font-family: Arial,Helvetica,sans-serif;
}

#primary {
	margin-top: 0.5em;
}

.site {
	/* nothing set here, its the space around the actual content, maybe use it later */
	background-color: transparent;
}
.site-inner {
	width: 95%;
	background-color: #FFF;
	max-width: 1090px;
}

.site-header {
	padding-top : 0;
	padding-left : 0;
	padding-right: 0;
	padding-bottom: 0.8em;
    border-bottom: 1px solid #CCC;
    margin-bottom: 1em;
}

.site-header-main {
	height: 90px;	
	border-bottom: 1px solid #CCC;
	background-color: #000;
}

.site-title,
.site-title a {
	text-align: center;
	text-transform : uppercase;
	font-size: 1.4em;
	width: 100%;
	margin: 0.7em 0 0 0;
}

.site-description {
	text-align: center;
	font-family: Arial,Helvetica,sans-serif;
	font-weight: 700;
	color : #FFC;
	letter-spacing: 0.75em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	width: 80%;
	font-size: 0.7rem;
	margin-left: auto;
	margin-right: auto;
}

.site-branding {
	margin : 0;
	background-color: black;
	color : #FFC;
	width : 36.7%;
	height : 100%;
	vertical-align : middle;
	max-height : 90px;
	max-width : 400px;
}

.site-branding .site-title a {
    color: #FFC;
}

.site-branding-right {
	width : 63.3%;
	height: 100%;
	max-height : 90px;
	text-align : right;
	
}

.site-branding-right .header-image {
	max-height: 90px;
	background-color : #f0f0b2;
	vertical-align : middle;
}

.site-branding-right img {
	height : inherit;
	max-height : 90px;
	width : auto;
}

.site-header-menu {
	margin-top : 0.3em;
	margin-left : 2.7em;
	margin-bottom: 0;
}

.site-content {
	padding : 0;
	margin-bottom : 3.0em;
}

.site-footer {
	padding: 2em 4%;
	background: #222;
	border-top: 3em solid #FFC;
}

.site-info  {
	order : 5;
}

.menu-toggle {
	display: none;
}

.social-navigation a {
	border: 1px solid #FFC;
    border-radius: 50%;
    color: #FFC;
    display: block;
    height: 35px;
    position: relative;
    width: 35px;
}

/* breadcrumbs */
	p#breadcrumbs {
		margin: 0 0 0 3.0em;
		font-size : 0.9em;
		width: 93%;
	}


/* comon parts - body text  */

	.type-page .entry-header,
	.type-page .entry-content,
	.type-page .entry-footer
	 {
		margin-left : 12%;
		margin-left : 15%;

	}


/* Category page (verkauf) */

/*
	.products .product-preview {
		display: inline-block;
		width : 260px;
		min-height : 295px;
		vertical-align: top;
		border : 0px solid red;
		padding : 0.5em 0;
	}

	.product-preview .product-image {
		width : 100%;
		text-align: center;
		margin-bottom: 0.8em;
	}

	.product-preview .product-image img {
		width : 200px;
		height : auto;
		border : 0;
	}

	.product-preview .product-title {
		text-align: center;
		font-size : 0.8em;
		font-weight: 700;
		min-height: 45px;
		max-width: 200px;
		margin: 0 auto 0 auto; 
	}

	.product-preview .product-price {
		text-align: center;
		font-size : 0.8em;
		font-weight: 700;
	}

	.product-preview .cta {
		display: block;
		border : 1px solid green;
		background-color : #ff8100;
		color : #FFC;
		text-align: center;
		font-weight: 700;
		text-transform: uppercase;
		font-size: 0.9em;
		padding : 0.5em;
	}

	.product-preview .btn-show-product {
		width : 200px;
		max-width : 200px;
		margin : 0.5em auto 0 auto;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
	    border-radius: 4px;
	}

	.cta a {
		background-color : #ff8100;
		color : #FFC;	
	}
	
	a.verleih-link {
	   padding: 0.5em;
		background-color: #015382;
		vertical-align: top;
		border: double 4px #FFC;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 8px;
		color: #FFC;
	}

	*/
	
/* Product page (Artikel) */
	.page-template-template_leihartikel .site-main,
	.page-template-template_artikel .site-main {
		padding-top: 1.0em;
	}

	.page-template-template_leihartikel .product-images,
	.page-template-template_artikel .product-images {
		display: inline-block;
		vertical-align: top;
		width : 50%;
		max-width : 500px;
		margin-left: 1.0em;
	}

	.page-template-template_leihartikel .product-main-image,
	.page-template-template_artikel .product-main-image {
		width : 100%;
		max-height: 375px;
		text-align: center;
	}

	.page-template-template_leihartikel .product-main-image img,
	.page-template-template_artikel .product-main-image img {
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
	    border-radius: 10px;
	    width: auto;
	    max-height: 375px;
	}

	.page-template-template_leihartikel .product-thumbnails,
	.page-template-template_artikel .product-thumbnails {
		width : 99%;
		margin-top: 1.0em;
		margin-left: auto;
		margin-right: auto;
	}

	.page-template-template_leihartikel .product-thumb,
	.page-template-template_artikel .product-thumb {
		display : inline-block;
		width : 123px;
		margin: 0;
		padding : 1% 8px;
	}

	.page-template-template_leihartikel .product-thumb img,
	.page-template-template_artikel .product-thumb img {
		width : 115px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	    border-radius: 5px;
	}

	.page-template-template_leihartikel .product-info,
	.page-template-template_artikel .product-info {
		vertical-align: top;
		display: inline-block;
		margin  : 0 0 0 0.5em;
		width : 45%;
		border : 0;
	}

	.page-template-template_leihartikel .entry-header,
	.page-template-template_artikel .entry-header {
		margin : 0;
	}
	.page-template-template_leihartikel .entry-title,
	.page-template-template_artikel .entry-title {
		font-size: 2.4em;
		margin : 0;
		padding : 0;
		width : 100%;
	}

	.page-template-template_leihartikel .entry-content,
	.page-template-template_artikel .entry-content {
		clear: both;
		width : 46%;
		margin : 1.0em 2% 0 2%;
		float : right;

	}

	.page-template-template_leihartikel .entry-footer,
	.page-template-template_artikel .entry-footer {
		clear: both;
		width: 100%;
		margin-top: 2.5em;
	}
	
	.product-info .product-details {
		width : 98%;
		margin-left: 2%;
		border : 0;
	}

	.product-info .product-details td.product-data-label {
		width : 30%;
		margin : 0;
		padding : 0.2em 0;
		font-weight: 700;
		vertical-align: top;
		border : 0;
	}

	.product-info .product-details td.product-data-value {
		width : 70%;
		margin : 0;
		padding : 0.2em 0;
		font-weight: 200;
		vertical-align: top;
		border : 0;
	}

	
/* page Restaurierung, special left- and right menues and inline page images */
/* different heights than in Reparatur */

	.rest-navigation .rest-menu-left,
	.rest-navigation .rest-menu-right {
		display: inline-block;
		width : 25%;
		font-family: "Helvetica Neue","Arial",sans-serif;
		margin: 0;
		padding : 0;
		font-weight: 700;
		vertical-align: top;
	}

	.rest-menu-left .menu-elem,
	.rest-menu-right .menu-elem {
		background-color: #015382;
		border: double 8px #FFC;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
	    border-radius: 20px;
	    color : #FFC;
	    height: 110px;
	    margin : 9px 0.5em;
	    text-align: center;
	  }

	.rest-menu-left div a,
	.rest-menu-right div a {
		color: inherit;
		background-color: inherit;
		vertical-align: middle;
		padding-bottom: 0;
		line-height: 1em;
	}

	.rest-menu-left .rest-name,
	.rest-menu-right .rest-name {
		display: table-cell;
    	height: 4.0em;
    	vertical-align: middle;
	}

	.rest-menu-left .rest-name,
	.rest-menu-right .rest-name {
		display: table-cell;
    	height: 5.5em;
    	vertical-align: middle;
	}

	.rest-menu-left .first-elem,
	.rest-menu-right .first-elem
	 {
		margin-top : 0 !important;
	}

	.rest-menu-left .last-elem,
	.rest-menu-right .last-elem {
		margin-bottom : 0 !important;
	}



/* inline page image pages */
	#inline-page-image {
		width: 45%;
		max-width: 470px;
		margin-left: 2.5em;
		padding: 0;
		display: inline-block;
		vertical-align: top
	}

	#inline-page-image img {
		border: solid  3px #015382;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		padding : 4px;	
	}

	.page-template-template_half-page-image .entry-header {
		margin-left: 2.6em;
	}

	.page-template-template_half-page-image .entry-title {
		margin-left: 0;
		font-weight: 200;
		font-size : 1.8em;
		margin-bottom: 0.5em;
		color : #015382;
	}

	.page-template-template_half-page-image article {
		width: 100%;
	}

	.page-template-template_half-page-image .entry-content {
		display : inline-block;
		width: 45%;
		margin-left : 3%;
		margin-right : 0;
	}

	.page-template-template_half-page-image .halfimgpage-parent-link {
		display : inline-block;
		margin-bottom: 0.8em;
		box-shadow: none;
		font-weight: 700;
	}

/* Page Kontakt */
.content-area.kontakt article {
    width : 55%;
    display : inline-block;
}

.content-area.kontakt aside.kontakt-right-box {
	width: 40%;
	display: inline-block;
	vertical-align: top;
	padding : 1%;
	margin-left : 1%;
	border : 1px solid #666;
	background-color: #CCC;
	min-height: 500px
}

.content-area.kontakt aside.kontakt-right-box  h3.kontakt-right {
	color : #015382;
	margin-bottom : 0.4em;
}


/* content Category Jobs */

	.category-jobs article {
		width : 92%;
		margin : 1.0em 4% 2.5em 4%;
		border : 2px solid #000;
		background-image: url('./img/stellenausschreibung.png');
		background-position: bottom right;
		background-repeat: no-repeat;
		background-size : 29% auto;
		min-height: 25em;
	}

	.category-jobs article .entry-header {
		width : 100%;
		margin : 0;
		padding : 0.5em 5.0em 0.5em 3.0em;
		background-color : #4d8699;
	}

	.category-jobs article .entry-title {
		line-height : 1.5em;
		margin : 0;
		font-size : 1.5rem;
		color : #FFF;
		background-color: #4d8699;
	}

	.category-jobs article .bks-jobtitle-prefix {
		font-weight: 200 !important;
	}

	.category-jobs article .entry-title a {
		color : #FFF;
		background-color: #4d8699;
	}

	.category-jobs article .entry-content {
		float : initial;
		margin : 0.8em 0 1.0em 5% !important;
		width : 65% !important;

		color : #000;
		background-color: #FFF;
	}

	.category-jobs article footer {
		display: inline-block;
		margin : 1.0em 0 0 5% !important;
		width: 100% !important;
		float: initial !important; 
	}

/* SIDEBARs */

	.page-template-template_leihartikel #secondary,
	.page-template-template_artikel #secondary {
		float : left;
		margin : 1.0em 0 0 1.5em;
		width : 25%;
		padding : 0;
	}

/* BLOG */

	.blog .post-thumbnail img {
	    display: block;
	    width: 50%;
	    border: solid 3px #015382;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
	}

	.blog .entry-content img,
	.category .entry-content img,
	.archive .entry-content img {
		border: solid 3px #015382;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;

	}

}