/* Auswahl der Komponenten einer Platte: Produktseite, Warenkorb und Bestellliste */
#page.site .fieldset_platter {
  min-width        : 0;
  margin           : 12px 0 0 0;
  padding          : 0;
  border           : none;
  background-color : transparent;
}

/* Personenrechner */
#page.site .fieldset_platter .div_persons {
  display               : grid;
  grid-template-columns : 1fr auto;
  grid-template-areas   :
    "label stepper"
    "info  stepper";
  column-gap            : 12px;
  align-items           : center;
  padding               : 8px 0 12px 0;
  border-bottom         : 2px solid var(--c-text-secondary); /* trennt den Rechner von den Komponenten */
}

#page.site .fieldset_platter .label_persons {
  grid-area   : label;
  font-size   : 14px;
  line-height : 20px;
  font-weight : 500;
  font-family : var(--c-font-familiy-title);
  color       : var(--c-text-title);
}

#page.site .fieldset_platter .span_personsInfo {
  grid-area   : info;
  font-size   : 12px;
  line-height : 18px;
  color       : var(--c-text-secondary);
}

#page.site .fieldset_platter .div_personsStepper {
  grid-area : stepper;
}

#page.site .fieldset_platter .input_persons {
  padding    : 0;
  text-align : center;
}

/* Row */
#page.site .fieldset_platter .div_platterRow {
  display               : grid;
  grid-template-columns : 1fr auto;
  grid-template-areas   :
    "name  stepper"
    "price stepper"
    "offer stepper";
  column-gap            : 12px;
  align-items           : center;
  padding               : 8px 0;
  border-bottom         : 1px solid var(--c-border);
}

#page.site .fieldset_platter .label_platterName {
  grid-area   : name;
  font-size   : 14px;
  line-height : 20px;
  font-weight : 500;
  font-family : var(--c-font-familiy-title);
  color       : var(--c-text-title);
}

#page.site .fieldset_platter .div_platterPrice {
  grid-area   : price;
  font-size   : 12px;
  line-height : 18px;
  color       : var(--c-text-secondary);
}
#page.site .fieldset_platter .del_platterPriceOld {
  margin-right : 0.5em;
  color        : var(--c-text-placeholder);
}
#page.site .fieldset_platter .del_platterPriceOld:empty {
  display : none;
}

#page.site .fieldset_platter .span_platterOffer {
  grid-area   : offer;
  font-size   : 12px;
  line-height : 18px;
  font-weight : 500;
  font-family : var(--c-font-familiy-title);
}
#page.site .fieldset_platter .span_platterOffer:empty {
  display : none;
}
#page.site .fieldset_platter .c-offer .span_platterOffer {
  color : var(--c-error);
}
#page.site .fieldset_platter .c-individual-price .span_platterOffer {
  color : var(--c-button);
}

/* Stepper: Zahl und Einheit stehen zusammen in der Mitte des Feldes */
#page.site .fieldset_platter .div_platterStepper {
  grid-area : stepper;
}
#page.site .fieldset_platter .div_platterStepper,
#page.site .fieldset_platter .div_personsStepper {
  display               : grid;
  grid-template-columns : 40px 80px 40px;
  column-gap            : 4px;
  align-items           : center;
}

#page.site .fieldset_platter .div_platterField {
  display          : flex;
  justify-content  : center;
  align-items      : center;
  column-gap       : 4px;
  height           : 40px;
  border           : 1px solid var(--c-border);
  border-radius    : var(--c-radius);
  background-color : white;
}
#page.site .fieldset_platter .div_platterField:focus-within {
  outline : 1px solid var(--c-outline);
}

/* Die Breite setzt fitGrams() auf die Länge der Zahl */
#page.site .fieldset_platter .input_platterGrams,
#page.site .fieldset_platter .input_platterGrams:focus {
  width            : 3ch;
  height           : 38px;
  padding          : 0;
  border           : none;
  outline          : none;
  background-color : transparent;
  text-align       : center;
}

/* margin: der Rahmen um Zahl und Einheit kommt sonst aus button-input.css (div:has(>input):has(>span)) */
#page.site .fieldset_platter .span_platterUnit {
  margin      : 0;
  font-size   : 14px;
  font-weight : 500;
  font-family : var(--c-font-familiy-title);
  color       : var(--c-text-secondary);
}

#page.site .fieldset_platter .button_platterMinus,
#page.site .fieldset_platter .button_platterPlus {
  height              : 40px;
  width               : 40px;
  padding             : 0;
  border              : 1px solid var(--c-border);
  border-radius       : var(--c-radius);
  background-color    : white;
  background-repeat   : no-repeat;
  background-size     : 14px;
  background-position : center center;
}
#page.site .fieldset_platter .button_platterMinus {
  background-image : url(/wp-content/plugins/custom/assets/minus-icon-dark.svg);
}
#page.site .fieldset_platter .button_platterPlus {
  background-image : url(/wp-content/plugins/custom/assets/plus-icon-dark.svg);
}
#page.site .fieldset_platter .button_platterMinus:hover,
#page.site .fieldset_platter .button_platterPlus:hover {
  background-color : var(--c-background-dark);
}
#page.site .fieldset_platter .button_platterMinus:focus-visible,
#page.site .fieldset_platter .button_platterPlus:focus-visible {
  outline : 1px solid var(--c-outline);
}

/* Auf Platte anrichten: Checkbox, Bezeichnung, rechts der Preis. Rahmen, Hintergrund und Outline
   kommen sonst aus button-input.css (div:has(>input):has(>span)) */
#page.site .fieldset_platter .div_arrange {
  display          : flex;
  align-items      : center;
  column-gap       : 8px;
  padding          : 8px 0;
  border           : none;
  border-bottom    : 1px solid var(--c-border);
  border-radius    : 0;
  background-color : transparent;
}
#page.site .fieldset_platter .div_arrange:focus-within {
  outline : none;
}

#page.site .fieldset_platter .input_arrange {
  flex-shrink : 0;
  margin      : 0;
}

#page.site .fieldset_platter .label_arrange {
  margin      : 0;
  font-size   : 14px;
  line-height : 20px;
  font-weight : 500;
  font-family : var(--c-font-familiy-title);
  color       : var(--c-text-title);
  cursor      : pointer;
}

#page.site .fieldset_platter .span_arrangePrice {
  margin      : 0 0 0 auto;
  font-size   : 12px;
  line-height : 18px;
  font-weight : 400;
  font-family : var(--c-font-familiy-text);
  color       : var(--c-text-secondary);
}

#page.site .fieldset_platter .div_error {
  margin-top : 4px;
}