/* Felder */
.wr-field {  display: flex;  flex-direction: column;  gap: 0.25rem;  font-size: var(--input-fz);}
.wr-field label {  font-size: var(--zawe-font-normal);  font-weight: var(--zawe-font-weight-normal);  color: var(--color-grau-dunkler);}.wr-input,textarea.wr-input {  padding: var(--input-padding);  font-size: var(--input-fz);  border: 1px solid var(--color-grau-hell);  border-radius: 4px;  background: #fff;  color: #111;  font-family: inherit;}

/* Produktname-Feld leicht hervorheben */
.wr-input.wein {
border-color: var(--wr-accent-300, #c8b060);
background-color: var(--wr-accent-50, #fffdf6);
}

textarea.wr-input {  min-height: 6rem;  resize: vertical;}
textarea.wr-input.teaser {}
textarea.wr-input.descr {  min-height: 25rem !important;}

/* Checkboxgruppen */
.wr-checkgroup {  display: grid;gap: 0.5rem;  align-items: center;}
.wr-checkgroup--1col {  grid-template-columns: 1fr;}
.wr-checkgroup--2col {  grid-template-columns: repeat(2, 1fr);}
.wr-checkitem { display: flex;align-items: center;gap: 0.5rem;font-size: var(--input-fz);}
.wr-checkitem input[type="checkbox"] {  margin: 0;transform: scale(1.2);}

/* Optional helper classes */
.mb-1 { margin-bottom: 1rem;}
.mt-1 {  margin-top: 1rem;}
.text-right {  text-align: right;}
.text-left {  text-align: left;}

/* === Select-Optik (Admin-Formulare) === */
select.wr-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
font: inherit;
color: #111;
background-color: #fff;
border: 1px solid var(--color-grau-hell);
border-radius: 8px;
padding: 0.5rem 2rem 0.5rem 0.625rem;
background-image: linear-gradient(to bottom, var(--color-braun), var(--color-grau-hell));
background-position: right 0.75rem center, 0 0;
transition: border-color .2s, box-shadow .2s;
}

select.wr-select:focus {
border-color: var(--wr-accent-300, #c8b060);
box-shadow: 0 0 0 2px rgba(200, 176, 96, .25);
outline: none;
}

/* ====================================
Allgemeine Buttons auf Token-Basis
==================================== */

button.button,a.button {display: inline-block;width: 100%;font: inherit;padding: 0.625rem 0rem;
border: 1px solid var(--color-gruen);border-radius: 8px;background-image: linear-gradient(to bottom, var(--color-gruen), var(--color-gruen));
color: #fff;text-align: center;text-decoration: none;transition: border-color 0.2s, box-shadow 0.2s, background 0.3s;
}
div.ek-warenkorb form button.button--disabled {opacity: .8;filter: blur(0.9px);pointer-events: none;}


button.button:hover,a.button:hover {  background-image: linear-gradient(to bottom, var(--color-gruen), #55862f);}
button.button:focus,a.button:focus {border-color: var(--color-rot);box-shadow: 0 0 0 2px rgba(128, 53, 44, 0.25);outline: none;}

/* ------------------------------------ */

button.button.zwei,a.button.eins {background-image: linear-gradient(to bottom, var(--color-gruen), var(--color-gruen));}
button.button.zwei,a.button.zwei {background-image: linear-gradient(to bottom, var(--color-braun), var(--color-braun));}

button.button.alert,
a.button.alert {background-image: linear-gradient(to bottom, var(--color-orange), var(--color-rot));}

/* Feld-Container ausblendbar, ohne Layoutsprung */
.wr-field[hidden] {display: none !important;}
/* Typeahead / Suggest-Liste (Admin) */
.ta-list:empty {display: none;}
.ta-list:empty::before {display: none !important;content: none !important;}

.ta-list,
.wr-suggest {
position: absolute;
z-index: 20;
margin-top: 0.25rem;
max-height: 16rem;
overflow: auto;
background: #fff;
border: 1px solid var(--color-grau-hell);
border-radius: 8px;
box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
padding: 0.25rem;
}

.ta-list button,.wr-suggest__item { display: block;width: 100%;text-align: left;padding: 0.5rem 0.625rem;border: 0;background: transparent;cursor: pointer;font: inherit;}

.ta-list button:hover,
.wr-suggest__item:hover { background: #f6f6f6; }