/* crimson-text-regular - latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/crimson-text-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/crimson-text-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/crimson-text-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/crimson-text-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/crimson-text-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/crimson-text-v19-latin-regular.svg#CrimsonText') format('svg'); /* Legacy iOS */
}
/* crimson-text-700 - latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/crimson-text-v19-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/crimson-text-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/crimson-text-v19-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/crimson-text-v19-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/crimson-text-v19-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/crimson-text-v19-latin-700.svg#CrimsonText') format('svg'); /* Legacy iOS */
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;  }
table { border-collapse: collapse; border-spacing: 0; }
.align-center { text-align: center;	}


/********************************
  Basis Styles
********************************/
* {margin: 0; padding: 0; }
.clear {overflow:hidden; clear: both;}
.trenner {overflow:hidden; clear: both;width: 100%;height: 20px;}
* html .clear {height:1%}
img {border: none; max-width: 100%; height: auto;}
input, select, textarea { -ms-box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: none; border-radius: 0; }
input[type=checkbox] { -webkit-appearance: checkbox; appearance: checkbox; -moz-appearance: checkbox; background: none; }
body { font-family: 'Crimson Text', serif; font-size: 100%; font-weight: 400; text-align: left; color: #333; line-height: 1.875em; background-color: #f5e5d1; }
.csc-default { position: relative; overflow: hidden; }
.spalten .csc-default { position: relative; overflow: visible; }
div.csc-textpic { clear: both; }
div.csc-textpic .csc-textpic-imagewrap .csc-textpic-image { margin-bottom: 0; }
table { line-height: 1.5em; }


/********************************
   Weiche Übergänge               
********************************/
mobiltrigger, #navigation, #navigation ul li ul, #navigation ul li a, #inhalt a, .kachel .bildrahmen img { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }


/********************************
  Kopf
********************************/
#kopf { background-color: #f5e5d1; height: 140px; width: 100%; position: fixed; z-index: 294; }
#kopfinnen { position: relative; width: auto; max-width: 1200px; margin: auto; height: 140px; }
#logo { position: absolute; width: 330px; height: auto; text-align: center; top: 12px; z-index: 510; left:50%; margin-left: -165px; }
#logo .logoHead { font-size: 2.5em; border-bottom: 1px solid #333; padding: 0 0 20px 0; }
#logo .logoSub { font-size: 1.3em; }
a #logo { color: #333; }
#mobiltrigger { display: none; position: fixed; top: 70px; right: 30px; width: 48px; height: 48px; cursor: pointer; z-index: 417; background-image: url(../img/mobiltrigger.png); }
#mobiltrigger.kreuz { background-image: url(../img/mobiltrigger_close.png); }
#kopfAdresse { position: absolute; width: 200px; top: 30px; left: 15px; line-height: 1.3em; }
#kopfAdresse a { color: #333; text-decoration: none; }
#kopfAdresse a:hover { text-decoration: underline; }
#kopfOeffnung { position: absolute; width: 200px; top: 30px; right: 15px; line-height: 1em; text-align: right; line-height: 1.3em; }

@media only screen and (max-width: 1024px) {
	#mobiltrigger { display: inline; }
	#logo { width: 260px; margin-left: -130px; }
	#logo .logoHead { font-size: 1.8em; padding: 0 0 15px 0; }
	#logo .logoSub { font-size: 1.2em; }
	#kopfAdresse { display: none; }
	#kopfOeffnung { display: none; }
}


/********************************
  Navigation
********************************/
#navigationwrap { position: fixed; background-color: #464646; height: 40px; margin: 0; font-weight: 400; z-index: 290; text-align: center; top: 140px; width: 100%; }
#navigationinnen { position: relative; width: auto; max-width: 1200px; margin: auto; }
#navigation { position: relative; margin-top: 0;  z-index: 290; }
#navigation ul { border-left: 1px solid #f5e5d1; list-style: none; position: relative; float: left; margin: 0; padding: 4px 0; width: calc(100% - 1px); }
#navigation ul li { position: relative; float: left; margin: 0; padding: 0; width: calc(16.666666666% - 1px); border-right: 1px solid #f5e5d1; }
#navigation ul li a { display: block; color: #f5e5d1; text-decoration: none; font-weight: 400; font-size: 1.3125em; line-height: 1.1em; padding: 2px 0; margin: 2px 0; }
#navigation ul li.aktiv a { color: #fff; }
#navigation ul li:hover > a { color: #fff; }
#navigation ul li ul { display: block; position: absolute; top: 100%; left: 0; padding: 0; height: 0; opacity: 0; overflow: hidden; border: none; width: 100%; }
#navigation ul li ul li { float: none; width: auto; background-color: rgba(71,71,71,0.8); border: none; }
#navigation ul li ul li.aktiv { background-color: rgba(71,71,71,1); }
#navigation ul li ul li:hover { background-color: rgba(71,71,71,1); }
#navigation ul li ul li:first-of-type { padding-top: 10px; }
#navigation ul li ul li:last-of-type { padding-bottom: 10px; }
#navigation ul li ul li a { padding: 5px 0; font-size: 18px; color: #f5e5d1; margin: 0; }
#navigation ul li.aktiv ul li a { color: #f5e5d1; }
#navigation ul li ul li a:hover { color: #fff; }
#navigation ul li ul li.aktiv a { color: #fff; }
#navigation ul li:hover > ul { opacity: 1; height: 500px; }
#naviMobil { display: none; position: fixed; }

@media only screen and (max-width: 1024px) {
	#navigationwrap { height: 5px; }
	#navigationinnen { padding: 0 0 0 0; }
	#navigation { height: 0px; overflow: hidden; border: none; }
	#navigation.menuDrin { height: 500px; }
	#navigation ul { width: 100%; border: none; }
	#navigation ul li { width: 100%; background-color: #464646; border-bottom: 1px solid #f5e5d1; }
	#navigation ul li a { padding: 5px 0; color: #f5e5d1; }
	#navigation ul li.aktiv a { color: #fff; }
	#navigation ul li a:hover { color: #fff; }
	#navigation ul li ul { display: none; opacity: 1; }
	#navigation ul li.aktiv ul { width: 100%; height: auto; position: relative; display: inline; }
	#navigation ul li ul li{ width: 100%; background-color: #464646; border-bottom: none; }
	#navigation ul li.aktiv ul li a { padding: 5px 0; color: #f5e5d1; }
	#navigation ul li ul li.aktiv a { color: #fff; }
	#navigation ul li.aktiv ul li a:hover { color: #fff; }	
	#navigation ul li:hover > ul { height: auto; }
	#navigation ul li ul li:first-of-type { padding-top: 0; }
	ul#naviMobil { display: inline; }
	ul#naviMobil li { border: none; }
	ul#naviMobil li:first-of-type { padding: 20px 0 0 0; }
	ul#naviMobil li:last-of-type { padding: 0 0 20px 0; }
	ul#naviMobil li a { font-size: 1em; }
}


/********************************
  Inhalt
********************************/
#inhalt { position: relative; width: 100%; margin: 0 auto; overflow: hidden; padding: 205px 0 20px 0; line-height: 1.5em; }
#inhalt h1 { font-size: 2em; font-weight: 400; margin: 0 0 20px 0; line-height: 1.5em; }
#inhalt h2 { font-size: 1.75em; font-weight: 400; margin: 0 0 20px 0; line-height: 1.5em; }
#inhalt h3 { font-size: 1.5em; font-weight: 400; margin: 0 0 20px 0; line-height: 1.5em; }
#inhalt h4 { font-size: 1.25em; font-weight: 400; margin: 0 0 0 0; line-height: 1.5em; }
#inhalt p { font-size: 1.15em; margin: 0 0 20px 0; line-height: 1.5em; }
#inhalt ul { font-size: 1.15em; margin: 0 0 20px 25px; line-height: 1.5em; list-style: disc; }
#inhalt ol { font-size: 1.15em; margin: 0 0 20px 25px; line-height: 1.5em; list-style: decimal; }
#inhalt i { font-style: italic; }
strong, b { font-weight: 700; }
#inhalt a { color: #000; text-decoration: none; }
#inhalt a:hover { color: #000; text-decoration: none; }
.breiter { line-height: 0; position: relative; width: 100%; padding: 30px 0; }
.breiter img { width: 100%; }
.grau { overflow: hidden; background-color: #464646; color: #f5e5d1; }
.weiss { overflow: hidden; background-color: #fff; }
figcaption.csc-textpic-caption { display: table-caption; font-size: 0.875em; line-height: 1em; margin: 10px 0 10px 0; }
#inhalt .trennbalken { position: relative; max-width: 1200px; width: 100%; padding: 0; margin: 15px auto 0 auto; overflow: hidden; background-color: #464646; color: #fff; }
#inhalt .trennbalken h4 { padding: 5px 15px; }
#inhalt .trennbalken a { color: #f5e5d1; }
#inhalt .trennbalken a:hover { color: #fff; }

@media only screen and (max-width: 1024px) {
	#inhalt { padding: 145px 0 20px 0; width: 100%; }
	#inhalt h2 { font-size: 1.5em; }
	#inhalt h3 { font-size: 1.25em; }
}


/********************************
  Spalten
********************************/
.spalten { position: relative; width: 100%; margin: 0 auto; overflow: hidden; max-width: 1200px; }
.spalte1 { position: relative; width: calc(100% - 30px); padding: 30px 15px 10px 15px; float: left; display: inline; }
.spalte2 { position: relative; width: calc(50% - 30px); padding: 30px 15px 10px 15px; float: left; display: inline; }
.spalte3 { position: relative; width: calc(33.3333333333% - 30px); padding: 30px 15px 10px 15px; float: left; display: inline; }
.spalte4 { position: relative; width: calc(25% - 30px); padding: 30px 15px 10px 15px; float: left; display: inline; }

@media only screen and (max-width: 1024px) {
	.spalten { display: inline; }
	.spalte1 { width: calc(100% - 60px); padding: 30px 30px 15px 30px;  }
	.spalte2 { width: calc(50% - 60px); padding: 30px 30px 15px 30px; }
	.spalte3 { width: calc(33.3333333333% - 60px); padding: 30px 30px 15px 30px; }
	.spalte4 { width: calc(50% - 60px); padding: 30px 30px 15px 30px; }
}

@media only screen and (max-width: 768px) {
	.spalten { display: inline; }
	.spalte1 { width: calc(100% - 60px); padding: 30px 30px 15px 30px;  }
	.spalte2 { width: calc(100% - 60px); padding: 30px 30px 15px 30px; }
	.spalte3 { width: calc(100% - 60px); padding: 30px 30px 15px 30px; }
	.spalte4 { width: calc(50% - 60px); padding: 30px 30px 15px 30px; }
}


/*******************************
  Slider
*******************************/
.caption-wrapper { position: relative; max-width: 1200px; width: 100%; margin: 0 auto; }
.spalte1 .caption-wrapper { display: none; }
.spalte2 .caption-wrapper { display: none; }
.spalte3 .caption-wrapper { display: none; }
.spalte4 .caption-wrapper { display: none; }
.tx-ws-flexslider ul li { list-style: none; margin: 0; }
#inhalt .tx-ws-flexslider ul { list-style: none; margin: 0; }
.csc-default .flex-control-nav { width: 100%; position: absolute; bottom: 0; text-align: center; z-index: 241; margin: 0; }
.flexslider { border:none !important; margin:0 !important; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
.tx-ws-flexslider .caption-text { padding: 20px 20px 0 20px; position: absolute; width: 30%; bottom: 60px; top: auto !important; background: none; color:#333 !important; font-size: 1em; text-align: left; margin: 0; left: 60px; background-color: rgba(245,229,209,0.7); }
.tx-ws-flexslider .caption-align-left .caption-text { left: 60px; }
.tx-ws-flexslider .wsflexslider-style2 .caption-text { display: none; }
#inhalt .tx-ws-flexslider .caption-text h1, #inhalt .tx-ws-flexslider .caption-text h2, #inhalt .tx-ws-flexslider .caption-text h3 { color:#333 !important; line-height: 1em !important; font-size: 2em; text-transform: uppercase; }
#inhalt .tx-ws-flexslider .caption-text p { color:#333 !important; line-height: 1em !important; font-size: 1.4em; }
#inhalt .tx-ws-flexslider .caption-text a { color:#333 !important; }
.tx-ws-flexslider .caption-title { display: none; }
#inhalt .tx-ws-flexslider .flex-control-nav { margin: 0; }
.flex-control-paging li a { background: #ccc; background-color: rgba(255,255,255,0.5); margin: 0 2px; width: 16px; height: 16px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.8); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.8); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.8); box-shadow: inset 0 0 3px rgba(0,0,0,0.8); }
.flex-control-paging li a.flex-active { background: #fff; background-color: rgba(255,255,255,1); }
.flex-direction-nav a { text-decoration: none; display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(255,255,255,0.8); text-shadow: none; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav a:before  { content: " "; display: block; background: url('../img/slider-pfeil-links.png') no-repeat; width: 40px; height: 40px; }
.flex-direction-nav a.flex-next:before  { content: " "; display: block; background: url('../img/slider-pfeil-rechts.png') no-repeat; width: 40px; height: 40px; }

@media only screen and (max-width: 768px) {
	.tx-ws-flexslider .caption-text { position: relative; left: 0 !important; margin: 0; bottom: 0; width: calc(100% - 40px); padding: 20px; }
	.tx-ws-flexslider .caption-align-left .caption-text { left: 0 !important; padding: 20px; }
	#inhalt .tx-ws-flexslider .caption-text p { font-size: 1em; text-align: center; }
	.flex-direction-nav .flex-prev { top: 50px; }
	.flex-direction-nav .flex-next { top: 50px; }
}


/*******************************
  Kacheln
*******************************/
.kachel { position: relative; width: calc(50% - 30px); padding: 15px; float: left; display: inline; }
.kachel .bildrahmen { overflow: hidden; line-height: 0; }
.kachel:hover > .bildrahmen img { -moz-transform: scale(1.10); -webkit-transform: scale(1.10); -o-transform: scale(1.10); -ms-transform: scale(1.10); transform: scale(1.10); /* IE 9 */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.10, M12=0, M21=0, M22=1.10, SizingMethod='auto expand')"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.10, M12=0, M21=0, M22=1.10, SizingMethod='auto expand'); /* IE6 and 7 */ }

@media only screen and (max-width: 768px) {
	.kachel { width: calc(100% - 60px); padding: 30px; }	
}


/********************************
  Produkte
********************************/
#inhalt .produktKachel { position: relative; width: calc(50% - 30px); padding: 30px 0 15px 0; margin: 15px 15px 0 15px; float: left; display: inline; border-top: 1px solid #464646; }
#inhalt .produktKachel:nth-of-type(2n+1) { clear: both; }
#inhalt .produktKachelBild { position: relative; float: left; display: inline; width: calc(20% - 15px); margin: 0 15px 0 0; line-height: 0; }
#inhalt .produktKachelBild img { line-height: 0; }
#inhalt .produktKachelBild a { line-height: 0; }
#inhalt .produktKachelText { position: relative; float: left; display: inline; width: 80%; margin: 0; line-height: 0; padding: 0 0 0 0; }
#inhalt .produktKachelText h4 { font-weight: 700; }
#inhalt .produktKachelText .produktPreis { font-weight:700; }
#inhalt .produktKachelText .verkauft { font-weight: 700; color: #fff; background-color: #cc0000; display: inline; padding: 4px 5px 2px 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#inhalt .produktKachelText .news-list-morelink a{ color: #464646; }

@media only screen and (max-width: 768px) {
	#inhalt .produktKachel { width: calc(100% - 60px); padding: 30px; margin: 0; }
}


/*******************************
  Kontaktformular
*******************************/
#inhalt .csc-mailform ol { list-style: none; }
#inhalt .csc-mailform input { border: none; width: 100%; padding: 5px 10px; font-family: 'Crimson Text', serif; font-size: 1em; margin: 0 0 20px 0; }
#inhalt .csc-mailform textarea { border: none; width: 100%; padding: 5px 10px; font-family: 'Crimson Text', serif; font-size: 1em; margin: 0 0 20px 0; }
#inhalt .csc-mailform li label { width: 100%; margin: 0; }
#inhalt .csc-mailform label em, #inhalt .csc-mailform legend em { font-size: 0.75em; display: inline; }
#inhalt .csc-mailform .csc-form-element-submit input { color: #f5e5d1; background-color: #464646; margin: 20px 0 20px 0; }


/* Video */
.video-wrapper { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #eee; }
.video-wrapper video { display: block; width: 100%; height: 100%; object-fit: cover; }

