@charset "utf-8";

/* =========================================
    			CSS Reset
======================================== */
*{ margin:0; padding:0; }
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, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, main, 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;
	float:none;
}
article, aside, details, figcaption, figure, 
footer, header, main, hgroup, menu, nav, section {
	display:block;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
/*--------------------------- Ende CSS Reset ---------------------------*/

/*--- Eigene Fonts ---*/
@font-face { font-family: 'TT Commons Pro';
             src: url('/fonts/tt_commons_pro_regular.woff2') format('truetype'); }
@font-face { font-family: 'POE Vetica UI';
             src: url('/fonts/poe-vetica-ui.woff2') format('truetype'); }
/* Ende Eigene Fonts */

/*======================================== 
				Farben 
========================================*/
:root {		
	--color-black: #000000;
	--color-black-op003: rgba(0,0,0,0.03);
	--color-black-op01: rgba(0,0,0,0.1);
	--color-black-op03: rgba(0,0,0,0.3);
	--color-black-op05: rgba(0,0,0,0.5);
	--color-black-op07: rgba(0,0,0,0.7);
	--color-black-op09: rgba(0,0,0,0.9);
		
	--color-blue: #236E94;
	--color-blue-op03: rgba(35,110,148,0.3);
	--color-blue-light: #36A9E1;
	--color-blue-light-op01: rgba(54,169,225,0.1);
	--color-blue-light-op03: rgba(54,169,225,0.3);
	--color-blue-medium: #1B5572;
	--color-blue-dark: #133C50;
			
	--color-green: #94bd3e;
	--color-green-op03: rgba(148,189,62,0.3);	
	
	--color-gray: #3C3C3B;
	--color-gray-soft:#CFCFCF;	
	--color-gray-light:#6D6D6C;	
	--color-gray-border:rgba(109, 109, 108, 0.75); /* graylight op 0.75 */
	
	--color-orange: #fc6621;
	--color-orange-op03: rgba(252,102,33,0.3);
	
	--color-pink: #af0048;
	--color-pink-op03: rgba(175,0,72,0.3);
		
	--color-text-muted: #AAB3BC;
	
	--color-transparent: transparent;
	
	--color-white: #ffffff;
	--color-white-op01: rgba(255,255,255,0.1);
	--color-white-op03: rgba(255,255,255,0.3);
	--color-white-op05: rgba(255,255,255,0.5);
	--color-white-op07: rgba(255,255,255,0.7);
	--color-white-op09: rgba(255,255,255,0.9);
	
	--color-yellow: #FCCA27;
	--color-yellow-op03: rgba(252,202,2,0.3);
}
/*--------------------------- Ende Farben ---------------------------*/


/* =========================================
    			Grid
======================================== */
.container {
	height:auto;
	width:100%;
	max-width: 80rem;
	margin-left:auto;
	margin-right: auto;
	margin-top: 70px;
}
.row {
	display: block;
	width:100%;
	margin:auto;
}
/*--------------------------- Ende Grid ---------------------------*/


/* =========================================
    			Style
======================================== */
html { 
    min-height:100%;
    position:relative;    
} 
body {
	font-family: "tt-commons-pro", sans-serif;
	font-weight: 300;
	font-style: normal;
	background-color: var(--color-gray);	
	background-image: url("/images/diverses/coolsulting_ringe_30Pz.png");
	background-blend-mode: soft-light;
	color: var(--color-white);
	font-size: 1rem;
}
img {
	width: 100%;	
}
.fullwidth-video {
	position: relative;
}
.fullwidth-video video {
	display: block;
	width: 100%;
	height: auto;
}
.fullwidth-video .overlay {
	position: absolute; 
	top: 3rem;	
	width: 100%;	
	text-align: center;
}
.imgZoom {
	position: relative;
	transition: transform .3s;
	text-align: center;
	color: var(--color-white);
	margin-bottom: 2rem;
}
.imgZoom:hover {
	transform: scale(1.05);
}
.imgVideo {
	position: relative;
	transition: .5s;
	text-align: center;
	color: var(--color-white);
	margin-bottom: 2rem;
	-webkit-filter: blur(3px);
    filter: blur(3px);
}
.imgVideo:hover {
	transform: scale(1.02);
	-webkit-filter: none;
    filter: none;
}
.imgText_caption {
	position: absolute;
	width:80%;
    top: 65%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -50%);
    color: var(--color-white);
	font-size: 1.2rem;
    padding: 1rem;
    pointer-events: none;
	-webkit-filter: none;
    filter: none;
}
.imgBorder {
	border-radius: 1.5rem;
}
.icon-service {
	position: relative;
  	text-align: center;
	width: 300px;
	margin: auto;
	border-radius: 50%;	
}
.icon-service img {		
	border-radius: 50%;
}
.icon-service .text {
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/*--- helpers ---*/
.partner {	
	margin: auto;
}
.position-minus {
	position: absolute;
	top:-15rem;
}
.position-minus-5rem {
	position: relative;
	top:-5rem;
}
.d-none {
	display: none;
}
/*--- flex-box ---*/
.flex-box {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.flex-box p {
	margin: 0.5rem 1rem 0 1rem;
    padding: 0.5rem;
    border: 1px solid var(--color-white-op01);
}
/*--- Querstrich ---*/
hr {	
	border-top: 1px solid var(--color-white-op03);
	margin-bottom: 2rem;
}
/*--------------------------- Ende Style ---------------------------*/


/* =========================================
    			Section
======================================== */
section.topSection {
	padding: 4rem 0 2rem 0;
}
section {
	padding: 3rem 0;
}
/*--- Content Section ---*/
.content-section {
	display: flex;
    align-items: center;
    margin-bottom: 2rem;;
    padding: 20px 0;
}
.content-section-404 div {
	padding:1rem;
}
.content-section.reverse {
    flex-direction: row-reverse;
}
.content-section .text-content {
	width: 60%;
	margin: 0 2rem 0 0;
	text-align: left;
}
.content-section.reverse .text-content {
	width: 60%;
	margin: 0 0 0 2rem;
	text-align: left;
}
.content-section .image-content {
	width: 40%;
}
.content-section .image-content img {
    width: 100%;
    border-radius: 1.5rem;
}
.content-section .small-img {
	width: 240px;
	align-content: center;
	border: 1px solid var(--color-black-op03);
	margin: 1rem;
	border-radius: 0.8rem;
}
.content-section a:hover .small-img {
	transform: scale(1.03);
	transition: transform .35s ease;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.align-items-start {
	align-items: flex-start;
}
.justify-content-center {
	justify-content: center;
}
@media (max-width: 768px) {
	section.topSection {
		padding: 3rem 0 2rem 0;	
	}
	section {
		padding: 2rem 0;
	}
	.content-section {
		flex-direction: column;
        align-items: center;
	}
    .content-section .text-content, .content-section .image-content {
        width: 100%;
        margin: 0;
        text-align: left;
		padding: 1rem;
    }
}
/*--- Ende Content Section ---*/
/*--------------------------- Ende Section ---------------------------*/


/* =========================================
    			Formatierung
======================================== */
* {
	-webkit-hyphens: auto; 
  	hyphens: auto;
}
h1, h2, h3, h4, .title {
	font-family: "POE Vetica UI", 'Inter', sans-serif;	
}
h1 {
	font-size: 3rem;	
	font-weight: 600;	
	margin-bottom: 1rem;
	letter-spacing: 2px;
}
.product-main-section h1 {
	font-size: 1.5rem;	
	margin-bottom: 0.5rem;
}
h2 {
	font-size: 1.6rem;
	margin-bottom: 2rem;
}
.h2 {
	font-size: 2rem;
	margin-bottom: 2rem;
}
h3 {
	font-size: 1.4rem;
	margin: 2rem auto;
}
.h3-muted {
	font-family: "SamsungOne 400", 'Inter', sans-serif;
	font-size: 0.8rem;
	color: var(--color-text-muted);
}
h4 {
	font-size: 1rem;
	margin: 0.5rem auto 1rem auto;
	letter-spacing: 1px;
}
p {
	margin-bottom: 1rem;
}
a {
	color: var(--color-blue-light);	
	text-decoration: none;
}
a:hover {
	color: var(--color-blue);
	text-decoration: none;
}
a:focus {
	outline: none;
	color: inherit;
	text-decoration: none;
}
.delivery i {
	margin-right: 1rem;
}
.font-size-80-Prozent {
	font-size: 80%!important;
}
.font-size-110-Prozent {
	font-size: 110%!important;
}
.font-weight-bold, b {
	font-weight: bold;
}
.text-center {
	text-align: center!important;
}
.title {
	font-size: 3rem;
}
.subtitle {
	font-size: 1.2rem;
	margin:1rem auto 1.5rem auto;
}
.text-muted {
    color: var(--color-text-muted);
}
.alert-info {
	color: var(--color-blue-light);
    background-color: transparent;
    border-color: transparent;
}
.text-price {
	font-size: 1.8rem;
    font-weight: bold;
    margin-left: 0.5rem;
}
.text-discount {
	font-size: 1.2rem;
	margin-right: 1rem;
	font-weight: bold;
}
.text-listprice {
	font-size: 1.2rem;
}
.imgText {
	position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0) 100%);
    border-radius: 0px 0px 25px 25px;
    box-sizing: border-box;
}
@media (max-width:48rem) {
	h1 {
		font-size: 1.5rem;
	}
	.product-main-section h1 {
		font-size: 1.2rem;	
	}
	h2 {
		font-size: 1.2rem;
	}
	h3 {
		font-size: 1rem;
	}
	.title {
		font-size: 1.5rem;
	}
	.subtitle {
		font-size: 1rem;
	}
}
@media (max-width:30rem) {
	h1 {
		font-size: 1.5rem;
	}
	.product-main-section h1 {
		font-size: 1.2rem;	
	}
	h2 {
		font-size: 1.2rem;
	}
	h3 {
		font-size: 1rem;
	}
	.title {
		font-size: 1.5rem;
	}
	.subtitle {
		font-size: 0.9rem;
	}
}
/*--- Text-Color ---*/
.blue {	
	color: var(--color-blue);
}
.blue-light {	
	color: var(--color-blue-light);
}
.gray {	
	color: var(--color-gray);
}
.green {	
	color: var(--color-green);
}
.orange {	
	color: var(--color-orange)!important;
}
.pink {	
	color: var(--color-pink);
}
.transparent {
	color: transparent!important;
	text-shadow: 0px var(--color-transparent), 0px var(--color-transparent)!important;
}
.yellow {
	color: var(--color-yellow);
}
/*--- Ende Text-Color ---*/
/*--------------------------- Ende Formatierung ---------------------------*/


/* =========================================
    			Navigation Login Header
======================================== */
header {
	width: 100%;	
}
/*header:after {
	content: "";
	position: absolute;
	left: 0;
	top:140px;
	height: 50px;
	width: 100%;
	background: url(https:/images/diverses/border-bottom.svg) bottom center;
	background-size: 100%;
}*/
nav {  
	z-index: 99999;
	width: 100%;
	background-color: var(--color-white-op07);
	backdrop-filter: blur(10px);
}
.nav-user {
	position: fixed;
	top: 0;
	z-index: 999999;	
}
.nav-products {
	position: relative;
	top:70px;
	background-color: var(--color-white-op09);
}
nav .wrapper {
	position: relative;
	max-width: 80rem;
	padding: 0px 30px;
	height: 70px;
	line-height: 70px;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.logoHeader {
	position: relative;
	top: 10px;
	height:70px;
}
.wrapper .nav-links {
	display: inline-flex;
	height: 70px;
}
.nav-links li {
	list-style: none;
	width: 150px!important;
	margin-right: 1.2rem;
    text-align: center;
}
.nav-user .nav-links li {
	width: auto!important;
	text-align: left;
}
.nav-links li a {
	color: var(--color-gray);
	text-decoration: none;
	font-size: 1.1rem;
	font-weight: 500;
	padding: 0 1rem;
	transition: all 0.3s ease;
}
.nav-links li a:hover {
  	color: var(--color-blue-medium);
}
.nav-links .mobile-item {
	display: none;
}
.nav-links .drop-menu {
	position: absolute;
	background: var(--color-white);
	width: 250px;
	line-height: 70px;
	top: 85px;
	opacity: 0;
	visibility: hidden;
	box-shadow: 0 6px 10px var(--color-black-op03);
	left: 0;
	right: auto;
}
.nav-user .nav-links .drop-menu {
	position: absolute;
	width: 300px;
	top: 85px;
	right: 0;
	left: auto;
}
.nav-links li:hover .drop-menu,
.nav-links li:hover .mega-box {
	transition: all 0.3s ease;
	top: 70px;
	opacity: 1;
	visibility: visible;
}
.nav-products .nav-links li:hover .product-links {
	position: relative;
	left: 0;
	top: 0;	
}
.drop-menu li a {
	width: 100%;
	display: block;
	padding: 0 0.5rem 0 1.2rem;
	font-weight: 400;
	border-radius: 0px;
}
.nav-user .drop-menu li a {
	padding: 1.5rem 0.5rem 0 0.5rem;
}
.nav-products .drop-menu li a {
	text-align: left;
	width: 250px;
	font-size: 1rem;
	line-height: 3rem;
}
.nav-products .drop-menu li a:hover {
	background-color: var(--color-blue-light-op03);
}
.drop-menu li a i {
	margin-right: 1rem;
	margin-left: 0.5rem;
}
.drop-menu li a:hover i {
	color: var(--color-blue-light);
}
.drop-menu li .subLinks {
	margin-left: 2.2rem;
	padding-left: 1.2rem;
	border-left: 1px solid var(--color-black-op01);
}
.drop-menu li .subLinks a {
	padding: 0.5rem 0;
	line-height: 1.5rem;
}
.mega-box {
	position: absolute;
	left: auto;
	width: auto;
	padding: 0 30px;
	top: 85px;
	opacity: 0;
	visibility: hidden;
	text-align: left;
}
.mega-box .content {
	background: var(--color-white);
	color: var(--color-gray);
	padding: 25px 20px;
	display: flex;
	width: 100%;
	justify-content: space-between;	
	box-shadow: 0 6px 10px var(--color-black-op03);	
}
.mega-box .content .row {
	/*width: calc(25% - 30px);*/
	line-height: 45px;
	margin-top:0;
}
span.basket {
	background-color: var(--color-blue-light-op03);
    padding: 0.3rem 0.6rem;
    margin-left: 0.3rem;
    border-radius: 50%;
}
.content .row img {
	width: 100%;
	height: auto;
	object-fit: cover;
	padding-right: 1.2rem;
}
.content .row header {  
	font-size: 1.1rem;
	font-weight: 500;
	padding: 0 0.5rem;
	border-bottom: 1px solid var(--color-black-op01);
}
.content .row .mega-links {
	/*border-left: 1px solid var(--color-black-op09);*/	
}
.row .mega-links li {
	text-align: left;
	min-width: 250px;
}
.row .mega-links li a {	
	font-size: 1rem;
	display: block;
}
.row .mega-links li a:hover {
	background-color: var(--color-blue-light-op03);
}
.wrapper .btn {
	color: var(--color-gray);
	font-size: 1.2rem;
	cursor: pointer;
	display: none;
}
.wrapper .btn.close-btn {
	position: absolute;
	right: 15px;
	top: 15px;
}
.btn:active {
	box-shadow: none;
}
@media screen and (max-width: 400px){	
	.wrapper .search-box {
		max-width: calc(100% - 10px);
	}
	.wrapper .search-box .go-icon{
		width: 40px;
		right: 0;
	}
	.wrapper .search-box input{
		padding-right: 30px;
	}
}
@media screen and (max-width: 970px) {
	.wrapper .btn{
		display: block;
	}
	.wrapper .nav-links {
		position: fixed;
		height: 100vh;
		width: 100%;
		top: 0;
		left: -100%;
		background: var(--color-white);		
		display: block;
		padding: 50px 10px;
		line-height: 50px;
		overflow-y: auto;
		border-top: 1px solid var(--color-black-op03);
		transition: all 0.3s ease;		
	}
	.wrapper .nav-links .display-none {
		display: none;
	}
	/* custom scroll bar */
	::-webkit-scrollbar {
		width: 10px;
	}
	::-webkit-scrollbar-track {
		background: var(--color-gray);
	}
	::-webkit-scrollbar-thumb {
		background: var(--color-gray-light);
	}
	#menu-btn:checked ~ .nav-links, #menu-btn-products:checked ~ .nav-links {
		left: 0%;
	}
	#menu-btn:checked ~ .btn.menu-btn, #menu-btn-products:checked ~ .btn.menu-btn {
		display: none;
	}
	#close-btn:checked ~ .btn.menu-btn{
		display: block;
	}
	.nav-links li {
		margin: 15px 10px;
	}
	.nav-links li a {
		padding: 0 20px;
		display: block;
		font-size: 20px;
	}
	.nav-links .drop-menu {
		position: static;
		opacity: 1;
		top: 65px;
		visibility: visible;
		padding-left: 20px;
		width: 100%;
		max-height: 0px;
		overflow: hidden;
		box-shadow: none;
		transition: all 0.3s ease;
	}
	.nav-links .drop-menu-show {
		overflow: visible;
	}
	#showDrop:checked ~ .drop-menu,
	#showMega:checked ~ .mega-box {
		max-height: 100%;
	}
	.nav-links .desktop-item {
		display: none;
	}
	.nav-links .mobile-item{
		display: block;
		color: var(--color-gray);
		font-size: 20px;
		font-weight: 500;
		padding-left: 20px;
		cursor: pointer;
		border-radius: 5px;
		transition: all 0.3s ease;
	}
	.nav-links .mobile-item:hover {
		background: var(--color-blue-light-op03);
	}
	.drop-menu li {
		margin: 0;
	}
	.drop-menu li a {
		border-radius: 5px;
		font-size: 18px;
	}
	.mega-box {
		position: static;
		top: 65px;
		opacity: 1;
		visibility: visible;
		padding: 0 20px;
		max-height: 0px;
		overflow: hidden;
		transition: all 0.3s ease;
	}
	.mega-box .content {
		box-shadow: none;
		flex-direction: column;
		padding: 20px 20px 0 20px;
	}
	.mega-box .content .row {
		width: 100%;
		margin-bottom: 15px;
		border-top: 1px solid var(--color-white-op07);
	}
	.mega-box .content .row:nth-child(1),
	.mega-box .content .row:nth-child(2) {
		border-top: 0px;
	}
	.content .row .mega-links {
		border-left: 0px;
		padding-left: 15px;
	}
	.row .mega-links li {
		margin: 0;
	}
	.content .row header {
		font-size: 19px;
	}
}
nav input {
	display: none;
}
/*--------------------------- Ende Navigation Login Header ---------------------------*/


/* =========================================
    			Banner
======================================== */
#bannerImage {	
	position: relative;
	top:-140px;
	margin-bottom: -140px;
	padding: 10rem 0 6rem 0;
	height: 80vh;
    text-align:center;
    color:var(--color-white);    
    background-size:cover;
	background-position: bottom;
	background-repeat: no-repeat;
}
#bannerImage_subpage {	
	position: relative;
	top:70px;
	width: 100%;
	height: auto;
	padding: 1rem 0;
    text-align:center;
    color:var(--color-white);    
    background-size:cover;
	background-position: top;
	background-repeat: no-repeat;
}
.bannerImage-404 {
	overflow-x: hidden;
}
.bannerImage_index { background-image: url("/images/background/silhouette-trees-sunrise.jpg"); }
.bannerImage_Suche { background-image: url("/images/categories/happy-young-woman-looking-through-magnifying-glass-with-excited-face-found-search-something-standing-blue-background.jpg"); }
.bannerImage_Klimaanlagen { background-image: url("/images/categories/samsung_rac_klimaanlage_wandgerät.webp"); }
.bannerImage_klimaanlage-vrf { background-image: url("/images/categories/samsung_bac_klimaanlage_360-kassette.webp"); }
.bannerImage_Gaskühlereinheit { background-image: url("/images/categories/Cubo2-Smart-Production-scaled.jpg"); }
#bannerContent {
    position:relative;	
	width: 100%;
	z-index: 20;
	text-align: left;
	padding: 1rem;
	margin:7rem auto 2rem auto;
	border-radius: 1rem;
}
#bannerContent .h1-1 {
	display: inline-block;
	font-weight: 700;
	letter-spacing: 0;
	background-color: var(--color-blue-light);
	padding: 1.5rem 0 1.5rem 2rem;
}
#bannerContent .h1-2 {
	display: inline-block;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--color-black);
	background-color: var(--color-blue-light);
	padding: 1.5rem 2rem 1.5rem 0;
}
#bannerContent .h1-3 {
	display: inline-block;font-size: 2rem;
	font-weight: 400;	
	color: var(--color-blue-light);
	background-color: var(--color-gray);
	padding: 1rem 2rem;
}
#bannerContent h2 {
	display: inline-block;
	background-color: var(--color-white);
	color: var(--color-gray);
	padding: 1rem 2rem;
}
.bannerContent-404 {
	overflow-x: hidden;
}
@media screen and (max-width: 685px) {
	
}
/*--------------------------- Ende Banner ---------------------------*/


/* =========================================
    			BG-img
======================================== */
.bgImg {
	position: relative;
	height: auto;
    text-align:center;
    color:var(--color-white);    
    background-size:cover;
	background-position: bottom;
	background-repeat: no-repeat;
	padding: 4rem 2rem;
}
.bgImg_oesterreich { background-image: url("/images/background/landschaft_wald-wiesen.avif"); }
.bgImg_oesterreich:after {
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	background-color: var(--color-black-op05);
}
.bgImg_oesterreich .content {
	position: relative;
	top: 0;
	z-index: 1;
}
/*--------------------------- Ende BG-img ---------------------------*/


/* =========================================
    			Cetegory
======================================== */
.category {
	margin: auto;
	text-align: center;
	padding: 2rem;
}
img.categoryImg {
	width: 60%;
	border-radius: 50%;
	box-shadow: var(--color-blue-light) -10px 10px;
}
img.categoryImg.white {
	width: 100%;
	padding: 3rem;
	border-radius: 0;
	background-color: var(--color-white);
}
/*--------------------------- Ende Cetegory ---------------------------*/


/* =========================================
    			form panel primary (Login etc.)
======================================== */
.infoBoxText {
	border-radius: 1.2rem;
	background: var(--color-blue-light);
	/*background: radial-gradient(circle at left bottom, var(--color-blue) 0%, var(--color-blue-dark) 100%);*/		
}
.infoBoxText a {
	color: var(--color-blue-light);
}
.infoBoxText a:hover {
	color: var(--color-blue);
}
.infoBoxText div {
	padding:1.5rem;
}
.infoBoxText div.row {
	display: flex;
	align-items: center;
	flex-direction: row;
}
.infoBoxText img {
	border-radius: 1rem;
}
.info-logo {
	margin-bottom: 2rem;
}
.panel {
	background-color: transparent;
}
.panel-primary {
	border: 1px solid var(--color-gray-border);
	width:50%;
	margin: auto;
}
.panel-100 {
	width:100%;
	margin: 2rem auto 0.5rem auto;
}
.panel-primary>.panel-heading {
	border-color: transparent;
	background: var(--color-blue-light);
	/*background: radial-gradient(circle at left bottom, var(--color-blue) 0%, var(--color-blue-dark) 100%);*/	
	padding: 1rem 1.5rem;
	border-radius: 0;
}
.panel-primary>.panel-heading h3 {
	margin: 0;
}
.panel-primary>.panel-body {
	padding: 1rem 1.5rem;	
}
.panel-primary>.panel-footer {
	padding: 0.5rem 1.5rem;
    background-color: var(--color-white-op01);
    border-top: 1px solid var(--color-gray-border);
    border-radius: 0;
}
.panel-primary>.panel-footer a {
	color: var(--color-white);
}
.form-group {
	margin-bottom: 0.5rem;
}
.form-group {
}
.form-group button {
	float:left;
	margin-right: 1.5rem;
	margin-bottom: 0.5rem;
}
.form-control {
	border-color: var(--color-gray-border);
	padding: 6px 0 6px 12px;
	background-color: transparent;
	color: var(--color-white);
}
.form-control:focus {
	border-color: var(--color-blue-medium);	
    box-shadow: none;
	background: var(--color-blue-light-op01);	
}
.form-control option {
	background-color: var(--color-blue-dark);
}
input:-internal-autofill-selected {
	background-color: var(--color-blue-light-op01)!important;
}
textarea.form-control {
    max-width: 100%;
}
@media (max-width:48rem) {
	.infoBoxText div.row {
		flex-direction: column;
	}
	.panel-primary {
		width:75%;
	}
}
@media (max-width:30rem) {
	.panel-primary {
		width:100%;
	}
}
/*--------------------------- Ende form panel primary (Login etc.) ---------------------------*/


/* =========================================
    			breadcrumb
======================================== */
.breadcrumb {
	margin:1rem auto 0.5rem auto;
	padding: 0.5rem 1rem 0.5rem 0;
	font-size: 0.8rem;
	background-color:transparent;
	color: var(--color-white);
}
.breadcrumb>li a {
	color:var(--color-blue-light);
}
.breadcrumb>li a:hover {
	color:var(--color-blue);
	text-decoration: none;
}
.breadcrumb>li+li:before {
    padding: 0 0.5rem;
    color: var(--color-text-muted);
    content: ">";
}
/*--------------------------- Ende breadcrumb ---------------------------*/


/* =========================================
    			product
======================================== */
/*--- product-overview ---*/
.product-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.product-item {
	width: 22%;
	min-width: 250px;
	height: 400px;
	margin: 1.5rem 1rem 0.5rem 1rem;
	padding:1.5rem;
	border: 1px solid var(--color-white-op01);
	transition: .25s;
}
.product-item:hover, .product-filter:hover {
	background-color: var(--color-white-op01);
	border: 1px solid var(--color-white-op03);
}
.product-item p {
	margin-bottom: 0.5rem;
}
.product-item-header {
	height: 150px;
	align-items: center;
	text-align: center;
	overflow: hidden;
	margin-bottom: 5px;
	background: radial-gradient(circle, var(--color-blue-light-op03) 0%, transparent 70%);
}
.product-item-header img {
	width: 70%;
}
.product-item-content {	
	height: 155px;
	font-size: 0.9rem;
	color: var(--color-white);
	align-items: center;
	text-align: center;
}
.product-item-content i {
	margin-right: 0.5rem;
}
.product-item-footer {
	height: 50px;
}
/*--- Ende product-overview ---*/
/*--- checkbox-dropdown ---*/
.checkbox-dropdown {
    position: relative;
	width: 22%;
	min-width: 250px;
	margin: 0.5rem 1rem 0 1rem;
	padding:1.5rem;
	border: 1px solid var(--color-white-op01);
	transition: .25s;
	user-select: none;
	z-index: 999;
	background-color: var(--color-white-op01);
}
.checkbox-dropdown:hover {
	background-color: var(--color-white-op03);
}
/* Display CSS arrow to the right of the dropdown text */
.checkbox-dropdown:after {
    content:'';
    height: 0;
    position: absolute;
    width: 0;
    border: 6px solid transparent;
    border-top-color: var(--color-white);
    top: 50%;
    right: 10px;
    margin-top: -3px;
}
/* Reverse the CSS arrow when the dropdown is active */
.checkbox-dropdown.is-active:after {
    border-bottom-color: var(--color-white);
    border-top-color: transparent;
    margin-top: -9px;
}
.checkbox-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%; /* align the dropdown right below the dropdown text */
    border: inherit;
    border-top: none;
    left: -1px; /* align the dropdown to the left */
    right: -1px; /* align the dropdown to the right */
    opacity: 0; /* hide the dropdown */
    transition: opacity 0.4s ease-in-out;
    height: auto;
    overflow: visible;
    overflow-x: hidden;
    pointer-events: none; /* avoid mouse click events inside the dropdown */
	background-color: var(--color-gray);
}
.is-active .checkbox-dropdown-list {
    opacity: 1; /* display the dropdown */
    pointer-events: auto; /* make sure that the user still can select checkboxes */
	border-top: 1px solid var(--color-white-op01);
}
.checkbox-dropdown-list li label {
    display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
    padding: 0.5rem 1.2rem;   
    transition: all 0.2s ease-out;
}
.checkbox-dropdown-list li label:hover {
    background-color: var(--color-white-op03);
}
.checkbox-dropdown-list li input {
	display:none;
}
.checkbox-dropdown-list li i:before {
	visibility:hidden;
}
.checkbox-dropdown-list li input:checked~ i:before  {
	visibility: visible;
}
/*--- Ende checkbox-dropdown ---*/
/*--- product-main ---*/
.product-main-section {
	
}
.product-main-section h1 {
	font-size: 1.5rem;
}
.product-main-section h1 {
	font-size: 1.5rem;
}
/*--- Ende product-main ---*/
.input-group {
    display: flex;
	margin:1.5rem auto;
	border-radius: .5rem;
}
.thumbnail .input-group {
	margin:auto;
}
.input-group > input:first-of-type {
	width:30%;
	text-align: center;
	border: 1px solid var(--color-white-op03);
	margin-right:0.5rem;
	background-color: transparent;
}
.input-group.change_number > input {
	width:50px;
	text-align: center;
	margin-right:0.5rem;
	border: 1px solid var(--color-white-op03);
	background-color: transparent;
}
.input-group.change_number > button {
	width:40px;
}
.change_number {
	display: inline-flex;
}
/*--------------------------- Ende product ---------------------------*/


/* =========================================
    			Mehr lesen Accordeon
======================================== */
.accordeonMore {
	width: 100%;
}
.accordeonMore .panel {
    height: 0;
    visibility: hidden;
    opacity: 0;    
}
.accordeonMore .panelMehrLesen label {
	background-color: var(--color-white-op01);
	line-height: 1.5rem!important;
	font-size: 0.8rem!important;
	border-radius: 1.5rem!important;
	padding: 0.1rem 0.5rem!important;
}
.accordeonMore .panelMehrLesen label:hover {
	background-color: var(--color-white-op03);
}
/* Hide checkboxes and radio-buttons */
.accordeonMore input[type="radio"], .accordeonMore input[type="checkbox"]#panelMehrLesen {
    display: none;
}
/* Show .panel for corresponding to checked radio or checkbox */
.accordeonMore input[type="radio"]:checked + .panel, .accordeonMore input[type="checkbox"]:checked + .panel {
    height: auto;
    visibility: visible;
    opacity: 1;
	padding-top:1.5rem;
}
/*--- Checkout ---*/
.checkout_adress .accordeonMore .panel {
	background-color: inherit;
	padding-left: 1rem;
}
.checkout_adress .accordeonMore label {
	
	line-height: inherit;
	font-size: inherit;
	border-radius: 0;
	padding: auto;
}
/*--- Produkt-Filter ---*/
.show-more {
	display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 20px 0px 0px 0px;
    padding: 10px 25px;
    background-color: #bcbdc1;
    border: none;
    border-radius: 20px;
    color: var(--color-white);
    font-family: 'SamsungOne 700';
    cursor: pointer;
    font-size: 1rem;
    text-align: left;
    transition: 0.35s ease;
	opacity: 1;
}

/* ==================== Ende Mehr lesen Accordeon ==================== */


/* =========================================
    			Img Slider
======================================== */
.bg-product {
	border: 1px solid var(--color-white-op01);
	padding: 1rem;
	margin-top: 0.5rem;
}
.thumbnail_slider {
    margin: auto;
}
.splide__slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 580px;
    overflow: hidden;
    transition: .2s;
    border-width: 2px !important;	
	background-color: var(--color-white-op03)!important;
	margin-bottom: 0.5rem;
}
.splide--nav>.splide__track>.splide__list>.splide__slide.is-active,
.splide--nav > .splide__track > .splide__list > .splide__slide.is-active {
	border: 3px solid var(--color-white-op03)!important;
}
.splide__slide img {
    width: auto;
    height: auto;
    margin: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
}
.splide__arrow:hover {
	background-color: var(--color-blue-light);
}
/*--------------------------- Ende Img Slider ---------------------------*/


/* =========================================
    			Ribbon
======================================== */
/* common */
.ribbon {
	width: 150px;
	height: 150px;
	overflow: hidden;
	position: absolute;
	z-index: 99;
}
.ribbon::before, .ribbon::after {
	position: absolute;
	z-index: -1;
	content: '';
	display: block;
	border: 5px solid var(--color-blue);
}
.ribbon span {
	position: absolute;
	display: block;
	width: 225px;
	padding: 15px 0;
	background-color: var(--color-blue);
	box-shadow: 0 5px 10px var(--color-black-op03);
	color: var(--color-white);
	text-shadow: 0 1px 1px var(--color-black-op03);
	text-transform: uppercase;
	text-align: center;
}
/* top left*/
.ribbon-top-left {
	top: -9px;
	left: 6px;
}
.ribbon-top-left-02 {
	top: 0px;
	left: 6px;
}
.ribbon-top-left::before, .ribbon-top-left::after {
	border-top-color: transparent;
	border-left-color: transparent;
}
.ribbon-top-left::before {
	top: 0;
	right: 0;
}
.ribbon-top-left::after {
	bottom: 0;
	left: 0;
}
.ribbon-top-left span {
	right: -20px;
	top: 30px;
	transform: rotate(-45deg);
}
.ribbon-top-left-02 span {
	right: -21px;
}
/* overview */
.ribbon.ribbon-overview {
	position: relative;
}
.ribbon.ribbon-overview.ribbon-top-left {
	top: -34px;
	left: -34px;
	margin-bottom: -150px;
}
/*--------------------------- Ende Ribbon ---------------------------*/


/* =========================================
    			Checkout
======================================== */
.checkout_adress {
	padding: 0.5rem 1.5rem 1.5rem 1.5rem;
	background-color: var(--color-gray-light);
	margin-top: 1rem;
}
.checkout_adress h3 {
	border-bottom: 1px solid var(--color-gray-border);
	padding-bottom: 1rem;
	margin-bottom: 2rem;
}
.checkout_adress .form-group {
	margin-bottom:0.5rem;
}
/*--------------------------- Ende Checkout ---------------------------*/


/* =========================================
    			Animation
======================================== */
.background-animation {
	position: fixed;
	width: 100%; 
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color-black-op09);
	z-index: 999999;
}
.animation-position {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 50px;
	color: white;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
}
.animation-position img {
	position: relative;
	width: 33%;
	left: 33%;
	margin-top: 2rem;
}
/*----- Load Page -----*/
.loader {
	width: 250px;
	margin: auto;
	aspect-ratio: 2;
	--_g: no-repeat radial-gradient(circle closest-side,var(--color-blue-light) 90%,var(--color-black-op09));
	background: 
	var(--_g) 0%   50%,
	var(--_g) 50%  50%,
	var(--_g) 100% 50%;
	background-size: calc(100%/3) 50%;
	animation: l3 1.2s infinite linear;
}
@keyframes l3 {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}
/*----- Load Cart -----*/
.loader-cart {
	width: 150px;
	height: 44px;
	margin: auto;
	border-radius: 40px;
	color: var(--color-blue-light);
	border: 3px solid;
	position: relative;
}
.loader-cart::before {
	content: "";
	position: absolute;
	margin: 2px;
	inset: 0 100% 0 0;
	border-radius: inherit;
	background: currentColor;
	animation: l6 2s infinite;
}
@keyframes l6 {
    100% {inset:0}
}
/*--------------------------- Ende Animation ---------------------------*/


/* =========================================
    			Login Bereich
======================================== */
.card-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.card-item {
	width: 350px;
	margin: 1.5rem 1rem 0.5rem 15px;
	padding:1.5rem;
	height: 180px;
	border: 1px solid var(--color-white-op01);
	transition: .25s;
}
.card-item:hover {
	background-color: var(--color-white-op01);
	border: 1px solid var(--color-white-op03);
}
.card-item-content {
	display: flex;
	flex-direction: column;
	/*align-items: center;*/
	color: var(--color-white);
}
.card-item-content i {
	font-size: 3rem;
	margin-right: 2rem;
	color: var(--color-blue-light);
}
.card-item:hover .card-item-content i {
	color: var(--color-blue);
}
.card-item-content h3 {
	margin: 0.5rem auto;
}
.card-item-content p {
	margin: 0;
}
.field-icon {
	float: right;
	margin-right: 10px;
	margin-top: -25px;
	position: relative;
	z-index: 2;
}
/*--------------------------- Ende Login Bereich ---------------------------*/


/* =========================================
    			Orders
======================================== */
.order-card {		
	width:100%;	
	margin: 0 0 1rem 0;
    padding: 1rem;
	height: auto;
	font-size: 0.9rem;
	background-color: var(--color-white-op01);
}
.order-card p {
	margin: 0;
}
.order-card-container {
	width: 100%;	 
	position: relative;
}
.order-card-container label {
	position: relative;
	display: flex;	 
	align-items: center;	
	justify-content: space-between;
	cursor: pointer;	 
	width:300px;
	user-select: none;
	line-height: 1.5rem;
	font-size: 0.8rem;
	border-radius: 1.5rem;
	padding: 0.1rem 1rem;
	margin-top:1rem;
}
.order-card-container label:hover {
	background-color: var(--color-white-op01);
	transition: 0.5s;
}
.order-card-container .content {
	height: 0;
	max-height: 0px;	
	text-align: left;
	overflow: hidden;
	transition: 0.3s linear;
	position: relative;
	z-index: 999;
	/*background: var(--color-white);*/
	border: 1px solid var(--color-gray-border);
	border-radius: 0.3rem;
}
.order-card-container table {
	margin:0 0 1rem 0;
}
.order-card .tableCart tfoot {	
	border-top: 1px solid var(--color-gray-border);
}
.order-card-container .tableCart table>tfoot>tr>td {
	padding: 0.5rem;
	border: none;
}
.order-card-container .drop {
	display: none;
}
.order-card-container .drop:checked ~ .content {
	height: auto;
	width: 100%;
	max-height: 450px;
	border: 1px solid var(--color-gray-border);
	overflow-y: scroll;
	transition: max-height 0.5s ease-in;
	margin: 0 0 1rem 0;
	padding: 1rem 0 0 0;
}
.order-card-container .drop:checked ~ .content::-webkit-scrollbar {
	width: 5px;
	height: 8px;
	background-color: var(--color-black-op003);
}
.order-card-container .drop:checked ~ .content::-webkit-scrollbar-thumb {
    background: var(--color-gray-border);
}
.order-card-container .drop:checked ~ label i {
	rotate:180deg;
}
 
@media (max-width: 48rem) {
	.order-card p.font-size-80-Prozent {
		margin-top:0.2rem;
	}
	.order-card-container .content {
		margin-bottom: 1rem;
	}
	.order-card .tableCart tbody td:before {
		content: attr(data-title) "";	
		display: inline-block;        
		text-align: center;
		color: var(--color-text-muted);
	}
	.order-card .tableCart tfoot {
		border:none;
	}
	.order-card .tableCart tfoot td {
		display: block;
		text-align: center;
		margin: auto;
	}
}
/*--------------------------- Ende Orders ---------------------------*/


/* =========================================
    			Checkbox check
======================================== */
.checkbox-wrapper-2 {
	padding-top: 7px;
}
.checkbox-wrapper-2 .switch {
	display: block!important;
    appearance: none;
    background-color: var(--color-gray-border);
    border-radius: 72px;
    border-style: none;
    flex-shrink: 0;
    height: 20px;
    margin: 0;
    position: relative;
    width: 30px;
}
.checkbox-wrapper-2 .switch::before {
	bottom: -6px;
	content: "";
	left: -6px;
	position: absolute;
	right: -6px;
	top: -6px;	  
}
.checkbox-wrapper-2 .switch, .checkbox-wrapper-2 .switch::after {
	transition: all 100ms ease-out;
}
.checkbox-wrapper-2 .switch::after {
	background-color: var(--color-white);
	border-radius: 50%;
	content: "";
	height: 14px;
	left: 3px;
	position: absolute;
	top: 3px;
	width: 14px;
}
.checkbox-wrapper-2 input[type=checkbox], .checkbox-wrapper-2 input[type=radio] {
	cursor: default;
}
.checkbox-wrapper-2 .switch:hover {
	background-color: var(--color-gray-soft);
	transition-duration: 0s;
}
.checkbox-wrapper-2 .switch:checked {
	background-color: var(--color-blue);
}
.checkbox-wrapper-2 .switch:checked::after {
	background-color: var(--color-white);
	left: 13px;
}
.checkbox-wrapper-2 :focus:not(.focus-visible) {
	outline: 0;
}
.checkbox-wrapper-2 .switch:checked:hover {
	background-color: var(--color-blue);
}
/*--------------------------- Ende Checkbox check ---------------------------*/


/* =========================================
    			Cart Table
======================================== */
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: var(--color-white-op01);
}
/*-- Cart ---*/
.tableCart table {
  	width: 100%;	
}
.tableCart .tableGray {
	background-color: var(--color-white-op01);
	margin-bottom: 3rem;
}
.tableCart thead,
.tableCart tfoot tr:last-child {
	font-weight: bold;
}
.tableCart tfoot tr:last-child {
	border-top: 2px solid var(--color-gray-border);
}
.tableCart .table>tbody>tr>td,
.tableCart .table>tbody>tr>th,
.tableCart .table>tfoot>tr>td,
.tableCart .table>tfoot>tr>th,
.tableCart .table>thead>tr>td,
.tableCart .table>thead>tr>th {
    padding: 1rem 0.5rem;
	font-size: 0.9rem;
    line-height: 1.2rem;
    vertical-align: middle;
    border-top: 1px solid var(--color-gray-border);
}
.tableCart .table>tbody>tr>td img {
	width:100%;
	max-width: 70px;
}
.tableCart .table>tbody a {
	color: var(--color-text);
}
.tableCart .table>tbody a:hover {
	text-decoration: none;
}
.tableCart .table>tbody>tr>td:hover {
	/*background-color: var(--color-blue-op003);*/
}
.tableCart .table.tableGray>tfoot>tr>td,
.tableCart .table.tableGray>thead>tr>th {
	padding:1rem;
}
@media screen and (max-width:678px) {
	.tableCart table tr:nth-child(2n-2):not(:first-child){
		background-color: var(--color-white);
	}
	.tableCart table {
		width: 100%;
	}
	.tableCart thead {
		display: none
	}
	.tableCart .table>tbody>tr>td img {
		width:100%;
		max-width: 100px;
	}
	.tableCart tr td {
		border-left: 1px solid var(--color-gray-border);
		border-right: 1px solid var(--color-gray-border);
	}
	.tableCart tr td:last-child {
		border-bottom: 1px solid var(--color-gray-border);
		margin-bottom: 1rem;
	}
	.tableCart tbody td:not(:first-child):not(:last-child):before {
        content: attr(data-title) "";
        display: inline-block;        
        text-align: center;
		color: var(--color-text-muted);
    }
	.tableCart tbody td.margin-before:before {
		margin-right: 2rem;
	}
	.tableCart tbody td {
		display: block;
		text-align: center
	}
	.tableCart tfoot {
		border: 1px solid var(--color-gray-border);
	}
}
/*--------------------------- Ende Cart Table ---------------------------*/


/* =========================================
    			Dropdown Select Variante
======================================== */
.dropDown-wrapper{
    position: relative;    
    width: auto;
	display: flex;
	flex-direction: column;
}
/* the style for the label */
.dropDown-toggle-label {
    position: relative;
    padding: 1rem 1.5rem 1rem 1rem;
    background-color: var(--color-gray-light);
    color: var(--color-white);
    cursor: pointer;
    border-radius: 5px;
    transition: opacity .2s ease;    
    /* force parent to wrap around the label tag */
    float: left;
	min-height: 50px;
	letter-spacing: 1px;
}
.dropDown-toggle-label span {
	margin-left: 1rem;
	letter-spacing: normal;
}
.dropDown-toggle-label:active {
    transform: scale(.98);
}
/* arrow indicator on the button */
.dropDown-toggle-label:after{
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    /* this makes the square appear as a white triangle */
    background: linear-gradient(45deg, var(--color-white) 50%, transparent 0);
    position: absolute;
    right: 15px;
    top: 35%;
    transform: rotate(-45deg);
}
/* hide all input fields since the labels are connected to them by the id */
.dropDown-wrapper input{display: none;}
/* rotate the button arrow upwards */
.dropDown-wrapper > input:checked + label:after{
    top: 45%;
    transform: rotate(135deg);
}
/* this will show dropDown when input is checked */
.dropDown-wrapper > input:checked + label + .dropDown{
    display: inline-block;
}
/* the drop-down style*/
.dropDown{
    position: relative;
    left: 0;
	margin-bottom: 40px;
    top: calc(100% + 10px);
    padding: 10px 0;
	background-color: var(--color-white-op03);
    box-shadow: 0 0 20px rgba(0,0,0,.1);
    border-radius: 4px 0 4px 4px;
    min-width: 150px;
    display: none;
}
/* the drop-down options style*/
.dropDown label {
    display: block;
    border-left: 0 solid transparent;
    font-family: sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--color-white);
    opacity: .8;
    transition:
            border .3s ease,
            padding-left .3s ease,
            background-color .3s ease;
}
.dropDown label a {
	color:inherit;
	text-decoration: none;
	display: block;
    width: 100%;
    padding: 1rem;
}
.dropDown label a:hover {
	text-decoration: none;
}
/* option item on hover */
.dropDown label:hover{
    border-left: 5px solid var(--color-blue-light);
    background-color: var(--color-blue-op03);
    opacity: .9;
    font-weight: 700;
}
/* this shows that the list item was selected */
.dropDown input:checked + label{
    font-weight: 700;
    opacity: 1;
    background-color: var(--color-blue-op003);
}
/*--------------------------- Ende Dropdown Select Variante ---------------------------*/


/* =========================================
    			Button
======================================== */
.btn {
	font-size: 1rem;
	line-height: 1rem;
	text-decoration: none;
	margin-top: 0.5rem;
}
.btn i {
	font-size: 1rem;
	margin-right: 1rem;
}
.btn:focus {
	color: inherit;
	outline: none;
}
.btn-right {
	float:right;	
}
.btn-left {
	float:left;	
	margin-top: 0!important;
}
/*--- btn Detail ---*/
.button-detail {
	background: var(--color-blue-light);
	border: 1px solid var(--color-blue-light);
	border-radius: 40px;
	box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
	color: var(--color-white);	
	font-size: 1rem;
	line-height: 1rem;
	box-sizing: border-box;	
	cursor: pointer;
	display: inline-block;
	min-height: 40px;
	min-width: 200px;
	outline: 0;
	padding: 12px 14px;
	text-align: center;
	text-rendering: geometricprecision;
	text-transform: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	vertical-align: middle;
	transition: all 300ms;
}
.button-detail:hover,
.button-detail:active {
	background-color: var(--color-blue-medium);
	background-position: 0 0;
	color: var(--color-white);	
	border: 1px solid var(--color-text-muted);
}
.button-detail:active {
	opacity: .5;
}
/*--- btm Block ---*/
/*.btn-block {  
	background-color: var(--color-blue-light-op01);
    padding: 1rem 0.5rem;
    text-align: center;
    display: inline-block;
    border-radius: 6px;
    text-decoration: none;
    margin-top: 0.8rem;
    transition: background-color 0.3s;
}
.btn-block i {
	margin-right: 0;
}
.btn-block:hover {
	background-color: var(--color-blue-light-op03);
}*/
/*--- input number ---*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
  /*opacity: 1;*/
	height: 40px;
}
/*--------------------------- Ende Button ---------------------------*/


/* =========================================
    			Alert Container
======================================== */
.alert-info-container {
	display: flex;
	margin-bottom: 0.5rem;
	width: 100%;
}
.alert-icon {	
	padding: 0.5rem;
}
.alert-icon i {
	margin-right:0;
}
.alert-content {
	padding: 0.5rem 1rem 0.5rem 0.5rem;
	
}
.alert-blue {
	background-color: var(--color-blue-op03);
	color: var(--color-blue-light);
}
.alert-icon-blue {	
	background-color: var(--color-blue);
	color: var(--color-white);
}
.alert-green {
	background-color: var(--color-green-op03);
	color: var(--color-green);
}
.alert-icon-green {	
	background-color: var(--color-green);
	color: var(--color-white);
}
.alert-orange {
	background-color: var(--color-orange-op03);
	color: var(--color-orange);
}
.alert-icon-orange {	
	background-color: var(--color-orange);
	color: var(--color-white);
}
.alert-pink {
	background-color: var(--color-pink-op03);
	color: var(--color-pink);
}
.alert-icon-pink {	
	background-color: var(--color-pink);
	color: var(--color-white);
}
.alert-yellow {
	background-color: var(--color-yellow-op03);
	color: var(--color-yellow);
}
.alert-icon-yellow {	
	background-color: var(--color-yellow);
	color: var(--color-white);
}
/*--------------------------- Ende Alert Container ---------------------------*/


/* =========================================
    			To Top Button
======================================== */
.to-top-button {
	display: inline-block;
	background-color: var(--color-white-op01);
	height: 35px;
	width: 48px;
	text-align: center;
	border-radius: 6px 6px 0 0;	
	position: fixed;
	bottom: 0;
	right: 75px;
	transition: background-color .3s, opacity .5s, visibility .5s;
	opacity: 0;
	visibility: hidden;
	z-index: 1000;	
}
#to-top.to-top-button {	
	bottom: 0;
}
.to-top-button i {  
	font-size: 1rem;
	line-height: 1rem;
	color: var(--color-white);
	margin: 0.7rem auto 0 auto;
}
.to-top-button:hover {
	cursor: pointer;		
}
.to-top-button:hover, .to-top-button:hover i {	
	background-color: var(--color-blue);
	transition: 0.5s;
}
.to-top-button:active {
	background-color: var(--color-blue-dark);
}
.to-top-button.show {
	opacity: 0.9;
	visibility: visible;
}
@media screen and (max-width:37.5rem) /* 600px */ {
	.to-top-button {		
		right: 1rem;		
	}
	#to-top.to-top-button {	
		bottom: 0;
	}
}
/*--------------------------- Ende To Top Button ---------------------------*/


/* =========================================
    			Footer
======================================== */
footer{
	background-size: cover;
    color:var(--color-white);
	background-color: var(--color-blue-dark);
    font-size:1rem;
    padding:1rem; 	
	margin-top:4rem;
	position: relative;
    bottom:0;
}
.footer-flex-container {
	display: flex;
	flex-wrap: wrap;	
}
.footer-flex-align-center {
	align-items: center;
}
.footer-flex-item {
	flex: 20%;
	margin: 0 2% 1rem 2%;	
}
.footer h2, .footer p {
	margin: auto;
}
.footer a {
	color:var(--color-white);
}
.footer a:hover {	
	color: var(--color-blue-light);
}
.footer h3 {	
	color: var(--color-blue-light);
}
.footer hr {
	border-color: var(--color-white-op01);
}
.footer ul {
	list-style: none;
}
.footer li {
	padding-bottom: 0.5rem;
}
.footer .marke {
	margin-top: 20%;
	width: 50%;
}
.form-group i.big {
	font-size: 2rem;
	margin-left: 1.5rem;
	flex-direction: row-reverse;
}
@media (max-width: 48rem) {
	.footer-flex-item {
		flex: 100%;
	}
}
/*--------------------------- Ende Footer ---------------------------*/

@media (min-width:320px){
    #autoResize{
        font-size:12px;
    }
}
@media (min-width:481px){
    #autoResize{
        font-size:16px;
    }
}
@media (min-width:641px){
    #autoResize{
        font-size:18px;
    }
}
@media (min-width:961px){
    #autoResize{
        font-size:20px;
    }
}
@media (min-width:1000px){
    #autoResize{
        font-size:26px;
    }
}