/* BASIC STYLESHEET for http://www.tischlerei-kiel.de/ */
/* author: ideenwerft GmbH */
/* copyright 2017 */

/* =FONTS ======================== */
@import url("fonts.css");


/* =LAYOUT ======================== */
body {background:#060606;color:#d2d2d2;font-family: 'Open Sans', sans-serif;font-size:16px;font-weight: 300;}
.header-top {
	position:relative;
}
header .logo {
	padding:30px 0 15px;
}
span.phone {
	position: absolute;
	top: 11px;
	right: 0;
}

header .keyvisual-wrap {position: relative;}
header .keyvisual img {max-width: 170%;width: 170%;margin-left: -35%;}
header .keyvisual-wrap .keyvisual-button  {position: absolute;bottom: 15px;width: 100%;left: 0;text-align: center;}
header .keyvisual-wrap .keyvisual-button a {color:#060606;background:#967342;padding:5px 5px;font-size: 13px;border-radius: 2px;opacity: .85;}
header .keyvisual-wrap .keyvisual-button a:hover {opacity: 1;background: rgba(255, 255, 255, 0.8);}

.dce-keyvisual .badge div, 
.dce-keyvisual .badge a:link, 
.dce-keyvisual .badge a:visited {
	background: #cfe09b;
    color: #111;
    border-radius: 100%;
}
.dce-keyvisual .badge a:hover, 
.dce-keyvisual .badge a:focus {
	background: #b5ca74;
}
@media (min-width: 768px) {
	.dce-keyvisual .badge div, 
	.dce-keyvisual .badge a:link, 
	.dce-keyvisual .badge a:visited {
		width: 200px;
		height: 200px;
		padding: 1rem;
	}
}
@media (max-width: 767px) {
	.dce-keyvisual .badge p {
		font-size: 1.05rem;
    	line-height: 1.5em;
	}
}
@media (max-width: 1399px) {
	.dce-keyvisual .badge {
		z-index: 100;
		bottom: 20%;
	}
}

main {
	margin: 60px 0;
}
.content {
	margin-bottom: 40px;
}
.aside {
	margin-top: 30px;
}
.aside > div:first-child {
	border-top:1px solid rgba(210, 210, 210, 0.25);
	padding-top: 30px;
}

footer  {background: url(../Img/background-klein.jpg);background-size: cover;}
footer > .container > .row {padding-top:30px;padding-bottom: 30px;}


@media (min-width: 480px) {
    header .keyvisual-wrap .keyvisual-button a {padding: 5px 10px;} 
    header .keyvisual img {max-width: 150%;width: 150%;margin-left: -25%;}
}

@media (min-width: 680px) {
    header .keyvisual img {max-width: 100%;width: 100%;margin-left: 0;}
}

@media (min-width: 768px) {  
    header .logo {
		padding: 15px 0 12px;
		text-align: left;
	}
    span.phone {
		position: absolute;
		top: 15px;
		left: auto;
		right: 55px;
		font-size: 17px;
	}
	span.insta {
		position: absolute;
		top: 9px;
		left: auto;
		right: 15px;
		font-size: 25px;
	}
    header .keyvisual-wrap .keyvisual-button > div {display: flex;max-width: 870px;}
    header .keyvisual-wrap .keyvisual-button > div a {width: 100%;font-size: 17px;margin: 0 15px;}
    
    .aside {margin-top: 0px;}
    .aside > div:first-child {border-top:0px;margin-right: 0;padding-top: 0;}
    .aside h3 {margin-top: 0;}
    
    
    footer {background: url(../Img/background-mttel.jpg);background-size: cover;}

}
@media (min-width: 992px) {
    header .logo {
		padding: 15px 0;
	}
    header .keyvisual-wrap .keyvisual-button {
		bottom: 30px;
	}
	.navbar {
		position: absolute;
		bottom: 4px;
		right: 0;
	}
    main {margin: 90px 0;}
     .aside {padding-left: 30px;}
    footer > .container > .row {padding-top: 60px;}
}

	
@media (min-width: 1200px) {
     header .keyvisual-wrap .keyvisual-button {bottom: 60px;}
     header .keyvisual-wrap .keyvisual-button > div a {font-size: 19px;padding-top: 8px;padding-bottom: 8px;}
     footer {background: url(../Img/background.jpg);background-size: cover;}
    .aside {padding-left: 45px;position: relative;}
    .aside::after {content: "";display: inline-block;position: absolute;left: 15px;top: 0;width: 1px;height: 100%;background: rgba(210, 210, 210, 0.3);}
    
}

.dce-keyvisual img {
	width: 100%;
}

/* =transition ======================== */

nav.navbar .navbar-nav>li>a,
nav.navbar .navbar-nav>li>a::after,
.btn,
body a.button,
header .keyvisual-wrap .keyvisual-button a,
.subnav .navbar-nav > li > a,
.content a::after,
.aside a::after,
.dce-image-tiles a::after,
#partner .referenz,
#partner .referenz a > img,
.tx-powermail .form-control,
.subnav .sr-only h3,
.tx-felogin-pi1 form input[type="submit"],
footer a:after {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;}


.subnav .navbar-nav > li > a i,
.dce-keyfacts .box:after {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.51s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
 


/* =BASIC STYLES ======================== */
.small {font-size: 0.9em;}
.xsmall {font-size: 0.8em;}
.red, .error {color:#c00;}
.grey {color:#999;}
.clear {clear:both;}
.italic {font-style:italic;}
.hide {display:none;}
.align-center {text-align:center;}
.align-right {text-align:right;}
.align-justify {text-align:justify;}
.align-left {text-align:left;}
.note {font-size:0.9em;font-style:italic;color:#999;}

/* links */
a:hover, a:active, a:focus {text-decoration: none;outline: none;}
a:Link, a:visited {text-decoration: none;color: #d2d2d2;font-weight: 500;}
.content a:Link,
.aside a:Link,
footer a:Link {position: relative;}
.content a:hover,.content a:focus {outline:none;}
.content a {color: #d2d2d2;position: relative;font-weight: 800;}
.content a::after,
.aside a::after {content: "";display: inline-block;position: absolute;bottom: 0;left: 0;width: 0;height: 1px;background: #d2d2d2;}
.content a:hover:after,
.aside a:hover:after {width: 100%;}

:active, :focus {outline:none;}
a.internal-link:link, a.internal-link:visited {}
a.internal-link:hover, a.internal-link:focus {}
a.internal-link::before, a.external-link::before {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	padding-left: 5px;
	padding-right: 5px;
	
	font-family: 'FontAwesome';
	font-weight: 900;
	content: "\f101";
}
a.download::before {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	padding-left: 5px;
	padding-right: 5px;

	font-family: 'FontAwesome';
	font-weight: 900;
	content: "\f0f6";
}
a.external-link-new-window:link, a.external-link-new-window:visited {}
a.external-link-new-window:hover, a.external-link-new-window:focus {}
a.pdf {}
a.doc {}
a.mail:link, a.mail:visited {}
a.mail:hover, a.mail:focus {}
/* TYPO3 : anker-tags für interne links nach oben setzen*/
a.anchor {position:absolute;margin-top:-35px;}

.ce-gallery[data-ce-columns="3"] .ce-column {width: 32%;}
.ce-row {display: flex;margin-bottom: 15px;}
.ce-column {margin-right: 15px;}

.iframewrap {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.iframewrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* text */
h1 {margin:0px 0px 20px;font-size:33px;font-weight: 300;}
h2 {margin:0px 0px 15px;font-size:24px;font-weight: 600;color:#967342;}
h3 {margin:25px 0px 15px;font-size:22px;font-weight: 600;}
h4 {margin:0px 0px 15px;font-size:20px;font-weight: 300;}
p {margin: 0 0 15px;}

@media (min-width: 992px) {    
    h1 {font-size:38px;}
    h2 {font-size:25px;}
    h3 {font-size:22px;}
}

blockquote {padding:15px 40px;}
blockquote p {color:#0061a1;font-size:14px;font-style:italic;}
blockquote cite {color:#888;font-size:12px;font-style:italic;}
table {font-size: 1em;border-collapse:collapse;border-spacing:0;}
table th, table td {vertical-align:top;}
/* achtung: tabellen brauchen weiterhin 'cellspacing="0"' im markup! */
main.content ul {padding-left: 40px;}
ul li {text-align: left;}
table p {padding:0;margin:0;}
hr, hr.linie-davor,  hr.linie-danach {clear:both;background-color:#adadad;color:#adadad;border:#adadad;height:1px;margin:10px 0;}
address, caption, cite, code, dfn, var {font-style:normal;font-weight:normal;}
caption, th {text-align:left;}
fieldset {border:none;}
input, textarea, select {border:0px solid #ccc;font-size:1em;padding:4px 10px;}
input:focus, textarea:focus {background-color:rgba(255, 255, 255, 0.5);color: #fff;}
input.powermail_input, input.powermail_submit, textarea {-webkit-appearance: none;}
a i {cursor: pointer;}
img {
	max-width: 100%;
	height: auto;
}
.btn,
body a.button {
	padding:5px 30px;
	color: #fff !important;
	display: inline-block;
	background:#967342;
	border-radius: 2px;
	opacity: 1;
	font-weight: 400;
	font-size: 1em;
}
.btn:hover,
body a.button:hover {
	text-decoration: none;
	opacity: 0.8;
}
.btn::after,
body a.button::after {display: none;}
.col-xs-12 {margin-bottom: 30px;}




/* =NAVIGATION ======================== */
.navbar {
	background: none;
	border: 0px;
	min-height: 1px;
	margin-bottom: 0;
	padding-right: 0;
}
.navbar-header {
    position: absolute;
    right: -15px;
    top: -50px;
}
.navbar-toggle {border: 0;margin: 0;padding: 15px 0 15px 15px;background: none;}
nav.navbar .navbar-toggle .icon-bar {background:#d2d2d2;}
nav.navbar .navbar-toggle:focus,
nav.navbar .navbar-toggle:hover {background: none;}
nav.navbar .navbar-toggle:hover .icon-bar {background: #967342;}

nav.navbar .navbar-collapse,
nav.navbar .navbar-form {border: none;}
nav.navbar .navbar-nav>li>a {color:#d2d2d2;opacity: .95;position: relative;}
nav.navbar .navbar-nav li a .caret {display: none;}
nav.navbar .navbar-nav>li>a:hover {color:#967342;opacity: 1;}
nav.navbar .navbar-nav>.active>a,
nav.navbar .navbar-nav>.active>a:focus,
nav.navbar .navbar-nav>.active>a:hover {background: none;color:#967342;font-weight: 800;}
nav.navbar .navbar-nav>.dropdo wn>a i {display: none;}

.dropdown-menu .dropdown-toggle::after {
	display: none;
}
@media (min-width:768px) {
    nav.navbar .navbar-nav>li>a {font-size: 14px;padding: 10px;}
}
@media (min-width:992px) {
	.navbar-header {
		right: 0;
		top: -35px;
	}
    nav.navbar .navbar-nav>li>a {
		font-size: 17px;
		padding: 5px 5px 18px;
		margin: 0 10px;
	} 	
}
@media (min-width: 1200px) {
	.navbar-expand-xl .navbar-nav {
		display: block;
	}
	.navbar-expand-xl .navbar-nav > li {
		display: inline-block;
	}
}


/* 2.Ebende */
nav.navbar .navbar-nav>.dropdown:hover ul {display: block;} 
nav.navbar .navbar-nav>.dropdown.open a {background: none;color:#967342;} 
nav.navbar .navbar-nav>.dropdown ul {background: #343434;} 
nav.navbar .navbar-nav>.dropdown.open ul li:first-child a span.caret {display: none;} 
nav.navbar .navbar-nav .open .dropdown-menu>li>a {color: #fff;} 
nav.navbar .navbar-nav .open .dropdown-menu>li>a:hover {color: #8e6d3e;font-weight: 700;}
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {background: none;color: #967342;}
.dropdown-menu>.active>a, 
.dropdown-menu>.active>a:focus, 
.dropdown-menu>.active>a:hover {background: none;font-weight: 700;color:#967342;}

@media (min-width:768px) {
    nav.navbar .navbar-nav>.dropdown ul {background: #060606;} 
    .navbar-right .dropdown-menu {right: inherit;}
    .dropdown-menu>li>a {
		color: #fff;
		padding: 5px 15px;
		display: block;
		white-space: nowrap;
		opacity: 0.8;
	}
}

.navbar-collapse {box-shadow: none;}

/* Subnavi */
ul.subnavi {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}





/* =CONTENT ELEMENTS ======================== */
.ce-bodytext {padding-bottom: 15px;}

/*  Bild-Kacheln (Referenzen)  */
.dce-image-tiles {
	margin-top: 40px;
}
.dce-image-tiles .tile {
    overflow:visible;
}
.dce-image-tiles .tile a::after {
	position: absolute;
	left: 0;
	top: 0; 
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .35;
}
.dce-image-tiles .tile a:hover:after {
	opacity: 0;
}
.dce-image-tiles .tile .text-wrap {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 50%;
	padding: 15px;
	z-index: 100;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
	background: none;
}
.dce-image-tiles .tile  h3 {
	font-size: 20px;
	font-weight: 400;
	padding-top: 5px;
}


#partner .referenz {background:rgba(255, 255, 255, 0.85);padding-bottom: 30px;height: 200px;}
#partner .referenz:hover {background:rgba(255, 255, 255, 1);}
#partner .referenz a {padding: 30px;display: flex;align-items: center;justify-content: center;position: static;height: 100%;}
#partner .referenz a::after {display: none;}
#partner .referenz img {max-width: 165px; -webkit-filter: grayscale(.88);filter: grayscale(.88);}
#partner .referenz:hover img {-webkit-filter: grayscale(0);filter: grayscale(0);}
#partner .referenz .referenz-inner {top: auto;bottom: 0;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);}
#partner .referenz .referenz-inner .referenz-name {color:#6b6b6b;text-shadow: none;font-size: 23px;line-height: 20px; font-weight: 300;}

@media (min-width:768px) {
    #partner .referenz .referenz-inner .referenz-name {font-size: 18px;}
}
@media (min-width:992px) {
    #partner .referenz .referenz-inner .referenz-name {font-size: 23px;}
}

/* Referenz Übersicht */
body#referenz .dce-image-tiles .tile {
	background: rgba(255,255,255,0.2);
    height: 100%;
    padding: 20px;
	transition: all 1s;
}
body#referenz .dce-image-tiles .tile:hover {
	background: rgba(255,255,255,0.3);
}
body#referenz .dce-image-tiles .tile a {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dce-image-tiles .tile a::after {
	display: none;
}
.dce-image-tiles .tile a .text-wrap {
	position: relative;
    text-align: left;
    top: inherit;
    left: inherit;
    right: inherit;
    bottom: inherit;
    display: block;
	padding: 0;
}
body#referenz .dce-image-tiles .tile img {
	width: inherit;	
	margin-right: 20px;
	max-width: 50px;
}
.dce-image-tiles .tile .hover-content {
	display: none;
}

/* Partner */
body#partner .dce-image-tiles .tile {
	background: rgba(255,255,255,0.9);
	height: 100%;
	padding: 15px 20px;
	flex-direction: column;
}
body#partner .dce-image-tiles .tile a {
	display: flex;
    height: 100%;
    flex-direction: column-reverse;
    justify-content: space-between;
}
body#partner .dce-image-tiles .tile a .text-wrap {
	-webkit-transform: none; 
    -ms-transform: none;
    transform: none;
}
body#partner .dce-image-tiles .tile h3 {
	color: #666;
	text-shadow: none;
	font-size: 18px;
}
body#partner .dce-image-tiles .tile img {
	width: auto;
}

/* =OTHER ======================== */
.back-button {margin-bottom: 30px;}

@media(min-width:768px) {
    .back-button {margin-bottom: 60px;}
}



/* Keyfacts */
@-webkit-keyframes SlideIn {
	from {right:-100%;}
	to {right:30px;}
}
@-moz-keyframes SlideIn {
	from {right:-100%;}
	to {right:30px;}
}
@-o-keyframes SlideIn {
	from {right:-100%;}
	to {right:30px;}
}
@keyframes SlideIn {
	from {right:-100%;}
	to {right:30px;}
}

/* keyfacts */
.dce-keyfacts {
	margin-top: 50px;
	margin-bottom: 60px;
}
.dce-keyfacts .box {
	height: 100%;
	margin-top:0;
	padding:15px;
	background:#343434;
	border-radius:0;
	border:none;
	position: relative;
}
.dce-keyfacts .box:hover {
	background: transparent;
}
.dce-keyfacts .box::after {
	content: "";
	display: inline-block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	height:100%;
	width: 100%;
	background: url(../Img/background-klein.jpg);
	background-size: cover;
	opacity: 0;
}
.dce-keyfacts .box:hover:after {
	opacity: 1;
}
.dce-keyfacts .box a,
.dce-keyfacts .box .img-wrap,
.dce-keyfacts .box .text {
	z-index: 100;
	position: relative;
}
.dce-keyfacts .box a {
	display: block;
	text-align: center;
}
.dce-keyfacts img {
	margin:15px auto 15px;
	display: block;
}
.dce-keyfacts .text {
	border-radius:0;
	overflow:hidden;
	background: none;
	font-size: 19px;
	font-weight:300;
	color:#fff;
	white-space: inherit;
	height: 60px;
	padding: 0;
	margin: 0;
}
.dce-keyfacts .text .number {
	font-weight:900;
	display:block;
	margin-bottom: 5px;
}

@media(min-width:480px) {
    .dce-keyfacts .text {
		height: auto;
		padding: 5px 0;
	}
    .dce-keyfacts .text .number {
		display: inline-block;
		padding-right: 5px;
	}
}



/* =FOOTER ======================== */
footer {color: #fff;font-size: 14px;}
footer p i {padding-right: 10px;}
footer a:link,
footer a:visited {color: #fff;position: relative}
footer a::after {content: "";display: inline-block;position: absolute;bottom: 0;left: 0;width: 0;height: 1px;background: #fff;}
footer a:hover:after {width: 100%;}
footer a:hover {}

footer div.headline {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 15px;
}

.musthavecopy {
	background:#000;
	padding-top: 15px;
	overflow: hidden;
}

.musthave {padding: 10px 0;}
.musthave {list-style: none;display: flex;margin: 0;}
.musthave li  {float:left; }
.musthave li a {padding: 5px 5px;margin: 0 5px; display: block;}
.musthave li:first-child a {padding-left: 0;}

footer .dce-gmaps {
	margin: 0;
}

@media (min-width: 992px) {
    footer .iframewrap {padding-bottom: 37.25%;}
    
    .musthavecopy {padding: 5px 0px 10px;}
    .copy {width: 60%;display: inline-block;float: left;padding-top: 5px;}
    .musthave {overflow: hidden;display: inline-block;float: right;padding-top: 0;}
    .musthave {float: right;display: inline-block;padding: 0;}
    .musthave li a {padding-bottom: 0;}
    .musthave li:first-child a {padding-left: 5;}
    .musthave li:last-child a {padding-right: 0;}
}

@media (min-width:1200px) {
    footer iframewrap {padding-bottom: 30.25%;}
}

/* =EXTENSIONS ======================== */
/* +++ Newsletter Anmeldung +++ */
.layout_form {padding: 0 0 30px;background: #fff;}
.layout_form .cr_ipe_item label {display: none;}
.layout_form .cr_ipe_item input {width: 100%;max-width: 300px;margin: 0 auto;border:1px solid #ccc;text-align: center;margin-bottom: 15px;}
.layout_form input::-webkit-input-placeholder {color: #110111;}




/* POWERMAIL */
.tx-powermail {
	margin-top: 20px;
}
.content .tx-powermail fieldset {margin: 0 -15px;}
.tx-powermail .container-fluid {padding-left: 0;padding-right: 0;}
.tx-powermail h3 {display: none;}

div.tx-powermail legend {display: none;}
div.tx-powermail .powermail_fieldset_36 legend {display: none;}
div.tx-powermail .powermail_file  {border:0;}
div.tx-powermail fieldset + fieldset {margin: 20px 0;padding: 20px 0;}

.powermail_fieldwrap.col-md-12 {
	padding:0;
}
.tx-powermail .form-control {
	border-radius: 2px;
	max-width: 700px;
	background:#fff;
	color: #000;
	font-weight: 400; 
	opacity: .850;
}
.tx-powermail .form-control:focus {-webkit-box-shadow:none;box-shadow:none;opacity: 1;border-color: #fff;}

div.tx-powermail fieldset .mandatory {
	color: #c00;
	padding-left: 3px;
}

.tx-powermail fieldset .powermail_submit.btn.btn-primary {display: inline-block;border:0;}
.tx-powermail fieldset .powermail_submit.btn.btn-primary:hover {background:#967342;color: #fff;text-decoration: none;opacity: 1;}

.tx-powermail p.note {margin-bottom: 5px;}


div.formError + input,
div.formError + textarea,
.tx-powermail .powermail_fieldset .powermail_field_error,
.tx-powermail .powermail_fieldset .parsley-error,
.tx-powermail .powermail_fieldset .powermail_form .parsley-error:focus,
.tx-powermail .powermail_fieldset div.error {border:1px solid #c00;background: none;}

.tx-powermail .powermail_fieldset .parsley-errors-list {border: 0;background: none;margin: 5px 0;}
.tx-powermail .powermail_fieldset .parsley-errors-list>li {background: none;font-size: 14px;padding: 0;}


/* login */
.tx-felogin-pi1 form legend {display: none;}
.tx-felogin-pi1 form legend {display: none;}

.tx-felogin-pi1 form {padding-top: 15px;}
.tx-felogin-pi1 form label {font-weight: 400;}
.tx-felogin-pi1 form input {border: 0;background: rgba(0,0,0,.6);width: 100%;margin-bottom: 15px;max-width: 100%;}
.tx-felogin-pi1 form input[type="submit"] {color: #fff;display: inline-block;background: none;border-radius: 2px;width: auto;padding-left: 15px;padding-right: 15px;font-weight: 400;border: 2px solid #fff;}
.tx-felogin-pi1 form input[type="submit"]:hover {background:rgba(255, 255, 255, 0.75);color:#060606;text-decoration: none;border-color: rgba(255, 255, 255, 0.75);}



/* .... PRINT STYLES .... */
@media print {
    .header-top,
    .footnavi,
    .musthave,
	.aside,
	.map {
        display: none;
    }
}