:root {
  --main-color: #28a745;
	--button-color: #0a57c2;
	--cart-color: #28a745;
	--bg-color: #f5f5f5;
	--fsButton: 0.9rem;
	--fsButtonSmall: 0.8rem;
}
@media screen and (min-width: 48rem) {
	:root {
		--fsButtonSmall: 0.9rem;
	}
}

body {background-color: var(--bg-color);}

/* typografie */
body, button {
	font-size: 1rem;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial,sans-serif;
	
}

h1, h2, h3 {
	margin-top: 0;
	margin-bottom: 1rem;
	line-height: 1.2;
	font-weight: normal;
	/*font-weight: 500;*/
}
h1 {font-size: calc(1rem + 1.5vw); text-align: center;}
h2 {font-size: calc(1rem + 0.6vw); text-align: center;}
.noFooter h1 {margin-top: 1rem;}
.noFooter h2 {margin-bottom: 0; font-size: 1rem;}

p {
	margin-top: 0;
	margin-bottom: 1rem;
}
ol, ul {
  padding-left: 2rem;
}
ol, ul {
  margin-top: 0;
  margin-bottom: 1rem;
}
ol ol, ul ul, ol ul, ul ol {
  margin-bottom: 0;
}



button, .button, .toolbar .button {
	display:inline-block;
	background-color: var(--button-color); color:white; 
	padding: 0.5rem 0.75rem;
	border:1px solid var(--button-color); border-radius: 2rem;
	font-size: var(--fsButton); font-weight: normal;
	/*line-height: 1;*/
	text-decoration: none;
	cursor: pointer;
}
button.secondary {background-color: white; color: var(--button-color);}

button:disabled, .button:disabled {opacity: 50% !important; cursor: not-allowed !important;}
.disabled {opacity: 50% !important;}
.button.secondary {border:1px solid var(--button-color); background-color:white; color:var(--button-color);}

button.ico, button.icotext, button.text {
	padding: 0.25rem;
	background-color:transparent; color:black; 
	border:1px solid transparent; border-radius: 0.25rem;
	font-size: var(--fsButtonSmall); font-weight: normal;
	cursor: pointer;
	text-decoration: none;
}
button.icotext {padding-top:0; padding-bottom:0; line-height:1.5;}
.button.selected, button.selected {border-color: var(--button-color); font-weight: bold;}

@media screen and (min-width: 48rem) {
	button, .button, .toolbar .button {padding: 0.5rem 1.25rem;}
}
.button.addToCart {background-color: var(--cart-color); border-color:var(--cart-color);}

.selection button {padding: 1rem 1.5rem; border:2px solid #ccc; border-radius: 0.5rem; background-color:white; color: black; cursor: pointer;}
.selection button.selected {border-color: var(--button-color);}
.selection button strong {font-weight:normal; font-size:1.5rem;}


header {
	background-color: white;
}
footer {
	background-color: white; 
	box-shadow: 0 -4px 25px 0 rgba(50, 50, 50, 0.25);
}

.editorContainer {background-color:var(--bg-color);}

.uplDropTarget {
	background-color: white; color:black;
	border: 2px dashed var(--main-color); border-radius: 50%;
	line-height: 1.5;
}

.icon {vertical-align: text-top; width: 1rem; height: 1rem;}
.productTitle, .countCtl {font-size: var(--fsButtonSmall);}
.countCtl input {
	width:2.25em;
	text-align:right; 
	font-size: var(--fsButtonSmall);
	border-style: none;
  background-color: transparent;
}

@media screen and (min-width: 48rem) {
	/*.uplDropTarget {border-radius: 3rem;}*/
	header .logo {height: auto; max-height: 45px;}
	button.icotext .icon, button.ico .icon {width: 1.5rem; height: 1.5rem;}
	.countCtl button.ico .icon, button.btnDelete .icon {width: 1.125rem; height: 1.125rem;}
}
@media screen and (max-height: 680px) {
	header .logo {height: 24px;}
}