/* Hoehn Webdesign template.css – Joomla 4/5/6 */

/* ------------- General ------------- */
*, *:before, *:after { 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 	}
* {
	margin:0;
	padding:0;
	color:#333;	}
html, body { font-size: /*100%;*/ 16px; line-height:1.2em;}
body { font-family: Helvetica, Arial, sans-serif; }
h1 { font-size:120%; }
h2 { font-size:110%; }
h3 { font-size:105%; }
.readmore { font-size:90%; margin:0px 0;}
p { margin:0.2em 0; }
a { color: #33f; font-weight: bold; text-decoration: none; }
a:hover { color: #666; text-decoration: none; }
img { margin:5px 5px 0px 5px; /*border: #33f 1px dashed;*/ }
a img { /*border: #33f 1px dashed;*/ }
a:hover img { border: #666 1px solid; }
/*ul { list-style: none outside none; }*/
ul { list-style: inside url(../images/list.png) disc; }

/* ------------- Template specific ------------- */
#frame { overflow: hidden; }
#container { 
	margin: auto auto; 
	max-width: 1050px;	}
#header {  
	background: url(../images/bg_header_main.jpg) no-repeat center right;
	width: 100%;	}
#logo {  
	background: url(../images/logo.png) no-repeat center left;
	width: 100%;	}
#header-inner {  height: 200px; }

#header-info {
	margin: 0 0 0 365px;
	width: 265px; height:100px; 
	position: relative; }
#info-bg { 
	width: 212px; height: 108px;
	position: absolute; left:0px; top:10px;
	background: url(../images/bg_header_main.jpg) no-repeat top left;
	opacity: .7; 	
	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#info{ width: 210px; position:absolute; left:5px; top:10px; }
#tel { position: absolute; right:0; top:11px; }
.tel-link, .cart-link { 
	display: inline;
	width: 48px; height: 48px; 
	font-size: 20%; text-align: right; padding: 0 8px 0 0; color: #00c; }
.tel-link { background: url(../images/tel-button.png) no-repeat top right; }
.cart-link { background: url(../images/cart-button.png) no-repeat top right; }
.tel-link:hover, .cart-link:hover { color: #666;	}
.tel-link:hover { background: url(../images/tel-button-gr.png) no-repeat bottom right; }
.cart-link:hover { background: url(../images/cart-button-gr.png) no-repeat bottom right; }

#header-info3 { 
	margin: 15px 0 0 380px;
	width: 363px; height:50px;
	position: relative; }
#info-bg3 { 
	width: 310px; height: 45px;
	position: absolute; left:0px; top:10px;
	background: url(../images/bg_header_main.jpg) no-repeat top left;
	opacity: .7; 	
	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }	
#info3 { width: 300px; position:absolute; left:7px; top:10px;}
#cart { position: absolute; right:0; top:11px; }


#topbar {  
	/*background: #33f;*/
	background: #00c;
	width: 100%;	}	
#nav-left { 
	width:320px;
	padding: 8px 0 16px 0;
	display: none; }	
/* ------------ main navigation menu (horizontal) --------------- */
#nav-right ul.nav { margin:0; padding:0; }
#nav-right ul.nav li {
	display:inline;
	padding:0 5px;
	height:1.2em;
	white-space:nowrap;
	/*border-right:2px solid #fff;*/	}
#nav-right ul.nav > li > a { color:#fff; padding: 5px; /*background: #666;*/}
#nav-right ul.nav > li > a:hover,
#nav-right ul.nav > li:hover > a { background: #666; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
/* --------------------------------------------------------------- */
	
.m-link { display: none; }
.top-link { display: none; }
#header-right {  
	overflow: hidden;	}
#nav-right { 
	/*display: inline;*/
	padding: 8px 0 16px 0;
	height: 43px;
	/*float: left;*/ }
#top { float: left; }
#top-right { float: left; }
#main { 
	width: 100%;
	float: right;	}
#sidebar {
	float: left;
	width: 300px;
	/*padding: 20px 5px 5px 5px;*/
	/*background: url(../images/bg.gif) repeat;*/	}	
.navi { 
	width: 100%;
	width: 292px;
	margin: 0 8px 8px 0; padding: 3px  0; 
	float:left;
	background: #666;
	border-top: #aaa 7px solid; border-bottom: #aaa 7px solid;
	/*-webkit-border-top-right-radius: 10px; -moz-border-top-right-radius: 10px; border-top-right-radius: 10px;*/ }
#left, 
#left1, 
#left3 { 
	width: 100%;	}
.moduletable { 
	width: 100%;
	padding: 5px 10px 0 0;	}	
.moduletable h3 { 	
	text-transform: uppercase; 
	font-style:italic;
	text-align:right;
	font-size: 100%;
	color: #ccc; 
	color: #aaa;
	padding: 5px 0 0 0;
	border-bottom: #999 1px solid;}
#content { 
	margin:0 0 0 0;
	overflow:hidden;	}
#breadcrumb {
	float:right;
	text-align:left;	}
#content-inner, #content-footer { margin:2%; overflow:hidden;}	
#content-inner p { margin:0.5em 0; }
/*#content ul { list-style: inside url(../images/list.png) disc;  }*/
.page-header h1 { text-align:center; font-style:italic; padding: 0 0 7px 0;}
.cat-children div {clear: both; /*margin: 10px 0 10px 0;*/}
.item-title { padding: 10px 0 0 0;}
/*.category-desc { padding: 5px 0 0px 0; }*/
.items-row {
	margin-bottom: 10px !important;	
	overflow: hidden;
	clear:both; }
.column-1, .column-2, .column-3 {
	padding: 10px 5px 0px 5px;	}
.cols-2 .column-1 {
	float: left;
	width: 46%;	}
.cols-2 .column-2 {
	float: right;
	width: 46%;
	/*margin:0;*/	}

/* ------ forms ------*/	
select, textarea, input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel] {
  	display: block;
  	padding: 0 5px 0 5px;
  	line-height: 30px;
  	margin: 0;
  	font-size: 100%;
  	border: 1px solid #999; 
  	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

/*.bfQuickMode input[type=checkbox] { 
	padding: 0 5px 0 5px; line-height: 30px; font-size: 100%; 
	border: 1px solid #999; 
  	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }*/

 	
.bfQuickMode section select, 
.bfQuickMode section input[type=text], 
.bfQuickMode section textarea { width:450px; min-width:45%;} 
.bfQuickMode .bfLabelLeft label { width: 45%; min-width:45%; } 
select { height: 30px; }
select:hover, input:hover, textarea:hover { color: #666; border:#666 1px solid;}  	
button {
  	-webkit-appearance: none; -moz-appearance: none;
  	float: left;
  	display: block;
  	margin: 1.5em 0;
  	font-size: 110%; line-height: 200%; font-weight: bold; font-style: italic; 
  	width: 450px; height: 40px;
  	border: 1px solid #999; background:#666;
  	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
button span { color: #fff; }  	
button:hover { color: #fff; border:#666 1px solid; background: #999;} 
.bfQuickMode .bfSubmitButton { float: left; margin: 10px 0 10px 5px; }
/* -------------------*/		
#footer {
	clear:both;
	width:100%;
	margin:2%;
	/*height:200px;*/	}
#footer-inner { margin:2%; }
.copyright { padding:5% 2% 0% 2%; text-align:center; font-size: 80%; color:#666;}

/* -------*/

.sh1 { background: url(../images/rsh.gif) repeat-y right; }
.sh2 { background: url(../images/bsh.gif) bottom repeat-x; }
.sh3 { background: url(../images/rbcorner.gif) right bottom no-repeat; }
.sh4 { background: url(../images/rtcorner.gif) right top no-repeat; }
.sh5 { background: url(../images/lbcorner.gif) left bottom no-repeat; }

#sidebar div /*, .sh1, .sh2, .sh3, .sh4, .sh5*/ { float: left; /*width: 100%;*/}
/* -------*/

/* ------------- Menu ------------- */

.navi ul.nav > li, 
.navi ul.nav li,
.navi ul.nav a, 
.navi ul.nav li > a,
.navi ul.nav > li > a,
.navi ul.nav ul li ,
.navi ul.nav ul > li { display: block; }

.navi ul.nav ul li > a,
.navi ul.nav ul li ul li > a { background: url(../images/arrow.png) left center no-repeat;}

.navi ul.nav > li > ul > li > a:hover,
.navi ul.nav > li > ul > li > ul > li > a:hover { background: #999 url(../images/arrow.png) left center no-repeat;}

.navi ul.nav > li a, .navi ul.nav ul > li a { 
	text-indent: 15px; 
	text-indent: 20px;
	border-top: 1px solid #f2f2f2;
	border-bottom: 1px solid #666; }
	
.navi ul.nav li.item-187 a, 
.navi ul.nav li.item-212 a,
.navi ul.nav li.item-214 a,
.navi ul.nav li.item-255 a { border-bottom: none; }
.navi ul.nav li.item-188 a,
.navi ul.nav li.item-213 a,
.navi ul.nav li.item-255 a,
.navi ul.nav li.item-326 a { border-top: none; }

.navi ul.nav li.item-187 ul li a,
.navi ul.nav li.item-188 ul li a,
.navi ul.nav li.item-212 ul li a,
.navi ul.nav li.item-213 ul li a,
.navi ul.nav li.item-214 ul li a,
.navi ul.nav li.item-255 ul li a,
.navi ul.nav li.item-326 ul li a { 
	border-top: 1px solid #f2f2f2;
	border-bottom: 1px solid #666; }
.navi ul.nav { 
	margin: 0; 
	padding: 0; 
	font-size: 0.9em;     }
.navi ul.nav a { color: #fff; text-transform: uppercase; font-style:italic;}
.navi ul.nav > li > a { padding: 3px 10px; }
.navi ul.nav > li > a:hover,
.navi ul.nav > li:hover > a { background: #999; }

.navi ul.nav ul { 
	margin: 0; 
	padding: 0; 
	/* the transitions */
        -webkit-transition: opacity 300ms ease-in-out, top 200ms ease-in-out;
        -moz-transition: opacity 300ms ease-in-out, top 200ms ease-in-out;
        transition: opacity 300ms ease-in-out, top 200ms ease-in-out;		}

.navi ul.nav ul > li a { 
	padding: 3px 0px;
	margin: 0px 0 0 27px;
	text-transform: none; font-style:normal;	}	


.navi ul.nav > li > ul > li > ul > li > a { 
	padding: 3px 0px;
	margin: 0px 0 0 47px; }
/*.navi ul.nav > li > ul > li > ul > li > a:hover { background: #999;}*/

.navi ul.nav li.item-234,
.navi ul.nav li.default { display: none; } /* hide 'Home' menu item */

/* --- Active and parent classes - optional --- */
.navi ul.nav > li.parent > a { }
.navi ul.nav > li.active { }

.navi ul.nav > li.active > a { background-color: cornflowerblue; }
.navi ul.nav > li.active > a:hover { background-color: #999; }
.navi ul.nav > li.active > ul > li.active > a { background-color: royalblue; }
.navi ul.nav > li.active > ul > li.active > a:hover { background: #999 url(../images/arrow.png) left center no-repeat;}
.navi ul.nav > li.active > ul > li.active > ul > li.active > a { background-color: #00c; }
.navi ul.nav > li.active > ul > li.active > ul > li.active > a:hover { background: #999 url(../images/arrow.png) left center no-repeat; }


.navi ul.nav > li.current > a,
.navi ul.nav > li.active > ul > li.current > a,
.navi ul.nav > li.active > ul > li.active > ul > li.current > a { background-color: #00c; }


/* --- forms --- */

#demo input, 
#rental input, 
#salesman input, 
#callback input {
	/*float: left;*/	}
 		
	
#demo span, 
#rental span, 
#salesman span, 
#callback span {
	/*padding: 0;
	margin: 0;*/
	/*width:90%;*/}
span#bfElemWrap28 {
	/*display: block; /*width:auto;*/ }
	
#demo label, 
#rental label, 
#salesman label, 
#callback label {
	/*padding: 0;*/
	/*margin: 0*/
	/*width:80%;*/ }

#bfElemWrap33 label, 
#firma label {
	width: 30%;	}


/* --- Cookie Hint CSS --- */
#redim-cookiehint { margin:5px auto; padding:15px;
	float:left; width:100%;
	position: absolute; top:0; left:0;
	background: #333; /*opacity: .9; filter:Alpha(Opacity=90);*/ }
.cookiecontent { color:#fff; float:left; }
.cookiebuttons { float:left; width: 100%; }
.cookiebuttons a { color:#999; float:left; }
.cookiebuttons a:hover { color:#ccc; }
.cookiebuttons button { background:#666; color:#ccc; width: 50px; margin:3px; float:right; }
.cookiebuttons button:hover { background:#666; color:#fff; border: 1px solid #fff;}
#redim-cookiehint .clr { height: 10px; }

/* ------------- Tablets, Smartphones & Co ------------- */

@media screen and (max-width: 800px) {

#logo { background: url(../images/logo-sm.png) no-repeat center left; }
#header-inner { height:120px; }
/*--------------*/
#header-info {
	margin: 0 0 0 185px;
	width: 265px; height:100px; 
	position: relative; }
#info-bg { 
	width: 212px; height: 93px;
	position: absolute; left:0px; top:5px; }
#info{ width: 210px; position:absolute; left:5px; top:5px; /*font-size:95%; line-height:110%;*/ }
#tel { position: absolute; right:0; top:6px; }
#info-bg3, #info3 { display: none;}
#cart { position: absolute; left:22px; top:-57px; }

/*--------------*/

#backtotop {
	position: fixed;
    	bottom: 0px;
    	right: 0px; 	}
.top-link { 
	display: inline;
	/*padding: 3px; 
	font-weight: bold;*/
	font-size: 50%;
	text-align: center;
	color: #fff;
	width: 48px;
	height: 48px;
	/*background: #33f;*/
	background: url(../images/btt-button-grey.png) no-repeat bottom right;}
.top-link:hover { 
	background: url(../images/btt-button.png) no-repeat bottom right;
	color: #fff;	}

#nav-left { display: inline; }
#nav-right { display: none; }
#topbar .sh5 { padding: 8px 5px 16px 5px; }
.m-link { 
	display: inline;
	padding: 6px; 
	font-weight: bold;
	width: 100px;
	color: #fff;
	/*background: #999;*/	}
.m-link:hover { 
	background: #666; 
	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
	color: #fff;	}

#content { 
	float:left; 
	width:100%; 
	margin:0 0 0 0;
	background:#fff;	}

#sidebar .sh1 { background: url(../images/rtcorner.png) right top no-repeat; }
#sidebar .sh2 { background: url(../images/bsh-long.png) right bottom no-repeat; padding: 8px 0 8px 0;}
#sidebar .sh3 { background: url(../images/rsh.png) repeat-y right; /*padding: 0 0 0 8px; width:292px;*/}
#sidebar .sh4 { background: none; /*padding: 0 0 8px 0; width:292px;*/	}
#sidebar .sh5 { background: none; /*padding: 0 8px 0 0; width:292px;*/	}
.navi { margin: -8px 8px 0 0; }	

div#sidebar { 
	left: -300px; 
	width: 300px; 
	z-index: 10009; 
	line-height: 1.8; 
	position: absolute; 
	z-index: 9999; 
	/*border: 1px solid #f2f2f2; /* resetting and blocking the elements => to have a large touch surface */   
  	/*background:green;*/
	/* the transitions */
  	-webkit-transition: all 300ms ease-in-out;
     	-moz-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;	}

/* --- the open state - using the CSS 3D Transforms --- */  
div#sidebar.sidebarIsActive { 
	-webkit-transform: translate3d(300px, 0, 0);
	-moz-transform: translate3d(300px, 0, 0);
	transform: translate3d(300px, 0, 0);
	-webkit-overflow-scrolling: touch; 	}

div#left,
div#left1,
div#left3 { /*display: none;*/ height:1px; overflow: hidden; }

div#left.leftIsActive,
div#left1.left1IsActive,
div#left3.left3IsActive { /*display: block;*/ height:100%;}

/*div#left.leftIsNotActive,
div#left1.left1IsNotActive,
div#left3.left3IsNotActive {height:1px; overflow: hidden; }*/

.navi ul.nav li.item-234,
.navi ul.nav li.default { display: block; } /* display 'Home' menu item */
.navi ul.nav > li > a { padding: 8px 10px; }
.navi ul.nav ul > li a { padding: 8px 10px; }
.moduletable h3 { padding: 0 0 0 0; }


/* --- support for browsers which do not support 3D transforms - must use Modernizr for this feature --- */
.no-csstransforms3d .navi ul.nav.menuIsActive { left: 0; } 
  
}

/* ------------- Tablets, Smartphones & Co ------------- */

@media screen and (max-width: 550px) {

/* ------ forms ------*/	
.bfQuickMode section select, .bfQuickMode section select:hover,
.bfQuickMode section input[type=text], .bfQuickMode section input[type=text]:hover,.bfQuickMode section input:hover,
.bfQuickMode section textarea,.bfQuickMode section textarea:hover { width:90%; min-width:70%; max-width:100%; line-height: 40px;} 
.bfQuickMode .bfLabelLeft label { width: 70%; min-width:60%; } 	
button { width: 88%; height: 40px; }
/* -------------------*/	

}

/* ------------- Tablets, Smartphones & Co ------------- */

@media screen and (max-width: 480px) {

#container {  margin: 1% auto; 	}

#logo { background: url(../images/logo-sx.png) no-repeat center left; }
#header-inner { height:65px; position:relative; }
/*--------------*/
#header-info, #header-info3 {
	margin: 0;
	width: 100%; height:60px; }
#header-info3 {
	margin: 0;
	width: 60px; height:60px; position: absolute; top:0; right:0;}	
#info-bg, #info { display: none;}
#tel { position: absolute; right:65px; top:6px; }
#cart { position: absolute; left:auto; right:13px; top:6px; }
/*--------------*/

/* ------ forms ------*/	
.bfQuickMode section select, .bfQuickMode section select:hover,
.bfQuickMode section input[type=text], .bfQuickMode section input[type=text]:hover,.bfQuickMode section input:hover,
.bfQuickMode section textarea,.bfQuickMode section textarea:hover { 
	width:97%; min-width:97%; max-width:97%; line-height: 40px; } 
.bfQuickMode .bfLabelLeft label { width: 97%; min-width:97%; } 	
button { width: 95%; height: 40px; }
/* -------------------*/

.cols-2 .column-1, 
.cols-2 .column-2 {
	float: left;
	width: 100%;	}

}

/* =====================================================================
   Joomla 4/5/6 – Ergänzungen
   Ersetzt templates/system/css/system.css + general.css (in J4+ entfallen)
   und stylt das neue Core-Markup, das früher Bootstrap 2 mitbrachte.
   ===================================================================== */

/* --- Barrierefreiheit / Hilfsklassen --- */
.visually-hidden, .element-invisible {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0; }
.clearfix::after { content: ""; display: table; clear: both; }
.float-start, .pull-left, .item-image.left { float: left; margin: 0 1em 0.5em 0; }
.float-end, .pull-right, .item-image.right { float: right; margin: 0 0 0.5em 1em; }
.float-none { float: none; }
.system-unpublished { background: #f4f4f4; border-top: 4px solid #c4c4c4; border-bottom: 4px solid #c4c4c4; }
.list-unstyled { list-style: none; }
.badge { display: inline-block; padding: 2px 6px; font-size: 75%; background: #999; color: #fff; border-radius: 4px; }
.badge.bg-warning { background: #c87d00; }

/* --- Beitragsbilder (J4+: <figure class="... item-image">) --- */
figure.item-image { margin: 5px 0 0.5em 0; }
figure.item-image img { max-width: 100%; height: auto; }
figure.item-image figcaption { font-size: 80%; color: #666; }
#content-inner img { max-width: 100%; height: auto; }

/* --- Blog-Ansicht: Spalten (früher .items-row / .cols-2) --- */
.blog-items { clear: both; }
.blog-items[class*="columns-"], .blog-items[class*="masonry-"] { display: grid; gap: 10px 4%; }
.blog-items.columns-2, .blog-items.masonry-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-items.columns-3, .blog-items.masonry-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-items.columns-4, .blog-items.masonry-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blog-item { padding: 10px 5px 0 5px; overflow: hidden; }
.items-leading > div { overflow: hidden; margin-bottom: 10px; }
.items-more { clear: both; }

/* --- Weiterlesen / Info-Block --- */
.readmore a.btn { font-weight: bold; }
.article-info { font-size: 80%; color: #666; margin: 0.3em 0; }
.article-info dt { display: none; }
.article-info dd { display: inline; margin-right: 1em; }

/* --- Breadcrumbs (J4+: <ol class="mod-breadcrumbs breadcrumb">) --- */
#breadcrumb { float: none; margin: 0.5em 2% 0 2%; }
#breadcrumb ol.breadcrumb, #breadcrumb ul.breadcrumb {
	list-style: none;
	display: flex; flex-wrap: wrap; justify-content: flex-end;
	margin: 0; padding: 0;
	font-size: 85%; }
#breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "»"; padding: 0 0.4em; color: #999; }
#breadcrumb .mod-breadcrumbs__here { margin-right: 0.4em; }
#breadcrumb .mod-breadcrumbs__here + .breadcrumb-item::before { content: none; }
#breadcrumb .icon-location { display: none; }

/* --- Blätternavigation --- */
ul.pagination {
	list-style: none;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
	margin: 1em 0; }
ul.pagination .page-link { display: block; padding: 4px 9px; border: 1px solid #999; border-radius: 10px; }
ul.pagination .active .page-link { background: #00c; color: #fff; border-color: #00c; }
ul.pagination .disabled .page-link { color: #aaa; border-color: #ddd; }
.counter { text-align: center; font-size: 80%; color: #666; }

/* --- Menüs: J4+ Aufklapp-Buttons ausblenden, Untermenüs wie bisher immer zeigen --- */
.navi .mod-menu__toggle-sub,
#nav-right .mod-menu__toggle-sub { display: none; }
.navi .mod-menu__sub[aria-hidden="true"] { display: block; }

/* --- Systemmeldungen: globale button-Regel nicht auf Core-Buttons anwenden --- */
joomla-alert button,
.joomla-alert--close,
.btn-close {
	float: none; width: auto; height: auto;
	margin: 0; line-height: 1;
	background: none; border: 0; }
#system-message-container { margin-bottom: 1em; }

/* --- Fehlerseite --- */
.error-page #content { float: none; width: 100%; }
.error-page #content-inner ul { margin: 0.5em 0 1em 0; }
.error-debug { font-size: 75%; overflow: auto; }

@media screen and (max-width: 480px) {
	.blog-items[class*="columns-"], .blog-items[class*="masonry-"] { grid-template-columns: 1fr; }
	.float-start, .float-end, .pull-left, .pull-right, .item-image.left, .item-image.right { float: none; margin: 0.5em 0; }
}