/*****************************************************************************************************************************************************************************************************************************/
/*-----| VARIABLES												|----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
:root {
  --stammred: #dc1138;
  --stammgreen: #38A006;
  --stammblack: #222222;
  --stammdark: #464646;
  --stammmedium: #969696;
  --stammlight: #d0d0d0;
  --stammextradarksilver: #e9e9e9;
  --stammdarksilver: #f3f3f3;
  --stammsilver: #f5f5f5;
  --stammlightsilver: #f9f9f9;
  --stammwarning: #FF6600;
  --stammwarninglight: rgba(255,102,0,0.825);
  --strammtablehover: #e0f2ff;

  --stammshadow: 0 0 20px rgba(0,0,0,0.125);
  --stammshadowlight: 0 0 20px rgba(0,0,0,0.065);
  --headerheight: 60px;
}

.bg-red																{ background: var(--stammred); }
.bg-switch															{ background: var(--stammred); }
.bg-switch.bg-0													{ background: var(--stammred); }
.bg-switch.warning												{ background: var(--stammwarning); }
.bg-switch.warning .pointbox									{ color: var(--stammblack); background: var(--stammwarning) !important; }

header.bg-0															{ background: white !important; }
header																{ background: repeating-linear-gradient( 45deg, var(--stammwarninglight), var(--stammwarninglight) 10px, var(--stammwarning) 10px, var(--stammwarning) 20px ) !important; }

.bg-contain															{ background-repeat: no-repeat; background-position: center; background-size: contain; }
.bg-cover															{ background-repeat: no-repeat; background-position: center; background-size: cover; }
.bg-warning															{ background-color: var(--stammwarning) !important; }
.alert-warning														{ color: white; background-color: var(--stammwarninglight); border-color: var(--stammwarning); }


.btn-primary														{ color: white; background-color: var(--stammred); border-color: var(--stammred); }
.btn-primary:hover												{ color: white; background-color: var(--stammblack); border-color: var(--stammblack); }
.btn-black															{ color: white; background-color: var(--stammblack); border-color: var(--stammblack); }
.btn-black:hover													{ color: white; background-color: var(--stammred); border-color: var(--stammred); }
.btn-outline-black												{ color: var(--stammblack) !important; background-color: white !important; border-color: white !important; }
.btn-outline-black:hover										{ color: white !important; background-color: var(--stammred) !important; border-color: var(--stammred) !important; }
.btn-warning														{ color: white; background-color: var(--stammwarning); border-color: var(--stammwarning); }
.btn-warning:hover												{ color: white; background-color: var(--stammblack); border-color: var(--stammblack); }
.btn-noborder-silver												{ color: var(--stammmedium); background-color: transparent; border-color: transparent; }
.btn-noborder-silver:hover										{ color: var(--stammdark); background-color: transparent; border-color: transparent; }

a																		{ color: var(--stammred); text-decoration: none; }
a:hover																{ color: var(--stammblack); }
a.text-dark															{ color: var(--stammblack) !important; }
a.text-dark:hover													{ color: var(--stammred) !important; }
.text-medium, .text-medium a									{ color: var(--stammmedium) !important; }
.text-medium a:hover												{ color: var(--stammred) !important; }

.fs-75																{ font-size: 0.75rem; }
.fs-90																{ font-size: 0.9rem; }
.fs-125																{ font-size: 1.25rem; }
.fs-150																{ font-size: 1.5rem; }
.fs-175																{ font-size: 1.75rem; }
.fs-200																{ font-size: 2rem; }
.lh-100																{ line-height: 1rem; }
.lh-110																{ line-height: 1.1rem; }
.lh-125																{ line-height: 1.25rem; }

h1																		{ margin: 0 !important; font-size: 1.5rem; }

.mx--1																{ margin-left: -0.25rem; margin-right: -0.25rem; }
@media screen and (max-width: 768px) {
main .p-1															{ padding: 0.125rem !important; }
main .p-2															{ padding: 0.25rem !important; }
main .p-3															{ padding: 0.5rem !important; }
main .p-4															{ padding: 1rem !important; }

.table-filter > form												{ display: block !important; }
.table tbody td													{ width: 10% !important; font-size: 0.75rem; white-space: normal !important;	 }
}
/*-----| FONT														|----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


/*-----| DEFAULT													|----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
html																	{ height: 100%; font-size: 16px; font-weight: 300; line-height: 1.5; }
body																	{ height: 100%; color: var(--stammblack); }
.container-wide													{ width: 100%; max-width: 1400px; margin: 0 auto; }

@media screen and (max-width: 959px) {
}
@media screen and (min-width: 960px) {
body																	{ background: var(--stammsilver); }
}
/*-----| Login														|----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#login-image														{ position: relative; background: url('/pages/img/loginbild.jpg') no-repeat center; background-size: cover; }
#login-image:before												{ display: block; content: ""; position: absolute; z-index: 1; left: 0; top: 50%; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent 0%, var(--stammred) 100%); }
#login-image:after												{ display: block; content: ""; position: absolute; z-index: 2; left: 20px; top: 20px; right: 20px; height: 50px; background: url('/pages/img/phwz_logo.svg') no-repeat left top; background-size: contain; }

#login-box > div													{ width: 100%; max-width: 400px; }

#login-box #frmLogin												{ opacity: 1; height: var(--openheight); overflow: hidden; transition: all 0.3s; }
#login-box.recover #frmLogin									{ opacity: 0; height: 0px; }
#login-box #frmRecover											{ opacity: 0; height: 0px; overflow: hidden; transition: all 0.3s; }
#login-box.recover #frmRecover								{ opacity: 1; height: var(--openheight); }


/*-----| CONTENT FRAME											|----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#content_frame														{ position: relative; width: 100%; height: 100%; overflow: hidden; }
#content_header													{ position: absolute; z-index: 1000; left: 0; top: 0; right: 0; height: var(--headerheight); }
#content																{ position: absolute; z-index: 100; left: 0; top: var(--headerheight); right: 0; bottom: 0; }
#content > div														{ position: relative; overflow: hidden; }
#content_west li													{ list-style: none; }

@media screen and (max-width: 959px) {
#h-hamburger														{ display: block !important; }
#content_west														{ position: absolute; z-index: 10; left: -300px; top: 0; bottom: 0; width: 300px; overflow-x: hidden; overflow-y: auto; background: var(--stammsilver); opacity: 0; transition: all 0.3s; box-shadow: var(--stammshadow); }
.navi #content_west												{ left: 0px; opacity: 1; }
#content_main														{ position: relative; z-index: 1; width: 100%; overflow-x: hidden; overflow-y: auto; background: white; }
}
@media screen and (min-width: 960px) {
.showwest #content_west											{ position: relative; z-index: 10; width: 300px; overflow-x: hidden; overflow-y: auto; background: var(--stammsilver); }
.showwest #content_main											{ position: relative; z-index: 1; width: calc(100% - 300px); overflow-x: hidden; overflow-y: auto; background: white; }

.hidewest #h-hamburger											{ display: block !important; }
.hidewest #content_west											{ position: absolute; z-index: 10; left: -300px; top: 0; bottom: 0; width: 300px; overflow-x: hidden; overflow-y: auto; background: var(--stammsilver); opacity: 0; transition: all 0.3s; box-shadow: var(--stammshadow); }
.hidewest.navi #content_west									{ left: 0px; opacity: 1; }
.hidewest #content_main											{ position: relative; z-index: 1; width: 100%; overflow-x: hidden; overflow-y: auto; background: white; }
}

/*-----| HEADER													|----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
header																{ background: white; box-shadow: var(--stammshadow); }
header #h_service													{ position: relative; }
header #h_service > div											{ height: 100%; padding: 0; }
header #h_service > div > a									{ height: 100%; min-width: 60px; color: white; padding: 0 20px; background: transparent; transition: background 0.3s; }
header #h_service > div > a:hover							{ background: var(--stammblack); }

header #h_service > div#h_basket > a						{ position: relative; }
header #h_service > div#h_basket > a span					{ display: none; position: absolute; right: 6px; top: 8px; padding: 0 0 2px 0; height: 20px; width: 20px; line-height: 18px; font-size: 11px; font-weight: bold; min-width: 20px; text-align: center; color: white; border-radius: 10px; background: var(--stammdark); }
header #h_service > div#h_basket > a span.full			{ display: block; }

header #h_myshop													{ min-width: 150px; }
header #h_myshop > ul											{ display: none; position: absolute; left: 0; top: 60px; right: 0; margin: 0; padding: 10px 0; background: white; box-shadow: var(--stammshadow); }
header #h_myshop:hover > ul									{ display: block; }
header #h_myshop > ul > li										{ list-style: none; }
header #h_myshop > ul > li.current							{ background: var(--stammlight) }
header #h_myshop > ul > li > a								{ display: block; padding: 5px 20px 5px 40px; color: var(--stammblack); font-size: 0.9rem; }
header #h_myshop > ul > li > a:hover						{ color: var(--stammred); }
header #h_myshop > ul > li > a > i							{ margin-left: -20px; }

@media screen and (max-width: 768px) {
#h_logo																{ display: block !important; width: 100px; padding-top: 0 !important; padding-bottom: 0 !important;	 }
#h_logo img															{ float: left; height: 18px !important; }
#h_logo img:last-child											{ margin: 6px 0 0 0 !important; }
#h_myshop															{ width: 60px !important; min-width: 60px !important; }
#h_myshop > a#h_user_desktop									{ display: none !important; }
#h_myshop > a#h_user_mobile									{ display: flex !important; }
#h_myshop .pointbox												{ position: fixed; top: 60px; left: 100%; min-width: 60px; margin-left: -180px; padding: 0 20px; background: var(--stammdark); border-radius: 0 0 5px 5px; text-align: center; line-height: 18px; }
header #h_myshop > ul											{ position: fixed; }
header #h_myshop > ul > li										{ padding: 8px 0; }
}

/*-----| WEST														|----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#content_west > nav > ul > li > a							{ color: var(--stammdark); }
#content_west > nav > ul > li > a:hover					{ color: var(--stammred); }
#content_west > nav > ul > li.current > a					{ color: var(--stammred); font-weight: bold; background: white; }

/*-----| PRODUCT LIST											|----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.pro-box > div														{ background: var(--stammdarksilver); }
.pro-box > div:hover												{ box-shadow: var(--stammshadow); }
.pro-top																{ border: 4px solid var(--stammdarksilver); }
.pro-image-container												{ position: relative; }
.pro-image-zoom													{ position: absolute; z-index: 10; right: 10px; bottom: 10px; width: 32px; height: 32px; font-size: 24px; line-height: 32px; text-align: right; text-shadow: 0 0 5px rgba(255,255,255,0.5); color: var(--stammlight); cursor: pointer; }
.pro-image-zoom.pro-image-zoom-top							{ bottom: auto; top: 10px; }
.pro-image-zoom:hover											{ color: var(--stammblack); }
.pro-image-thumb													{ position: absolute; z-index: 10; left: 10px; bottom: 10px; width: 72px; padding: 3px; border: 3px solid var(--stammdarksilver); background: white; }
.pro-image-thumb > div											{ padding: 50%; }
.pro-image															{ display: block; padding: 33.3333%; }
.pro-image-thumb:hover + .pro-image							{ background-image: var(--imagehover) !important; }
.pro-text															{ color: var(--stammblack); }
.pro-buy																{ height: 40px; background: var(--stammdarksilver); padding: 2px; }
.pro-buy > div > div												{ padding: 2px; }
.pro-buy select													{ width: 100%; height: 32px; padding: 0 5px; line-height: 32px; border: none; border-radius: 0; outline: none; }
.pro-buy input														{ width: 100%; height: 32px; padding: 0 5px; line-height: 32px; border: none; border-radius: 0; outline: none; }
.pro-buy button													{ width: 100%; height: 32px; padding: 0; line-height: 32px; border-radius: 0; outline: none; }
.pro-buy span														{ height: 32px; line-height: 32px; padding: 0 5px; }

.galleryzoom .modal-header										{ position: absolute; z-index: 100000; top: 0; right: 0; border: none !important; }
.galleryzoom .modal-body										{ padding: 0; }

/*-----| PRODUCT DETAIL											|----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.pd-carousel														{ border: 3px solid var(--stammsilver); padding: 10px; }
.pd-carousel div.solo.inline									{ padding: 50%; }
.pd-buy																{ background: var(--stammdarksilver); padding: 5px; }
.pd-buy > div > div												{ padding: 2px; }
.pd-buy select,
.pd-buy select														{ min-width: 96px; outline: none; box-shadow: none !important; border-radius: 0; }
.pd-buy input														{ width: 64px; outline: none; box-shadow: none !important; border-radius: 0; }
.pd-buy button														{ min-width: 64px; border-radius: 0; }

/*-----| BASKET													|----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.basket-table thead td											{ padding: 3px 10px; font-size: 14px; font-weight: bold; border-bottom: 2px solid var(--stammdark); vertical-align: bottom; }
.basket-table tbody td											{ padding: 6px 10px; border-bottom: 1px solid var(--stammlight); vertical-align: middle; }
.basket-table tbody td .bsi-image							{ width: 100px; padding: 33.3333%; }
.basket-table tbody td button,
.basket-table tbody td input,
.basket-table tbody td select									{ height: 30px; line-height: 28px; padding: 0 5px; border: 1px solid var(--stammlight); border-radius: 0; outline: none; }
.basket-table tbody td input									{ width: 50px; }
.basket-table tbody td select									{ width: 100px; }

.basket-table tfoot td											{ padding: 3px 10px; font-weight: bold; border-top: 2px solid var(--stammdark); vertical-align: bottom; }
.basket-table tfoot td.bb										{ border-bottom: 6px double var(--stammdark); }


@media screen and (max-width: 768px) {
.basket-table-show thead 										{ display: none; }
.basket-table-show,
.basket-table-show tbody 										{ display: block; }
.basket-table-show tbody > tr									{ display: flex; flex-wrap: wrap; width: 100%; }
.basket-table-show tbody > tr > td							{ display: block; }
.basket-table-show tbody > tr > td:nth-of-type(1)		{ width: 50%; }
.basket-table-show tbody > tr > td:nth-of-type(2)		{ width: 50%; }
.basket-table-show tbody > tr > td:nth-of-type(3)		{ width: 35%; }
.basket-table-show tbody > tr > td:nth-of-type(4)		{ width: 35%; }
.basket-table-show tbody > tr > td:nth-of-type(5)		{ width: 15%; }
.basket-table-show tbody > tr > td:nth-of-type(6)		{ width: 15%; }
.basket-table-show tbody > tr > td:nth-of-type(7)		{ width: 70%; border-color: var(--stammdark); }
.basket-table-show tbody > tr > td:nth-of-type(8)		{ width: 15%; font-weight: bold; border-color: var(--stammdark); }
.basket-table-show tbody > tr > td:nth-of-type(9)		{ width: 15%; border-color: var(--stammdark); }
.basket-table-show tbody > tr	> td > select,
.basket-table-show tbody > tr	> td > input				{ width: 100% !important; }
.basket-table-show tfoot 										{ display: block; }
.basket-table-show tfoot > tr									{ display: flex; flex-wrap: wrap; width: 100%; }
.basket-table-show tfoot > tr > td:nth-of-type(1)		{ display: none;  }
.basket-table-show tfoot > tr > td:nth-of-type(2)		{ display: block; width: 50%; }
.basket-table-show tfoot > tr > td:nth-of-type(3)		{ display: block; width: 50%; }
.basket-table-show tfoot > tr > td:nth-of-type(4)		{ display: none; }

.basket-table-print thead 										{ display: none; }
.basket-table-print,
.basket-table-print tbody 										{ display: block; }
.basket-table-print tbody > tr								{ display: flex; flex-wrap: wrap; width: 100%; }
.basket-table-print tbody > tr > td							{ display: block; }
.basket-table-print tbody > tr > td:nth-of-type(1)		{ width: 50%; }
.basket-table-print tbody > tr > td:nth-of-type(2)		{ width: 50%; }
.basket-table-print tbody > tr > td:nth-of-type(3),
.basket-table-print tbody > tr > td:nth-of-type(4),
.basket-table-print tbody > tr > td:nth-of-type(5),
.basket-table-print tbody > tr > td:nth-of-type(6),
.basket-table-print tbody > tr > td:nth-of-type(7)		{ width: 20%; }
.basket-table-print tbody > tr > td:nth-of-type(7)		{ font-weight: bold; }
.basket-table-print tfoot 										{ display: block; }
.basket-table-print tfoot > tr								{ display: flex; flex-wrap: wrap; width: 100%; }
.basket-table-print tfoot > tr > td:nth-of-type(1)		{ display: none;  }
.basket-table-print tfoot > tr > td:nth-of-type(2)		{ display: block; width: 50%; }
.basket-table-print tfoot > tr > td:nth-of-type(3)		{ display: block; width: 50%; }
.basket-table-print tfoot > tr > td:nth-of-type(4)		{ display: none; }

}


/*-----| FORM														|----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
option:disabled													{ color: var(--stammmedium); }
select.form-control												{ height: 38px; appearance: auto; padding-left: 8px !important; }

/*-----| MYSHOP													|----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.table-filter > div > div > *,
.table-filter > form > div > *								{ height: 32px; border-style: solid; border-width: 1px 1px 1px 0; border-color: var(--stammextradarksilver); border-radius: 0; font-size: 13px; line-height: 30px; background: var(--stammlightsilver); outline: none; }
.table-filter > div > div > *:first-child,
.table-filter > form > div > *:first-child				{ border-width: 1px; }

.table-filter > div > div > label > i,
.table-filter > form > div > label > i						{ min-width: 36px; text-align: center; }
.table-filter > div > div > button,
.table-filter > form > div > button							{ min-width: 36px; text-align: center; transition: all 0.3s; }
.table-filter > div > div > button:hover,
.table-filter > form > div > button:hover					{ background: var(--stammred); color: #ffffff; }
.table-filter > div > div > select,
.table-filter > form > div > select,
.table-filter > div > div > input,
.table-filter > form > div > input							{ width: 100px; }

.table-striped > tbody > tr > td								{ border-color: var(--stammextradarksilver) !important; box-shadow: none; }
.table-striped > tbody > tr:nth-child(2N-1) > td		{ background-color: var(--stammlightsilver) !important; }
.table-striped > tbody > tr:hover > td						{ background-color: var(--strammtablehover) !important; }
.table-striped > tbody > tr.highlighted > td				{ color: #0f5132 !important; background-color: #d1e7dd !important; border-color: #badbcc !important; font-weight: bold; }
/*-----| WEST														|----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----| WEST														|----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


#-lucee-err { position: fixed; z-index: 99999999999; left: 0; top: 60px; right: 0; bottom: 0; overflow: auto; }