.hover[data-v-e2997864] {
  border: solid 2px cornflowerblue;
}
.hover.forbidden[data-v-e2997864] {
  border-color: salmon;
}
.container[data-v-e2997864] {
  padding: 2em;
  margin-bottom: 1em;
  height: auto;
  padding-left: 4px;
}
.container .row[data-v-e2997864] {
  display: flex;
  align-items: center;
}
.container .row.space[data-v-e2997864] {
  justify-content: space-between;
}
.container .drag-indicator[data-v-e2997864] {
  display: flex;
  flex-direction: column;
  margin-right: 1em;
}
.container .drag-indicator scu-icon[data-v-e2997864]:not(:first-child) {
  margin-top: -4px;
}/**
 * Styleguide conform variables, mostly provided by CoreUI.
 * A comprehensive list can be found here: https://core-ui.schwarz/design-guidelines/colors
 */
[data-v-563b171e]:root {
  /* grey scales */
  --sit-color-eggshell: #f8f8f8;
  --sit-color-lightgrey: #ededed;
  --sit-color-grey: #d2d2d2;
  --sit-color-darkgrey: #a9a9a9;
  --sit-color-lightblack: #464646;
  /** spaces */
  /* xs base: 8px */
  --sit-space-xs: 0.5rem;
  /* s base: 16px */
  --sit-space-s: 1rem;
  /* m base: 24px */
  --sit-space-m: 1.5rem;
  /* l base: 32px */
  --sit-space-l: 2rem;
  /* xl base: 64px */
  --sit-space-xl: 4rem;
  /* xxl base: 128px */
  --sit-space-xxl: 8rem;
  --honeywell-width: 320px;
}
:root [scu-theme=kaufland][data-v-563b171e] {
  --background-image: url("../../../styles/assets/frau_vorm_regal.png");
}

/**
/* The CSS variables below are mapped to specific core ui variables for easier usage.
/* Since they are depending on the current scu-theme the selector must not be [scu-theme] instead
/* of :root. Otherwise they values would not update accordingly.
*/
[scu-theme][data-v-563b171e] {
  /* main theme color */
  --sit-color-primary: var(--brand-primary-5);
  /* status colors */
  --sit-color-green: var(--green-5);
  --sit-color-orange: var(--orange-5);
  --sit-color-red: var(--red-5);
}

/** Shorthand for applying horizontal margins */
/** Shorthand for applying vertical margins */
/**
 * Breakpoints might be consistently applied via the defined breakpoints (s, m or l)
 * @param {string} $breakpoint - the (globally defined) breakpoint
 * @param {string} $min-max - Whether the breakpoint should be considered as min or max width. Default: max
 *
 * @example breakpoint(m)
 * @example breakpoint(m, min)
 * @see https://vue-blueprint.schwarz/advanced/folders.html#styles
 */
.wrapper[data-v-563b171e] {
  display: flex;
  align-items: center;
}
.wrapper scu-tile.usecase[data-v-563b171e] {
  width: 382px;
  height: 66px;
  background-color: var(--sit-color-eggshell);
  margin-right: 1em;
}
.wrapper scu-tile.usecase scu-dropdown[data-v-563b171e] {
  margin-top: 1em;
  margin-left: 1em;
  width: 85%;
}
.wrapper scu-tile.usecase scu-icon-button[data-v-563b171e] {
  margin-top: 1em;
}
.wrapper scu-toggle-button[data-v-563b171e] {
  margin-right: 1em;
}/**
 * Styleguide conform variables, mostly provided by CoreUI.
 * A comprehensive list can be found here: https://core-ui.schwarz/design-guidelines/colors
 */
[data-v-a95f8970]:root {
  /* grey scales */
  --sit-color-eggshell: #f8f8f8;
  --sit-color-lightgrey: #ededed;
  --sit-color-grey: #d2d2d2;
  --sit-color-darkgrey: #a9a9a9;
  --sit-color-lightblack: #464646;
  /** spaces */
  /* xs base: 8px */
  --sit-space-xs: 0.5rem;
  /* s base: 16px */
  --sit-space-s: 1rem;
  /* m base: 24px */
  --sit-space-m: 1.5rem;
  /* l base: 32px */
  --sit-space-l: 2rem;
  /* xl base: 64px */
  --sit-space-xl: 4rem;
  /* xxl base: 128px */
  --sit-space-xxl: 8rem;
  --honeywell-width: 320px;
}
:root [scu-theme=kaufland][data-v-a95f8970] {
  --background-image: url("../../styles/assets/frau_vorm_regal.png");
}

/**
/* The CSS variables below are mapped to specific core ui variables for easier usage.
/* Since they are depending on the current scu-theme the selector must not be [scu-theme] instead
/* of :root. Otherwise they values would not update accordingly.
*/
[scu-theme][data-v-a95f8970] {
  /* main theme color */
  --sit-color-primary: var(--brand-primary-5);
  /* status colors */
  --sit-color-green: var(--green-5);
  --sit-color-orange: var(--orange-5);
  --sit-color-red: var(--red-5);
}

/** Shorthand for applying horizontal margins */
/** Shorthand for applying vertical margins */
/**
 * Breakpoints might be consistently applied via the defined breakpoints (s, m or l)
 * @param {string} $breakpoint - the (globally defined) breakpoint
 * @param {string} $min-max - Whether the breakpoint should be considered as min or max width. Default: max
 *
 * @example breakpoint(m)
 * @example breakpoint(m, min)
 * @see https://vue-blueprint.schwarz/advanced/folders.html#styles
 */
.page[data-v-a95f8970] {
  max-width: 1792px !important;
}
@media (max-width: 600px) {
.page[data-v-a95f8970] {
    width: var(--honeywell-width);
    justify-content: space-around;
}
}
.page .main-headline[data-v-a95f8970] {
  text-decoration: underline;
  margin-bottom: 1em;
}
.page .ruleheader[data-v-a95f8970] {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1em;
}
.page scu-tile.rule[data-v-a95f8970] {
  padding: 2em;
  margin-bottom: 1em;
}
.page scu-tile.usecase[data-v-a95f8970] {
  width: 382px;
  height: 66px;
  background-color: var(--sit-color-eggshell);
  margin-right: 1em;
}
.page scu-tile.usecase scu-dropdown[data-v-a95f8970] {
  margin-top: 1em;
  margin-left: 1em;
}
.page scu-tile .row[data-v-a95f8970] {
  display: flex;
  align-items: center;
}
.page scu-tile .row.space[data-v-a95f8970] {
  justify-content: space-between;
}
.page scu-tile .row div.wrapper[data-v-a95f8970] {
  margin-top: 1em;
}
.page scu-tile .row scu-icon-button[data-v-a95f8970] :not(:last-child) {
  display: none;
  margin-left: 0;
}
.page scu-tile .row scu-text-input[data-v-a95f8970] {
  margin-right: 1em;
}
.page scu-tile .row scu-dropdown[data-v-a95f8970] {
  margin-right: 1em;
}