@charset "utf-8";
@font-face {
    font-family: 'Felice-BlackItalic';
    src: url('Felice-BlackItalic.woff2') format('woff2'),
         url('Felice-BlackItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}


:root {
    --fontFamily:"open_sansregular", "Open Sans", sans-serif;
    --fontSize:15px;
    --BodyBackgroundColor: #fff;
    --BodyColor: #000;
    --headerBackgroundColor: #FFFFFF;
    --headerColor: #fff;
    --secondHeaderBackgrundColor: #FFFFFF;
    --secondHeaderColor: #000;
    --aColor:#000;
    --aHoverColor: #00A0DD;
    --h1Color: #000;
    --h2Color: #000;
    --mainColor: #F2F2F2;
    --Color: #fff;
    --secondColor: #d8d8d8;
    --TableHeadBackgroundColor: #000;
    --TableHeadColor: #fff;
    --backToTop: rgba(0,0,0,0.8);
    --footerColor: #FFFFFF;
    --footerBackgroundColor: #000000;
    --LightBoxBackgroundColor: #053E6D;
    --LightBoxTextColor: #fff;
    --SeconNavBackgroundColor: linear-gradient(45deg, rgba(144,192,42,0.9) 0%, rgba(0,159,227,0.9) 100%);
    --SeconNavColor:#fff;
    --SeconNavActiveBackgroundColor: #000;
    --SeconNavActiveColor: #fff;
    --inputTextColor: #000;
    --inputBackgroundColor: #fff;
    --inputBorderColor: #000;
    --BorderRadius: 0px;
    --maxContentWidth: 1600px;
}


/* --- Allgemeine Definitionen -- */
html, body {
	min-height:100%;
	height: 100%;
}

html {
	height: 100%;
}

body {
	margin: 0px;
	padding: 0px;
	min-height:100%;
	line-height: 1.5;
	font-family: var(--fontFamily);
	font-size: var(--fontSize);
	background-color: var(--BodyBackgroundColor);
	color: var(--BodyColor);
}

a {
	color:var(--aColor);
}

a.underline {
    position: relative;
    display: inline-block;
    -webkit-transition-property:   color;
	-moz-transition-property:  color;
	 -ms-transition-property:  color;
	  -o-transition-property:  color;
	     transition-property:  color;
	-webkit-transition-duration: 0.25s;
	-moz-transition-duration: 0.25s;
	 -ms-transition-duration: 0.25s;
	  -o-transition-duration: 0.25s;
	     transition-duration: 0.25s
}

a.underline:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--aColor);
    left: 0;
    bottom: 0;
    z-index: -1;
    
    -webkit-transition-property: height;
	-moz-transition-property: height;
	 -ms-transition-property: height;
	  -o-transition-property: height;
	     transition-property: height;
	-webkit-transition-duration: 0.25s;
	-moz-transition-duration: 0.25s;
	 -ms-transition-duration: 0.25s;
	  -o-transition-duration: 0.25s;
	     transition-duration: 0.25s
}

a:hover {
	/* text-decoration: underline; */
	cursor: pointer;
}

a.underline:hover {
    height: 100%;
    color:#fff;
}

.underline:hover::after {
    height: 100%;
}

.blur {
    filter: blur(15px);
}

video {
	max-width:100%;
}

.sl-overlay {
    background: var(--LightBoxBackgroundColor);
    opacity: 0.9;
}
.sl-wrapper .sl-close,
.sl-wrapper .sl-navigation button,
.sl-wrapper .sl-navigation button.sl-prev,
.sl-wrapper .sl-next,
.sl-wrapper .sl-prev {
    color: var(--LightBoxTextColor);
    font-size: 40px;
}

 /* e3e4e6 */

.backToTop {
	background-color: var(--backToTop) !important;
}

.backToTop:hover {
    background: var(--SeconNavBackgroundColor);
    color: var(--SeconNavColor);
}

.col_4_4 {
    max-width: var(--maxContentWidth) !important;
}

#main {
	min-height: 100%;
	position: relative;
}

#dialog input[type="submit"],
.adminBackend .Button {
    color: #000 !important;
}

/*main#content {
	box-shadow: 0 0 0 transparent;
    min-height: calc(100vh - 110px);
    width: 90%;
    margin: 0 auto;
}*/

#content h1 {
	font-size: 150%;
    color: var(--h1Color);
}

#content h2 {
	font-size: 125%;
    color: var(--h2Color);
    font-weight: normal;
}

#content h2::after {
    content: "";
    height: 2px;
    background: var(--mainColor);
    width: 100%;
    display: block;
}

#content h3 {
	font-size: 150%;
}

#content h4 {
    font-size: 150%;
    color: #000;
}

#content {
	font-size: 110%;
}

#content div.ext_FormBuilder textarea,
#content div.ext_FormBuilder input,
#content input[type=text] {
	/*border: 3px solid var(--inputBorderColor);*/
    background-color: var(--inputBackgroundColor);
    border-radius: var(--BorderRadius);
    color: var(--inputTextColor);
    font-size: 95%;
    font-weight: normal;
}

#content input[type=submit] {
	color:#004f91;
}

#content input[type=submit]:hover {
	background-color: var(--inputTextColor) !important;
	color:#fff;
	cursor: pointer;
}

#content .feeld {
    margin-left: 0;
    padding-left: 0;
}

#content #FormBuilder0,
#content #FormBuilder1,
#content #FormBuilder2,
#content #FormBuilder3 {
	width: 50%;
    float: left;
}

#content #FormBuilder4 {
    clear: both;
}

#header {
    text-align: right;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
	hieght:100px;
    z-index: 3;
    /*background-image: url("footerLogo.svg");*/
    /*background-size: 300px 300px;*/
    /*background-position:  calc(100% - 50px) -27px;*/
    /*background-repeat: no-repeat;*/
    background-color:  var(--headerBackgroundColor);
    color:  var(--headerColor);
	
	-webkit-transition-property: top;
	-moz-transition-property: top;
	 -ms-transition-property: top;
	  -o-transition-property: top;
	     transition-property: top;
	-webkit-transition-duration: 0.25s;
	-moz-transition-duration: 0.25s;
	 -ms-transition-duration: 0.25s;
	  -o-transition-duration: 0.25s;
	     transition-duration: 0.25s
	     
}

#header ul li a {
    color:  var(--headerColor);
}

#header.up {
    top: -300px;
}

#HeaderExtnsion {
	padding-top: 360px;
	position: relative;
	z-index: 1;
}


header #top {
    position: relative;
    max-width: var(--maxContentWidth);
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    height: 200px;
}

header #top > * {
    position: relative;
    display: block;
    /*min-width: 31%;*/
    /*width: 31%;*/
    top: 3px;
}

header #top #Logo{
    left: 50%;
    transform: translateX(-50%);
}

header #topinfo {
    position: relative;
    max-width: var(--maxContentWidth);
    width: 90%;
    margin: 0 auto 30px auto;
    padding: 8px;
    text-align: left;
    color: #00adbb;
    border-bottom: 5px solid #00adbb;
}

header #topinfo a{
    color: #00adbb;
}

header #acount {
    display: flex;
    align-content: center;
    justify-content: end;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

header #menuWrapper {
    margin-top: 30px;
    background-color: var(--secondHeaderBackgrundColor);
    color: var(--secondHeaderColor);
    min-height: 41px;
    border-bottom: 1px solid #eaeaea;
}

header #menuWrapper #menu ul.menu li > a {
    font-family: Felice-BlackItalic;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    color: #000000;
    text-transform: none;
}

header #menuWrapper #menu ul.menu li a:hover,
header #menuWrapper #menu ul.menu li.expand > a {
    color: #00adbb;
}

header nav .ext_Shop,
header nav .ext_Shop .catImgList,
header nav .ext_Shop .catImgList ul.ShopCatList,
header nav .ext_Shop .catImgList ul.ShopCatList li,
header nav .ext_Shop .catImgList ul.ShopCatList li a {
    margin: 0;
    padding:0;
    list-style-type: none;
    display: inline-block;
    color: var(--SeconNavColor);
}

header nav .ext_Shop .catImgList ul.ShopCatList li a {
    font-size: 14px;
    padding: 10px;
}

header nav .ext_Shop .catImgList ul.ShopCatList {
    position: relative;
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
}

header nav .ext_Shop .catImgList ul.ShopCatList li .cbes,
header nav .ext_Shop .catImgList ul.ShopCatList li .catImgList,
header nav .ext_Shop .catImgList ul.ShopCatList li .ImageWrapper,
header nav .ext_Shop .catImgList ul.ShopCatList li a .bDetails {
    display: none;
}

header #menuWrapper ul.ShopCatList li a,
header #menuWrapper ul.menu li a {
    color: var(--secondHeaderColor);
}

header #menuWrapper #menu ul.ShopCatList,
header #menuWrapper #menu ul.menu {
    margin-left: 0;
}

header nav #menuWrapper .ext_Shop .catImgList ul.ShopCatList > li:first-child a,
header #menuWrapper ul.ShopCatList li:first-child > a,
header #menuWrapper ul.menu li:first-child > a {
    margin-left: 0;
    padding-left: 0;
}

header #menuWrapper #menu {
    min-height: 25px;
    text-align: left;
}

header #menuWrapper #menu ul.ShopCatList,
header #menuWrapper #menu ul.menu {
    padding: 0;
}

header #menuWrapper #menu ul.ShopCatList li,
header #menuWrapper #menu ul.menu li {
    margin: 0;
    padding: 0;
}

header #menuWrapper #menu ul.ShopCatList li:hover > a,
header #menuWrapper #menu ul.ShopCatList li.expand > a,
header #menuWrapper #menu ul.ShopCatList li.active > a,
header #menuWrapper #menu ul.menu li:hover > a,
header #menuWrapper #menu ul.menu li.expand > a,
header #menuWrapper #menu ul.menu li.active > a {
    text-decoration: underline;
    font-weight: normal;
}

header #menuWrapper #menu ul.menu{
    border-top: 1px solid #eaeaea;
}

#content table.Basket td a.deleteBasket img {
    filter: brightness(0);
}

#Logo {
    position: absolute;
    display: block;
	top: 10px;
    text-align: left;
    padding: 30px;
}

#Logo img {
    max-height: 200px;

}

/* **************
 * Menü Animation
 * START
 * **************/
#MenuButton {
    position: absolute;
    display: block;
    height: 40px;
    width: 40px;
    margin: 0;
    padding: 0;
    background-color: transparent;
    cursor: pointer;
    top: 0;
    right: 0;
}

#MenuButton {
	z-index:20;
}

#MenuButton .line {
	position: relative;
	height: 4px;
	width: 80%;
	right: -10%;
	border-radius: 2px;
	background-color: var(--secondHeaderColor);
	-webkit-transition-property: all;
	-moz-transition-property: all;
	 -ms-transition-property: all;
	  -o-transition-property: all;
	     transition-property: all;
	-webkit-transition-duration: 0.25s;
	-moz-transition-duration: 0.25s;
	 -ms-transition-duration: 0.25s;
	  -o-transition-duration: 0.25s;
	     transition-duration: 0.25s
}

#MenuButton.close .line {
    background-color: var(--SeconNavColor);
}

header #menuWrapper nav.second ul.menu li a {
    color: var(--SeconNavColor);
}

header #menuWrapper nav.second ul.menu li:first-child > a {
    margin-left: auto;
}

#MenuButton .line.top {
	top:8px;
}

#MenuButton .line.middle {
	top:14px;
}

#MenuButton .line.bottom {
	top:21px;
}

#MenuButton:hover .line.top {
	width: 78%;
	right: -12%;
}
#MenuButton:hover .line.middle {
	width:65%;
	right: -25%;
}
#MenuButton:hover .line.bottom {
	width:70%;
	right: -20%;
}

#MenuButton.close .line.bottom,
#MenuButton.close .line.middle,
#MenuButton.close .line.top {
	transform: rotate(45deg);
	top: 22px;
	width: 90%;
	left: 3px;
}
#MenuButton.close .line.middle {
	top: 18px;
}
#MenuButton.close .line.bottom {
	transform: rotate(-45deg);
	top: 15px;
}

header .PLZabfrageWrapper {
    display: none;
}

nav.second {
	opacity:0.2;
	overflow:hidden;
	
    height: 100vh;
    display: table;
    position: fixed;
    top: 0;
    right: 0;
    width: 0vw;
    
    overflow: hidden;
    z-index: 10;
    background: var(--SeconNavBackgroundColor);
    color: var(--SeconNavColor);

    -webkit-transition-property: all;
	-moz-transition-property: all;
	 -ms-transition-property: all;
	  -o-transition-property: all;
	     transition-property: all;
	-webkit-transition-duration: 0.25s;
	-moz-transition-duration: 0.25s;
	 -ms-transition-duration: 0.25s;
	  -o-transition-duration: 0.25s;
	     transition-duration: 0.4s
}

header nav.second ul.menu li a {
    color: var(--SeconNavColor);
}

nav.second .TableCell {
    display: none;
}

nav.second.open {
	
	width: 100vw;
	opacity: 1;
}

nav.second.open .TableCell {
    display: table-cell;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

footer ul.menu li a,
nav ul.menu li a  {
    letter-spacing: normal;
}

footer ul.menu li.active a,
nav ul.menu li.active a  {
    font-weight: bold;
    letter-spacing: normal;
}

/* nav.second ul.menu { */
nav.second .TableCell {
    vertical-align: middle;
    text-align: center;
}

nav.second .TableCell > div:first-child {
	display: none;
}

nav.second ul.menu li {
    display: block;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 5px;
    margin-bottom: 0;
}

nav.second ul.menu li a {
    font-size: 23px;
    font-weight: normal;
    max-width: 600px;
    margin: 0 auto;
	padding: 8px;
}

#menu nav.second ul.menu li.expand ul li a:hover,
#menu nav.second ul.menu li.active ul li a:hover,
#menu nav.second ul.menu li a:hover,
#menu nav.second ul.menu li.active a {
	background-color:var(--SeconNavActiveBackgroundColor);
	color:var(--SeconNavActiveColor);
    text-decoration: none;
}

#menu nav.second ul.menu li.expand ul li a,
#menu nav.second ul.menu li.active ul li a {
    background-color: transparent;
    color:var(--SeconNavActiveColor);
}

/* **************
 * Menü Animation
 * ENDE
 * **************/
nav.main {
    display: inline-block;
    margin: 0;
    padding: 0;
    top: 0;
    text-align: center;
    width: 100%;
}

#menu ul.menu li a {
    color: var(--aColor);
}

#content {
    padding-bottom: 320px;
    z-index: 1;
    position: relative;
    height: auto;
}


#FooterWrapper {
	background: var(--footerBackgroundColor);
    /*background-image: url("footerLogo.svg");*/
    /*background-repeat: no-repeat;*/
    /*background-position: 40px 40px;*/
    /*background-size: contain;*/
	color:var(--footerColor);
	position: absolute;
	width: 100%;
	bottom: 0;
	height: 320px;
	z-index: 2;
	font-weight: normal;
}

#FooterWrapper .backgroundBorderColor {
    background: var(--mainColor);
    height: 2px;
}

#footer {
	text-align: left;
	padding-top: 25px;
	padding-bottom: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
}

#footer > * {
    min-width: 33%;
}

/*
#footer > div,
#footer > img {
	display: inline-block;
	width: 33%;
}
*/

#footer a {
	color: var(--footerColor);
}

#footer b {
	font-weight: bold;
}

#footer img {
	height: 80px;
	margin-right: 50px;
}

#footer > div.Adress {
    color: #727272;
    font-size: 14px;
    line-height: 1.5;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    padding-top: 0px;
    padding-left: 150px;
    background: url("pferdekopf_signet.png") 0 0 no-repeat;
    color: #ffffff;
}

#footer > div.Adress .footer-rappenhof-font {
    font-family: Felice-BlackItalic;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    color: #FFF;
}

#footer strong {
    margin-bottom: 10px;
    display: block;
}

#footer ul.menu {
    margin: 0;
    padding: 0;
}

#footer ul.menu li {
    list-style-type: none;
    margin: 0px 0px 0px 0;
    padding: 0px;
    display: block;
    position: relative;
}

#footer ul.menu li a {
    margin: 0;
    padding: 0;
}

#footer ul.menu li.expand a,
#footer ul.menu li.active a,
#footer ul.menu li a:hover {
    text-decoration: underline;
}

#footer ul.menu li ul {
    display: none;
}

.ext_SlideJS .info {
    max-width: 33%;
}

/* *****************
 * Shop Extension
 * *****************/

.ext_Shop .ArtikelList .Artikel {
    width: 100%;
    margin-bottom: 1.3%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-top: 2px solid var(--secondColor);
    border-bottom: 2px solid var(--secondColor);
}

table.Basket tr.Zischensumme {
    border-top: 4px solid #000;
}

table.Basket tr.Gesamtsumme td:nth-child(5), table.Basket tr.Gesamtsumme td:nth-child(6) {
    border-top: 2px solid #000;
    border-bottom: 4px solid #000;
}

table.Basket tr th {
    background: #000;
    color: #fff;
}

.ext_Shop .ArtikelList .Artikel:hover {
    background-color: #f2f2f2;
}

input[type="submit"],
.ext_Shop a.Button,
.ext_Shop .ArtikelList .Artikel a div.artLinkText {
    background: var(--mainColor);
    color: var(--Color) !important;
    border-radius: var(--BorderRadius);
}

.ext_Shop .ArtikelList .Artikel div.ArtikelImage {
    max-height: 275px;
    max-width: 275px;
    width: 20%;
    margin-top: 9px;
    padding-bottom: 9px;
}

.ext_Shop .ArtikelList .Artikel > a {
    width: 20%;
    min-width: 120px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.ext_Shop .ArtikelList .Artikel > a.delete,
.ext_Shop .ArtikelList .Artikel > a.edit {
    min-width: inherit;
    right: 15px;
    padding: 4px;
    bottom: inherit;
}

.ext_Shop .ArtikelList .Artikel > a.edit {
    right: 50px;
}

.ext_Shop .ArtikelList .Artikel > a.delete:hover,
.ext_Shop .ArtikelList .Artikel > a.edit:hover {
    border-radius: var(--BorderRadius);
    background-color: rgba(175, 175, 175, 0.5);
    background: var(--mainColor);
}

.ext_Shop .ArtikelList .Artikel > a.delete:hover img,
.ext_Shop .ArtikelList .Artikel > a.edit:hover img {
    filter: brightness(10);
}

.ext_Shop .ArtikelList .Artikel .artTitle {
    margin-top: 0px;
}

.ext_Shop .ArtikelList .Artikel .artInfo {
    width: 50%;
}

.ext_Shop .ArtikelList .Artikel .ArtikelImage img {
    /*aspect-ratio: 1/1;*/
    max-width: 150px;
    max-height: 150px;
}



.ext_Shop .ArtikelList .Artikel:empty {
    display: none;
}

.ext_Shop .ArtikelList .Artikel:nth-child(3n+2) {
    margin-left: 0;
    margin-right: 0;
}

.ext_Shop .ArtikelSingle .ArtikelImageNav:before {
    content: "";
    position: relative;
    display: block;
    height: 4px;
    background: var(--mainColor);
    z-index: 5;
}

.ext_Shop .ArtikelSingle .ArtikelImage img {
    max-height: inherit !important;

    /*width: auto !important;*/
    max-width: inherit !important;
    margin: 0 !important;
}



.ext_Shop .ArtikelSingle .ArtikelImageNav img {
    max-height: inherit !important;
}

#content .ext_Shop ul.ShopCatList li.expand ul li.collapse a:hover,
#content .ext_Shop ul.ShopCatList a:hover,
#content .ext_Shop ul.ShopCatList li.expand a,
#content .ext_Shop ul.ShopCatList li.active a {
    color: var(--aHoverColor);
    text-decoration: underline;
}

#content .ext_Shop ul.ShopCatList li a .bDetails,
#content .ext_Shop ul.ShopCatList li .cbes,
#content .ext_Shop ul.ShopCatList li .catImgList,
#content .ext_Shop .catImgList ul.ShopCatList li .ImageWrapper {
    display: none;
}

#content .ext_Shop ul.ShopImageCatList li div.bDetails {
    color: var(--Color);
    background: var(--mainColor);
    border-radius: var(--BorderRadius);
}


#content .ext_Shop .addBasketForm {
    background-color: transparent;
}

#content .ext_Shop .artTitle {
    font-weight: bold;
    font-size: 18px;
    text-align: left;
}

#content .ext_Shop ul.ShopImageCatList li a div.catTitle {
    color: var(--aColor);
}

#main .ext_SlideJS .info {
    backdrop-filter: blur(20ox) brightness(5%);
    -webkit-backdrop-filter: blur(20px);
    background: var(--Color);
    padding: 25px;
}

#main .ext_SlideJS .dark .info a {
    color: var(--Color);
    background: var(--mainColor);
    border-radius: var(--BorderRadius);
    border: none;
    display: inline-block;
    width: auto;
    min-width: auto;
    margin: 5px 0;
}

#main .ext_SlideJS h1,
#main .ext_SlideJS h2,
#main .ext_SlideJS h3,
#main .ext_SlideJS h4,
#main .ext_SlideJS h5,
#main .ext_SlideJS h6 {
    font-size: 150%;
}
#main .ext_SlideJS a,
#main .ext_SlideJS p,
#main .ext_SlideJS ul,
#main .ext_SlideJS ol,
#main .ext_SlideJS ul li,
#main .ext_SlideJS ol li,
#main .ext_SlideJS * {
    font-size: 100%;
}

/*  ****************
 * Login Form
 * ****************/

.ext_Login .UserLogin.col_4_4,
#content .ext_Login .UserLogin {
    max-width: 300px;
    margin: auto;
    min-height: calc(100vh - 308px);
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

.ext_Login .UserLogin.col_4_4{
    width: 40%;
    text-align: center;
}

#content .ext_Login .UserLogin  form {
    width: 100%;
}

#content .ext_Login .UserLogin  form input[type="text"],
#content .ext_Login .UserLogin  form input[type="password"] {
    border: 1px solid var(--inputBorderColor);
    border-radius: var(--BorderRadius);
}

#content .ext_Login .UserLogin  form input[type="submit"] {
    margin-top: 0px;
    border-radius: var(--BorderRadius);
}

#content .ext_Login .UserLogin  form input[type="text"],
#content .ext_Login .UserLogin  form input[type="password"] {
    margin-bottom: 25px;
}

#HeaderExtnsion #login-form{
    display: none;
}

.Button {
    padding: 16px 20px;
    color: var(--Color);
    background: var(--mainColor);
    border-radius: var(--BorderRadius);
}

.DisplayFlex > .CMS.col_4_4 {
    width: 90%;
}

.ext_Login .UserReg label {
    font-size: 16px;
    font-weight: normal;
}

a.button {
    background: var(--mainColor);
    color: var(--Color) !important;
    padding: 16px 20px;
}

a.button:active{
    transform: scale(0.9);
}

a.button:focus{
    outline: none;
    background: #2b3e51
}

.ext_Login .UserLogin.col_4_4 a.button{
    margin: 0 auto;
}


#HeaderExtnsion .ext_Login .UserLogin form{
    display: none;
}

#HeaderExtnsion .ext_Login .UserLogin{
    display: grid;
}

#HeaderExtnsion .ext_Login .UserLogin a {
    display: inline-block;
    background: var(--mainColor);
    color: var(--Color);
    padding: 10px;
}


/* ****************
 * Browser Theme
 * ****************/
@media (prefers-color-scheme: dark) {
/*    :root {
        --BodyBackgroundColor: #333;
        --BodyColor: #fff;
        --headerBackgroundColor: #404040;
        --headerColor: #fff;
        --aColor:#fff;
        --h1Color: #fff;
        --h2Color: #fff;
        --backToTop: #004f91;
        --footerColor: #fff;
        --footerBackgroundColor: #404040;
        --LightBoxBackgroundColor: #404040;
        --LightBoxTextColor: #fff;
        --SeconNavBackgroundColor:rgba(50, 50, 50, 0.9);
        --SeconNavColor:#053E6D;
    }*/
	
}

@media (prefers-color-scheme: light) {
}

@media only screen and (max-width: 1024px) {
    .ext_SlideJS .info {
        top: 20%;
        max-width: 33%;
    }
}

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

    header #top {
        height: 50px;
    }

    .menu.display {
        top: -40px !important;
    }

    .menu-icon {
        top: -27px;
        left: 0;
    }

    #header ul.menu.display {
        background-color: transparent;
    }

    #header ul.menu.display li {
        background-color: #fff;
    }

    .menu.display::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255,255,255,0.5);
        -webkit-backdrop-filter: blur(25px);
        backdrop-filter: blur(25px);
        z-index: -1;
    }

    #Logo img {
        max-height: 80px;
    }

    #HeaderExtnsion {
        padding-top: 200px;
    }
	
	nav.second .TableCell > div:first-child {
		display: block;
		position: relative;
		height: auto;
		overflow: visible;
		width: 100%;
	}
	
	#header .TableCell ul.menu {
		display: block !important;
		position: relative;
		height: auto;
		width: 100%;
		top: auto;
		overflow: visible;
		opacity: 1;
	}
    
    
    #header.second #Logo img {
        height: 37px;
    }
    
    #header.second #MenuButton {
        top: 5px;
    }
    
    footer ul.menu li {
        padding: 0;
    }
    
    #footer > div:first-child {
        width: 50%;
    }
    
    #footer > div:last-child {
        width: 35%;
    }
    
    #footer img {
        height: 60px;
    }

    #header.up {
        top: -140px;
    }
}

@media only screen and (max-width: 700px) {
	.img { max-width: 100%; }
	.col_4 {  margin: 1% 0 1% 0%; }
	.col_1_4, .col_2_4, .col_3_4, .col_4_4 { width: 100%; }
	.backgroundImage { background-size:cover; background-position:center; background-attachment: inherit;}
	.width50 { width:95%; float:none; margin-right:1.8%;}
	.width25 { width:95%; margin-left:1.8%; float:none; text-align: center}
	.width33 { width:95%; margin-left:1.8%; float:none;}
	.width66 { width:95%; margin-left:1.8%; float:none;}
	.width75 { width:95%; margin-left:1.8%; float:none;}

    .backToTop {
        height: 50px;
        width: 50px;
        bottom: 11px;
    }

	#menuWrapper ul.menu {
		display: none;
	}

    header #menuWrapper #menu {
        padding-left: 20px;
        padding-right: 45px;
    }

    #footer > div,
    #footer > div:last-child {
        width: 90%;
    }

    #footer ul.menu {
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        align-items: center;
        text-align: center;
    }

    .ext_SlideJS .info {
        top: 10%;
        max-width: 80%;
    }

    #Logo img,
    #header.second #Logo img {
        height: 37px;
    }

    #header .search {
        display: none;
    }

    #Logo {
        left:25px;
    }

    #MenuButton,
    #header.second.up #MenuButton {
        /*right: 5px;*/
        /*top: 5px;*/
    }

    #header #MenuButton.close,
    #header.second.down #MenuButton {
        top: -65px;
    }

    #MenuButton,
    #header.second #MenuButton {
        right: 5px;
        top: 0px;
    }
    
	#menuWrapper ul.menu {
		display: none;
	}



    header #menuWrapper nav.second .catImgList ul.ShopCatList li a,
    header #menuWrapper nav.second .catImgList ul.menu li a,
    nav.second .catImgList ul.ShopCatList li a,
    nav.second .catImgList ul.ShopCatList li {
        width: 100%;
        color: var(--SeconNavColor);
        font-size: 20px;
    }

    header #menuWrapper #menu nav.second ul.ShopCatList li:hover > a,
    header #menuWrapper #menu nav.second ul.ShopCatList li.expand > a,
    header #menuWrapper #menu nav.second ul.ShopCatList li.active > a,
    header #menuWrapper #menu nav.second ul.menu li:hover > a,
    header #menuWrapper #menu nav.second ul.menu li.expand > a,
    header #menuWrapper #menu nav.second ul.menu li.active > a {
        font-weight: normal;
        background-color: #000;
        text-decoration: none;
    }

    nav.second .TableCell > ul.menu li a {
        font-size: 14px;
    }

    #content {
        padding-bottom: 450px;
    }

    #content div.textWrapper > div.text {
        margin-left: 5%;
        margin-right: 5%;
    }
    
    #FooterWrapper {
        height: 422px;
    }
    
    #footer > div {
        display: block;
        text-align: center;
        margin: 10px auto;
    }

    .ext_Shop .ArtikelSingle form > :last-child {
        width: 100%;
    }

    .ext_Shop .ArtikelSingle form > :first-child {
        width: 90%;
        margin: 0 auto;
    }

    .artContent .ArtikelSub {
        height: 280px;
    }

    .preisRechnung .width40,
    .preisRechnung .width20 {
        width: 50%;
    }

    .preisRechnung .width40:last-child {
        width: 90%;
        margin: 10px auto;
    }

    #footer > div:first-child {
        width: 90%;
    }

    #content .preisRechnung input[type="submit"], .ArtikelVarianten {
        width: 100%;
    }

    #main #FooterWrapper {
        bottom: 0px;
    }

    .preisRechnung > div:first-child,
    #monatlicheKosten > div:first-child {
        text-align: left;
    }

    .artContent .ArtikelSub {
        /*position: relative;*/
    }
}