﻿/**

 * @author ( Angie Radtke )
 * @package Joomla
 * @subpackage Accessible-Template-Beez
 * @copyright Copyright (C) 2005 - 2016 Open Source Matters. All rights reserved.
 * @license GNU/GPL, see LICENSE.php
 * Joomla! is free software. This version may have been modified pursuant to the
 * GNU General Public License, and as distributed it includes or is derivative
 * of works licensed under the GNU General Public License or other free or open
 * source software licenses. See COPYRIGHT.php for copyright notices and
 * details.
 */

html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,

dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
}

article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

html {
	-font-size: 100.01%;
	-webkit-overflow-scrolling: touch;
	-webkit-tap-highlight-color: #272d34;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	position: relative;
	width: 100%;
	line-height: 1.5em;
	background: #eee;
}

/* ###################### general ###################### */
#all {
	margin: 0 auto;
/*	max-width: 1024px; */
	max-width: 1750px;
	padding: 0;
	text-align: left;
	font-size: 1.2em;
	z-index: 500;
}

#header {
	border-bottom: medium #000000 outset;
	background: #f7f5d4 no-repeat right;
	display: block;
	position:relative;
	padding: 8px 0;
	overflow: none;
	visibility: visible;
	
	
}



#right1 {
	float: right;
	
}

#header ul {
    position: static;
    left: 0;
    top: 5em;
    right: 0;
    display: block;
    margin: 0 0 1px 0;
    text-align: right;
    list-style-type: none;
    padding: 10px 0;
  }

#back {
	margin: 0;
	padding: 0;
}

#contentarea,
#contentarea2 {
	position: relative;
	overflow: hidden;
	padding: 0 20px !important;
	margin: 0;
	
}

#test{
		float: right;
}

#wrapper {
    width: 53%;
    float: left;
    position: relative;

}

/* #main (Inhalt) und #nav.left (Login/Newsletter-Spalte, siehe
   responsive.css Zeile ~216) sind hier direkte Geschwister-Kinder, in
   dieser Reihenfolge im Quelltext. Mit reinem Float (frueher: #nav.left
   floatete OHNE eigene Breite) rutschte die Spalte auf hohen Seiten
   (z.B. die Produktliste der Startseite mit vielen Ergebnissen) unter
   den Inhalt statt daneben zu bleiben - sie "passte" nur zufaellig auf
   Seiten mit kurzem Inhalt (z.B. Warenkorb) neben ihn. User-Meldung
   2026-08-15: "Menue mit Login/Warenkorb soll immer rechts sein".
   Flexbox haelt beide nebeneinander UNABHAENGIG von der Hoehe des
   Inhalts - siehe #main/#nav.left-Regeln weiter unten fuer die
   Spaltenbreiten. Auf dem Handy (responsive.css) wird das wieder auf
   "display:block" zurueckgesetzt, dort soll weiter gestapelt werden. */
#wrapper2 {
    float: left;
    position: relative;
    padding-bottom: 20px;
    width:71%;
    max-width:75%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 15px;

}

#wrapper2 .item-page {
    max-width: 660px;
    
 
}

#main {
	padding-top: 10px;
	padding-bottom: 20px;
	border: medium #000000 outset;
	padding: 0 0 0 10px;
	margin: 10px 10px 0 0;
	position: relative;
	background-color: #f7f5d4; /* Mainbereich Hintergrundfarbe */;
	border-radius: 15px;
	/* Flex-Kind von #wrapper2 (siehe dort): darf schrumpfen, sonst
	   verhindert die breite Produkttabelle/-raster jedes Zusammenspiel
	   mit der rechten Spalte (Flex-Standard ist min-width:auto = so
	   breit wie der breiteste Inhalt). */
	flex: 1 1 0%;
	min-width: 0;
}

#right {
    float: left;
    width: 20%;
    margin: 10px 0 10px 2%;
    padding: 0 0 5px 0;
    position: relative;
}

.unseen,
.hidelabeltxt,
#line label {
    display: inline;
    height: 0;
    left: -3000px;
    position: absolute;
    top: -2000px;
    width: 0;
}

/* ++++++++++++++  nav after content  ++++++++++++++ */
.left {
	padding-top: 0;
	float: left;
	margin: 10px 0 10px 0;
	position: relative;
}

/* Nur innerhalb von #wrapper2 (siehe dort): feste Spaltenbreite als
   Flex-Kind, passend zur Breite des Vorbilds ".left1". float:none, da
   Flexbox die Anordnung uebernimmt (float waere hier wirkungslos,
   aber missverstaendlich stehenzulassen). Der allgemeine ".left"-Regel
   oben bleibt fuer andere Verwendungen unangetastet. */
#wrapper2 #nav.left {
	float: none;
	flex: 0 0 25%;
	min-width: 220px;
}

/* ++++++++++++++  nav before content  ++++++++++++++ */
.left1 {
	border: medium #000000 outset;
	background: #f7f5d4;
	padding: 5px 5px 5px 5px;
	float: right;
	margin: 10px 0% 10px 0;
	position: relative;
	color: #000000;
	border-radius: 15px;
	width: 25%;
}



.skiplinks li a.u2 {
	display: inline;
	height: 0;
	left: -3000px;
	position: absolute;
	top: -2000px;
	width: 0;
}

.skiplinks li a.u2:active,
.skiplinks li a.u2:focus {
    position: absolute;
    width: 13em;
    top: -4em;
    left: 10px;
    line-height: 1.5em;
    padding: 5px;
    font-weight: bold;
    height: 3em;

}

.wrap {
    border: 0;
    clear: both;
    float: none;
    font-size: 1px;
    height: 0;
    line-height: 1px;
    margin: 0;
    padding: 0;
    visibility: hidden;
}

#logo {
	
	margin-top: 0;
	margin-left: 10px;
	display: block;
	padding: 1em 20px 20px 10px;
	width: 425px;
	max-height: 100px;
	font-weight: normal;
	line-height: 1em; 
	Z-index:999;
}

#logo img {
    display: block;
}

#logo span {
    padding-left: 2px
}

#logo span.header1 {
	display: block;
	top: 0;
	line-height: 0.8em;
	font-size: 0.7em;
	padding-left: 55px;
}

.logoheader {
	margin: -2px 10px 0;
	padding: 24px 0;
	text-align: left;
	font-weight: normal;
	line-height: 1.5em;
}
.header1 {
	font-size: 1.5em;
	margin-left: 10px;
}

#line {
    padding: 5px 0 2px 2px;
    position: absolute;
    left: 450px;
    top: 0.5em;
    max-width: 40em;
    text-align: left;
}

#fontsize,
#line .search {
	display: inline;
	margin: 0;
	
}

/* ++++++++++++++  button for closing right column  ++++++++++++++ */

#close {
    margin-right: 0;
    text-transform: uppercase;
}

#close span {
    position: absolute;
    right: 20px;
    z-index: 10000;
    top: 5px;
    font-weight: bold;
    text-align: right;
    line-height: 1.5em;
    margin-top:20px;
    padding: 5px
}

#close > a {
    display: block;
    overflow: hidden
}

#close > a:hover span {
    background: #095197
}

/* ###################### main ###################### */


/* ++++++++++++++  position  ++++++++++++++ */

.blog-featured {
    padding: 0;
}

.items-leading {
    padding: 0 5px 10px 5px;
    overflow: hidden;
    margin-bottom: 10px
}

.row-separator {
    display: block;
    clear: both;
    margin: 0;
    border: 0;
    height: 1px
}

.item-separator {
    display: none;
    margin: 0;
}

.shownocolumns {
    width: 98% !important;
}

#top {
    margin: 0 0 20px 0;
   /* overflow: hidden */
}

/* ++++++++++++++  blog  ++++++++++++++ */

.cols-1 {
    display: block;
    float: none !important;
    margin: 0 !important;
}

.cols-2 .column-1 {
    width: 46%;
    float: left;
}

.cols-2 .column-2 {
    width: 46%;
    float: right;
    margin: 0
}

.cols-3 .column-1 {
    float: left;
    width: 29%;
    padding: 0 5px;
    margin-right: 4%

}

.cols-3 .column-2 {
    float: left;
    width: 29%;
    margin-left: 0;
    padding: 0 5px
}

.cols-3 .column-3 {
    float: right;
    width: 29%;
    padding: 0 5px
}

.items-row {
    overflow: hidden;
    margin-bottom: 10px !important;
}

.column-1,
.column-2,
.column-3 {
    padding: 10px 5px
}

.column-2 {
    width: 55%;
    margin-left: 40%;
}

.column-3 {
    width: 30%
}

.blog-more {
    padding: 10px 5px
}

/* ++++++++++++++  footer  ++++++++++++++ */

#bottom {
    overflow: hidden
}

.box {
    float: left;
    margin-right: 10px;
    min-height: 50px
}

.box1 {
    width:20%
}

.box2 {
    width: 20%
}

.box3 {
    width: 20%
}

.box4 {
    width: 20%;
    hight: 50px;
}

#footer-inner, #footer {
    max-width: 80%;
    margin: 0 15%;

    padding: 10px 15px 10px 10px;
}

img {
    border: 0 none;
    max-width: 100%;
    border-radius: 20px;
}

/* hide the mobile menu button */
#mobile_select {
    display:none
}

/* Media Queries */

#breadcrumbs{
	padding: 10px;
	border-color: #272d34;
	background: #f7f5d4;
	z-index: 500;
	color: #272d34;
	border-radius: 20px;
	border: medium outset;
	margin-top: 15px;
	position: center;
	margin-bottom: 15px;
	}
	
#product-fields-title1{
font-size:50%;	
}

#cf_wrapp_all_154 {
	margin-top: 1em;
	
}
