/* CSS Getränkerechner*/
.wgr-wrap {
	--gap: 16px;

}
.wgr-form {
	display: grid; 
	gap: var(--gap);
	font-size: 17px; 
	font-family: var(--font-family);
	letter-spacing: 0.02em;
}
.wgr-form__row {
	display: grid; 
	grid-template-columns: repeat(3,minmax(120px,1fr)); 
	gap: var(--gap); 
}
.wgr-field {
	display: grid; 
	gap: 6px; 
}
.wgr-field__label {
	font-weight: 600; 
  

}
.wgr-field__input {
	padding: 10px 12px; 
	border: 1px solid #ddd; 
	border-radius: 6px; 
}

input.wgr-field__input{
	border: 1px solid #2B444F!important;
}




select.wgr-field__input.wgr-input--event{
	background: #95A1A7;
	color: #2B444F
	 -webkit-appearance:none;  appearance:none;
	border-radius:0px;
	line-height:1;
	 background-image:
    linear-gradient(45deg,transparent 50%, rgba(0,0,0,.45) 50%),
    linear-gradient(135deg, rgba(0,0,0, 0.45) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
  padding-right: 42px;
}




.wgr-radios {
	display:flex; gap: 12px; 
	flex-wrap: wrap; 
}
.wgr-radio {
	display:flex; 
	align-items:center; gap:6px; 
}

.wgr-radios input[type="radio"]{
	border: 1px solid #2B444F;
}

.wgr-btn--primary { 
	padding: 12px 16px; 
	border-radius: 8px; 
	border: 0; 
	background: #1E384D; 
	color: #fff; 
	cursor: pointer; 
	max-width: 200px;
}
.wgr-result {
	margin-top: 20px; 
}
.wgr-result__grid {
	display:grid; 
	grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); 
	gap: var(--gap); 
}
.wgr-card {
	border: 1px solid #2B444F; 
	border-radius: 0px; 
	overflow: hidden; 
	background: #fff; 
}
.wgr-card__head {
	padding:10px 12px; 
	background:#f7f7f7; 
	font-weight: 700;
	font-family: var(--font-family);
	letter-spacing: 0.02em;
}
.wgr-card__body {
	padding:12px; 
	display:grid; 
	gap:8px; 
	font-family: var(--font-family);
	letter-spacing: 0.02em;
}
.wgr-kpi {
	display:flex; 
	align-items: 
		baseline; gap:8px; 
}
.wgr-kpi__value {
	font-size: 1.4rem; 
	font-weight: 700; 
}

@media (max-width: 640px){
  .wgr-form__row {
	  grid-template-columns: 1fr; 
	}
}